From 633c7496ce3295fee236f5cdb53e08a190c37afd Mon Sep 17 00:00:00 2001 From: suwonthugger <127329855+suwonthugger@users.noreply.github.com> Date: Wed, 20 Nov 2024 23:24:51 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20=EC=84=B8=ED=8C=85=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=EC=BB=A8=ED=85=90=EC=B8=A0=20=ED=8F=B4=EB=8D=94=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1=20=EB=B0=8F=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=9C=84=EC=B9=98=20=EB=B3=80=EA=B2=BD,=20Tabs=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC=20(#2?= =?UTF-8?q?11)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 추후 탭의 항목이 늘어날 수 있다고 생각해서 Tabs로 분리했는데, 지금 보니 좀 오버한게 아닌가 싶네요... --- src/pages/HomePage/components/SideBarHome.tsx | 2 +- .../modalContent/ModalContentSetting.tsx | 58 ------------ .../Setting/ModalContentSetting.tsx | 54 ++++++++++++ .../components}/AccountContent.tsx | 0 .../modalContent/Setting/components/Tabs.tsx | 88 +++++++++++++++++++ .../components}/WorkspaceSettingContent.tsx | 0 6 files changed, 143 insertions(+), 59 deletions(-) delete mode 100644 src/pages/HomePage/components/modalContent/ModalContentSetting.tsx create mode 100644 src/pages/HomePage/components/modalContent/Setting/ModalContentSetting.tsx rename src/pages/HomePage/components/modalContent/{ => Setting/components}/AccountContent.tsx (100%) create mode 100644 src/pages/HomePage/components/modalContent/Setting/components/Tabs.tsx rename src/pages/HomePage/components/modalContent/{ => Setting/components}/WorkspaceSettingContent.tsx (100%) diff --git a/src/pages/HomePage/components/SideBarHome.tsx b/src/pages/HomePage/components/SideBarHome.tsx index de071376..b0a1dc58 100644 --- a/src/pages/HomePage/components/SideBarHome.tsx +++ b/src/pages/HomePage/components/SideBarHome.tsx @@ -9,7 +9,7 @@ import HomeSideBox from '@/components/atoms/HomeSideBox'; import SpaceLogoBtn from '@/components/atoms/SpaceLogoBtn'; import ButtonSVG from '../../../shared/components/ButtonSVG'; -import ModalContentSetting from './modalContent/ModalContentSetting'; +import ModalContentSetting from './modalContent/Setting/ModalContentSetting'; const SideBarHome = () => { const modalRef = useRef(null); diff --git a/src/pages/HomePage/components/modalContent/ModalContentSetting.tsx b/src/pages/HomePage/components/modalContent/ModalContentSetting.tsx deleted file mode 100644 index a8abaa8c..00000000 --- a/src/pages/HomePage/components/modalContent/ModalContentSetting.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { useState } from 'react'; - -import SettingIcon from '@/shared/assets/svgs/setting.svg?react'; -import UserIcon from '@/shared/assets/svgs/user_circle.svg?react'; - -import AccountContent from './AccountContent'; -import WorkSpaceSettingContent from './WorkspaceSettingContent'; - -const ModalContentSetting = () => { - const [activeTab, setActiveTab] = useState<'account' | 'settings'>('account'); - const user = { - name: '홍길동', - email: 'honggildong@example.com', - }; - - const personalWorkspaces = ['개인 프로젝트']; - const teamWorkspaces = ['팀 A 프로젝트', '팀 B 프로젝트']; - - return ( -
-
-
-

사용자 설정

- -
-
-

워크스페이스

- -
-
- -
- {activeTab === 'account' ? ( - - ) : ( - - )} -
-
- ); -}; - -export default ModalContentSetting; diff --git a/src/pages/HomePage/components/modalContent/Setting/ModalContentSetting.tsx b/src/pages/HomePage/components/modalContent/Setting/ModalContentSetting.tsx new file mode 100644 index 00000000..f33803b9 --- /dev/null +++ b/src/pages/HomePage/components/modalContent/Setting/ModalContentSetting.tsx @@ -0,0 +1,54 @@ +import { useState } from 'react'; + +import SettingIcon from '@/shared/assets/svgs/setting.svg?react'; +import UserIcon from '@/shared/assets/svgs/user_circle.svg?react'; + +import AccountContent from './components/AccountContent'; +import Tabs from './components/Tabs'; +import WorkSpaceSettingContent from './components/WorkspaceSettingContent'; + +const ModalContentSetting = () => { + const [activeTab, setActiveTab] = useState('account'); + const user = { + name: '홍길동', + email: 'honggildong@example.com', + }; + + const personalWorkspaces = ['개인 프로젝트']; + const teamWorkspaces = ['팀 A 프로젝트', '팀 B 프로젝트']; + + const handleTabChange = (value: string) => { + setActiveTab(value); + }; + + return ( +
+ + + + + 내 계정 + + + + + + + 설정 + + + + + +
+ {activeTab === 'account' ? ( + + ) : ( + + )} +
+
+ ); +}; + +export default ModalContentSetting; diff --git a/src/pages/HomePage/components/modalContent/AccountContent.tsx b/src/pages/HomePage/components/modalContent/Setting/components/AccountContent.tsx similarity index 100% rename from src/pages/HomePage/components/modalContent/AccountContent.tsx rename to src/pages/HomePage/components/modalContent/Setting/components/AccountContent.tsx diff --git a/src/pages/HomePage/components/modalContent/Setting/components/Tabs.tsx b/src/pages/HomePage/components/modalContent/Setting/components/Tabs.tsx new file mode 100644 index 00000000..dddcb71e --- /dev/null +++ b/src/pages/HomePage/components/modalContent/Setting/components/Tabs.tsx @@ -0,0 +1,88 @@ +import { type ReactNode, createContext, useContext } from 'react'; + +interface TabsContextProps { + value: string; + handleValueChange?: (value: string) => void; +} + +const TabsContext = createContext(null); + +const useTabsContext = () => { + const context = useContext(TabsContext); + if (!context) { + throw new Error('Select 컴포넌트는 Select.Root 내에서 사용되어야 합니다.'); + } + return context; +}; + +interface TabsRootProps { + value: string; + handleValueChange?: (value: string) => void; + children: ReactNode; +} + +const TabsRoot = ({ value, handleValueChange, children }: TabsRootProps) => { + const contextValue: TabsContextProps = { + value, + handleValueChange, + }; + + return {children}; +}; + +interface TabsContentProps { + children: ReactNode; +} + +const TabsContent = ({ children }: TabsContentProps) => { + return ( +
+ {children} +
+ ); +}; + +interface TabsTriggerProps { + children: ReactNode; + value: string; +} + +const TabsTrigger = ({ value, children }: TabsTriggerProps) => { + const context = useTabsContext(); + + return ( + + ); +}; + +interface TabsCategoryProps { + children: ReactNode; + title: string; +} + +const TabsCategory = ({ children, title }: TabsCategoryProps) => { + return ( +
+

{title}

+ {children} +
+ ); +}; + +const Tabs = { + Root: TabsRoot, + Content: TabsContent, + Category: TabsCategory, + Trigger: TabsTrigger, +}; + +export default Tabs; diff --git a/src/pages/HomePage/components/modalContent/WorkspaceSettingContent.tsx b/src/pages/HomePage/components/modalContent/Setting/components/WorkspaceSettingContent.tsx similarity index 100% rename from src/pages/HomePage/components/modalContent/WorkspaceSettingContent.tsx rename to src/pages/HomePage/components/modalContent/Setting/components/WorkspaceSettingContent.tsx