From a810baa22c31e8891156ffaf6f037f2471120c0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=98=81=ED=9B=88?= <joseph0926@naver.com>
Date: Tue, 27 Aug 2024 13:45:44 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EA=B0=9C=EC=9D=B8=EC=A0=95?=
 =?UTF-8?q?=EB=B3=B4=20=EC=88=98=EC=A7=91=20=EB=B2=84=EA=B7=B8=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Survey/create-survey-page2.styles.ts      | 14 ++++++++
 .../components/Survey/create-survey-page2.tsx | 34 +++++++++++++++----
 2 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/web/src/components/Survey/create-survey-page2.styles.ts b/web/src/components/Survey/create-survey-page2.styles.ts
index 3c8c131..e7ec7fb 100644
--- a/web/src/components/Survey/create-survey-page2.styles.ts
+++ b/web/src/components/Survey/create-survey-page2.styles.ts
@@ -100,6 +100,20 @@ export const CreateSurveyPageContent = styled.section`
         align-items: center;
         justify-content: space-between;
 
+        .name {
+          position: relative;
+          width: 100%;
+          span {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: ${COLORS.Gray2};
+            white-space: nowrap;
+            font-size: 10px;
+          }
+        }
+
         img {
           position: absolute;
           top: 50%;
diff --git a/web/src/components/Survey/create-survey-page2.tsx b/web/src/components/Survey/create-survey-page2.tsx
index 74239b0..232434d 100644
--- a/web/src/components/Survey/create-survey-page2.tsx
+++ b/web/src/components/Survey/create-survey-page2.tsx
@@ -11,6 +11,7 @@ import { setFields, setPolicy } from '@/store/survey';
 import React, { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
 import { Badge } from '../common/badge';
 import { Box } from '../common/box';
 import { Button } from '../common/button';
@@ -67,7 +68,7 @@ export const CreateSurveyPageStep2 = () => {
   }, []);
 
   const handleFieldChange = (index: number, value: string) => {
-    if (index < 4) return;
+    if (index < 1) return;
     setLocalFields(prevFields => {
       const newFields = [...prevFields];
       newFields[index].optionName = value;
@@ -76,15 +77,24 @@ export const CreateSurveyPageStep2 = () => {
   };
 
   const handleAddField = () => {
+    if (fields.length === 10) {
+      toast.error('개인정보 수집 항목은 최대 10개입니다.');
+      return;
+    }
     setLocalFields(prevFields => [...prevFields, { optionName: '' }]);
   };
 
   const handleRemoveField = (index: number) => {
-    if (index < 4) return;
+    if (index < 1) return;
     setLocalFields(prevFields => prevFields.filter((_, i) => i !== index));
   };
 
   const saveHandler = () => {
+    if (fields.filter(item => item.optionName.trim().length === 0).length > 0) {
+      toast.error('빈 항목을 추가할 수 없습니다.');
+      return;
+    }
+
     const filteredFields = fields.filter(
       field =>
         !defaultFields.some(
@@ -172,11 +182,21 @@ export const CreateSurveyPageStep2 = () => {
           <div className="input-container">
             {fields.map((field, index) => (
               <div key={index} className="field-row">
-                <Input
-                  value={field.optionName}
-                  onChange={e => handleFieldChange(index, e.target.value)}
-                />
-                {index > 3 && fields.length > 1 && (
+                {field.optionName === '이름' ? (
+                  <div className="name">
+                    <Input
+                      value={field.optionName}
+                      onChange={e => handleFieldChange(index, e.target.value)}
+                    />
+                    <span>수집한 아이디는 응답 내용과 함께 보여져요</span>
+                  </div>
+                ) : (
+                  <Input
+                    value={field.optionName}
+                    onChange={e => handleFieldChange(index, e.target.value)}
+                  />
+                )}
+                {index > 0 && fields.length > 1 && (
                   <img
                     src={cancelImg}
                     alt="cancel"