Merge pull request #100 from MeeTeamNumdle/feature/#71_add_profile_ed…

…it_page

feat: 프로필 편집 페이지 UI 및 기능 및 API 연동 구현

package.json

@@ -1,57 +1,56 @@
 {
-	"name": "meeteam",
-	"private": true,
-	"version": "0.0.0",
-	"type": "module",
-	"scripts": {
-		"dev": "vite",
-		"build": "tsc && vite build",
-		"lint": "eslint './src/**/*.{ts,tsx,js,jsx}'",
-		"lint:fix": "eslint --fix './src/**/*.{ts,tsx,js,jsx}'",
-		"preview": "vite preview",
-		"cypress:open": "cypress open"
-	},
-	"dependencies": {
-		"@tanstack/react-query": "^5.17.19",
-		"axios": "^1.6.6",
-		"dompurify": "^3.0.11",
-		"dotenv": "^16.4.0",
-		"framer-motion": "^11.0.2",
-		"qs": "^6.12.0",
-		"react": "^18.2.0",
-		"react-datepicker": "^4.21.0",
-		"react-dom": "^18.2.0",
-		"react-hook-form": "^7.49.3",
-		"react-icons": "^4.11.0",
-		"react-quill": "^2.0.0",
-		"react-router-dom": "^6.18.0",
-		"recoil": "^0.7.7",
-		"recoil-persist": "^5.1.0",
-		"styled-components": "^6.1.1",
-		"vite-plugin-svgr": "^4.2.0"
-	},
-	"devDependencies": {
-		"@hookform/devtools": "^4.3.1",
-		"@tanstack/react-query-devtools": "^5.24.8",
-		"@types/cypress": "^1.1.3",
-		"@types/dompurify": "^3.0.5",
-		"@types/node": "^20.11.6",
-		"@types/qs": "^6.9.14",
-		"@types/react": "^18.2.15",
-		"@types/react-datepicker": "^4.19.3",
-		"@types/react-dom": "^18.2.7",
-		"@typescript-eslint/eslint-plugin": "^6.10.0",
-		"@typescript-eslint/parser": "^6.10.0",
-		"@vitejs/plugin-react-swc": "^3.3.2",
-		"cypress": "^13.7.0",
-		"eslint": "^8.53.0",
-		"eslint-config-prettier": "^9.0.0",
-		"eslint-plugin-prettier": "^5.0.1",
-		"eslint-plugin-react": "^7.33.2",
-		"eslint-plugin-react-hooks": "^4.6.0",
-		"eslint-plugin-react-refresh": "^0.4.3",
-		"prettier": "^3.0.3",
-		"typescript": "^5.0.2",
-		"vite": "^4.4.5"
-	}
+  "name": "meeteam",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint './src/**/*.{ts,tsx,js,jsx}'",
+    "lint:fix": "eslint --fix './src/**/*.{ts,tsx,js,jsx}'",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@mui/material": "^5.15.14",
+    "@mui/x-date-pickers": "^7.1.0",
+    "@tanstack/react-query": "^5.17.19",
+    "axios": "^1.6.6",
+    "date-fns": "^3.6.0",
+    "dompurify": "^2.5.0",
+    "dotenv": "^16.4.0",
+    "framer-motion": "^11.0.2",
+    "react": "^18.2.0",
+    "react-datepicker": "^4.21.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.49.3",
+    "react-icons": "^4.11.0",
+    "react-quill": "^2.0.0",
+    "react-router-dom": "^6.18.0",
+    "recoil": "^0.7.7",
+    "recoil-persist": "^5.1.0",
+    "styled-components": "^6.1.1",
+    "vite-plugin-svgr": "^4.2.0"
+  },
+  "devDependencies": {
+    "@hookform/devtools": "^4.3.1",
+    "@tanstack/react-query-devtools": "^5.24.8",
+    "@types/node": "^20.11.6",
+    "@types/react": "^18.2.15",
+    "@types/react-datepicker": "^4.19.3",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "cypress": "^13.7.3",
+    "eslint": "^8.53.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "prettier": "^3.0.3",
+    "qs": "^6.12.1",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
+  }
 }

src/App.tsx

@@ -5,21 +5,26 @@ import { ScrollToTop } from './utils/index';
 import { RecoilRoot } from 'recoil';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+import ko from 'date-fns/locale/ko';
 
 const queryClient = new QueryClient();
 
 function App() {
 	return (
-		<QueryClientProvider client={queryClient}>
-			<ReactQueryDevtools initialIsOpen={false} />
-			<RecoilRoot>
-				<Header />
-				<main>
-					<ScrollToTop />
-					<Outlet />
-				</main>
-			</RecoilRoot>
-		</QueryClientProvider>
+		<LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={ko}>
+			<QueryClientProvider client={queryClient}>
+				<ReactQueryDevtools initialIsOpen={false} />
+				<RecoilRoot>
+					<Header />
+					<main>
+						<ScrollToTop />
+						<Outlet />
+					</main>
+				</RecoilRoot>
+			</QueryClientProvider>
+		</LocalizationProvider>
 	);
 }
 

src/assets/index.ts

@@ -16,6 +16,19 @@ import { DATE_ICON } from './DateIcon';
 import DefaultProfileImage from './DefaultProfileImage.svg';
 import DefaultPortfolioImage from './DefaultPortfolioImage.svg';
 import Search from './Search.svg';
+import ArrowBottom from './ArrowBottom.svg';
+import ArrowTop from './ArrowTop.svg';
+import GrayPhone from './GrayPhone.svg';
+import BlackPhone from './BlackPhone.svg';
+import GrayEmail from './GrayEmail.svg';
+import BlackEmail from './BlackEmail.svg';
+import Add from './Add.svg';
+import Delete from './Delete.svg';
+import GrayCalendar from './GrayCalendar.svg';
+import BlackCalendar from './BlackCalendar.svg';
+import Close from './Close.svg';
+import AddProfile from './AddProfile.svg';
+import BluePlus from './BluePlus.svg';
 import FilledBookmark from './FilledBookmark.svg';
 import UnfilledBookmark from './UnfilledBookmark.svg';
 import Edit from './Edit.svg';
@@ -49,6 +62,19 @@ export {
 	DefaultProfileImage,
 	DefaultPortfolioImage,
 	Search,
+	ArrowBottom,
+	ArrowTop,
+	GrayPhone,
+	BlackPhone,
+	GrayEmail,
+	BlackEmail,
+	Add,
+	Delete,
+	GrayCalendar,
+	BlackCalendar,
+	Close,
+	AddProfile,
+	BluePlus,
 	FilledBookmark,
 	UnfilledBookmark,
 	DATE_ICON,

src/atom.tsx

@@ -182,3 +182,8 @@ export const applicantFilter = atom({
 	key: 'applicantFilter',
 	default: null as number | null,
 });
+
+export const imageNameState = atom({
+	key: 'imageNameState',
+	default: '',
+});

src/components/button/AddBtn.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import S from './Button.styled';
+import { Add } from '../../assets';
+
+const AddBtn = ({ handleClick }: { handleClick: React.MouseEventHandler<HTMLButtonElement> }) => {
+	return (
+		<S.IconButtonLayout type='button' $add onClick={handleClick}>
+			<img src={Add} alt='addButton' />
+		</S.IconButtonLayout>
+	);
+};
+
+export default AddBtn;

src/components/button/AddFormBtn.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import S from './Button.styled';
+import { BluePlus } from '../../assets';
+
+interface AddFormBtn {
+	title: string;
+	handleClick: React.MouseEventHandler<HTMLButtonElement>;
+}
+
+const AddFormBtn = ({ title, handleClick }: AddFormBtn) => {
+	return (
+		<S.FormButtonLayout type='button' onClick={handleClick}>
+			<img src={BluePlus} alt='addButton' />
+			{title}
+		</S.FormButtonLayout>
+	);
+};
+
+export default AddFormBtn;