fix: 상세 정보 페이지의 버그를 수정한다

frontend/src/components/ui/StationDetailsWindow/reports/charger/ChargerReportButton.tsx

@@ -1,4 +1,5 @@
 import { modalActions } from '@stores/layout/modalStore';
+import { memberInfoStore } from '@stores/login/memberInfoStore';
 import { memberTokenStore } from '@stores/login/memberTokenStore';
 
 import { useStationChargerReport } from '@hooks/tanstack-query/station-details/reports/useStationChargerReport';
@@ -9,14 +10,16 @@ import Skeleton from '@common/Skeleton';
 
 import ChargerReportConfirmation from '@ui/StationDetailsWindow/reports/charger/ChargerReportConfirmation';
 
+import { DEFAULT_TOKEN } from '@constants';
+
 interface ChargerReportButtonProps {
   stationId: string;
 }
 
 const ChargerReportButton = ({ stationId }: ChargerReportButtonProps) => {
   const { data: isStationChargerReported, isLoading: isStationChargerReportedLoading } =
     useStationChargerReport(stationId);
-  const memberToken = memberTokenStore.getState();
+  const memberId = memberInfoStore.getState()?.memberId;
 
   return (
     <>
@@ -30,15 +33,19 @@ const ChargerReportButton = ({ stationId }: ChargerReportButtonProps) => {
             size="sm"
             color="secondary"
             onClick={() => {
-              if (memberToken === '') {
+              if (memberId === DEFAULT_TOKEN) {
                 alert('로그인이 필요한 메뉴입니다.');
               } else {
                 modalActions.openModal(<ChargerReportConfirmation stationId={stationId} />);
               }
             }}
-            disabled={isStationChargerReported}
+            disabled={memberId === DEFAULT_TOKEN || isStationChargerReported}
           >
-            {isStationChargerReported ? '이미 신고한 충전소입니다.' : '🚨 충전기 고장 신고 '}
+            {memberId === DEFAULT_TOKEN
+              ? '로그인이 필요한 메뉴입니다.'
+              : isStationChargerReported
+              ? '이미 신고한 충전소입니다.'
+              : '🚨 충전기 고장 신고 '}
           </ButtonNext>
         )}
       </Box>

frontend/src/components/ui/StationDetailsWindow/reports/station/StationReportButton.tsx

@@ -1,18 +1,21 @@
 import { modalActions } from '@stores/layout/modalStore';
+import { memberInfoStore } from '@stores/login/memberInfoStore';
 import { memberTokenStore } from '@stores/login/memberTokenStore';
 
 import ButtonNext from '@common/ButtonNext';
 
 import StationReportPreConfirmation from '@ui/StationDetailsWindow/reports/station/StationReportPreConfirmation';
 
+import { DEFAULT_TOKEN } from '@constants';
+
 import type { StationDetails } from '@type';
 
 interface StationReportButtonProps {
   station: StationDetails;
 }
 
 const StationReportButton = ({ station }: StationReportButtonProps) => {
-  const memberToken = memberTokenStore.getState();
+  const memberId = memberInfoStore.getState().memberId;
 
   return (
     <ButtonNext
@@ -21,15 +24,16 @@ const StationReportButton = ({ station }: StationReportButtonProps) => {
       size="sm"
       color="secondary"
       my={3}
+      disabled={memberId === DEFAULT_TOKEN}
       onClick={() => {
-        if (memberToken === '') {
+        if (memberId === DEFAULT_TOKEN) {
           alert('로그인이 필요한 메뉴입니다.');
         } else {
           modalActions.openModal(<StationReportPreConfirmation station={station} />);
         }
       }}
     >
-      📝 충전소 정보 수정 제안하기
+      {memberId === DEFAULT_TOKEN ? '로그인이 필요한 메뉴입니다.' : '📝 충전소 정보 수정 제안하기'}
     </ButtonNext>
   );
 };

frontend/src/components/ui/StationDetailsWindow/reviews/previews/ReviewPreview.tsx

@@ -77,7 +77,7 @@ const ReviewPreview = ({ stationId }: ReviewPreviewProps) => {
                     reviewId: review.reviewId,
                     memberId: review.memberId,
                   }}
-                  previewMode
+                  previewMode={true}
                 />
               );
             })}

frontend/src/components/ui/StationDetailsWindow/reviews/replies/ReplyCard.tsx

@@ -27,10 +27,10 @@ interface ReplyCardProps {
 
 const ReplyCard = ({ stationId, reply, reviewId, previewMode }: ReplyCardProps) => {
   const [isModifyMode, setIsModifyMode] = useState(false);
-  const { removeReply, isRemoveReplyLoading } = useRemoveReply(stationId);
+  const { removeReply, isRemoveReplyLoading } = useRemoveReply(stationId, reviewId);
   const memberId = memberInfoStore.getState()?.memberId;
-  const isReplyOwner = memberId !== reply.memberId;
-  const isEditable = (isReplyOwner || reply.isDeleted) && !previewMode;
+  const isReplyOwner = memberId === reply.memberId;
+  const isEditable = isReplyOwner && !reply.isDeleted && !previewMode;
 
   const handleClickRemoveReplyButton = () => {
     if (confirm('정말로 삭제하시겠습니까?')) {
@@ -63,7 +63,11 @@ const ReplyCard = ({ stationId, reply, reviewId, previewMode }: ReplyCardProps)
               </Text>
             </Box>
             {!isEditable ? (
-              <Text>!{JSON.stringify(memberId)}!</Text>
+              <Text>
+                !{JSON.stringify(memberId)}
+                {JSON.stringify(reply.isDeleted)}
+                {JSON.stringify(previewMode)}!
+              </Text>
             ) : (
               <div>
                 <ButtonNext

frontend/src/components/ui/StationDetailsWindow/reviews/replies/ReplyCreate.tsx

@@ -2,6 +2,7 @@ import { css } from 'styled-components';
 
 import { useEffect, useState } from 'react';
 
+import { memberInfoStore } from '@stores/login/memberInfoStore';
 import { memberTokenStore } from '@stores/login/memberTokenStore';
 
 import { useCreateReply } from '@hooks/tanstack-query/station-details/reviews/useCreateReply';
@@ -13,7 +14,7 @@ import Text from '@common/Text';
 
 import ContentField from '@ui/StationDetailsWindow/reviews/common/ContentField';
 
-import { MAX_REVIEW_CONTENT_LENGTH, MIN_REVIEW_CONTENT_LENGTH } from '@constants';
+import { DEFAULT_TOKEN, MAX_REVIEW_CONTENT_LENGTH, MIN_REVIEW_CONTENT_LENGTH } from '@constants';
 
 interface ReplyCreateProps {
   stationId: string;
@@ -24,7 +25,7 @@ const ReplyCreate = ({ stationId, reviewId }: ReplyCreateProps) => {
   const { isCreateReplyLoading, createReply } = useCreateReply(stationId);
   const [content, setContent] = useState('');
   const [isReplyCreateOpen, setIsReplyCreateOpen] = useState(true);
-  const memberToken = memberTokenStore.getState();
+  const memberId = memberInfoStore.getState()?.memberId;
 
   useEffect(() => {
     if (isCreateReplyLoading && isReplyCreateOpen) {
@@ -38,7 +39,7 @@ const ReplyCreate = ({ stationId, reviewId }: ReplyCreateProps) => {
     setContent('');
   };
 
-  if (!isReplyCreateOpen || memberToken === '') {
+  if (!isReplyCreateOpen || memberId === DEFAULT_TOKEN) {
     return <></>;
   }
 

frontend/src/components/ui/StationDetailsWindow/reviews/replies/ReplyList.tsx

@@ -12,9 +12,10 @@ import ReplyListLoading from '@ui/StationDetailsWindow/reviews/replies/ReplyList
 interface ReplyListProps {
   stationId: string;
   reviewId: number;
+  previewMode: boolean;
 }
 
-const ReplyList = ({ stationId, reviewId }: ReplyListProps) => {
+const ReplyList = ({ stationId, reviewId, previewMode }: ReplyListProps) => {
   const { status, data, error, isFetchingNextPage, fetchNextPage, hasNextPage } =
     useInfiniteReplies(reviewId);
 
@@ -41,7 +42,7 @@ const ReplyList = ({ stationId, reviewId }: ReplyListProps) => {
                   stationId={stationId}
                   reply={reply}
                   reviewId={reviewId}
-                  previewMode={true}
+                  previewMode={previewMode}
                 />
               ))}
             </div>

frontend/src/components/ui/StationDetailsWindow/reviews/replies/ReplyModify.tsx

@@ -22,7 +22,7 @@ interface ReplyModifyProps {
 
 const ReplyModify = ({ stationId, reply, reviewId, setIsModifyMode }: ReplyModifyProps) => {
   const [content, setContent] = useState(reply.content);
-  const { modifyReply, isModifyReplyLoading } = useModifyReply(stationId);
+  const { modifyReply, isModifyReplyLoading } = useModifyReply(stationId, reviewId);
 
   const handleClickModifyReply = () => {
     modifyReply({ replyId: reply.replyId, content, reviewId });

frontend/src/components/ui/StationDetailsWindow/reviews/reviews/ReviewCard.tsx

@@ -27,13 +27,13 @@ export interface ReviewCardProps {
 }
 
 const ReviewCard = ({ stationId, review, previewMode }: ReviewCardProps) => {
-  const { isRemoveReviewLoading, removeReview } = useRemoveReview(stationId);
+  const { isRemoveReviewLoading, removeReview } = useRemoveReview(stationId, review.reviewId);
   const [isRepliesOpen, setIsRepliesOpen] = useState(false);
   const [isModifyMode, setIsModifyMode] = useState(false);
   const memberId = memberInfoStore.getState()?.memberId;
 
-  const isReviewOwner = memberId !== review.memberId;
-  const isEditable = (isReviewOwner || review.isDeleted) && !previewMode;
+  const isReviewOwner = memberId === review.memberId;
+  const isEditable = isReviewOwner && !review.isDeleted && !previewMode;
 
   const handleClickRemoveReviewButton = () => {
     if (confirm('정말로 삭제하시겠습니까?')) {
@@ -72,7 +72,11 @@ const ReviewCard = ({ stationId, review, previewMode }: ReviewCardProps) => {
                 </Box>
                 <FlexBox>
                   {!isEditable ? (
-                    <Text>!{JSON.stringify(memberId)}!</Text>
+                    <Text>
+                      !{JSON.stringify(memberId)}
+                      {JSON.stringify(review.isDeleted)}
+                      {JSON.stringify(previewMode)}!
+                    </Text>
                   ) : (
                     <>
                       <ButtonNext
@@ -112,7 +116,11 @@ const ReviewCard = ({ stationId, review, previewMode }: ReviewCardProps) => {
 
           {isRepliesOpen && (
             <>
-              <ReplyList reviewId={review.reviewId} stationId={stationId} />
+              <ReplyList
+                reviewId={review.reviewId}
+                stationId={stationId}
+                previewMode={previewMode}
+              />
               <ReplyCreate stationId={stationId} reviewId={review.reviewId} />
             </>
           )}

frontend/src/components/ui/StationDetailsWindow/reviews/reviews/ReviewCreate.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 
 import { modalActions } from '@stores/layout/modalStore';
+import { memberInfoStore } from '@stores/login/memberInfoStore';
 import { memberTokenStore } from '@stores/login/memberTokenStore';
 
 import { useCreateReview } from '@hooks/tanstack-query/station-details/reviews/useCreateReview';
@@ -12,7 +13,7 @@ import FlexBox from '@common/FlexBox';
 import ContentField from '@ui/StationDetailsWindow/reviews/common/ContentField';
 import HeaderWithRating from '@ui/StationDetailsWindow/reviews/common/HeaderWithRating';
 
-import { MAX_REVIEW_CONTENT_LENGTH, MIN_REVIEW_CONTENT_LENGTH } from '@constants';
+import { DEFAULT_TOKEN, MAX_REVIEW_CONTENT_LENGTH, MIN_REVIEW_CONTENT_LENGTH } from '@constants';
 
 interface ReviewCreateProps {
   stationId: string;
@@ -23,7 +24,7 @@ const ReviewCreate = ({ stationId }: ReviewCreateProps) => {
   const [isReviewCreateOpen, setIsReviewCreateOpen] = useState(false);
   const [stars, setStars] = useState(5);
   const [content, setContent] = useState('');
-  const memberToken = memberTokenStore.getState();
+  const memberId = memberInfoStore.getState().memberId;
 
   useEffect(() => {
     if (!isCreateReviewLoading && isReviewCreateOpen) {
@@ -88,7 +89,7 @@ const ReviewCreate = ({ stationId }: ReviewCreateProps) => {
             </ButtonNext>
             <ButtonNext
               variant="contained"
-              disabled={memberToken === ''}
+              disabled={memberId === DEFAULT_TOKEN}
               fullWidth
               onClick={handleClickReviewCreateOpenButton}
             >

frontend/src/components/ui/StationDetailsWindow/reviews/reviews/ReviewList.tsx

@@ -48,7 +48,7 @@ export default function ReviewList({ stationId }: ReviewListProps) {
                     key={review.reviewId}
                     stationId={stationId}
                     review={review}
-                    previewMode
+                    previewMode={false}
                   />
                 ))}
               </div>

frontend/src/components/ui/StationDetailsWindow/reviews/reviews/ReviewModifyButton.tsx

@@ -28,7 +28,7 @@ const ReviewModifyButton = ({
   stars,
   content,
 }: ReviewModifyButtonProps) => {
-  const { modifyReview, isModifyReviewLoading } = useModifyReview(stationId);
+  const { modifyReview, isModifyReviewLoading } = useModifyReview(stationId, review.reviewId);
   const handleClickCloseModifyMode = () => {
     setIsModifyMode(false);
   };

frontend/src/constants/index.ts

@@ -16,5 +16,5 @@ export const FORM_OPERATING_TIME_LENGTH_LIMIT = 50;
 export const FORM_CONTACT_LENGTH_LIMIT = 20;
 export const FORM_PRIVATE_REASON_LENGTH_LIMIT = 100;
 
-export const MIN_REVIEW_CONTENT_LENGTH = 5;
+export const MIN_REVIEW_CONTENT_LENGTH = 10;
 export const MAX_REVIEW_CONTENT_LENGTH = 100;

frontend/src/constants/queryKeys.ts

@@ -8,3 +8,4 @@ export const QUERY_KEY_MEMBER_SELECTED_FILTERS = 'memberFilters';
 export const QUERY_KEY_MEMBER_CAR_FILTERS = 'memberCarFilters';
 export const QUERY_KEY_STATION_PREVIEWS = 'previews';
 export const QUERY_KEY_STATION_REVIEWS = 'reviews';
+export const QUERY_KEY_STATION_REPLIES = 'replies';

frontend/src/hooks/tanstack-query/station-details/reviews/useInfiniteReplies.ts

@@ -3,6 +3,7 @@ import { useInfiniteQuery } from '@tanstack/react-query';
 import { serverStore } from '@stores/config/serverStore';
 
 import { SERVERS } from '@constants';
+import { QUERY_KEY_STATION_REPLIES, QUERY_KEY_STATION_REVIEWS } from '@constants/queryKeys';
 
 import type { Reply } from '@type';
 
@@ -13,7 +14,7 @@ interface InfiniteRepliesResponse {
 
 export const useInfiniteReplies = (reviewId: number) => {
   return useInfiniteQuery<InfiniteRepliesResponse>(
-    ['replies', reviewId],
+    [QUERY_KEY_STATION_REPLIES, reviewId],
     async ({ pageParam = 0 }) => {
       const mode = serverStore.getState();
       const res = await fetch(`${SERVERS[mode]}/reviews/${reviewId}/replies?page=${pageParam}`);

frontend/src/hooks/tanstack-query/station-details/reviews/useInfiniteReviews.ts

@@ -3,6 +3,7 @@ import { useInfiniteQuery } from '@tanstack/react-query';
 import { serverStore } from '@stores/config/serverStore';
 
 import { SERVERS } from '@constants';
+import { QUERY_KEY_STATION_REVIEWS } from '@constants/queryKeys';
 
 import type { Review } from '@type';
 
@@ -13,7 +14,7 @@ interface InfiniteRepliesResponse {
 
 export const useInfiniteReviews = (stationId: string) => {
   return useInfiniteQuery<InfiniteRepliesResponse>(
-    ['reviews', stationId],
+    [QUERY_KEY_STATION_REVIEWS, stationId],
     async ({ pageParam = 0 }) => {
       const mode = serverStore.getState();
       const res = await fetch(`${SERVERS[mode]}/stations/${stationId}/reviews/?page=${pageParam}`);

frontend/src/hooks/tanstack-query/station-details/reviews/useModifyReply.ts

@@ -5,7 +5,11 @@ import { toastActions } from '@stores/layout/toastStore';
 import { memberTokenStore } from '@stores/login/memberTokenStore';
 
 import { SERVERS } from '@constants';
-import { QUERY_KEY_STATION_PREVIEWS, QUERY_KEY_STATION_REVIEWS } from '@constants/queryKeys';
+import {
+  QUERY_KEY_STATION_PREVIEWS,
+  QUERY_KEY_STATION_REPLIES,
+  QUERY_KEY_STATION_REVIEWS,
+} from '@constants/queryKeys';
 
 export interface FetchModifyReplyRequest {
   replyId: number;
@@ -27,7 +31,7 @@ const fetchModifyReply = async (fetchModifyReplyRequestParams: FetchModifyReplyR
   });
 };
 
-export const useModifyReply = (stationId: string) => {
+export const useModifyReply = (stationId: string, reviewId: number) => {
   const queryClient = useQueryClient();
 
   const { mutate, isLoading: isModifyReplyLoading } = useMutation({
@@ -36,6 +40,9 @@ export const useModifyReply = (stationId: string) => {
       toastActions.showToast('답글이 수정됐습니다.', 'success', 'bottom-center');
     },
     onSettled: () => {
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEY_STATION_REPLIES, reviewId],
+      });
       queryClient.invalidateQueries({
         queryKey: [QUERY_KEY_STATION_REVIEWS, stationId],
       });

frontend/src/hooks/tanstack-query/station-details/reviews/useModifyReview.ts

@@ -5,7 +5,11 @@ import { toastActions } from '@stores/layout/toastStore';
 import { memberTokenStore } from '@stores/login/memberTokenStore';
 
 import { SERVERS } from '@constants';
-import { QUERY_KEY_STATION_PREVIEWS, QUERY_KEY_STATION_REVIEWS } from '@constants/queryKeys';
+import {
+  QUERY_KEY_STATION_PREVIEWS,
+  QUERY_KEY_STATION_REPLIES,
+  QUERY_KEY_STATION_REVIEWS,
+} from '@constants/queryKeys';
 
 export interface FetchModifyReviewRequest {
   reviewId: number;
@@ -27,7 +31,7 @@ const fetchModifyReview = async (fetchModifyReviewRequestParams: FetchModifyRevi
   });
 };
 
-export const useModifyReview = (stationId: string) => {
+export const useModifyReview = (stationId: string, reviewId: number) => {
   const queryClient = useQueryClient();
 
   const { mutate, isLoading: isModifyReviewLoading } = useMutation({
@@ -36,6 +40,9 @@ export const useModifyReview = (stationId: string) => {
       toastActions.showToast('리뷰가 수정됐습니다.', 'success', 'bottom-center');
     },
     onSettled: () => {
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEY_STATION_REPLIES, reviewId],
+      });
       queryClient.invalidateQueries({
         queryKey: [QUERY_KEY_STATION_REVIEWS, stationId],
       });