Skip to content

fix: 템플릿 질문 리스트 질문 추가 과정에서 나오는 "질문 수정을 취소하시겠어요" 모달을 이전 화면 과정에서 이탈시 나오게 제공 #798

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
prgmr99 merged 2 commits into from
Feb 4, 2026
Merged

fix: 템플릿 질문 리스트 질문 추가 과정에서 나오는 "질문 수정을 취소하시겠어요" 모달을 이전 화면 과정에서 이탈시 나오게 제공 #798

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ac7134c
fix: #795 질문 수정 취소 플로우 변경
prgmr99 Feb 1, 2026
b448e2d
fix: #795 코드리뷰 피드백 반영
prgmr99 Feb 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 1 addition & 4 deletions apps/web/src/app/desktop/component/retrospectCreate/QuestionEditSection/AddQuestionView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,10 +145,7 @@ export default function AddQuestionView({ onAddQuestions, maxCount }: AddQuestio
padding: 0;
`}
>
<ButtonProvider.Primary
onClick={handleAddQuestion}
disabled={customQuestion.trim().length === 0 && selectedValues.length === 0}
>
<ButtonProvider.Primary onClick={handleAddQuestion} disabled={customQuestion.trim().length === 0 && selectedValues.length === 0}>
{selectedValues.length > 0 ? (
<span>
추가하기
Expand Down
84 changes: 40 additions & 44 deletions apps/web/src/app/desktop/component/retrospectCreate/QuestionEditSection/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useState, useEffect } from "react";
import { useState, useEffect, useCallback } from "react";
import { Button, ButtonProvider } from "@/component/common/button";
import { Icon } from "@/component/common/Icon";
import { Spacing } from "@/component/common/Spacing";
Expand All @@ -19,6 +19,8 @@ import AddQuestionView from "./AddQuestionView";
import { useModal } from "@/hooks/useModal";
import { isEqual } from "lodash-es";

const MAX_QUESTION_COUNT = 10;

type QuestionEditSectionProps = {
onClose: () => void;
};
Expand Down Expand Up @@ -102,20 +104,37 @@ export default function QuestionEditSection({ onClose }: QuestionEditSectionProp
* 새 질문 추가 핸들러
*/
const handleAddQuestion = () => {
if (questions.length >= 10) return;
if (questions.length >= MAX_QUESTION_COUNT) return;

// 현재 질문들을 백업하고 질문 추가 모드로 전환
setBackupQuestions([...questions]);
const questionsToBackup = [...questions];
setBackupQuestions(questionsToBackup);
setIsAddMode(true);

const cancelCallback = () => {
setEditingQuestions(questionsToBackup);
setIsAddMode(false);
setBackupQuestions([]);
setModalDataState((prev) => ({
...prev,
title: "질문 리스트",
options: {
enableFooter: false,
needsBackButton: true,
backButtonCallback: handleCancel,
},
}));
};

setModalDataState((prev) => ({
...prev,
title: "질문 추가",
onClose: handleAddQuestionCancel,
onClose: cancelCallback,
options: {
enableFooter: false,
needsBackButton: true,
disabledClose: true,
backButtonCallback: handleAddQuestionCancel,
backButtonCallback: cancelCallback,
},
}));
};
Expand Down Expand Up @@ -149,7 +168,7 @@ export default function QuestionEditSection({ onClose }: QuestionEditSectionProp
/**
* 질문 수정 취소 핸들러 (뒤로가기 버튼)
*/
const handleCancel = () => {
const handleCancel = useCallback(() => {
const hasChanged = !isEqual(originalQuestions, editingQuestions);

if (hasChanged) {
Expand All @@ -168,35 +187,7 @@ export default function QuestionEditSection({ onClose }: QuestionEditSectionProp
} else {
onClose();
}
};

/**
* 질문 추가 취소 핸들러
*/
const handleAddQuestionCancel = () => {
openExitWarningModal({
title: "질문 추가를 취소하시겠어요?",
contents: "추가중인 내용은 모두 사라져요",
onConfirm: () => {
// 백업된 질문들로 복원
setEditingQuestions(backupQuestions);
setIsAddMode(false);
setBackupQuestions([]);
setModalDataState((prev) => ({
...prev,
title: "질문 리스트",
options: {
enableFooter: false,
needsBackButton: true,
backButtonCallback: handleCancel,
},
}));
},
options: {
buttonText: ["취소", "나가기"],
},
});
};
}, [originalQuestions, editingQuestions, onClose, openExitWarningModal]);

/**
* 삭제 모드 진입 핸들러
Expand Down Expand Up @@ -245,23 +236,25 @@ export default function QuestionEditSection({ onClose }: QuestionEditSectionProp
onClose();
};

// 모달의 뒤로가기 버튼 콜백을 handleCancel로 설정
// 모달의 뒤로가기 버튼과 닫기 버튼 콜백을 handleCancel로 설정
useEffect(() => {
if (!isAddMode) {
setModalDataState((prev) => ({
...prev,
onClose: handleCancel,
options: {
...prev.options,
disabledClose: true,
backButtonCallback: handleCancel,
},
}));
}
}, [editingQuestions, isAddMode]);
}, [isAddMode, handleCancel]);

return (
<>
{isAddMode ? (
<AddQuestionView onAddQuestions={handleAddQuestions} maxCount={10 - questions.length} />
<AddQuestionView onAddQuestions={handleAddQuestions} maxCount={MAX_QUESTION_COUNT - questions.length} />
) : (
<>
<section
Expand Down Expand Up @@ -295,9 +288,9 @@ export default function QuestionEditSection({ onClose }: QuestionEditSectionProp
{/* ---------- 추가 버튼 ---------- */}
<button
onClick={handleAddQuestion}
disabled={questions.length >= 10}
disabled={questions.length >= MAX_QUESTION_COUNT}
css={css`
background-color: ${questions.length >= 10 ? DESIGN_TOKEN_COLOR.gray200 : DESIGN_TOKEN_COLOR.blue100};
background-color: ${questions.length >= MAX_QUESTION_COUNT ? DESIGN_TOKEN_COLOR.gray200 : DESIGN_TOKEN_COLOR.blue100};
border-radius: 1.2rem;
border: none;
display: flex;
Expand All @@ -306,14 +299,17 @@ export default function QuestionEditSection({ onClose }: QuestionEditSectionProp
height: 4.8rem;
width: 100%;
transition: background-color 0.2s ease;
cursor: ${questions.length >= 10 ? "not-allowed" : "pointer"};

cursor: ${questions.length >= MAX_QUESTION_COUNT ? "not-allowed" : "pointer"};
&:hover {
background-color: ${questions.length >= 10 ? DESIGN_TOKEN_COLOR.gray200 : DESIGN_TOKEN_COLOR.blue200};
background-color: ${questions.length >= MAX_QUESTION_COUNT ? DESIGN_TOKEN_COLOR.gray200 : DESIGN_TOKEN_COLOR.blue200};
}
`}
>
<Icon icon="ic_plus_thin" size={1.8} color={questions.length >= 10 ? DESIGN_TOKEN_COLOR.gray400 : DESIGN_TOKEN_COLOR.blue600} />
<Icon
icon="ic_plus_thin"
size={1.8}
color={questions.length >= MAX_QUESTION_COUNT ? DESIGN_TOKEN_COLOR.gray400 : DESIGN_TOKEN_COLOR.blue600}
/>
</button>
</section>
</section>
Expand Down