From c33b6c7a94174babc6cec00c57a7787552a3f954 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=B0=ED=98=84=EC=A4=80?= Date: Sun, 29 Dec 2024 21:01:44 +0900 Subject: [PATCH] =?UTF-8?q?design:=20=EB=A7=88=EC=9D=B4=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 31 +- src/assets/mypageAssets/Profile.svg | 14 + src/assets/mypageAssets/email.svg | 4 + src/assets/mypageAssets/password.svg | 4 + src/assets/mypageAssets/sns.svg | 5 + src/pages/MyPage.jsx | 453 +++++++++++++++++++++++++++ 6 files changed, 498 insertions(+), 13 deletions(-) create mode 100644 src/assets/mypageAssets/Profile.svg create mode 100644 src/assets/mypageAssets/email.svg create mode 100644 src/assets/mypageAssets/password.svg create mode 100644 src/assets/mypageAssets/sns.svg create mode 100644 src/pages/MyPage.jsx diff --git a/src/App.jsx b/src/App.jsx index 58754aa..0a6a80f 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -6,24 +6,29 @@ import { theme } from './theme'; import { ThemeProvider } from 'styled-components'; import CheckPointRecordPage from './pages/CheckPointRecordPage'; import AnotherCheckPointRecordPage from './pages/AnotherCheckPointRecordPage'; +import MyPage from './pages/MyPage'; function App() { return ( - {/**/} -
- - } /> - } /> - } /> - } /> - } /> - } - /> - + {/**/} +
+ + } /> + } /> + } /> + } /> + } + /> + } + /> + } /> +
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..7bf8d98 --- /dev/null +++ b/src/pages/MyPage.jsx @@ -0,0 +1,453 @@ +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 ( + + + + + + + profileAsset + + + 닉네임 + + setNickname(e.target.value)} + placeholder="닉네임을 입력하세요" + /> + + + + + + + + + emailasset + + + 이메일 아이디 + + setEmail(e.target.value)} + placeholder="exmple@gmail.com" + /> + + + + + + + + + + + passwordAsset + + + 비밀번호 변경 + + + + + + 현재 비밀번호 + + setPassword(e.target.value)} + /> + + + + + 변경 비밀번호 + + setPassword(e.target.value)} + /> + + + + + 비밀번호 확인 + + setPassword(e.target.value)} + /> + + + + + + + + + + + + + snsAsset + + + SNS 연동 + + + Kakao Logo + + {snsId} + + + 연동하기 > + + + + + + {' '} + snsAsset + + + 회원탈퇴 + + 탈퇴하기 > + + + + + + + + + ); +} + +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-family: 'Noto Sans KR'; + 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-family: 'Noto Sans KR'; + 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-family: 'Noto Sans KR'; + 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-family: 'Noto Sans KR'; + 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%; + display: flex; + flex-direction: column; + gap: 10px; + padding-left: 10px; +`; + +const PasswordLineBox = styled.div` + display: flex; + flex-direction: row; + width: 100%; + height: fit-content; + padding-left: 75px; + + box-sizing: border-box; +`; +const PasswordLineLeft = styled.div` + font-family: 'Noto Sans KR'; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 32px; + /* identical to box height, or 267% */ + display: flex; + align-items: center; + + color: #4e202a; + width: 69px; + padding-right: 45px; +`; +const PasswordLineMiddle = styled.div` + flex-grow: 1; + padding-right: 30px; +`; +const PasswordLineRight = styled.div` + height: 100%; + width: 87px; + display: flex; +`;