fix: section 페이지 api 연결

donga-it-club · Apr 19, 2024 · e9f4f7e · e9f4f7e
1 parent 841bb55
commit e9f4f7e
Show file tree

Hide file tree

Showing 11 changed files with 52 additions and 116 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -98,14 +98,6 @@ const App = () => {
                   </PrivateRoute>
                 }
               />
-              {/* <Route
-                path="/personal"
-                element={
-                  <PrivateRoute>
-                    <RetroPersonalPage />
-                  </PrivateRoute>
-                }
-              /> */}
               <Route
                 path="/revise"
                 element={
@@ -114,7 +106,6 @@ const App = () => {
                   </PrivateRoute>
                 }
               />
-
               <Route
                 path="/retrolist"
                 element={
@@ -124,7 +115,6 @@ const App = () => {
                 }
               />
             </Route>
-
             {/* MainLayout */}
             <Route element={<MainLayout />}>
               <Route path="/" element={<HomePage />} />

diff --git a/src/api/@types/Section.ts b/src/api/@types/Section.ts
@@ -1,7 +1,11 @@
 //get
-export interface GetSectionRequest {
+export interface TeamGetSectionRequest {
+  retrospectiveId: number;
+  teamId: number;
+}
+
+export interface PersonalGetSectionRequest {
   retrospectiveId: number;
-  teamId: number | null;
 }
 
 export interface sectionData {
@@ -85,7 +89,8 @@ export interface PostLikeSectionResponse {
   };
 }
 export interface SectionClient {
-  get(request: GetSectionRequest): Promise<GetSectionResponse>;
+  TeamGet(request: TeamGetSectionRequest): Promise<GetSectionResponse>;
+  PersonalGet(request: PersonalGetSectionRequest): Promise<GetSectionResponse>;
   create(request: CreateSectionRequest): Promise<PostSectionResponse>;
   patch(request: PatchSectionRequest): Promise<PatchSectionResponse>;
   delete(request: DeleteSectionRequest): Promise<DeleteSectionResponse>;

diff --git a/src/api/services/Section.ts b/src/api/services/Section.ts
@@ -2,19 +2,28 @@ import {
   CreateSectionRequest,
   DeleteSectionRequest,
   DeleteSectionResponse,
-  GetSectionRequest,
+  TeamGetSectionRequest,
   GetSectionResponse,
   PostLikeSectionResponse,
   PostLikesSectionRequest,
   PostSectionResponse,
   SectionClient,
+  PersonalGetSectionRequest,
 } from '../@types/Section';
 import axiosInstance from '../axiosConfig';
 
 const ROUTE = 'sections';
 
 export const SectionServices: SectionClient = {
-  get: async (request: GetSectionRequest): Promise<GetSectionResponse> => {
+  TeamGet: async (request: TeamGetSectionRequest): Promise<GetSectionResponse> => {
+    try {
+      const response = await axiosInstance.get<GetSectionResponse>(`${ROUTE}`, { params: request });
+      return response.data;
+    } catch (error) {
+      throw new Error(error as string);
+    }
+  },
+  PersonalGet: async (request: PersonalGetSectionRequest): Promise<GetSectionResponse> => {
     try {
       const response = await axiosInstance.get<GetSectionResponse>(`${ROUTE}`, { params: request });
       return response.data;

diff --git a/src/components/writeRetro/revise/ReviseSetting.tsx b/src/components/writeRetro/revise/ReviseSetting.tsx
@@ -32,15 +32,17 @@ import * as S from '@/styles/writeRetroStyles/ReviseLayout.style';
 
 interface Props {
   retro: RetrospectiveData;
+  status: string | undefined;
+  setStatus: (status: string) => void;
 }
 
-const ReviseSetting: FC<Props> = ({ retro }) => {
+const ReviseSetting: FC<Props> = ({ retro, status, setStatus }) => {
   const { search } = useLocation();
   const query = search.split(/[=,&]/);
   const retrospectiveId = Number(query[1]);
   const teamId = Number(query[3]);
   const [isChecked, setIsChecked] = useState<boolean>(false);
-  const [status, setStatus] = useState<string>();
+
   const [image, setImage] = useState<string>(retro.thumbnail);
   const [title, setTitle] = useState<string>('');
   const [templateName, setTemplateName] = useState<TemplateNameData[]>();
@@ -73,7 +75,7 @@ const ReviseSetting: FC<Props> = ({ retro }) => {
   const handlePutRetrospective = async () => {
     try {
       const data = await RetrospectiveService.put({
-        retrospectiveId: retrospectiveId,
+        retrospectiveId: 102,
         title: title,
         teamId: teamId,
         description: description,
@@ -89,15 +91,18 @@ const ReviseSetting: FC<Props> = ({ retro }) => {
   };
 
   const SwitchStatus = () => {
-    setIsChecked(!isChecked);
+    setIsChecked(true);
     if (retro) {
       if (isChecked) {
         toast.info('회고 완료 처리를 취소하였습니다.');
         setStatus('COMPLETED');
+        setIsChecked(false);
         console.log(status);
       } else {
         toast.success('해당 회고는 최종 완료 처리되었습니다.');
         setStatus(retro.status);
+        console.log(status);
+        setIsChecked(true);
       }
     }
   };
@@ -195,13 +200,7 @@ const ReviseSetting: FC<Props> = ({ retro }) => {
 
         {/* save, cancel */}
         <Flex flexDirection="row-reverse">
-          <Button
-            colorScheme="grey"
-            variant="outline"
-            onClick={() => {
-              handlePutRetrospective();
-            }}
-          >
+          <Button colorScheme="grey" variant="outline" onClick={handlePutRetrospective}>
             SAVE
           </Button>
           <Button

diff --git a/src/components/writeRetro/task/TeamTask.tsx b/src/components/writeRetro/task/TeamTask.tsx
@@ -123,7 +123,7 @@ const TeamTask: FC<Props> = ({ section }) => {
               <S.SubTaskIcon onClick={handleMessaged}>
                 {messaged ? <MdMessage size="20px" color="#111B47" /> : <MdMessage size="20px" color="#DADEE5" />}
               </S.SubTaskIcon>
-              <S.SubTaskCount>4</S.SubTaskCount>
+              <S.SubTaskCount>0</S.SubTaskCount>
             </S.SubTaskStyle>
             {/* DaysLeft */}
             <S.SubTaskStyle>

diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
@@ -82,4 +82,4 @@ export const TeamHandlers: RequestHandler[] = [
     return HttpResponse.json(mockMembers);
   }),
 ];
-export const mswWorker = setupWorker(...TeamHandlers, ...SectionHandlers);
+export const mswWorker = setupWorker();
diff --git a/src/pages/RetroListPage.tsx b/src/pages/RetroListPage.tsx
@@ -180,11 +180,11 @@ const RetroListPage = () => {
             <ViewButton viewMode={viewMode} onViewModeChange={handleViewModeChange} />
           </S.SortButtonContainer>
         </S.Container>
-        <S.ControBarContainer>
+        <S.ControlBarContainer>
           <ProgressButton handleStatus={handleStatus} />
           <OrderButton handleOrder={handleOrder} />
           <BookmarkButton handleBookmarkButton={handleBookmarkButton} />
-        </S.ControBarContainer>
+        </S.ControlBarContainer>
         <S.Box>
           <ContentList
             data={retroData}

diff --git a/src/pages/RetroPersonalPage.tsx b/src/pages/RetroPersonalPage.tsx
diff --git a/src/pages/RevisePage.tsx b/src/pages/RevisePage.tsx
@@ -20,21 +20,26 @@ const RetroRevisePage = () => {
   const teamId = Number(query[3]);
   const [retro, setRetro] = useState<RetrospectiveData>();
   const [members, setMembers] = useState<TeamMembersData[]>();
+  const [status, setStatus] = useState<string>();
   const toast = useCustomToast();
 
   const FetchRetrospective = async () => {
     try {
       const data = await RetrospectiveService.onlyGet({ retrospectiveId: retrospectiveId });
       setRetro(data.data);
+      setStatus(retro?.status);
     } catch (e) {
       toast.error(e);
     }
   };
 
   const fetchTeamMembers = async () => {
     try {
-      const data = await TeamControllerServices.TeamMemberGet({ teamId: teamId, retrospectiveId: retrospectiveId });
-      setMembers(data.data);
+      if (teamId) {
+        const data = await TeamControllerServices.TeamMemberGet({ teamId: teamId, retrospectiveId: retrospectiveId });
+        setMembers(data.data);
+      }
+      return;
     } catch (e) {
       toast.error(e);
     }
@@ -46,7 +51,6 @@ const RetroRevisePage = () => {
   }, [retro?.status]);
 
   if (!retro) return;
-  if (!members) return;
 
   return (
     <>
@@ -65,10 +69,10 @@ const RetroRevisePage = () => {
 
           <TabPanels>
             <TabPanel>
-              <ReviseSetting retro={retro} />
+              <ReviseSetting retro={retro} status={status} setStatus={setStatus} />
             </TabPanel>
             <TabPanel>
-              {retro.type === 'TEAM' ? <ManageTeamMembers members={members} teamId={teamId} /> : <NotTeamMemberModal />}
+              {members ? <ManageTeamMembers members={members} teamId={teamId} /> : <NotTeamMemberModal />}
             </TabPanel>
           </TabPanels>
         </Tabs>

diff --git a/src/pages/SectionPage.tsx b/src/pages/SectionPage.tsx
@@ -21,7 +21,6 @@ const RetroTeamPage = () => {
   const query = search.split(/[=,&]/);
   const retrospectiveId = Number(query[1]);
   const teamId = Number(query[3]);
-
   const [section, setSection] = useState<sectionData[]>([]);
   const [retro, setRetro] = useState<RetrospectiveData>();
   const [template, setTemplate] = useState<TemplateNameData[]>();
@@ -38,8 +37,13 @@ const RetroTeamPage = () => {
 
   const fetchSection = async () => {
     try {
-      const data = await SectionServices.get({ retrospectiveId: retrospectiveId, teamId: teamId });
-      setSection(data.data);
+      if (!teamId) {
+        const data = await SectionServices.PersonalGet({ retrospectiveId: retrospectiveId });
+        setSection(data.data);
+      } else {
+        const data = await SectionServices.TeamGet({ retrospectiveId: retrospectiveId, teamId: teamId });
+        setSection(data.data);
+      }
     } catch (e) {
       toast.error(e);
     }
@@ -50,7 +54,7 @@ const RetroTeamPage = () => {
       if (retro) {
         const data = await TeamControllerServices.TemplateNameGet({ templateId: retro.templateId });
         setTemplate(data.data);
-        console.log(template);
+        console.log('template', template);
       }
     } catch (e) {
       toast.error(e);
@@ -61,7 +65,7 @@ const RetroTeamPage = () => {
     fetchSection();
     fetchRetrospective();
     fetchTemplate();
-  }, [retro?.status, template?.values]);
+  }, [retro?.status, template?.values, section]);
 
   return (
     <S.Container>
@@ -91,7 +95,6 @@ const RetroTeamPage = () => {
                             <TeamTask section={section} />
                           </>
                         ))}
-                      {/* <ActionItemTask section={section} /> */}
                     </S.FrameStyle>
                   </>
                 ))

diff --git a/src/styles/RetroList/RetroListPage.style.ts b/src/styles/RetroList/RetroListPage.style.ts
@@ -31,7 +31,7 @@ export const Box = styled.div`
   width: 1000px;
 `;
 
-export const ControBarContainer = styled.div`
+export const ControlBarContainer = styled.div`
   margin-left: 50px;
   margin-right: 50px;
   margin-top: 15px;