[NDD-353] QuestionSelectionBox 문제 해결 (0.5h / 1h) (#182)

* fix: 워크북 추가시 공개여부 안가는 문제 수정 * feat: 비회원은 로컬에 있는 문제집 삭제 * fix: 라벨과 체크박스가 연결되지 않았던 문제 수정 * feat: 서버에서 내려온 상태가 반영되도록 구현 Suspense에서는 enable 속성을 사용할 수 없어 일단 effect로 처리했습니다. * chore: 콘솔로그 변경 * design: 공개, 비공개 변경시 모달 크기 변경되는 현상 해결 * design: 체크박스 레이아웃 깨지는 문제 수정 * fix: outsideclick 적용 안되는 문제 해결 * feat: 문제집 디테일 페이지에서 새로운 면접 세트 만들 때도 isPublic 넣기 * feat: 새로문 문제집 추가시 마이페이지로 이동 * feat: 문제집에 따라서 워딩 다르게
boostcampwm2023 · Dec 7, 2023 · 25eed0b · 25eed0b
1 parent 59c8685
commit 25eed0b
Show file tree

Hide file tree

Showing 12 changed files with 91 additions and 24 deletions.
diff --git 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<HTMLFormElement>) => {
     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 = ({
             <NewWorkbookListButton
               selectedQuestionIds={selectedQuestionIds}
               workbookData={workbookData}
+              onAddNewWorkbook={handleNavigate}
             />
           </div>
         </Modal.content>

diff --git a/FE/src/components/WorkbookDetailPage/NewWorkbookListButton.tsx b/FE/src/components/WorkbookDetailPage/NewWorkbookListButton.tsx
@@ -7,17 +7,20 @@ 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();
 
   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;
         `}
       >
-        새로운 재생 목록 만들기
+        새로운 면접 세트 만들기
       </Typography>
     </button>
   );

diff --git a/FE/src/components/common/QuestionSelectionBox/QuestionAccordionList.tsx b/FE/src/components/common/QuestionSelectionBox/QuestionAccordionList.tsx
@@ -50,6 +50,7 @@ const QuestionAccordionList: React.FC<QuestionAccordionListProps> = ({
   return (
     <>
       <div
+        ref={listRef}
         css={css`
           display: flex;
           flex-direction: column;
@@ -58,19 +59,19 @@ const QuestionAccordionList: React.FC<QuestionAccordionListProps> = ({
           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) => (
           <div
             key={question.questionId}
             onClick={() => handleQuestionChecked(question.questionId)}
             css={css`
               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
@@ -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<WorkbookTitleListResDto>;
@@ -21,7 +21,7 @@ const QuestionTabPanelHeader: React.FC<QuestionTabPanelHeaderProps> = ({
   onEditButtonClick,
 }) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const { mutate: deleteWorkbook } = useWorkbookDeleteMutation();
+  const { deleteWorkbook } = useWorkbookDelete();
   const { openModal, closeModal } = useModal(() => {
     return (
       <WorkbookGeneratorModal

diff --git a/FE/src/components/common/QuestionSelectionBox/WorkbookGeneratorModal/WorkbookEditForm.tsx b/FE/src/components/common/QuestionSelectionBox/WorkbookGeneratorModal/WorkbookEditForm.tsx
@@ -1,6 +1,6 @@
 import { Button, Input, InputArea } from '@foundation/index';
 import { css } from '@emotion/react';
-import { FormEventHandler, useCallback, useState } from 'react';
+import { FormEventHandler, useCallback, useEffect, useState } from 'react';
 import LabelBox from '@common/QuestionSelectionBox/WorkbookGeneratorModal/LabelBox';
 import WorkbookCategory from '@common/QuestionSelectionBox/WorkbookGeneratorModal/WorkbookCategory';
 import useInput from '@hooks/useInput';
@@ -18,10 +18,11 @@ const WorkbookEditForm: React.FC<WorkbookEditFormProps> = ({
   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<WorkbookEditFormProps> = ({
   const { value: workbookContent, onChange: handleWorkbookContentChange } =
     useInput<HTMLTextAreaElement>(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<WorkbookEditFormProps> = ({
           취소
         </Button>
         <Button variants="primary" type="submit">
-          만들기
+          수정하기
         </Button>
       </div>
     </form>

diff --git a/.../components/common/QuestionSelectionBox/WorkbookGeneratorModal/WorkbookGeneratorModal.tsx b/.../components/common/QuestionSelectionBox/WorkbookGeneratorModal/WorkbookGeneratorModal.tsx
@@ -20,15 +20,17 @@ const WorkbookGeneratorModal: React.FC<WorkbookGeneratorModalProps> = ({
       css={css`
         width: 30rem;
         @media (max-width: ${theme.breakpoints.tablet}) {
-          width: 20rem;
+          width: 25rem;
         }
         @media (max-width: ${theme.breakpoints.mobileL}) {
           width: 100%;
           margin: 0 0.5rem;
         }
       `}
     >
-      <ModalHeader closeModal={closeModal}>새 면접 세트</ModalHeader>
+      <ModalHeader closeModal={closeModal}>
+        {workbookId !== undefined ? '면접 세트 수정' : '새 면접 세트'}
+      </ModalHeader>
       <div
         css={css`
           max-height: 80vh;

diff --git a/FE/src/components/foundation/Modal/ModalLayout.tsx b/FE/src/components/foundation/Modal/ModalLayout.tsx
@@ -35,7 +35,6 @@ const ModalLayout: React.FC<ModalLayoutProps> = ({
       onClick={() => {
         closeModal();
       }}
-      {...args}
     >
       <Box
         css={css`
@@ -45,6 +44,7 @@ const ModalLayout: React.FC<ModalLayoutProps> = ({
           width: auto;
         `}
         onClick={(e) => e.stopPropagation()}
+        {...args}
       >
         {children}
       </Box>

diff --git 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 (
-    <ModalLayout isOpen={isOpen} closeModal={closeModal}>
+    <ModalLayout isOpen={isOpen} closeModal={closeModal} {...args}>
       {enhanceChildElement({
         children: children,
         component: ModalHeader,

diff --git 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<ToggleProps> = ({ isToggled, onClick, ...args }) => {
         css={ToggleInputStyle}
         {...args}
       />
-      <label htmlFor="toggle" onClick={onClick} css={ToggleLabelStyle} />
+      <label htmlFor={toggleId} onClick={onClick} css={ToggleLabelStyle} />
     </>
   );
 };

diff --git a/FE/src/components/myPage/MyPageTabs.tsx b/FE/src/components/myPage/MyPageTabs.tsx
@@ -2,11 +2,15 @@ import { css } from '@emotion/react';
 import { Box, SelectionBox, Tabs, Typography } from '@foundation/index';
 import QuestionSelectTabPanel from './TabPanel/QuestionSelectTabPanel';
 import VideoListTabPanel from './TabPanel/VideoListTabPanel';
+import { useLocation } from 'react-router-dom';
+import { Location } from '@remix-run/router';
 
 const MyPageTabs: React.FC = () => {
+  const location = useLocation() as Location<{ tabIndex: string }>;
+
   return (
     <Tabs
-      initialValue={'2'}
+      initialValue={location?.state?.tabIndex ?? '2'}
       css={css`
         display: flex;
         flex-direction: column;

diff --git a/FE/src/hooks/useWorkbookAdd.ts b/FE/src/hooks/useWorkbookAdd.ts
@@ -45,6 +45,7 @@ const useWorkbookAdd = ({ onSuccess }: useWorkbookAddProps) => {
       copyCount: 0,
       title: workbook.title,
       content: workbook.content,
+      isPublic: workbook.isPublic,
     };
   };
 

diff --git a/FE/src/hooks/useWorkbookDelete.ts b/FE/src/hooks/useWorkbookDelete.ts
@@ -0,0 +1,33 @@
+import useUserInfo from '@hooks/useUserInfo';
+import { useQueryClient } from '@tanstack/react-query';
+import useWorkbookDeleteMutation from '@hooks/apis/mutations/useWorkbookDeleteMutation';
+import { WorkbookTitleListResDto } from '@/types/workbook';
+import { QUERY_KEY } from '@constants/queryKey';
+
+const useWorkbookDelete = () => {
+  const userInfo = useUserInfo();
+  const queryClient = useQueryClient();
+
+  const { mutate: deleteWorkbookSet } = useWorkbookDeleteMutation();
+
+  const deleteFromServer = (workbookId: number) => {
+    deleteWorkbookSet(Number(workbookId));
+  };
+
+  const deleteFromState = (workbookId: number) => {
+    queryClient.setQueryData<WorkbookTitleListResDto | []>(
+      QUERY_KEY.WORKBOOK_TITLE,
+      (prev) => prev?.filter((item) => item.workbookId !== Number(workbookId))
+    );
+  };
+
+  const deleteWorkbook = (workbookId: number) => {
+    userInfo ? deleteFromServer(workbookId) : deleteFromState(workbookId);
+  };
+
+  return {
+    deleteWorkbook,
+  };
+};
+
+export default useWorkbookDelete;