Feat[THKV-132]: 설문 생성페이지 리디자인 적용

src/components/common/Icon/assets/Calendar.tsx

@@ -10,13 +10,13 @@ const Calendar = ({
     <svg
       width={width}
       height={height}
-      viewBox='0 0 24 24'
+      viewBox='0 0 20 20'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
       {...props}
     >
       <path
-        d='M6.75 3V5.25M17.25 3V5.25M3 18.75V7.5C3 6.25736 4.00736 5.25 5.25 5.25H18.75C19.9926 5.25 21 6.25736 21 7.5V18.75M3 18.75C3 19.9926 4.00736 21 5.25 21H18.75C19.9926 21 21 19.9926 21 18.75M3 18.75V11.25C3 10.0074 4.00736 9 5.25 9H18.75C19.9926 9 21 10.0074 21 11.25V18.75'
+        d='M5.62433 2.49526V4.37026M14.3746 2.49414V4.36914M2.49805 15.618V6.24288C2.49805 5.2074 3.33755 4.36797 4.37313 4.36797H15.623C16.6585 4.36797 17.498 5.2074 17.498 6.24289V15.618M2.49805 15.618C2.49805 16.6535 3.33755 17.493 4.37313 17.493H15.623C16.6585 17.493 17.498 16.6535 17.498 15.618M2.49805 15.618V9.36829C2.49805 8.3328 3.33755 7.49337 4.37313 7.49337H15.623C16.6585 7.49337 17.498 8.3328 17.498 9.36829V15.618M11.873 10.6182H13.748M6.24802 12.4932H9.99802M9.9998 10.6182H10.0045V10.6229H9.9998V10.6182ZM9.9992 14.3684H10.0039V14.3731H9.9992V14.3684ZM8.1239 14.369H8.12859V14.3737H8.1239V14.369ZM6.24862 14.3684H6.2533V14.3731H6.24862V14.3684ZM11.8739 12.4963H11.8786V12.501H11.8739V12.4963ZM11.8745 14.369H11.8792V14.3737H11.8745V14.369ZM13.7498 12.4951H13.7545V12.4998H13.7498V12.4951Z'
         stroke={color}
         strokeWidth='1.5'
         strokeLinecap='round'

src/components/common/Input/Input.variant.tsx

@@ -1,7 +1,7 @@
 import { cva } from 'class-variance-authority';
 
 export const inputContainerVariants = cva(
-  'flex w-full items-center gap-2 px-4 rounded-lg',
+  'flex w-full h-full items-center gap-2 px-4 rounded-lg',
   {
     variants: {
       variant: {
@@ -44,7 +44,6 @@ export const inputContainerVariants = cva(
       borderRadius: 'basic',
       bgcolor: 'form',
       height: 'basic',
-      size: 's',
     },
   },
 );

src/components/common/Input/index.tsx

@@ -70,7 +70,6 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           bgcolor,
           variant,
           height,
-          size,
           disabled,
           isError,
         })}

src/components/common/Typography/index.tsx

@@ -98,6 +98,21 @@ export const Subtitle2Black = customTypography('span', {
   color: 'black',
 });
 
+export const Subtitle2White = customTypography('span', {
+  type: 'Subtitle2',
+  color: 'white',
+});
+
+export const Subtitle2Green500 = customTypography('span', {
+  type: 'Subtitle2',
+  color: 'green',
+});
+
+export const Subtitle2Grey100 = customTypography('span', {
+  type: 'Subtitle2',
+  color: 'grey100',
+});
+
 export const SubTitle3Black = customTypography('span', {
   type: 'Subtitle3',
   color: 'black',
@@ -123,11 +138,6 @@ export const Body2Grey500 = customTypography('span', {
   color: 'grey500',
 });
 
-export const Subtitle2Green500 = customTypography('span', {
-  type: 'Subtitle2',
-  color: 'green',
-});
-
 export const Body2Grey200 = customTypography('span', {
   type: 'Body2',
   color: 'grey200',

src/components/feature/MainHome/index.tsx

@@ -3,7 +3,7 @@ import MainPageHeader from '@/components/shared/Main/Header';
 
 const MainHome = () => {
   return (
-    <div className='flex flex-col gap-6 pb-20 pl-8 pr-10'>
+    <div className='flex max-w-[1588px] flex-col gap-6'>
       <MainPageHeader />
       <MainPageBody />
     </div>

src/components/feature/Survey/Create/index.tsx

@@ -87,20 +87,18 @@ const SurveyCreate = ({ id }: { id: string }) => {
   };
 
   return (
-    <div className='flex flex-col gap-5'>
-      <SurveyHeader
-        title='설문 생성'
-        accessBtnText='생성'
-        accessHandler={submitSurvey}
-      />
+    <div className='flex w-[1596px] flex-col gap-5'>
+      <SurveyHeader title='설문 생성' />
       <SurveyControls
         isChangeable
         surveyName={surveyName}
         setSurveyName={setSurveyName}
         deadLine={deadLine}
         setDeadLine={setDeadLine}
+        accessBtnText='생성'
+        accessHandler={submitSurvey}
       />
-      <div className='flex gap-5'>
+      <div className='flex gap-6'>
         <DefaultQuestions />
         <AdditionQuestions
           inputs={inputs}

src/components/feature/Survey/Edit/index.tsx

@@ -72,17 +72,15 @@ const SurveyEdit = ({ id }: Props) => {
   return (
     detailSurvey && (
       <div className='flex flex-col gap-5'>
-        <SurveyHeader
-          title='설문 수정'
-          accessBtnText='수정'
-          accessHandler={submitSurvey}
-        />
+        <SurveyHeader title='설문 수정' />
         <SurveyControls
           isChangeable
           surveyName={editSurveyName!}
           setEditSurveyName={setEditSurveyName}
           deadLine={editDeadLine!}
           setDeadLine={setEditDeadLine!}
+          accessBtnText='수정'
+          accessHandler={submitSurvey}
         />
         <div className='flex gap-5'>
           <DefaultQuestions />

src/components/shared/ChartDetail/TextList/index.tsx

@@ -1,5 +1,9 @@
 import { cn } from '@/utils/core';
-import { CardTitle, HeadPrimary } from '@/components/common/Typography';
+import {
+  Body2Black,
+  HeadPrimary,
+  SubTitle1Black,
+} from '@/components/common/Typography';
 
 interface Props {
   list: string[];
@@ -8,18 +12,20 @@ interface Props {
 }
 const TextList = ({ list, title, type }: Props) => {
   return (
-    <div className='flex w-full flex-col gap-3 rounded border border-gray-300 bg-white-100 p-5'>
-      <div className='border-b border-gray-200 pb-3'>
-        <CardTitle>{title}</CardTitle>
-      </div>
+    <div className='flex w-full flex-col gap-6 rounded-2xl bg-white-100 p-6'>
+      <SubTitle1Black>{title}</SubTitle1Black>
       <ul
         className={cn(
           'flex flex-col gap-2 overflow-y-auto pr-2',
           type === 'desireMenu' ? 'max-h-[310px]' : 'max-h-[600px]',
         )}
       >
         {list.length !== 0 &&
-          list.map((text, idx) => <li key={`${idx}-${text}`}>{text}</li>)}
+          list.map((text, idx) => (
+            <li key={`${idx}-${text}`} className='h-6'>
+              <Body2Black>{text}</Body2Black>
+            </li>
+          ))}
         {list.length === 0 && (
           <HeadPrimary>제출된 설문이 없습니다.</HeadPrimary>
         )}

src/components/shared/Survey/AdditionQuestions/index.tsx

@@ -1,10 +1,12 @@
-import { useEffect, useRef, useState } from 'react';
-import { cn } from '@/utils/core';
+import { useState } from 'react';
 import Button from '@/components/common/Button/Button';
-import Icon from '@/components/common/Icon';
 import { Input } from '@/components/common/Input';
 import { Selectbox } from '@/components/common/Selectbox';
-import { CardTitle } from '@/components/common/Typography';
+import {
+  SubTitle1Black,
+  Subtitle2Black,
+  Subtitle2Grey100,
+} from '@/components/common/Typography';
 import { inputsType } from '@/components/feature/Survey/Create';
 import { WARNING } from '@/constants/_toastMessage';
 import { useToastStore } from '@/stores/useToastStore';
@@ -23,43 +25,40 @@ const ANSWER_TYPE = [
 ];
 
 const AdditionQuestions = ({ inputs, setInputs, successSubmit }: Props) => {
-  const [prevInputCount, setPrevInputCount] = useState(0);
-  const inputRef = useRef<HTMLInputElement>(null);
+  const [addInputValue, setAddInputValue] = useState('');
+  const [addInputType, setAddInputType] = useState('text');
   const showToast = useToastStore((state) => state.showToast);
 
-  useEffect(() => {
-    if (inputs.length > prevInputCount && inputRef.current) {
-      inputRef.current?.focus();
-    }
-    setPrevInputCount(inputs.length);
-  }, [inputs]);
-
   const handleAddInput = () => {
     if (inputs.length >= EXTRA_QUESTIONS_LIMIT) {
       showToast(WARNING.maxAdditionQuestion, 'warning', 2000);
       return;
     }
+    if (addInputValue === '' || addInputType === '') {
+      showToast(WARNING.noQuestionValue, 'warning', 2000);
+      return;
+    }
     if (!successSubmit && inputs.length < EXTRA_QUESTIONS_LIMIT) {
       setInputs((prevInputs) => [
         ...prevInputs,
-        { question: '', answerType: 'text', questionId: Math.random() },
+        {
+          question: addInputValue,
+          answerType: addInputType,
+          questionId: Number(Math.random().toFixed(5)),
+        },
       ]);
+      setAddInputValue('');
+      setAddInputType('text');
     }
   };
 
-  const handleChangeInput = (
-    e: React.ChangeEvent<HTMLInputElement>,
-    idx: number,
-  ) => {
-    const newInputs = [...inputs];
-    newInputs[idx].question = e.target.value;
-    setInputs(newInputs);
-  };
-
-  const handleChangeAnswerType = (type: string, idx: number) => {
-    const newInputs = [...inputs];
-    newInputs[idx].answerType = type;
-    setInputs(newInputs);
+  const handleChangeAddInputType = (selectedValue: string) => {
+    const selectedOption = ANSWER_TYPE.find(
+      (opt) => opt.value === selectedValue,
+    );
+    if (selectedOption) {
+      setAddInputType(selectedOption.value);
+    }
   };
 
   const handleDeleteInput = (indexToDelete: number) => {
@@ -70,59 +69,88 @@ const AdditionQuestions = ({ inputs, setInputs, successSubmit }: Props) => {
   };
 
   return (
-    <div className='flex w-full flex-col gap-5 rounded border border-gray-300 bg-white-100 p-5'>
-      <div className='flex items-center justify-between border-b border-gray-200 pb-2'>
-        <CardTitle>추가 질문</CardTitle>
-        <div className='w-24'>
+    <div className='flex w-full flex-col gap-6 rounded-2xl bg-white-100 p-6'>
+      <SubTitle1Black>추가 질문</SubTitle1Black>
+      <div className='flex items-center gap-2'>
+        <Input
+          type='text'
+          variant='grey50'
+          value={addInputValue}
+          onChange={(e) => setAddInputValue(e.target.value)}
+          placeholder='추가 질문을 입력해 주세요.'
+          borderRadius='large'
+        />
+        <div className='min-w-[110px]'>
+          <Selectbox
+            key={addInputType}
+            bgColor='grey'
+            size='small'
+            options={ANSWER_TYPE}
+            selectedValue={
+              addInputType === 'text'
+                ? '서술형'
+                : addInputType === 'radio'
+                  ? '선택형'
+                  : ''
+            }
+            placeholder='서술형'
+            onChange={handleChangeAddInputType}
+            buttonSize='sm'
+          />
+        </div>
+        <div className='min-w-[60px]'>
           <Button
+            size='sm'
+            width='full'
+            variant='teritary'
             onClick={handleAddInput}
-            size='small'
-            className={successSubmit ? 'cursor-default' : ''}
             disabled={successSubmit}
+            className='rounded-lg'
           >
-            <Icon name='plus' width={15} height={15} color='white' />
-            <span>질문 추가</span>
+            <Subtitle2Grey100>등록</Subtitle2Grey100>
           </Button>
         </div>
       </div>
       <ul className='flex flex-col gap-3'>
-        {inputs.length !== 0 ? (
+        {inputs.length !== 0 &&
           inputs.map((input, idx) => (
-            <li key={input.questionId} className='flex gap-2'>
+            <div key={`${input}-${idx}`} className='flex items-center gap-2'>
               <Input
                 type='text'
-                ref={idx === inputs.length - 1 ? inputRef : null}
-                bgcolor='meal'
+                variant='grey50'
                 value={input.question}
-                onChange={(e) => handleChangeInput(e, idx)}
-                placeholder='추가 질문을 입력해주세요.'
-              />
-              <Selectbox
-                size='small'
-                options={ANSWER_TYPE}
-                selectedValue={
-                  input.answerType === 'text' ? '서술형' : '선택형'
-                }
-                placeholder='서술형'
-                onChange={(type) => handleChangeAnswerType(type, idx)}
+                readOnly
+                borderRadius='large'
               />
-              <div className='flex w-24'>
-                <Button
+              <div className='min-w-[110px]'>
+                <Selectbox
                   size='small'
-                  variant={'outline'}
+                  bgColor='grey'
+                  selectedValue={
+                    input.answerType === 'text'
+                      ? '서술형'
+                      : input.answerType === 'radio'
+                        ? '선택형'
+                        : ''
+                  }
+                  readonly
+                  buttonSize='sm'
+                />
+              </div>
+              <div className='min-w-[60px]'>
+                <Button
+                  size='sm'
+                  variant='outline'
+                  width='full'
                   onClick={() => handleDeleteInput(idx)}
-                  className={cn('w-24', successSubmit ? 'cursor-default' : '')}
+                  disabled={successSubmit}
+                  className='rounded-lg'
                 >
-                  질문 삭제
+                  <Subtitle2Black>삭제</Subtitle2Black>
                 </Button>
               </div>
-            </li>
-          ))
-        ) : (
-          <div className='text-center'>
-            <CardTitle>추가 질문이 없습니다.</CardTitle>
-          </div>
-        )}
+            </div>
+          ))}
       </ul>
     </div>
   );