chore:임시저장

Author: 626-ju

src/components/common/ErrorBoundary.tsx

@@ -1,14 +1,15 @@
 import { Component, ErrorInfo, ReactNode } from 'react';
 
 import { isAxiosError } from 'axios';
+import { NextRouter } from 'next/router';
 
 import ErrorModal from './Modal/ErrorModal';
 
 interface ErrorBoundaryProps {
   children: ReactNode;
   fallback?: ReactNode;
   onError?: (error: Error, errorInfo: ErrorInfo) => void;
-  onRedirect: () => void;
+  router: NextRouter;
 }
 
 interface ErrorBoundaryState {
@@ -45,6 +46,13 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
           }
           break;
         }
+        case 401: {
+          const apiMessage = error.response?.data?.message;
+          if (apiMessage === 'Unauthorized') {
+            errorMessage = '로그인이 필요합니다.';
+          }
+          break;
+        }
         default: {
           errorMessage = `${error.response?.status || ''} - ${error.response?.data?.message || error.message}`;
           break;
@@ -69,7 +77,7 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
   // 컴포넌트 렌더링 로직
   public render() {
     const { hasError, isOpen, errorMessageToDisplay } = this.state;
-    const { children, onRedirect } = this.props;
+    const { children, router } = this.props;
 
     if (hasError) {
       return (
@@ -78,14 +86,10 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
           onOpenChange={() => {}}
           onConfirm={() => {
             this.setState({ isOpen: false, hasError: false });
-            onRedirect();
+            router.back();
           }}
         >
-          <div className='text-center custom-text-lg-bold'>
-            {errorMessageToDisplay}
-            <br />
-            {'메인화면으로 돌아갑니다.'}
-          </div>
+          <div className='text-center custom-text-lg-bold'>{errorMessageToDisplay}</div>
         </ErrorModal>
       );
     }

src/components/common/Gnb.tsx

@@ -41,6 +41,15 @@ function AuthMenu() {
   const { pathname } = useRouter();
   const { user } = useUser();
 
+  /**
+   1)로그인 -> User스토어에 바로 저장이되나?(확인하고)
+   2)바로 저장이 되는데 안보인다? -> user다시 조회하는 동작 추가 필요
+   3)바로 저장이 되면 보인다? -> 그냥 넘어가기
+   4) 로딩스피너 적용되는 거 보고 오버레이(뒤에 비치니까) 만약 새로고침 시 유저상태 변하는 게 보인다? -> ssr고려하기? 하 
+   
+
+   */
+
   return user ? (
     <UserDropdown userImage={user.image} />
   ) : (
@@ -79,8 +88,12 @@ function UserDropdown({ userImage }: Props) {
       ]}
       onSelect={onSelect}
       trigger={
-        <div className='relative w-[20px] md:w-[45px] h-[20px] md:h-[45px] cursor-pointer'>
-          {userImage ? <Image fill src={userImage} alt='유저의 프로필 사진' /> : <UserDefaultImg />}
+        <div className='relative w-[20px] md:w-[45px] h-[20px] md:h-[45px] cursor-pointer rounded-full overflow-hidden'>
+          {userImage ? (
+            <Image width={45} height={45} src={userImage} alt='유저의 프로필 사진' />
+          ) : (
+            <UserDefaultImg />
+          )}
         </div>
       }
     ></MenuDropdown>

src/components/wineDetail/Kebab.tsx

@@ -34,7 +34,10 @@ function Kebab({ reviewId }: Props) {
         break;
       }
       case 'delete': {
-        setOpenDeleteModal(true);
+        if (user?.id !== reviewData.user.id) setOpenAlertModal(true);
+        else {
+          setOpenDeleteModal(true);
+        }
         break;
       }
     }

src/components/wineDetail/LikeButton.tsx

@@ -1,67 +1,63 @@
 import { useState } from 'react';
 
-import { QueryClient, useMutation } from '@tanstack/react-query';
-
 import { postLike, deleteLike } from '@/api/handleLikeRequest';
 import FullLikeIcon from '@/assets/icons/fullLike.svg';
 import LikeIcon from '@/assets/icons/like.svg';
 import { Button } from '@/components/ui/button';
+import { useUser } from '@/hooks/useUser';
 import { cn } from '@/lib/utils';
+import useReviewCardStore from '@/stores/reviewCardStore';
+
+import ErrorModal from '../common/Modal/ErrorModal';
 
 interface Props {
   isLike?: boolean;
   reviewId: number;
 }
 
-const queryClient = new QueryClient();
-
-export function usePostLikeMutation() {
-  return useMutation({
-    mutationFn: (reviewId: number) => postLike(reviewId),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['wineDetail'] }); // 필요한 캐시 무효화
-    },
-    throwOnError: true,
-  });
-}
-
-export function useDeleteLikeMutation() {
-  return useMutation({
-    mutationFn: (reviewId: number) => deleteLike(reviewId),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['wineDetail'] });
-    },
-    throwOnError: true,
-  });
-}
-
 function LikeButton({ isLike, reviewId }: Props) {
   const [isClicked, setIsClicked] = useState(isLike);
-  const postLikeMutation = usePostLikeMutation();
-  const deleteLikeMutation = useDeleteLikeMutation();
+  const [openAlertModal, setOpenAlertModal] = useState(false);
 
-  async function handleToggle() {
-    setIsClicked((prev) => !prev); //미리 업데이트
+  const { user } = useUser();
+  const id = useReviewCardStore((state) => state.allReviews[reviewId]?.user.id);
 
-    try {
-      isClicked
-        ? await deleteLikeMutation.mutateAsync(reviewId)
-        : await postLikeMutation.mutateAsync(reviewId);
-    } catch (err) {
-      setIsClicked((prev) => !prev); //실패하면 업데이트 했던 거 취소
-    }
+  async function handleToggle() {
+    if (user?.id !== id) {
+      setIsClicked((prev) => !prev);
+      try {
+        isClicked ? await deleteLike(reviewId) : await postLike(reviewId);
+      } catch (err) {
+        setIsClicked((prev) => !prev); //실패하면 업데이트 했던 거 취소
+      }
+    } else {
+      setOpenAlertModal(true);
+    } //미리 업데이트
   }
   return (
-    <Button
-      onClick={handleToggle}
-      variant='onlyCancel'
-      className={cn(
-        'border-0 hover:text-primary w-8 h-8 md:w-9.5 md:h-9.5 mr-4.5 md:mr-5 [&_svg]:w-8 [&_svg]:h-8',
-        { 'text-primary': isClicked },
+    <>
+      <Button
+        onClick={handleToggle}
+        variant='onlyCancel'
+        className={cn(
+          'border-0 hover:text-primary w-8 h-8 md:w-9.5 md:h-9.5 mr-4.5 md:mr-5 [&_svg]:w-8 [&_svg]:h-8',
+          { 'text-primary': isClicked },
+        )}
+      >
+        {isClicked ? <FullLikeIcon /> : <LikeIcon />}
+      </Button>
+      {openAlertModal && (
+        <ErrorModal
+          open={openAlertModal}
+          onOpenChange={() => {}}
+          onConfirm={() => setOpenAlertModal(false)}
+        >
+          <div className='custom-text-lg-bold'>
+            본인이 작성한 리뷰에는 좋아요를 할 수 없습니다.{' '}
+          </div>
+        </ErrorModal>
       )}
-    >
-      {isClicked ? <FullLikeIcon /> : <LikeIcon />}
-    </Button>
+    </>
   );
 }
 

src/pages/_app.tsx

@@ -39,7 +39,7 @@ export default function App({ Component, pageProps }: AppProps) {
       <QueryClientProvider client={queryClient}>
         <HydrationBoundary state={pageProps.dehydratedState}>
           {!hideHeader && <Gnb />}
-          <ErrorBoundary fallback={<></>} onRedirect={() => router.replace('/')}>
+          <ErrorBoundary fallback={<></>} router={router}>
             <div
               className={clsx({
                 'pt-[70px] md:pt-[100px] xl:pt-[110px]': !hideHeader,

src/pages/wines/[wineid].tsx

@@ -35,6 +35,7 @@ export default function WineInfoById(props: WinePageProps) {
     queryKey: ['wineDetail', parsedWineId],
     queryFn: () => getWineInfoForClient(parsedWineId),
     staleTime: 1000 * 60 * 5,
+    throwOnError: true,
   });
 
   useEffect(() => {