📱 교과과정 표 모바일 (#200)

wafflestudio · Apr 7, 2024 · a5719c0 · a5719c0
1 parent 0b8d2b0
commit a5719c0
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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>
   );