📱 졸업생 창업 기업 반응형 (#164)

* fix: 졸업생 창업기업 표 모바일 * fix: 졸업생 창업 기업 표 웹 반응형
wafflestudio · Mar 11, 2024 · 689b854 · 689b854
1 parent 8b734dc
commit 689b854
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 17 deletions.
diff --git a/app/[locale]/about/future-careers/CareerStat.tsx b/app/[locale]/about/future-careers/CareerStat.tsx
@@ -19,15 +19,15 @@ export default function CareerStat({ stat }: { stat: FutureCareers['stat'] }) {
 
   return (
     <div className="flex flex-col gap-3">
-      <div className="mb-[0.8rem] flex items-center gap-2">
-        <h3 className=" text-base font-bold leading-[1.625rem]">졸업생 진로 현황</h3>
+      <div className="flex items-center gap-2">
+        <h3 className="text-base font-bold">졸업생 진로 현황</h3>
         <Dropdown
           contents={stat.map((x) => x.year.toString())}
           selectedIndex={idx}
           onClick={setIdx}
         />
       </div>
-      <div className="mb-9 flex h-[14rem] w-[21.3rem] flex-col justify-stretch border-y-[1px] border-y-neutral-300 text-xs font-normal">
+      <div className="mb-9 flex h-[14rem] flex-col justify-stretch border-y-[1px] border-y-neutral-300 text-xs font-normal sm:w-[432px]">
         <TableHeader />
         {careerStatRows.map((company, index) => {
           return (
@@ -49,10 +49,10 @@ export default function CareerStat({ stat }: { stat: FutureCareers['stat'] }) {
 
 function TableHeader() {
   return (
-    <div className="flex flex-1 border-b-[1px] border-b-neutral-300 bg-neutral-100">
-      <div className="flex-1" />
+    <div className="flex flex-1 border-b border-b-neutral-300 bg-neutral-100">
+      <div className="w-[6.25rem]" />
       {careerStatCols.map((colName) => (
-        <div key={colName} className="flex w-[5rem] items-center justify-center">
+        <div key={colName} className="flex flex-1 items-center justify-center">
           <p className="text-sm">{colName}</p>
         </div>
       ))}

diff --git a/app/[locale]/about/future-careers/page.tsx b/app/[locale]/about/future-careers/page.tsx
@@ -22,9 +22,9 @@ export default async function GreetingsPage() {
 
 function CareerCompanies({ companies }: { companies: FutureCareers['companies'] }) {
   return (
-    <div>
-      <h3 className=" mb-[0.8rem] text-base font-bold leading-[1.625rem]">졸업생 창업 기업</h3>
-      <div className="inline-block border-y-[1px] border-neutral-200 text-sm font-normal">
+    <div className="sm:max-w-[780px]">
+      <h3 className="mb-3 text-base font-bold">졸업생 창업 기업</h3>
+      <div className="border-y border-neutral-200 text-sm font-normal">
         <CompanyTableHeader />
         <ol>
           {companies.map((company, index) => (
@@ -36,15 +36,15 @@ function CareerCompanies({ companies }: { companies: FutureCareers['companies']
   );
 }
 
-const TABLE_COLUMN_SIZE = ['w-[3.5rem]', 'w-[12.5rem]', 'w-80', 'w-20'];
+const TABLE_COLUMN_SIZE = ['sm:w-[3.5rem]', 'sm:w-[12.5rem]', 'sm:w-80', 'sm:w-20'];
 
 function CompanyTableHeader() {
   return (
-    <div className="flex h-10 items-center border-b-[1px] border-neutral-200 [&_p]:pl-3">
+    <div className="hidden h-10 items-center gap-3 whitespace-nowrap border-b border-neutral-200 sm:flex sm:px-3">
       <p className={TABLE_COLUMN_SIZE[0]}>연번</p>
       <p className={TABLE_COLUMN_SIZE[1]}>창업 기업명</p>
       <p className={TABLE_COLUMN_SIZE[2]}>홈페이지</p>
-      <p className={TABLE_COLUMN_SIZE[3]}>창업연도</p>
+      <p className={TABLE_COLUMN_SIZE[3] + ''}>창업연도</p>
     </div>
   );
 }
@@ -58,17 +58,22 @@ interface CompanyTableRowProps {
 
 function CompanyTableRow({ index, name, url, year }: CompanyTableRowProps) {
   return (
-    <li className="flex h-10 items-center odd:bg-neutral-100">
-      <p className={'pl-5 ' + TABLE_COLUMN_SIZE[0]}>{index}</p>
-      <p className={'pl-3 ' + TABLE_COLUMN_SIZE[1]}>{name}</p>
+    <li className="grid grid-cols-[22px,_auto,_1fr] items-center gap-x-1 px-7 py-6 odd:bg-neutral-100 sm:flex sm:h-10 sm:gap-3 sm:p-0 sm:px-3">
+      <p className={`text-sm text-neutral-400 sm:pl-5 ${TABLE_COLUMN_SIZE[0]}`}>{index}</p>
+      <p className={`text-md font-medium sm:text-sm sm:font-normal ${TABLE_COLUMN_SIZE[1]}`}>
+        {name}
+      </p>
       <a
-        className={'pl-3 text-link hover:underline ' + TABLE_COLUMN_SIZE[2]}
+        className={`order-last col-span-2 col-start-2 ${
+          url && 'mt-1'
+        } w-fit text-xs text-link hover:underline sm:order-none sm:mt-0 ${TABLE_COLUMN_SIZE[2]}
+        `}
         href={url}
         target="_blank"
       >
         {url}
       </a>
-      <p className={'pl-5 ' + TABLE_COLUMN_SIZE[3]}>{year}</p>
+      <p className={`pl-1 text-sm text-neutral-400 ${TABLE_COLUMN_SIZE[3]}`}>{year}</p>
     </li>
   );
 }