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 ? (
  <>