Feature/wineid api

src/api/apiServer.ts

@@ -0,0 +1,117 @@
+import axios, { AxiosError, AxiosInstance, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
+import { GetServerSidePropsContext } from 'next';
+
+export interface RetryRequestConfig extends InternalAxiosRequestConfig {
+  _retry?: boolean;
+  _refreshToken?: string;
+  _context?: GetServerSidePropsContext;
+}
+
+export const createSeverApiInstance = (accessToken: string | undefined) => {
+  const instance = axios.create({
+    baseURL: process.env.NEXT_PUBLIC_BASE_URL,
+  });
+
+  instance.interceptors.request.use((config) => {
+    if (accessToken && config.headers) {
+      config.headers.Authorization = `Bearer ${accessToken}`;
+    }
+    return config;
+  });
+
+  instance.interceptors.response.use(
+    (res) => res,
+    (error) => handleAxiosResponseError(error, instance),
+  );
+
+  return instance;
+};
+
+function handleAxiosResponseError(error: AxiosError, instance: AxiosInstance) {
+  const status = error.response?.status;
+  const originalRequest = error.config as RetryRequestConfig;
+
+  /* _retry값 조회로 무한 요청x */
+  if (originalRequest._retry) return handleCommonError(error);
+  /* 없으면 재시도 플래그 설정 */
+  originalRequest._retry = true;
+
+  const refreshToken = originalRequest._refreshToken;
+  const context = originalRequest._context;
+
+  /* 401 에러가 아니거나 리프레시 토큰이 없거나 SSR 컨텍스트가 없으면 에러 */
+  if (status !== 401 || !refreshToken || !context) return handleCommonError(error);
+
+  try {
+    /* 401 에러면 리프레시 토큰 갱신 */
+    return handleRetryReuquest(originalRequest, refreshToken, context, instance);
+  } catch (refreshTokenError) {
+    console.error('리프레시 토큰 갱신 실패:', refreshTokenError);
+    /*쿠키 삭제 */
+    context.res.setHeader('Set-Cookie', [
+      `accessToken=; Path=/; Max-Age=0;  SameSite=Lax`,
+      `refreshToken=; Path=/; Max-Age=0; SameSite=Lax`,
+    ]);
+
+    return handleCommonError(refreshTokenError as AxiosError);
+  }
+}
+
+function handleCommonError(error: AxiosError) {
+  if (!error.response) {
+    return Promise.reject(new Error('네트워크 오류가 발생. 인터넷 상태를 확인해주세요.'));
+  }
+
+  const { status, data } = error.response;
+  let errorMessage = (data as { message?: string })?.message ?? '서버에서 오류가 발생했습니다.';
+
+  console.error('API 에러 발생:', { status, errorMessage, data });
+  return Promise.reject(error);
+}
+
+export async function fetchNewRefreshTokens(refreshToken: string) {
+  if (!refreshToken) throw new Error('리프레쉬토큰이 없어요');
+  const response = await axios.post(
+    `${process.env.NEXT_PUBLIC_BASE_URL}/${process.env.NEXT_PUBLIC_TEAM}/auth/refresh-token`,
+    {
+      refreshToken,
+    },
+  );
+
+  return {
+    newAccessToken: response.data.accessToken,
+    newRefreshToken: response.data.refreshToken,
+  };
+}
+
+async function handleRetryReuquest(
+  originalRequest: RetryRequestConfig,
+  refreshToken: string,
+  context: GetServerSidePropsContext,
+  instance: AxiosInstance,
+): Promise<AxiosResponse> {
+  const refreshResult = await fetchNewRefreshTokens(refreshToken);
+  const { newAccessToken, newRefreshToken } = refreshResult;
+
+  /* 클라이언트 쿠키에 반영되게 setCookie 옵션 넣어서 주기 */
+  setAuthCookies(context.res, newAccessToken, newRefreshToken);
+
+  /* 새 토큰으로 원래 요청의 헤더 수정 */
+  if (originalRequest.headers) {
+    originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
+  }
+
+  /* 토큰 갱신 후 원래 요청을 재시도 */
+  return instance(originalRequest);
+}
+
+function setAuthCookies(
+  res: GetServerSidePropsContext['res'],
+  accessToken: string,
+  refreshToken: string,
+) {
+  res.setHeader('Set-Cookie', [
+    `accessToken=${accessToken}; Path=/; Max-Age=${60 * 5}; SameSite=Lax;`,
+    `refreshToken=${refreshToken}; Path=/; Max-Age=${60 * 60 * 24 * 7}; SameSite=Lax;`,
+  ]);
+}

src/api/editreview.ts

@@ -1,7 +1,7 @@
 import apiClient from '@/api/apiClient';
 
 interface UpdateReviewRequest {
-  reviewId: number;
+  id: number;
   rating: number;
   lightBold: number;
   smoothTannic: number;
@@ -17,11 +17,11 @@ interface UpdateReviewResponse {
 }
 
 export const updateReview = async ({
-  reviewId,
+  id,
   ...body
 }: UpdateReviewRequest): Promise<UpdateReviewResponse> => {
   const response = await apiClient.patch<UpdateReviewResponse>(
-    `/${process.env.NEXT_PUBLIC_TEAM}/reviews/${reviewId}`,
+    `/${process.env.NEXT_PUBLIC_TEAM}/reviews/${id}`,
     body,
   );
   return response.data;

src/api/wineid.ts → src/api/getWineInfo.ts

@@ -1,4 +1,3 @@
-// import { createSeverApiInstance, RetryRequestConfig } from './apiServer';
 import { GetWineInfoResponse } from '@/types/WineTypes';
 
 import apiClient from './apiClient';

src/api/handleLikeRequest.ts

@@ -0,0 +1,9 @@
+import apiClient from '@/api/apiClient';
+
+export async function postLike(reviewId: number) {
+  return apiClient.post(`${process.env.NEXT_PUBLIC_TEAM}/reviews/${reviewId}/like`);
+}
+
+export async function deleteLike(reviewId: number) {
+  return apiClient.delete(`${process.env.NEXT_PUBLIC_TEAM}/reviews/${reviewId}/like`);
+}

src/components/Modal/DeleteModal/DeleteModal.tsx

@@ -17,9 +17,11 @@ const DeleteModal = ({ type, id, showDeleteModal, setShowDeleteModal }: DeleteMo
 
   const deleteWineMutation = useMutation<DeleteResponse, AxiosError, number>({
     mutationFn: (id) => deleteWine(id),
+    throwOnError: true,
   });
   const deleteReviewMutation = useMutation<DeleteResponse, AxiosError, number>({
     mutationFn: (id) => deleteReview(id),
+    throwOnError: true,
   });
 
   const handleDelete = () => {
@@ -38,6 +40,7 @@ const DeleteModal = ({ type, id, showDeleteModal, setShowDeleteModal }: DeleteMo
       deleteReviewMutation.mutate(id, {
         onSuccess: () => {
           queryClient.invalidateQueries({ queryKey: ['reviews'] });
+          queryClient.invalidateQueries({ queryKey: ['wineDetail'] });
           console.log('리뷰 삭제 성공');
           setShowDeleteModal(false);
         },

src/components/Modal/ReviewModal/EditReviewModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import Image from 'next/image';
@@ -15,21 +15,21 @@ import { Button } from '../../ui/button';
 
 interface ReviewForm {
   rating: number;
-  sliderLightBold: number;
-  sliderSmoothTanic: number;
-  sliderdrySweet: number;
-  slidersoftAcidic: number;
+  lightBold: number;
+  smoothTannic: number;
+  drySweet: number;
+  softAcidic: number;
   aroma: Array<string>;
   content: string;
 }
 
 interface ReviewData {
-  reviewId: number;
+  id: number;
   rating: number;
-  sliderLightBold: number;
-  sliderSmoothTanic: number;
-  sliderdrySweet: number;
-  slidersoftAcidic: number;
+  lightBold: number;
+  smoothTannic: number;
+  drySweet: number;
+  softAcidic: number;
   aroma: string[];
   content: string;
 }
@@ -56,7 +56,7 @@ const aromaOptions = [
   '가죽',
 ];
 
-const aromaMap: Record<string, string> = {
+export const aromaMap: Record<string, string> = {
   체리: 'CHERRY',
   베리: 'BERRY',
   오크: 'OAK',
@@ -81,18 +81,23 @@ const aromaMap: Record<string, string> = {
 const EditReviewModal = ({
   wineName,
   reviewData,
+  showEditModal,
+  setShowEditModal,
 }: {
   wineName: string;
   reviewData: ReviewData;
+  showEditModal: boolean;
+  setShowEditModal: (state: boolean) => void;
 }) => {
-  const [showEditModal, setShowEditModal] = useState(false);
   const queryClient = useQueryClient();
 
   const updateReviewMutation = useMutation({
     mutationFn: updateReview,
+    throwOnError: true,
     onSuccess: () => {
       console.log('리뷰 수정 완료');
       queryClient.invalidateQueries({ queryKey: ['reviews'] });
+      queryClient.invalidateQueries({ queryKey: ['wineDetail'] });
       setShowEditModal(false);
     },
     onError: (error) => {
@@ -112,10 +117,10 @@ const EditReviewModal = ({
   } = useForm<ReviewForm>({
     defaultValues: {
       rating: reviewData.rating,
-      sliderLightBold: reviewData.sliderLightBold,
-      sliderSmoothTanic: reviewData.sliderSmoothTanic,
-      sliderdrySweet: reviewData.sliderdrySweet,
-      slidersoftAcidic: reviewData.slidersoftAcidic,
+      lightBold: reviewData.lightBold,
+      smoothTannic: reviewData.smoothTannic,
+      drySweet: reviewData.drySweet,
+      softAcidic: reviewData.softAcidic,
       content: reviewData.content,
       aroma: reviewData.aroma.map((eng) => {
         const kor = Object.keys(aromaMap).find((key) => aromaMap[key] === eng);
@@ -146,12 +151,12 @@ const EditReviewModal = ({
       return;
     }
     const fullData = {
-      reviewId: reviewData.reviewId,
+      id: reviewData.id,
       rating: data.rating,
-      lightBold: data.sliderLightBold,
-      smoothTannic: data.sliderSmoothTanic,
-      drySweet: data.sliderdrySweet,
-      softAcidic: data.slidersoftAcidic,
+      lightBold: data.lightBold,
+      smoothTannic: data.smoothTannic,
+      drySweet: data.drySweet,
+      softAcidic: data.softAcidic,
       aroma: data.aroma.map((a) => aromaMap[a]).filter(Boolean),
       content: data.content,
     };
@@ -167,9 +172,6 @@ const EditReviewModal = ({
 
   return (
     <div>
-      <Button variant='purpleDark' size='xs' width='sm' onClick={() => setShowEditModal(true)}>
-        리뷰 수정하기
-      </Button>
       <BasicModal
         type='review'
         title='리뷰 수정'
@@ -234,41 +236,41 @@ const EditReviewModal = ({
 
           <div className='mb-[40px] space-y-[18px]'>
             <FlavorSlider
-              value={watch('sliderLightBold')}
+              value={watch('lightBold')}
               min={0}
               max={10}
               step={1}
-              onChange={(val) => setValue('sliderLightBold', val)}
+              onChange={(val) => setValue('lightBold', val)}
               labelLeft='가벼워요'
               labelRight='진해요'
               badgeLabel='바디감'
             />
             <FlavorSlider
-              value={watch('sliderSmoothTanic')}
+              value={watch('smoothTannic')}
               min={0}
               max={10}
               step={1}
-              onChange={(val) => setValue('sliderSmoothTanic', val)}
+              onChange={(val) => setValue('smoothTannic', val)}
               labelLeft='부드러워요'
               labelRight='떫어요'
               badgeLabel='타닌'
             />
             <FlavorSlider
-              value={watch('sliderdrySweet')}
+              value={watch('drySweet')}
               min={0}
               max={10}
               step={1}
-              onChange={(val) => setValue('sliderdrySweet', val)}
+              onChange={(val) => setValue('drySweet', val)}
               labelLeft='드라이해요'
               labelRight='달아요'
               badgeLabel='당도'
             />
             <FlavorSlider
-              value={watch('slidersoftAcidic')}
+              value={watch('softAcidic')}
               min={0}
               max={10}
               step={1}
-              onChange={(val) => setValue('slidersoftAcidic', val)}
+              onChange={(val) => setValue('softAcidic', val)}
               labelLeft='안 셔요'
               labelRight='많이 셔요'
               badgeLabel='산미'