feat: (#740) 알림아이콘 컴포넌트 제작 및 마이페이지 아이콘과 교체

woowacourse-teams · Oct 13, 2023 · 386a986 · 386a986
1 parent 200b854
commit 386a986
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 18 deletions.
diff --git a/frontend/src/assets/bell.png b/frontend/src/assets/bell.png
diff --git a/frontend/src/components/common/Dashboard/UserProfile/index.tsx b/frontend/src/components/common/Dashboard/UserProfile/index.tsx
@@ -1,3 +1,5 @@
+import { useNavigate } from 'react-router-dom';
+
 import { User } from '@type/user';
 
 import { PATH } from '@constants/path';
@@ -12,11 +14,18 @@ interface UserProfileProps {
 }
 
 export default function UserProfile({ userInfo }: UserProfileProps) {
+ const navigate = useNavigate();
  const { nickname, postCount, voteCount } = userInfo;
 
+ const moveUserInfoPage = () => {
+ navigate(PATH.USER_INFO);
+ };
+
  return (
  <PS.ProfileContainer role="region" aria-label="회원 프로필">
- <S.NickName>{nickname}</S.NickName>
+ <S.NickName onClick={moveUserInfoPage}>
+ {nickname} <S.Img src={arrowRight} alt="마이페이지 이동 화살표" />
+ </S.NickName>
  <S.UserInfoContainer>
  <S.TextCardLink to={PATH.USER_POST}>
  <S.TextCardTitle>

diff --git a/frontend/src/components/common/IconButton/IconButton.stories.tsx b/frontend/src/components/common/IconButton/IconButton.stories.tsx
@@ -38,7 +38,7 @@ export const Retry: Story = {
 };
 
 export const UserInfo: Story = {
- render: () => <IconButton category="userInfo" />,
+ render: () => <IconButton category="alarm" />,
 };
 
 export const Ranking: Story = {

diff --git a/frontend/src/components/common/IconButton/index.tsx b/frontend/src/components/common/IconButton/index.tsx
@@ -1,15 +1,15 @@
 import { ButtonHTMLAttributes } from 'react';
 
 import backIcon from '@assets/back.svg';
+import bellIcon from '@assets/bell.png';
 import categoryIcon from '@assets/category.svg';
 import ranking from '@assets/ranking.png';
 import retryIcon from '@assets/retry.svg';
 import searchIcon from '@assets/search_white.svg';
-import userInfo from '@assets/user.png';
 
 import * as S from './style';
 
-type IconCategory = 'category' | 'back' | 'search' | 'retry' | 'userInfo' | 'ranking';
+type IconCategory = 'category' | 'back' | 'search' | 'retry' | 'alarm' | 'ranking';
 
 interface IconInfo {
  name: string;
@@ -38,9 +38,9 @@ const ICON_CATEGORY: Record<IconCategory, IconInfo> = {
  url: retryIcon,
  isRoundBackground: false,
  },
- userInfo: {
- name: '사용자 페이지 이동',
- url: userInfo,
+ alarm: {
+ name: '알림',
+ url: bellIcon,
  isRoundBackground: true,
  },
  ranking: {

diff --git a/frontend/src/components/common/IconButton/style.ts b/frontend/src/components/common/IconButton/style.ts
@@ -5,7 +5,12 @@ export const Button = styled.button<{ $isRoundBackground: boolean }>`
  height: 35px;
  border-radius: 50%;
 
- background-color: ${props => (props.$isRoundBackground ? 'var(--gray)' : 'rgba(0, 0, 0, 0)')};
+ background-color: ${props => (props.$isRoundBackground ? 'var(--gray)' : '')};
 
  cursor: pointer;
+
+ > * {
+ width: ${props => props.$isRoundBackground && '25px'};
+ height: ${props => props.$isRoundBackground && '25px'};
+ }
 `;
diff --git a/frontend/src/components/common/NarrowMainHeader/index.tsx b/frontend/src/components/common/NarrowMainHeader/index.tsx
@@ -28,10 +28,6 @@ export default function NarrowMainHeader({ handleMenuOpenClick }: NarrowMainHead
  navigate('/');
  };
 
- const moveUserInfoPage = () => {
- navigate(PATH.USER_INFO);
- };
-
  const moveRankingPage = () => {
  navigate(PATH.RANKING);
  };
@@ -47,7 +43,7 @@ export default function NarrowMainHeader({ handleMenuOpenClick }: NarrowMainHead
  <IconButton category="category" onClick={handleMenuOpenClick} />
  <LogoButton content="icon" onClick={movePostListPage} />
  <IconButton category="search" onClick={openSearchInput} />
- <IconButton category="userInfo" onClick={moveUserInfoPage} />
+ <IconButton category="alarm" onClick={() => {}} />
  <IconButton category="ranking" onClick={moveRankingPage} />
  </S.Container>
  );

diff --git a/frontend/src/components/common/WideHeader/index.tsx b/frontend/src/components/common/WideHeader/index.tsx
@@ -15,10 +15,6 @@ export default function WideHeader() {
  navigate('/');
  };
 
- const moveUserInfoPage = () => {
- navigate(PATH.USER_INFO);
- };
-
  const moveRankingPage = () => {
  navigate(PATH.RANKING);
  };
@@ -30,7 +26,7 @@ export default function WideHeader() {
  </S.LogoWrapper>
  <S.Wrapper>
  <SearchBar size="sm" />
- <IconButton category="userInfo" onClick={moveUserInfoPage} />
+ <IconButton category="alarm" onClick={moveRankingPage} />
  <IconButton category="ranking" onClick={moveRankingPage} />
  </S.Wrapper>
  </S.Container>