Refactor/wineid api

src/components/common/ErrorBoundary.tsx

@@ -34,10 +34,12 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
     if (isAxiosError(error)) {
       switch (error.response?.status) {
         case 404: {
+          //라우팅 경로는 맞는데 페이지 못 찾은 경우
           errorMessage = '해당 페이지를 찾을 수 없습니다.';
           break;
         }
         case 403: {
+          //인가받지 못한 경우
           const apiMessage = error.response?.data?.message;
           if (apiMessage === '본인이 작성한 리뷰에는 좋아요를 할 수 없습니다.') {
             errorMessage = '본인이 작성한 리뷰에는 좋아요를 할 수 없습니다.';
@@ -47,18 +49,28 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
           break;
         }
         case 401: {
+          //401
           const apiMessage = error.response?.data?.message;
           if (apiMessage === 'Unauthorized') {
             errorMessage = '로그인이 필요합니다.';
           }
           break;
         }
+        case 400: {
+          // wineid값에 영어가 들어간 경우
+          const apiMessage = error.response?.data?.message;
+          if (apiMessage === 'Validation Failed') {
+            errorMessage = '잘못된 요청입니다.';
+          }
+          break;
+        }
         default: {
           errorMessage = `${error.response?.status || ''} - ${error.response?.data?.message || error.message}`;
           break;
         }
       }
     } else {
+      //엑시오스 에러가 아닌 것들
       errorMessage = `${error.message}`;
     }
 

src/components/common/Gnb.tsx

@@ -41,15 +41,6 @@ function AuthMenu() {
   const { pathname } = useRouter();
   const { user } = useUser();
 
-  /**
-   1)로그인 -> User스토어에 바로 저장이되나?(확인하고)
-   2)바로 저장이 되는데 안보인다? -> user다시 조회하는 동작 추가 필요
-   3)바로 저장이 되면 보인다? -> 그냥 넘어가기
-   4) 로딩스피너 적용되는 거 보고 오버레이(뒤에 비치니까) 만약 새로고침 시 유저상태 변하는 게 보인다? -> ssr고려하기? 하 
-
-
-   */
-
   return user ? (
     <UserDropdown userImage={user.image} />
   ) : (

src/components/common/card/ReviewCard.tsx

@@ -1,3 +1,5 @@
+import Image from 'next/image';
+
 import ShowMoreBtn from '@/assets/icons/showMoreBtn.svg';
 import Star from '@/assets/icons/star.svg';
 import { Badge } from '@/components/ui/badge';
@@ -30,13 +32,14 @@ export function ReviewCard({ children }: ReviewCardProps) {
 
 ReviewCard.UserHeader = function UserHeader({ userIcon, reviewId, children }: UserHeaderProps) {
   const username = useReviewCardStore((state) => state.allReviews[reviewId]?.user.nickname);
+  const userImg = useReviewCardStore((state) => state.allReviews[reviewId]?.user.image);
   const timeAgo = useReviewCardStore((state) => state.allReviews[reviewId]?.updatedAt);
 
   return (
     <div className='flex justify-between items-start'>
       <div className='flex items-center gap-4'>
-        <div className='w-10 h-10 md:w-16 md:h-16 rounded-full bg-gray-200 overflow-hidden'>
-          {userIcon}
+        <div className='relative w-10 h-10 md:w-16 md:h-16 rounded-full bg-gray-200 overflow-hidden'>
+          {userImg ? <Image fill src={userImg} alt='유저 프로필' /> : userIcon}
         </div>
         <div className='flex flex-col'>
           <span className='custom-text-lg-semibold text-gray-900'>{username}</span>

src/components/wineDetail/Kebab.tsx

@@ -1,13 +1,14 @@
 import { useState } from 'react';
 
+import { toast } from 'sonner';
+
 import KebabIcon from '@/assets/icons/kebab.svg';
 import { Button } from '@/components/ui/button';
 import { useUser } from '@/hooks/useUser';
 import useReviewCardStore from '@/stores/reviewCardStore';
 import useWineStore from '@/stores/wineStore';
 
 import MenuDropdown from '../common/dropdown/MenuDropdown';
-import ErrorModal from '../common/Modal/ErrorModal';
 import DeleteModal from '../Modal/DeleteModal/DeleteModal';
 import EditReviewModal from '../Modal/ReviewModal/EditReviewModal';
 
@@ -20,21 +21,26 @@ function Kebab({ reviewId }: Props) {
   const reviewData = useReviewCardStore((state) => state.allReviews[reviewId]);
   const [openEditModal, setOepnEditModal] = useState(false);
   const [openDeleteModal, setOpenDeleteModal] = useState(false);
-  const [openAlertModal, setOpenAlertModal] = useState(false);
 
   const { user } = useUser();
 
   function onSelect(value: string) {
     switch (value) {
       case 'update': {
-        if (user?.id !== reviewData.user.id) setOpenAlertModal(true);
+        if (user?.id !== reviewData.user.id)
+          toast.error('', {
+            description: '권한이 없습니다.',
+          });
         else {
           setOepnEditModal(true);
         }
         break;
       }
       case 'delete': {
-        if (user?.id !== reviewData.user.id) setOpenAlertModal(true);
+        if (user?.id !== reviewData.user.id)
+          toast.error('', {
+            description: '권한이 없습니다.',
+          });
         else {
           setOpenDeleteModal(true);
         }
@@ -76,15 +82,6 @@ function Kebab({ reviewId }: Props) {
           setShowDeleteModal={setOpenDeleteModal}
         />
       )}
-      {openAlertModal && (
-        <ErrorModal
-          open={openAlertModal}
-          onOpenChange={() => {}}
-          onConfirm={() => setOpenAlertModal(false)}
-        >
-          <div className='custom-text-lg-bold'>권한이 없습니다.</div>
-        </ErrorModal>
-      )}
     </>
   );
 }

src/components/wineDetail/LikeButton.tsx

@@ -1,5 +1,7 @@
 import { useState } from 'react';
 
+import { toast } from 'sonner';
+
 import { postLike, deleteLike } from '@/api/handleLikeRequest';
 import FullLikeIcon from '@/assets/icons/fullLike.svg';
 import LikeIcon from '@/assets/icons/like.svg';
@@ -8,16 +10,13 @@ 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;
 }
 
 function LikeButton({ isLike, reviewId }: Props) {
   const [isClicked, setIsClicked] = useState(isLike);
-  const [openAlertModal, setOpenAlertModal] = useState(false);
 
   const { user } = useUser();
   const id = useReviewCardStore((state) => state.allReviews[reviewId]?.user.id);
@@ -31,7 +30,9 @@ function LikeButton({ isLike, reviewId }: Props) {
         setIsClicked((prev) => !prev); //실패하면 업데이트 했던 거 취소
       }
     } else {
-      setOpenAlertModal(true);
+      toast.error('', {
+        description: '본인이 작성한 리뷰에는 좋아요를 할 수 없습니다.',
+      });
     } //미리 업데이트
   }
   return (
@@ -46,17 +47,6 @@ function LikeButton({ isLike, reviewId }: Props) {
       >
         {isClicked ? <FullLikeIcon /> : <LikeIcon />}
       </Button>
-      {openAlertModal && (
-        <ErrorModal
-          open={openAlertModal}
-          onOpenChange={() => {}}
-          onConfirm={() => setOpenAlertModal(false)}
-        >
-          <div className='custom-text-lg-bold'>
-            본인이 작성한 리뷰에는 좋아요를 할 수 없습니다.{' '}
-          </div>
-        </ErrorModal>
-      )}
     </>
   );
 }

src/pages/wines/[wineid].tsx

@@ -17,7 +17,7 @@ import { GetWineInfoResponse } from '@/types/WineTypes';
 interface WinePageProps {
   wineData?: GetWineInfoResponse; // getWineInfo가 반환하는 WineInfo 타입을 사용
   error?: string;
-  dehydratedState: any;
+  dehydratedState?: any;
   parsedWineId: number;
 }
 
@@ -31,7 +31,7 @@ export default function WineInfoById(props: WinePageProps) {
   const setNowWine = useWineStore((state) => state.setNowWine);
 
   //서버든 목록(클라이언트든) 캐싱된 데이터 사용
-  const { data, isLoading } = useQuery({
+  const { data } = useQuery({
     queryKey: ['wineDetail', parsedWineId],
     queryFn: () => getWineInfoForClient(parsedWineId),
     staleTime: 1000 * 60 * 5,
@@ -42,10 +42,8 @@ export default function WineInfoById(props: WinePageProps) {
     if (data) setNowWine(data);
   }, [data]);
 
-  if (isLoading) return <div className='w-300 bg-red-400 h-20'>123</div>; //테스트용
-
   if (!data) {
-    throw new Error('존재하지 않는 와인입니다.');
+    return;
   }
 
   return (
@@ -90,7 +88,6 @@ export const getServerSideProps: GetServerSideProps<WinePageProps> = async (cont
     await queryClient.prefetchQuery({
       queryKey: ['wineDetail', parsedWineId],
       queryFn: async () => {
-        //추후 배포용 주소로 변경
         const res = await axios.get(
           `${process.env.NEXT_PUBLIC_API_URL}/api/wines/${parsedWineId}`,
           {
@@ -109,7 +106,6 @@ export const getServerSideProps: GetServerSideProps<WinePageProps> = async (cont
     console.error(`[SSR] 와인 상세 정보 로딩 중 최종 에러:`, error.message || error);
   }
 
-  // prefetch한 queryClient의 캐시를 직렬화, 클라이언트에 전달.
   return {
     props: {
       dehydratedState: dehydrate(queryClient),