From 23e3d6dff9744c39a142a0fdc3a96418d29fa335 Mon Sep 17 00:00:00 2001 From: cindy-chaewon Date: Thu, 1 Aug 2024 05:22:29 +0900 Subject: [PATCH 01/24] =?UTF-8?q?#187=20feat:=20=EB=AA=A8=EB=8B=AC=20?= =?UTF-8?q?=EC=83=81=ED=83=9C=20store?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/store/modal.ts | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 src/shared/store/modal.ts diff --git a/src/shared/store/modal.ts b/src/shared/store/modal.ts new file mode 100644 index 00000000..b51a99e2 --- /dev/null +++ b/src/shared/store/modal.ts @@ -0,0 +1,32 @@ +import { create } from 'zustand'; + +interface ModalState { + //워크 스페이스 생성 모달 + workspaceModal: boolean; + categoryModal: boolean; + imageModal: boolean; + completeModal: boolean; + + //타임블록 생성 모달 + blockModal: boolean; + uploadModal: boolean; + + //삭제 모달 + deleteModal: boolean; + + openModal: (modalName: string) => void; + closeModal: (modalName: string) => void; +} + +export const useModalStore = create((set) => ({ + workspaceModal: false, + categoryModal: false, + imageModal: false, + completeModal: false, + blockModal: false, + uploadModal: false, + deleteModal: false, + + openModal: (modalName) => set((state) => ({ ...state, [modalName]: true })), + closeModal: (modalName) => set((state) => ({ ...state, [modalName]: false })), +})); From 2f33596875d2fea2b469160be8e4a68b98194b17 Mon Sep 17 00:00:00 2001 From: cindy-chaewon Date: Thu, 1 Aug 2024 05:47:25 +0900 Subject: [PATCH 02/24] =?UTF-8?q?#187=20fix:=20=EB=AA=A8=EB=8B=AC=20?= =?UTF-8?q?=EC=83=81=ED=83=9C=20store=20toggle=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/component/Modal/Modal.tsx | 4 +- .../createWorkSpace/name/WorkSpaceName.tsx | 10 ++- src/shared/store/modal.ts | 64 +++++++++++-------- 3 files changed, 50 insertions(+), 28 deletions(-) diff --git a/src/common/component/Modal/Modal.tsx b/src/common/component/Modal/Modal.tsx index 60f11850..c57353f8 100644 --- a/src/common/component/Modal/Modal.tsx +++ b/src/common/component/Modal/Modal.tsx @@ -3,14 +3,14 @@ /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ /* eslint-disable jsx-a11y/click-events-have-key-events */ -import { ReactElement, useCallback, useEffect } from 'react'; +import { ReactNode, useCallback, useEffect } from 'react'; import { createPortal } from 'react-dom'; import { backgroundStyle, dialogStyle } from '@/common/component/Modal/Modal.style'; interface ModalProps { isOpen: boolean; - children?: ReactElement; + children: ReactNode; onClose?: () => void; } diff --git a/src/shared/component/createWorkSpace/name/WorkSpaceName.tsx b/src/shared/component/createWorkSpace/name/WorkSpaceName.tsx index 7eca8a09..f4f9e0ed 100644 --- a/src/shared/component/createWorkSpace/name/WorkSpaceName.tsx +++ b/src/shared/component/createWorkSpace/name/WorkSpaceName.tsx @@ -10,6 +10,8 @@ import { inputWrapperStyle, sectionStyle, } from '@/shared/component/createWorkSpace/name/WorkSpaceName.style'; +import { useModalStore } from '@/shared/store/modal'; +import Modal from '@/common/component/Modal/Modal'; interface WorkSpaceNameProps { onNext: () => void; @@ -18,11 +20,13 @@ interface WorkSpaceNameProps { const WorkSpaceName = ({ onNext, setName }: WorkSpaceNameProps) => { const [inputValue, setInputValue] = useState(''); + const { workspaceModal, openModal, closeModal } = useModalStore(); const handleNext = () => { setName(inputValue); + closeModal('work') + - onNext(); }; const isButtonActive = inputValue.trim().length > 0; @@ -32,6 +36,9 @@ const WorkSpaceName = ({ onNext, setName }: WorkSpaceNameProps) => { }; return ( + + +
@@ -53,6 +60,7 @@ const WorkSpaceName = ({ onNext, setName }: WorkSpaceNameProps) => { 다음 + ); }; diff --git a/src/shared/store/modal.ts b/src/shared/store/modal.ts index b51a99e2..8e702284 100644 --- a/src/shared/store/modal.ts +++ b/src/shared/store/modal.ts @@ -1,32 +1,46 @@ import { create } from 'zustand'; -interface ModalState { - //워크 스페이스 생성 모달 - workspaceModal: boolean; - categoryModal: boolean; - imageModal: boolean; - completeModal: boolean; - - //타임블록 생성 모달 - blockModal: boolean; - uploadModal: boolean; +// 모달의 타입을 정의 +type ModalType = 'workspace' | 'category' | 'image' | 'complete' | 'block' | 'upload' | 'delete'; - //삭제 모달 - deleteModal: boolean; +interface ModalState { + // 모달 상태 + modals: { + workspace: boolean; + category: boolean; + image: boolean; + complete: boolean; + block: boolean; + upload: boolean; + delete: boolean; + }; - openModal: (modalName: string) => void; - closeModal: (modalName: string) => void; + // 모달 상태를 토글하는 액션 + toggleModal: (type: ModalType) => void; } -export const useModalStore = create((set) => ({ - workspaceModal: false, - categoryModal: false, - imageModal: false, - completeModal: false, - blockModal: false, - uploadModal: false, - deleteModal: false, - - openModal: (modalName) => set((state) => ({ ...state, [modalName]: true })), - closeModal: (modalName) => set((state) => ({ ...state, [modalName]: false })), +const useModalStore = create((set) => ({ + modals: { + workspace: false, + category: false, + image: false, + complete: false, + block: false, + upload: false, + delete: false, + }, + + // 모달의 열고 닫는 행위를 토글하는 함수 + toggleModal: (type: ModalType) => + set((state) => ({ + modals: { ...state.modals, [type]: !state.modals[type] }, + })), })); + +// 각 모달 상태를 가져오는 훅 +export const useModalState = (type: ModalType) => useModalStore((state) => state.modals[type]); + +// 모달 토글 액션을 사용하는 훅 +export const useToggleModal = () => useModalStore((state) => state.toggleModal); + +export default useModalStore; From 1034e74155cf5ff944de89e9011471a3c030da09 Mon Sep 17 00:00:00 2001 From: cindy-chaewon Date: Thu, 1 Aug 2024 09:08:17 +0900 Subject: [PATCH 03/24] =?UTF-8?q?#187=20feat:=20=EB=AA=A8=EB=8B=AC=20zusta?= =?UTF-8?q?nd=EB=A1=9C=20=EB=9D=84=EC=9A=B0=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/component/Modal/Modal.tsx | 2 + .../component/LeftSidebar/LeftSidebar.tsx | 127 +++++++++--------- .../category/WorkSpaceCategory.tsx | 23 +++- .../complete/WorkSpaceComplete.tsx | 6 + .../hook/api/usePostTeamMutation.ts | 10 +- .../createWorkSpace/image/WorkSpaceImage.tsx | 40 ++++-- .../createWorkSpace/name/WorkSpaceName.tsx | 21 +-- src/shared/store/modal.ts | 46 ------- src/shared/store/modal.tsx | 65 +++++++++ src/shared/store/modalContext.tsx | 38 ++++++ "src/shared/util/\bmodal.tsx" | 28 ++++ 11 files changed, 274 insertions(+), 132 deletions(-) delete mode 100644 src/shared/store/modal.ts create mode 100644 src/shared/store/modal.tsx create mode 100644 src/shared/store/modalContext.tsx create mode 100644 "src/shared/util/\bmodal.tsx" diff --git a/src/common/component/Modal/Modal.tsx b/src/common/component/Modal/Modal.tsx index c57353f8..48cee01c 100644 --- a/src/common/component/Modal/Modal.tsx +++ b/src/common/component/Modal/Modal.tsx @@ -38,6 +38,8 @@ const Modal = ({ isOpen, children, onClose }: ModalProps) => { }; }, [isOpen, handleKeyDown]); + console.log('Modal isOpen:', isOpen); + return ( isOpen && createPortal( diff --git a/src/shared/component/LeftSidebar/LeftSidebar.tsx b/src/shared/component/LeftSidebar/LeftSidebar.tsx index c6cd2c61..56a6c7ac 100644 --- a/src/shared/component/LeftSidebar/LeftSidebar.tsx +++ b/src/shared/component/LeftSidebar/LeftSidebar.tsx @@ -28,8 +28,11 @@ import WorkSpaceImage from '@/shared/component/createWorkSpace/image/WorkSpaceIm import WorkSpaceName from '@/shared/component/createWorkSpace/name/WorkSpaceName'; import { PATH } from '@/shared/constant/path'; import { useClubInfoQuery } from '@/shared/hook/api/useClubInfoQuery'; +import { useModalComponent, useModalState, useToggleModal } from '@/shared/store/modal'; +import { WorkSpaceProvider } from '@/shared/store/modalContext'; import { useTeamStore } from '@/shared/store/team'; import { Team } from '@/shared/type/team'; +import { ModalManager } from '@/shared/util/\bmodal'; import { usePostTeamMutation } from '../createWorkSpace/hook/api/usePostTeamMutation'; @@ -38,29 +41,26 @@ const LeftSidebar = () => { const sidebarRef = useOutsideClick(close); - const { data, refetch } = useClubInfoQuery(); + const { data } = useClubInfoQuery(); const navigate = useNavigate(); const [clicked, setClicked] = useState('showcase'); const [isWorkspaceClicked, setIsWorkspaceClicked] = useState(false); - // 모달 관련 코드 - const { isOpen, openModal, closeModal: closeModalBase, setCurrentContent, currentContent } = useModal(); - const { isOpen: isSettingOpen, close: onSettingClose, toggle } = useOverlay(); const settingRef = useOutsideClick(onSettingClose); - const [name, setName] = useState(''); + /*const [name, setName] = useState(''); const [category, setCategory] = useState(''); const [fileUrlData, setFileUrlData] = useState(''); const [isComplete, setIsComplete] = useState(false); - const { mutate: postTeamMutate } = usePostTeamMutation(); + const { mutate: postTeamMutate } = usePostTeamMutation();*/ const { setTeamId } = useTeamStore(); - useEffect(() => { + /*useEffect(() => { const postData = { name: name, category: category, @@ -75,8 +75,7 @@ const LeftSidebar = () => { }, }); } - /* eslint-disable-next-line react-hooks/exhaustive-deps */ - }, [isComplete]); + }, [isComplete]);*/ useEffect(() => { const teamId = localStorage.getItem('teamId'); @@ -87,12 +86,12 @@ const LeftSidebar = () => { } }, [setTeamId, navigate]); - const handleNext1 = () => setCurrentContent(); + /*const handleNext1 = () => setCurrentContent(); const handleNext2 = () => setCurrentContent( ); - const handleNext3 = () => setCurrentContent(); + const handleNext3 = () => setCurrentContent();*/ const handleShowcaseClick = () => { setClicked('showcase'); @@ -112,69 +111,75 @@ const LeftSidebar = () => { navigate(`${PATH.ARCHIVING}?teamId=${teamId}`); close(); }; + // 모달 관련 코드 + const isOpenModal = useModalState('workspace'); + const ModalContent = useModalComponent(); // 현재 단계에 해당하는 컴포넌트 가져오기 + const toggleModal = useToggleModal(); const handleWorkspaceClick = () => { setIsWorkspaceClicked(true); - openModal(); + toggleModal('workspace'); }; const closeModal = () => { - closeModalBase(); + //closeModalBase(); setIsWorkspaceClicked(false); // 모달 닫을 때 워크스페이스 클릭 상태 해제 }; return ( - + + + + + ); }; diff --git a/src/shared/component/createWorkSpace/category/WorkSpaceCategory.tsx b/src/shared/component/createWorkSpace/category/WorkSpaceCategory.tsx index a86a118f..54136067 100644 --- a/src/shared/component/createWorkSpace/category/WorkSpaceCategory.tsx +++ b/src/shared/component/createWorkSpace/category/WorkSpaceCategory.tsx @@ -3,6 +3,7 @@ import { useEffect, useState } from 'react'; import ArrowDown from '@/common/asset/svg/arrow_drop_down.svg?react'; import Button from '@/common/component/Button/Button'; import Flex from '@/common/component/Flex/Flex'; +import Modal from '@/common/component/Modal/Modal'; import Select from '@/common/component/Select/Select'; import { useOutsideClick, useOverlay } from '@/common/hook'; @@ -14,15 +15,21 @@ import { import WorkSapceInfo from '@/shared/component/createWorkSpace/info/WorkSpaceInfo'; import { buttonStyle, sectionStyle } from '@/shared/component/createWorkSpace/name/WorkSpaceName.style'; import useCategoryListQuery from '@/shared/hook/api/useCategoryListQuery'; +import { useModalState, useNextStep, useToggleModal } from '@/shared/store/modal'; +import { useWorkSpaceContext } from '@/shared/store/modalContext'; interface WorkSpaceCategoryProps { - onNext: () => void; onCategory: (category: string) => void; } -const WorkSpaceCategory = ({ onNext, onCategory }: WorkSpaceCategoryProps) => { +const WorkSpaceCategory = () => { const { isOpen, close, toggle } = useOverlay(); const ref = useOutsideClick(close, 'select-container'); + // 모달 + const isOpenModal = useModalState('category'); + const toggleModal = useToggleModal(); + const nextStep = useNextStep(); + const { setCategory } = useWorkSpaceContext(); const [selected, setSelected] = useState(''); @@ -53,14 +60,18 @@ const WorkSpaceCategory = ({ onNext, onCategory }: WorkSpaceCategoryProps) => { useEffect(() => { if (selected) { - onCategory(selected); + setCategory(selected); } close?.(); - }, [selected, onCategory, close]); + }, [selected, setCategory, close]); const handleSelect = (id: string) => { setSelected(id); - onCategory(id); + setCategory(id); + }; + + const handleNext = () => { + nextStep(); }; const isButtonActive = selected.trim().length > 0; @@ -92,7 +103,7 @@ const WorkSpaceCategory = ({ onNext, onCategory }: WorkSpaceCategoryProps) => { size="medium" css={buttonStyle(isButtonActive)} disabled={!isButtonActive} - onClick={onNext}> + onClick={handleNext}> 다음 diff --git a/src/shared/component/createWorkSpace/complete/WorkSpaceComplete.tsx b/src/shared/component/createWorkSpace/complete/WorkSpaceComplete.tsx index 0fdac193..2b6bf49b 100644 --- a/src/shared/component/createWorkSpace/complete/WorkSpaceComplete.tsx +++ b/src/shared/component/createWorkSpace/complete/WorkSpaceComplete.tsx @@ -1,10 +1,16 @@ import WorkSpaceCompleteImg from '@/common/asset/svg/workspace-complete.svg?react'; import Flex from '@/common/component/Flex/Flex'; +import Modal from '@/common/component/Modal/Modal'; import WorkSapceInfo from '@/shared/component/createWorkSpace/info/WorkSpaceInfo'; import { sectionStyle } from '@/shared/component/createWorkSpace/name/WorkSpaceName.style'; +import { useModalState, useToggleModal } from '@/shared/store/modal'; const WorkSpaceComplete = () => { + // 모달 + const isOpenModal = useModalState('complete'); + const toggleModal = useToggleModal(); + return ( { + const queryClient = useQueryClient(); + return useMutation({ mutationFn: (data: CreateTeam) => postTeam(data), + + onSuccess: () => { + queryClient.invalidateQueries({ + queryKey: ['clubInfo'], + }); + }, }); }; diff --git a/src/shared/component/createWorkSpace/image/WorkSpaceImage.tsx b/src/shared/component/createWorkSpace/image/WorkSpaceImage.tsx index aaec03b8..f1a57aa4 100644 --- a/src/shared/component/createWorkSpace/image/WorkSpaceImage.tsx +++ b/src/shared/component/createWorkSpace/image/WorkSpaceImage.tsx @@ -7,6 +7,7 @@ import TeamProfileAdd from '@/common/asset/svg/team-profile-add.svg?react'; import TeamProfileDelete from '@/common/asset/svg/team-profile-delete.svg?react'; import Button from '@/common/component/Button/Button'; import Flex from '@/common/component/Flex/Flex'; +import Modal from '@/common/component/Modal/Modal'; import useGetFileQuery from '@/shared/component/createWorkSpace/hook/api/useGetFileQuery'; import { @@ -17,14 +18,17 @@ import { } from '@/shared/component/createWorkSpace/image/WorkSpaceImage.style'; import WorkSapceInfo from '@/shared/component/createWorkSpace/info/WorkSpaceInfo'; import { sectionStyle } from '@/shared/component/createWorkSpace/name/WorkSpaceName.style'; +import { useModalState, useNextStep, useToggleModal } from '@/shared/store/modal'; +import { useWorkSpaceContext } from '@/shared/store/modalContext'; + +import { usePostTeamMutation } from '../hook/api/usePostTeamMutation'; interface WorkSpaceImageProps { - onNext: () => void; onFileUrlData: (file: string) => void; isComplete: (isComplete: boolean) => void; } -const WorkSpaceImage = ({ onNext, onFileUrlData, isComplete }: WorkSpaceImageProps) => { +const WorkSpaceImage = () => { const [fileURL, setFileURL] = useState(''); const imgUploadInput = useRef(null); const [file, setFile] = useState(null); @@ -35,6 +39,13 @@ const WorkSpaceImage = ({ onNext, onFileUrlData, isComplete }: WorkSpaceImagePro const { data: fileData } = useGetFileQuery(file as File); + // 모달 + const isOpenModal = useModalState('image'); + const toggleModal = useToggleModal(); + const nextStep = useNextStep(); + const { setFileUrlData, name, category } = useWorkSpaceContext(); + const { mutate: postTeamMutate } = usePostTeamMutation(); + useEffect(() => { if (file && fileData) { const url = fileData?.url; @@ -46,14 +57,14 @@ const WorkSpaceImage = ({ onNext, onFileUrlData, isComplete }: WorkSpaceImagePro onSuccess: (uploadedFileUrl) => { if (uploadedFileUrl) { setFileURL(uploadedFileUrl); - onFileUrlData(uploadedFileUrl); + setFileUrlData(uploadedFileUrl); } }, } ); } } - }, [file, fileData, uploadToS3Mutate, onFileUrlData]); + }, [file, fileData, uploadToS3Mutate, setFileUrlData]); const handleImageChange = (event: React.ChangeEvent) => { const selectedFile = event.target.files?.[0]; @@ -61,7 +72,7 @@ const WorkSpaceImage = ({ onNext, onFileUrlData, isComplete }: WorkSpaceImagePro const newFileURL = URL.createObjectURL(selectedFile); setFileURL(newFileURL); setFile(selectedFile); - onFileUrlData(''); + setFileUrlData(''); } }; @@ -75,7 +86,7 @@ const WorkSpaceImage = ({ onNext, onFileUrlData, isComplete }: WorkSpaceImagePro setFileURL(''); setFile(null); setPresignedUrl(null); - onFileUrlData(''); + setFileUrlData(''); if (imgUploadInput.current) { imgUploadInput.current.value = ''; } @@ -85,9 +96,22 @@ const WorkSpaceImage = ({ onNext, onFileUrlData, isComplete }: WorkSpaceImagePro } }; + console.log(name); + console.log(category); + const handleSave = () => { - isComplete(true); - onNext(); + postTeamMutate( + { + name, + category, + iconImageUrl: fileURL, + }, + { + onSuccess: () => { + nextStep(); + }, + } + ); }; return ( diff --git a/src/shared/component/createWorkSpace/name/WorkSpaceName.tsx b/src/shared/component/createWorkSpace/name/WorkSpaceName.tsx index f4f9e0ed..a09fbb34 100644 --- a/src/shared/component/createWorkSpace/name/WorkSpaceName.tsx +++ b/src/shared/component/createWorkSpace/name/WorkSpaceName.tsx @@ -3,6 +3,7 @@ import { useState } from 'react'; import Button from '@/common/component/Button/Button'; import Flex from '@/common/component/Flex/Flex'; import Input from '@/common/component/Input/Input'; +import Modal from '@/common/component/Modal/Modal'; import WorkSapceInfo from '@/shared/component/createWorkSpace/info/WorkSpaceInfo'; import { @@ -10,23 +11,27 @@ import { inputWrapperStyle, sectionStyle, } from '@/shared/component/createWorkSpace/name/WorkSpaceName.style'; -import { useModalStore } from '@/shared/store/modal'; -import Modal from '@/common/component/Modal/Modal'; +import { useModalState, useNextStep, useToggleModal } from '@/shared/store/modal'; +import { useWorkSpaceContext } from '@/shared/store/modalContext'; interface WorkSpaceNameProps { - onNext: () => void; setName: (name: string) => void; } -const WorkSpaceName = ({ onNext, setName }: WorkSpaceNameProps) => { +const WorkSpaceName = () => { const [inputValue, setInputValue] = useState(''); - const { workspaceModal, openModal, closeModal } = useModalStore(); + const isOpenModal = useModalState('workspace'); + const toggleModal = useToggleModal(); + const nextStep = useNextStep(); + const { setName } = useWorkSpaceContext(); const handleNext = () => { setName(inputValue); - closeModal('work') + nextStep(); // 단계 증가 후 + //toggleModal('category'); // 다음 모달 열기 + //toggleModal('workspace'); // 현재 모달 닫기 }; const isButtonActive = inputValue.trim().length > 0; @@ -36,9 +41,6 @@ const WorkSpaceName = ({ onNext, setName }: WorkSpaceNameProps) => { }; return ( - - -
@@ -60,7 +62,6 @@ const WorkSpaceName = ({ onNext, setName }: WorkSpaceNameProps) => { 다음 - ); }; diff --git a/src/shared/store/modal.ts b/src/shared/store/modal.ts deleted file mode 100644 index 8e702284..00000000 --- a/src/shared/store/modal.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { create } from 'zustand'; - -// 모달의 타입을 정의 -type ModalType = 'workspace' | 'category' | 'image' | 'complete' | 'block' | 'upload' | 'delete'; - -interface ModalState { - // 모달 상태 - modals: { - workspace: boolean; - category: boolean; - image: boolean; - complete: boolean; - block: boolean; - upload: boolean; - delete: boolean; - }; - - // 모달 상태를 토글하는 액션 - toggleModal: (type: ModalType) => void; -} - -const useModalStore = create((set) => ({ - modals: { - workspace: false, - category: false, - image: false, - complete: false, - block: false, - upload: false, - delete: false, - }, - - // 모달의 열고 닫는 행위를 토글하는 함수 - toggleModal: (type: ModalType) => - set((state) => ({ - modals: { ...state.modals, [type]: !state.modals[type] }, - })), -})); - -// 각 모달 상태를 가져오는 훅 -export const useModalState = (type: ModalType) => useModalStore((state) => state.modals[type]); - -// 모달 토글 액션을 사용하는 훅 -export const useToggleModal = () => useModalStore((state) => state.toggleModal); - -export default useModalStore; diff --git a/src/shared/store/modal.tsx b/src/shared/store/modal.tsx new file mode 100644 index 00000000..74a42a86 --- /dev/null +++ b/src/shared/store/modal.tsx @@ -0,0 +1,65 @@ +import { create } from 'zustand'; + +import WorkSpaceCategory from '@/shared/component/createWorkSpace/category/WorkSpaceCategory'; +import WorkSpaceComplete from '@/shared/component/createWorkSpace/complete/WorkSpaceComplete'; +import WorkSpaceImage from '@/shared/component/createWorkSpace/image/WorkSpaceImage'; +import WorkSpaceName from '@/shared/component/createWorkSpace/name/WorkSpaceName'; + +// 모달의 타입을 정의 +type ModalType = 'workspace' | 'category' | 'image' | 'complete' | 'block' | 'upload' | 'delete'; + +interface ModalState { + modals: { + workspace: boolean; + category: boolean; + image: boolean; + complete: boolean; + block: boolean; + upload: boolean; + delete: boolean; + }; + step: number; // 현재 모달의 단계 + stepComponents: { [key: number]: JSX.Element }; // 각 단계에 해당하는 컴포넌트 매핑 + toggleModal: (type: ModalType) => void; + setStep: (step: number) => void; // 모달 단계 설정 함수 + nextStep: () => void; // 다음 단계로 넘어가는 함수 + resetStep: () => void; // 단계 초기화 함수 +} + +export const useModalStore = create((set) => ({ + modals: { + workspace: false, + category: false, + image: false, + complete: false, + block: false, + upload: false, + delete: false, + }, + step: 1, // 초기 단계 설정 + stepComponents: { + 1: , + 2: , + 3: , + 4: , + }, + toggleModal: (type: ModalType) => + set((state) => ({ + modals: { + ...state.modals, + [type]: !state.modals[type], + }, + })), + setStep: (step: number) => set({ step }), + nextStep: () => set((state) => ({ step: state.step + 1 })), + resetStep: () => set({ step: 1 }), +})); + +export const useModalState = (type: ModalType) => useModalStore((state) => state.modals[type]); +export const useModalStep = () => useModalStore((state) => state.step); +export const useModalComponent = () => useModalStore((state) => state.stepComponents[state.step]); +export const useNextStep = () => useModalStore((state) => state.nextStep); +export const useResetStep = () => useModalStore((state) => state.resetStep); +export const useToggleModal = () => useModalStore((state) => state.toggleModal); + +export default useModalStore; diff --git a/src/shared/store/modalContext.tsx b/src/shared/store/modalContext.tsx new file mode 100644 index 00000000..14d186d0 --- /dev/null +++ b/src/shared/store/modalContext.tsx @@ -0,0 +1,38 @@ +import React, { ReactNode, createContext, useContext, useState } from 'react'; + +// Context의 타입 정의 +interface WorkSpaceContextType { + name: string; + setName: React.Dispatch>; + category: string; + setCategory: React.Dispatch>; + fileUrlData: string; + setFileUrlData: React.Dispatch>; +} + +// Context 생성 및 초기값 설정 +const WorkSpaceContext = createContext(undefined); + +export const useWorkSpaceContext = () => { + const context = useContext(WorkSpaceContext); + if (!context) { + throw new Error('useWorkSpaceContext must be used within a WorkSpaceProvider'); + } + return context; +}; + +interface WorkSpaceProviderProps { + children: ReactNode; +} + +export const WorkSpaceProvider = ({ children }: WorkSpaceProviderProps) => { + const [name, setName] = useState(''); + const [category, setCategory] = useState(''); + const [fileUrlData, setFileUrlData] = useState(''); + + return ( + + {children} + + ); +}; diff --git "a/src/shared/util/\bmodal.tsx" "b/src/shared/util/\bmodal.tsx" new file mode 100644 index 00000000..64c736aa --- /dev/null +++ "b/src/shared/util/\bmodal.tsx" @@ -0,0 +1,28 @@ +import Modal from '@/common/component/Modal/Modal'; + +import { useModalComponent, useModalStore, useResetStep, useToggleModal } from '@/shared/store/modal'; + +type ModalType = 'workspace' | 'category' | 'image' | 'complete' | 'block' | 'upload' | 'delete'; + +export const ModalManager = () => { + const modals = useModalStore((state) => state.modals); + + const activeModalType = Object.keys(modals).find((key) => modals[key as ModalType]) as ModalType | undefined; + + const toggleModal = useToggleModal(); + const resetStep = useResetStep(); + const ModalContent = useModalComponent(); + + const handleClose = () => { + if (activeModalType) { + toggleModal(activeModalType); + resetStep(); // 모달이 닫힐 때 스텝 초기화 + } + }; + + return activeModalType ? ( + + {ModalContent} + + ) : null; +}; From f566a026b5c2d2e1ff42c13386878e5f34fc19f0 Mon Sep 17 00:00:00 2001 From: cindy-chaewon Date: Thu, 1 Aug 2024 09:19:50 +0900 Subject: [PATCH 04/24] =?UTF-8?q?#187=20fix:=20=EB=AA=A8=EB=8B=AC=20?= =?UTF-8?q?=EB=8B=AB=ED=9E=90=20=EB=95=8C=20workspace=20=ED=81=B4=EB=A6=AD?= =?UTF-8?q?=20=EC=83=81=ED=83=9C=20=ED=95=B4=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/component/LeftSidebar/LeftSidebar.tsx | 7 ++----- "src/shared/util/\bmodal.tsx" | 9 ++++++--- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/shared/component/LeftSidebar/LeftSidebar.tsx b/src/shared/component/LeftSidebar/LeftSidebar.tsx index 56a6c7ac..0e941bd6 100644 --- a/src/shared/component/LeftSidebar/LeftSidebar.tsx +++ b/src/shared/component/LeftSidebar/LeftSidebar.tsx @@ -112,8 +112,6 @@ const LeftSidebar = () => { close(); }; // 모달 관련 코드 - const isOpenModal = useModalState('workspace'); - const ModalContent = useModalComponent(); // 현재 단계에 해당하는 컴포넌트 가져오기 const toggleModal = useToggleModal(); const handleWorkspaceClick = () => { @@ -121,8 +119,7 @@ const LeftSidebar = () => { toggleModal('workspace'); }; - const closeModal = () => { - //closeModalBase(); + const handleModalClose = () => { setIsWorkspaceClicked(false); // 모달 닫을 때 워크스페이스 클릭 상태 해제 }; @@ -177,7 +174,7 @@ const LeftSidebar = () => { - + ); diff --git "a/src/shared/util/\bmodal.tsx" "b/src/shared/util/\bmodal.tsx" index 64c736aa..2b0ddb96 100644 --- "a/src/shared/util/\bmodal.tsx" +++ "b/src/shared/util/\bmodal.tsx" @@ -4,11 +4,13 @@ import { useModalComponent, useModalStore, useResetStep, useToggleModal } from ' type ModalType = 'workspace' | 'category' | 'image' | 'complete' | 'block' | 'upload' | 'delete'; -export const ModalManager = () => { - const modals = useModalStore((state) => state.modals); +interface ModalManagerProps { + onClose?: () => void; +} +export const ModalManager = ({ onClose }: ModalManagerProps) => { + const modals = useModalStore((state) => state.modals); const activeModalType = Object.keys(modals).find((key) => modals[key as ModalType]) as ModalType | undefined; - const toggleModal = useToggleModal(); const resetStep = useResetStep(); const ModalContent = useModalComponent(); @@ -17,6 +19,7 @@ export const ModalManager = () => { if (activeModalType) { toggleModal(activeModalType); resetStep(); // 모달이 닫힐 때 스텝 초기화 + if (onClose) onClose(); // onClose prop 호출 } }; From 13021a7f193a7d5ee5c354e70bc72b98c1f0882d Mon Sep 17 00:00:00 2001 From: cindy-chaewon Date: Thu, 1 Aug 2024 16:24:43 +0900 Subject: [PATCH 05/24] =?UTF-8?q?#187=20fix:=20=ED=83=80=EC=9E=84=EB=B8=94?= =?UTF-8?q?=EB=A1=9D=20=EC=83=9D=EC=84=B1=EB=8F=84=20=EC=A0=81=EC=9A=A9=20?= =?UTF-8?q?&=20=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 22 ++-- .../component/Block/BlockModal.tsx | 31 ++++-- .../component/Upload/UploadModal.tsx | 18 ++-- src/page/archiving/index/ArchivingPage.tsx | 16 +-- .../component/LeftSidebar/LeftSidebar.tsx | 100 +++++++++--------- .../category/WorkSpaceCategory.tsx | 22 ++-- .../complete/WorkSpaceComplete.tsx | 2 +- .../createWorkSpace/image/WorkSpaceImage.tsx | 2 +- .../createWorkSpace/name/WorkSpaceName.tsx | 5 +- src/shared/store/modal.tsx | 49 +++++++-- src/shared/store/modalContext.tsx | 53 ++++++++++ .../\bmodal.tsx" => src/shared/util/modal.tsx | 6 +- 12 files changed, 210 insertions(+), 116 deletions(-) rename "src/shared/util/\bmodal.tsx" => src/shared/util/modal.tsx (97%) diff --git a/src/App.tsx b/src/App.tsx index 52af558a..371e027a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -14,6 +14,8 @@ import { HTTP_STATUS_CODE } from '@/shared/constant/api'; import { PATH } from '@/shared/constant/path'; import ErrorPage from '@/shared/page/errorPage/ErrorPage'; +import { BlockModalProvider, WorkSpaceProvider } from './shared/store/modalContext'; + const App = () => { useEffect(() => { document.body.style.backgroundColor = theme.colors.blue_900; @@ -42,14 +44,18 @@ const App = () => { return ( - -
- -
- -
-
- + + + +
+ +
+ +
+
+ + + ); }; diff --git a/src/page/archiving/createTimeBlock/component/Block/BlockModal.tsx b/src/page/archiving/createTimeBlock/component/Block/BlockModal.tsx index f6b43bc0..6e7a055e 100644 --- a/src/page/archiving/createTimeBlock/component/Block/BlockModal.tsx +++ b/src/page/archiving/createTimeBlock/component/Block/BlockModal.tsx @@ -13,17 +13,23 @@ import Input from '@/common/component/Input/Input'; import Text from '@/common/component/Text/Text'; import WorkSapceInfo from '@/shared/component/createWorkSpace/info/WorkSpaceInfo'; +import { useNextStep } from '@/shared/store/modal'; +import { useBlockModalContext } from '@/shared/store/modalContext'; interface BlockModalProps { onNext: (blockData: BlockData) => void; } -const BlockModal = ({ onNext }: BlockModalProps) => { - const [blockName, setBlockName] = useState(''); +const BlockModal = () => { + //const [blockName, setBlockName] = useState(''); const [selectedIcon, setSelectedIcon] = useState(-1); - const [dates, setDates] = useState({ startDate: '', endDate: '' }); + //const [dates, setDates] = useState({ startDate: '', endDate: '' }); const [isDateRangeValid, setIsDateRangeValid] = useState(false); + const { blockName, setBlockName, blockType, setBlockType, startDate, setStartDate, endDate, setEndDate } = + useBlockModalContext(); + const nextStep = useNextStep(); + const handleBlockNameChange = (e: React.ChangeEvent) => { if (e.target.value.length <= 25) { setBlockName(e.target.value); @@ -33,14 +39,17 @@ const BlockModal = ({ onNext }: BlockModalProps) => { const isButtonActive = blockName.trim() !== '' && selectedIcon !== -1 && - dates.startDate.length === 10 && - dates.endDate.length === 10 && + startDate.length === 10 && + endDate.length === 10 && isDateRangeValid; const handleNext = () => { if (isButtonActive) { - const blockType = BLOCK_ICON[selectedIcon].name; - onNext({ blockName, dates, blockType }); + const blockIconType = BLOCK_ICON[selectedIcon].name; + setBlockType(blockIconType); + setStartDate(startDate); + setEndDate(endDate); + nextStep(); } }; @@ -86,10 +95,10 @@ const BlockModal = ({ onNext }: BlockModalProps) => { setDates((prev) => ({ ...prev, startDate: date as string }))} - onSetEndDate={(date) => setDates((prev) => ({ ...prev, endDate: date as string }))} + startDate={startDate} + endDate={endDate} + onSetStartDate={setStartDate} + onSetEndDate={setEndDate} onSetIsDateRangeValid={setIsDateRangeValid} /> diff --git a/src/page/archiving/createTimeBlock/component/Upload/UploadModal.tsx b/src/page/archiving/createTimeBlock/component/Upload/UploadModal.tsx index 09ac314f..c85b0715 100644 --- a/src/page/archiving/createTimeBlock/component/Upload/UploadModal.tsx +++ b/src/page/archiving/createTimeBlock/component/Upload/UploadModal.tsx @@ -14,6 +14,8 @@ import Flex from '@/common/component/Flex/Flex'; import { Files } from '@/shared/api/time-blocks/team/time-block/type'; import WorkSapceInfo from '@/shared/component/createWorkSpace/info/WorkSpaceInfo'; +import { useBlockModalContext } from '@/shared/store/modalContext'; +import { useTeamStore } from '@/shared/store/team'; import { useToastStore } from '@/shared/store/toast'; interface UploadModalProps { @@ -23,13 +25,16 @@ interface UploadModalProps { blockData: BlockData; } -const UploadModal = ({ onClose, teamId, type, blockData }: UploadModalProps) => { +const UploadModal = () => { + const { teamId } = useTeamStore(); + + const { blockName, blockType, startDate, endDate } = useBlockModalContext(); const [files, setFiles] = useState([]); const [fileUrls, setFileUrls] = useState({}); const [uploadStatus, setUploadStatus] = useState<{ [key: string]: boolean }>({}); const [isAllUploaded, setIsAllUploaded] = useState(true); - const { mutate: timeBlockMutate } = usePostTimeBlockMutation(teamId, type); + const { mutate: timeBlockMutate } = usePostTimeBlockMutation(+teamId, 'executive'); const { mutate: fileDeleteMutate } = useDeleteFileMutation(); const { createToast } = useToastStore(); @@ -77,18 +82,17 @@ const UploadModal = ({ onClose, teamId, type, blockData }: UploadModalProps) => }; const data = { - name: blockData.blockName, + name: blockName, color: getRandomColor(), - startDate: formatDatePost(blockData.dates.startDate), - endDate: formatDatePost(blockData.dates.endDate), - blockType: blockData.blockType, + startDate: formatDatePost(startDate), + endDate: formatDatePost(endDate), + blockType: blockType, files: fileUrls, }; const handleSave = () => { timeBlockMutate(data, { onSuccess: () => { - onClose(); createToast('활동 블록이 생성되었습니다', 'success'); }, }); diff --git a/src/page/archiving/index/ArchivingPage.tsx b/src/page/archiving/index/ArchivingPage.tsx index 99482b71..04d35b2f 100644 --- a/src/page/archiving/index/ArchivingPage.tsx +++ b/src/page/archiving/index/ArchivingPage.tsx @@ -20,7 +20,10 @@ import Modal from '@/common/component/Modal/Modal'; import { useModal, useOutsideClick } from '@/common/hook'; import { theme } from '@/common/style/theme/theme'; +import { useModalComponent, useToggleModal } from '@/shared/store/modal'; +import { BlockModalProvider } from '@/shared/store/modalContext'; import { useTeamStore } from '@/shared/store/team'; +import { ModalManager } from '@/shared/util/modal'; const ArchivingPage = () => { const [selectedId, setSelectedId] = useState('total'); @@ -66,7 +69,9 @@ const ArchivingPage = () => { const blockFloors = alignBlocks(timeBlocks, endDay, selectedMonth, currentYear); // 블록 생성 모달 관련 코드 - const { isOpen, openModal, closeModal, setCurrentContent, currentContent } = useModal(); + const toggleModal = useToggleModal(); + const ModalContent = useModalComponent(); + /*const { isOpen, openModal, closeModal, setCurrentContent, currentContent } = useModal(); const handleNext = (blockData: { blockName: string; @@ -75,7 +80,7 @@ const ArchivingPage = () => { }) => { const type = 'executive'; setCurrentContent(); - }; + };*/ return ( { - - { onSelectId={handleSelectedId} onClickClose={handleClose} /> + ); }; diff --git a/src/shared/component/LeftSidebar/LeftSidebar.tsx b/src/shared/component/LeftSidebar/LeftSidebar.tsx index 0e941bd6..aa300ec3 100644 --- a/src/shared/component/LeftSidebar/LeftSidebar.tsx +++ b/src/shared/component/LeftSidebar/LeftSidebar.tsx @@ -32,7 +32,7 @@ import { useModalComponent, useModalState, useToggleModal } from '@/shared/store import { WorkSpaceProvider } from '@/shared/store/modalContext'; import { useTeamStore } from '@/shared/store/team'; import { Team } from '@/shared/type/team'; -import { ModalManager } from '@/shared/util/\bmodal'; +import { ModalManager } from '@/shared/util/modal'; import { usePostTeamMutation } from '../createWorkSpace/hook/api/usePostTeamMutation'; @@ -124,59 +124,57 @@ const LeftSidebar = () => { }; return ( - - - + {data?.data.belongTeamGetResponses.map((data: Team) => { + return ( + { + handleTeamClick(String(data.id)); + }}> + {data.name} + + ); + })} + + 워크스페이스 생성 + + + + +
+ { + toggle(); + close(); + }}> + 환경설정 + + +
+ + ); }; diff --git a/src/shared/component/createWorkSpace/category/WorkSpaceCategory.tsx b/src/shared/component/createWorkSpace/category/WorkSpaceCategory.tsx index 54136067..2c5a343d 100644 --- a/src/shared/component/createWorkSpace/category/WorkSpaceCategory.tsx +++ b/src/shared/component/createWorkSpace/category/WorkSpaceCategory.tsx @@ -3,7 +3,6 @@ import { useEffect, useState } from 'react'; import ArrowDown from '@/common/asset/svg/arrow_drop_down.svg?react'; import Button from '@/common/component/Button/Button'; import Flex from '@/common/component/Flex/Flex'; -import Modal from '@/common/component/Modal/Modal'; import Select from '@/common/component/Select/Select'; import { useOutsideClick, useOverlay } from '@/common/hook'; @@ -15,24 +14,20 @@ import { import WorkSapceInfo from '@/shared/component/createWorkSpace/info/WorkSpaceInfo'; import { buttonStyle, sectionStyle } from '@/shared/component/createWorkSpace/name/WorkSpaceName.style'; import useCategoryListQuery from '@/shared/hook/api/useCategoryListQuery'; -import { useModalState, useNextStep, useToggleModal } from '@/shared/store/modal'; +import { useNextStep } from '@/shared/store/modal'; import { useWorkSpaceContext } from '@/shared/store/modalContext'; -interface WorkSpaceCategoryProps { - onCategory: (category: string) => void; -} - const WorkSpaceCategory = () => { const { isOpen, close, toggle } = useOverlay(); const ref = useOutsideClick(close, 'select-container'); - // 모달 - const isOpenModal = useModalState('category'); - const toggleModal = useToggleModal(); const nextStep = useNextStep(); const { setCategory } = useWorkSpaceContext(); - const [selected, setSelected] = useState(''); + // 카테고리 데이터 + const { data } = useCategoryListQuery(); + const categoryList = data?.data?.categories?.filter((category) => category !== '전체') || []; + useEffect(() => { const handleMouseDown = (event: MouseEvent) => { if (!ref.current || !(event.target instanceof HTMLElement)) return; @@ -54,20 +49,15 @@ const WorkSpaceCategory = () => { }; }, [isOpen, close, ref]); - // 카테고리 데이터 - const { data } = useCategoryListQuery(); - const categoryList = data.data.categories.filter((category) => category !== '전체'); - useEffect(() => { if (selected) { setCategory(selected); + close?.(); } - close?.(); }, [selected, setCategory, close]); const handleSelect = (id: string) => { setSelected(id); - setCategory(id); }; const handleNext = () => { diff --git a/src/shared/component/createWorkSpace/complete/WorkSpaceComplete.tsx b/src/shared/component/createWorkSpace/complete/WorkSpaceComplete.tsx index 2b6bf49b..610a352a 100644 --- a/src/shared/component/createWorkSpace/complete/WorkSpaceComplete.tsx +++ b/src/shared/component/createWorkSpace/complete/WorkSpaceComplete.tsx @@ -8,7 +8,7 @@ import { useModalState, useToggleModal } from '@/shared/store/modal'; const WorkSpaceComplete = () => { // 모달 - const isOpenModal = useModalState('complete'); + //const isOpenModal = useModalState('complete'); const toggleModal = useToggleModal(); return ( diff --git a/src/shared/component/createWorkSpace/image/WorkSpaceImage.tsx b/src/shared/component/createWorkSpace/image/WorkSpaceImage.tsx index f1a57aa4..76480c30 100644 --- a/src/shared/component/createWorkSpace/image/WorkSpaceImage.tsx +++ b/src/shared/component/createWorkSpace/image/WorkSpaceImage.tsx @@ -40,7 +40,7 @@ const WorkSpaceImage = () => { const { data: fileData } = useGetFileQuery(file as File); // 모달 - const isOpenModal = useModalState('image'); + //const isOpenModal = useModalState('image'); const toggleModal = useToggleModal(); const nextStep = useNextStep(); const { setFileUrlData, name, category } = useWorkSpaceContext(); diff --git a/src/shared/component/createWorkSpace/name/WorkSpaceName.tsx b/src/shared/component/createWorkSpace/name/WorkSpaceName.tsx index a09fbb34..272409eb 100644 --- a/src/shared/component/createWorkSpace/name/WorkSpaceName.tsx +++ b/src/shared/component/createWorkSpace/name/WorkSpaceName.tsx @@ -11,7 +11,7 @@ import { inputWrapperStyle, sectionStyle, } from '@/shared/component/createWorkSpace/name/WorkSpaceName.style'; -import { useModalState, useNextStep, useToggleModal } from '@/shared/store/modal'; +import { useModalState, useModalStore, useNextStep, useToggleModal } from '@/shared/store/modal'; import { useWorkSpaceContext } from '@/shared/store/modalContext'; interface WorkSpaceNameProps { @@ -29,6 +29,9 @@ const WorkSpaceName = () => { setName(inputValue); nextStep(); // 단계 증가 후 + // 다음 단계가 올바르게 업데이트되는지 확인 + console.log(useModalStore.getState().step); + //toggleModal('category'); // 다음 모달 열기 //toggleModal('workspace'); // 현재 모달 닫기 diff --git a/src/shared/store/modal.tsx b/src/shared/store/modal.tsx index 74a42a86..bccf762d 100644 --- a/src/shared/store/modal.tsx +++ b/src/shared/store/modal.tsx @@ -1,3 +1,6 @@ +import BlockModal from '@/page/archiving/createTimeBlock/component/Block/BlockModal'; +import UploadModal from '@/page/archiving/createTimeBlock/component/Upload/UploadModal'; + import { create } from 'zustand'; import WorkSpaceCategory from '@/shared/component/createWorkSpace/category/WorkSpaceCategory'; @@ -19,7 +22,6 @@ interface ModalState { delete: boolean; }; step: number; // 현재 모달의 단계 - stepComponents: { [key: number]: JSX.Element }; // 각 단계에 해당하는 컴포넌트 매핑 toggleModal: (type: ModalType) => void; setStep: (step: number) => void; // 모달 단계 설정 함수 nextStep: () => void; // 다음 단계로 넘어가는 함수 @@ -37,12 +39,6 @@ export const useModalStore = create((set) => ({ delete: false, }, step: 1, // 초기 단계 설정 - stepComponents: { - 1: , - 2: , - 3: , - 4: , - }, toggleModal: (type: ModalType) => set((state) => ({ modals: { @@ -57,9 +53,42 @@ export const useModalStore = create((set) => ({ export const useModalState = (type: ModalType) => useModalStore((state) => state.modals[type]); export const useModalStep = () => useModalStore((state) => state.step); -export const useModalComponent = () => useModalStore((state) => state.stepComponents[state.step]); + +export const useModalComponent = () => { + const { modals, step } = useModalStore(); + const activeModalType = (Object.keys(modals) as ModalType[]).find((key) => modals[key]); + + if (!activeModalType) return null; + console.log('모달', activeModalType); + + switch (activeModalType) { + case 'workspace': + switch (step) { + case 1: + return ; + case 2: + return ; + case 3: + return ; + case 4: + return ; + default: + return null; + } + case 'block': + switch (step) { + case 1: + return ; + case 2: + return ; + default: + return null; + } + default: + return null; + } +}; + export const useNextStep = () => useModalStore((state) => state.nextStep); export const useResetStep = () => useModalStore((state) => state.resetStep); export const useToggleModal = () => useModalStore((state) => state.toggleModal); - -export default useModalStore; diff --git a/src/shared/store/modalContext.tsx b/src/shared/store/modalContext.tsx index 14d186d0..fa7609dd 100644 --- a/src/shared/store/modalContext.tsx +++ b/src/shared/store/modalContext.tsx @@ -36,3 +36,56 @@ export const WorkSpaceProvider = ({ children }: WorkSpaceProviderProps) => { ); }; + +interface BlockModalContextType { + blockName: string; + setBlockName: React.Dispatch>; + blockType: string; + setBlockType: React.Dispatch>; + startDate: string; + setStartDate: React.Dispatch>; + endDate: string; + setEndDate: React.Dispatch>; + resetBlockData: () => void; +} + +const BlockModalContext = createContext(undefined); + +export const useBlockModalContext = () => { + const context = useContext(BlockModalContext); + if (!context) { + throw new Error('useBlockModalContext must be used within a BlockModalProvider'); + } + return context; +}; + +export const BlockModalProvider = ({ children }: { children: ReactNode }) => { + const [blockName, setBlockName] = useState(''); + const [blockType, setBlockType] = useState(''); + const [startDate, setStartDate] = useState(''); + const [endDate, setEndDate] = useState(''); + + const resetBlockData = () => { + setBlockName(''); + setBlockType(''); + setStartDate(''); + setEndDate(''); + }; + + return ( + + {children} + + ); +}; diff --git "a/src/shared/util/\bmodal.tsx" b/src/shared/util/modal.tsx similarity index 97% rename from "src/shared/util/\bmodal.tsx" rename to src/shared/util/modal.tsx index 2b0ddb96..c31a9d23 100644 --- "a/src/shared/util/\bmodal.tsx" +++ b/src/shared/util/modal.tsx @@ -2,12 +2,10 @@ import Modal from '@/common/component/Modal/Modal'; import { useModalComponent, useModalStore, useResetStep, useToggleModal } from '@/shared/store/modal'; -type ModalType = 'workspace' | 'category' | 'image' | 'complete' | 'block' | 'upload' | 'delete'; - interface ModalManagerProps { onClose?: () => void; } - +type ModalType = 'workspace' | 'category' | 'image' | 'complete' | 'block' | 'upload' | 'delete'; export const ModalManager = ({ onClose }: ModalManagerProps) => { const modals = useModalStore((state) => state.modals); const activeModalType = Object.keys(modals).find((key) => modals[key as ModalType]) as ModalType | undefined; @@ -15,6 +13,8 @@ export const ModalManager = ({ onClose }: ModalManagerProps) => { const resetStep = useResetStep(); const ModalContent = useModalComponent(); + console.log(ModalContent); + const handleClose = () => { if (activeModalType) { toggleModal(activeModalType); From 52a72801205bdf9b7ac448ccd6d0545c827aa982 Mon Sep 17 00:00:00 2001 From: cindy-chaewon Date: Thu, 1 Aug 2024 17:34:10 +0900 Subject: [PATCH 06/24] =?UTF-8?q?#187=20fix:=20=EC=82=AC=EC=A7=84=20?= =?UTF-8?q?=EB=AF=B8=EB=A6=AC=EB=B3=B4=EA=B8=B0=20=EC=95=88=EB=90=98?= =?UTF-8?q?=EB=8D=98=20=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/Upload/UploadModal.tsx | 4 +++- .../createWorkSpace/image/WorkSpaceImage.tsx | 13 ++++++----- src/shared/store/modal.tsx | 16 ++++++++----- src/shared/store/modalContext.tsx | 23 ++++++++++++++++++- 4 files changed, 42 insertions(+), 14 deletions(-) diff --git a/src/page/archiving/createTimeBlock/component/Upload/UploadModal.tsx b/src/page/archiving/createTimeBlock/component/Upload/UploadModal.tsx index c85b0715..59ce6d50 100644 --- a/src/page/archiving/createTimeBlock/component/Upload/UploadModal.tsx +++ b/src/page/archiving/createTimeBlock/component/Upload/UploadModal.tsx @@ -28,7 +28,7 @@ interface UploadModalProps { const UploadModal = () => { const { teamId } = useTeamStore(); - const { blockName, blockType, startDate, endDate } = useBlockModalContext(); + const { blockName, blockType, startDate, endDate, closeModal, resetBlockData } = useBlockModalContext(); const [files, setFiles] = useState([]); const [fileUrls, setFileUrls] = useState({}); const [uploadStatus, setUploadStatus] = useState<{ [key: string]: boolean }>({}); @@ -94,6 +94,8 @@ const UploadModal = () => { timeBlockMutate(data, { onSuccess: () => { createToast('활동 블록이 생성되었습니다', 'success'); + closeModal(); + resetBlockData(); }, }); }; diff --git a/src/shared/component/createWorkSpace/image/WorkSpaceImage.tsx b/src/shared/component/createWorkSpace/image/WorkSpaceImage.tsx index 76480c30..0390c3f4 100644 --- a/src/shared/component/createWorkSpace/image/WorkSpaceImage.tsx +++ b/src/shared/component/createWorkSpace/image/WorkSpaceImage.tsx @@ -23,11 +23,6 @@ import { useWorkSpaceContext } from '@/shared/store/modalContext'; import { usePostTeamMutation } from '../hook/api/usePostTeamMutation'; -interface WorkSpaceImageProps { - onFileUrlData: (file: string) => void; - isComplete: (isComplete: boolean) => void; -} - const WorkSpaceImage = () => { const [fileURL, setFileURL] = useState(''); const imgUploadInput = useRef(null); @@ -43,11 +38,13 @@ const WorkSpaceImage = () => { //const isOpenModal = useModalState('image'); const toggleModal = useToggleModal(); const nextStep = useNextStep(); - const { setFileUrlData, name, category } = useWorkSpaceContext(); + const { setFileUrlData, name, category, resetBlockData } = useWorkSpaceContext(); const { mutate: postTeamMutate } = usePostTeamMutation(); useEffect(() => { if (file && fileData) { + const newFileURL = URL.createObjectURL(file); + setFileURL(newFileURL); const url = fileData?.url; if (url) { setPresignedUrl(url); @@ -56,6 +53,7 @@ const WorkSpaceImage = () => { { onSuccess: (uploadedFileUrl) => { if (uploadedFileUrl) { + URL.revokeObjectURL(newFileURL); setFileURL(uploadedFileUrl); setFileUrlData(uploadedFileUrl); } @@ -68,6 +66,7 @@ const WorkSpaceImage = () => { const handleImageChange = (event: React.ChangeEvent) => { const selectedFile = event.target.files?.[0]; + console.log('선택파일', selectedFile); if (selectedFile) { const newFileURL = URL.createObjectURL(selectedFile); setFileURL(newFileURL); @@ -98,6 +97,7 @@ const WorkSpaceImage = () => { console.log(name); console.log(category); + console.log('파일', fileURL); const handleSave = () => { postTeamMutate( @@ -109,6 +109,7 @@ const WorkSpaceImage = () => { { onSuccess: () => { nextStep(); + resetBlockData(); }, } ); diff --git a/src/shared/store/modal.tsx b/src/shared/store/modal.tsx index bccf762d..109e3676 100644 --- a/src/shared/store/modal.tsx +++ b/src/shared/store/modal.tsx @@ -40,12 +40,16 @@ export const useModalStore = create((set) => ({ }, step: 1, // 초기 단계 설정 toggleModal: (type: ModalType) => - set((state) => ({ - modals: { - ...state.modals, - [type]: !state.modals[type], - }, - })), + set((state) => { + const isModalOpening = !state.modals[type]; + return { + modals: { + ...state.modals, + [type]: isModalOpening, + }, + step: isModalOpening ? 1 : state.step, // 모달이 열릴 때 step을 1로 초기화 + }; + }), setStep: (step: number) => set({ step }), nextStep: () => set((state) => ({ step: state.step + 1 })), resetStep: () => set({ step: 1 }), diff --git a/src/shared/store/modalContext.tsx b/src/shared/store/modalContext.tsx index fa7609dd..79fb34b6 100644 --- a/src/shared/store/modalContext.tsx +++ b/src/shared/store/modalContext.tsx @@ -1,5 +1,7 @@ import React, { ReactNode, createContext, useContext, useState } from 'react'; +import { useModalStore } from './modal'; + // Context의 타입 정의 interface WorkSpaceContextType { name: string; @@ -8,6 +10,7 @@ interface WorkSpaceContextType { setCategory: React.Dispatch>; fileUrlData: string; setFileUrlData: React.Dispatch>; + resetBlockData: () => void; } // Context 생성 및 초기값 설정 @@ -30,8 +33,17 @@ export const WorkSpaceProvider = ({ children }: WorkSpaceProviderProps) => { const [category, setCategory] = useState(''); const [fileUrlData, setFileUrlData] = useState(''); + console.log(fileUrlData); + + const resetBlockData = () => { + setName(''); + setCategory(''); + setFileUrlData(''); + }; + return ( - + {children} ); @@ -47,6 +59,7 @@ interface BlockModalContextType { endDate: string; setEndDate: React.Dispatch>; resetBlockData: () => void; + closeModal: () => void; } const BlockModalContext = createContext(undefined); @@ -65,6 +78,13 @@ export const BlockModalProvider = ({ children }: { children: ReactNode }) => { const [startDate, setStartDate] = useState(''); const [endDate, setEndDate] = useState(''); + const { toggleModal, resetStep } = useModalStore(); + + const closeModal = () => { + toggleModal('block'); + resetStep(); + }; + const resetBlockData = () => { setBlockName(''); setBlockType(''); @@ -84,6 +104,7 @@ export const BlockModalProvider = ({ children }: { children: ReactNode }) => { endDate, setEndDate, resetBlockData, + closeModal, }}> {children} From 73ca6e8e8559fdd2ef5df7a699f2343c01257fcd Mon Sep 17 00:00:00 2001 From: cindy-chaewon Date: Thu, 1 Aug 2024 20:17:11 +0900 Subject: [PATCH 07/24] =?UTF-8?q?#187=20feat:=20delete=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=EC=97=90=EB=8F=84=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/DocumentItem/DocumentItem.tsx | 9 ++- .../component/SelectedBlock/SelectedBlock.tsx | 33 +++------- .../component/DeleteModal/DeleteModal.tsx | 60 ++++++++++-------- src/shared/store/modal.tsx | 63 ++++++++++++------- src/shared/util/modal.tsx | 7 ++- 5 files changed, 92 insertions(+), 80 deletions(-) diff --git a/src/page/archiving/index/component/DocumentItem/DocumentItem.tsx b/src/page/archiving/index/component/DocumentItem/DocumentItem.tsx index b0ceeed5..970b35ed 100644 --- a/src/page/archiving/index/component/DocumentItem/DocumentItem.tsx +++ b/src/page/archiving/index/component/DocumentItem/DocumentItem.tsx @@ -16,6 +16,7 @@ import Text from '@/common/component/Text/Text'; import { useModal } from '@/common/hook'; import DeleteModal from '@/shared/component/DeleteModal/DeleteModal'; +import { useDeleteModalStore, useModalStore } from '@/shared/store/modal'; import { useTeamStore } from '@/shared/store/team'; interface DocumentItemProps { @@ -28,12 +29,10 @@ interface DocumentItemProps { } const DocumentItem = ({ documentId, children, selectedId, blockName, fileUrl, color }: DocumentItemProps) => { - const { isOpen, openModal, closeModal, currentContent } = useModal(); - const fileName = children?.toString(); const { teamId } = useTeamStore(); - + const { openModal } = useDeleteModalStore(); //문서 클릭시 띄워주는 함수 const onClickDocumentItem = () => { window.open(fileUrl); @@ -46,7 +45,7 @@ const DocumentItem = ({ documentId, children, selectedId, blockName, fileUrl, co const handleTrashClick = (e: React.MouseEvent) => { e.stopPropagation(); - openModal(); + openModal(); }; return ( @@ -67,8 +66,8 @@ const DocumentItem = ({ documentId, children, selectedId, blockName, fileUrl, co handleTrashClick(e)} css={{ cursor: 'pointer' }} /> + - ); }; diff --git a/src/page/archiving/index/component/SelectedBlock/SelectedBlock.tsx b/src/page/archiving/index/component/SelectedBlock/SelectedBlock.tsx index f34347df..da986d67 100644 --- a/src/page/archiving/index/component/SelectedBlock/SelectedBlock.tsx +++ b/src/page/archiving/index/component/SelectedBlock/SelectedBlock.tsx @@ -13,6 +13,7 @@ import { useModal } from '@/common/hook'; import { theme } from '@/common/style/theme/theme'; import DeleteModal from '@/shared/component/DeleteModal/DeleteModal'; +import { useDeleteModalStore, useModalState, useModalStore } from '@/shared/store/modal'; import { useTeamStore } from '@/shared/store/team'; import { blockNameStyle, containerStyle, deleteBtnStyle } from './SelectedBlock.style'; @@ -34,16 +35,16 @@ const SelectedBlock = ({ endDate, documentList, selectedBlock, - onClickClose, }: DocumentBarInfoProps) => { - const { isOpen, openModal, closeModal, currentContent } = useModal(); + //const { toggleModal } = useModalStore(); + const { teamId } = useTeamStore(); - const handleCloseClick = () => { - onClickClose(); - closeModal; - }; + //const isDeleteModalOpen = useModalState('deleteBlock'); + const { openModal } = useDeleteModalStore(); - const { teamId } = useTeamStore(); + const handleDeleteClick = () => { + openModal(); + }; return ( @@ -52,21 +53,7 @@ const SelectedBlock = ({ {blockName} - @@ -86,7 +73,7 @@ const SelectedBlock = ({ ))} - + ); }; diff --git a/src/shared/component/DeleteModal/DeleteModal.tsx b/src/shared/component/DeleteModal/DeleteModal.tsx index a3f5818d..babe1c9a 100644 --- a/src/shared/component/DeleteModal/DeleteModal.tsx +++ b/src/shared/component/DeleteModal/DeleteModal.tsx @@ -4,29 +4,33 @@ import { useDeleteDocumentMutation } from '@/page/archiving/index/hook/api/useDe import Button from '@/common/component/Button/Button'; import Flex from '@/common/component/Flex/Flex'; import Heading from '@/common/component/Heading/Heading'; +import Modal from '@/common/component/Modal/Modal'; import Text from '@/common/component/Text/Text'; import { cancelStyle, deleteStyle } from '@/shared/component/DeleteModal/DeleteModal.style'; import { DELETE_DETAIL, DELETE_TITLE } from '@/shared/constant'; +import { useDeleteModalStore, useModalState, useModalStore } from '@/shared/store/modal'; interface DeleteModalProps { title: 'block' | 'docs'; detail: 'block' | 'docs'; - onClose: () => void; teamId: number; id: number; } -const DeleteModal = ({ title, detail, onClose, teamId, id }: DeleteModalProps) => { +const DeleteModal = ({ title, detail, teamId, id }: DeleteModalProps) => { const { mutateAsync: blockMutate } = useDeleteBlockMutation(); const { mutateAsync: documentMutate } = useDeleteDocumentMutation(); + //const toggleModal = useModalStore((state) => state.toggleModal); + + const { isOpen, closeModal } = useDeleteModalStore(); const handleDeleteBlock = (teamId: number, id: number) => { blockMutate( { teamId: teamId, blockId: id }, { onSuccess: () => { - onClose(); + closeModal(); }, } ); @@ -37,39 +41,43 @@ const DeleteModal = ({ title, detail, onClose, teamId, id }: DeleteModalProps) = { teamId: teamId, documentId: id }, { onSuccess: () => { - onClose(); + closeModal(); }, } ); }; const handleDelete = title === 'block' ? handleDeleteBlock : handleDeleteDocs; + //const isModalOpen = useModalState(title === 'block' ? 'deleteBlock' : 'deleteDocs'); + //const handleModalClose = () => toggleModal(title === 'block' ? 'deleteBlock' : 'deleteDocs'); return ( - - - {DELETE_TITLE[title.toUpperCase() as keyof typeof DELETE_TITLE]} - - - {DELETE_DETAIL[detail.toUpperCase() as keyof typeof DELETE_DETAIL]} - + + + + {DELETE_TITLE[title.toUpperCase() as keyof typeof DELETE_TITLE]} + + + {DELETE_DETAIL[detail.toUpperCase() as keyof typeof DELETE_DETAIL]} + - - - + + + + - + ); }; diff --git a/src/shared/store/modal.tsx b/src/shared/store/modal.tsx index 109e3676..49a6a72d 100644 --- a/src/shared/store/modal.tsx +++ b/src/shared/store/modal.tsx @@ -8,26 +8,43 @@ import WorkSpaceComplete from '@/shared/component/createWorkSpace/complete/WorkS import WorkSpaceImage from '@/shared/component/createWorkSpace/image/WorkSpaceImage'; import WorkSpaceName from '@/shared/component/createWorkSpace/name/WorkSpaceName'; +import DeleteModal from '../component/DeleteModal/DeleteModal'; + +interface ModalData { + teamId: number; + id: number; + title: 'block' | 'docs'; + detail: 'block' | 'docs'; +} + +interface DeleteModalState { + isOpen: boolean; + //modalData: ModalData | null; + openModal: () => void; + closeModal: () => void; +} + // 모달의 타입을 정의 -type ModalType = 'workspace' | 'category' | 'image' | 'complete' | 'block' | 'upload' | 'delete'; +type ModalType = 'workspace' | 'category' | 'image' | 'complete' | 'block' | 'upload' | 'deleteBlock' | 'deleteDocs'; interface ModalState { modals: { - workspace: boolean; - category: boolean; - image: boolean; - complete: boolean; - block: boolean; - upload: boolean; - delete: boolean; + [key in ModalType]: boolean; }; - step: number; // 현재 모달의 단계 + step: number; toggleModal: (type: ModalType) => void; - setStep: (step: number) => void; // 모달 단계 설정 함수 - nextStep: () => void; // 다음 단계로 넘어가는 함수 - resetStep: () => void; // 단계 초기화 함수 + setStep: (step: number) => void; + nextStep: () => void; + resetStep: () => void; } +export const useDeleteModalStore = create((set) => ({ + isOpen: false, + //modalData: null, + openModal: () => set({ isOpen: true }), + closeModal: () => set({ isOpen: false }), +})); + export const useModalStore = create((set) => ({ modals: { workspace: false, @@ -36,20 +53,18 @@ export const useModalStore = create((set) => ({ complete: false, block: false, upload: false, - delete: false, + deleteBlock: false, + deleteDocs: false, }, - step: 1, // 초기 단계 설정 + modalData: null, + step: 1, toggleModal: (type: ModalType) => - set((state) => { - const isModalOpening = !state.modals[type]; - return { - modals: { - ...state.modals, - [type]: isModalOpening, - }, - step: isModalOpening ? 1 : state.step, // 모달이 열릴 때 step을 1로 초기화 - }; - }), + set((state) => ({ + modals: { + ...state.modals, + [type]: !state.modals[type], + }, + })), setStep: (step: number) => set({ step }), nextStep: () => set((state) => ({ step: state.step + 1 })), resetStep: () => set({ step: 1 }), diff --git a/src/shared/util/modal.tsx b/src/shared/util/modal.tsx index c31a9d23..409eb636 100644 --- a/src/shared/util/modal.tsx +++ b/src/shared/util/modal.tsx @@ -5,7 +5,7 @@ import { useModalComponent, useModalStore, useResetStep, useToggleModal } from ' interface ModalManagerProps { onClose?: () => void; } -type ModalType = 'workspace' | 'category' | 'image' | 'complete' | 'block' | 'upload' | 'delete'; +type ModalType = 'workspace' | 'category' | 'image' | 'complete' | 'block' | 'upload' | 'deleteBlock' | 'deleteDocs'; export const ModalManager = ({ onClose }: ModalManagerProps) => { const modals = useModalStore((state) => state.modals); const activeModalType = Object.keys(modals).find((key) => modals[key as ModalType]) as ModalType | undefined; @@ -13,7 +13,7 @@ export const ModalManager = ({ onClose }: ModalManagerProps) => { const resetStep = useResetStep(); const ModalContent = useModalComponent(); - console.log(ModalContent); + console.log('모달 컨텐츠', ModalContent); const handleClose = () => { if (activeModalType) { @@ -23,6 +23,9 @@ export const ModalManager = ({ onClose }: ModalManagerProps) => { } }; + // activeModalType이 없으면 null을 반환 + if (!activeModalType) return null; + return activeModalType ? ( {ModalContent} From 77ee9fc6ddb59af394addfa1be36fbc2d1e89a1f Mon Sep 17 00:00:00 2001 From: cindy-chaewon Date: Thu, 1 Aug 2024 20:29:00 +0900 Subject: [PATCH 08/24] =?UTF-8?q?#187=20refactor:=20=ED=95=84=EC=9A=94?= =?UTF-8?q?=EC=97=86=EB=8A=94=20=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/Block/BlockModal.tsx | 9 +--- .../component/Upload/UploadModal.tsx | 8 ---- src/page/archiving/index/ArchivingPage.tsx | 19 +------- .../component/DocumentItem/DocumentItem.tsx | 5 +-- .../component/SelectedBlock/SelectedBlock.tsx | 6 +-- .../component/DeleteModal/DeleteModal.tsx | 5 +-- .../component/LeftSidebar/LeftSidebar.tsx | 44 +------------------ .../complete/WorkSpaceComplete.tsx | 6 --- .../createWorkSpace/image/WorkSpaceImage.tsx | 13 +----- .../createWorkSpace/name/WorkSpaceName.tsx | 18 +------- src/shared/store/modal.tsx | 16 +------ src/shared/store/modalContext.tsx | 8 ++-- src/shared/type/block.ts | 9 ++++ src/shared/util/modal.tsx | 10 ++--- 14 files changed, 30 insertions(+), 146 deletions(-) create mode 100644 src/shared/type/block.ts diff --git a/src/page/archiving/createTimeBlock/component/Block/BlockModal.tsx b/src/page/archiving/createTimeBlock/component/Block/BlockModal.tsx index 6e7a055e..0d2424c8 100644 --- a/src/page/archiving/createTimeBlock/component/Block/BlockModal.tsx +++ b/src/page/archiving/createTimeBlock/component/Block/BlockModal.tsx @@ -3,7 +3,6 @@ import BlockDate from '@/page/archiving/createTimeBlock/component/Block/Date/Blo import BlockIcon from '@/page/archiving/createTimeBlock/component/Block/Icon/BlockIcon'; import BlockBox from '@/page/archiving/createTimeBlock/component/Box/BlockBox'; import { BLOCK_ICON } from '@/page/archiving/createTimeBlock/constant/iconBlock'; -import { BlockData } from '@/page/archiving/createTimeBlock/type/blockType'; import { useState } from 'react'; @@ -16,17 +15,11 @@ import WorkSapceInfo from '@/shared/component/createWorkSpace/info/WorkSpaceInfo import { useNextStep } from '@/shared/store/modal'; import { useBlockModalContext } from '@/shared/store/modalContext'; -interface BlockModalProps { - onNext: (blockData: BlockData) => void; -} - const BlockModal = () => { - //const [blockName, setBlockName] = useState(''); const [selectedIcon, setSelectedIcon] = useState(-1); - //const [dates, setDates] = useState({ startDate: '', endDate: '' }); const [isDateRangeValid, setIsDateRangeValid] = useState(false); - const { blockName, setBlockName, blockType, setBlockType, startDate, setStartDate, endDate, setEndDate } = + const { blockName, setBlockName, setBlockType, startDate, setStartDate, endDate, setEndDate } = useBlockModalContext(); const nextStep = useNextStep(); diff --git a/src/page/archiving/createTimeBlock/component/Upload/UploadModal.tsx b/src/page/archiving/createTimeBlock/component/Upload/UploadModal.tsx index 59ce6d50..138e5b10 100644 --- a/src/page/archiving/createTimeBlock/component/Upload/UploadModal.tsx +++ b/src/page/archiving/createTimeBlock/component/Upload/UploadModal.tsx @@ -3,7 +3,6 @@ import BlockItem from '@/page/archiving/createTimeBlock/component/Upload/File/Li import { flexStyle, scrollStyle } from '@/page/archiving/createTimeBlock/component/Upload/UploadModal.style'; import { useDeleteFileMutation } from '@/page/archiving/createTimeBlock/hook/api/useDeleteFileMutation'; import { usePostTimeBlockMutation } from '@/page/archiving/createTimeBlock/hook/api/usePostTimeBlockMutation'; -import { BlockData } from '@/page/archiving/createTimeBlock/type/blockType'; import { formatDatePost } from '@/page/archiving/createTimeBlock/util/date'; import { getRandomColor } from '@/page/archiving/index/util/color'; @@ -18,13 +17,6 @@ import { useBlockModalContext } from '@/shared/store/modalContext'; import { useTeamStore } from '@/shared/store/team'; import { useToastStore } from '@/shared/store/toast'; -interface UploadModalProps { - onClose: () => void; - teamId: number; - type: string; - blockData: BlockData; -} - const UploadModal = () => { const { teamId } = useTeamStore(); diff --git a/src/page/archiving/index/ArchivingPage.tsx b/src/page/archiving/index/ArchivingPage.tsx index 04d35b2f..8711a573 100644 --- a/src/page/archiving/index/ArchivingPage.tsx +++ b/src/page/archiving/index/ArchivingPage.tsx @@ -1,5 +1,3 @@ -import BlockModal from '@/page/archiving/createTimeBlock/component/Block/BlockModal'; -import UploadModal from '@/page/archiving/createTimeBlock/component/Upload/UploadModal'; import { buttonStyle, contentStyle, daySectionStyle, timelineStyle } from '@/page/archiving/index/ArchivingPage.style'; import DaySection from '@/page/archiving/index/component/DaySection/DaySection'; import DocumentBar from '@/page/archiving/index/component/DocumentBar/DocumentBar'; @@ -16,12 +14,10 @@ import { useState } from 'react'; import AddIc from '@/common/asset/svg/add_btn.svg?react'; import Button from '@/common/component/Button/Button'; import Flex from '@/common/component/Flex/Flex'; -import Modal from '@/common/component/Modal/Modal'; -import { useModal, useOutsideClick } from '@/common/hook'; +import { useOutsideClick } from '@/common/hook'; import { theme } from '@/common/style/theme/theme'; -import { useModalComponent, useToggleModal } from '@/shared/store/modal'; -import { BlockModalProvider } from '@/shared/store/modalContext'; +import { useToggleModal } from '@/shared/store/modal'; import { useTeamStore } from '@/shared/store/team'; import { ModalManager } from '@/shared/util/modal'; @@ -70,17 +66,6 @@ const ArchivingPage = () => { // 블록 생성 모달 관련 코드 const toggleModal = useToggleModal(); - const ModalContent = useModalComponent(); - /*const { isOpen, openModal, closeModal, setCurrentContent, currentContent } = useModal(); - - const handleNext = (blockData: { - blockName: string; - blockType: string; - dates: { startDate: string; endDate: string }; - }) => { - const type = 'executive'; - setCurrentContent(); - };*/ return ( { window.open(fileUrl); diff --git a/src/page/archiving/index/component/SelectedBlock/SelectedBlock.tsx b/src/page/archiving/index/component/SelectedBlock/SelectedBlock.tsx index da986d67..f018e703 100644 --- a/src/page/archiving/index/component/SelectedBlock/SelectedBlock.tsx +++ b/src/page/archiving/index/component/SelectedBlock/SelectedBlock.tsx @@ -7,13 +7,11 @@ import { DocumentType } from '@/page/archiving/index/type/documentType'; import Button from '@/common/component/Button/Button'; import Flex from '@/common/component/Flex/Flex'; import Heading from '@/common/component/Heading/Heading'; -import Modal from '@/common/component/Modal/Modal'; import Text from '@/common/component/Text/Text'; -import { useModal } from '@/common/hook'; import { theme } from '@/common/style/theme/theme'; import DeleteModal from '@/shared/component/DeleteModal/DeleteModal'; -import { useDeleteModalStore, useModalState, useModalStore } from '@/shared/store/modal'; +import { useDeleteModalStore } from '@/shared/store/modal'; import { useTeamStore } from '@/shared/store/team'; import { blockNameStyle, containerStyle, deleteBtnStyle } from './SelectedBlock.style'; @@ -36,10 +34,8 @@ const SelectedBlock = ({ documentList, selectedBlock, }: DocumentBarInfoProps) => { - //const { toggleModal } = useModalStore(); const { teamId } = useTeamStore(); - //const isDeleteModalOpen = useModalState('deleteBlock'); const { openModal } = useDeleteModalStore(); const handleDeleteClick = () => { diff --git a/src/shared/component/DeleteModal/DeleteModal.tsx b/src/shared/component/DeleteModal/DeleteModal.tsx index babe1c9a..10366d5e 100644 --- a/src/shared/component/DeleteModal/DeleteModal.tsx +++ b/src/shared/component/DeleteModal/DeleteModal.tsx @@ -9,7 +9,7 @@ import Text from '@/common/component/Text/Text'; import { cancelStyle, deleteStyle } from '@/shared/component/DeleteModal/DeleteModal.style'; import { DELETE_DETAIL, DELETE_TITLE } from '@/shared/constant'; -import { useDeleteModalStore, useModalState, useModalStore } from '@/shared/store/modal'; +import { useDeleteModalStore } from '@/shared/store/modal'; interface DeleteModalProps { title: 'block' | 'docs'; @@ -21,7 +21,6 @@ interface DeleteModalProps { const DeleteModal = ({ title, detail, teamId, id }: DeleteModalProps) => { const { mutateAsync: blockMutate } = useDeleteBlockMutation(); const { mutateAsync: documentMutate } = useDeleteDocumentMutation(); - //const toggleModal = useModalStore((state) => state.toggleModal); const { isOpen, closeModal } = useDeleteModalStore(); @@ -48,8 +47,6 @@ const DeleteModal = ({ title, detail, teamId, id }: DeleteModalProps) => { }; const handleDelete = title === 'block' ? handleDeleteBlock : handleDeleteDocs; - //const isModalOpen = useModalState(title === 'block' ? 'deleteBlock' : 'deleteDocs'); - //const handleModalClose = () => toggleModal(title === 'block' ? 'deleteBlock' : 'deleteDocs'); return ( diff --git a/src/shared/component/LeftSidebar/LeftSidebar.tsx b/src/shared/component/LeftSidebar/LeftSidebar.tsx index aa300ec3..c8845711 100644 --- a/src/shared/component/LeftSidebar/LeftSidebar.tsx +++ b/src/shared/component/LeftSidebar/LeftSidebar.tsx @@ -8,9 +8,7 @@ import earthUrl from '@/common/asset/svg/global_2.svg'; import LogoSymbol from '@/common/asset/svg/logo_symbol.svg?react'; import settingUrl from '@/common/asset/svg/setting.svg'; import DEFAULT_LOGO from '@/common/asset/svg/teamprofile_2.svg'; -import Modal from '@/common/component/Modal/Modal'; import { useOverlay } from '@/common/hook'; -import { useModal } from '@/common/hook/useModal'; import { useOutsideClick } from '@/common/hook/useOutsideClick'; import { @@ -22,20 +20,13 @@ import { } from '@/shared/component/LeftSidebar/LeftSidebar.style'; import LeftSidebarItem from '@/shared/component/LeftSidebar/LeftSidebarItem/LeftSidebarItem'; import SettingMenu from '@/shared/component/LeftSidebar/LeftSidebarItem/SettingMenu/SettingMenu'; -import WorkSpaceCategory from '@/shared/component/createWorkSpace/category/WorkSpaceCategory'; -import WorkSpaceComplete from '@/shared/component/createWorkSpace/complete/WorkSpaceComplete'; -import WorkSpaceImage from '@/shared/component/createWorkSpace/image/WorkSpaceImage'; -import WorkSpaceName from '@/shared/component/createWorkSpace/name/WorkSpaceName'; import { PATH } from '@/shared/constant/path'; import { useClubInfoQuery } from '@/shared/hook/api/useClubInfoQuery'; -import { useModalComponent, useModalState, useToggleModal } from '@/shared/store/modal'; -import { WorkSpaceProvider } from '@/shared/store/modalContext'; +import { useToggleModal } from '@/shared/store/modal'; import { useTeamStore } from '@/shared/store/team'; import { Team } from '@/shared/type/team'; import { ModalManager } from '@/shared/util/modal'; -import { usePostTeamMutation } from '../createWorkSpace/hook/api/usePostTeamMutation'; - const LeftSidebar = () => { const { isOpen: isNavOpen, close, open } = useOverlay(); @@ -51,32 +42,8 @@ const LeftSidebar = () => { const { isOpen: isSettingOpen, close: onSettingClose, toggle } = useOverlay(); const settingRef = useOutsideClick(onSettingClose); - /*const [name, setName] = useState(''); - const [category, setCategory] = useState(''); - const [fileUrlData, setFileUrlData] = useState(''); - const [isComplete, setIsComplete] = useState(false); - - const { mutate: postTeamMutate } = usePostTeamMutation();*/ - const { setTeamId } = useTeamStore(); - /*useEffect(() => { - const postData = { - name: name, - category: category, - iconImageUrl: fileUrlData, - }; - - if (isComplete) { - postTeamMutate(postData, { - onSuccess: async () => { - refetch(); - setIsComplete(false); - }, - }); - } - }, [isComplete]);*/ - useEffect(() => { const teamId = localStorage.getItem('teamId'); if (teamId) { @@ -86,13 +53,6 @@ const LeftSidebar = () => { } }, [setTeamId, navigate]); - /*const handleNext1 = () => setCurrentContent(); - const handleNext2 = () => - setCurrentContent( - - ); - const handleNext3 = () => setCurrentContent();*/ - const handleShowcaseClick = () => { setClicked('showcase'); localStorage.removeItem('teamId'); @@ -111,7 +71,7 @@ const LeftSidebar = () => { navigate(`${PATH.ARCHIVING}?teamId=${teamId}`); close(); }; - // 모달 관련 코드 + const toggleModal = useToggleModal(); const handleWorkspaceClick = () => { diff --git a/src/shared/component/createWorkSpace/complete/WorkSpaceComplete.tsx b/src/shared/component/createWorkSpace/complete/WorkSpaceComplete.tsx index 610a352a..0fdac193 100644 --- a/src/shared/component/createWorkSpace/complete/WorkSpaceComplete.tsx +++ b/src/shared/component/createWorkSpace/complete/WorkSpaceComplete.tsx @@ -1,16 +1,10 @@ import WorkSpaceCompleteImg from '@/common/asset/svg/workspace-complete.svg?react'; import Flex from '@/common/component/Flex/Flex'; -import Modal from '@/common/component/Modal/Modal'; import WorkSapceInfo from '@/shared/component/createWorkSpace/info/WorkSpaceInfo'; import { sectionStyle } from '@/shared/component/createWorkSpace/name/WorkSpaceName.style'; -import { useModalState, useToggleModal } from '@/shared/store/modal'; const WorkSpaceComplete = () => { - // 모달 - //const isOpenModal = useModalState('complete'); - const toggleModal = useToggleModal(); - return ( { const [fileURL, setFileURL] = useState(''); const imgUploadInput = useRef(null); @@ -35,8 +33,6 @@ const WorkSpaceImage = () => { const { data: fileData } = useGetFileQuery(file as File); // 모달 - //const isOpenModal = useModalState('image'); - const toggleModal = useToggleModal(); const nextStep = useNextStep(); const { setFileUrlData, name, category, resetBlockData } = useWorkSpaceContext(); const { mutate: postTeamMutate } = usePostTeamMutation(); @@ -66,7 +62,6 @@ const WorkSpaceImage = () => { const handleImageChange = (event: React.ChangeEvent) => { const selectedFile = event.target.files?.[0]; - console.log('선택파일', selectedFile); if (selectedFile) { const newFileURL = URL.createObjectURL(selectedFile); setFileURL(newFileURL); @@ -95,10 +90,6 @@ const WorkSpaceImage = () => { } }; - console.log(name); - console.log(category); - console.log('파일', fileURL); - const handleSave = () => { postTeamMutate( { diff --git a/src/shared/component/createWorkSpace/name/WorkSpaceName.tsx b/src/shared/component/createWorkSpace/name/WorkSpaceName.tsx index 272409eb..17e72c28 100644 --- a/src/shared/component/createWorkSpace/name/WorkSpaceName.tsx +++ b/src/shared/component/createWorkSpace/name/WorkSpaceName.tsx @@ -3,7 +3,6 @@ import { useState } from 'react'; import Button from '@/common/component/Button/Button'; import Flex from '@/common/component/Flex/Flex'; import Input from '@/common/component/Input/Input'; -import Modal from '@/common/component/Modal/Modal'; import WorkSapceInfo from '@/shared/component/createWorkSpace/info/WorkSpaceInfo'; import { @@ -11,30 +10,17 @@ import { inputWrapperStyle, sectionStyle, } from '@/shared/component/createWorkSpace/name/WorkSpaceName.style'; -import { useModalState, useModalStore, useNextStep, useToggleModal } from '@/shared/store/modal'; +import {useNextStep} from '@/shared/store/modal'; import { useWorkSpaceContext } from '@/shared/store/modalContext'; -interface WorkSpaceNameProps { - setName: (name: string) => void; -} - const WorkSpaceName = () => { const [inputValue, setInputValue] = useState(''); - const isOpenModal = useModalState('workspace'); - const toggleModal = useToggleModal(); const nextStep = useNextStep(); const { setName } = useWorkSpaceContext(); const handleNext = () => { setName(inputValue); - nextStep(); // 단계 증가 후 - - // 다음 단계가 올바르게 업데이트되는지 확인 - console.log(useModalStore.getState().step); - - //toggleModal('category'); // 다음 모달 열기 - - //toggleModal('workspace'); // 현재 모달 닫기 + nextStep(); }; const isButtonActive = inputValue.trim().length > 0; diff --git a/src/shared/store/modal.tsx b/src/shared/store/modal.tsx index 49a6a72d..ba235a7e 100644 --- a/src/shared/store/modal.tsx +++ b/src/shared/store/modal.tsx @@ -7,26 +7,14 @@ import WorkSpaceCategory from '@/shared/component/createWorkSpace/category/WorkS import WorkSpaceComplete from '@/shared/component/createWorkSpace/complete/WorkSpaceComplete'; import WorkSpaceImage from '@/shared/component/createWorkSpace/image/WorkSpaceImage'; import WorkSpaceName from '@/shared/component/createWorkSpace/name/WorkSpaceName'; - -import DeleteModal from '../component/DeleteModal/DeleteModal'; - -interface ModalData { - teamId: number; - id: number; - title: 'block' | 'docs'; - detail: 'block' | 'docs'; -} +import { ModalType } from '@/shared/type/block'; interface DeleteModalState { isOpen: boolean; - //modalData: ModalData | null; openModal: () => void; closeModal: () => void; } -// 모달의 타입을 정의 -type ModalType = 'workspace' | 'category' | 'image' | 'complete' | 'block' | 'upload' | 'deleteBlock' | 'deleteDocs'; - interface ModalState { modals: { [key in ModalType]: boolean; @@ -40,7 +28,6 @@ interface ModalState { export const useDeleteModalStore = create((set) => ({ isOpen: false, - //modalData: null, openModal: () => set({ isOpen: true }), closeModal: () => set({ isOpen: false }), })); @@ -78,7 +65,6 @@ export const useModalComponent = () => { const activeModalType = (Object.keys(modals) as ModalType[]).find((key) => modals[key]); if (!activeModalType) return null; - console.log('모달', activeModalType); switch (activeModalType) { case 'workspace': diff --git a/src/shared/store/modalContext.tsx b/src/shared/store/modalContext.tsx index 79fb34b6..72620af3 100644 --- a/src/shared/store/modalContext.tsx +++ b/src/shared/store/modalContext.tsx @@ -1,8 +1,7 @@ import React, { ReactNode, createContext, useContext, useState } from 'react'; -import { useModalStore } from './modal'; +import { useModalStore } from '@/shared/store/modal'; -// Context의 타입 정의 interface WorkSpaceContextType { name: string; setName: React.Dispatch>; @@ -13,13 +12,12 @@ interface WorkSpaceContextType { resetBlockData: () => void; } -// Context 생성 및 초기값 설정 const WorkSpaceContext = createContext(undefined); export const useWorkSpaceContext = () => { const context = useContext(WorkSpaceContext); if (!context) { - throw new Error('useWorkSpaceContext must be used within a WorkSpaceProvider'); + throw new Error('Error WorkSpaceProvider'); } return context; }; @@ -67,7 +65,7 @@ const BlockModalContext = createContext(undef export const useBlockModalContext = () => { const context = useContext(BlockModalContext); if (!context) { - throw new Error('useBlockModalContext must be used within a BlockModalProvider'); + throw new Error('Error BlockModalProvider'); } return context; }; diff --git a/src/shared/type/block.ts b/src/shared/type/block.ts new file mode 100644 index 00000000..7896514b --- /dev/null +++ b/src/shared/type/block.ts @@ -0,0 +1,9 @@ +export type ModalType = + | 'workspace' + | 'category' + | 'image' + | 'complete' + | 'block' + | 'upload' + | 'deleteBlock' + | 'deleteDocs'; diff --git a/src/shared/util/modal.tsx b/src/shared/util/modal.tsx index 409eb636..bf9cdc20 100644 --- a/src/shared/util/modal.tsx +++ b/src/shared/util/modal.tsx @@ -1,11 +1,12 @@ import Modal from '@/common/component/Modal/Modal'; import { useModalComponent, useModalStore, useResetStep, useToggleModal } from '@/shared/store/modal'; +import { ModalType } from '@/shared/type/block'; interface ModalManagerProps { onClose?: () => void; } -type ModalType = 'workspace' | 'category' | 'image' | 'complete' | 'block' | 'upload' | 'deleteBlock' | 'deleteDocs'; + export const ModalManager = ({ onClose }: ModalManagerProps) => { const modals = useModalStore((state) => state.modals); const activeModalType = Object.keys(modals).find((key) => modals[key as ModalType]) as ModalType | undefined; @@ -13,17 +14,14 @@ export const ModalManager = ({ onClose }: ModalManagerProps) => { const resetStep = useResetStep(); const ModalContent = useModalComponent(); - console.log('모달 컨텐츠', ModalContent); - const handleClose = () => { if (activeModalType) { toggleModal(activeModalType); - resetStep(); // 모달이 닫힐 때 스텝 초기화 - if (onClose) onClose(); // onClose prop 호출 + resetStep(); + if (onClose) onClose(); } }; - // activeModalType이 없으면 null을 반환 if (!activeModalType) return null; return activeModalType ? ( From 5974228ee5d69915c47e3bb0b43b57211852adff Mon Sep 17 00:00:00 2001 From: cindy-chaewon Date: Thu, 1 Aug 2024 20:30:16 +0900 Subject: [PATCH 09/24] =?UTF-8?q?#187=20fix:=20=EC=A0=88=EB=8C=80=EA=B2=BD?= =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 371e027a..21719831 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -13,8 +13,7 @@ import Login from '@/shared/component/Login/Login'; import { HTTP_STATUS_CODE } from '@/shared/constant/api'; import { PATH } from '@/shared/constant/path'; import ErrorPage from '@/shared/page/errorPage/ErrorPage'; - -import { BlockModalProvider, WorkSpaceProvider } from './shared/store/modalContext'; +import { BlockModalProvider, WorkSpaceProvider } from '@/shared/store/modalContext'; const App = () => { useEffect(() => { From 50f68e9ce172640ff18104e5bc30e09897406b8d Mon Sep 17 00:00:00 2001 From: cindy-chaewon Date: Fri, 2 Aug 2024 01:27:51 +0900 Subject: [PATCH 10/24] =?UTF-8?q?#187=20refactor:=20=EC=9B=8C=ED=81=AC?= =?UTF-8?q?=EC=8A=A4=ED=8E=98=EC=9D=B4=EC=8A=A4,=20=EB=B8=94=EB=A1=9D?= =?UTF-8?q?=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 21 ++-- src/common/component/Modal/ModalManager.tsx | 40 ++++++++ .../component/Block/BlockModal.tsx | 8 +- .../component/Block/Date/BlockDate.tsx | 8 +- .../component/Upload/UploadModal.tsx | 9 +- .../hook/common/useDateRange.tsx | 4 +- src/page/archiving/index/ArchivingPage.tsx | 14 +-- .../component/DeleteModal/DeleteModal.tsx | 50 +++++----- .../component/LeftSidebar/LeftSidebar.tsx | 9 +- .../category/WorkSpaceCategory.tsx | 6 +- .../createWorkSpace/image/WorkSpaceImage.tsx | 8 +- .../createWorkSpace/name/WorkSpaceName.tsx | 8 +- src/shared/store/modal.tsx | 98 ++----------------- src/shared/store/modalContext.tsx | 4 +- src/shared/store/useBlockContext.tsx | 80 +++++++++++++++ src/shared/store/useWorkSpaceContext.tsx | 68 +++++++++++++ src/shared/util/modal.tsx | 6 +- 17 files changed, 270 insertions(+), 171 deletions(-) create mode 100644 src/common/component/Modal/ModalManager.tsx create mode 100644 src/shared/store/useBlockContext.tsx create mode 100644 src/shared/store/useWorkSpaceContext.tsx diff --git a/src/App.tsx b/src/App.tsx index 21719831..52af558a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -13,7 +13,6 @@ import Login from '@/shared/component/Login/Login'; import { HTTP_STATUS_CODE } from '@/shared/constant/api'; import { PATH } from '@/shared/constant/path'; import ErrorPage from '@/shared/page/errorPage/ErrorPage'; -import { BlockModalProvider, WorkSpaceProvider } from '@/shared/store/modalContext'; const App = () => { useEffect(() => { @@ -43,18 +42,14 @@ const App = () => { return ( - - - -
- -
- -
-
- - - + +
+ +
+ +
+
+ ); }; diff --git a/src/common/component/Modal/ModalManager.tsx b/src/common/component/Modal/ModalManager.tsx new file mode 100644 index 00000000..e73ff795 --- /dev/null +++ b/src/common/component/Modal/ModalManager.tsx @@ -0,0 +1,40 @@ +import Modal from '@/common/component/Modal/Modal'; + +import { useModalStore } from '@/shared/store/modal'; +import { BlockFlow, BlockProvider } from '@/shared/store/useBlockContext'; +import { WorkSpaceFlow, WorkSpaceProvider } from '@/shared/store/useWorkSpaceContext'; + +const ModalManager = () => { + const { isOpen, content, closeModal, id } = useModalStore(); + + if (!isOpen || !content) return null; + + let ModalContent; + + switch (id) { + case 'workspace': + ModalContent = ( + + + + ); + break; + case 'block': + ModalContent = ( + + + + ); + break; + default: + return null; + } + + return ( + + {content} + + ); +}; + +export default ModalManager; diff --git a/src/page/archiving/createTimeBlock/component/Block/BlockModal.tsx b/src/page/archiving/createTimeBlock/component/Block/BlockModal.tsx index 0d2424c8..66ecee80 100644 --- a/src/page/archiving/createTimeBlock/component/Block/BlockModal.tsx +++ b/src/page/archiving/createTimeBlock/component/Block/BlockModal.tsx @@ -12,16 +12,14 @@ import Input from '@/common/component/Input/Input'; import Text from '@/common/component/Text/Text'; import WorkSapceInfo from '@/shared/component/createWorkSpace/info/WorkSpaceInfo'; -import { useNextStep } from '@/shared/store/modal'; -import { useBlockModalContext } from '@/shared/store/modalContext'; +import { useBlockContext } from '@/shared/store/useBlockContext'; const BlockModal = () => { const [selectedIcon, setSelectedIcon] = useState(-1); const [isDateRangeValid, setIsDateRangeValid] = useState(false); - const { blockName, setBlockName, setBlockType, startDate, setStartDate, endDate, setEndDate } = - useBlockModalContext(); - const nextStep = useNextStep(); + const { blockName, setBlockName, setBlockType, startDate, setStartDate, endDate, setEndDate, nextStep } = + useBlockContext(); const handleBlockNameChange = (e: React.ChangeEvent) => { if (e.target.value.length <= 25) { diff --git a/src/page/archiving/createTimeBlock/component/Block/Date/BlockDate.tsx b/src/page/archiving/createTimeBlock/component/Block/Date/BlockDate.tsx index 70002af4..74763708 100644 --- a/src/page/archiving/createTimeBlock/component/Block/Date/BlockDate.tsx +++ b/src/page/archiving/createTimeBlock/component/Block/Date/BlockDate.tsx @@ -9,8 +9,8 @@ import SupportingText from '@/common/component/SupportingText/SupportingText'; interface BlockDateProps { startDate: string; endDate: string; - onSetStartDate: (date: string | ((prev: string) => string)) => void; - onSetEndDate: (date: string | ((prev: string) => string)) => void; + onSetStartDate: (date: string) => void; + onSetEndDate: (date: string) => void; onSetIsDateRangeValid: (isValid: boolean) => void; } @@ -18,8 +18,8 @@ const BlockDate = ({ startDate, endDate, onSetStartDate, onSetEndDate, onSetIsDa const { dates, validation, handleChange } = useDateRange( startDate, endDate, - onSetStartDate, - onSetEndDate, + (date: string) => onSetStartDate(date), + (date: string) => onSetEndDate(date), onSetIsDateRangeValid ); diff --git a/src/page/archiving/createTimeBlock/component/Upload/UploadModal.tsx b/src/page/archiving/createTimeBlock/component/Upload/UploadModal.tsx index 138e5b10..6d39e94d 100644 --- a/src/page/archiving/createTimeBlock/component/Upload/UploadModal.tsx +++ b/src/page/archiving/createTimeBlock/component/Upload/UploadModal.tsx @@ -13,14 +13,17 @@ import Flex from '@/common/component/Flex/Flex'; import { Files } from '@/shared/api/time-blocks/team/time-block/type'; import WorkSapceInfo from '@/shared/component/createWorkSpace/info/WorkSpaceInfo'; -import { useBlockModalContext } from '@/shared/store/modalContext'; +import { useModalStore } from '@/shared/store/modal'; import { useTeamStore } from '@/shared/store/team'; import { useToastStore } from '@/shared/store/toast'; +import { useBlockContext } from '@/shared/store/useBlockContext'; const UploadModal = () => { const { teamId } = useTeamStore(); - const { blockName, blockType, startDate, endDate, closeModal, resetBlockData } = useBlockModalContext(); + const { blockName, blockType, startDate, endDate, reset } = useBlockContext(); + const { closeModal } = useModalStore(); + const [files, setFiles] = useState([]); const [fileUrls, setFileUrls] = useState({}); const [uploadStatus, setUploadStatus] = useState<{ [key: string]: boolean }>({}); @@ -87,7 +90,7 @@ const UploadModal = () => { onSuccess: () => { createToast('활동 블록이 생성되었습니다', 'success'); closeModal(); - resetBlockData(); + reset(); }, }); }; diff --git a/src/page/archiving/createTimeBlock/hook/common/useDateRange.tsx b/src/page/archiving/createTimeBlock/hook/common/useDateRange.tsx index ddf1414a..17e5d38b 100644 --- a/src/page/archiving/createTimeBlock/hook/common/useDateRange.tsx +++ b/src/page/archiving/createTimeBlock/hook/common/useDateRange.tsx @@ -6,8 +6,8 @@ import { useState } from 'react'; const useDateRange = ( initialStartDate = '', initialEndDate = '', - onSetStartDate: (date: string | ((prev: string) => string)) => void, - onSetEndDate: (date: string | ((prev: string) => string)) => void, + onSetStartDate: (date: string) => void, + onSetEndDate: (date: string) => void, onSetIsDateRangeValid: (isValid: boolean) => void ) => { const [dates, setDates] = useState({ startDate: initialStartDate, endDate: initialEndDate }); diff --git a/src/page/archiving/index/ArchivingPage.tsx b/src/page/archiving/index/ArchivingPage.tsx index 8711a573..d0ea15d3 100644 --- a/src/page/archiving/index/ArchivingPage.tsx +++ b/src/page/archiving/index/ArchivingPage.tsx @@ -14,12 +14,11 @@ import { useState } from 'react'; import AddIc from '@/common/asset/svg/add_btn.svg?react'; import Button from '@/common/component/Button/Button'; import Flex from '@/common/component/Flex/Flex'; -import { useOutsideClick } from '@/common/hook'; +import { useModal, useOutsideClick } from '@/common/hook'; import { theme } from '@/common/style/theme/theme'; -import { useToggleModal } from '@/shared/store/modal'; +import { useModalStore } from '@/shared/store/modal'; import { useTeamStore } from '@/shared/store/team'; -import { ModalManager } from '@/shared/util/modal'; const ArchivingPage = () => { const [selectedId, setSelectedId] = useState('total'); @@ -65,7 +64,11 @@ const ArchivingPage = () => { const blockFloors = alignBlocks(timeBlocks, endDay, selectedMonth, currentYear); // 블록 생성 모달 관련 코드 - const toggleModal = useToggleModal(); + const openModal = useModalStore((state) => state.openModal); + + const handleOpenBlockModal = () => { + openModal('block', null); + }; return ( { - @@ -152,7 +155,6 @@ const ArchivingPage = () => { onSelectId={handleSelectedId} onClickClose={handleClose} /> - ); }; diff --git a/src/shared/component/DeleteModal/DeleteModal.tsx b/src/shared/component/DeleteModal/DeleteModal.tsx index 10366d5e..bc70f10b 100644 --- a/src/shared/component/DeleteModal/DeleteModal.tsx +++ b/src/shared/component/DeleteModal/DeleteModal.tsx @@ -9,7 +9,7 @@ import Text from '@/common/component/Text/Text'; import { cancelStyle, deleteStyle } from '@/shared/component/DeleteModal/DeleteModal.style'; import { DELETE_DETAIL, DELETE_TITLE } from '@/shared/constant'; -import { useDeleteModalStore } from '@/shared/store/modal'; +import { useModalStore } from '@/shared/store/modal'; interface DeleteModalProps { title: 'block' | 'docs'; @@ -22,7 +22,7 @@ const DeleteModal = ({ title, detail, teamId, id }: DeleteModalProps) => { const { mutateAsync: blockMutate } = useDeleteBlockMutation(); const { mutateAsync: documentMutate } = useDeleteDocumentMutation(); - const { isOpen, closeModal } = useDeleteModalStore(); + const { closeModal } = useModalStore(); const handleDeleteBlock = (teamId: number, id: number) => { blockMutate( @@ -49,32 +49,30 @@ const DeleteModal = ({ title, detail, teamId, id }: DeleteModalProps) => { const handleDelete = title === 'block' ? handleDeleteBlock : handleDeleteDocs; return ( - - - - {DELETE_TITLE[title.toUpperCase() as keyof typeof DELETE_TITLE]} - - - {DELETE_DETAIL[detail.toUpperCase() as keyof typeof DELETE_DETAIL]} - + + + {DELETE_TITLE[title.toUpperCase() as keyof typeof DELETE_TITLE]} + + + {DELETE_DETAIL[detail.toUpperCase() as keyof typeof DELETE_DETAIL]} + - - - - + + + - + ); }; diff --git a/src/shared/component/LeftSidebar/LeftSidebar.tsx b/src/shared/component/LeftSidebar/LeftSidebar.tsx index c8845711..83bc69d9 100644 --- a/src/shared/component/LeftSidebar/LeftSidebar.tsx +++ b/src/shared/component/LeftSidebar/LeftSidebar.tsx @@ -22,12 +22,12 @@ import LeftSidebarItem from '@/shared/component/LeftSidebar/LeftSidebarItem/Left import SettingMenu from '@/shared/component/LeftSidebar/LeftSidebarItem/SettingMenu/SettingMenu'; import { PATH } from '@/shared/constant/path'; import { useClubInfoQuery } from '@/shared/hook/api/useClubInfoQuery'; -import { useToggleModal } from '@/shared/store/modal'; +import { useModalStore } from '@/shared/store/modal'; import { useTeamStore } from '@/shared/store/team'; import { Team } from '@/shared/type/team'; -import { ModalManager } from '@/shared/util/modal'; const LeftSidebar = () => { + const openModal = useModalStore((state) => state.openModal); const { isOpen: isNavOpen, close, open } = useOverlay(); const sidebarRef = useOutsideClick(close); @@ -72,11 +72,9 @@ const LeftSidebar = () => { close(); }; - const toggleModal = useToggleModal(); - const handleWorkspaceClick = () => { setIsWorkspaceClicked(true); - toggleModal('workspace'); + openModal('workspace', null); }; const handleModalClose = () => { @@ -133,7 +131,6 @@ const LeftSidebar = () => { - ); }; diff --git a/src/shared/component/createWorkSpace/category/WorkSpaceCategory.tsx b/src/shared/component/createWorkSpace/category/WorkSpaceCategory.tsx index 2c5a343d..2413b865 100644 --- a/src/shared/component/createWorkSpace/category/WorkSpaceCategory.tsx +++ b/src/shared/component/createWorkSpace/category/WorkSpaceCategory.tsx @@ -14,14 +14,12 @@ import { import WorkSapceInfo from '@/shared/component/createWorkSpace/info/WorkSpaceInfo'; import { buttonStyle, sectionStyle } from '@/shared/component/createWorkSpace/name/WorkSpaceName.style'; import useCategoryListQuery from '@/shared/hook/api/useCategoryListQuery'; -import { useNextStep } from '@/shared/store/modal'; -import { useWorkSpaceContext } from '@/shared/store/modalContext'; +import { useWorkSpaceContext } from '@/shared/store/useWorkSpaceContext'; const WorkSpaceCategory = () => { const { isOpen, close, toggle } = useOverlay(); const ref = useOutsideClick(close, 'select-container'); - const nextStep = useNextStep(); - const { setCategory } = useWorkSpaceContext(); + const { setCategory, nextStep } = useWorkSpaceContext(); const [selected, setSelected] = useState(''); // 카테고리 데이터 diff --git a/src/shared/component/createWorkSpace/image/WorkSpaceImage.tsx b/src/shared/component/createWorkSpace/image/WorkSpaceImage.tsx index 1e9070c4..b892558e 100644 --- a/src/shared/component/createWorkSpace/image/WorkSpaceImage.tsx +++ b/src/shared/component/createWorkSpace/image/WorkSpaceImage.tsx @@ -18,8 +18,7 @@ import { } from '@/shared/component/createWorkSpace/image/WorkSpaceImage.style'; import WorkSapceInfo from '@/shared/component/createWorkSpace/info/WorkSpaceInfo'; import { sectionStyle } from '@/shared/component/createWorkSpace/name/WorkSpaceName.style'; -import { useNextStep } from '@/shared/store/modal'; -import { useWorkSpaceContext } from '@/shared/store/modalContext'; +import { useWorkSpaceContext } from '@/shared/store/useWorkSpaceContext'; const WorkSpaceImage = () => { const [fileURL, setFileURL] = useState(''); @@ -33,8 +32,7 @@ const WorkSpaceImage = () => { const { data: fileData } = useGetFileQuery(file as File); // 모달 - const nextStep = useNextStep(); - const { setFileUrlData, name, category, resetBlockData } = useWorkSpaceContext(); + const { setFileUrlData, nextStep, reset, name, category } = useWorkSpaceContext(); const { mutate: postTeamMutate } = usePostTeamMutation(); useEffect(() => { @@ -100,7 +98,7 @@ const WorkSpaceImage = () => { { onSuccess: () => { nextStep(); - resetBlockData(); + reset(); }, } ); diff --git a/src/shared/component/createWorkSpace/name/WorkSpaceName.tsx b/src/shared/component/createWorkSpace/name/WorkSpaceName.tsx index 17e72c28..3325a1de 100644 --- a/src/shared/component/createWorkSpace/name/WorkSpaceName.tsx +++ b/src/shared/component/createWorkSpace/name/WorkSpaceName.tsx @@ -10,17 +10,15 @@ import { inputWrapperStyle, sectionStyle, } from '@/shared/component/createWorkSpace/name/WorkSpaceName.style'; -import {useNextStep} from '@/shared/store/modal'; -import { useWorkSpaceContext } from '@/shared/store/modalContext'; +import { useWorkSpaceContext } from '@/shared/store/useWorkSpaceContext'; const WorkSpaceName = () => { const [inputValue, setInputValue] = useState(''); - const nextStep = useNextStep(); - const { setName } = useWorkSpaceContext(); + const { setName, nextStep } = useWorkSpaceContext(); const handleNext = () => { setName(inputValue); - nextStep(); + nextStep(); }; const isButtonActive = inputValue.trim().length > 0; diff --git a/src/shared/store/modal.tsx b/src/shared/store/modal.tsx index ba235a7e..84e7887d 100644 --- a/src/shared/store/modal.tsx +++ b/src/shared/store/modal.tsx @@ -1,99 +1,21 @@ -import BlockModal from '@/page/archiving/createTimeBlock/component/Block/BlockModal'; -import UploadModal from '@/page/archiving/createTimeBlock/component/Upload/UploadModal'; +import { ReactNode } from 'react'; import { create } from 'zustand'; -import WorkSpaceCategory from '@/shared/component/createWorkSpace/category/WorkSpaceCategory'; -import WorkSpaceComplete from '@/shared/component/createWorkSpace/complete/WorkSpaceComplete'; -import WorkSpaceImage from '@/shared/component/createWorkSpace/image/WorkSpaceImage'; -import WorkSpaceName from '@/shared/component/createWorkSpace/name/WorkSpaceName'; import { ModalType } from '@/shared/type/block'; -interface DeleteModalState { +interface ModalState { + id: ModalType | null; isOpen: boolean; - openModal: () => void; + content: ReactNode; + openModal: (id: ModalType, content: ReactNode) => void; closeModal: () => void; } -interface ModalState { - modals: { - [key in ModalType]: boolean; - }; - step: number; - toggleModal: (type: ModalType) => void; - setStep: (step: number) => void; - nextStep: () => void; - resetStep: () => void; -} - -export const useDeleteModalStore = create((set) => ({ - isOpen: false, - openModal: () => set({ isOpen: true }), - closeModal: () => set({ isOpen: false }), -})); - export const useModalStore = create((set) => ({ - modals: { - workspace: false, - category: false, - image: false, - complete: false, - block: false, - upload: false, - deleteBlock: false, - deleteDocs: false, - }, - modalData: null, - step: 1, - toggleModal: (type: ModalType) => - set((state) => ({ - modals: { - ...state.modals, - [type]: !state.modals[type], - }, - })), - setStep: (step: number) => set({ step }), - nextStep: () => set((state) => ({ step: state.step + 1 })), - resetStep: () => set({ step: 1 }), + id: null, + isOpen: false, + content: null, + openModal: (id, content) => set({ id, content, isOpen: true }), + closeModal: () => set({ id: null, content: null, isOpen: false }), })); - -export const useModalState = (type: ModalType) => useModalStore((state) => state.modals[type]); -export const useModalStep = () => useModalStore((state) => state.step); - -export const useModalComponent = () => { - const { modals, step } = useModalStore(); - const activeModalType = (Object.keys(modals) as ModalType[]).find((key) => modals[key]); - - if (!activeModalType) return null; - - switch (activeModalType) { - case 'workspace': - switch (step) { - case 1: - return ; - case 2: - return ; - case 3: - return ; - case 4: - return ; - default: - return null; - } - case 'block': - switch (step) { - case 1: - return ; - case 2: - return ; - default: - return null; - } - default: - return null; - } -}; - -export const useNextStep = () => useModalStore((state) => state.nextStep); -export const useResetStep = () => useModalStore((state) => state.resetStep); -export const useToggleModal = () => useModalStore((state) => state.toggleModal); diff --git a/src/shared/store/modalContext.tsx b/src/shared/store/modalContext.tsx index 72620af3..341ffd19 100644 --- a/src/shared/store/modalContext.tsx +++ b/src/shared/store/modalContext.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode, createContext, useContext, useState } from 'react'; +/*import React, { ReactNode, createContext, useContext, useState } from 'react'; import { useModalStore } from '@/shared/store/modal'; @@ -107,4 +107,4 @@ export const BlockModalProvider = ({ children }: { children: ReactNode }) => { {children} ); -}; +};*/ diff --git a/src/shared/store/useBlockContext.tsx b/src/shared/store/useBlockContext.tsx new file mode 100644 index 00000000..83606286 --- /dev/null +++ b/src/shared/store/useBlockContext.tsx @@ -0,0 +1,80 @@ +import BlockModal from '@/page/archiving/createTimeBlock/component/Block/BlockModal'; +import UploadModal from '@/page/archiving/createTimeBlock/component/Upload/UploadModal'; + +import { ReactNode, createContext, useContext, useState } from 'react'; + +import { Block } from '@/story/page/archiving/modal/BlockModal.stories'; + +interface BlockContextType { + step: number; + nextStep: () => void; + reset: () => void; + blockName: string; + setBlockName: (name: string) => void; + blockType: string; + setBlockType: (type: string) => void; + startDate: string; + setStartDate: (date: string) => void; + endDate: string; + setEndDate: (date: string) => void; +} + +const BlockContext = createContext(undefined); + +export const useBlockContext = () => { + const context = useContext(BlockContext); + if (!context) { + throw new Error('Error useBlockContext'); + } + return context; +}; + +export const BlockProvider = ({ children }: { children: ReactNode }) => { + const [step, setStep] = useState(1); + const [blockName, setBlockName] = useState(''); + const [blockType, setBlockType] = useState(''); + const [startDate, setStartDate] = useState(''); + const [endDate, setEndDate] = useState(''); + + const nextStep = () => setStep((prev) => prev + 1); + + const reset = () => { + setStep(1); + setBlockName(''); + setBlockType(''); + setStartDate(''); + setEndDate(''); + }; + + return ( + + {children} + + ); +}; + +export const BlockFlow = () => { + const { step } = useBlockContext(); + + switch (step) { + case 1: + return ; + case 2: + return ; + default: + return null; + } +}; diff --git a/src/shared/store/useWorkSpaceContext.tsx b/src/shared/store/useWorkSpaceContext.tsx new file mode 100644 index 00000000..1d104e32 --- /dev/null +++ b/src/shared/store/useWorkSpaceContext.tsx @@ -0,0 +1,68 @@ +import { ReactNode, createContext, useContext, useState } from 'react'; + +import WorkSpaceCategory from '../component/createWorkSpace/category/WorkSpaceCategory'; +import WorkSpaceComplete from '../component/createWorkSpace/complete/WorkSpaceComplete'; +import WorkSpaceImage from '../component/createWorkSpace/image/WorkSpaceImage'; +import WorkSpaceName from '../component/createWorkSpace/name/WorkSpaceName'; + +interface WorkSpaceContextType { + step: number; + nextStep: () => void; + reset: () => void; + name: string; + setName: (name: string) => void; + category: string; + setCategory: (category: string) => void; + fileUrlData: string; + setFileUrlData: (url: string) => void; +} + +const WorkSpaceContext = createContext(undefined); + +export const useWorkSpaceContext = () => { + const context = useContext(WorkSpaceContext); + if (!context) { + throw new Error('Error useWorkSpaceContext'); + } + return context; +}; + +export const WorkSpaceProvider = ({ children }: { children: ReactNode }) => { + const [step, setStep] = useState(1); + const [name, setName] = useState(''); + const [category, setCategory] = useState(''); + const [fileUrlData, setFileUrlData] = useState(''); + + const nextStep = () => setStep((prev) => prev + 1); + + const reset = () => { + setStep(1); + setName(''); + setCategory(''); + setFileUrlData(''); + }; + + return ( + + {children} + + ); +}; + +export const WorkSpaceFlow = () => { + const { step } = useWorkSpaceContext(); + + switch (step) { + case 1: + return ; + case 2: + return ; + case 3: + return ; + case 4: + return ; + default: + return null; + } +}; diff --git a/src/shared/util/modal.tsx b/src/shared/util/modal.tsx index bf9cdc20..9cc365af 100644 --- a/src/shared/util/modal.tsx +++ b/src/shared/util/modal.tsx @@ -1,4 +1,4 @@ -import Modal from '@/common/component/Modal/Modal'; +/*import Modal from '@/common/component/Modal/Modal'; import { useModalComponent, useModalStore, useResetStep, useToggleModal } from '@/shared/store/modal'; import { ModalType } from '@/shared/type/block'; @@ -29,4 +29,6 @@ export const ModalManager = ({ onClose }: ModalManagerProps) => { {ModalContent} ) : null; -}; + + +};*/ From da808c4247ba46e8e4a2b40b52be16388210b541 Mon Sep 17 00:00:00 2001 From: cindy-chaewon Date: Fri, 2 Aug 2024 02:01:44 +0900 Subject: [PATCH 11/24] =?UTF-8?q?#187=20fix:=20=EC=98=A4=EB=A5=98=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 3 + src/common/component/Modal/ModalManager.tsx | 25 +--- src/page/archiving/index/ArchivingPage.tsx | 10 +- .../component/DocumentItem/DocumentItem.tsx | 8 +- .../component/SelectedBlock/SelectedBlock.tsx | 16 +-- .../component/DeleteModal/DeleteModal.tsx | 1 - .../component/LeftSidebar/LeftSidebar.tsx | 9 +- src/shared/store/modal.tsx | 15 ++- src/shared/store/modalContext.tsx | 110 ------------------ src/shared/store/useBlockContext.tsx | 2 - src/shared/type/block.ts | 10 +- src/shared/util/modal.tsx | 34 ------ 12 files changed, 46 insertions(+), 197 deletions(-) delete mode 100644 src/shared/store/modalContext.tsx delete mode 100644 src/shared/util/modal.tsx diff --git a/src/App.tsx b/src/App.tsx index 52af558a..b9246191 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -14,6 +14,8 @@ import { HTTP_STATUS_CODE } from '@/shared/constant/api'; import { PATH } from '@/shared/constant/path'; import ErrorPage from '@/shared/page/errorPage/ErrorPage'; +import ModalManager from './common/component/Modal/ModalManager'; + const App = () => { useEffect(() => { document.body.style.backgroundColor = theme.colors.blue_900; @@ -43,6 +45,7 @@ const App = () => { return ( +
diff --git a/src/common/component/Modal/ModalManager.tsx b/src/common/component/Modal/ModalManager.tsx index e73ff795..0b36a763 100644 --- a/src/common/component/Modal/ModalManager.tsx +++ b/src/common/component/Modal/ModalManager.tsx @@ -1,35 +1,12 @@ import Modal from '@/common/component/Modal/Modal'; import { useModalStore } from '@/shared/store/modal'; -import { BlockFlow, BlockProvider } from '@/shared/store/useBlockContext'; -import { WorkSpaceFlow, WorkSpaceProvider } from '@/shared/store/useWorkSpaceContext'; const ModalManager = () => { - const { isOpen, content, closeModal, id } = useModalStore(); + const { isOpen, content, closeModal } = useModalStore(); if (!isOpen || !content) return null; - let ModalContent; - - switch (id) { - case 'workspace': - ModalContent = ( - - - - ); - break; - case 'block': - ModalContent = ( - - - - ); - break; - default: - return null; - } - return ( {content} diff --git a/src/page/archiving/index/ArchivingPage.tsx b/src/page/archiving/index/ArchivingPage.tsx index d0ea15d3..5bc60ab0 100644 --- a/src/page/archiving/index/ArchivingPage.tsx +++ b/src/page/archiving/index/ArchivingPage.tsx @@ -14,11 +14,12 @@ import { useState } from 'react'; import AddIc from '@/common/asset/svg/add_btn.svg?react'; import Button from '@/common/component/Button/Button'; import Flex from '@/common/component/Flex/Flex'; -import { useModal, useOutsideClick } from '@/common/hook'; +import { useOutsideClick } from '@/common/hook'; import { theme } from '@/common/style/theme/theme'; import { useModalStore } from '@/shared/store/modal'; import { useTeamStore } from '@/shared/store/team'; +import { BlockFlow, BlockProvider } from '@/shared/store/useBlockContext'; const ArchivingPage = () => { const [selectedId, setSelectedId] = useState('total'); @@ -67,7 +68,12 @@ const ArchivingPage = () => { const openModal = useModalStore((state) => state.openModal); const handleOpenBlockModal = () => { - openModal('block', null); + openModal( + 'block', + + + + ); }; return ( diff --git a/src/page/archiving/index/component/DocumentItem/DocumentItem.tsx b/src/page/archiving/index/component/DocumentItem/DocumentItem.tsx index fa17976e..a1109ef3 100644 --- a/src/page/archiving/index/component/DocumentItem/DocumentItem.tsx +++ b/src/page/archiving/index/component/DocumentItem/DocumentItem.tsx @@ -14,7 +14,7 @@ import Flex from '@/common/component/Flex/Flex'; import Text from '@/common/component/Text/Text'; import DeleteModal from '@/shared/component/DeleteModal/DeleteModal'; -import { useDeleteModalStore } from '@/shared/store/modal'; +import { useModalStore } from '@/shared/store/modal'; import { useTeamStore } from '@/shared/store/team'; interface DocumentItemProps { @@ -30,7 +30,6 @@ const DocumentItem = ({ documentId, children, selectedId, blockName, fileUrl, co const fileName = children?.toString(); const { teamId } = useTeamStore(); - const { openModal } = useDeleteModalStore(); //문서 클릭시 띄워주는 함수 const onClickDocumentItem = () => { @@ -44,7 +43,9 @@ const DocumentItem = ({ documentId, children, selectedId, blockName, fileUrl, co const handleTrashClick = (e: React.MouseEvent) => { e.stopPropagation(); - openModal(); + // 모달 띄우기 + const modalContent = ; + useModalStore.getState().openModal('delete', modalContent); }; return ( @@ -65,7 +66,6 @@ const DocumentItem = ({ documentId, children, selectedId, blockName, fileUrl, co handleTrashClick(e)} css={{ cursor: 'pointer' }} /> - ); diff --git a/src/page/archiving/index/component/SelectedBlock/SelectedBlock.tsx b/src/page/archiving/index/component/SelectedBlock/SelectedBlock.tsx index f018e703..df753d3d 100644 --- a/src/page/archiving/index/component/SelectedBlock/SelectedBlock.tsx +++ b/src/page/archiving/index/component/SelectedBlock/SelectedBlock.tsx @@ -1,4 +1,9 @@ import DocumentItem from '@/page/archiving/index/component/DocumentItem/DocumentItem'; +import { + blockNameStyle, + containerStyle, + deleteBtnStyle, +} from '@/page/archiving/index/component/SelectedBlock/SelectedBlock.style'; import { documentListStyle } from '@/page/archiving/index/component/TotalDocument/TotalDocument.style'; import { ICON_TYPE } from '@/page/archiving/index/constant/icon'; import { Block } from '@/page/archiving/index/type/blockType'; @@ -11,11 +16,9 @@ import Text from '@/common/component/Text/Text'; import { theme } from '@/common/style/theme/theme'; import DeleteModal from '@/shared/component/DeleteModal/DeleteModal'; -import { useDeleteModalStore } from '@/shared/store/modal'; +import { useModalStore } from '@/shared/store/modal'; import { useTeamStore } from '@/shared/store/team'; -import { blockNameStyle, containerStyle, deleteBtnStyle } from './SelectedBlock.style'; - interface DocumentBarInfoProps { selectedId: string; blockName: string; @@ -36,10 +39,10 @@ const SelectedBlock = ({ }: DocumentBarInfoProps) => { const { teamId } = useTeamStore(); - const { openModal } = useDeleteModalStore(); - const handleDeleteClick = () => { - openModal(); + //모달 띄우기 + const modalContent = ; + useModalStore.getState().openModal('delete', modalContent); }; return ( @@ -69,7 +72,6 @@ const SelectedBlock = ({ ))} - ); }; diff --git a/src/shared/component/DeleteModal/DeleteModal.tsx b/src/shared/component/DeleteModal/DeleteModal.tsx index bc70f10b..644efe79 100644 --- a/src/shared/component/DeleteModal/DeleteModal.tsx +++ b/src/shared/component/DeleteModal/DeleteModal.tsx @@ -4,7 +4,6 @@ import { useDeleteDocumentMutation } from '@/page/archiving/index/hook/api/useDe import Button from '@/common/component/Button/Button'; import Flex from '@/common/component/Flex/Flex'; import Heading from '@/common/component/Heading/Heading'; -import Modal from '@/common/component/Modal/Modal'; import Text from '@/common/component/Text/Text'; import { cancelStyle, deleteStyle } from '@/shared/component/DeleteModal/DeleteModal.style'; diff --git a/src/shared/component/LeftSidebar/LeftSidebar.tsx b/src/shared/component/LeftSidebar/LeftSidebar.tsx index 83bc69d9..80caf1b4 100644 --- a/src/shared/component/LeftSidebar/LeftSidebar.tsx +++ b/src/shared/component/LeftSidebar/LeftSidebar.tsx @@ -24,6 +24,7 @@ import { PATH } from '@/shared/constant/path'; import { useClubInfoQuery } from '@/shared/hook/api/useClubInfoQuery'; import { useModalStore } from '@/shared/store/modal'; import { useTeamStore } from '@/shared/store/team'; +import { WorkSpaceFlow, WorkSpaceProvider } from '@/shared/store/useWorkSpaceContext'; import { Team } from '@/shared/type/team'; const LeftSidebar = () => { @@ -74,7 +75,13 @@ const LeftSidebar = () => { const handleWorkspaceClick = () => { setIsWorkspaceClicked(true); - openModal('workspace', null); + openModal( + 'workspace', + + + , + handleModalClose + ); }; const handleModalClose = () => { diff --git a/src/shared/store/modal.tsx b/src/shared/store/modal.tsx index 84e7887d..e0166ba8 100644 --- a/src/shared/store/modal.tsx +++ b/src/shared/store/modal.tsx @@ -8,7 +8,8 @@ interface ModalState { id: ModalType | null; isOpen: boolean; content: ReactNode; - openModal: (id: ModalType, content: ReactNode) => void; + closeCallback: (() => void) | null; + openModal: (id: ModalType, content: ReactNode, closeCallback?: (() => void) | null) => void; closeModal: () => void; } @@ -16,6 +17,14 @@ export const useModalStore = create((set) => ({ id: null, isOpen: false, content: null, - openModal: (id, content) => set({ id, content, isOpen: true }), - closeModal: () => set({ id: null, content: null, isOpen: false }), + closeCallback: null, + openModal: (id, content, closeCallback = null) => set({ id, content, isOpen: true, closeCallback }), + closeModal: () => { + set((state) => { + if (state.closeCallback) { + state.closeCallback(); + } + return { id: null, content: null, isOpen: false, closeCallback: null }; + }); + }, })); diff --git a/src/shared/store/modalContext.tsx b/src/shared/store/modalContext.tsx deleted file mode 100644 index 341ffd19..00000000 --- a/src/shared/store/modalContext.tsx +++ /dev/null @@ -1,110 +0,0 @@ -/*import React, { ReactNode, createContext, useContext, useState } from 'react'; - -import { useModalStore } from '@/shared/store/modal'; - -interface WorkSpaceContextType { - name: string; - setName: React.Dispatch>; - category: string; - setCategory: React.Dispatch>; - fileUrlData: string; - setFileUrlData: React.Dispatch>; - resetBlockData: () => void; -} - -const WorkSpaceContext = createContext(undefined); - -export const useWorkSpaceContext = () => { - const context = useContext(WorkSpaceContext); - if (!context) { - throw new Error('Error WorkSpaceProvider'); - } - return context; -}; - -interface WorkSpaceProviderProps { - children: ReactNode; -} - -export const WorkSpaceProvider = ({ children }: WorkSpaceProviderProps) => { - const [name, setName] = useState(''); - const [category, setCategory] = useState(''); - const [fileUrlData, setFileUrlData] = useState(''); - - console.log(fileUrlData); - - const resetBlockData = () => { - setName(''); - setCategory(''); - setFileUrlData(''); - }; - - return ( - - {children} - - ); -}; - -interface BlockModalContextType { - blockName: string; - setBlockName: React.Dispatch>; - blockType: string; - setBlockType: React.Dispatch>; - startDate: string; - setStartDate: React.Dispatch>; - endDate: string; - setEndDate: React.Dispatch>; - resetBlockData: () => void; - closeModal: () => void; -} - -const BlockModalContext = createContext(undefined); - -export const useBlockModalContext = () => { - const context = useContext(BlockModalContext); - if (!context) { - throw new Error('Error BlockModalProvider'); - } - return context; -}; - -export const BlockModalProvider = ({ children }: { children: ReactNode }) => { - const [blockName, setBlockName] = useState(''); - const [blockType, setBlockType] = useState(''); - const [startDate, setStartDate] = useState(''); - const [endDate, setEndDate] = useState(''); - - const { toggleModal, resetStep } = useModalStore(); - - const closeModal = () => { - toggleModal('block'); - resetStep(); - }; - - const resetBlockData = () => { - setBlockName(''); - setBlockType(''); - setStartDate(''); - setEndDate(''); - }; - - return ( - - {children} - - ); -};*/ diff --git a/src/shared/store/useBlockContext.tsx b/src/shared/store/useBlockContext.tsx index 83606286..d65765df 100644 --- a/src/shared/store/useBlockContext.tsx +++ b/src/shared/store/useBlockContext.tsx @@ -3,8 +3,6 @@ import UploadModal from '@/page/archiving/createTimeBlock/component/Upload/Uploa import { ReactNode, createContext, useContext, useState } from 'react'; -import { Block } from '@/story/page/archiving/modal/BlockModal.stories'; - interface BlockContextType { step: number; nextStep: () => void; diff --git a/src/shared/type/block.ts b/src/shared/type/block.ts index 7896514b..e78af1a1 100644 --- a/src/shared/type/block.ts +++ b/src/shared/type/block.ts @@ -1,9 +1 @@ -export type ModalType = - | 'workspace' - | 'category' - | 'image' - | 'complete' - | 'block' - | 'upload' - | 'deleteBlock' - | 'deleteDocs'; +export type ModalType = 'workspace' | 'block' | 'delete'; diff --git a/src/shared/util/modal.tsx b/src/shared/util/modal.tsx deleted file mode 100644 index 9cc365af..00000000 --- a/src/shared/util/modal.tsx +++ /dev/null @@ -1,34 +0,0 @@ -/*import Modal from '@/common/component/Modal/Modal'; - -import { useModalComponent, useModalStore, useResetStep, useToggleModal } from '@/shared/store/modal'; -import { ModalType } from '@/shared/type/block'; - -interface ModalManagerProps { - onClose?: () => void; -} - -export const ModalManager = ({ onClose }: ModalManagerProps) => { - const modals = useModalStore((state) => state.modals); - const activeModalType = Object.keys(modals).find((key) => modals[key as ModalType]) as ModalType | undefined; - const toggleModal = useToggleModal(); - const resetStep = useResetStep(); - const ModalContent = useModalComponent(); - - const handleClose = () => { - if (activeModalType) { - toggleModal(activeModalType); - resetStep(); - if (onClose) onClose(); - } - }; - - if (!activeModalType) return null; - - return activeModalType ? ( - - {ModalContent} - - ) : null; - - -};*/ From 253516711d1db78e9451bbc99b7e52e05af94902 Mon Sep 17 00:00:00 2001 From: cindy-chaewon Date: Fri, 2 Aug 2024 02:11:16 +0900 Subject: [PATCH 12/24] =?UTF-8?q?#187=20fix:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/component/Modal/Modal.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/common/component/Modal/Modal.tsx b/src/common/component/Modal/Modal.tsx index 48cee01c..c57353f8 100644 --- a/src/common/component/Modal/Modal.tsx +++ b/src/common/component/Modal/Modal.tsx @@ -38,8 +38,6 @@ const Modal = ({ isOpen, children, onClose }: ModalProps) => { }; }, [isOpen, handleKeyDown]); - console.log('Modal isOpen:', isOpen); - return ( isOpen && createPortal( From 3a1feff628d26a7fd29a8c5a8a190e90cd233a87 Mon Sep 17 00:00:00 2001 From: cindy-chaewon Date: Tue, 6 Aug 2024 22:20:26 +0900 Subject: [PATCH 13/24] =?UTF-8?q?#187=20refactor:=20=EC=BD=94=EB=93=9C?= =?UTF-8?q?=EB=A6=AC=EB=B7=B0=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 5 +- src/common/component/Modal/ModalContainer.tsx | 21 +++++ src/common/component/Modal/ModalManager.tsx | 17 ---- .../component/Block/BlockModal.tsx | 35 ++++---- .../component/Upload/UploadModal.tsx | 14 ++-- src/page/archiving/index/ArchivingPage.tsx | 9 +-- .../component/DocumentItem/DocumentItem.tsx | 36 ++++----- .../component/SelectedBlock/SelectedBlock.tsx | 2 +- .../component/DeleteModal/DeleteModal.tsx | 4 +- .../LeftSidebar/LeftSidebar.style.ts | 2 + .../component/LeftSidebar/LeftSidebar.tsx | 81 +++++++------------ src/shared/component/ModalFlow/BlockFlow.tsx | 15 ++++ .../component/ModalFlow/WorkSpaceFlow.tsx | 19 +++++ .../hook/api/useGetFileQuery.ts | 0 .../hook/api/usePostTeamMutation.ts | 0 .../info/WorkSpaceInfo.style.ts | 0 .../info/WorkSpaceInfo.tsx | 2 +- .../category/WorkSpaceCategory.style.ts | 0 .../category/WorkSpaceCategory.tsx | 22 +++-- .../complete/WorkSpaceComplete.tsx | 4 +- .../image/WorkSpaceImage.style.ts | 0 .../modalContents}/image/WorkSpaceImage.tsx | 31 ++++--- .../name/WorkSpaceName.style.ts | 0 .../modalContents}/name/WorkSpaceName.tsx | 10 +-- src/shared/hook/common/useBlockContext.tsx | 56 +++++++++++++ .../hook/common/useWorkSpaceContext.tsx | 55 +++++++++++++ src/shared/store/modal.tsx | 19 +---- src/shared/store/useBlockContext.tsx | 78 ------------------ src/shared/store/useWorkSpaceContext.tsx | 68 ---------------- .../modal/WorkSpaceCategory.stories.tsx | 2 +- .../modal/WorkSpaceComplete.stories.tsx | 2 +- .../shared/modal/WorkSpaceImage.stories.tsx | 2 +- .../shared/modal/WorkSpaceInfo.stories.tsx | 2 +- .../shared/modal/WorkSpaceName.stories.tsx | 2 +- 34 files changed, 286 insertions(+), 329 deletions(-) create mode 100644 src/common/component/Modal/ModalContainer.tsx delete mode 100644 src/common/component/Modal/ModalManager.tsx create mode 100644 src/shared/component/ModalFlow/BlockFlow.tsx create mode 100644 src/shared/component/ModalFlow/WorkSpaceFlow.tsx rename src/shared/component/{createWorkSpace => createWorkSpaceModal}/hook/api/useGetFileQuery.ts (100%) rename src/shared/component/{createWorkSpace => createWorkSpaceModal}/hook/api/usePostTeamMutation.ts (100%) rename src/shared/component/{createWorkSpace => createWorkSpaceModal}/info/WorkSpaceInfo.style.ts (100%) rename src/shared/component/{createWorkSpace => createWorkSpaceModal}/info/WorkSpaceInfo.tsx (95%) rename src/shared/component/{createWorkSpace => createWorkSpaceModal/modalContents}/category/WorkSpaceCategory.style.ts (100%) rename src/shared/component/{createWorkSpace => createWorkSpaceModal/modalContents}/category/WorkSpaceCategory.tsx (83%) rename src/shared/component/{createWorkSpace => createWorkSpaceModal/modalContents}/complete/WorkSpaceComplete.tsx (83%) rename src/shared/component/{createWorkSpace => createWorkSpaceModal/modalContents}/image/WorkSpaceImage.style.ts (100%) rename src/shared/component/{createWorkSpace => createWorkSpaceModal/modalContents}/image/WorkSpaceImage.tsx (81%) rename src/shared/component/{createWorkSpace => createWorkSpaceModal/modalContents}/name/WorkSpaceName.style.ts (100%) rename src/shared/component/{createWorkSpace => createWorkSpaceModal/modalContents}/name/WorkSpaceName.tsx (79%) create mode 100644 src/shared/hook/common/useBlockContext.tsx create mode 100644 src/shared/hook/common/useWorkSpaceContext.tsx delete mode 100644 src/shared/store/useBlockContext.tsx delete mode 100644 src/shared/store/useWorkSpaceContext.tsx diff --git a/src/App.tsx b/src/App.tsx index b9246191..afbf0677 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,6 +6,7 @@ import { Outlet, useNavigate } from 'react-router-dom'; import { AxiosError } from 'axios'; import ErrorBoundary from '@/common/component/ErrorBoundary/ErrorBoundary'; +import ModalContainer from '@/common/component/Modal/ModalContainer'; import { theme } from '@/common/style/theme/theme'; import LeftSidebar from '@/shared/component/LeftSidebar/LeftSidebar'; @@ -14,8 +15,6 @@ import { HTTP_STATUS_CODE } from '@/shared/constant/api'; import { PATH } from '@/shared/constant/path'; import ErrorPage from '@/shared/page/errorPage/ErrorPage'; -import ModalManager from './common/component/Modal/ModalManager'; - const App = () => { useEffect(() => { document.body.style.backgroundColor = theme.colors.blue_900; @@ -45,7 +44,7 @@ const App = () => { return ( - +
diff --git a/src/common/component/Modal/ModalContainer.tsx b/src/common/component/Modal/ModalContainer.tsx new file mode 100644 index 00000000..4d791f86 --- /dev/null +++ b/src/common/component/Modal/ModalContainer.tsx @@ -0,0 +1,21 @@ +import Modal from '@/common/component/Modal/Modal'; + +import { BlockProvider } from '@/shared/hook/common/useBlockContext'; +import { WorkSpaceProvider } from '@/shared/hook/common/useWorkSpaceContext'; +import { useModalStore } from '@/shared/store/modal'; + +const ModalContainer = () => { + const { isOpen, content, closeModal } = useModalStore(); + + if (!isOpen || !content) return null; + + return ( + + + {content} + + + ); +}; + +export default ModalContainer; diff --git a/src/common/component/Modal/ModalManager.tsx b/src/common/component/Modal/ModalManager.tsx deleted file mode 100644 index 0b36a763..00000000 --- a/src/common/component/Modal/ModalManager.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import Modal from '@/common/component/Modal/Modal'; - -import { useModalStore } from '@/shared/store/modal'; - -const ModalManager = () => { - const { isOpen, content, closeModal } = useModalStore(); - - if (!isOpen || !content) return null; - - return ( - - {content} - - ); -}; - -export default ModalManager; diff --git a/src/page/archiving/createTimeBlock/component/Block/BlockModal.tsx b/src/page/archiving/createTimeBlock/component/Block/BlockModal.tsx index 66ecee80..6abccf35 100644 --- a/src/page/archiving/createTimeBlock/component/Block/BlockModal.tsx +++ b/src/page/archiving/createTimeBlock/component/Block/BlockModal.tsx @@ -11,35 +11,36 @@ import Flex from '@/common/component/Flex/Flex'; import Input from '@/common/component/Input/Input'; import Text from '@/common/component/Text/Text'; -import WorkSapceInfo from '@/shared/component/createWorkSpace/info/WorkSpaceInfo'; -import { useBlockContext } from '@/shared/store/useBlockContext'; +import WorkSapceInfo from '@/shared/component/createWorkSpaceModal/info/WorkSpaceInfo'; +import { useBlockContext } from '@/shared/hook/common/useBlockContext'; const BlockModal = () => { const [selectedIcon, setSelectedIcon] = useState(-1); const [isDateRangeValid, setIsDateRangeValid] = useState(false); - const { blockName, setBlockName, setBlockType, startDate, setStartDate, endDate, setEndDate, nextStep } = - useBlockContext(); + const { formData, setFormData, nextStep } = useBlockContext(); const handleBlockNameChange = (e: React.ChangeEvent) => { if (e.target.value.length <= 25) { - setBlockName(e.target.value); + setFormData({ blockName: e.target.value }); } }; const isButtonActive = - blockName.trim() !== '' && + formData.blockName.trim() !== '' && selectedIcon !== -1 && - startDate.length === 10 && - endDate.length === 10 && + formData.startDate.length === 10 && + formData.endDate.length === 10 && isDateRangeValid; const handleNext = () => { if (isButtonActive) { const blockIconType = BLOCK_ICON[selectedIcon].name; - setBlockType(blockIconType); - setStartDate(startDate); - setEndDate(endDate); + setFormData({ + blockType: blockIconType, + startDate: formData.startDate, + endDate: formData.endDate, + }); nextStep(); } }; @@ -74,11 +75,11 @@ const BlockModal = () => { size="large" placeholder="활동,행사명 등" css={{ width: '100%' }} - value={blockName} + value={formData.blockName} onChange={handleBlockNameChange} /> - {blockName.length} / 25 + {formData.blockName.length} / 25 @@ -86,10 +87,10 @@ const BlockModal = () => { setFormData({ startDate: date })} + onSetEndDate={(date) => setFormData({ endDate: date })} onSetIsDateRangeValid={setIsDateRangeValid} /> diff --git a/src/page/archiving/createTimeBlock/component/Upload/UploadModal.tsx b/src/page/archiving/createTimeBlock/component/Upload/UploadModal.tsx index 6d39e94d..6f451d11 100644 --- a/src/page/archiving/createTimeBlock/component/Upload/UploadModal.tsx +++ b/src/page/archiving/createTimeBlock/component/Upload/UploadModal.tsx @@ -12,16 +12,16 @@ import Button from '@/common/component/Button/Button'; import Flex from '@/common/component/Flex/Flex'; import { Files } from '@/shared/api/time-blocks/team/time-block/type'; -import WorkSapceInfo from '@/shared/component/createWorkSpace/info/WorkSpaceInfo'; +import WorkSapceInfo from '@/shared/component/createWorkSpaceModal/info/WorkSpaceInfo'; +import { useBlockContext } from '@/shared/hook/common/useBlockContext'; import { useModalStore } from '@/shared/store/modal'; import { useTeamStore } from '@/shared/store/team'; import { useToastStore } from '@/shared/store/toast'; -import { useBlockContext } from '@/shared/store/useBlockContext'; const UploadModal = () => { const { teamId } = useTeamStore(); - const { blockName, blockType, startDate, endDate, reset } = useBlockContext(); + const { formData, reset } = useBlockContext(); const { closeModal } = useModalStore(); const [files, setFiles] = useState([]); @@ -77,11 +77,11 @@ const UploadModal = () => { }; const data = { - name: blockName, + name: formData.blockName, color: getRandomColor(), - startDate: formatDatePost(startDate), - endDate: formatDatePost(endDate), - blockType: blockType, + startDate: formatDatePost(formData.startDate), + endDate: formatDatePost(formData.endDate), + blockType: formData.blockType, files: fileUrls, }; diff --git a/src/page/archiving/index/ArchivingPage.tsx b/src/page/archiving/index/ArchivingPage.tsx index 5bc60ab0..f57929c7 100644 --- a/src/page/archiving/index/ArchivingPage.tsx +++ b/src/page/archiving/index/ArchivingPage.tsx @@ -17,9 +17,9 @@ import Flex from '@/common/component/Flex/Flex'; import { useOutsideClick } from '@/common/hook'; import { theme } from '@/common/style/theme/theme'; +import { BlockFlow } from '@/shared/component/ModalFlow/BlockFlow'; import { useModalStore } from '@/shared/store/modal'; import { useTeamStore } from '@/shared/store/team'; -import { BlockFlow, BlockProvider } from '@/shared/store/useBlockContext'; const ArchivingPage = () => { const [selectedId, setSelectedId] = useState('total'); @@ -68,12 +68,7 @@ const ArchivingPage = () => { const openModal = useModalStore((state) => state.openModal); const handleOpenBlockModal = () => { - openModal( - 'block', - - - - ); + openModal(); }; return ( diff --git a/src/page/archiving/index/component/DocumentItem/DocumentItem.tsx b/src/page/archiving/index/component/DocumentItem/DocumentItem.tsx index a1109ef3..6c3d95cd 100644 --- a/src/page/archiving/index/component/DocumentItem/DocumentItem.tsx +++ b/src/page/archiving/index/component/DocumentItem/DocumentItem.tsx @@ -45,29 +45,27 @@ const DocumentItem = ({ documentId, children, selectedId, blockName, fileUrl, co e.stopPropagation(); // 모달 띄우기 const modalContent = ; - useModalStore.getState().openModal('delete', modalContent); + useModalStore.getState().openModal(modalContent); }; return ( - <> - {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */} -
  • - {color && ( -
    - - {blockName} - -
    - )} - - - {fileName} + /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ +
  • + {color && ( +
    + + {blockName} - - handleTrashClick(e)} css={{ cursor: 'pointer' }} /> - -
    • - +
    + )} + + + {fileName} + + + handleTrashClick(e)} css={{ cursor: 'pointer' }} /> + + ); }; export default DocumentItem; diff --git a/src/page/archiving/index/component/SelectedBlock/SelectedBlock.tsx b/src/page/archiving/index/component/SelectedBlock/SelectedBlock.tsx index df753d3d..64eeb33f 100644 --- a/src/page/archiving/index/component/SelectedBlock/SelectedBlock.tsx +++ b/src/page/archiving/index/component/SelectedBlock/SelectedBlock.tsx @@ -42,7 +42,7 @@ const SelectedBlock = ({ const handleDeleteClick = () => { //모달 띄우기 const modalContent = ; - useModalStore.getState().openModal('delete', modalContent); + useModalStore.getState().openModal(modalContent); }; return ( diff --git a/src/shared/component/DeleteModal/DeleteModal.tsx b/src/shared/component/DeleteModal/DeleteModal.tsx index 644efe79..2f3edbfd 100644 --- a/src/shared/component/DeleteModal/DeleteModal.tsx +++ b/src/shared/component/DeleteModal/DeleteModal.tsx @@ -18,8 +18,8 @@ interface DeleteModalProps { } const DeleteModal = ({ title, detail, teamId, id }: DeleteModalProps) => { - const { mutateAsync: blockMutate } = useDeleteBlockMutation(); - const { mutateAsync: documentMutate } = useDeleteDocumentMutation(); + const { mutate: blockMutate } = useDeleteBlockMutation(); + const { mutate: documentMutate } = useDeleteDocumentMutation(); const { closeModal } = useModalStore(); diff --git a/src/shared/component/LeftSidebar/LeftSidebar.style.ts b/src/shared/component/LeftSidebar/LeftSidebar.style.ts index fb7828c3..eae02397 100644 --- a/src/shared/component/LeftSidebar/LeftSidebar.style.ts +++ b/src/shared/component/LeftSidebar/LeftSidebar.style.ts @@ -42,6 +42,8 @@ export const leftSidebarListStyle = css({ flexDirection: 'column', gap: '2.4rem', + overflowY: 'scroll', + height: '100rem', }); export const arrowStyle = css({ diff --git a/src/shared/component/LeftSidebar/LeftSidebar.tsx b/src/shared/component/LeftSidebar/LeftSidebar.tsx index 80caf1b4..c98bb925 100644 --- a/src/shared/component/LeftSidebar/LeftSidebar.tsx +++ b/src/shared/component/LeftSidebar/LeftSidebar.tsx @@ -20,11 +20,11 @@ import { } from '@/shared/component/LeftSidebar/LeftSidebar.style'; import LeftSidebarItem from '@/shared/component/LeftSidebar/LeftSidebarItem/LeftSidebarItem'; import SettingMenu from '@/shared/component/LeftSidebar/LeftSidebarItem/SettingMenu/SettingMenu'; +import { WorkSpaceFlow } from '@/shared/component/ModalFlow/WorkSpaceFlow'; import { PATH } from '@/shared/constant/path'; import { useClubInfoQuery } from '@/shared/hook/api/useClubInfoQuery'; import { useModalStore } from '@/shared/store/modal'; import { useTeamStore } from '@/shared/store/team'; -import { WorkSpaceFlow, WorkSpaceProvider } from '@/shared/store/useWorkSpaceContext'; import { Team } from '@/shared/type/team'; const LeftSidebar = () => { @@ -37,8 +37,7 @@ const LeftSidebar = () => { const navigate = useNavigate(); - const [clicked, setClicked] = useState('showcase'); - const [isWorkspaceClicked, setIsWorkspaceClicked] = useState(false); + const [selectedId, setSelectedId] = useState('showcase'); const { isOpen: isSettingOpen, close: onSettingClose, toggle } = useOverlay(); const settingRef = useOutsideClick(onSettingClose); @@ -49,43 +48,27 @@ const LeftSidebar = () => { const teamId = localStorage.getItem('teamId'); if (teamId) { setTeamId(teamId); - setClicked(teamId); + setSelectedId(teamId); navigate(`${PATH.ARCHIVING}?teamId=${teamId}`); + } else { + setSelectedId('showcase'); } }, [setTeamId, navigate]); - const handleShowcaseClick = () => { - setClicked('showcase'); - localStorage.removeItem('teamId'); - setIsWorkspaceClicked(false); - navigate(PATH.SHOWCASE); - close(); - }; - - const handleTeamClick = (teamId: string) => { - setClicked(teamId); - setIsWorkspaceClicked(false); // 워크스페이스 클릭 상태 해제 - - setTeamId(teamId); - localStorage.setItem('teamId', teamId); - - navigate(`${PATH.ARCHIVING}?teamId=${teamId}`); + const handleItemClick = (id: string, path: string) => { + setSelectedId(id); + if (id !== 'showcase') { + setTeamId(id); + localStorage.setItem('teamId', id); + } else { + localStorage.removeItem('teamId'); + } + navigate(path); close(); }; const handleWorkspaceClick = () => { - setIsWorkspaceClicked(true); - openModal( - 'workspace', - - - , - handleModalClose - ); - }; - - const handleModalClose = () => { - setIsWorkspaceClicked(false); // 모달 닫을 때 워크스페이스 클릭 상태 해제 + openModal(); }; return ( @@ -95,31 +78,23 @@ const LeftSidebar = () => {