From cd400034727c5f51793024d90b0308d3307afb5c Mon Sep 17 00:00:00 2001 From: heejung0413 Date: Fri, 19 Apr 2024 16:30:00 +0900 Subject: [PATCH 1/4] =?UTF-8?q?=EA=B8=B4=EA=B8=89)=20fix:=20team=20type=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/@types/@asConst.ts | 2 +- src/api/@types/Retrospectives.ts | 3 +- src/api/@types/Section.ts | 14 ++-- src/api/__mock__/retrospective.ts | 9 +-- src/api/services/Section.ts | 2 +- src/components/writeRetro/layout/AddTask.tsx | 64 ++++++++++++------- .../writeRetro/revise/ReviseSetting.tsx | 2 +- src/pages/RetroTeamPage.tsx | 14 ++-- src/pages/RevisePage.tsx | 4 +- 9 files changed, 68 insertions(+), 46 deletions(-) diff --git a/src/api/@types/@asConst.ts b/src/api/@types/@asConst.ts index fb8c695..d04de52 100644 --- a/src/api/@types/@asConst.ts +++ b/src/api/@types/@asConst.ts @@ -13,7 +13,7 @@ export const Status = { export const RetrospectiveType = { TEAM: 'TEAM', PERSONAL: 'PERSONAL', -}; +} as const; export const Template = { 1: 'Keep', diff --git a/src/api/@types/Retrospectives.ts b/src/api/@types/Retrospectives.ts index 204458b..6357c5c 100644 --- a/src/api/@types/Retrospectives.ts +++ b/src/api/@types/Retrospectives.ts @@ -15,8 +15,9 @@ export interface RetrospectiveData { retrospectiveId: number; title: string; templateId: number; - teamId: number; + type: keyof TRetrospective; userId: number; + leaderName: string; description: string; status: keyof TStatus; thumbnail: string; diff --git a/src/api/@types/Section.ts b/src/api/@types/Section.ts index 16e87cc..cdf39ba 100644 --- a/src/api/@types/Section.ts +++ b/src/api/@types/Section.ts @@ -35,12 +35,14 @@ export interface CreateSectionRequest { export interface PostSectionResponse { code: number; message: string; - data: { - id: number; - userId: number; - retrospectiveId: number; - sectionContent: string; - }; + data: PostSectionData; +} + +export interface PostSectionData { + id: number; + userId: number; + retrospectiveId: number; + sectionContent: string; } //patch diff --git a/src/api/__mock__/retrospective.ts b/src/api/__mock__/retrospective.ts index d3690c9..939dea6 100644 --- a/src/api/__mock__/retrospective.ts +++ b/src/api/__mock__/retrospective.ts @@ -25,10 +25,11 @@ export const MockOnlyGetRetrospective: onlyGetRetrospectiveResponse = { retrospectiveId: 1, title: 'heeeeee', templateId: 2, - teamId: 1, - userId: 1, - description: 'heeee', - status: Status.COMPLETED, + type: 'TEAM', + userId: 0, + leaderName: 'string', + description: 'string', + status: Status.NOT_STARTED, thumbnail: '3fa85f64-5717-4562-b3fc-2c963f66afa6', }, }; diff --git a/src/api/services/Section.ts b/src/api/services/Section.ts index 1653a17..d57420a 100644 --- a/src/api/services/Section.ts +++ b/src/api/services/Section.ts @@ -25,7 +25,7 @@ export const SectionServices: SectionClient = { }, create: async (request: CreateSectionRequest): Promise => { try { - const response = await axiosInstance.post(`${ROUTE}/`, request); + const response = await axiosInstance.post(`${ROUTE}`, request); return response.data; } catch (error) { throw new Error(error as string); diff --git a/src/components/writeRetro/layout/AddTask.tsx b/src/components/writeRetro/layout/AddTask.tsx index b8ca9f3..e1a091d 100644 --- a/src/components/writeRetro/layout/AddTask.tsx +++ b/src/components/writeRetro/layout/AddTask.tsx @@ -1,35 +1,47 @@ -import { ChangeEvent, FC, useState } from 'react'; +import { FC, useState } from 'react'; import { AiFillPlusCircle } from 'react-icons/ai'; +import { PostSectionData } from '@/api/@types/Section'; +import { SectionServices } from '@/api/services/Section'; +import { useCustomToast } from '@/hooks/useCustomToast'; import * as S from '@/styles/writeRetroStyles/Layout.style'; -// interface Props { -// retro: RetrospectiveData; -// template: TemplateNameData[]; -// } +interface Props { + retrospectiveId: number | undefined; + template: number; +} -export const AddTask: FC = () => { +export const AddTask: FC = ({ retrospectiveId, template }) => { const [isVisible, setIsVisible] = useState(false); - const [value, setValue] = useState(''); + const [result, setResult] = useState(); + const toast = useCustomToast(); + const [content, setContent] = useState(''); const handleClick = () => { setIsVisible(isVisible => !isVisible); }; - // const handleAddSection = async () => { - // try{ - // const data = await SectionServices.create({ retrospectiveId: retro.retrospectiveId, - // templateSectionId: template; - // sectionContent: string; - // }}) - // } - // } - - const handleChange = (e: ChangeEvent) => { - setValue(e.target.value); - e.target.style.height = 'auto'; - e.target.style.height = `${e.target.scrollHeight}px`; + const handleAddSection = async () => { + try { + if (retrospectiveId) { + const data = await SectionServices.create({ + retrospectiveId: retrospectiveId, + templateSectionId: template.valueOf(), + sectionContent: content, + }); + setResult(data.data); + console.log(result); + } + } catch (e) { + toast.error(e); + } }; + // const handleChange = (e: ChangeEvent) => { + // setValue(e.target.value); + // e.target.style.height = 'auto'; + // e.target.style.height = `${e.target.scrollHeight}px`; + // }; + return ( <> {/* AddTaskButton */} @@ -39,11 +51,19 @@ export const AddTask: FC = () => { + {/* AddTaskInput */} {isVisible && ( - - 확인 + setContent(e.target.value)} + placeholder="내용을 입력해주세요" + rows={1} + > + + 확인 + )} diff --git a/src/components/writeRetro/revise/ReviseSetting.tsx b/src/components/writeRetro/revise/ReviseSetting.tsx index 33004fa..fed5dea 100644 --- a/src/components/writeRetro/revise/ReviseSetting.tsx +++ b/src/components/writeRetro/revise/ReviseSetting.tsx @@ -149,7 +149,7 @@ const ReviseSetting: FC = ({ retro }) => { 회고 유형 변경 불가 - {retro.teamId !== null ? '팀' : '개인'} + {retro.type === 'TEAM' ? '팀' : '개인'} {/* 회고 템플릿 유형 */} diff --git a/src/pages/RetroTeamPage.tsx b/src/pages/RetroTeamPage.tsx index ca0d3f2..b398f81 100644 --- a/src/pages/RetroTeamPage.tsx +++ b/src/pages/RetroTeamPage.tsx @@ -30,18 +30,18 @@ const RetroTeamPage = () => { const fetchRetrospective = async () => { try { const data = await RetrospectiveService.onlyGet({ retrospectiveId: retrospectiveId }); + console.log('retro.data', data.data); setRetro(data.data); + console.log('retro', retro); } catch (e) { toast.error(e); } }; - const FetchSection = async () => { + const fetchSection = async () => { try { const data = await SectionServices.get({ retrospectiveId: retrospectiveId, teamId: teamId }); - console.log(data.data); setSection(data.data); - console.log('section', section); } catch (e) { toast.error(e); } @@ -60,12 +60,10 @@ const RetroTeamPage = () => { }; useEffect(() => { - FetchSection(); + fetchSection(); fetchRetrospective(); fetchTemplate(); - }, []); - - if (!section) return; + }, [retro?.status, template?.values, section]); return ( @@ -91,7 +89,7 @@ const RetroTeamPage = () => { .map(section => ( ))} - + )) : PersonalSectionTitleName.map(title => ( diff --git a/src/pages/RevisePage.tsx b/src/pages/RevisePage.tsx index 21142b0..3d59a5e 100644 --- a/src/pages/RevisePage.tsx +++ b/src/pages/RevisePage.tsx @@ -64,7 +64,7 @@ const RetroRevisePage = () => { 회고 설정 - {retro.teamId !== null ? 팀원 관리 : null} + {retro.type === 'TEAM' ? 팀원 관리 : null} @@ -72,7 +72,7 @@ const RetroRevisePage = () => { - {retro.teamId !== null ? : } + {retro.type === 'TEAM' ? : } From 40ba27f6e4af189c1d0c0f80c922694000945476 Mon Sep 17 00:00:00 2001 From: heejung0413 Date: Fri, 19 Apr 2024 17:32:57 +0900 Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=90=9BFix:=20section=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20api=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/services/Section.ts | 3 +- .../writeRetro/revise/ManageTeamMembers.tsx | 19 --------- .../writeRetro/revise/RetroImageUploader.tsx | 2 +- .../writeRetro/revise/ReviseSetting.tsx | 2 +- src/components/writeRetro/task/TeamTask.tsx | 39 ++++++++++++++++++- .../task/taskMessage/TeamTaskMessage.tsx | 2 +- src/pages/RetroTeamPage.tsx | 7 +--- src/pages/RevisePage.tsx | 4 -- src/styles/writeRetroStyles/Layout.style.ts | 6 +++ 9 files changed, 49 insertions(+), 35 deletions(-) diff --git a/src/api/services/Section.ts b/src/api/services/Section.ts index d57420a..8d7e4c5 100644 --- a/src/api/services/Section.ts +++ b/src/api/services/Section.ts @@ -10,7 +10,6 @@ import { SectionClient, } from '../@types/Section'; import axiosInstance from '../axiosConfig'; -import { mswInstance } from '../client'; const ROUTE = 'sections'; @@ -49,7 +48,7 @@ export const SectionServices: SectionClient = { }, likePost: async ({ sectionId }: PostLikesSectionRequest): Promise => { try { - const response = await mswInstance.post(`${ROUTE}/${sectionId}/likes`); + const response = await axiosInstance.post(`${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 index ce8b815..993f637 100644 --- a/src/components/writeRetro/revise/ManageTeamMembers.tsx +++ b/src/components/writeRetro/revise/ManageTeamMembers.tsx @@ -13,23 +13,10 @@ interface Props { } const ManageTeamMembers: FC = ({ members, teamId }) => { - // const [members, setMembers] = useState(); - // const toast = useCustomToast(); const [searchTerm, setSearchTerm] = useState(''); const [searchList, setSearchList] = useState(); const [isInviteModalOpen, setInviteModalOpen] = useState(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 = ({ members, teamId }) => { }); }; - // useEffect(() => { - // fetchTeamMembers(); - // }, [teamId, retrospectiveId]); - - // if (!members) return; - return ( diff --git a/src/components/writeRetro/revise/RetroImageUploader.tsx b/src/components/writeRetro/revise/RetroImageUploader.tsx index fd0c7af..bc4959a 100644 --- a/src/components/writeRetro/revise/RetroImageUploader.tsx +++ b/src/components/writeRetro/revise/RetroImageUploader.tsx @@ -33,7 +33,7 @@ const RetroImageUploader: FC = ({ image, setImage }) => { {image ? ( ) : ( - + )}
diff --git a/src/components/writeRetro/revise/ReviseSetting.tsx b/src/components/writeRetro/revise/ReviseSetting.tsx index fed5dea..724934c 100644 --- a/src/components/writeRetro/revise/ReviseSetting.tsx +++ b/src/components/writeRetro/revise/ReviseSetting.tsx @@ -165,7 +165,7 @@ const ReviseSetting: FC = ({ retro }) => { -

{retro.userId}

+

{retro.leaderName}

 {/* 회고 설명 */} diff --git a/src/components/writeRetro/task/TeamTask.tsx b/src/components/writeRetro/task/TeamTask.tsx index f6a016a..a3375de 100644 --- a/src/components/writeRetro/task/TeamTask.tsx +++ b/src/components/writeRetro/task/TeamTask.tsx @@ -1,8 +1,20 @@ import { FC, useState } from 'react'; import { BiLike, BiSolidLike } from 'react-icons/bi'; import { CgProfile } from 'react-icons/cg'; +import { FaRegTrashAlt } from 'react-icons/fa'; import { MdAccessAlarm, MdMessage } from 'react-icons/md'; -import { Flex, Popover, PopoverContent, PopoverTrigger } from '@chakra-ui/react'; +import { + Button, + Flex, + Popover, + PopoverArrow, + PopoverBody, + PopoverCloseButton, + PopoverContent, + PopoverHeader, + PopoverTrigger, + Portal, +} from '@chakra-ui/react'; import { formattedDate } from './PersonalTask'; import TeamTaskMessage from './taskMessage/TeamTaskMessage'; import { sectionData } from '@/api/@types/Section'; @@ -90,7 +102,30 @@ const TeamTask: FC = ({ section }) => { {section.username} - 삭제 + + + 삭제 + + + + + + + 삭제요청 + + + + 선택한 회고 카드를 삭제하시겠습니까? + + + + + + + {/* TaskCenter */} diff --git a/src/components/writeRetro/task/taskMessage/TeamTaskMessage.tsx b/src/components/writeRetro/task/taskMessage/TeamTaskMessage.tsx index 8fba36d..23b3686 100644 --- a/src/components/writeRetro/task/taskMessage/TeamTaskMessage.tsx +++ b/src/components/writeRetro/task/taskMessage/TeamTaskMessage.tsx @@ -23,7 +23,7 @@ const TeamTaskMessage: FC = ({ section }) => { {/* TaskMessageTop */} - 5개의 댓글 + 0개의 댓글 diff --git a/src/pages/RetroTeamPage.tsx b/src/pages/RetroTeamPage.tsx index b398f81..260cc6e 100644 --- a/src/pages/RetroTeamPage.tsx +++ b/src/pages/RetroTeamPage.tsx @@ -30,9 +30,7 @@ const RetroTeamPage = () => { const fetchRetrospective = async () => { try { const data = await RetrospectiveService.onlyGet({ retrospectiveId: retrospectiveId }); - console.log('retro.data', data.data); setRetro(data.data); - console.log('retro', retro); } catch (e) { toast.error(e); } @@ -52,7 +50,6 @@ const RetroTeamPage = () => { if (retro) { const data = await TeamControllerServices.TemplateNameGet({ templateId: retro.templateId }); setTemplate(data.data); - console.log('template', template); } } catch (e) { toast.error(e); @@ -63,7 +60,7 @@ const RetroTeamPage = () => { fetchSection(); fetchRetrospective(); fetchTemplate(); - }, [retro?.status, template?.values, section]); + }, [retro?.status, template?.values]); return ( @@ -84,12 +81,12 @@ const RetroTeamPage = () => { taskCount={section.filter(data => data.sectionName === title.name).length} /> + {section .filter(key => key.sectionName === title.name) .map(section => ( ))} - )) : PersonalSectionTitleName.map(title => ( diff --git a/src/pages/RevisePage.tsx b/src/pages/RevisePage.tsx index 3d59a5e..c971c10 100644 --- a/src/pages/RevisePage.tsx +++ b/src/pages/RevisePage.tsx @@ -20,14 +20,12 @@ const RetroRevisePage = () => { const teamId = Number(query[3]); const [retro, setRetro] = useState(); const [members, setMembers] = useState(); - const toast = useCustomToast(); const FetchRetrospective = async () => { try { const data = await RetrospectiveService.onlyGet({ retrospectiveId: retrospectiveId }); setRetro(data.data); - console.log('retro', retro); } catch (e) { toast.error(e); } @@ -36,9 +34,7 @@ const RetroRevisePage = () => { 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); } diff --git a/src/styles/writeRetroStyles/Layout.style.ts b/src/styles/writeRetroStyles/Layout.style.ts index ab8396e..9cf5618 100644 --- a/src/styles/writeRetroStyles/Layout.style.ts +++ b/src/styles/writeRetroStyles/Layout.style.ts @@ -492,3 +492,9 @@ export const ActionItemsUserImg = styled.img` width: 24px; height: 24px; `; + +export const DeleteSectionText = styled.p` + margin: 20px; + color: #111b47; + font-size: 15px; +`; From 841bb55db166277cb07e8c64215bfa423f31af88 Mon Sep 17 00:00:00 2001 From: heejung0413 Date: Sat, 20 Apr 2024 00:20:27 +0900 Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=90=9BFix:=20=EC=9E=90=EC=9E=98?= =?UTF-8?q?=ED=95=9C=20api=20=EC=88=98=EC=A0=95(section=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20action=20item=20=EC=B6=94=EA=B0=80,=20?= =?UTF-8?q?=EB=94=B0=EB=A1=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 2 +- src/api/__mock__/retrospectiveTemplate.ts | 9 --- src/api/client.ts | 4 -- src/api/services/Retrospectives.ts | 9 +-- src/components/RetroList/ContentsList.tsx | 2 +- .../writeRetro/revise/ReviseSetting.tsx | 14 ++-- .../writeRetro/task/ActionItemTask.tsx | 66 +++++++++++++++++++ src/components/writeRetro/task/TeamTask.tsx | 58 +--------------- src/pages/RetroListPage.tsx | 2 +- .../{RetroTeamPage.tsx => SectionPage.tsx} | 41 +++++++----- src/styles/RetroList/RetroListPage.style.ts | 2 + 11 files changed, 106 insertions(+), 103 deletions(-) delete mode 100644 src/api/__mock__/retrospectiveTemplate.ts create mode 100644 src/components/writeRetro/task/ActionItemTask.tsx rename src/pages/{RetroTeamPage.tsx => SectionPage.tsx} (75%) diff --git a/src/App.tsx b/src/App.tsx index 8df4ed0..ab2d529 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,8 +3,8 @@ import { Navigate, useLocation } from 'react-router-dom'; import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; import { getCurrentUser } from 'aws-amplify/auth'; import { RecoilRoot } from 'recoil'; -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'; diff --git a/src/api/__mock__/retrospectiveTemplate.ts b/src/api/__mock__/retrospectiveTemplate.ts deleted file mode 100644 index aa13607..0000000 --- a/src/api/__mock__/retrospectiveTemplate.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { RetrospectivesTemplateResponse } from '../@types/RetrospectiveTemplates'; - -export const mockRetrospectiveTemplate: RetrospectivesTemplateResponse[] = [ - // { id: 1, name: 'hee' }, - // { - // id: 2, - // name: 'jung', - // }, -]; diff --git a/src/api/client.ts b/src/api/client.ts index 1e0575d..00b30c9 100644 --- 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 index aafe3fd..c130d58 100644 --- 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 => { 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 => { 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/components/RetroList/ContentsList.tsx b/src/components/RetroList/ContentsList.tsx index f1d96ba..8182b60 100644 --- a/src/components/RetroList/ContentsList.tsx +++ b/src/components/RetroList/ContentsList.tsx @@ -84,7 +84,7 @@ const ContentList: React.FC = ({ data, viewMode, searchData, s
- navigate(`/section?retrospectiveId=${item.id}&teamId=${item.teamId}`)}> + navigate(`/sections?retrospectiveId=${item.id}&teamId=${item.teamId}`)}> {item.title}
diff --git a/src/components/writeRetro/revise/ReviseSetting.tsx b/src/components/writeRetro/revise/ReviseSetting.tsx index 724934c..17f2b97 100644 --- a/src/components/writeRetro/revise/ReviseSetting.tsx +++ b/src/components/writeRetro/revise/ReviseSetting.tsx @@ -40,8 +40,7 @@ const ReviseSetting: FC = ({ retro }) => { const retrospectiveId = Number(query[1]); const teamId = Number(query[3]); const [isChecked, setIsChecked] = useState(false); - const [status, setStatus] = useState(''); - // const [retroName, setRetroName] = useState(); + const [status, setStatus] = useState(); const [image, setImage] = useState(retro.thumbnail); const [title, setTitle] = useState(''); const [templateName, setTemplateName] = useState(); @@ -54,7 +53,6 @@ const ReviseSetting: FC = ({ 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 +62,7 @@ const ReviseSetting: FC = ({ 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) { @@ -80,8 +77,8 @@ const ReviseSetting: FC = ({ retro }) => { title: title, teamId: teamId, description: description, - status: 'COMPLETED', thumbnail: image, + status: 'COMPLETED', }); console.log('put data', data); navigate('/retrolist'); @@ -101,7 +98,6 @@ const ReviseSetting: FC = ({ retro }) => { } else { toast.success('해당 회고는 최종 완료 처리되었습니다.'); setStatus(retro.status); - console.log(status); } } }; @@ -165,7 +161,9 @@ const ReviseSetting: FC = ({ retro }) => { -

{retro.leaderName}

+

+ {retro.leaderName ?? (회고 리더 이름없음)} +

{/* 회고 설명 */} diff --git a/src/components/writeRetro/task/ActionItemTask.tsx b/src/components/writeRetro/task/ActionItemTask.tsx new file mode 100644 index 0000000..1ac2cfd --- /dev/null +++ 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 = ({ section }) => { + // action items 담당자 지정 + const [hoveredUser, setHoveredUser] = useState(null); + const [showPopup, setShowPopup] = useState(false); + const [selectedUserName, setSelectedUserName] = useState(null); + const [selectedUserImg, setSelectedUserImg] = useState(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 ( + +
+ handleMouseEnter(selectedUserName || '')} + onMouseLeave={handleMouseLeave} + > + {selectedUserImg ? : 'M'} + {hoveredUser && {hoveredUser}} {/* 이름 : {name.username} */} + + {showPopup && ( + + )} +
+ {section.map(section => ( + {section.username} + ))} + + ); +}; + +export default ActionItemTask; diff --git a/src/components/writeRetro/task/TeamTask.tsx b/src/components/writeRetro/task/TeamTask.tsx index a3375de..80c68a5 100644 --- a/src/components/writeRetro/task/TeamTask.tsx +++ b/src/components/writeRetro/task/TeamTask.tsx @@ -19,9 +19,7 @@ import { formattedDate } from './PersonalTask'; import TeamTaskMessage from './taskMessage/TeamTaskMessage'; import { sectionData } from '@/api/@types/Section'; import { SectionServices } from '@/api/services/Section'; -import UserProfile1 from '@/assets/UserProfile1.png'; -import UserProfile2 from '@/assets/UserProfile2.png'; -import Members from '@/components/writeRetro/ActionItems/Members'; + import ReviseModal from '@/components/writeRetro/task/ReviseModal'; import { useCustomToast } from '@/hooks/useCustomToast'; import * as S from '@/styles/writeRetroStyles/Layout.style'; @@ -59,38 +57,6 @@ const TeamTask: FC = ({ section }) => { } }; - // action items 담당자 지정 - const [hoveredUser, setHoveredUser] = useState(null); - const [showPopup, setShowPopup] = useState(false); - const [selectedUserName, setSelectedUserName] = useState(null); - const [selectedUserImg, setSelectedUserImg] = useState(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 ( <> @@ -142,28 +108,6 @@ const TeamTask: FC = ({ section }) => { - {section.sectionName === 'Action Items' && ( - -
- handleMouseEnter(selectedUserName || '')} - onMouseLeave={handleMouseLeave} - > - {selectedUserImg ? : 'M'} - {hoveredUser && {hoveredUser}} {/* 이름 : {name.username} */} - - {showPopup && ( - - )} -
- {section.username} - - )} {/* TaskBottom */} diff --git a/src/pages/RetroListPage.tsx b/src/pages/RetroListPage.tsx index b0cbc04..a4b63f1 100644 --- a/src/pages/RetroListPage.tsx +++ b/src/pages/RetroListPage.tsx @@ -85,7 +85,7 @@ const RetroListPage = () => { updatedDate: formatDate(item.updatedDate), })); setRetroData(rawData); - }, [data]); + }, [data.nodes]); // console.log(retroData); const handleContentsFilter = (filterType: string) => { diff --git a/src/pages/RetroTeamPage.tsx b/src/pages/SectionPage.tsx similarity index 75% rename from src/pages/RetroTeamPage.tsx rename to src/pages/SectionPage.tsx index 260cc6e..c5f32aa 100644 --- a/src/pages/RetroTeamPage.tsx +++ b/src/pages/SectionPage.tsx @@ -50,6 +50,7 @@ const RetroTeamPage = () => { if (retro) { const data = await TeamControllerServices.TemplateNameGet({ templateId: retro.templateId }); setTemplate(data.data); + console.log(template); } } catch (e) { toast.error(e); @@ -74,20 +75,25 @@ const RetroTeamPage = () => { {template ? template.map(title => ( - - + )) : PersonalSectionTitleName.map(title => ( @@ -96,13 +102,12 @@ const RetroTeamPage = () => { labelType="dark" taskCount={section.filter(data => data.sectionName === title.title).length} /> - {/* {section - .filter(key => key.sectionName === title.title) - .map(name => ( - - ))} */} ))} + + diff --git a/src/styles/RetroList/RetroListPage.style.ts b/src/styles/RetroList/RetroListPage.style.ts index 5233747..418e365 100644 --- a/src/styles/RetroList/RetroListPage.style.ts +++ b/src/styles/RetroList/RetroListPage.style.ts @@ -27,6 +27,8 @@ export const SortButtonContainer = styled.div` export const Box = styled.div` padding-left: 40px; padding-right: 40px; + margin: 0 auto; + width: 1000px; `; export const ControBarContainer = styled.div` From e9f4f7e467533ec4489496432e3f2605c7c0d965 Mon Sep 17 00:00:00 2001 From: heejung0413 Date: Sat, 20 Apr 2024 03:12:07 +0900 Subject: [PATCH 4/4] =?UTF-8?q?fix:=20section=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20api=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 10 --- src/api/@types/Section.ts | 11 ++- src/api/services/Section.ts | 13 +++- .../writeRetro/revise/ReviseSetting.tsx | 21 +++--- src/components/writeRetro/task/TeamTask.tsx | 2 +- src/mocks/handlers.ts | 2 +- src/pages/RetroListPage.tsx | 4 +- src/pages/RetroPersonalPage.tsx | 74 ------------------- src/pages/RevisePage.tsx | 14 ++-- src/pages/SectionPage.tsx | 15 ++-- src/styles/RetroList/RetroListPage.style.ts | 2 +- 11 files changed, 52 insertions(+), 116 deletions(-) delete mode 100644 src/pages/RetroPersonalPage.tsx diff --git a/src/App.tsx b/src/App.tsx index ab2d529..22afc33 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -98,14 +98,6 @@ const App = () => { } /> - {/* - - - } - /> */} { } /> - { } /> - {/* MainLayout */} }> } /> diff --git a/src/api/@types/Section.ts b/src/api/@types/Section.ts index cdf39ba..1846f7e 100644 --- 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; + TeamGet(request: TeamGetSectionRequest): Promise; + PersonalGet(request: PersonalGetSectionRequest): Promise; create(request: CreateSectionRequest): Promise; patch(request: PatchSectionRequest): Promise; delete(request: DeleteSectionRequest): Promise; diff --git a/src/api/services/Section.ts b/src/api/services/Section.ts index 8d7e4c5..4bef268 100644 --- 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 => { + TeamGet: async (request: TeamGetSectionRequest): Promise => { + try { + const response = await axiosInstance.get(`${ROUTE}`, { params: request }); + return response.data; + } catch (error) { + throw new Error(error as string); + } + }, + PersonalGet: async (request: PersonalGetSectionRequest): Promise => { try { const response = await axiosInstance.get(`${ROUTE}`, { params: request }); return response.data; diff --git a/src/components/writeRetro/revise/ReviseSetting.tsx b/src/components/writeRetro/revise/ReviseSetting.tsx index 17f2b97..a79e8dd 100644 --- 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 = ({ retro }) => { +const ReviseSetting: FC = ({ retro, status, setStatus }) => { const { search } = useLocation(); const query = search.split(/[=,&]/); const retrospectiveId = Number(query[1]); const teamId = Number(query[3]); const [isChecked, setIsChecked] = useState(false); - const [status, setStatus] = useState(); + const [image, setImage] = useState(retro.thumbnail); const [title, setTitle] = useState(''); const [templateName, setTemplateName] = useState(); @@ -73,7 +75,7 @@ const ReviseSetting: FC = ({ 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 = ({ 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 = ({ retro }) => { {/* save, cancel */} -