refactor: 세팅모달컨텐츠 폴더 생성 및 컴포넌트 위치 변경, Tabs 컴포넌트 분리 (#211)

- 추후 탭의 항목이 늘어날 수 있다고 생각해서 Tabs로 분리했는데, 지금 보니 좀 오버한게 아닌가 싶네요...

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<ModalWrapperRef>(null);

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<string>('account');
+	const user = {
+		name: '홍길동',
+		email: '[email protected]',
+	};
+
+	const personalWorkspaces = ['개인 프로젝트'];
+	const teamWorkspaces = ['팀 A 프로젝트', '팀 B 프로젝트'];
+
+	const handleTabChange = (value: string) => {
+		setActiveTab(value);
+	};
+
+	return (
+		<div className="flex h-[80rem] w-[130rem] rounded-[1.4rem] bg-gray-bg-04">
+			<Tabs.Root value={activeTab} handleValueChange={handleTabChange}>
+				<Tabs.Content>
+					<Tabs.Category title="사용자 설정">
+						<Tabs.Trigger value="account">
+							<UserIcon />내 계정
+						</Tabs.Trigger>
+					</Tabs.Category>
+
+					<Tabs.Category title="워크스페이스">
+						<Tabs.Trigger value="settings">
+							<SettingIcon />
+							설정
+						</Tabs.Trigger>
+					</Tabs.Category>
+				</Tabs.Content>
+			</Tabs.Root>
+
+			<div className="flex flex-col p-[4rem]">
+				{activeTab === 'account' ? (
+					<AccountContent user={user} />
+				) : (
+					<WorkSpaceSettingContent personalWorkspaces={personalWorkspaces} teamWorkspaces={teamWorkspaces} />
+				)}
+			</div>
+		</div>
+	);
+};
+
+export default ModalContentSetting;

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<TabsContextProps | null>(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 <TabsContext.Provider value={contextValue}>{children}</TabsContext.Provider>;
+};
+
+interface TabsContentProps {
+	children: ReactNode;
+}
+
+const TabsContent = ({ children }: TabsContentProps) => {
+	return (
+		<div className="flex w-[30rem] flex-col gap-[3rem] rounded-bl-[1.4rem] rounded-tl-[1.4rem] bg-gray-bg-03 px-[1rem] py-[2rem]">
+			{children}
+		</div>
+	);
+};
+
+interface TabsTriggerProps {
+	children: ReactNode;
+	value: string;
+}
+
+const TabsTrigger = ({ value, children }: TabsTriggerProps) => {
+	const context = useTabsContext();
+
+	return (
+		<button
+			className={`subhead-med-18 flex h-[4.4rem] w-[28rem] items-center gap-[0.5rem] rounded-[0.2rem] p-[1rem] text-left ${
+				context?.value === value ? 'bg-gray-bg-05 text-white' : 'bg-gray-bg-03 text-white'
+			}`}
+			onClick={() => {
+				if (context?.handleValueChange) context?.handleValueChange(value);
+			}}
+		>
+			{children}
+		</button>
+	);
+};
+
+interface TabsCategoryProps {
+	children: ReactNode;
+	title: string;
+}
+
+const TabsCategory = ({ children, title }: TabsCategoryProps) => {
+	return (
+		<div>
+			<p className="p-[1rem] font-semibold text-gray-04">{title}</p>
+			{children}
+		</div>
+	);
+};
+
+const Tabs = {
+	Root: TabsRoot,
+	Content: TabsContent,
+	Category: TabsCategory,
+	Trigger: TabsTrigger,
+};
+
+export default Tabs;