fix: 후기 관련 버그를 수정한다 (#749)

* refactor: 프리뷰 모드에서 답글 보기가 불가능하도록 수정 [#740] * fix: 애플 기기에서 지도가 바운스 되는 문제 수정 [#740] * refactor: 스크롤 방지를 GlobalStyle에서 정적인 파일로 수정 [#740] * refactor: 더이상 답글이 없는 경우를 알리지 않도록 개선 [#740] * refactor: 평점을 0.xx 단위로 자르도록 개선 [#740] * refactor: 평점을 0.x 단위로 자르도록 개선 [#740] * meta description 수정 [#740] * feat: 설문조사 버튼 추가 [#740] * style: 개행 추가 [#740] * refactor: 설문조사 하기로 변경 [#740]
woowacourse-teams · Sep 15, 2023 · d0e8d06 · d0e8d06
1 parent 4819297
commit d0e8d06
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 32 deletions.
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0" name="viewport" />
+    <meta name="description" content="편리한 전기차 충전소 지도"/>
 
     <meta name="apple-mobile-web-app-title" content="카페인" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
@@ -85,4 +86,9 @@
       gtag('config', 'G-Z5MN0ZWS8M');
     </script>
   </body>
+  <style>
+    body{
+      overflow: hidden;
+    }
+  </style>
 </html>
diff --git a/frontend/src/components/ui/StationDetailsWindow/reviews/previews/ReviewPreview.tsx b/frontend/src/components/ui/StationDetailsWindow/reviews/previews/ReviewPreview.tsx
@@ -68,7 +68,7 @@ const ReviewPreview = ({ stationId }: ReviewPreviewProps) => {
               return (
                 <ReviewCard
                   key={i}
-                  stationId={''}
+                  stationId=""
                   review={{
                     content: review.content,
                     isDeleted: review.isDeleted,

diff --git a/frontend/src/components/ui/StationDetailsWindow/reviews/previews/UserRatings.tsx b/frontend/src/components/ui/StationDetailsWindow/reviews/previews/UserRatings.tsx
@@ -44,7 +44,7 @@ const UserRatings = ({ stationId }: UserRatingsProps) => {
         <Text variant="subtitle" css={ratingCss}>
           <StarIcon width={14} display="inline-block" fill="#fc4c4e" />
           <Text tag="span" color="#3e3e3e" weight="bold">
-            {totalRatings.totalRatings}
+            {parseFloat(totalRatings.totalRatings.toFixed(1))}
           </Text>
           ({totalRatings.totalCount}명)
         </Text>

diff --git a/frontend/src/components/ui/StationDetailsWindow/reviews/replies/ReplyList.tsx b/frontend/src/components/ui/StationDetailsWindow/reviews/replies/ReplyList.tsx
@@ -22,7 +22,7 @@ const ReplyList = ({ stationId, reviewId, previewMode }: ReplyListProps) => {
   return (
     <>
       {status === 'loading' ? (
-        <ReplyListLoading count={5} />
+        <ReplyListLoading count={1} />
       ) : status === 'error' ? (
         <Text variant="caption" align="center">
           Error: {JSON.stringify(error)}
@@ -47,24 +47,22 @@ const ReplyList = ({ stationId, reviewId, previewMode }: ReplyListProps) => {
               ))}
             </div>
           ))}
-          {isFetchingNextPage && <ReplyListLoading count={5} />}
-          <Box pl={8} pr={4} my={3}>
-            <ButtonNext
-              size="xs"
-              py={2}
-              color="secondary"
-              variant="contained"
-              onClick={() => fetchNextPage()}
-              disabled={!hasNextPage || isFetchingNextPage}
-              fullWidth
-            >
-              {isFetchingNextPage
-                ? '로딩중...'
-                : hasNextPage
-                ? '답글 더 보기'
-                : '더 이상 답글이 없습니다.'}
-            </ButtonNext>
-          </Box>
+          {isFetchingNextPage && <ReplyListLoading count={1} />}
+          {hasNextPage && (
+            <Box pl={8} pr={4} my={3}>
+              <ButtonNext
+                size="xs"
+                py={2}
+                color="secondary"
+                variant="contained"
+                onClick={() => fetchNextPage()}
+                disabled={!hasNextPage || isFetchingNextPage}
+                fullWidth
+              >
+                {isFetchingNextPage ? '로딩중...' : '답글 더 보기'}
+              </ButtonNext>
+            </Box>
+          )}
         </>
       )}
     </>

diff --git a/frontend/src/components/ui/StationDetailsWindow/reviews/reviews/ReviewCard.tsx b/frontend/src/components/ui/StationDetailsWindow/reviews/reviews/ReviewCard.tsx
@@ -107,10 +107,13 @@ const ReviewCard = ({ stationId, review, previewMode }: ReviewCardProps) => {
                 {review.isDeleted ? '(삭제된 리뷰입니다.)' : review.content}
               </Text>
             </Box>
-
-            <ButtonNext size="xs" variant="text" onClick={() => setIsRepliesOpen(!isRepliesOpen)}>
-              {isRepliesOpen ? `닫기` : `답글 ${review.replySize > 0 ? review.replySize : '달기'}`}
-            </ButtonNext>
+            {!previewMode && (
+              <ButtonNext size="xs" variant="text" onClick={() => setIsRepliesOpen(!isRepliesOpen)}>
+                {isRepliesOpen
+                  ? `닫기`
+                  : `답글 ${review.replySize > 0 ? review.replySize : '달기'}`}
+              </ButtonNext>
+            )}
           </Box>
 
           {isRepliesOpen && (

diff --git a/frontend/src/components/ui/StationDetailsWindow/reviews/reviews/ReviewList.tsx b/frontend/src/components/ui/StationDetailsWindow/reviews/reviews/ReviewList.tsx
@@ -48,7 +48,7 @@ export default function ReviewList({ stationId }: ReviewListProps) {
           충전소 후기 보기
         </Text>
         {status === 'loading' ? (
-          <ReviewCardsLoading count={10} />
+          <ReviewCardsLoading count={1} />
         ) : status === 'error' ? (
           <Text variant="caption" align="center">
             Error: {JSON.stringify(error)}

diff --git a/frontend/src/components/ui/compound/NavigationBar/Menu.tsx b/frontend/src/components/ui/compound/NavigationBar/Menu.tsx
@@ -1,4 +1,9 @@
-import { AdjustmentsHorizontalIcon, Bars3Icon, UserCircleIcon } from '@heroicons/react/24/outline';
+import {
+  AdjustmentsHorizontalIcon,
+  Bars3Icon,
+  MegaphoneIcon,
+  UserCircleIcon,
+} from '@heroicons/react/24/outline';
 import { ArrowRightOnRectangleIcon, PencilSquareIcon } from '@heroicons/react/24/solid';
 import { css } from 'styled-components';
 
@@ -13,8 +18,8 @@ import { modalActions } from '@stores/layout/modalStore';
 import { memberTokenStore } from '@stores/login/memberTokenStore';
 import {
   selectedCapacitiesFilterStore,
-  selectedConnectorTypesFilterStore,
   selectedCompaniesFilterStore,
+  selectedConnectorTypesFilterStore,
 } from '@stores/station-filters/serverStationFiltersStore';
 
 import Button from '@common/Button';
@@ -103,6 +108,12 @@ const Menu = () => {
       >
         <Bars3Icon width="2.8rem" stroke="#333" />
       </Button>
+      <Button
+        aria-label="설문조사 하기"
+        onClick={() => window.open('https://forms.gle/YQKx1zchUifjUJ396')}
+      >
+        <MegaphoneIcon width="2.8rem" stroke="#333" />
+      </Button>
     </FlexBox>
   );
 };

diff --git a/frontend/src/style/GlobalStyle.ts b/frontend/src/style/GlobalStyle.ts
@@ -27,17 +27,14 @@ export const GlobalStyle = createGlobalStyle`
     --gray-200-color: #ebebeb;
   }
 
-  #map {
-    overflow: hidden;
-  }
-
   body:has(.modal-open) {
     overflow: hidden;
   }
 
   button.gm-ui-hover-effect {
     visibility: hidden;
   }
+
   div.gm-style .gm-style-iw-c {
     padding: 0;
   }