Merge pull request #319 from boostcampwm2023/feature/backlog-finished-page

feat: 완료된 스토리 페이지 구현

Author: surinkwon

frontend/src/AppRouter.tsx

@@ -21,6 +21,7 @@ import LandingPage from "./pages/landing/LandingPage";
 import InvitePage from "./pages/invite/InvitePage";
 import UnfinishedStoryPage from "./pages/backlog/UnfinishedStoryPage";
 import BacklogPage from "./pages/backlog/BacklogPage";
+import FinishedStoryPage from "./pages/backlog/FinishedStoryPage";
 
 type RouteType = "PRIVATE" | "PUBLIC";
 
@@ -89,7 +90,7 @@ const router = createBrowserRouter([
                 },
                 {
                   path: ROUTER_URL.BACKLOG.COMPLETED,
-                  element: <div>backlog completed story Page</div>,
+                  element: <FinishedStoryPage />,
                 },
               ],
               element: <BacklogPage />,

frontend/src/components/backlog/StoryBlock.tsx

@@ -30,6 +30,7 @@ interface StoryBlockProps {
   children: React.ReactNode;
   taskExist: boolean;
   epicList: EpicCategoryDTO[];
+  finished?: boolean;
 }
 
 const StoryBlock = ({
@@ -41,6 +42,7 @@ const StoryBlock = ({
   status,
   taskExist,
   epicList,
+  finished = false,
   children,
 }: StoryBlockProps) => {
   const { socket }: { socket: Socket } = useOutletContext();
@@ -277,7 +279,7 @@ const StoryBlock = ({
         <TaskContainer>
           <TaskHeader />
           {children}
-          <TaskCreateBlock storyId={id} />
+          {!finished && <TaskCreateBlock storyId={id} />}
         </TaskContainer>
       )}
     </>

frontend/src/pages/backlog/FinishedStoryPage.tsx

@@ -0,0 +1,52 @@
+import { useOutletContext } from "react-router-dom";
+import { BacklogDTO } from "../../types/DTO/backlogDTO";
+import { useMemo } from "react";
+import StoryBlock from "../../components/backlog/StoryBlock";
+import changeEpicListToStoryList from "../../utils/changeEpicListToStoryList";
+import TaskBlock from "../../components/backlog/TaskBlock";
+
+const FinishedStoryPage = () => {
+  const { backlog }: { backlog: BacklogDTO } = useOutletContext();
+  const storyList = useMemo(
+    () =>
+      changeEpicListToStoryList(backlog.epicList).filter(
+        ({ status }) => status === "완료"
+      ),
+    [backlog.epicList]
+  );
+  const epicCategoryList = useMemo(
+    () => backlog.epicList.map(({ id, name, color }) => ({ id, name, color })),
+    [backlog.epicList]
+  );
+
+  return (
+    <div className="flex flex-col items-center gap-4">
+      <div className="w-full border-b">
+        {...storyList.map(({ id, epic, title, point, status, taskList }) => {
+          const progress = taskList.length
+            ? Math.round(
+                (taskList.filter(({ status }) => status === "완료").length /
+                  taskList.length) *
+                  100
+              )
+            : 0;
+
+          return (
+            <StoryBlock
+              {...{ id, title, point, status }}
+              epic={epic}
+              progress={progress}
+              taskExist={taskList.length > 0}
+              epicList={epicCategoryList}
+              finished={true}
+            >
+              {...taskList.map((task) => <TaskBlock {...task} />)}
+            </StoryBlock>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default FinishedStoryPage;

frontend/src/stores/useMemberStore.ts

@@ -1,5 +1,6 @@
 import { create } from "zustand";
 import { LandingMemberDTO, MemberStatus } from "../types/DTO/landingDTO";
+import { createJSONStorage, persist } from "zustand/middleware";
 
 interface InitialMemberState {
   myInfo: LandingMemberDTO;
@@ -18,14 +19,19 @@ const initialState: InitialMemberState = {
   memberList: [],
 };
 
-const useMemberStore = create<MemberState>((set) => ({
-  ...initialState,
-  updateMyInfo: (newMyInfo) => set(() => ({ myInfo: newMyInfo })),
-  updateMyStatus: (status) =>
-    set((state) => ({ myInfo: { ...state.myInfo, status } })),
-  updateMemberList: (newMember) => set({ memberList: newMember }),
-  addMember: (member) =>
-    set((state) => ({ memberList: [...state.memberList, member] })),
-}));
+const useMemberStore = create<MemberState>()(
+  persist(
+    (set) => ({
+      ...initialState,
+      updateMyInfo: (newMyInfo) => set(() => ({ myInfo: newMyInfo })),
+      updateMyStatus: (status) =>
+        set((state) => ({ myInfo: { ...state.myInfo, status } })),
+      updateMemberList: (newMember) => set({ memberList: newMember }),
+      addMember: (member) =>
+        set((state) => ({ memberList: [...state.memberList, member] })),
+    }),
+    { name: "member-storage", storage: createJSONStorage(() => sessionStorage) }
+  )
+);
 
 export default useMemberStore;