- 회원가입/로그인
-
-
-
{
- setClickLanguageDropdown(!clickLanguageDropdown);
+ if (userInfo.isLogin) {
+ setUserInfo({});
+ localStorage.removeItem("access_token");
+ // TODO 로그아웃 API 요청 보내기
+ } else {
+ setClickLoginButton(true);
+ }
}}
>
- {"KR"}
- {clickLanguageDropdown ? "⌃" : "⌄"}
- {clickLanguageDropdown && (
- <>
- - KR
- - EN
-
- )}
-
-
+ {userInfo.isLogin ? "로그아웃" : "로그인"}
+
+
diff --git a/src/components/Navigation/styles.js b/src/components/Navigation/styles.js
index 73264f0..df9a8ce 100644
--- a/src/components/Navigation/styles.js
+++ b/src/components/Navigation/styles.js
@@ -2,30 +2,31 @@ import styled from "styled-components";
export const Container = styled.div`
background-color: #7cfbcb;
- padding: 8px;
`;
export const Box = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
+ height: 76px;
`;
export const Title = styled.label`
+ color: #000000;
font-size: 36px;
font-weight: 900;
- margin-left: 50px;
+ margin-left: 160px;
cursor: pointer;
`;
export const MenuBox = styled.div`
- margin-left: 100px;
+ display: flex;
+ gap: 120px;
`;
export const MenuItem = styled.label`
font-size: 18px;
font-weight: 700;
- margin-left: 50px;
cursor: pointer;
`;
@@ -33,13 +34,14 @@ export const LoginButton = styled.button`
font-size: 24px;
all: unset;
background-color: white;
- padding: 10px 22px;
+ padding: 10px 18px;
border-radius: 12px;
cursor: pointer;
`;
export const LoginButtonLabel = styled.label`
- font-size: 14px;
+ color: #000000;
+ font-size: 16px;
font-weight: 700;
cursor: pointer;
`;
diff --git a/src/components/PagenationComponent/pagenationComponent.js b/src/components/PagenationComponent/pagenationComponent.js
new file mode 100644
index 0000000..18bc3cc
--- /dev/null
+++ b/src/components/PagenationComponent/pagenationComponent.js
@@ -0,0 +1,53 @@
+import React from "react";
+import styled from "styled-components";
+
+// Styled-components for the pagination
+const PaginationWrapper = styled.div`
+ display: flex;
+ list-style: none;
+`;
+
+const PageItem = styled.div`
+ border: 1px solid #ddd;
+ border-radius: 10px;
+ padding: 8px 12px;
+ margin: 4px;
+ cursor: pointer;
+ background-color: ${(props) => (props.isActive ? "#2F80ED" : "white")};
+ color: ${(props) => (props.isActive ? "white" : "black")};
+
+ &:hover {
+ background-color: ${(props) => (props.isActive ? "#2F80ED" : "#f0f0f0")};
+ }
+`;
+
+// React component for the pagination
+const PaginationComponent = ({ pages, currentPage, onPageChange }) => {
+ // Create the page numbers based on the 'pages' prop
+ const pageNumbers = [];
+ for (let number = 1; number <= pages; number++) {
+ pageNumbers.push(
+
onPageChange(number)}
+ >
+ {number}
+ ,
+ );
+ }
+
+ return (
+
+ {currentPage > 1 && (
+ onPageChange(currentPage - 1)}>{"<"}
+ )}
+ {pageNumbers}
+ {currentPage < pages && (
+ onPageChange(currentPage + 1)}>{">"}
+ )}
+
+ );
+};
+
+export default PaginationComponent;
diff --git a/src/components/SideNavigation/jobPosition.js b/src/components/SideNavigation/jobPosition.js
new file mode 100644
index 0000000..07e09da
--- /dev/null
+++ b/src/components/SideNavigation/jobPosition.js
@@ -0,0 +1,70 @@
+export const jobCategories = [
+ {
+ kind: "design",
+ mainCategory: "디자인",
+ subCategories: [
+ "UI/UX 디자이너",
+ "일러스트/캐릭터 디자이너",
+ "영상/모션 그래픽 디자이너",
+ "제품/패키지 디자이너",
+ "인테리어 디자이너",
+ "패션 디자이너",
+ "공예",
+ "그래픽 디자이너",
+ ],
+ },
+ {
+ kind: "development",
+ mainCategory: "개발",
+ subCategories: [
+ "프론트엔드",
+ "백엔드",
+ "AI 데이터 엔지니어",
+ "데브옵스 개발자",
+ "보안 전문가",
+ "게임 개발자",
+ "임베디드 개발",
+ "DBA",
+ ],
+ },
+ {
+ kind: "planning",
+ mainCategory: "기획",
+ subCategories: ["기획"],
+ },
+ {
+ kind: "media",
+ mainCategory: "미디어",
+ subCategories: [
+ "영상 편집",
+ "영상 촬영",
+ "PD",
+ "사진 작가",
+ "음향 엔지니어",
+ ],
+ },
+ {
+ kind: "marketing",
+ mainCategory: "마케팅",
+ subCategories: ["관리", "홍보", "컨설팅"],
+ },
+ {
+ kind: "translation",
+ mainCategory: "통번역",
+ subCategories: [
+ "영어",
+ "일본어",
+ "중국어",
+ "스페인어",
+ "아랍어",
+ "힌디어",
+ "프랑스어",
+ "기타",
+ ],
+ },
+ {
+ kind: "other",
+ mainCategory: "기타",
+ subCategories: ["기타"],
+ },
+];
diff --git a/src/components/SideNavigation/sideNavigation.js b/src/components/SideNavigation/sideNavigation.js
new file mode 100644
index 0000000..679e4fa
--- /dev/null
+++ b/src/components/SideNavigation/sideNavigation.js
@@ -0,0 +1,91 @@
+import React, { useState } from "react";
+import {
+ Checkbox,
+ Item,
+ ItemList,
+ NavHeader,
+ Navigation,
+ ResetButton,
+ Section,
+ SectionTitle,
+ SectionTitleRow,
+ Title,
+} from "./styles";
+import { jobCategories } from "./jobPosition";
+
+const SideNavigation = () => {
+ const [sectionEnabled, setSectionEnabled] = useState({
+ design: false,
+ development: false,
+ planning: false,
+ media: false,
+ marketing: false,
+ translation: false,
+ other: false,
+ });
+ const [subCategoryEnabled, setSubCategoryEnabled] = useState({});
+
+ const handleSectionCheckbox = (section) => {
+ setSectionEnabled((prev) => ({ ...prev, [section]: !prev[section] }));
+ };
+
+ return (
+
+
+ 필터
+
+ setSectionEnabled({
+ design: false,
+ development: false,
+ planning: false,
+ media: false,
+ marketing: false,
+ translation: false,
+ other: false,
+ })
+ }
+ >
+ 초기화
+
+
+
+ {/* 모집기간 섹션 */}
+
+ 모집 기간
+
+ 직종 분류
+ {jobCategories.map((category) => (
+
+
+ handleSectionCheckbox(category.kind)}
+ />
+ {category.mainCategory}
+
+
+ {category.subCategories.map((subCategory, index) => (
+ -
+ handleSubCategoryCheckbox(subCategoryName)}
+ />
+ {subCategory}
+
+ ))}
+
+
+ ))}
+
+ );
+};
+
+export default SideNavigation;
diff --git a/src/components/SideNavigation/styles.js b/src/components/SideNavigation/styles.js
new file mode 100644
index 0000000..9c00284
--- /dev/null
+++ b/src/components/SideNavigation/styles.js
@@ -0,0 +1,73 @@
+import styled from "styled-components";
+
+export const Navigation = styled.nav`
+ background-color: #ffffff;
+ border-radius: 12px;
+ border: #c9c9c9 solid 2px;
+ padding: 20px;
+ width: 300px;
+`;
+
+export const NavHeader = styled.div`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 20px;
+`;
+
+export const Title = styled.h3`
+ border-top: 1px solid #eee;
+ padding-top: 20px;
+ font-size: 1.25rem;
+ color: #333;
+ &:first-of-type {
+ border-top: none;
+ padding-top: 0;
+ }
+`;
+
+export const ResetButton = styled.button`
+ background: none;
+ border: none;
+ cursor: pointer;
+ color: #007bff;
+ font-size: 1rem;
+`;
+
+export const Section = styled.section`
+ padding-top: 20px;
+`;
+
+export const SectionTitleRow = styled.div`
+ display: flex;
+ align-items: center;
+ margin-bottom: 10px;
+`;
+
+export const SectionTitle = styled.h4`
+ color: #333;
+ font-size: 18px;
+ margin: 0;
+`;
+
+export const Checkbox = styled.input.attrs({ type: "checkbox" })`
+ margin-right: 10px;
+ width: 16px;
+ height: 16px;
+ cursor: pointer;
+`;
+
+export const ItemList = styled.ul`
+ list-style: none;
+ padding-left: 0;
+`;
+
+export const Item = styled.li`
+ font-size: 18px;
+ color: #333;
+ display: flex;
+ align-items: center;
+ margin-bottom: 8px;
+ margin-left: 20px;
+ cursor: pointer;
+`;
diff --git a/src/components/SocialLoginModal/SocialLoginModal.js b/src/components/SocialLoginModal/SocialLoginModal.js
new file mode 100644
index 0000000..6c76ed1
--- /dev/null
+++ b/src/components/SocialLoginModal/SocialLoginModal.js
@@ -0,0 +1,52 @@
+import { ReactComponent as Vector } from "../../assets/icons/Vector.svg";
+
+import {
+ ContainerOut,
+ Container,
+ Explanation,
+ Title,
+ NaverButton,
+ GoogleButton,
+ KakaoButton,
+ ExitButton,
+} from "./styles";
+
+const SocialLoginModal = ({ setClickLoginButton }) => {
+ const loginWithKakao = () => {
+ window.location.href = "/oauth2/authorization/kakao";
+ };
+
+ const loginWithGoogle = () => {
+ // window.location.href = "http://e-um.site/api/oauth2/google";
+ window.location.href = "http://localhost:8080/api/oauth2/google";
+ };
+
+ const loginWithNaver = () => {
+ window.location.href = "/oauth2/authorization/naver";
+ };
+
+ return (
+
+
+
+ 이음
+ 간편하게 시작하는 회원가입
+
+ 카카오톡으로 진행하기
+
+ 구글로 진행하기
+ 네이버로 진행하기
+ {
+ setClickLoginButton(false);
+ }}
+ >
+
+
+
+
+
+ );
+};
+
+export default SocialLoginModal;
diff --git a/src/components/SocialLoginModal/styles.js b/src/components/SocialLoginModal/styles.js
new file mode 100644
index 0000000..a527f5e
--- /dev/null
+++ b/src/components/SocialLoginModal/styles.js
@@ -0,0 +1,88 @@
+import styled from "styled-components";
+
+export const ContainerOut = styled.div`
+ display: flex;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.6);
+ align-items: center;
+ justify-content: center;
+`;
+
+export const Container = styled.div`
+ position: absolute;
+ width: 688px;
+ height: 590px;
+ border-radius: 56px;
+ background-color: #ffffff;
+`;
+
+export const Title = styled.label`
+ display: block;
+ font-size: 65px;
+ font-weight: 800;
+ margin-top: 76.01px;
+`;
+
+export const Explanation = styled.label`
+ display: block;
+ font-size: 20px;
+ font-weight: 400;
+`;
+
+export const KakaoButton = styled.button`
+ position: absolute;
+ font-size: 24px;
+ font-weight: 600;
+ top: 246.87px;
+ left: 102.42px;
+ width: 480px;
+ height: 82px;
+ border-radius: 12px;
+ background-color: #fee500;
+ color: black;
+ border: none;
+ cursor: pointer;
+`;
+export const GoogleButton = styled.button`
+ position: absolute;
+ font-size: 24px;
+ font-weight: 600;
+ top: 347.08px;
+ left: 102.42px;
+ width: 480px;
+ height: 82px;
+ border-radius: 12px;
+ background-color: #1c48ff;
+ color: white;
+ border: none;
+ cursor: pointer;
+`;
+export const NaverButton = styled.button`
+ position: absolute;
+ font-size: 24px;
+ font-weight: 600;
+ top: 447.28px;
+ left: 102.42px;
+ width: 480px;
+ height: 82px;
+ border-radius: 12px;
+ background-color: #5ab335;
+ color: white;
+ border: none;
+ cursor: pointer;
+`;
+
+export const ExitButton = styled.button`
+ position: absolute;
+ top: 20px;
+ left: 603px;
+ width: 61px;
+ height: 61px;
+ background-color: #ffffff;
+ border: none;
+ cursor: pointer;
+`;
diff --git a/src/components/SubNavigation/menuButton.js b/src/components/SubNavigation/menuButton.js
new file mode 100644
index 0000000..adae341
--- /dev/null
+++ b/src/components/SubNavigation/menuButton.js
@@ -0,0 +1,18 @@
+import { IconBox } from "./styles";
+
+const MenuButton = (props) => {
+ return (
+
+
+ 
+
+
+
+ );
+};
+
+export default MenuButton;
diff --git a/src/components/SubNavigation/styles.js b/src/components/SubNavigation/styles.js
new file mode 100644
index 0000000..44b8ec6
--- /dev/null
+++ b/src/components/SubNavigation/styles.js
@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+export const IconBox = styled.div`
+ display: flex;
+ justify-content: center;
+ width: 100px;
+ height: 100px;
+ border-radius: 24px;
+ border: 1px solid #c9c9c9;
+ box-shadow: 4px 10px 30px 0px #00000008;
+ margin-bottom: 16px;
+`;
diff --git a/src/components/SubNavigation/subNavigation.js b/src/components/SubNavigation/subNavigation.js
new file mode 100644
index 0000000..cb7980a
--- /dev/null
+++ b/src/components/SubNavigation/subNavigation.js
@@ -0,0 +1,17 @@
+import MenuButton from "./menuButton";
+
+const SubNavigation = () => {
+ return (
+
+ );
+};
+
+export default SubNavigation;
diff --git a/src/components/WithdrawalModal/styles.js b/src/components/WithdrawalModal/styles.js
new file mode 100644
index 0000000..8f4eec0
--- /dev/null
+++ b/src/components/WithdrawalModal/styles.js
@@ -0,0 +1,69 @@
+import styled from "styled-components";
+
+export const ContainerOut = styled.div`
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.6);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 100;
+`;
+
+export const Containter = styled.div`
+ position: relative;
+ width: 516px;
+ height: 524px;
+ border-radius: 42px;
+ background-color: #ffffff;
+ display: flex;
+ justify-content: center;
+`;
+
+export const Title = styled.label`
+ position: absolute;
+ top: 231px;
+ font-size: 32px;
+ font-weight: 700;
+`;
+
+export const Explanation = styled.label`
+ position: absolute;
+ top: 297px;
+ font-size: 18px;
+ font-weight: 500;
+ color: #8f8f8f;
+`;
+
+export const CannelButton = styled.button`
+ position: absolute;
+ top: 387px;
+ left: 151px;
+ width: 95px;
+ height: 35px;
+ border: none;
+ border-radius: 8px;
+ background-color: #dedede;
+ font-size: 20px;
+ font-weight: 400;
+ color: #646464;
+ cursor: pointer;
+`;
+
+export const SecessionButton = styled.button`
+ position: absolute;
+ top: 387px;
+ right: 151px;
+ width: 95px;
+ height: 35px;
+ border: none;
+ border-radius: 8px;
+ background-color: #376fff;
+ font-size: 20px;
+ font-weight: 400;
+ color: #ffffff;
+ cursor: pointer;
+`;
diff --git a/src/components/WithdrawalModal/withdrawalModal.js b/src/components/WithdrawalModal/withdrawalModal.js
new file mode 100644
index 0000000..8185cfb
--- /dev/null
+++ b/src/components/WithdrawalModal/withdrawalModal.js
@@ -0,0 +1,31 @@
+import {
+ ContainerOut,
+ Containter,
+ Title,
+ Explanation,
+ CannelButton,
+ SecessionButton,
+} from "./styles";
+
+import { ReactComponent as Icon } from "../../assets/myPage/WithdrawalIcon.svg";
+
+const WithdrawalModal = ({ IsWithdrawal }) => {
+ return (
+
+
+
+ 회원 탈퇴
+
+ 회원 탈퇴시 사용자 계정의 모든 정보가 삭제됩니다.
+ 정말로 탈퇴하시겠습니까?
+
+ IsWithdrawal(false)}>취소
+ IsWithdrawal(false)}>
+ 회원탈퇴
+
+
+
+ );
+};
+
+export default WithdrawalModal;
diff --git a/src/index.js b/src/index.js
index 902eb7c..388c707 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,12 +3,13 @@ import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
+import { RecoilRoot } from "recoil";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
-
+
- ,
+ ,
);
// If you want to start measuring performance in your app, pass a function
diff --git a/src/lib/axios.js b/src/lib/axios.js
new file mode 100644
index 0000000..a09aec1
--- /dev/null
+++ b/src/lib/axios.js
@@ -0,0 +1,41 @@
+import axios from "axios";
+
+export const axiosWithAuth = axios.create({
+ baseURL:
+ process.env.NODE_ENV === "development"
+ ? "http://localhost:8080"
+ : "https://e-um.site",
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `Bearer ${localStorage.getItem("access_token")}`,
+ },
+ withCredentials: true,
+});
+
+axiosWithAuth.interceptors.response.use(
+ function (res) {
+ return res;
+ },
+ async function (err) {
+ // const { config: originRequest } = err;
+ if (err.response.status === 401) {
+ // access token이 만료되어서 refresh token을 사용해서 재발급 요청할 때
+ const reIssueResponse = await axiosWithAuth.post("/api/auth/reissue");
+ if (reIssueResponse.status === 200) {
+ const { accessToken } = reIssueResponse.data;
+ localStorage.setItem("access_token", accessToken);
+ axiosWithAuth.defaults.headers.Authorization = `Bearer ${accessToken}`;
+ // await axios(originRequest).then((res) => {});
+ window.location.replace("/");
+ } else {
+ window.location.replace("/sign-in");
+ }
+ } else if (err.response.status === 403) {
+ // refresh token이 만료 혹은 없을 때
+ console.log("refresh token 만료 혹은 존재X. 재로그인 요망");
+ return;
+ }
+
+ return Promise.reject(err);
+ },
+);
diff --git a/src/pages/Login/login.js b/src/pages/Login/login.js
new file mode 100644
index 0000000..5e0beb7
--- /dev/null
+++ b/src/pages/Login/login.js
@@ -0,0 +1,39 @@
+import { useEffect } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { axiosWithAuth } from "../../lib/axios";
+
+const Login = (props) => {
+ const location = useLocation();
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ const queryParams = new URLSearchParams(location.search);
+ console.log("location", location);
+ // "/login/success"
+ const url = location.pathname;
+ const result2 = url.split("/"); // ["", "login", "success"]
+ const result = result2[result2.length - 1]; // "success"
+ console.log("queryParams", queryParams);
+ const token = queryParams.get("accesstoken");
+
+ // http://e-um.site/login/success?accesstoken=eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiI0IiwiZW1haWwiOiJnZWVob29uNjIwMTdAZ21haWwuY29tIiwibmFtZSI6Iuy1nOyngO2biCAiLCJhdmF0YXIiOiJodHRwczovL2xoMy5nb29nbGV1c2VyY29udGVudC5jb20vYS9BQ2c4b2NLZDVzR216Nm5fa1Z5d0U2QW1WbS1NdHlpaTlwc2NhbmUtMmxZN2hRTWdEMjB4RlE9czk2LWMiLCJhdXRob3JpdGllcyI6IlJPTEVfVVNFUiIsImlhdCI6MTcxMjY0MjMxMywiZXhwIjoxNzEyNjQ0MTEzfQ.BqvQwgrdYwlQ4xCwer4wHHnQC1tciu2Rvxp9kC_iZEJNuK6mjYQUKCk_GDEgyPHP9b384RFfmI1hdyAzQ3TkpQ
+ console.log("result", result);
+ if (result === "success") {
+ if (token) {
+ console.log("토큰 저장");
+ localStorage.setItem("access_token", token);
+ axiosWithAuth.defaults.headers.Authorization = `Bearer ${token}`;
+ navigate("/");
+ } else {
+ // 토큰이 없거나 문제가 있다면 로그인 페이지나 오류 페이지로 리다이렉트
+ console.log("url에 토큰이 포함되어 있지 않습니다");
+ navigate("/");
+ }
+ } else {
+ }
+ }, [location, navigate]);
+
+ return
Loading...
;
+};
+
+export default Login;
diff --git a/src/pages/Main/main.js b/src/pages/Main/main.js
index ce97993..96c6f32 100644
--- a/src/pages/Main/main.js
+++ b/src/pages/Main/main.js
@@ -1,12 +1,36 @@
-import React from "react";
import Navigation from "../../components/Navigation/navigation";
import Introduce from "../../components/Introduce/introduce";
+import SubNavigation from "../../components/SubNavigation/subNavigation";
+import TeamCardGrid from "../../components/CardGrid/teamCardGrid";
+import MemberCardGrid from "../../components/CardGrid/memberCardGrid";
+import teamTestData from "../../api/teamTestData";
+import memberTestData from "../../api/memberTestData";
+import contestTestData from "../../api/contestTestData";
+import ContestCardGrid from "../../components/CardGrid/contestCardGrid";
const Main = (props) => {
return (
);
};
diff --git a/src/pages/Main/styles.js b/src/pages/Main/styles.js
index e69de29..6ccfd2e 100644
--- a/src/pages/Main/styles.js
+++ b/src/pages/Main/styles.js
@@ -0,0 +1,11 @@
+import styled from "styled-components";
+
+export const CardContainter = styled.div`
+ position: absolute;
+ top: 300px;
+ left: 100px;
+ width: 700px;
+ height: 650px;
+ border: solid;
+ overflow-y: auto;
+`;
diff --git a/src/pages/MemberSearch/memberSearch.js b/src/pages/MemberSearch/memberSearch.js
new file mode 100644
index 0000000..8363ba8
--- /dev/null
+++ b/src/pages/MemberSearch/memberSearch.js
@@ -0,0 +1,60 @@
+import { useState } from "react";
+import TeamCardGrid from "../../components/CardGrid/teamCardGrid";
+import Introduce from "../../components/Introduce/introduce";
+import Navigation from "../../components/Navigation/navigation";
+import PaginationComponent from "../../components/PagenationComponent/pagenationComponent";
+import SideNavigation from "../../components/SideNavigation/sideNavigation";
+import memberTestData2 from "../../api/memberTestDats2";
+import memberTestData3 from "../../api/memberTestData3";
+import MemberCardGrid from "../../components/CardGrid/memberCardGrid";
+const MemberSearch = () => {
+ const [currentPage, setCurrentPage] = useState(1);
+
+ const handlePageChange = (pageNumber) => {
+ setCurrentPage(pageNumber);
+ // 추가적인 페이지 변경 처리 로직
+ };
+ return (
+
+ );
+};
+
+export default MemberSearch;
diff --git a/src/api/q.txt b/src/pages/MemberSearch/styles.js
similarity index 100%
rename from src/api/q.txt
rename to src/pages/MemberSearch/styles.js
diff --git a/src/pages/MyPage/myPage.js b/src/pages/MyPage/myPage.js
new file mode 100644
index 0000000..9370deb
--- /dev/null
+++ b/src/pages/MyPage/myPage.js
@@ -0,0 +1,98 @@
+import React, { useState } from "react";
+import { Routes, Route } from "react-router-dom";
+
+import Navigation from "../../components/Navigation/navigation";
+import MyPageSideBar from "../../components/MyPageSideBar/myPageSideBar";
+import MyInfo from "../../components/MyInfo/myInfo";
+import MyFavorites from "../../components/MyFavorites/myFavorites";
+import MySupport from "../../components/MySupport/mySupport";
+import MyTeam from "../../components/MyTeam/myTeam";
+import MyTeamCreate from "../../components/MyTeamCreate/myTeamCreate";
+import MyResume from "../../components/MyResume/myResume";
+import { ReactComponent as Vector } from "../../assets/myPage/myInfoVector1.svg";
+
+import { Title, Container, PageName } from "./styles";
+import WithdrawalModal from "../../components/WithdrawalModal/withdrawalModal";
+
+const MyPage = (props) => {
+ const [isCreateTeam, setIsCreateTeam] = useState(false);
+ const [isWithdrawal, setIsWithdrawal] = useState(false);
+
+ return (
+
+
+
+ 마이페이지
+
+
+
+
+
+ 내정보
+
+
+ }
+ />
+
+ 즐겨찾기 목록
+
+
+ }
+ />
+ 
+