Squashed commit of the following:

commit e9f4f7e Author: heejung0413 <[email protected]> Date: Sat Apr 20 03:12:07 2024 +0900 fix: section 페이지 api 연결 commit 841bb55 Author: heejung0413 <[email protected]> Date: Sat Apr 20 00:20:27 2024 +0900 🐛Fix: 자잘한 api 수정(section 페이지 action item 추가, 따로 컴포넌트 설정) commit 40ba27f Author: heejung0413 <[email protected]> Date: Fri Apr 19 17:32:57 2024 +0900 🐛Fix: section 페이지 api 연결 commit cd40003 Author: heejung0413 <[email protected]> Date: Fri Apr 19 16:30:00 2024 +0900 긴급) fix: team type 수정
donga-it-club · Apr 19, 2024 · 93589e5 · 93589e5
1 parent 78b0e32
commit 93589e5
Show file tree

Hide file tree

Showing 19 changed files with 197 additions and 242 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -4,8 +4,8 @@ import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import { getCurrentUser } from 'aws-amplify/auth';
 import { RecoilRoot } from 'recoil';
 import AcceptInvite from './components/inviteTeam/AcceptInvite';
-import RetroTeamPage from './pages/RetroTeamPage';
 import RetroRevisePage from './pages/RevisePage';
+import RetroTeamPage from './pages/SectionPage';
 import MainLayout from '@/components/layout/MainLayout';
 import ProfileLayout from '@/components/layout/ProfileLayout';
 import AuthPage from '@/pages/AuthPage';
@@ -99,14 +99,6 @@ const App = () => {
                   </PrivateRoute>
                 }
               />
-              {/* <Route
-                path="/personal"
-                element={
-                  <PrivateRoute>
-                    <RetroPersonalPage />
-                  </PrivateRoute>
-                }
-              /> */}
               <Route
                 path="/revise"
                 element={
@@ -115,7 +107,6 @@ const App = () => {
                   </PrivateRoute>
                 }
               />
-
               <Route
                 path="/retrolist"
                 element={
@@ -125,7 +116,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/__mock__/retrospectiveTemplate.ts b/src/api/__mock__/retrospectiveTemplate.ts
diff --git a/src/api/client.ts b/src/api/client.ts
@@ -6,7 +6,6 @@ import { unwrapResponse } from './interceptors/response';
 // import { logAndProcessError, logResponse, unwrapResponse } from './interceptors/response';
 // import { flow } from '@/utils/flow';
 
-
 export const mswInstance = axios.create({
   baseURL: '/',
   timeout: 4000,
@@ -20,10 +19,7 @@ export const mswInstance = axios.create({
 //   withCredentials: true,
 // });
 
-
-
 axiosInstance.interceptors.request.use(logRequest);
 // axiosInstance.interceptors.response.use(flow([logResponse, unwrapResponse]), logAndProcessError);
 
-
 mswInstance.interceptors.response.use(unwrapResponse);
diff --git a/src/api/services/Retrospectives.ts b/src/api/services/Retrospectives.ts
@@ -9,7 +9,6 @@ import {
   RetrospectivesClient,
 } from '../@types/Retrospectives';
 import axiosInstance from '../axiosConfig';
-import { mswInstance } from '../client';
 
 const ROUTE = 'retrospectives';
 
@@ -32,7 +31,7 @@ export const RetrospectiveService: RetrospectivesClient = {
   },
   get: async (request: GetRetrospectiveRequest): Promise<GetRetrospectiveData> => {
     try {
-      const response = await mswInstance.get(`${ROUTE}/`, {
+      const response = await axiosInstance.get(`${ROUTE}/`, {
         params: request,
       });
       return response.data;
@@ -43,12 +42,13 @@ export const RetrospectiveService: RetrospectivesClient = {
 
   delete: async ({ retrospectiveId }: DeleteRetrospectiveRequest): Promise<void> => {
     try {
-      const response = await mswInstance.delete(`${ROUTE}/${retrospectiveId}`);
+      const response = await axiosInstance.delete(`${ROUTE}/${retrospectiveId}`);
       return response.data;
     } catch (error) {
       throw new Error(error as string);
     }
   },
+
   put: async ({ retrospectiveId }, ...request) => {
     try {
       const response = await axiosInstance.put(`${ROUTE}/${retrospectiveId}`, request);
@@ -57,7 +57,8 @@ export const RetrospectiveService: RetrospectivesClient = {
       throw new Error(error as string);
     }
   },
+
   patch: async (retrospectiveId, ...request) => {
-    return await mswInstance.patch(`${ROUTE}/${retrospectiveId}/bookmark`, request);
+    return await axiosInstance.patch(`${ROUTE}/${retrospectiveId}/bookmark`, request);
   },
 };
diff --git a/src/api/services/Section.ts b/src/api/services/Section.ts
@@ -2,20 +2,28 @@ import {
   CreateSectionRequest,
   DeleteSectionRequest,
   DeleteSectionResponse,
-  GetSectionRequest,
+  TeamGetSectionRequest,
   GetSectionResponse,
   PostLikeSectionResponse,
   PostLikesSectionRequest,
   PostSectionResponse,
   SectionClient,
+  PersonalGetSectionRequest,
 } from '../@types/Section';
 import axiosInstance from '../axiosConfig';
-import { mswInstance } from '../client';
 
 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;
@@ -49,7 +57,7 @@ export const SectionServices: SectionClient = {
   },
   likePost: async ({ sectionId }: PostLikesSectionRequest): Promise<PostLikeSectionResponse> => {
     try {
-      const response = await mswInstance.post<PostLikeSectionResponse>(`${ROUTE}/${sectionId}/likes`);
+      const response = await axiosInstance.post<PostLikeSectionResponse>(`${ROUTE}/${sectionId}/likes`);
       return response.data;
     } catch (error) {
       throw new Error(error as string);

diff --git a/src/components/writeRetro/revise/ManageTeamMembers.tsx b/src/components/writeRetro/revise/ManageTeamMembers.tsx
@@ -13,23 +13,10 @@ interface Props {
 }
 
 const ManageTeamMembers: FC<Props> = ({ members, teamId }) => {
-  // const [members, setMembers] = useState<TeamMembersData[]>();
-  // const toast = useCustomToast();
   const [searchTerm, setSearchTerm] = useState<string>('');
   const [searchList, setSearchList] = useState<TeamMembersData[]>();
   const [isInviteModalOpen, setInviteModalOpen] = useState<boolean>(false);
 
-  // const fetchTeamMembers = async () => {
-  //   try {
-  //     const data = await TeamControllerServices.TeamMemberGet({ teamId: teamId, retrospectiveId: retrospectiveId });
-  //     console.log('data.members', data);
-  //     setMembers(data.data);
-  //     console.log('members', members);
-  //   } catch (e) {
-  //     toast.error(e);
-  //   }
-  // };
-
   const searchTeamMembers = (searchTerm: string) => {
     const filterData: TeamMembersData[] = [];
 
@@ -42,12 +29,6 @@ const ManageTeamMembers: FC<Props> = ({ members, teamId }) => {
     });
   };
 
-  // useEffect(() => {
-  //   fetchTeamMembers();
-  // }, [teamId, retrospectiveId]);
-
-  // if (!members) return;
-
   return (
     <S.ManageStyle>
       <Flex height="46px">

diff --git a/src/components/writeRetro/revise/RetroImageUploader.tsx b/src/components/writeRetro/revise/RetroImageUploader.tsx
@@ -33,7 +33,7 @@ const RetroImageUploader: FC<Props> = ({ image, setImage }) => {
       {image ? (
         <Image src={image} maxWidth={400} margin="20px auto" h="auto" aspectRatio="1/1" objectFit="contain" />
       ) : (
-        <Image src="/Home.png" maxWidth={400} margin="20px auto" h="auto" aspectRatio="1/1" objectFit="contain" />
+        <Image src="/logo.svg" maxWidth={400} margin="20px auto" h="auto" aspectRatio="1/1" objectFit="contain" />
       )}
 
       <div style={{ margin: '0 auto' }}>

diff --git a/src/components/writeRetro/revise/ReviseSetting.tsx b/src/components/writeRetro/revise/ReviseSetting.tsx
@@ -32,16 +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 [retroName, setRetroName] = useState<RetrospectiveResponse>();
+
   const [image, setImage] = useState<string>(retro.thumbnail);
   const [title, setTitle] = useState<string>('');
   const [templateName, setTemplateName] = useState<TemplateNameData[]>();
@@ -54,7 +55,6 @@ const ReviseSetting: FC<Props> = ({ retro }) => {
       try {
         const data = await postImageToS3({ filename: retro.thumbnail, method: 'GET' });
         setImage(data.preSignedUrl);
-        console.log('image', image);
       } catch (e) {
         toast.error(e);
       }
@@ -64,8 +64,7 @@ const ReviseSetting: FC<Props> = ({ retro }) => {
   const fetchRetrospectiveTemplate = async () => {
     try {
       if (retro) {
-        const data = await TeamControllerServices.TemplateNameGet({ templateId: 2 });
-        console.log('retro.templateId', data);
+        const data = await TeamControllerServices.TemplateNameGet({ templateId: retro.templateId });
         setTemplateName(data.data);
       }
     } catch (error) {
@@ -76,12 +75,12 @@ const ReviseSetting: FC<Props> = ({ retro }) => {
   const handlePutRetrospective = async () => {
     try {
       const data = await RetrospectiveService.put({
-        retrospectiveId: retrospectiveId,
+        retrospectiveId: 102,
         title: title,
         teamId: teamId,
         description: description,
-        status: 'COMPLETED',
         thumbnail: image,
+        status: 'COMPLETED',
       });
       console.log('put data', data);
       navigate('/retrolist');
@@ -92,16 +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);
       }
     }
   };
@@ -165,7 +166,9 @@ const ReviseSetting: FC<Props> = ({ retro }) => {
         </Flex>
         <S.ReaderBox>
           <BsPersonCircle size={30} style={{ margin: '5px' }} />
-          <p style={{ margin: 'auto 0' }}>{retro.userId}</p>
+          <p style={{ margin: 'auto 0' }}>
+            {retro.leaderName ?? <S.NotMemberInfo> (회고 리더 이름없음)</S.NotMemberInfo>}
+          </p>
         </S.ReaderBox>
 
         {/* 회고 설명 */}
@@ -197,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/ActionItemTask.tsx b/src/components/writeRetro/task/ActionItemTask.tsx
@@ -0,0 +1,66 @@
+import React, { FC, useState } from 'react';
+import { sectionData } from '@/api/@types/Section';
+import UserProfile1 from '@/assets/UserProfile1.png';
+import UserProfile2 from '@/assets/UserProfile2.png';
+import Members from '@/components/writeRetro/ActionItems/Members';
+import * as S from '@/styles/writeRetroStyles/Layout.style';
+
+interface Props {
+  section: sectionData[];
+}
+
+const ActionItemTask: FC<Props> = ({ section }) => {
+  // action items 담당자 지정
+  const [hoveredUser, setHoveredUser] = useState<string | null>(null);
+  const [showPopup, setShowPopup] = useState<boolean>(false);
+  const [selectedUserName, setSelectedUserName] = useState<string | null>(null);
+  const [selectedUserImg, setSelectedUserImg] = useState<string | null>(null);
+
+  const users = [
+    { name: 'User 1', image: UserProfile1 },
+    { name: 'User 2', image: UserProfile2 },
+  ];
+
+  const togglePopup = () => {
+    setShowPopup(!showPopup);
+  };
+
+  const handleSelectUserImg = (image: string) => {
+    setSelectedUserImg(image);
+    setShowPopup(false);
+  };
+
+  const handleSelectUserName = (name: string) => {
+    setSelectedUserName(name);
+  };
+
+  const handleMouseEnter = (name: string) => {
+    setHoveredUser(name);
+  };
+
+  const handleMouseLeave = () => {
+    setHoveredUser(null);
+  };
+  return (
+    <S.ManagerStyle>
+      <div>
+        <S.ManagerButton
+          onClick={togglePopup}
+          onMouseEnter={() => handleMouseEnter(selectedUserName || '')}
+          onMouseLeave={handleMouseLeave}
+        >
+          {selectedUserImg ? <img src={selectedUserImg} /> : 'M'}
+          {hoveredUser && <S.HoverUser>{hoveredUser}</S.HoverUser>} {/* 이름 : {name.username} */}
+        </S.ManagerButton>
+        {showPopup && (
+          <Members users={users} onSelectUserImg={handleSelectUserImg} onSelectUserName={handleSelectUserName} />
+        )}
+      </div>
+      {section.map(section => (
+        <S.ManagerText>{section.username}</S.ManagerText>
+      ))}
+    </S.ManagerStyle>
+  );
+};
+
+export default ActionItemTask;