[CZ-535] 마이 페이지 QA 작업

apps/web/app/layout.tsx

@@ -41,9 +41,11 @@ function RootLayout({
               <GlobalStyles />
               <Header />
               <Applayout>
-                <div id="stars" />
-                <div id="stars2" />
-                <div id="stars3" />
+                <Stars>
+                  <div id="stars" />
+                  <div id="stars2" />
+                  <div id="stars3" />
+                </Stars>
                 {children}
               </Applayout>
             </ThemeProvider>
@@ -62,8 +64,12 @@ const Applayout = styled.div`
   overflow: hidden;
   height: calc(100svh - 55px);
   ${media.medium} {
-    padding-top: 37px;
+    padding-top: 34px;
   }
 `;
 
+const Stars = styled.div`
+  height: 6px;
+`;
+
 export default RootLayout;

apps/web/app/my/components/UserInfoContainer.tsx

@@ -0,0 +1,87 @@
+import ImageUploadButton from "components/common/ImageUploadButton";
+import { useGetUserInfo } from "hooks/useGetUserInfo";
+import Path from "lib/Path";
+import Link from "next/link";
+import { Gender } from "types/user";
+import styled, { css } from "styled-components";
+import { media } from "@chooz/ui/styles/media";
+
+function UserInfoContainer() {
+  const { data: userInfo } = useGetUserInfo();
+
+  if (!userInfo) return <></>;
+
+  const { gender, username, age, mbti } = userInfo;
+
+  return (
+    <>
+      <AddImageButtonWrapper>
+        <ImageUploadButton width="107px" height="107px" />
+      </AddImageButtonWrapper>
+      <Profile>
+        <UserInfo>
+          <>
+            {gender === Gender.MALE ? "남" : "여"}
+            <Divider />
+            {age}
+            <Divider />
+            {mbti}
+          </>
+        </UserInfo>
+        <Nickname>{username}</Nickname>
+        <ProfileModifyButton>
+          <Link href={Path.PROFILE_EDIT}>프로필 수정</Link>
+        </ProfileModifyButton>
+      </Profile>
+    </>
+  );
+}
+
+const AddImageButtonWrapper = styled.div`
+  float: left;
+`;
+
+const Profile = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding-left: 17px;
+
+  ${media.medium} {
+    padding-left: 28px;
+  }
+`;
+
+const UserInfo = styled.span`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 86px;
+  background-color: ${({ theme }) => theme.palette.background.black};
+  border-radius: 4px;
+`;
+
+const Divider = styled.div`
+  width: 1px;
+  height: 8px;
+  margin: 0 4px;
+  background-color: ${({ theme }) => theme.palette.ink.base};
+`;
+
+const Nickname = styled.span`
+  margin-top: 8px;
+  ${({ theme }) => css`
+    ${theme.textStyle.Title_Small};
+    color: ${theme.palette.ink.lighter};
+  `};
+`;
+
+const ProfileModifyButton = styled.button`
+  width: 71px;
+  height: 30px;
+  border: 1px solid ${({ theme }) => theme.palette.border.light};
+  border-radius: 4px;
+  margin-top: 25px;
+`;
+
+export default UserInfoContainer;

apps/web/app/my/components/VoteCountContainer.tsx

@@ -0,0 +1,44 @@
+import styled from "styled-components";
+import useGetVoteCount from "../services/useGetVoteCount";
+
+function VoteCountContainer() {
+  const voteCountList = useGetVoteCount();
+
+  return (
+    <Container>
+      {voteCountList.map(({ voteTypeText, count }) => {
+        return (
+          <VoteType key={`VoteCount_${voteTypeText}`}>
+            <VoteCount>{count}</VoteCount>
+            <VoteTypeText>{voteTypeText}</VoteTypeText>
+          </VoteType>
+        );
+      })}
+    </Container>
+  );
+}
+
+const Container = styled.section`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  width: 100%;
+  margin-top: 24px;
+`;
+
+const VoteType = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const VoteCount = styled.span`
+  ${({ theme }) => theme.textStyle.Title_Large};
+  font-family: NeoDunggeunmo, Pretendard Variable, -apple-system, BlinkMacSystemFont, system-ui,
+    Roboto, "Helvetica Neue";
+`;
+
+const VoteTypeText = styled.span`
+  color: ${({ theme }) => theme.palette.ink.light};
+`;
+
+export default VoteCountContainer;

apps/web/components/my/VoteItemDesktop.tsx → apps/web/app/my/components/VoteItemDesktop.tsx

@@ -5,10 +5,10 @@ import { timeDataProcessing } from "lib/utils/timeDataProcessing";
 import Image from "next/image";
 import { AIcon, BIcon } from "public/icons";
 import styled, { css } from "styled-components";
-import { MyPageVote } from "types/vote";
+import { MyVote } from "types/vote";
 
 interface Props {
-  vote: MyPageVote;
+  vote: MyVote;
 }
 
 function VoteItemDesktop({ vote }: Props) {

apps/web/components/my/VoteItemMobile.tsx → apps/web/app/my/components/VoteItemMobile.tsx

@@ -7,10 +7,10 @@ import { timeDataProcessing } from "lib/utils/timeDataProcessing";
 import Image from "next/image";
 import { AIcon, BIcon, BookmarkIcon } from "public/icons";
 import styled, { css } from "styled-components";
-import { MyPageVote } from "types/vote";
+import { MyVote } from "types/my";
 
 interface Props {
-  vote: MyPageVote;
+  vote: MyVote;
 }
 
 function VoteItemMobile({ vote }: Props) {

apps/web/components/my/VoteList.tsx → apps/web/app/my/components/VoteList.tsx

@@ -1,11 +1,11 @@
 import { media } from "@chooz/ui/styles/media";
 import styled from "styled-components";
-import { MyPageVote } from "types/vote";
+import { MyVote } from "types/vote";
 import VoteItemDesktop from "./VoteItemDesktop";
 import VoteItemMobile from "./VoteItemMobile";
 
 interface Props {
-  voteList: MyPageVote[];
+  voteList: MyVote[];
 }
 
 function VoteList({ voteList }: Props) {
@@ -14,12 +14,12 @@ function VoteList({ voteList }: Props) {
   return (
     <>
       <MobileVoteList>
-        {voteList.map((vote: MyPageVote, index: number) => (
+        {voteList.map((vote: MyVote, index: number) => (
           <VoteItemMobile key={`my_page_${index}`} vote={vote} />
         ))}
       </MobileVoteList>
       <DesktopVoteList>
-        {voteList.map((vote: MyPageVote, index: number) => (
+        {voteList.map((vote: MyVote, index: number) => (
           <VoteItemDesktop key={`my_page_${index}`} vote={vote} />
         ))}
       </DesktopVoteList>

apps/web/app/my/edit/page.tsx

@@ -2,8 +2,7 @@
 
 import { Button, transitions } from "@chooz/ui";
 import ImageUploadButton from "components/common/ImageUploadButton";
-import MbtiSelect from "components/my/MbtiSelect";
-import TabContainer from "components/my/TabContainer";
+import MbtiSelect from "app/my/components/MbtiSelect";
 import { useGetUserInfo } from "hooks/useGetUserInfo";
 import { uploadProfileImageAPI } from "lib/apis/upload";
 import { updateUserInfo } from "lib/apis/user";
@@ -18,6 +17,7 @@ import styled, { css } from "styled-components";
 import { media } from "styles/media";
 import { Gender } from "types/user";
 import { IMAGE_CATEGORY_LIST } from "types/vote";
+import TabContainer from "../components/TabContainer";
 
 function ProfileEditPage() {
   const router = useRouter();