From 6e83522224a17affef8dd4df4a223e1cbe9e6db8 Mon Sep 17 00:00:00 2001 From: namdaeun Date: Thu, 14 Nov 2024 14:32:23 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20teamId=20=EC=BB=A4=EC=8A=A4=ED=85=80=20?= =?UTF-8?q?=ED=9B=85=20=EA=B5=AC=ED=98=84=20=EB=B0=8F=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/page/archiving/index/ArchivingPage.tsx | 6 ++++-- src/page/archiving/index/DateProvider.tsx | 2 +- .../index/component/DocumentBar/Item/Item.tsx | 8 +++----- .../component/DocumentBar/Selected/Selected.tsx | 12 ++++-------- .../index/component/DocumentBar/Total/Total.tsx | 11 ++++------- .../component/Upload/UploadModal.tsx | 6 +++--- .../archiving/index/component/TimeLine/index.tsx | 6 +++--- .../component/Timeline/TimelineSection.tsx | 8 ++++---- src/shared/hook/common/useInitializeTeamId.tsx | 16 ++++++++++++++++ src/shared/store/team.ts | 9 ++++----- 10 files changed, 46 insertions(+), 38 deletions(-) create mode 100644 src/shared/hook/common/useInitializeTeamId.tsx diff --git a/src/page/archiving/index/ArchivingPage.tsx b/src/page/archiving/index/ArchivingPage.tsx index dc545fa2e..3218d0604 100644 --- a/src/page/archiving/index/ArchivingPage.tsx +++ b/src/page/archiving/index/ArchivingPage.tsx @@ -12,15 +12,17 @@ import { useInteractTimeline } from '@/page/archiving/index/hook/common/useInter import { Block } from '@/page/archiving/index/type/blockType'; import ContentBox from '@/shared/component/ContentBox/ContentBox'; +import { useInitializeTeamId } from '@/shared/hook/common/useInitializeTeamId'; import { useDrawerAction } from '@/shared/store/drawer'; import { useOpenModal } from '@/shared/store/modal'; -import { useTeamId } from '@/shared/store/team'; const ArchivingPage = () => { const { selectedBlock, handleBlockClick } = useInteractTimeline(); const openModal = useOpenModal(); + const teamId = useInitializeTeamId(); + const location = useLocation(); const selectedBlockFromDashboard: Block = location.state?.selectedBlock; const finalSelectedBlock = selectedBlockFromDashboard || selectedBlock; @@ -43,7 +45,7 @@ const ArchivingPage = () => { openModal('create-block'); }; return ( - + { }; const DateProvider = ({ children, teamId }: DateProviderProp) => { - const date = useDate(+teamId); + const date = useDate(teamId); return {children}; }; diff --git a/src/page/archiving/index/component/DocumentBar/Item/Item.tsx b/src/page/archiving/index/component/DocumentBar/Item/Item.tsx index 32eb18346..67d5da42d 100644 --- a/src/page/archiving/index/component/DocumentBar/Item/Item.tsx +++ b/src/page/archiving/index/component/DocumentBar/Item/Item.tsx @@ -1,6 +1,5 @@ /* eslint-disable jsx-a11y/click-events-have-key-events */ import { ReactNode } from 'react'; -import { useLocation } from 'react-router-dom'; import TrashBox from '@/common/asset/svg/ic_delete.svg?react'; import Download from '@/common/asset/svg/ic_download.svg?react'; @@ -10,6 +9,7 @@ import Text from '@/common/component/Text/Text'; import { containerStyle, fileNameStyle } from '@/page/archiving/index/component/DocumentBar/Item/Item.style'; import { downloadDocument } from '@/page/archiving/index/util/document'; +import { useInitializeTeamId } from '@/shared/hook/common/useInitializeTeamId'; import { useOpenModal } from '@/shared/store/modal'; interface ItemProps { @@ -22,9 +22,7 @@ interface ItemProps { } const Item = ({ documentId, children, fileUrl, fileName }: ItemProps) => { - const location = useLocation(); - const searchParams = new URLSearchParams(location.search); - const teamId = searchParams.get('teamId'); + const teamId = useInitializeTeamId(); const openModal = useOpenModal(); @@ -40,7 +38,7 @@ const Item = ({ documentId, children, fileUrl, fileName }: ItemProps) => { const handleTrashBoxClick = (e: React.MouseEvent) => { e.stopPropagation(); - openModal('delete', { teamId: +teamId!, itemId: documentId, itemType: 'docs' }); + openModal('delete', { teamId: teamId, itemId: documentId, itemType: 'docs' }); }; return ( diff --git a/src/page/archiving/index/component/DocumentBar/Selected/Selected.tsx b/src/page/archiving/index/component/DocumentBar/Selected/Selected.tsx index 759d7a4da..f6d4706fb 100644 --- a/src/page/archiving/index/component/DocumentBar/Selected/Selected.tsx +++ b/src/page/archiving/index/component/DocumentBar/Selected/Selected.tsx @@ -1,5 +1,3 @@ -import { useLocation } from 'react-router-dom'; - import Button from '@/common/component/Button/Button'; import Flex from '@/common/component/Flex/Flex'; import Heading from '@/common/component/Heading/Heading'; @@ -14,6 +12,7 @@ import { Block } from '@/page/archiving/index/type/blockType'; import { DocumentType } from '@/page/archiving/index/type/documentType'; import { formattingDate } from '@/page/archiving/index/util/date'; +import { useInitializeTeamId } from '@/shared/hook/common/useInitializeTeamId'; import { useOpenModal } from '@/shared/store/modal'; interface SelectedProps { @@ -22,12 +21,9 @@ interface SelectedProps { } const Selected = ({ selectedBlock }: SelectedProps) => { - const location = useLocation(); - const teamId = new URLSearchParams(location.search).get('teamId'); - - if (!teamId) throw new Error('has no teamId'); + const teamId = useInitializeTeamId(); - const { data: blockData } = useBlockInfoQuery(+teamId, selectedBlock?.timeBlockId ?? 0); + const { data: blockData } = useBlockInfoQuery(teamId, selectedBlock?.timeBlockId ?? 0); const startDate = formattingDate(selectedBlock.startDate); const endDate = formattingDate(selectedBlock.endDate); @@ -35,7 +31,7 @@ const Selected = ({ selectedBlock }: SelectedProps) => { const openModal = useOpenModal(); const handleDeleteClick = () => { - openModal('delete', { teamId: +teamId!, itemId: selectedBlock.timeBlockId, itemType: 'block' }); + openModal('delete', { teamId: teamId, itemId: selectedBlock.timeBlockId, itemType: 'block' }); }; return ( diff --git a/src/page/archiving/index/component/DocumentBar/Total/Total.tsx b/src/page/archiving/index/component/DocumentBar/Total/Total.tsx index f39f707ee..af14c4f3a 100644 --- a/src/page/archiving/index/component/DocumentBar/Total/Total.tsx +++ b/src/page/archiving/index/component/DocumentBar/Total/Total.tsx @@ -1,5 +1,4 @@ import { useState } from 'react'; -import { useLocation } from 'react-router-dom'; import SearchIc from '@/common/asset/svg/ic_search.svg?react'; import Flex from '@/common/component/Flex/Flex'; @@ -13,15 +12,13 @@ import Sort from '@/page/archiving/index/component/DocumentBar/Sort/Sort'; import { useTotalDocumentQuery } from '@/page/archiving/index/hook/api/useTotalDocumentQuery'; import { DocumentType } from '@/page/archiving/index/type/documentType'; +import { useInitializeTeamId } from '@/shared/hook/common/useInitializeTeamId'; + const DocumentTotal = () => { const [selected, setSelected] = useState('최근 업로드 순'); - const location = useLocation(); - const teamId = new URLSearchParams(location.search).get('teamId'); - - if (!teamId) throw new Error('has no teamId'); - - const { data: documentDatas } = useTotalDocumentQuery(+teamId, 'executive'); + const teamId = useInitializeTeamId(); + const { data: documentDatas } = useTotalDocumentQuery(teamId, 'executive'); // input에 입력되는 검색값 const [searchWord, setSearchWord] = useState(''); diff --git a/src/page/archiving/index/component/TimeBlockModal/component/Upload/UploadModal.tsx b/src/page/archiving/index/component/TimeBlockModal/component/Upload/UploadModal.tsx index f82bcec73..68004846a 100644 --- a/src/page/archiving/index/component/TimeBlockModal/component/Upload/UploadModal.tsx +++ b/src/page/archiving/index/component/TimeBlockModal/component/Upload/UploadModal.tsx @@ -17,8 +17,8 @@ import { formatDatePost } from '@/page/archiving/index/component/TimeBlockModal/ import { Files } from '@/shared/api/time-blocks/team/time-block/type'; import WorkSapceInfo from '@/shared/component/WorkSpaceModal/info/WorkSpaceInfo'; import { useBlockContext } from '@/shared/hook/common/useBlockContext'; +import { useInitializeTeamId } from '@/shared/hook/common/useInitializeTeamId'; import { useCloseModal } from '@/shared/store/modal'; -import { useTeamId } from '@/shared/store/team'; import { useToastAction } from '@/shared/store/toast'; interface UploadModalProps { @@ -26,7 +26,7 @@ interface UploadModalProps { } const UploadModal = ({ isVisible }: UploadModalProps) => { - const teamId = useTeamId(); + const teamId = useInitializeTeamId(); const { formData, reset } = useBlockContext(); const closeModal = useCloseModal(); @@ -36,7 +36,7 @@ const UploadModal = ({ isVisible }: UploadModalProps) => { const [uploadStatus, setUploadStatus] = useState<{ [key: string]: boolean }>({}); const [isAllUploaded, setIsAllUploaded] = useState(true); - const { mutate: timeBlockMutate } = usePostTimeBlockMutation(+teamId!, 'executive'); + const { mutate: timeBlockMutate } = usePostTimeBlockMutation(teamId, 'executive'); const { mutate: fileDeleteMutate } = useDeleteFileMutation(); const { createToast } = useToastAction(); diff --git a/src/page/archiving/index/component/TimeLine/index.tsx b/src/page/archiving/index/component/TimeLine/index.tsx index 193167a24..39f8ed4c9 100644 --- a/src/page/archiving/index/component/TimeLine/index.tsx +++ b/src/page/archiving/index/component/TimeLine/index.tsx @@ -13,8 +13,8 @@ import { useGetTimeBlockQuery } from '@/page/archiving/index/hook/api/useGetTime import { Block } from '@/page/archiving/index/type/blockType'; import { alignBlocks, createTimeBlock } from '@/page/archiving/index/util/block'; +import { useInitializeTeamId } from '@/shared/hook/common/useInitializeTeamId'; import { useDrawerIsOpen } from '@/shared/store/drawer'; -import { useTeamId } from '@/shared/store/team'; interface TimeLineProps { selectedBlock?: Block; @@ -22,10 +22,10 @@ interface TimeLineProps { } const TimeLine = ({ selectedBlock, onBlockClick }: TimeLineProps) => { - const teamId = useTeamId(); + const teamId = useInitializeTeamId(); const { currentYear, currentMonth, endDay } = useDateContext(); - const { data } = useGetTimeBlockQuery(+teamId, 'executive', currentYear, currentMonth); + const { data } = useGetTimeBlockQuery(teamId, 'executive', currentYear, currentMonth); const timeBlocks: Block[] = data.timeBlocks; const blockFloors = alignBlocks(timeBlocks, endDay, currentMonth, currentYear); diff --git a/src/page/dashboard/component/Timeline/TimelineSection.tsx b/src/page/dashboard/component/Timeline/TimelineSection.tsx index c7d11bcf7..dbfd06425 100644 --- a/src/page/dashboard/component/Timeline/TimelineSection.tsx +++ b/src/page/dashboard/component/Timeline/TimelineSection.tsx @@ -12,15 +12,15 @@ import { alignBlocks, createTimeBlock } from '@/page/archiving/index/util/block' import { timelineContentStyle } from '@/page/dashboard/component/Timeline/TimelineSection.style'; import { PATH } from '@/shared/constant/path'; -import { useTeamId } from '@/shared/store/team'; +import { useInitializeTeamId } from '@/shared/hook/common/useInitializeTeamId'; const TimelineSection = () => { const navigate = useNavigate(); - const teamId = useTeamId(); - const { currentYear, currentMonth, endDay } = useDate(+teamId); + const teamId = useInitializeTeamId(); + const { currentYear, currentMonth, endDay } = useDate(teamId); - const { data } = useGetTimeBlockQuery(+teamId, 'executive', currentYear, currentMonth); + const { data } = useGetTimeBlockQuery(teamId, 'executive', currentYear, currentMonth); const timeBlocks: Block[] = data.timeBlocks; const blockFloors = alignBlocks(timeBlocks, endDay, currentMonth, currentYear); diff --git a/src/shared/hook/common/useInitializeTeamId.tsx b/src/shared/hook/common/useInitializeTeamId.tsx new file mode 100644 index 000000000..ee94c5fd9 --- /dev/null +++ b/src/shared/hook/common/useInitializeTeamId.tsx @@ -0,0 +1,16 @@ +import { useClubInfoQuery } from '@/shared/hook/api/useClubInfoQuery'; +import { useTeamIdAction } from '@/shared/store/team'; + +export const useInitializeTeamId = () => { + const { data } = useClubInfoQuery(); + const { setTeamId } = useTeamIdAction(); + + if (data && !localStorage.getItem('teamId')) { + localStorage.setItem('teamId', data.belongTeamGetResponses[0].id.toString()); + setTeamId(data.belongTeamGetResponses[0].id); + + return data.belongTeamGetResponses[0].id; + } + + return Number(localStorage.getItem('teamId')); +}; diff --git a/src/shared/store/team.ts b/src/shared/store/team.ts index 519249bda..cd28a21b8 100644 --- a/src/shared/store/team.ts +++ b/src/shared/store/team.ts @@ -1,17 +1,17 @@ import { create } from 'zustand'; type TeamStore = { - teamId: string; + teamId: number; actions: { - setTeamId: (id: string) => void; + setTeamId: (id: number) => void; }; }; const useTeamStore = create((set) => ({ - teamId: '0', + teamId: Number(localStorage.getItem('teamId')), actions: { - setTeamId: (teamId: string) => + setTeamId: (teamId: number) => set({ teamId, }), @@ -19,5 +19,4 @@ const useTeamStore = create((set) => ({ })); export const useTeamId = () => useTeamStore((state) => state.teamId); - export const useTeamIdAction = () => useTeamStore((state) => state.actions);