[NDD-270] 문제집 세부 정보페이지 개발하기 (4h/5h)

FE/src/AppRouter.tsx

@@ -12,6 +12,8 @@ import invalidPathLoader from '@routes/invalidPathLoader';
 import InterviewVideoPublicPage from '@page/interviewVideoPublicPage';
 import InterviewVideoPublicLoader from '@routes/interviewVideoPublicLoader';
 import rootLoader from '@routes/rootLoader';
+import InterviewWorkbookDetailPage from '@page/interviewWorkbookDetailPage';
+import interviewWorkbookDetailLoader from '@routes/interviewWorkbookDetailLoader';
 
 const AppRouter = ({ queryClient }: { queryClient: QueryClient }) => {
   const routes = createBrowserRouter([
@@ -50,6 +52,11 @@ const AppRouter = ({ queryClient }: { queryClient: QueryClient }) => {
               queryClient: queryClient,
             }),
         },
+        {
+          path: PATH.INTERVIEW_WORKBOOK_DETAIL(),
+          element: <InterviewWorkbookDetailPage />,
+          loader: ({ params }) => interviewWorkbookDetailLoader(params),
+        },
         {
           path: '*',
           loader: () => invalidPathLoader(),

FE/src/components/common/QuestionAccordion/QuestionAccordion.tsx

@@ -19,6 +19,7 @@ type QuestionAccordionProps = {
   question: Question;
   workbookId: number;
   isSelected: boolean;
+  isEditable?: boolean;
   toggleSelected?: () => void;
 };
 
@@ -31,6 +32,7 @@ const QuestionAccordion: React.FC<QuestionAccordionProps> = ({
   question,
   workbookId,
   isSelected,
+  isEditable,
   toggleSelected,
 }) => {
   const queryClient = useQueryClient();
@@ -88,15 +90,17 @@ const QuestionAccordion: React.FC<QuestionAccordionProps> = ({
             {question.answerContent}
           </Typography>
         </LeadingDot>
-        <Icon
-          id="edit"
-          css={css`
-            flex-shrink: 0;
-          `}
-          width="2rem"
-          height="2rem"
-          onClick={userInfo ? handleEditModal : handleEditGuestUser}
-        />
+        {isEditable && (
+          <Icon
+            id="edit"
+            css={css`
+              flex-shrink: 0;
+            `}
+            width="2rem"
+            height="2rem"
+            onClick={userInfo ? handleEditModal : handleEditGuestUser}
+          />
+        )}
       </AccordionDetails>
     </Accordion>
   );

FE/src/components/interviewWorkbookDetailPage/AddWorkbookListModal.tsx

@@ -1,49 +1,51 @@
+import { WorkbookEntity } from '@/types/workbook';
 import { css } from '@emotion/react';
 import Modal from '@foundation/Modal';
-import { Button, CheckBox, Icon, Typography } from '@foundation/index';
+import { Button, CheckBox, Typography } from '@foundation/index';
 import useQuestionCopyMutation from '@hooks/apis/mutations/useQuestionCopyMutation';
 import useWorkbookTitleListQuery from '@hooks/apis/queries/useWorkbookTitleListQuery';
 import { useState } from 'react';
+import NewWorkbookListButton from './NewWorkbookListButton';
+import { useNavigate } from 'react-router-dom';
 
 const AddWorkbookListModal = ({
   isOpen,
   closeModal,
   selectedQuestionIds,
+  workbookData,
 }: {
   isOpen: boolean;
   closeModal: () => void;
-  workbookId: number;
   selectedQuestionIds: number[];
+  workbookData: WorkbookEntity;
 }) => {
+  const navigate = useNavigate();
   const { data: workbookTitleData } = useWorkbookTitleListQuery();
   const { mutateAsync } = useQuestionCopyMutation();
 
   const [selectedWorkbook, setSelectedWorkbook] = useState<string[]>([]);
 
   const handleCheckBox = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { checked, id } = e.target;
-    if (checked) {
-      setSelectedWorkbook((pre) => [...pre, id]);
-    } else {
-      setSelectedWorkbook((pre) => pre.filter((item) => item !== id));
-    }
+    checked ? selectWorkBook(id) : unSelectWorkBook(id);
   };
 
+  const selectWorkBook = (id: string) =>
+    setSelectedWorkbook((pre) => [...pre, id]);
+
+  const unSelectWorkBook = (id: string) =>
+    setSelectedWorkbook((pre) => pre.filter((item) => item !== id));
+
   const mutateAllQuestionCopy = async () => {
-    try {
-      await Promise.all(
-        selectedWorkbook.map((item) => {
-          const workbookId = parseInt(item);
-          return mutateAsync({
-            workbookId: workbookId,
-            questionIds: selectedQuestionIds,
-          });
-        })
-      );
-    } catch (error) {
-      console.error('문제집 복사 중 오류 발생', error);
-      throw error;
-    }
+    await Promise.all(
+      selectedWorkbook.map((item) => {
+        const workbookId = parseInt(item);
+        return mutateAsync({
+          workbookId: workbookId,
+          questionIds: selectedQuestionIds,
+        });
+      })
+    );
   };
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
@@ -52,7 +54,15 @@ const AddWorkbookListModal = ({
       alert('문제집을 선택해주세요.');
       return;
     }
-    void mutateAllQuestionCopy();
+
+    try {
+      void mutateAllQuestionCopy();
+      closeModal();
+      // TODO: 문제집 리스트가 있는 페이지로 이동해야함
+    } catch (error) {
+      console.error('문제집 복사 중 오류 발생', error);
+      throw error;
+    }
   };
 
   return (
@@ -63,9 +73,7 @@ const AddWorkbookListModal = ({
           <div
             css={css`
               width: 100%;
-              > * {
-                margin-bottom: 1rem;
-              }
+              gap: 1rem;
             `}
           >
             {workbookTitleData?.map((item) => (
@@ -83,7 +91,10 @@ const AddWorkbookListModal = ({
                 </Typography>
               </CheckBox>
             ))}
-            <NewWorkbookList />
+            <NewWorkbookListButton
+              selectedQuestionIds={selectedQuestionIds}
+              workbookData={workbookData}
+            />
           </div>
         </Modal.content>
         <Modal.footer>
@@ -114,30 +125,3 @@ const ModalHeader = () => {
     </div>
   );
 };
-
-const NewWorkbookList = () => {
-  return (
-    <button
-      css={css`
-        display: flex;
-        align-items: center;
-        width: 100%;
-
-        outline: none;
-        border: none;
-        background-color: transparent;
-        cursor: pointer;
-      `}
-      type="button"
-    >
-      <Icon id="plus" width="1.5rem" height="1.5rem" />
-      <Typography
-        css={css`
-          margin-left: 1rem;
-        `}
-      >
-        새로운 재생 목록 만들기
-      </Typography>
-    </button>
-  );
-};

FE/src/components/interviewWorkbookDetailPage/InterviewWorkbookDetailPageLayout.tsx

@@ -0,0 +1,23 @@
+import { Header, Layout } from '@components/layout';
+import { css } from '@emotion/react';
+import React, { PropsWithChildren } from 'react';
+
+const InterviewWorkbookDetailPageLayout: React.FC<PropsWithChildren> = ({
+  children,
+}) => {
+  return (
+    <div>
+      <Header />
+      <Layout
+        direction="column"
+        css={css`
+          padding: 8rem 1rem 1rem 1rem;
+        `}
+      >
+        {children}
+      </Layout>
+    </div>
+  );
+};
+
+export default InterviewWorkbookDetailPageLayout;

FE/src/components/interviewWorkbookDetailPage/NewWorkbookListButton.tsx

@@ -0,0 +1,67 @@
+import { WorkbookEntity } from '@/types/workbook';
+import { css } from '@emotion/react';
+import { Icon, Typography } from '@foundation/index';
+import useQuestionCopyMutation from '@hooks/apis/mutations/useQuestionCopyMutation';
+import useWorkbookPostMutation from '@hooks/apis/mutations/useWorkbookPostMutation';
+
+const NewWorkbookListButton = ({
+  selectedQuestionIds,
+  workbookData,
+}: {
+  selectedQuestionIds: number[];
+  workbookData: WorkbookEntity;
+}) => {
+  const { mutateAsync: newWorkbookMutate } = useWorkbookPostMutation();
+  const { mutateAsync: newQuestionCopyMutate } = useQuestionCopyMutation();
+
+  const handleNewWorkbook = () => {
+    try {
+      void createNewWorkbook();
+      //TODO: 이 다음에는 어떻게 해줄까...?
+    } catch (err) {
+      console.log(err);
+      throw err;
+    }
+  };
+
+  const createNewWorkbook = async () => {
+    const result = await newWorkbookMutate({
+      title: `${workbookData.title} 복사본`,
+      content: workbookData.content,
+      categoryId: workbookData.categoryId,
+    });
+
+    await newQuestionCopyMutate({
+      workbookId: result.workbookId,
+      questionIds: selectedQuestionIds,
+    });
+  };
+
+  return (
+    <button
+      onClick={handleNewWorkbook}
+      css={css`
+        display: flex;
+        align-items: center;
+        width: 100%;
+
+        outline: none;
+        border: none;
+        background-color: transparent;
+        cursor: pointer;
+      `}
+      type="button"
+    >
+      <Icon id="plus" width="1.5rem" height="1.5rem" />
+      <Typography
+        css={css`
+          margin-left: 1rem;
+        `}
+      >
+        새로운 재생 목록 만들기
+      </Typography>
+    </button>
+  );
+};
+
+export default NewWorkbookListButton;

FE/src/components/interviewWorkbookDetailPage/index.ts

@@ -0,0 +1,2 @@
+export { default as AddWorkbookListModal } from './AddWorkbookListModal';
+export { default as InterviewWorkbookDetailPageLayout } from './InterviewWorkbookDetailPageLayout';

FE/src/constants/path.ts

@@ -4,6 +4,7 @@ const CONNECTION = 'connection';
 const RECORD = 'record';
 const MYPAGE = 'mypage';
 const QUESTION = 'question';
+const WORKBOOK = 'workbook';
 
 export const PATH = {
   ROOT: '/',
@@ -16,6 +17,8 @@ export const PATH = {
     `/${INTERVIEW}/${videoId ?? ':videoId'}`,
   INTERVIEW_VIDEO_PUBLIC: (videoHash?: string) =>
     `/${INTERVIEW}/public/${videoHash ?? ':videoHash'}`,
+  INTERVIEW_WORKBOOK_DETAIL: (workbookId?: number) =>
+    `/${INTERVIEW}/${WORKBOOK}/${workbookId ?? ':workbookId'}`,
   NOT_FOUND: `/404`,
 };
 

FE/src/constants/queryKey.ts

@@ -9,4 +9,9 @@ export const QUERY_KEY = {
   VIDEO_HASH: (videoHash: string) => ['video', videoHash],
   WORKBOOK: ['workbook'],
   WORKBOOK_ID: (workbookId: number) => ['workbook', workbookId],
+  QUESTION_WORKBOOK_ID: (workbookId: number) => [
+    'question',
+    'workbook',
+    workbookId,
+  ],
 };

FE/src/hooks/apis/queries/useQuestionWorkbookQuery.ts

@@ -14,7 +14,7 @@ const useQuestionWorkbookQuery = ({
   enabled,
 }: {
   workbookId: number;
-  enabled: boolean;
+  enabled?: boolean;
 }) => {
   return useQuery({
     queryKey: QUERY_KEY.QUESTION_CATEGORY(workbookId),