feat(fe): create course detail home

apps/frontend/app/(client)/(main)/_components/Cover.tsx

@@ -10,7 +10,7 @@ const bgColors: { [key: string]: string } = {
   contest: 'bg-gradient-to-b from-[#7BD9D3] to-[#A7A5A1]',
   problem: 'bg-gradient-to-b from-[#5861B7] to-[#99978E]',
   notice: 'bg-gradient-to-b from-[#2F4672] to-[#4671B3]',
-  course: 'bg-gradient-to-b from-[#9784E4] to-[#999999]'
+  course: 'bg-gradient-to-b from-[#7460C5] to-[#CAC1EE]'
 }
 
 const icons: { [key: string]: string } = {

apps/frontend/app/(client)/(main)/course/[courseId]/_components/AssignmentReminderBox.tsx

@@ -0,0 +1,15 @@
+export function AssignmentReminderBox() {
+  return (
+    <div className="mt-10 w-full border border-gray-300 p-10">
+      <h3 className="mb-2 text-lg font-bold">혜림님!</h3>
+      <div>
+        <h4 className="mb-8 font-bold">
+          아직 과제가 남아 있으니, 얼른 확인해 보세요! 😊
+        </h4>
+        <span className="text-xs text-gray-700 underline">
+          2주차 과제 바로 가기
+        </span>
+      </div>
+    </div>
+  )
+}

apps/frontend/app/(client)/(main)/course/[courseId]/_components/CourseInfoBox.tsx

@@ -0,0 +1,78 @@
+'use client'
+
+import Calendar from '@/public/icons/calendar-default.svg'
+import Person from '@/public/icons/person.svg'
+import Image from 'next/image'
+import { useSearchParams } from 'next/navigation'
+import { useState, useEffect } from 'react'
+
+export function CourseInfoBox() {
+  const searchParams = useSearchParams()
+  const courseId = searchParams.get('courseId')
+  const [courseCode, setcourseCode] = useState<string>()
+  const [courseName, setcourseName] = useState<string>()
+  const [courseSemester, setcourseSemester] = useState<string>()
+  const [profName, setprofName] = useState<string>()
+
+  useEffect(() => {
+    const fetch = () => {
+      try {
+        setcourseCode('SWE3011_41')
+        setcourseName('강의명은최대열세글자까지')
+        setcourseSemester('2025 Spring')
+        setprofName('박진영')
+      } catch (err) {
+        throw new Error('Failed to fetch data')
+      }
+    }
+    fetch()
+  }, [])
+
+  return (
+    <div className="relative m-4 flex h-[153px] w-[281px] flex-col justify-between rounded-xl p-4 shadow">
+      <div className="text-primary flex flex-col text-base font-semibold">
+        <span>[{courseCode}]</span>
+        <span>{courseName}</span>
+      </div>
+      <div>
+        <div className="flex flex-col gap-1">
+          <div className="flex">
+            <Image src={Calendar} alt="Calendar" height={20} />
+            <span className="ml-1 font-light">{courseSemester}</span>
+          </div>
+          <div className="flex">
+            <Image src={Person} alt="Person" height={20} />
+            <span className="ml-1 font-light">Prof. {profName}</span>
+          </div>
+        </div>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="119"
+          height="79"
+          viewBox="0 0 119 79"
+          fill="none"
+          className="absolute bottom-0 right-0"
+        >
+          <path
+            d="M143.953 75.5513C143.953 108.508 115.576 136.466 79 136.466C42.4238 136.466 14.047 108.508 14.047 75.5513C14.047 42.5946 42.4238 14.6368 79 14.6368C115.576 14.6368 143.953 42.5946 143.953 75.5513Z"
+            stroke="url(#paint0_linear_7977_23144)"
+            stroke-width="28.0939"
+          />
+          <defs>
+            <linearGradient
+              id="paint0_linear_7977_23144"
+              x1="79"
+              y1="0.589844"
+              x2="79"
+              y2="150.513"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stop-color="#9B8AE7" />
+              <stop offset="1" stop-color="#1F4C94" />
+            </linearGradient>
+          </defs>
+        </svg>
+      </div>
+    </div>
+  )
+}

apps/frontend/app/(client)/(main)/course/[courseId]/_components/OngoingAssignments.tsx

@@ -0,0 +1,101 @@
+'use client'
+
+import checkBlue from '@/public/icons/check-blue.svg'
+import checkGray from '@/public/icons/check-gray.svg'
+import type { Assignment } from '@/types/type'
+import Image from 'next/image'
+import { useEffect, useState } from 'react'
+
+export function OngoingAssignments() {
+  const [ongoings, setOngoings] = useState<Assignment[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const fetchAssignments = async () => {
+      try {
+        setLoading(true)
+        const response = await new Promise<Assignment[]>((resolve) =>
+          setTimeout(
+            () =>
+              resolve([
+                {
+                  id: 1,
+                  title: 'HelloWorld.java',
+                  startTime: new Date('2025-01-12'),
+                  endTime: new Date('2024-01-22'),
+                  group: { id: 'G1', groupName: 'Group A' },
+                  isGraded: true,
+                  status: 'ongoing'
+                },
+                {
+                  id: 2,
+                  title: 'HelloWorld.java',
+                  startTime: new Date('2025-01-12'),
+                  endTime: new Date('2024-01-22'),
+                  group: { id: 'G1', groupName: 'Group A' },
+                  isGraded: false,
+                  status: 'ongoing'
+                }
+              ]),
+            1000
+          )
+        )
+        setOngoings(response)
+      } catch (err) {
+        setError('Failed to fetch assignments')
+      } finally {
+        setLoading(false)
+      }
+    }
+    fetchAssignments()
+  }, [])
+
+  return (
+    <div className="p-10">
+      <h3 className="mb-10 text-lg font-bold">On-going Assignments</h3>
+      <table className="w-full border-collapse">
+        <thead>
+          <tr className="bg-gray-100">
+            <th className="px-4 py-2 font-medium">Title</th>
+            <th className="px-4 py-2 font-medium">Start Date</th>
+            <th className="px-4 py-2 font-medium">End Date</th>
+            <th className="px-4 py-2 font-medium">Submission</th>
+          </tr>
+        </thead>
+        <tbody>
+          {ongoings.map((assignment, index) => (
+            <tr key={assignment.id} className="border-b text-center">
+              <td className="px-4 py-2">{assignment.title}</td>
+              <td className="px-4 py-2">
+                {assignment.startTime.toLocaleDateString()}
+              </td>
+              <td className="px-4 py-2">
+                {assignment.endTime.toLocaleDateString()}
+              </td>
+              <td className="px-4 py-2">
+                {assignment.isGraded ? (
+                  <Image
+                    src={checkBlue}
+                    alt="ss"
+                    width={24}
+                    height={24}
+                    className="mr-2 inline-block"
+                  />
+                ) : (
+                  <Image
+                    src={checkGray}
+                    alt="ss"
+                    width={24}
+                    height={24}
+                    className="mr-2 inline-block"
+                  />
+                )}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}

apps/frontend/app/(client)/(main)/course/[courseId]/_components/RecentNotice.tsx

@@ -1,19 +1,34 @@
 'use client'
 
+import type { CourseNotice } from '@/types/type'
 import Link from 'next/link'
 import { useSearchParams } from 'next/navigation'
 import { useState, useEffect } from 'react'
 
-interface Notice {
-  id: number
-  title: string
-  isNew: boolean
+const formatDate = (date: Date) => {
+  const year = date.getFullYear()
+  const month = date.getMonth() + 1
+  const day = date.getDate()
+
+  return `${year}.${month}.${day}`
+}
+
+interface DateBadgeProps {
+  date: string
+}
+
+function DateBadge({ date }: DateBadgeProps) {
+  return (
+    <div className="text-primary mb-1 inline-block rounded-full bg-gray-100 px-3 py-1 text-xs font-semibold">
+      <span>{date}</span>
+    </div>
+  )
 }
 
 export function RecentNotice() {
   const searchParams = useSearchParams()
   const courseId = searchParams.get('courseId')
-  const [notices, setNotices] = useState<Notice[]>([])
+  const [notices, setNotices] = useState<CourseNotice[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
 
@@ -40,16 +55,23 @@
           {
             id: 999,
             title: '[필독] 3주차 과제 1번 문제 수정사항',
-            isNew: true
+            isNew: true,
+            date: new Date(2025, 1, 27)
           },
           {
             id: 998,
             title: '[필독] 확인된 공지명은 이렇게 보이는 식',
-            isNew: false
+            isNew: false,
+            date: new Date(2025, 1, 27)
           },
-          { id: 997, title: '[샘플] 공지 테스트 3', isNew: false }
+          {
+            id: 997,
+            title: '[샘플] 공지 테스트 3',
+            isNew: false,
+            date: new Date(2025, 1, 27)
+          }
         ])
       } catch (err) {
         setError('공지사항을 불러오는 중 오류가 발생했습니다.')
       } finally {
         setLoading(false)
@@ -60,14 +82,18 @@
   }, [])
 
   return (
-    <div className="w-full rounded-xl border border-gray-300 p-5">
-      <div className="mb-2 flex items-center justify-between">
-        <span className="font-semibold text-gray-800">최근 공지</span>
+    <div className="w-full rounded-xl p-4 shadow">
+      <div className="mb-2 flex justify-between">
+        <div>
+          <span className="text-primary mr-4 font-semibold">Recent Notice</span>
+          <span className="text-sm font-semibold">{notices.length}</span>
+        </div>
+
         <Link
           href={`/course/${courseId}/notice` as const}
-          className="flex items-center text-sm text-gray-500"
+          className="text-primary flex items-center text-xs font-semibold"
         >
-          show more <span className="ml-1">+</span>
+          SHOW MORE<span className="ml-1">+</span>
         </Link>
       </div>
 
@@ -82,18 +108,25 @@
               //TODO: 공지 요소 누르면 해당 페이지로 넘어가는 기능 필요!
               <li
                 key={notice.id}
-                className="flex border-b pb-1 text-sm text-gray-700"
+                className="flex justify-between border-b text-sm"
               >
-                <span
-                  className={`mr-2 text-xs ${
-                    notice.isNew ? 'text-green-500' : 'text-red-500'
-                  }`}
-                >
-                  ●
-                </span>
-                <span className={notice.isNew ? 'font-bold' : ''}>
-                  {notice.title}
-                </span>
+                <div>
+                  <span
+                    className={`mr-2 text-xs ${
+                      notice.isNew ? 'text-primary' : 'text-[#8A8A8A]'
+                    }`}
+                  >
+                    ●
+                  </span>
+                  <span
+                    className={`mr-2 text-xs ${
+                      notice.isNew ? 'text-black' : 'text-[#8A8A8A]'
+                    }`}
+                  >
+                    {notice.title}
+                  </span>
+                </div>
+                <DateBadge date={formatDate(notice.date)} />
               </li>
             ))
           ) : (