From a5719c023bce546322421e0b9c59a0b958c56f82 Mon Sep 17 00:00:00 2001
From: Limchansol <lchans0319@gmail.com>
Date: Sun, 7 Apr 2024 15:10:49 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=B1=20=EA=B5=90=EA=B3=BC=EA=B3=BC?=
 =?UTF-8?q?=EC=A0=95=20=ED=91=9C=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20(#200)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../academics/helper/courses/CourseList.tsx   |  2 +-
 .../helper/courses/CourseListHeader.tsx       |  2 +-
 .../helper/courses/CourseListRow.tsx          | 39 +++++++++++++------
 3 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/app/[locale]/academics/helper/courses/CourseList.tsx b/app/[locale]/academics/helper/courses/CourseList.tsx
index e9d400c2d..8dd1d4df0 100644
--- a/app/[locale]/academics/helper/courses/CourseList.tsx
+++ b/app/[locale]/academics/helper/courses/CourseList.tsx
@@ -14,7 +14,7 @@ export default function CourseList({ courses, selectedOption }: CourseListProps)
   return (
     <div className="border-b border-neutral-200 px-5">
       <CourseListHeader />
-      <ul className="divide-y divide-dashed divide-neutral-200">
+      <ul className="sm:divide-y sm:divide-dashed sm:divide-neutral-200">
         {sortedCourses.map((course) => (
           <CourseListRow course={course} key={course.code} />
         ))}
diff --git a/app/[locale]/academics/helper/courses/CourseListHeader.tsx b/app/[locale]/academics/helper/courses/CourseListHeader.tsx
index 6f87fcb8b..81baddd1c 100644
--- a/app/[locale]/academics/helper/courses/CourseListHeader.tsx
+++ b/app/[locale]/academics/helper/courses/CourseListHeader.tsx
@@ -4,7 +4,7 @@ import { COURSE_ROW_ITEM_WIDTH } from './CourseListRow';
 
 export default function CourseListHeader() {
   return (
-    <h5 className="flex h-11 items-center whitespace-nowrap border-y border-neutral-100 bg-neutral-100 px-4 text-md">
+    <h5 className="hidden h-11 items-center whitespace-nowrap border-y border-neutral-100 bg-neutral-100 px-4 text-md sm:flex">
       <span className={COURSE_ROW_ITEM_WIDTH.name}>교과목명</span>
       <span className={COURSE_ROW_ITEM_WIDTH.classification}>교과목 구분</span>
       <span className={COURSE_ROW_ITEM_WIDTH.code}>교과목 번호</span>
diff --git a/app/[locale]/academics/helper/courses/CourseListRow.tsx b/app/[locale]/academics/helper/courses/CourseListRow.tsx
index 50eb4e9c5..bfafd324e 100644
--- a/app/[locale]/academics/helper/courses/CourseListRow.tsx
+++ b/app/[locale]/academics/helper/courses/CourseListRow.tsx
@@ -7,16 +7,16 @@ import useModal from '@/utils/hooks/useModal';
 import CourseDetailModal from './CourseDetailModal';
 
 export const COURSE_ROW_ITEM_WIDTH = {
-  name: 'w-[16rem]',
-  classification: 'w-[10rem]',
-  code: 'w-[13rem]',
-  credit: 'w-[6rem]',
-  grade: 'w-[5.25rem]',
+  name: 'sm:w-[16rem]',
+  classification: 'sm:w-[10rem]',
+  code: 'sm:w-[13rem]',
+  credit: 'sm:w-[6rem]',
+  grade: 'sm:w-[5.25rem]',
 } as const;
 
 export default function CourseListRow({ course }: { course: Course }) {
   return (
-    <li className="flex h-14 items-center px-4 text-md">
+    <li className="grid grid-cols-[auto,_auto,_1fr] grid-rows-3 gap-1 px-7 py-6 text-md odd:bg-neutral-50 sm:flex sm:h-14 sm:items-center sm:gap-0 sm:px-4 sm:py-0 sm:odd:bg-white">
       <NameCell name={course.name} course={course} />
       <ClassificationCell classification={course.classification} />
       <CodeCell code={course.code} />
@@ -30,7 +30,9 @@ function NameCell({ name, course }: { name: string; course: Course }) {
   const { openModal, closeModal } = useModal();
 
   return (
-    <span className={`${COURSE_ROW_ITEM_WIDTH.name} pr-2`}>
+    <span
+      className={`${COURSE_ROW_ITEM_WIDTH.name} order-1 col-span-3 pr-2 text-base font-semibold sm:text-md sm:font-normal`}
+    >
       <button
         className="text-left"
         onClick={() => openModal(<CourseDetailModal course={course} onClose={closeModal} />)}
@@ -43,23 +45,38 @@ function NameCell({ name, course }: { name: string; course: Course }) {
 
 function ClassificationCell({ classification }: { classification: string }) {
   return (
-    <span className={`${COURSE_ROW_ITEM_WIDTH.classification} whitespace-nowrap text-neutral-400`}>
+    <span
+      className={`${COURSE_ROW_ITEM_WIDTH.classification} order-3 whitespace-nowrap pr-1 text-neutral-400 sm:order-2 sm:pr-0`}
+    >
       {classification}
     </span>
   );
 }
 
 function CodeCell({ code }: { code: string }) {
-  return <span className={`${COURSE_ROW_ITEM_WIDTH.code} text-neutral-400`}>{code}</span>;
+  return (
+    <span
+      className={`${COURSE_ROW_ITEM_WIDTH.code} order-2 col-span-3 text-neutral-500 sm:order-3 sm:text-neutral-400`}
+    >
+      {code}
+    </span>
+  );
 }
 
 function CreditCell({ credit }: { credit: number }) {
-  return <span className={`${COURSE_ROW_ITEM_WIDTH.credit} pl-2 text-neutral-400`}>{credit}</span>;
+  return (
+    <span className={`${COURSE_ROW_ITEM_WIDTH.credit} order-5 text-neutral-400 sm:order-4 sm:pl-2`}>
+      {credit}
+      <span className="sm:hidden">학점</span>
+    </span>
+  );
 }
 
 function GradeCell({ grade }: { grade: string }) {
   return (
-    <span className={`${COURSE_ROW_ITEM_WIDTH.grade} whitespace-nowrap text-neutral-400`}>
+    <span
+      className={`${COURSE_ROW_ITEM_WIDTH.grade} order-4 whitespace-nowrap pr-1 text-neutral-400 sm:order-5 sm:pr-0`}
+    >
       {grade}
     </span>
   );