📱 선택형 컴포넌트 반응형 (#146)

* fix: 연구 그룹 본문 반응형 * fix: 선택형 페이지들 반응형 추가
wafflestudio · Mar 6, 2024 · 2c5823c · 2c5823c
1 parent c02c9ad
commit 2c5823c
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 21 deletions.
diff --git a/app/[locale]/about/directions/page.tsx b/app/[locale]/about/directions/page.tsx
@@ -38,7 +38,6 @@ export default async function DirectionsPage({ searchParams }: DirectionsPagePro
           names={directionList.map((d) => d.name)}
           selectedItemName={selectedDirection?.name ?? ''}
           path={directionsPath}
-          listGridColumnClass="grid-cols-[repeat(4,_12.5rem)]"
         />
         {selectedDirection ? (
           <DirectionsDetails direction={selectedDirection} />

diff --git a/app/[locale]/about/student-clubs/page.tsx b/app/[locale]/about/student-clubs/page.tsx
@@ -29,7 +29,6 @@ export default async function StudentClubsPage({ searchParams }: StudentClubsPag
         names={clubs.map((club) => club.name)}
         selectedItemName={selectedClub?.name ?? ''}
         path={clubPath}
-        listGridColumnClass="grid-cols-[repeat(4,_12.5rem)]"
       />
       {selectedClub ? (
         <ClubDetails club={selectedClub} />

diff --git a/app/[locale]/research/centers/ResearchCentersPageContent.tsx b/app/[locale]/research/centers/ResearchCentersPageContent.tsx
@@ -31,7 +31,7 @@ export default function ResearchCentersPageContent({ centers }: { centers: Resea
         names={centers.map((center) => center.name)}
         selectedItemName={selectedCenter?.name ?? ''}
         path={researchCentersPath}
-        listGridColumnClass="grid-cols-[12.5rem_13.75rem_12.5rem]"
+        listGridColumnClass="lg:grid-cols-[repeat(auto-fit,minmax(_200px,_auto))]"
         setSelected={setSelected}
       />
       {selectedCenter ? (

diff --git a/app/[locale]/research/groups/ResearchGroupDetails.tsx b/app/[locale]/research/groups/ResearchGroupDetails.tsx
@@ -12,9 +12,11 @@ interface ResearchGroupDetailProps {
 
 export default function ResearchGroupDetails({ group }: ResearchGroupDetailProps) {
   return (
-    <div className="bg-[#fafafa] pl-[100px] pr-[350px] pt-[50px] pb-[100px]">
-      <h2 className="font-bold text-[24px] leading-loose mb-[18px]">{group.name} 연구 그룹</h2>
-      <div className="bg-white p-[40px] w-[780px]">
+    <div className="bg-neutral-100 pt-8 pb-9 sm:pl-[100px] sm:pr-[340px] sm:pt-[50px] sm:pb-[100px]">
+      <h2 className="mb-6 sm:mb-[18px] ml-8 mr-7 sm:mx-0 font-bold text-base sm:text-[24px] leading-loose whitespace-nowrap">
+        {group.name} 연구 그룹
+      </h2>
+      <div className="bg-white mx-7 sm:mx-0 p-[18px] sm:p-[40px] max-w-[780px]">
         <HTMLViewer htmlContent={group.description} />
       </div>
       <div className="relative h-[200px] mt-6">

diff --git a/app/[locale]/research/groups/ResearchGroupLabs.tsx b/app/[locale]/research/groups/ResearchGroupLabs.tsx
@@ -7,8 +7,10 @@ import { researchLabs } from '@/utils/segmentNode';
 
 export default function ResearchGroupLabs({ labs }: { labs: { id: number; name: string }[] }) {
   return (
-    <div className="mt-[40px]">
-      <h3 className="font-bold text-[20px] mb-[4px] pl-2.5 py-1 leading-loose">연구실</h3>
+    <div className="mt-10 mx-7 sm:mx-0">
+      <h3 className="font-bold text-md sm:text-[20px] mb-[4px] sm:pl-2.5 sm:py-1 leading-loose whitespace-nowrap">
+        연구실
+      </h3>
       <ul>
         {labs.map((lab) => (
           <ResearchGroupLab lab={lab} key={lab.id} />
@@ -22,10 +24,10 @@ const labPath = getPath(researchLabs);
 
 function ResearchGroupLab({ lab }: { lab: { id: number; name: string } }) {
   return (
-    <li className="mb-[0.125rem] w-fit">
-      <Link href={`${labPath}/${lab.id}`} className="flex h-7 gap-2.5 px-3 items-center group">
+    <li className="mb-[0.125rem] w-fit whitespace-nowrap">
+      <Link href={`${labPath}/${lab.id}`} className="flex h-7 gap-2.5 sm:px-3 items-center group">
         <div className="border border-main-orange rounded-full w-2.5 h-2.5 group-hover:bg-main-orange duration-300" />
-        <span className="font-medium text-[14px] group-hover:text-main-orange duration-300">
+        <span className="font-medium text-sm sm:text-md group-hover:text-main-orange duration-300">
           {lab.name}
         </span>
       </Link>

diff --git a/app/[locale]/research/groups/ResearchGroupsPageContent.tsx b/app/[locale]/research/groups/ResearchGroupsPageContent.tsx
@@ -31,12 +31,12 @@ export default function ResearchGroupsPageContent({ groups }: ResearchGroupsPage
 
   return (
     <PageLayout titleType="big" titleMargin="mb-[44px]" bodyStyle={{ padding: 0 }}>
-      <div className="pl-[100px] pr-[350px]">
+      <div className="px-7 sm:pl-[100px] sm:pr-[320px]">
         <SelectionList
           names={groups.map((group) => group.name)}
           selectedItemName={selectedGroup?.name ?? ''}
           path={researchGroupsPath}
-          listGridColumnClass="grid-cols-[13.25rem_8.75rem_13.75rem_14.5rem]"
+          listGridColumnClass="lg:grid-cols-[repeat(auto-fit,minmax(_236px,_auto))]"
           setSelected={setSelected}
         />
       </div>

diff --git a/components/common/selection/SelectionList.tsx b/components/common/selection/SelectionList.tsx
@@ -14,7 +14,8 @@ interface SelectionListProps {
   names: readonly string[];
   selectedItemName: string;
   path: string;
-  listGridColumnClass?: string; // tailwind class
+  /** lg:grid-cols-[repeat(auto-fit,_minmax({itemWidth}px,_auto))] */
+  listGridColumnClass?: string;
   listItemPadding?: string; // tailwlind class
   setSelected?: Dispatch<SetStateAction<string>>;
 }
@@ -23,16 +24,17 @@ export default function SelectionList({
   names,
   selectedItemName,
   path,
-  listGridColumnClass = 'grid-cols-[repeat(4,_max-content)]',
+  listGridColumnClass = 'lg:grid-cols-[repeat(auto-fit,_minmax(200px,_auto))]',
   listItemPadding = '',
   setSelected,
 }: SelectionListProps) {
   const selectItem = (itemName: string) => {
     setSelected?.(itemName);
   };
+  const gridStyle = `grid-cols-[repeat(2,_1fr)] ${listGridColumnClass}`;
 
   return (
-    <ul className={`grid ${listGridColumnClass} gap-3 mb-9 pt-[44px]`}>
+    <ul className={`grid ${gridStyle} gap-3 mb-6 sm:mb-9 pt-7 sm:pt-[44px]`}>
       {names.map((name) => (
         <SelectionItem
           key={name}
@@ -56,7 +58,7 @@ interface SelectionItemProps {
 }
 
 function SelectionItem({ name, isSelected, path, padding, selectItem }: SelectionItemProps) {
-  const itemCommonStyle = `flex items-center justify-center w-full h-10 py-3 text-center text-sm tracking-wide font-yoon ${padding}`;
+  const itemCommonStyle = `flex items-center justify-center w-full h-10 py-3 text-center text-[11px] sm:text-sm lg:text-[15px] tracking-wide font-yoon ${padding}`;
   const triangleLength = 1.25; // 20px
   const radius = 0.125; // 2px
   const dropShadow = 'drop-shadow(1px 2px 2px rgba(0,0,0,0.3)';

diff --git a/components/layout/pageLayout/PageLayout.tsx b/components/layout/pageLayout/PageLayout.tsx
@@ -19,14 +19,14 @@ interface PageLayoutProps {
 }
 
 export const PAGE_PADDING_LEFT_PX = 100;
-export const PAGE_PADDING_RIGHT_PX = 360;
+export const PAGE_PADDING_RIGHT_PX = 340;
 export const PAGE_PADDING_TOP_PX = 44;
 export const PAGE_PADDING_BOTTOM_PX = 150;
 
 /**
  * 본문 기본 스타일
  * padding-left: 100px
- * padding-right: 350px (서브내비 자리까지 확보)
+ * padding-right: 340px (서브내비 자리까지 확보)
  * padding-top: 44px
  * padding-bottom: 150px
  * background-color: white
@@ -54,7 +54,7 @@ export default function PageLayout({
       />
       <div
         className={
-          'bg-white px-5 py-7 sm:pl-[100px] sm:pr-[360px] sm:pt-[44px] sm:pb-[150px] relative'
+          'bg-white px-5 py-7 sm:pl-[100px] sm:pr-[340px] sm:pt-[44px] sm:pb-[150px] relative'
         }
         style={bodyStyle}
       >

diff --git a/components/layout/pageLayout/PageTitle.tsx b/components/layout/pageLayout/PageTitle.tsx
@@ -79,7 +79,7 @@ interface LoactionText {
 }
 
 function LocationText({ path, name, isCurrent }: LoactionText) {
-  const textStyle = 'text-md font-normal tracking-[.02em]';
+  const textStyle = 'text-xs sm:text-md font-normal tracking-[.02em]';
 
   return isCurrent ? (
     <button className={`${textStyle} hover:text-main-orange`} onClick={refreshPage}>