design: 카페인 로고가 모바일 화면에서도 보이고 새로고침 역할을 하도록 개선한다 (#751)

* design: 카페인 로고가 모바일 화면에서도 보이고 새로고침 역할을 하도록 개선 [#750] * refactor: 미사용 코드 제거 [#750] * fix: 데이터 생성 타입 버그 수정 [#750] * design: 아이콘 수정 [#750] * refactor: 로고에 새로고침 기능 추가 [#750]
woowacourse-teams · Sep 15, 2023 · 4c9209b · 4c9209b
1 parent d0e8d06
commit 4c9209b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/frontend/src/components/ui/compound/NavigationBar/Menu.tsx b/frontend/src/components/ui/compound/NavigationBar/Menu.tsx
@@ -1,13 +1,9 @@
-import {
-  AdjustmentsHorizontalIcon,
-  Bars3Icon,
-  MegaphoneIcon,
-  UserCircleIcon,
-} from '@heroicons/react/24/outline';
+import { AdjustmentsHorizontalIcon, Bars3Icon, UserCircleIcon } from '@heroicons/react/24/outline';
 import { ArrowRightOnRectangleIcon, PencilSquareIcon } from '@heroicons/react/24/solid';
 import { css } from 'styled-components';
 
 import type { PropsWithChildren } from 'react';
+import { HiArrowPath, HiOutlineChatBubbleOvalLeftEllipsis } from 'react-icons/hi2';
 
 import { useQueryClient } from '@tanstack/react-query';
 
@@ -83,7 +79,14 @@ const Menu = () => {
 
   return (
     <FlexBox css={[fixedPositionCss, paddingCss, borderCss, flexCss]} noRadius="all" nowrap>
-      <LogoIcon width={3} />
+      <Button css={displayNoneInMobile} aria-label="새로 고침" onClick={() => location.reload()}>
+        <LogoIcon width={3} />
+      </Button>
+
+      <Button css={displayNoneInWeb} aria-label="새로 고침" onClick={() => location.reload()}>
+        <HiArrowPath size="2.8rem" stroke="#333" />
+      </Button>
+
       <Button
         css={displayNoneInMobile}
         aria-label="주변 충전소 목록 열기"
@@ -112,7 +115,7 @@ const Menu = () => {
         aria-label="설문조사 하기"
         onClick={() => window.open('https://forms.gle/YQKx1zchUifjUJ396')}
       >
-        <MegaphoneIcon width="2.8rem" stroke="#333" />
+        <HiOutlineChatBubbleOvalLeftEllipsis size="2.8rem" stroke="#333" color="#333" />
       </Button>
     </FlexBox>
   );

diff --git a/frontend/src/mocks/handlers/station-details/reviews/stationReviewHandlers.ts b/frontend/src/mocks/handlers/station-details/reviews/stationReviewHandlers.ts
@@ -11,7 +11,9 @@ export const stationReviewHandlers = [
     const max = 2000;
     return res(
       ctx.json({
-        totalRatings: (validReviews.reduce((a, b) => a + b.ratings, 0) / reviews.length).toFixed(2),
+        totalRatings: parseFloat(
+          (validReviews.reduce((a, b) => a + b.ratings, 0) / reviews.length).toFixed(2)
+        ),
         totalCount: Math.floor(Math.random() * (max - min + 1)) + min,
       }),
       ctx.delay(1000),