diff --git a/FE/src/components/WorkbookDetailPage/AddWorkbookListModal.tsx b/FE/src/components/WorkbookDetailPage/AddWorkbookListModal.tsx index 31ebbb8..7018369 100644 --- a/FE/src/components/WorkbookDetailPage/AddWorkbookListModal.tsx +++ b/FE/src/components/WorkbookDetailPage/AddWorkbookListModal.tsx @@ -50,6 +50,11 @@ const AddWorkbookListModal = ({ ); }; + const handleNavigate = () => { + closeModal(); + navigate(PATH.MYPAGE, { state: { tabIndex: '1' } }); + }; + const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (selectedWorkbook.length === 0) { @@ -59,8 +64,7 @@ const AddWorkbookListModal = ({ try { void mutateAllQuestionCopy(); - closeModal(); - navigate(PATH.MYPAGE); + handleNavigate(); } catch (error) { console.error('문제집 복사 중 오류 발생', error); @@ -97,6 +101,7 @@ const AddWorkbookListModal = ({ diff --git a/FE/src/components/WorkbookDetailPage/NewWorkbookListButton.tsx b/FE/src/components/WorkbookDetailPage/NewWorkbookListButton.tsx index 94372bc..6be4f8b 100644 --- a/FE/src/components/WorkbookDetailPage/NewWorkbookListButton.tsx +++ b/FE/src/components/WorkbookDetailPage/NewWorkbookListButton.tsx @@ -7,9 +7,11 @@ import useWorkbookPostMutation from '@hooks/apis/mutations/useWorkbookPostMutati const NewWorkbookListButton = ({ selectedQuestionIds, workbookData, + onAddNewWorkbook, }: { selectedQuestionIds: number[]; workbookData: WorkbookEntity; + onAddNewWorkbook: () => void; }) => { const { mutateAsync: newWorkbookMutate } = useWorkbookPostMutation(); const { mutateAsync: newQuestionCopyMutate } = useQuestionCopyMutation(); @@ -17,7 +19,8 @@ const NewWorkbookListButton = ({ const handleNewWorkbook = () => { try { void createNewWorkbook(); - //TODO: 이 다음에는 어떻게 해줄까...? + onAddNewWorkbook(); + //TODO: (해민)이 다음에는 어떻게 해줄까...? (수민)일단 마이페이지로 보낼게요 } catch (err) { console.log(err); throw err; @@ -29,6 +32,7 @@ const NewWorkbookListButton = ({ title: `${workbookData.title} 복사본`, content: workbookData.content, categoryId: workbookData.categoryId, + isPublic: workbookData.isPublic, }); await newQuestionCopyMutate({ @@ -58,7 +62,7 @@ const NewWorkbookListButton = ({ margin-left: 1rem; `} > - 새로운 재생 목록 만들기 + 새로운 면접 세트 만들기 ); diff --git a/FE/src/components/common/QuestionSelectionBox/QuestionAccordionList.tsx b/FE/src/components/common/QuestionSelectionBox/QuestionAccordionList.tsx index a687faa..1f5904d 100644 --- a/FE/src/components/common/QuestionSelectionBox/QuestionAccordionList.tsx +++ b/FE/src/components/common/QuestionSelectionBox/QuestionAccordionList.tsx @@ -50,6 +50,7 @@ const QuestionAccordionList: React.FC = ({ return ( <>
= ({ overflow-y: auto; padding: 1rem; height: 100%; - div:nth-last-of-type(2) { - margin-bottom: ${isEditMode ? '2.5rem' : '0'}; - } `} > - {questionData.map((question) => ( + {questionData.map((question, index) => (
handleQuestionChecked(question.questionId)} @@ -71,6 +69,9 @@ const QuestionAccordionList: React.FC = ({ display: flex; align-items: center; column-gap: 0.5rem; + margin-bottom: ${index === questionData.length - 1 + ? '2.5rem' + : '0'}; `} > {isEditMode && ( diff --git a/FE/src/components/common/QuestionSelectionBox/QuestionTabPanelHeader.tsx b/FE/src/components/common/QuestionSelectionBox/QuestionTabPanelHeader.tsx index 3a6c739..1d4a32a 100644 --- a/FE/src/components/common/QuestionSelectionBox/QuestionTabPanelHeader.tsx +++ b/FE/src/components/common/QuestionSelectionBox/QuestionTabPanelHeader.tsx @@ -4,9 +4,9 @@ import { theme } from '@styles/theme'; import { ExcludeArray } from '@/types/utils'; import { WorkbookTitleListResDto } from '@/types/workbook'; import { useState } from 'react'; -import useWorkbookDeleteMutation from '@hooks/apis/mutations/useWorkbookDeleteMutation'; import useModal from '@hooks/useModal'; import { WorkbookGeneratorModal } from '@common/index'; +import useWorkbookDelete from '@hooks/useWorkbookDelete'; type QuestionTabPanelHeaderProps = { workbook: ExcludeArray; @@ -21,7 +21,7 @@ const QuestionTabPanelHeader: React.FC = ({ onEditButtonClick, }) => { const [isMenuOpen, setIsMenuOpen] = useState(false); - const { mutate: deleteWorkbook } = useWorkbookDeleteMutation(); + const { deleteWorkbook } = useWorkbookDelete(); const { openModal, closeModal } = useModal(() => { return ( = ({ workbookId, closeModal, }) => { - const { data: workbookInfo } = useWorkbookQuery({ - workbookId: workbookId, - enabled: workbookId > 0, - }); + const { data: workbookInfo, isFetching: isWorkbookFetching } = + useWorkbookQuery({ + workbookId: workbookId, + enabled: workbookId > 0, + }); const { data: categories } = useCategoryQuery(); const [activeValidationError, setActiveValidationError] = useState(false); const [selectedCategoryIndex, setSelectedCategoryIndex] = useState(0); @@ -34,6 +35,22 @@ const WorkbookEditForm: React.FC = ({ const { value: workbookContent, onChange: handleWorkbookContentChange } = useInput(workbookInfo?.content ?? ''); + const findCategoryIndex = useCallback( + (categoryId?: number) => { + return ( + categories?.findIndex((category) => category.id === categoryId) ?? 0 + ); + }, + [categories] + ); + + useEffect(() => { + if (!workbookInfo) return; + + setSelectedCategoryIndex(findCategoryIndex(workbookInfo.categoryId)); + setIsPublic(workbookInfo.isPublic); + }, [findCategoryIndex, isWorkbookFetching, workbookInfo]); + const { editWorkbook } = useWorkbookEdit({ onSuccess: () => { closeModal(); @@ -129,7 +146,7 @@ const WorkbookEditForm: React.FC = ({ 취소
diff --git a/FE/src/components/common/QuestionSelectionBox/WorkbookGeneratorModal/WorkbookGeneratorModal.tsx b/FE/src/components/common/QuestionSelectionBox/WorkbookGeneratorModal/WorkbookGeneratorModal.tsx index 9769d8a..74b447d 100644 --- a/FE/src/components/common/QuestionSelectionBox/WorkbookGeneratorModal/WorkbookGeneratorModal.tsx +++ b/FE/src/components/common/QuestionSelectionBox/WorkbookGeneratorModal/WorkbookGeneratorModal.tsx @@ -20,7 +20,7 @@ const WorkbookGeneratorModal: React.FC = ({ css={css` width: 30rem; @media (max-width: ${theme.breakpoints.tablet}) { - width: 20rem; + width: 25rem; } @media (max-width: ${theme.breakpoints.mobileL}) { width: 100%; @@ -28,7 +28,9 @@ const WorkbookGeneratorModal: React.FC = ({ } `} > - 새 면접 세트 + + {workbookId !== undefined ? '면접 세트 수정' : '새 면접 세트'} +
= ({ onClick={() => { closeModal(); }} - {...args} > = ({ width: auto; `} onClick={(e) => e.stopPropagation()} + {...args} > {children} diff --git a/FE/src/components/foundation/Modal/index.tsx b/FE/src/components/foundation/Modal/index.tsx index 7709a55..4300001 100644 --- a/FE/src/components/foundation/Modal/index.tsx +++ b/FE/src/components/foundation/Modal/index.tsx @@ -4,9 +4,9 @@ import ModalHeader from './ModalHeader'; import ModalLayout, { ModalLayoutProps } from './ModalLayout'; import enhanceChildElement from '@/utils/enhanceChildElement'; -const Modal = ({ children, isOpen, closeModal }: ModalLayoutProps) => { +const Modal = ({ children, isOpen, closeModal, ...args }: ModalLayoutProps) => { return ( - + {enhanceChildElement({ children: children, component: ModalHeader, diff --git a/FE/src/components/foundation/Toggle/Toggle.tsx b/FE/src/components/foundation/Toggle/Toggle.tsx index 6f8fd0a..b7d7357 100644 --- a/FE/src/components/foundation/Toggle/Toggle.tsx +++ b/FE/src/components/foundation/Toggle/Toggle.tsx @@ -1,9 +1,9 @@ -import { HTMLElementTypes } from '@/types/utils'; import { ToggleInputStyle, ToggleLabelStyle, } from '@foundation/Toggle/Toggle.styles'; import { useId } from 'react'; +import { HTMLElementTypes } from '@/types/utils'; type ToggleProps = { isToggled: boolean; @@ -21,7 +21,7 @@ const Toggle: React.FC = ({ isToggled, onClick, ...args }) => { css={ToggleInputStyle} {...args} /> -