Merge pull request #27 from urdego/feat/#16-mypage-ui

Feat: mypage UI 구현완료

app/(nav)/myPage/myPage.styles.ts

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+import colors from '@/styles/color/palette';
+
+export const MyPageWrapper = styled.div`
+  padding: 0 16px;
+`;
+
+export const ProfileWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px 0px;
+`;
+
+export const SmallButtonWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+export const Separator = styled.div`
+  height: 9px;
+  width: calc(100% + 32px); /* 부모 padding 16px * 2 보정 */
+  margin: 0 -16px; /* MyPageWrapper의 padding 값 반영 */
+  background-color: ${colors.gray[95]};
+`;

app/(nav)/myPage/page.tsx

@@ -1,11 +1,34 @@
 'use client';
 import TopBar from '@/components/Common/TopBar/TopBar';
+import {
+  MyPageWrapper,
+  ProfileWrapper,
+  SmallButtonWrapper,
+  Separator,
+} from '@/app/(nav)/myPage/myPage.styles';
+import ProfileInfo from '@/components/Layout/MyPage/ProfileInfo';
+import SettingButton from '@/components/Layout/MyPage/SettingButton';
+import SmallButton from '@/components/Layout/MyPage/SmallButton';
 
 const MyPage = () => {
   return (
     <>
-      <TopBar NavType="other" label="마이페이지" />
-      <h1>My Page</h1>
+      <TopBar NavType="default" label="마이페이지" />
+      <MyPageWrapper>
+        <ProfileWrapper>
+          <ProfileInfo />
+          <SmallButtonWrapper>
+            <SmallButton onClick={() => {}}>캐릭터 수정</SmallButton>
+            <SmallButton onClick={() => {}}>닉네임 변경</SmallButton>
+          </SmallButtonWrapper>
+        </ProfileWrapper>
+        <Separator />
+        <SettingButton label="비밀번호 변경" onClick={() => {}} />
+        <SettingButton label="간편 로그인 설정" onClick={() => {}} />
+        <SettingButton label="사운드 설정" onClick={() => {}} />
+        <SettingButton label="로그아웃" onClick={() => {}} />
+        <SettingButton label="회원탈퇴" onClick={() => {}} />
+      </MyPageWrapper>
     </>
   );
 };

components/Common/NavBar/NavBar.tsx

@@ -52,9 +52,9 @@ const NavBar = () => {
           <NavBarText>랭킹</NavBarText>
         </NavItem>
       </Link>
-      <Link href="/mypage" passHref>
-        <NavItem onClick={() => setSelected('mypage')}>
-          {selected === 'mypage' ? <MypageColorIcon /> : <MypageIcon />}
+      <Link href="/myPage" passHref>
+        <NavItem onClick={() => setSelected('myPage')}>
+          {selected === 'myPage' ? <MypageColorIcon /> : <MypageIcon />}
           <NavBarText>마이페이지</NavBarText>
         </NavItem>
       </Link>

components/Layout/MyPage/ProfileInfo.styles.ts

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+import colors from '@styles/color/palette';
+
+export const ProfileInfoWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 12px; /* 프로필과 버튼 간 간격 */
+`;
+
+export const ImageWrapper = styled.div`
+  margin-bottom: 12px; /* 이미지와 이름/이메일 간 간격 */
+  background-color: ${colors.gray[80]};
+  border-radius: 50%;
+  width: 56px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const ProfileName = styled.div`
+  font-size: 14px;
+  margin-bottom: 4px; /* 이름과 이메일 간 간격 */
+  font-weight: bold;
+  text-align: center;
+`;
+
+export const ProfileEmail = styled.div`
+  font-size: 12px;
+  color: ${colors.gray[60]};
+  text-align: center;
+`;

components/Layout/MyPage/ProfileInfo.tsx

@@ -0,0 +1,23 @@
+import {
+  ProfileInfoWrapper,
+  ImageWrapper,
+  ProfileName,
+  ProfileEmail,
+} from '@/components/Layout/MyPage/ProfileInfo.styles';
+
+import ProfileImg from '@/styles/Icon/Profile_Snowman1.svg';
+import Image from 'next/image';
+
+const ProfileInfo = () => {
+  return (
+    <ProfileInfoWrapper>
+      <ImageWrapper>
+        <Image src={ProfileImg} width={56} height={56} alt="Profile Image" />
+      </ImageWrapper>
+      <ProfileName>김눈사람</ProfileName>
+      <ProfileEmail>[email protected]</ProfileEmail>
+    </ProfileInfoWrapper>
+  );
+};
+
+export default ProfileInfo;

components/Layout/MyPage/SettingButton.styles.ts

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+export const SetButtonWrapper = styled.div`
+  width: 100%;
+  height: 55px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+`;
+
+export const SetButton = styled.div`
+  font-size: 14px;
+  font-weight: 700;
+  border: none;
+`;

components/Layout/MyPage/SettingButton.tsx

@@ -0,0 +1,22 @@
+import {
+  SetButton,
+  SetButtonWrapper,
+} from '@components/Layout/MyPage/SettingButton.styles';
+import direction from '@styles/Icon/Right_dir.svg';
+import Image from 'next/image';
+
+interface SettingButtonProps {
+  label: string;
+  onClick: () => void;
+}
+
+const SettingButton = ({ label, onClick }: SettingButtonProps) => {
+  return (
+    <SetButtonWrapper onClick={onClick}>
+      <SetButton>{label}</SetButton>
+      <Image src={direction} width={24} height={24} alt="Direction" />
+    </SetButtonWrapper>
+  );
+};
+
+export default SettingButton;

components/Layout/MyPage/SmallButton.styles.ts

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import colors from '@/styles/color/palette';
+
+export const SButton = styled.button`
+  width: 166px;
+  padding: 12px 16px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  border-radius: 4px;
+  border: 1px solid ${colors.gray[80]};
+  background-color: white;
+  cursor: pointer;
+
+  &:disabled {
+    border-color: #e0e0e0;
+    background-color: #f9f9f9;
+    color: #b0b0b0;
+    cursor: not-allowed;
+  }
+`;

components/Layout/MyPage/SmallButton.tsx

@@ -0,0 +1,12 @@
+import { SButton } from '@components/Layout/MyPage/SmallButton.styles';
+
+interface SmallButtonProps {
+  onClick: () => void;
+  children: React.ReactNode;
+}
+
+const SmallButton = ({ onClick, children }: SmallButtonProps) => {
+  return <SButton onClick={onClick}>{children}</SButton>;
+};
+
+export default SmallButton;