style: 세팅 컴포넌트 구현

src/pages/HomePage/components/SideBarHome.tsx

@@ -1,12 +1,21 @@
-import HomeSideBox from '@/components/atoms/HomeSideBox';
-import SpaceLogoBtn from '@/components/atoms/SpaceLogoBtn';
+import { useRef } from 'react';
+
+import ModalWrapper, { ModalWrapperRef } from '@/shared/components/ModalWrapper';
 
 import GearIcon from '@/shared/assets/svgs/gear.svg?react';
 import LogoIcon from '@/shared/assets/svgs/logo_icon.svg?react';
 
+import HomeSideBox from '@/components/atoms/HomeSideBox';
+import SpaceLogoBtn from '@/components/atoms/SpaceLogoBtn';
+
 import ButtonSVG from '../../../shared/components/ButtonSVG';
+import ModalContentSetting from './modalContent/ModalContentSetting';
 
 const SideBarHome = () => {
+	const modalRef = useRef<ModalWrapperRef>(null);
+	const openSettings = () => {
+		modalRef.current?.open();
+	};
 	return (
 		<HomeSideBox>
 			<div>
@@ -15,10 +24,14 @@ const SideBarHome = () => {
 				</SpaceLogoBtn>
 			</div>
 			<div>
-				<ButtonSVG>
+				<ButtonSVG onClick={openSettings}>
 					<GearIcon className="rounded-[1.6rem] hover:bg-gray-bg-04 active:bg-gray-bg-05" />
 				</ButtonSVG>
 			</div>
+
+			<ModalWrapper ref={modalRef} backdrop={true}>
+				<ModalContentSetting />
+			</ModalWrapper>
 		</HomeSideBox>
 	);
 };

src/pages/HomePage/components/modalContent/AccountContent.tsx

@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+
+import ButtonSettingSaved from '@/shared/components/ButtonSettingSaved';
+import ButtonStatusToggle from '@/shared/components/ButtonStatusToggle';
+
+import ArrowRightIcon from '@/shared/assets/svgs/arrow_right.svg?react';
+import MailIcon from '@/shared/assets/svgs/mail.svg?react';
+
+interface User {
+	name: string;
+	email: string;
+}
+
+interface AccountContentProps {
+	user: User;
+}
+
+const AccountContent = ({ user }: AccountContentProps) => {
+	const [isToggleOn, setIsToggleOn] = useState(false);
+	const [userName, setUserName] = useState(user.name);
+
+	const handleToggle = () => setIsToggleOn((prev) => !prev);
+
+	const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setUserName(e.target.value);
+	};
+
+	return (
+		<>
+			<p className="subhead-bold-22 w-[92rem] border-b-[0.1rem] border-gray-bg-05 py-[1.5rem] text-white">내 프로필</p>
+			<div className="flex w-[92rem] gap-[2rem] py-[2rem]">
+				<div className="h-[7.5rem] w-[7.5rem] rounded-full bg-gray-bg-07" />
+				<div className="flex flex-col items-center gap-[0.5rem]">
+					<input
+						type="text"
+						value={userName}
+						onChange={handleNameChange}
+						className="subhead-med-18 flex h-[4.6rem] w-[25rem] items-center rounded-[0.5rem] bg-gray-bg-03 p-[1rem] text-white focus:outline-none"
+					/>
+					<div className="flex w-[25rem] items-center gap-[0.5rem]">
+						<MailIcon />
+						<div className="body-reg-16 text-gray-04">{user.email}</div>
+					</div>
+				</div>
+			</div>
+			<p className="subhead-bold-22 h-[6.1rem] w-[92rem] border-b-[0.1rem] border-gray-bg-05 py-[1.5rem] text-white">
+				내 알림
+			</p>
+			<div className="flex h-[9.2rem] w-[92rem] items-center justify-between py-[2rem]">
+				<div className="flex flex-col gap-[0.5rem]">
+					<p className="subhead-semibold-18 text-white">데스크톱 푸시 알림</p>
+					<p className="body-reg-16 text-gray-04">데스크톱 앱에서 작성의 푸시 알림을 즉시 받으세요.</p>
+				</div>
+				<ButtonStatusToggle isToggleOn={isToggleOn} onToggle={handleToggle} />
+			</div>
+			<p className="subhead-bold-22 mt-[3rem] h-[6.1rem] w-[92rem] border-b-[0.1rem] border-gray-bg-05 py-[1.5rem] text-white">
+				지원
+			</p>
+
+			<div className="flex w-[92rem] items-center">
+				<div className="flex h-[9.2rem] w-[92rem] flex-col gap-[0.5rem] py-[2rem]">
+					<p className="subhead-semibold-18 text-white">모든 기기에서 로그아웃</p>
+					<p className="body-reg-16 text-gray-04">본 기기를 포함한 모든 기기에서 로그아웃합니다.</p>
+				</div>
+				<ArrowRightIcon className="rounded-[1.6rem] hover:bg-gray-bg-05" />
+			</div>
+
+			<div className="flex w-[92rem] items-center">
+				<div className="flex h-[9.2rem] w-[92rem] flex-col gap-[0.5rem] py-[2rem]">
+					<p className="subhead-semibold-18 text-error-01">내 계정 삭제</p>
+					<p className="body-reg-16 text-gray-04">본 기기를 포함한 모든 기기에서 로그아웃합니다.</p>
+				</div>
+				<ArrowRightIcon className="rounded-[1.6rem] hover:bg-gray-bg-05" />
+			</div>
+
+			<div className="flex h-[9.2rem] w-[92rem] justify-end pt-[4rem]">
+				<ButtonSettingSaved />
+			</div>
+		</>
+	);
+};
+
+export default AccountContent;

src/pages/HomePage/components/modalContent/ModalContentSetting.tsx

@@ -0,0 +1,58 @@
+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: '[email protected]',
+	};
+
+	const personalWorkspaces = ['개인 프로젝트'];
+	const teamWorkspaces = ['팀 A 프로젝트', '팀 B 프로젝트'];
+
+	return (
+		<div className="flex h-[80rem] w-[130rem] rounded-[1.4rem] bg-gray-bg-04">
+			<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]">
+				<div>
+					<p className="p-[1rem] font-semibold text-gray-04">사용자 설정</p>
+					<button
+						onClick={() => setActiveTab('account')}
+						className={`subhead-med-18 flex h-[4.4rem] w-[28rem] items-center gap-[0.5rem] rounded-[0.2rem] p-[1rem] text-left ${
+							activeTab === 'account' ? 'bg-gray-bg-05 text-white' : 'bg-gray-bg-03 text-white'
+						}`}
+					>
+						<UserIcon />내 계정
+					</button>
+				</div>
+				<div>
+					<p className="p-[1rem] font-semibold text-gray-04">워크스페이스</p>
+					<button
+						onClick={() => setActiveTab('settings')}
+						className={`subhead-med-18 flex h-[4.4rem] w-[28rem] items-center gap-[0.5rem] rounded-[0.2rem] p-[1rem] text-left ${
+							activeTab === 'settings' ? 'bg-gray-bg-05 text-white' : 'bg-gray-bg-03 text-white'
+						}`}
+					>
+						<SettingIcon />
+						설정
+					</button>
+				</div>
+			</div>
+
+			<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/WorkspaceSettingContent.tsx

@@ -0,0 +1,42 @@
+import ButtonSettingSaved from '@/shared/components/ButtonSettingSaved';
+
+interface WorkSpaceSettingContentProps {
+	personalWorkspaces: string[];
+	teamWorkspaces: string[];
+}
+
+const WorkSpaceSettingContent = ({ personalWorkspaces, teamWorkspaces }: WorkSpaceSettingContentProps) => (
+	<>
+		<p className="subhead-bold-22 w-[92rem] border-b-[0.1rem] border-gray-bg-05 py-[1.5rem] text-white">
+			내 워크스페이스
+		</p>
+
+		{personalWorkspaces.map((name, index) => (
+			<div key={index} className="flex h-[11rem] w-[92rem] items-center gap-[2rem] py-[2rem]">
+				<div className="h-[7.5rem] w-[7.5rem] rounded-full bg-gray-bg-07" />
+				<div className="subhead-med-18 flex h-[4.6rem] w-[25rem] items-center rounded-[0.5rem] bg-gray-bg-03 p-[1rem] text-white">
+					{name}
+				</div>
+			</div>
+		))}
+
+		<p className="subhead-bold-22 mt-[4rem] w-[92rem] border-b-[0.1rem] border-gray-bg-05 py-[1.5rem] text-white">
+			팀 워크스페이스
+		</p>
+
+		{teamWorkspaces.map((name, index) => (
+			<div key={index} className="flex h-[11rem] w-[92rem] items-center gap-[2rem] py-[2rem]">
+				<div className="h-[7.5rem] w-[7.5rem] rounded-full bg-gray-bg-07" />
+				<div className="subhead-med-18 flex h-[4.6rem] w-[25rem] items-center rounded-[0.5rem] bg-gray-bg-03 p-[1rem] text-white">
+					{name}
+				</div>
+			</div>
+		))}
+
+		<div className="flex h-[9.2rem] justify-end pt-[17.6rem]">
+			<ButtonSettingSaved />
+		</div>
+	</>
+);
+
+export default WorkSpaceSettingContent;

src/shared/components/ButtonSettingSaved.tsx

@@ -0,0 +1,12 @@
+const ButtonSettingSaved = ({ disabled = false, ...props }) => {
+	const defaultStyle =
+		'subhead-semibold-20 flex items-center justify-center rounded-[0.8rem] w-[19rem] h-[5.2rem] px-[4rem] py-[1.4rem]';
+	const buttonStyle = disabled ? ' bg-mint-02 text-gray-01 active:bg-main-gra-press' : ' bg-gray-bg-06 text-gray-05';
+	return (
+		<button className={defaultStyle + buttonStyle} disabled={disabled} {...props}>
+			변경사항 저장
+		</button>
+	);
+};
+
+export default ButtonSettingSaved;