feat: 밋팀 관리 페이지(대시보드, 밋팀, 멤버, 구인 현황, 설정) UI 및 기능 구현

src/App.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Outlet } from 'react-router-dom';
 import { Header } from './components/index';
 import { ScrollToTop } from './utils/index';

src/atom.tsx

@@ -1,5 +1,20 @@
 import { atom } from 'recoil';
 
+export const contentState = atom({
+	key: 'contentState',
+	default: '대시보드',
+});
+
+export const recruitmentState = atom({
+	key: 'recruitmentState',
+	default: true,
+});
+
+export const recruitmentInformationEditState = atom({
+	key: 'recruitmentInformationEditState',
+	default: false,
+});
+
 export const areaState = atom({
 	key: 'areaState1',
 	default: '',

src/components/customSelect/CustomSelect.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import S from './CustomSelect.styled';
 import { useRecoilState } from 'recoil';
 import { areaState, categoryState, fieldState } from '../../atom';
@@ -40,7 +40,7 @@ const CustomSelect = ({ optionData, $isMember, type }: ICustomSelect) => {
 		<S.CustomSelect onClick={onClickhandler} $isMember={$isMember} $show={showOptions}>
 			<S.Label $isSelected={currentValue}>{currentValue}</S.Label>
 			<S.SelectOptions $show={showOptions}>
-				{optionData.map((data: any, index: number) => (
+				{optionData.map((data: string, index: number) => (
 					<S.Option key={index} value={data} onClick={handleOnChangeSelectValue}>
 						{data}
 					</S.Option>

src/components/goBack/GoBack.styled.ts

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import { SlArrowLeft } from 'react-icons/sl';
+
+const GoBackButton = styled(SlArrowLeft)`
+	position: absolute;
+	left: -4.85rem;
+	width: 3rem;
+	height: 4.8rem;
+	cursor: pointer;
+`;
+
+const S = { GoBackButton };
+
+export default S;

src/components/goBack/GoBack.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import S from './GoBack.styled';
+
+const GoBack = () => {
+	return (
+		<>
+			<S.GoBackButton />
+		</>
+	);
+};
+
+export default GoBack;

src/components/index.ts

@@ -13,8 +13,62 @@ import Information from './meeteam/main/information/Information';
 import Member from './meeteam/main/member/Member';
 import MemberProfile from './meeteam/main/member/MemberProfile';
 import MemberRadioBox from './meeteam/main/member/MemberRadioBox';
-import WorkRegistration from './meeteam/main/workRegistration/WorkRegistration';
 import Setting from './meeteam/main/setting/Setting';
+import DashBoard from './meeteam/main/dashBoard/DashBorad';
+import Recruitment from './meeteam/main/recruitment/Recruitment';
+import RequiredInformation from './meeteam/requiredInformation/RequiredInformation';
+import ProgressStatus from './meeteam/progressStatus/ProgressStatus';
+import Title from './meeteam/title/Title';
+import Issue from './meeteam/main/issue/Issue';
+import { issueList, ISSUE_RIGHT_ARROW_ICON } from './meeteam/main/issue/IssueData';
+import Content from './meeteam/Content';
+import {
+	statusList,
+	STATUS_DONE_ICON,
+	STATUS_CLOSE_ICON,
+	STATUS_RIGHT_ARROW_ICON,
+} from './meeteam/progressStatus/StatusData';
+import Link from './meeteam/main/link/Link';
+import DashBoardLink from './meeteam/main/dashBoard/dashBoardLink/DashBoardLink';
+import {
+	memberList,
+	MEMBER_PROFILE_DEFAULT_ICON,
+	MEMBER_PLUS_ICON,
+	MEMBER_PLUS_CARD,
+	MEMBER_BOTTOM_ARROW_ICON,
+} from './meeteam/main/member/MemberData';
+import type { MeeTeamMember } from './meeteam/main/member/MemberData';
+import {
+	meeteamInformation,
+	recruitmentInformation,
+	BOTTOM_ARROW_ICON,
+	TOP_ARROW_BUTTON,
+} from './meeteam/main/information/InformationData';
+import MemberCard from './meeteam/memberCard/MemberCard';
+import MemberContact from './meeteam/memberContact/MemberContact';
+import MeeteamInformation from './meeteam/main/information/subInformation/MeeteamInformation';
+import RecruitmentInformation from './meeteam/main/information/subInformation/RecruitmentInformation';
+import ApplicantView from './meeteam/main/recruitment/applicantView/ApplicantView';
+import {
+	applicantList,
+	SMALL_BOTTOM_ARROW_ICON,
+	SMALL_TOP_ARROW_BUTTON,
+} from './meeteam/main/recruitment/applicantView/ApplicantViewData';
+import type { Applicant } from './meeteam/main/recruitment/applicantView/ApplicantViewData';
+import ApplicantCard from './meeteam/main/recruitment/applicantView/applicantCard/ApplicantCard';
+import RecruitmentDeadLine from './meeteam/main/recruitment/RecruitmentDeadLine';
+import Toggle from './toggle/Toggle';
+import GoBack from './goBack/GoBack';
+import KebabMenu from './kebabMenu/KebabMenu';
+import KebabMenuIcon from './kebabMenuIcon/KebabMenu';
+import OptionMenu from './optionMenu/OptionMenu';
+import RadiusProfile from './profile/RadiusProfile';
+import {
+	linkList,
+	LINK_BOTTOM_ARROW_ICON,
+	LINK_SHORTCUTS_BUTTON,
+} from './meeteam/main/link/LinkData';
+import EssentialInformation from './meeteam/main/information/subInformation/EssentialInformation';
 import Sidebar from './sidebar/Sidebar';
 import Card from './meeteam/card/Card';
 import Tag from './meeteam/tag/Tag';
@@ -40,8 +94,53 @@ export {
 	Member,
 	MemberProfile,
 	MemberRadioBox,
-	WorkRegistration,
 	Setting,
+	DashBoard,
+	Recruitment,
+	RequiredInformation,
+	ProgressStatus,
+	Title,
+	Issue,
+	issueList,
+	ISSUE_RIGHT_ARROW_ICON,
+	Content,
+	statusList,
+	STATUS_DONE_ICON,
+	STATUS_RIGHT_ARROW_ICON,
+	STATUS_CLOSE_ICON,
+	Link,
+	DashBoardLink,
+	memberList,
+	MeeTeamMember,
+	MEMBER_PROFILE_DEFAULT_ICON,
+	MEMBER_PLUS_ICON,
+	MEMBER_PLUS_CARD,
+	MEMBER_BOTTOM_ARROW_ICON,
+	meeteamInformation,
+	recruitmentInformation,
+	BOTTOM_ARROW_ICON,
+	TOP_ARROW_BUTTON,
+	MemberCard,
+	MemberContact,
+	MeeteamInformation,
+	RecruitmentInformation,
+	ApplicantView,
+	applicantList,
+	SMALL_BOTTOM_ARROW_ICON,
+	SMALL_TOP_ARROW_BUTTON,
+	Applicant,
+	ApplicantCard,
+	RecruitmentDeadLine,
+	Toggle,
+	GoBack,
+	KebabMenu,
+	KebabMenuIcon,
+	OptionMenu,
+	RadiusProfile,
+	linkList,
+	LINK_BOTTOM_ARROW_ICON,
+	LINK_SHORTCUTS_BUTTON,
+	EssentialInformation,
 	AddButton,
 	Sidebar,
 	Card,

src/components/kebabMenu/KebabMenu.styled.ts

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+const KebabMenuLayout = styled.div`
+	position: relative;
+	display: flex;
+	margin-left: auto;
+`;
+
+const S = { KebabMenuLayout };
+
+export default S;

src/components/kebabMenu/KebabMenu.tsx

@@ -0,0 +1,43 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { KebabMenuIcon, OptionMenu } from '..';
+import S from './KebabMenu.styled';
+
+interface Option {
+	title: string;
+	optionClickHandler: (e: React.MouseEvent<HTMLLIElement>) => void;
+}
+export type { Option };
+
+const KebabMenu = (props: { options: Option[] }) => {
+	const [showModal, setShowModal] = useState(false);
+
+	const modalRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		const outSideClickHandler = (e: MouseEvent) => {
+			const target = e.target as HTMLDivElement;
+			console.log(target);
+			console.log(modalRef);
+
+			if (showModal && modalRef.current && !modalRef.current.contains(target)) {
+				setShowModal(false);
+			}
+		};
+
+		document.addEventListener('click', outSideClickHandler);
+		return () => document.removeEventListener('click', outSideClickHandler);
+	}, [showModal]);
+
+	const optionClickHandler = () => {
+		setShowModal(prev => !prev);
+	};
+
+	return (
+		<S.KebabMenuLayout ref={modalRef}>
+			<KebabMenuIcon onClick={optionClickHandler} />
+			{showModal && <OptionMenu options={props.options} />}
+		</S.KebabMenuLayout>
+	);
+};
+
+export default KebabMenu;

src/components/kebabMenuIcon/KebabMenu.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import S from './KebabMenuIcon.styled';
+
+const KebabMenuIcon = (props: { onClick: React.MouseEventHandler<HTMLButtonElement> }) => {
+	return (
+		<S.KebabMenuIconLayout type='button' onClick={props.onClick}>
+			<svg
+				xmlns='http://www.w3.org/2000/svg'
+				width='23'
+				height='23'
+				viewBox='0 0 23 23'
+				fill='none'
+			>
+				<path
+					d='M11.25 12.4375C11.7678 12.4375 12.1875 12.0178 12.1875 11.5C12.1875 10.9822 11.7678 10.5625 11.25 10.5625C10.7322 10.5625 10.3125 10.9822 10.3125 11.5C10.3125 12.0178 10.7322 12.4375 11.25 12.4375Z'
+					fill='black'
+				/>
+				<path
+					d='M11.25 5.875C11.7678 5.875 12.1875 5.45527 12.1875 4.9375C12.1875 4.41973 11.7678 4 11.25 4C10.7322 4 10.3125 4.41973 10.3125 4.9375C10.3125 5.45527 10.7322 5.875 11.25 5.875Z'
+					fill='black'
+				/>
+				<path
+					d='M11.25 19C11.7678 19 12.1875 18.5803 12.1875 18.0625C12.1875 17.5447 11.7678 17.125 11.25 17.125C10.7322 17.125 10.3125 17.5447 10.3125 18.0625C10.3125 18.5803 10.7322 19 11.25 19Z'
+					fill='black'
+				/>
+				<path
+					d='M11.25 12.4375C11.7678 12.4375 12.1875 12.0178 12.1875 11.5C12.1875 10.9822 11.7678 10.5625 11.25 10.5625C10.7322 10.5625 10.3125 10.9822 10.3125 11.5C10.3125 12.0178 10.7322 12.4375 11.25 12.4375Z'
+					stroke='black'
+					strokeWidth='1.5'
+					strokeLinecap='round'
+					strokeLinejoin='round'
+				/>
+				<path
+					d='M11.25 5.875C11.7678 5.875 12.1875 5.45527 12.1875 4.9375C12.1875 4.41973 11.7678 4 11.25 4C10.7322 4 10.3125 4.41973 10.3125 4.9375C10.3125 5.45527 10.7322 5.875 11.25 5.875Z'
+					stroke='black'
+					strokeWidth='1.5'
+					strokeLinecap='round'
+					strokeLinejoin='round'
+				/>
+				<path
+					d='M11.25 19C11.7678 19 12.1875 18.5803 12.1875 18.0625C12.1875 17.5447 11.7678 17.125 11.25 17.125C10.7322 17.125 10.3125 17.5447 10.3125 18.0625C10.3125 18.5803 10.7322 19 11.25 19Z'
+					stroke='black'
+					strokeWidth='1.5'
+					strokeLinecap='round'
+					strokeLinejoin='round'
+				/>
+			</svg>
+		</S.KebabMenuIconLayout>
+	);
+};
+
+export default KebabMenuIcon;

src/components/kebabMenuIcon/KebabMenuIcon.styled.ts

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+const KebabMenuIconLayout = styled.button`
+	all: unset;
+	display: flex;
+	cursor: pointer;
+`;
+
+const S = { KebabMenuIconLayout };
+
+export default S;

src/pages/ManagementPage.tsx → src/components/meeteam/Content.tsx

@@ -1,8 +1,10 @@
-import React, { useState } from 'react';
-import { ProgressBar, Menu, Main } from '../components';
+import React from 'react';
+import { Menu, Main } from '..';
+import { useRecoilState } from 'recoil';
+import { contentState } from '../../atom';
 
-const ManagementPage = () => {
-	const [content, setContent] = useState('📁 정보');
+const Content = () => {
+	const [content, setContent] = useRecoilState(contentState);
 	const clickedHandler: React.MouseEventHandler<HTMLButtonElement> = e => {
 		const button = e.target as HTMLButtonElement;
 		if (!button.textContent) {
@@ -13,11 +15,10 @@ const ManagementPage = () => {
 
 	return (
 		<>
-			<ProgressBar />
 			<Menu menu={content} clickedHandler={clickedHandler} />
 			<Main content={content} />
 		</>
 	);
 };
 
-export default ManagementPage;
+export default Content;