Merge pull request #122 from Gamegoo-repo/design/#121

[Design] 마이페이지 헤더 수정
Gamegoo-repo · Oct 14, 2024 · fbc5f8a · fbc5f8a
2 parents 979bb6e + 1132ee1
commit fbc5f8a
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 31 deletions.
diff --git a/src/app/mypage/blocked/page.tsx b/src/app/mypage/blocked/page.tsx
@@ -127,7 +127,8 @@ const Top = styled.div`
   justify-content: space-between;
   color: ${theme.colors.gray700};
   ${(props) => props.theme.fonts.regular25};
-  margin-bottom: 44px;
+  padding-bottom: 13px;
+  border-bottom: 1px solid ${theme.colors.gray400};
 `;
 
 const BlockedList = styled.div`

diff --git a/src/app/mypage/notification/page.tsx b/src/app/mypage/notification/page.tsx
@@ -66,7 +66,7 @@ const MyAlertPage = () => {
     fetchNotiCount();
   }, [currentPage]);
 
-  useEffect(() => { }, [totalPages, totalItems, notiCount]);
+  useEffect(() => {}, [totalPages, totalItems, notiCount]);
 
   const handlePrevPage = () => {
     if (currentPage > 1) {
@@ -110,9 +110,7 @@ const MyAlertPage = () => {
     <Wrapper>
       <MyAlertContent>
         <Alert>
-          <Top>
-            <Small>알림 페이지 ({notiCount})</Small>
-          </Top>
+          <Top>알림 페이지 ({notiCount})</Top>
           {notiList.length > 0 ? (
             <AlertList>
               {notiList.map((data) => (
@@ -183,16 +181,10 @@ const Top = styled.div`
   width: 100%;
   display: flex;
   justify-content: space-between;
-  border-bottom: 1px solid ${theme.colors.gray400};
-`;
-
-const Small = styled.div`
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  ${(props) => props.theme.fonts.medium16};
   color: ${theme.colors.gray700};
-  padding-bottom: 27px;
+  ${(props) => props.theme.fonts.regular25};
+  padding-bottom: 13px;
+  border-bottom: 1px solid ${theme.colors.gray400};
 `;
 
 const AlertList = styled.div`

diff --git a/src/app/mypage/post/page.tsx b/src/app/mypage/post/page.tsx
@@ -62,7 +62,7 @@ const MyPostPage = () => {
     <Wrapper>
       <MyPostContent>
         <PostPage>
-          <Title>내가 작성한 글</Title>
+          <Top>내가 작성한 글</Top>
           <Columns>
             <Left>소환사명</Left>
             <Center>티어</Center>
@@ -136,10 +136,15 @@ const PostPage = styled.header`
   margin-bottom: 100px;
 `;
 
-const Title = styled.div`
-  ${(props) => props.theme.fonts.bold25};
+const Top = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
   color: ${theme.colors.gray700};
-  margin-bottom: 39px;
+  ${(props) => props.theme.fonts.regular25};
+  padding-bottom: 13px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid ${theme.colors.gray400};
 `;
 
 const Columns = styled.div`

diff --git a/src/app/mypage/review/page.tsx b/src/app/mypage/review/page.tsx
@@ -185,10 +185,14 @@ const Gray = styled.div`
 `;
 
 const Title = styled.div`
-  padding-left: 6px;
-  margin-bottom: 13px;
-  ${(props) => props.theme.fonts.regular25};
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
   color: ${theme.colors.gray700};
+  ${(props) => props.theme.fonts.regular25};
+  padding-bottom: 13px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid ${theme.colors.gray400};
 `;
 
 const Row = styled.div`

diff --git a/src/app/mypage/service/page.tsx b/src/app/mypage/service/page.tsx
@@ -8,9 +8,9 @@ const MyServicePage = () => {
   return (
     <Wrapper>
       <MyServiceContent>
-        <Profile>
-          <Title>고객센터</Title>
-        </Profile>
+        <Blocked>
+          <Top>고객 센터</Top>
+        </Blocked>
       </MyServiceContent>
       <Footer>
         <ChatBoxContent>
@@ -36,17 +36,23 @@ const MyServiceContent = styled.div`
   padding: 0 80px;
 `;
 
-const Profile = styled.header`
+const Blocked = styled.header`
   display: flex;
   flex-direction: column;
-  align-items: start;
+  align-items: flex-start;
   width: 100%;
   margin-bottom: 32px;
 `;
 
-const Title = styled.div`
-  ${(props) => props.theme.fonts.bold25};
+const Top = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
   color: ${theme.colors.gray700};
+  ${(props) => props.theme.fonts.regular25};
+  padding-bottom: 13px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid ${theme.colors.gray400};
 `;
 
 const Footer = styled.footer`

diff --git a/src/components/mypage/post/Post.tsx b/src/components/mypage/post/Post.tsx
@@ -35,7 +35,7 @@ export interface PostProps {
   rank: string;
   contents: string;
   createdAt: string;
-  boardNumber:number;
+  boardNumber: number;
   onDeletePost?: (boardId: number) => void;
 }
 
@@ -128,8 +128,9 @@ const Post: React.FC<PostProps> = ({
         </Name>
         <Tier>
           <TierImage
-            data={`/assets/images/tier/${toLowerCaseString(tier) || "unrank"
-              }.svg`}
+            data={`/assets/images/tier/${
+              toLowerCaseString(tier) || "unrank"
+            }.svg`}
             width={26}
             height={26}
           />