Fix/#671 (UserProfile 밑줄 제거 등 UI 수정) (#680)

* fix: (#671) 복사된 링크로 접속 시 뒤로 가기 버튼이 작동하지 않는 이슈 해결 * design: (#671) 댓글 textarea의 placeholder font 스타일 수정 * design: (#672) 링크 넣기 버튼 font 크기 수정 * fix: (#672) 작성글/투표글 수 밑줄 제거, 화살표 아이콘으로 대체 * design: (#672) 화살표 이미지 width, height 수정 * chore: (#672) 화살표 위치 수정 * design: (#672) 랭킹 페이지 table의 헤더 및 내 랭킹 font weight 변경
woowacourse-teams · Sep 21, 2023 · 7d7e184 · 7d7e184
1 parent fdf055d
commit 7d7e184
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 18 deletions.
diff --git a/frontend/src/assets/arrow-right.png b/frontend/src/assets/arrow-right.png
diff --git a/frontend/src/components/comment/CommentList/CommentTextForm/style.ts b/frontend/src/components/comment/CommentList/CommentTextForm/style.ts
@@ -19,6 +19,17 @@ export const TextArea = styled.textarea`
 
   resize: none;
 
+  &::placeholder {
+    font-size: 14px;
+  }
+
+  @media (max-width: ${theme.breakpoint.sm}) {
+    &::placeholder {
+      font-size: 12px;
+      line-height: 2rem;
+    }
+  }
+
   @media (min-width: ${theme.breakpoint.sm}) {
     height: 160px;
 
@@ -35,14 +46,13 @@ export const ButtonContainer = styled.div`
 `;
 
 export const ButtonWrapper = styled.div`
-  width: 60px;
+  width: 90px;
   height: 40px;
 
   font: var(--text-caption);
   font-weight: 600;
 
   @media (min-width: ${theme.breakpoint.sm}) {
-    width: 74px;
     height: 46px;
 
     font: var(--text-body);

diff --git a/frontend/src/components/common/Dashboard/UserProfile/index.tsx b/frontend/src/components/common/Dashboard/UserProfile/index.tsx
@@ -2,10 +2,11 @@ import { User } from '@type/user';
 
 import { PATH } from '@constants/path';
 
+import arrowRight from '@assets/arrow-right.png';
+
 import * as PS from '../profileStyle';
 
 import * as S from './style';
-
 interface UserProfileProps {
   userInfo: User;
 }
@@ -18,11 +19,16 @@ export default function UserProfile({ userInfo }: UserProfileProps) {
       <S.NickName>{nickname}</S.NickName>
       <S.UserInfoContainer>
         <S.TextCardLink to={PATH.USER_POST}>
-          <S.TextCardTitle>작성글</S.TextCardTitle>
+          <S.TextCardTitle>
+            작성글 <S.Img src={arrowRight} alt="작성글 페이지 이동 화살표" />
+          </S.TextCardTitle>
           <S.TextCardContent>{postCount}</S.TextCardContent>
         </S.TextCardLink>
         <S.TextCardLink to={PATH.USER_VOTE}>
-          <S.TextCardTitle>투표수</S.TextCardTitle>
+          <S.TextCardTitle>
+            투표수
+            <S.Img src={arrowRight} alt="투표글 페이지 이동 화살표" />
+          </S.TextCardTitle>
           <S.TextCardContent>{voteCount}</S.TextCardContent>
         </S.TextCardLink>
       </S.UserInfoContainer>

diff --git a/frontend/src/components/common/Dashboard/UserProfile/style.ts b/frontend/src/components/common/Dashboard/UserProfile/style.ts
@@ -33,12 +33,21 @@ export const TextCardLink = styled(Link)`
 `;
 
 export const TextCardTitle = styled.span`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+
   font: var(--text-caption);
-  text-decoration: underline;
-  text-underline-position: under;
+  font-weight: 600;
+  text-decoration: none;
 `;
 
 export const TextCardContent = styled.span`
   font: var(--text-caption);
   text-align: center;
 `;
+
+export const Img = styled.img`
+  width: 10px;
+  height: 10px;
+`;
diff --git a/frontend/src/components/common/SquareButton/style.ts b/frontend/src/components/common/SquareButton/style.ts
@@ -42,8 +42,4 @@ export const Button = styled.button<ButtonProps>`
   @media (min-width: ${theme.breakpoint.sm}) {
     font: var(--text-body);
   }
-
-  @media (max-width: ${theme.breakpoint.sm}) {
-    font-size: 12px;
-  }
 `;
diff --git a/frontend/src/pages/Ranking/PassionUser/style.ts b/frontend/src/pages/Ranking/PassionUser/style.ts
@@ -25,7 +25,7 @@ export const Tbody = styled.tbody`
 
     background-color: var(--white);
 
-    font-weight: 500;
+    font-weight: 600;
   }
 `;
 
@@ -39,6 +39,7 @@ export const Th = styled.th`
   padding: 10px 0;
 
   font: var(--text-body);
+  font-weight: 600;
 `;
 
 export const RankingTd = styled.td`

diff --git a/frontend/src/pages/Ranking/PopularPost/style.ts b/frontend/src/pages/Ranking/PopularPost/style.ts
@@ -17,6 +17,7 @@ export const Th = styled.th`
   padding: 10px 0;
 
   font: var(--text-body);
+  font-weight: 600;
 `;
 
 export const RankingTd = styled.td`

diff --git a/frontend/src/pages/post/PostDetail/InnerHeaderPart/index.tsx b/frontend/src/pages/post/PostDetail/InnerHeaderPart/index.tsx
@@ -12,6 +12,8 @@ import PostMenu from '@components/common/PostMenu';
 import TagButton from '@components/common/TagButton';
 import ReportModal from '@components/ReportModal';
 
+import { PATH } from '@constants/path';
+
 import { LoadingType } from '../types';
 
 import * as S from './style';
@@ -62,14 +64,17 @@ export default function InnerHeaderPart({
     setAction(null);
   };
 
+  const handleBackButtonClick = () => {
+    if (window.history.length > 1) {
+      navigate(-1);
+      return;
+    }
+    navigate(PATH.HOME);
+  };
+
   return (
     <>
-      <IconButton
-        category="back"
-        onClick={() => {
-          navigate(-1);
-        }}
-      />
+      <IconButton category="back" onClick={handleBackButtonClick} />
       <S.HeaderWrapper>
         {!isWriter ? (
           <>