diff --git a/src/components/dropdown/dropdown.css b/src/components/dropdown/dropdown.css
index 60e8c875f09847479ec9d9ce56ec1fa191f835d0..83fb968683c3721cda3a71de934c02da48497932 100644
--- a/src/components/dropdown/dropdown.css
+++ b/src/components/dropdown/dropdown.css
@@ -4,7 +4,7 @@
}
.dropdown-toggle {
- background-color: #999D6B;
+ background-color: #000;
color: white;
padding: 10px 20px;
border: none;
diff --git a/src/pages/mypage/deleteAccount.jsx b/src/pages/mypage/deleteAccount.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..baa388831ad5ed20e0a1517707ce807487fc923f
--- /dev/null
+++ b/src/pages/mypage/deleteAccount.jsx
@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import './index.css';
+import Clickable from '../../components/Clickable';
+
+const DeleteAccount = () => {
+ const [loginInfo, setLoginInfo] = useState(undefined);
+
+ const myPageBox = loginInfo === undefined;
+
+ return (
+ <div>
+ <div className='MainContents'>
+ <h2>마이페이지</h2>
+
+ <div className='front_bar'>
+ <Clickable href={'/mypage'}>
+ <label>비밀변호 변경</label>
+ </Clickable>
+ <Clickable href={'/myPage/orderHistory'}>
+ <label>주문내역</label>
+ </Clickable>
+ <Clickable href={'/myPage/deleteAccount'}>
+ <label className='Main'>회원탈퇴</label>
+ </Clickable>
+ </div>
+
+ <div className='forms'>
+ <div>
+ 현재 비밀번호
+ <input
+ type='text'
+ name='currentPw'
+ placeholder={'현재 비밀번호를 입력하세요'}
+ />
+ </div>
+ <br />
+ <div>
+ 비밀번호 재입력
+ <input
+ type='text'
+ name='confirmPw'
+ placeholder={'비밀번호를 다시 입력하세요'}
+ />
+ </div>
+ <br />
+ </div>
+
+ <div className='button_contain'>
+ <button type='button' className='deleteAccountBtn'>
+ 회원 탈퇴하기
+ </button>
+ </div>
+ </div>
+ </div>
+ );
+};
+
+export default DeleteAccount;
diff --git a/src/pages/mypage/index.css b/src/pages/mypage/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..5cd0b20b2ef2e9b4756f65dc1eb2810ee6b46733
--- /dev/null
+++ b/src/pages/mypage/index.css
@@ -0,0 +1,84 @@
+.MainContents{
+ max-width: 1200px;
+ margin: auto;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column; /* Ensures all content is aligned vertically */
+}
+
+.front_bar{
+ width: 60vh;
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+ justify-content: space-between;
+ border-bottom: 2px solid #bbb;
+ padding: 10px;
+}
+
+
+.front_bar .Clickable {
+ text-align: center;
+ margin: 0 10px;
+}
+
+.front_bar .Clickable div {
+ padding: 10px;
+ background-color: #fff;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background-color 0.3s;
+}
+
+.front_bar .Clickable div:hover {
+ background-color: #cacaca;
+}
+
+.front_bar .Clickable label {
+ font-size: 16px;
+ color: #333;
+}
+
+.forms{
+ max-width: 1200px;
+ width: 50vh;
+ display: flex;
+ padding: 15%;
+ padding-bottom: 5%;
+ justify-content: center;
+ flex-direction: column; /* Ensures all content is aligned vertically */
+}
+
+.forms input {
+ width: 100%;
+ border: 1px solid #bbb;
+ border-radius: 8px;
+ padding: 10px 12px;
+ font-size: 14px;
+ }
+
+
+.Main {
+ font-weight: 900;
+ font-size: 19px;
+ color: #707070;
+}
+
+button {
+ border : none;
+ border-radius: 10px;
+ width: 150px;
+ text-align: center;
+ padding: 10px 10px;
+ font-size: 15px;
+ display: inline-block;
+ background-color: #000;
+ color: #fff;
+ margin-left: 10px;
+ margin-right: 10px;
+ &:hover{
+ background-color: #474747;
+ }
+}
\ No newline at end of file
diff --git a/src/pages/mypage/index.jsx b/src/pages/mypage/index.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..cc630099857bfab13bbc4ae82648d6ce04bc4cc9
--- /dev/null
+++ b/src/pages/mypage/index.jsx
@@ -0,0 +1,67 @@
+import { useState } from 'react';
+import './index.css';
+import Clickable from '../../components/Clickable';
+
+const MyPage = () => {
+ const [loginInfo, setLoginInfo] = useState(undefined);
+
+ const myPageBox = loginInfo === undefined;
+
+ return (
+ <div>
+ <div className='MainContents'>
+ <h2>마이페이지</h2>
+
+ <div className='front_bar'>
+ <Clickable href={'/mypage'}>
+ <label className='Main'>비밀변호 변경</label>
+ </Clickable>
+ <Clickable href={'/myPage/orderHistory'}>
+ <label>주문내역</label>
+ </Clickable>
+ <Clickable href={'/myPage/deleteAccount'}>
+ <label>회원탈퇴</label>
+ </Clickable>
+ </div>
+
+ <div className='forms'>
+ <div>
+ 현재 비밀번호
+ <input
+ type='text'
+ name='currentPw'
+ placeholder={'현재 비밀번호를 입력하세요'}
+ />
+ </div>
+ <br />
+ <div>
+ 비밀번호 재입력
+ <input
+ type='text'
+ name='confirmPw'
+ placeholder={'비밀번호를 다시 입력하세요'}
+ />
+ </div>
+ <br />
+ <div>
+ 새 비밀번호 입력
+ <input
+ type='text'
+ name='newPw'
+ placeholder={'새 비밀번호를 입력하세요'}
+ />
+ </div>
+ <br />
+ </div>
+
+ <div className='button_contain'>
+ <button type='button' className='PwChangeBtn'>
+ 변경하기
+ </button>
+ </div>
+ </div>
+ </div>
+ );
+};
+
+export default MyPage;
diff --git a/src/pages/mypage/orderHistory.jsx b/src/pages/mypage/orderHistory.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..bc48d04a371429a400f96dce6d8764a0e6de4bff
--- /dev/null
+++ b/src/pages/mypage/orderHistory.jsx
@@ -0,0 +1,53 @@
+import { useState } from 'react';
+import './index.css';
+import Clickable from '../../components/Clickable';
+
+const MyPage = () => {
+ const [loginInfo, setLoginInfo] = useState(undefined);
+
+ const myPageBox = loginInfo === undefined;
+
+ return (
+ <div>
+ <div className='MainContents'>
+ <h2>마이페이지</h2>
+ <div className='front_bar'>
+ <Clickable href={'/mypage'}>
+ <label>비밀변호 변경</label>
+ </Clickable>
+ <Clickable href={'/myPage/orderHistory'}>
+ <label className='Main'>주문내역</label>
+ </Clickable>
+ <Clickable href={'/myPage/deleteAccount'}>
+ <label>회원탈퇴</label>
+ </Clickable>
+ </div>
+ <br /> <br />
+ <div>
+ <table>
+ <thead>
+ <tr>
+ <th>주문번호</th>
+ <th>상품정보</th>
+ <th>주문상태</th>
+ <th>수량</th>
+ <th>금액</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>101010</td>
+ <td>세르메니아 블렌드 200g</td>
+ <td>대기중</td>
+ <td>3</td>
+ <td>20000</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ );
+};
+
+export default MyPage;
diff --git a/src/pages/partners/index.css b/src/pages/partners/index.css
index 1f6dde2dd6002e0bd8f6ab4c1697c60a31430f16..727fed70b0ef0b5b597f14b1e55dfc70d8680047 100644
--- a/src/pages/partners/index.css
+++ b/src/pages/partners/index.css
@@ -1,7 +1,5 @@
body{
background-color: #f2f3f4;
- font-family: "Gowun Dodum", sans-serif;
- font-weight: 400;
font-style: normal;
}
@@ -33,7 +31,7 @@ body{
padding:0px;
li{
&:hover{
- background-color: #1f1f1f;
+ background-color: #474747;
border-radius: 10px;
margin-left: 5px;
margin-right: 5px;