1- import { useState , useEffect } from "react" ;
1+ import { useState , useEffect , useCallback } from "react" ;
22import { Button , ButtonProvider } from "@/component/common/button" ;
33import { Icon } from "@/component/common/Icon" ;
44import { Spacing } from "@/component/common/Spacing" ;
@@ -19,6 +19,8 @@ import AddQuestionView from "./AddQuestionView";
1919import { useModal } from "@/hooks/useModal" ;
2020import { isEqual } from "lodash-es" ;
2121
22+ const MAX_QUESTION_COUNT = 10 ;
23+
2224type QuestionEditSectionProps = {
2325 onClose : ( ) => void ;
2426} ;
@@ -95,36 +97,56 @@ export default function QuestionEditSection({ onClose }: QuestionEditSectionProp
9597 const handleDelete = ( index : number ) => {
9698 const updatedQuestions = questions . filter ( ( _ , i ) => i !== index ) ;
9799 setEditingQuestions ( updatedQuestions ) ;
98- toast . success ( "삭제가 완료되었어요!" ) ;
99100 } ;
100101
101102 /**
102103 * 새 질문 추가 핸들러
103104 */
104105 const handleAddQuestion = ( ) => {
105- if ( questions . length >= 10 ) return ;
106+ if ( questions . length >= MAX_QUESTION_COUNT ) return ;
106107
107108 // 현재 질문들을 백업하고 질문 추가 모드로 전환
108- setBackupQuestions ( [ ...questions ] ) ;
109+ const questionsToBackup = [ ...questions ] ;
110+ setBackupQuestions ( questionsToBackup ) ;
109111 setIsAddMode ( true ) ;
112+
113+ const cancelCallback = ( ) => {
114+ setEditingQuestions ( questionsToBackup ) ;
115+ setIsAddMode ( false ) ;
116+ setBackupQuestions ( [ ] ) ;
117+ setModalDataState ( ( prev ) => ( {
118+ ...prev ,
119+ title : "질문 리스트" ,
120+ options : {
121+ enableFooter : false ,
122+ needsBackButton : true ,
123+ backButtonCallback : handleCancel ,
124+ } ,
125+ } ) ) ;
126+ } ;
127+
110128 setModalDataState ( ( prev ) => ( {
111129 ...prev ,
112130 title : "질문 추가" ,
113- onClose : handleAddQuestionCancel ,
131+ onClose : cancelCallback ,
114132 options : {
115133 enableFooter : false ,
116134 needsBackButton : true ,
117135 disabledClose : true ,
118- backButtonCallback : handleAddQuestionCancel ,
136+ backButtonCallback : cancelCallback ,
119137 } ,
120138 } ) ) ;
121139 } ;
122140
123141 /**
124- * 질문 추가 완료 핸들러 (단일)
142+ * 질문 추가 완료 핸들러
125143 */
126- const handleAddQuestionComplete = ( content : string ) => {
127- const newQuestions = [ ...questions , { questionType : "plain_text" as const , questionContent : content } ] ;
144+ const handleAddQuestions = ( contents : string [ ] ) => {
145+ const newQuestionObjects = contents . map ( ( content ) => ( {
146+ questionType : "plain_text" as const ,
147+ questionContent : content ,
148+ } ) ) ;
149+ const newQuestions = [ ...questions , ...newQuestionObjects ] ;
128150 setEditingQuestions ( newQuestions ) ;
129151
130152 // 원래 모드로 돌아가고 모달 제목 복원
@@ -142,32 +164,10 @@ export default function QuestionEditSection({ onClose }: QuestionEditSectionProp
142164 toast . success ( "질문이 추가되었어요!" ) ;
143165 } ;
144166
145- /**
146- * 질문 추가 완료 핸들러 (복수)
147- */
148- const handleAddMultipleQuestions = ( contents : string [ ] ) => {
149- const newQuestionObjects = contents . map ( ( content ) => ( {
150- questionType : "plain_text" as const ,
151- questionContent : content ,
152- } ) ) ;
153- const newQuestions = [ ...questions , ...newQuestionObjects ] ;
154- setEditingQuestions ( newQuestions ) ;
155-
156- // 원래 모드로 돌아가고 모달 제목 복원
157- setIsAddMode ( false ) ;
158- setModalDataState ( ( prev ) => ( {
159- ...prev ,
160- title : "질문 리스트" ,
161- enableFooter : false ,
162- } ) ) ;
163-
164- toast . success ( `${ contents . length } 개의 질문이 추가되었어요!` ) ;
165- } ;
166-
167167 /**
168168 * 질문 수정 취소 핸들러 (뒤로가기 버튼)
169169 */
170- const handleCancel = ( ) => {
170+ const handleCancel = useCallback ( ( ) => {
171171 const hasChanged = ! isEqual ( originalQuestions , editingQuestions ) ;
172172
173173 if ( hasChanged ) {
@@ -186,35 +186,7 @@ export default function QuestionEditSection({ onClose }: QuestionEditSectionProp
186186 } else {
187187 onClose ( ) ;
188188 }
189- } ;
190-
191- /**
192- * 질문 추가 취소 핸들러
193- */
194- const handleAddQuestionCancel = ( ) => {
195- openExitWarningModal ( {
196- title : "질문 추가를 취소하시겠어요?" ,
197- contents : "추가중인 내용은 모두 사라져요" ,
198- onConfirm : ( ) => {
199- // 백업된 질문들로 복원
200- setEditingQuestions ( backupQuestions ) ;
201- setIsAddMode ( false ) ;
202- setBackupQuestions ( [ ] ) ;
203- setModalDataState ( ( prev ) => ( {
204- ...prev ,
205- title : "질문 리스트" ,
206- options : {
207- enableFooter : false ,
208- needsBackButton : true ,
209- backButtonCallback : handleCancel ,
210- } ,
211- } ) ) ;
212- } ,
213- options : {
214- buttonText : [ "취소" , "나가기" ] ,
215- } ,
216- } ) ;
217- } ;
189+ } , [ originalQuestions , editingQuestions , onClose , openExitWarningModal ] ) ;
218190
219191 /**
220192 * 삭제 모드 진입 핸들러
@@ -239,8 +211,13 @@ export default function QuestionEditSection({ onClose }: QuestionEditSectionProp
239211 * 삭제 모드 완료 핸들러
240212 */
241213 const handleDeleteModeComplete = ( ) => {
214+ const hasDeleted = questions . length < backupQuestions . length ;
242215 setIsDeleteMode ( false ) ;
243216 setBackupQuestions ( [ ] ) ;
217+
218+ if ( hasDeleted ) {
219+ toast . success ( "삭제가 완료되었어요!" ) ;
220+ }
244221 } ;
245222
246223 // 제출 완료 핸들러
@@ -263,27 +240,25 @@ export default function QuestionEditSection({ onClose }: QuestionEditSectionProp
263240 onClose ( ) ;
264241 } ;
265242
266- // 모달의 뒤로가기 버튼 콜백을 handleCancel로 설정
243+ // 모달의 뒤로가기 버튼과 닫기 버튼 콜백을 handleCancel로 설정
267244 useEffect ( ( ) => {
268245 if ( ! isAddMode ) {
269246 setModalDataState ( ( prev ) => ( {
270247 ...prev ,
248+ onClose : handleCancel ,
271249 options : {
272250 ...prev . options ,
251+ disabledClose : true ,
273252 backButtonCallback : handleCancel ,
274253 } ,
275254 } ) ) ;
276255 }
277- } , [ editingQuestions , isAddMode ] ) ;
256+ } , [ isAddMode , handleCancel ] ) ;
278257
279258 return (
280259 < >
281260 { isAddMode ? (
282- < AddQuestionView
283- onAddQuestion = { handleAddQuestionComplete }
284- onAddMultipleQuestions = { handleAddMultipleQuestions }
285- maxCount = { 10 - questions . length }
286- />
261+ < AddQuestionView onAddQuestions = { handleAddQuestions } maxCount = { MAX_QUESTION_COUNT - questions . length } />
287262 ) : (
288263 < >
289264 < section
@@ -317,9 +292,9 @@ export default function QuestionEditSection({ onClose }: QuestionEditSectionProp
317292 { /* ---------- 추가 버튼 ---------- */ }
318293 < button
319294 onClick = { handleAddQuestion }
320- disabled = { questions . length >= 10 }
295+ disabled = { questions . length >= MAX_QUESTION_COUNT }
321296 css = { css `
322- background-color : ${ questions . length >= 10 ? DESIGN_TOKEN_COLOR . gray200 : DESIGN_TOKEN_COLOR . blue100 } ;
297+ background-color : ${ questions . length >= MAX_QUESTION_COUNT ? DESIGN_TOKEN_COLOR . gray200 : DESIGN_TOKEN_COLOR . blue100 } ;
323298 border-radius : 1.2rem ;
324299 border : none;
325300 display : flex;
@@ -328,14 +303,17 @@ export default function QuestionEditSection({ onClose }: QuestionEditSectionProp
328303 height : 4.8rem ;
329304 width : 100% ;
330305 transition : background-color 0.2s ease;
331- cursor : ${ questions . length >= 10 ? "not-allowed" : "pointer" } ;
332-
306+ cursor : ${ questions . length >= MAX_QUESTION_COUNT ? "not-allowed" : "pointer" } ;
333307 & : hover {
334- background-color : ${ questions . length >= 10 ? DESIGN_TOKEN_COLOR . gray200 : DESIGN_TOKEN_COLOR . blue200 } ;
308+ background-color : ${ questions . length >= MAX_QUESTION_COUNT ? DESIGN_TOKEN_COLOR . gray200 : DESIGN_TOKEN_COLOR . blue200 } ;
335309 }
336310 ` }
337311 >
338- < Icon icon = "ic_plus_thin" size = { 1.8 } color = { questions . length >= 10 ? DESIGN_TOKEN_COLOR . gray400 : DESIGN_TOKEN_COLOR . blue600 } />
312+ < Icon
313+ icon = "ic_plus_thin"
314+ size = { 1.8 }
315+ color = { questions . length >= MAX_QUESTION_COUNT ? DESIGN_TOKEN_COLOR . gray400 : DESIGN_TOKEN_COLOR . blue600 }
316+ />
339317 </ button >
340318 </ section >
341319 </ section >
0 commit comments