design: 반응형 적용

Author: hyeeuncho

src/features/dashboard/ui/OptionSection.tsx

@@ -24,7 +24,7 @@ const OptionSection = ({ responses, options }: OptionSectionProps) => {
 
             return (
               <div key={option.optionName}>
-                <p className="block mb-2 text-l">{option.optionName}</p>
+                <p className="block mb-2 text-sm md:text-lg">{option.optionName}</p>
                 <ul className="space-y-1">
                   {option.choices.map((choice: string) => (
                     <li key={choice}>

src/features/dashboard/ui/ResponseFilter.tsx

@@ -60,7 +60,7 @@ const ResponseFilter = ({
                         }}
                     />
                 </div>
-                <div className="flex items-center gap-2 ml-auto">
+                <div className="flex items-center gap-1 md:gap-2 ml-auto ">
                     <IconButton
                         iconPath={<img src={leftButton} alt="왼쪽 버튼" />}
                         onClick={() => {
@@ -71,7 +71,7 @@ const ResponseFilter = ({
                             }
                         }}
                     />
-                    <span>{Math.floor(currentIndex / 1) + 1} / {Math.ceil(responsesLength / 1)}</span>
+                    <span className='text-sm md:text-base w-10 text-center'>{Math.floor(currentIndex / 1) + 1} / {Math.ceil(responsesLength / 1)}</span>
                     <IconButton
                         iconPath={<img src={rightButton} alt="오른쪽 버튼" />}
                         onClick={() => {

src/features/dashboard/ui/ResponsesList.tsx

@@ -31,14 +31,14 @@ const ResponsesList = ({ listType }: ResponsesListProps) => {
         return (
             <div className="bg-white p-4 flex flex-col gap-2 mb-4">
                 <div className="flex justify-between items-center text-xs bg-white px-2 md:px-3 py-3">
-                    <p>{transTitle}</p>
+                    <p className='text-base font-bold'>{transTitle}</p>
                     <p>응답 {response.length}개</p>
                 </div>
 
                 {response.length === 0 ? (
                     <p>응답이 없습니다.</p>
                 ) : (
-                    <div className={isSummaryPage ? "max-h-[185px] overflow-y-auto space-y-2" : "space-y-2"}>
+                    <div className={isSummaryPage ? "h-full max-h-48 overflow-y-auto space-y-2" : "h-full overflow-y-auto space-y-2"}>
                         {response.map((response) => (
                             <div className="flex justify-between text-xs bg-gray-100 shadow-sm px-2 md:px-3 py-3 gap-2" key={response.id}>
                                 <p>{typeof response[key] === 'object' ? JSON.stringify(response[key]) : response[key]}</p>

src/pages/dashboard/ui/ResponsesManagementPage.tsx

@@ -23,7 +23,7 @@ const ResponsesManagementPage = () => {
     return (
         <DashboardLayout centerContent="WOOACON 2024" pinkBg={true}>
             <div className="flex flex-col px-2 md:px-4">
-                <h1 className="text-left font-semibold text-2xl py-4 md:py-6 pl-4">응답 {response.length}개</h1>
+                <h1 className="text-left font-semibold md:text-2xl text-xl py-4 md:py-6 pl-4">응답 {response.length}개</h1>
                 <div className="flex justify-center">
                     <ResponsesFilterBar
                         listType={listType}

src/shared/types/responseType.ts

@@ -108,4 +108,92 @@ export const responsesInfo: responsesData[] = [
             "티셔츠 사이즈": "L",
         },
     },
+    {
+        id: '1',
+        name: '고에진',
+        email: 'qwe@naver.com',
+        phone: '000-1234-5678',
+        grade: '1',
+        num: '20211234',
+        selectedOptions: {
+            "티셔츠 사이즈": "S",
+        },
+    },
+    {
+        id: '2',
+        name: '조히은',
+        email: 'asd@naver.com',
+        phone: '000-1212-3232',
+        grade: '2',
+        num: '20211234',
+        selectedOptions: {
+            "티셔츠 사이즈": "M",
+        },
+    },
+    {
+        id: '3',
+        name: '한승철',
+        email: 'qaz@naver.com',
+        phone: '000-3456-1234',
+        grade: '2',
+        num: '20211234',
+        selectedOptions: {
+            "티셔츠 사이즈": "L",
+        },
+    },
+    {
+        id: '4',
+        name: '민정준',
+        email: 'poi@naver.com',
+        phone: '000-1345-2346',
+        grade: '2',
+        num: '20211234',
+        selectedOptions: {
+            "티셔츠 사이즈": "L",
+        },
+    },
+    {
+        id: '5',
+        name: '고에진',
+        email: 'ghj@naver.com',
+        phone: '000-1234-5678',
+        grade: '4',
+        num: '20211234',
+        selectedOptions: {
+            "티셔츠 사이즈": "L",
+        },
+    },
+    {
+        id: '6',
+        name: '조히은',
+        email: 'jhe@naver.com',
+        phone: '000-1212-3232',
+        grade: '3',
+        num: '20211234',
+        selectedOptions: {
+            "티셔츠 사이즈": "L",
+        },
+    },
+    {
+        id: '7',
+        name: '한승철',
+        email: 'hsc@naver.com',
+        phone: '000-3456-1234',
+        grade: '1',
+        num: '20211234',
+        selectedOptions: {
+            "티셔츠 사이즈": "L",
+        },
+    },
+    {
+        id: '8',
+        name: '민정준',
+        email: 'mjj@naver.com',
+        phone: '000-1345-2346',
+        grade: '3',
+        num: '20211234',
+        selectedOptions: {
+            "티셔츠 사이즈": "L",
+        },
+    },
 ];

src/widgets/dashboard/ui/ResponsesFilterBar.tsx

@@ -10,7 +10,7 @@ const ResponsesFilterBar = ({
   setListType,
 }: ResponsesFilterBarProps) => {
   return (
-    <div className="flex items-center justify-between text-15 md:text-sm py-2 flex gap-20 font-semibold">
+    <div className="flex items-center justify-between text-sm md:text-base py-2 flex gap-20 ">
         <TextButton
           label="요약"
           onClick={() => setListType('summary')}