diff --git a/src/App.jsx b/src/App.jsx
index bc0cfa0..cc72232 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -9,6 +9,7 @@ import Login from './pages/Login';
import SignUp from './pages/SignUp';
import CheckPointRecordPage from './pages/CheckPointRecordPage';
import AnotherCheckPointRecordPage from './pages/AnotherCheckPointRecordPage';
+import MyPage from './pages/MyPage';
function App() {
return (
@@ -21,6 +22,7 @@ function App() {
} />
} />
} />
+ } />
}
diff --git a/src/assets/mypageAssets/Profile.svg b/src/assets/mypageAssets/Profile.svg
new file mode 100644
index 0000000..bbce4d6
--- /dev/null
+++ b/src/assets/mypageAssets/Profile.svg
@@ -0,0 +1,14 @@
+
diff --git a/src/assets/mypageAssets/email.svg b/src/assets/mypageAssets/email.svg
new file mode 100644
index 0000000..6a6a706
--- /dev/null
+++ b/src/assets/mypageAssets/email.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/assets/mypageAssets/password.svg b/src/assets/mypageAssets/password.svg
new file mode 100644
index 0000000..9d7106b
--- /dev/null
+++ b/src/assets/mypageAssets/password.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/assets/mypageAssets/sns.svg b/src/assets/mypageAssets/sns.svg
new file mode 100644
index 0000000..c4d7af7
--- /dev/null
+++ b/src/assets/mypageAssets/sns.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/pages/MyPage.jsx b/src/pages/MyPage.jsx
new file mode 100644
index 0000000..324586d
--- /dev/null
+++ b/src/pages/MyPage.jsx
@@ -0,0 +1,457 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+import LGButton from '../components/LGButton/LGButton';
+
+import profileAsset from '/src/assets/mypageAssets/Profile.svg';
+import emailAsset from '/src/assets/mypageAssets/email.svg';
+import passwordAsset from '/src/assets/mypageAssets/password.svg';
+import snsAsset from '/src/assets/mypageAssets/sns.svg';
+import kakaoLogo from '/src/assets/snslogo/kakao.svg';
+
+export default function MyPage() {
+ const [nickname, setNickname] = useState('');
+ const [email, setEmail] = useState('');
+ const [snsId, setSnsId] = useState('email@kakao.com');
+
+ const [password, setPassword] = useState('');
+
+ const handleSubmit = (event) => {
+ event.preventDefault();
+ };
+
+ return (
+
+
+
+
+
+
+ 
+
+
+ 닉네임
+
+ setNickname(e.target.value)}
+ placeholder="닉네임을 입력하세요"
+ />
+
+
+
+
+
+
+
+
+ 
+
+
+ 이메일 아이디
+
+ setEmail(e.target.value)}
+ placeholder="exmple@gmail.com"
+ />
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ 비밀번호 변경
+
+
+
+
+
+ 현재 비밀번호
+
+ setPassword(e.target.value)}
+ />
+
+
+
+
+ 변경 비밀번호
+
+ setPassword(e.target.value)}
+ />
+
+
+
+
+ 비밀번호 확인
+
+ setPassword(e.target.value)}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ SNS 연동
+
+
+ 
+
+ {snsId}
+
+
+ 연동하기 >
+
+
+
+
+
+ {' '}
+
+
+
+ 회원탈퇴
+
+ 탈퇴하기 >
+
+
+
+
+
+
+
+
+ );
+}
+
+const MainContainer = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-wrap: nowrap;
+ position: relative;
+ width: 100%;
+ height: 100%;
+ margin: 0 auto;
+ background: #fafafa;
+ box-sizing: border-box;
+ overflow-y: auto;
+`;
+
+const OuterFrame = styled.div`
+ width: 630px;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+
+ padding-top: 100px;
+
+ gap: 50px;
+`;
+
+const UpperFrame = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ width: 100%;
+ flex-grow: 1;
+`;
+
+const DownFrame = styled.div`
+ width: 100%;
+ height: 40px;
+`;
+
+const BoxFrame = styled.div`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 20px 40px 20px 32px;
+ gap: 22px;
+
+ width: 100%;
+ height: fit-content;
+
+ background: #ffffff;
+ border: 1px solid #d9d9d9;
+ box-sizing: border-box;
+`;
+
+const BoxType1 = styled.div`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ gap: 22px;
+`;
+const Type1Left = styled.div`
+ width: 66px;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+`;
+const Type1Right = styled.div`
+ flex-grow: 1;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+`;
+
+const Type1RightFirstLine = styled.div`
+ width: 100%;
+ flex-grow: 1;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 32px;
+ /* identical to box height, or 200% */
+ display: flex;
+ align-items: center;
+
+ color: #4e202a;
+`;
+const Type1RightSecondLine = styled.div`
+ width: 100%;
+ flex-grow: 1;
+ display: flex;
+ flex-direction: row;
+ gap: 20px;
+`;
+
+const BoxType2 = styled.div`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ gap: 22px;
+`;
+const Type2Left = styled.div`
+ width: 66px;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+`;
+const Type2Middle = styled.div`
+ flex-grow: 1;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+`;
+const Type2Right = styled.div`
+ width: 100px;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 32px;
+ /* identical to box height, or 200% */
+ display: flex;
+ align-items: center;
+
+ color: #4e202a;
+`;
+
+const Type2RightFirstLine = styled.div`
+ width: 100%;
+ flex-grow: 1;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 32px;
+ /* identical to box height, or 200% */
+ display: flex;
+ align-items: center;
+
+ color: #4e202a;
+`;
+const Type2RightSecondLine = styled.div`
+ width: 100%;
+ flex-grow: 1;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 10px;
+`;
+const SNSFrame = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 5px;
+
+ width: 30px;
+ height: 30px;
+
+ background: #f7e600;
+ border: 2px solid #f4f4f4;
+ border-radius: 50px;
+`;
+
+const SNSidFrame = styled.div`
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 32px;
+ /* identical to box height, or 229% */
+ display: flex;
+ align-items: center;
+
+ color: #4e202a;
+`;
+const Rectangle = styled.input`
+ width: 100%;
+ height: 40px;
+ background: rgba(217, 217, 217, 0);
+ border: 1px solid #d9d9d9;
+ border-radius: 10px;
+`;
+
+const BoxType3 = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ gap: 10px;
+`;
+
+const Type3SecondLine = styled.div`
+ width: 100%;
+ height: 100%;
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ padding-left: 10px;
+`;
+
+const PasswordLineBox = styled.div`
+ display: flex;
+ flex-direction: row;
+ flex-grow: 1;
+ width: 100%;
+ padding-left: 75px;
+
+ box-sizing: border-box;
+`;
+const PasswordLineLeft = styled.div`
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 32px;
+ /* identical to box height, or 267% */
+ display: flex;
+ align-self: center;
+ justify-content: center;
+
+ color: #4e202a;
+ width: 69px;
+ height: 100%;
+ padding-right: 45px;
+`;
+const PasswordLineMiddle = styled.div`
+ flex-grow: 1;
+ padding-right: 30px;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+`;
+const PasswordLineRight = styled.div`
+ height: 100%;
+ width: 87px;
+ display: flex;
+ justify-content: center;
+ align-self: center;
+`;