Merge pull request #329 from JEOLLOGA/develop

[DEPLOY] dev to main

Author: maylh

next.config.ts

@@ -11,7 +11,12 @@ const nextConfig: NextConfig = {
   },
 
   images: {
-    domains: ['noms.templestay.com', 'www.templestay.com', 'blogthumb.pstatic.net'],
+    domains: [
+      'noms.templestay.com',
+      'www.templestay.com',
+      'blogthumb.pstatic.net',
+      'phinf.pstatic.net',
+    ],
   },
 
   webpack(config) {

src/apis/auth/index.ts

@@ -10,6 +10,8 @@ export const useGetKakaoLogin = () => {
     mutationFn: ({ code }: { code: string }) => getKakaoLogin(code),
     onSuccess: (response) => {
       const userNickname = response.data.data.nickname;
+      const userId = response.data.data.userId;
+      const userInfo = response.data.data.userInfo;
 
       setCookie('userNickname', userNickname, {
         httpOnly: false,
@@ -19,7 +21,9 @@ export const useGetKakaoLogin = () => {
         maxAge: 1209600, // 14일
       });
 
-      if (!userNickname) {
+      localStorage.setItem('userId', userId);
+
+      if (!userInfo) {
         router.push('/onboarding');
       } else {
         router.push('/');

src/apis/instance.ts

@@ -2,12 +2,9 @@
 
 import API_URL from '@apis/env';
 import MESSAGES from '@apis/messages';
-import { getStorageValue } from '@hooks/useLocalStorage';
 import axios, { isAxiosError } from 'axios';
 import { deleteCookie } from 'cookies-next';
 
-// const API_URL = process.env.NEXT_PUBLIC_APP_BASE_URL as string;
-
 // 토큰이 필요없는 api 요청
 const instance = axios.create({
   baseURL: API_URL,
@@ -17,16 +14,6 @@ const instance = axios.create({
   },
 });
 
-// 토큰이 필요한 api 요청
-export const privateInstance = axios.create({
-  baseURL: API_URL,
-  headers: {
-    'Content-Type': 'application/json',
-    Authorization: `Bearer ${getStorageValue('Authorization')}`,
-  },
-  withCredentials: true,
-});
-
 export const postRefreshToken = async () => {
   try {
     const response = await axios.post(
@@ -66,6 +53,19 @@ instance.interceptors.response.use(
           return await axios(originRequest);
         }
       } catch (error) {
+        await axios
+          .post(
+            `${API_URL}/v2/user/auth/logout`,
+            {},
+            {
+              headers: { 'Content-Type': 'application/json' },
+              withCredentials: true,
+            },
+          )
+          .catch((logoutError) => {
+            console.error(logoutError);
+          });
+
         localStorage.clear();
         deleteCookie('userNickname');
         console.error(error);
@@ -77,10 +77,4 @@ instance.interceptors.response.use(
   },
 );
 
-// 로그인 상태에 따라 axios인스턴스 선택을 위한 훅
-export const getAxiosInstance = () => {
-  const isLoggedIn = !!getStorageValue('Authorization');
-  return isLoggedIn ? privateInstance : instance;
-};
-
 export default instance;

src/apis/user/axios.ts

@@ -1,19 +1,7 @@
-import instance, { privateInstance } from '@apis/instance';
+import instance from '@apis/instance';
 
 import { OnboardingDataV2, OnboardingResponseV2, UserNicknameResponse } from './type';
 
-export const fetchUserNickname = async (userId?: number) => {
-  if (userId === 0) {
-    return null;
-  }
-  const response = await privateInstance.get<UserNicknameResponse>(`/user/register/success`, {
-    params: {
-      userId,
-    },
-  });
-  return response.data;
-};
-
 export const postOnboardingData = async (data: OnboardingDataV2): Promise<OnboardingResponseV2> => {
   const response = await instance.post<OnboardingResponseV2>('/v2/user/onboarding', data);
   return response.data;

src/apis/user/index.ts

@@ -1,7 +1,7 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
 
 import { ApiResponse } from './../response';
-import { fetchUserNickname, getMyPage, postOnboardingData } from './axios';
+import { getMyPage, postOnboardingData } from './axios';
 import { MyPageType, OnboardingDataV2, OnboardingResponseV2 } from './type';
 
 export const usePostOnboardingData = () => {
@@ -18,12 +18,3 @@ export const useGetMyPage = () => {
 
   return { data, isLoading, isError };
 };
-
-export const useGetNickname = (userId: number) => {
-  const { data, isLoading, isError } = useQuery({
-    queryKey: [userId],
-    queryFn: () => fetchUserNickname(userId),
-  });
-
-  return { data, isLoading, isError };
-};

src/app/onboarding/page.tsx

@@ -2,20 +2,29 @@
 
 export const dynamic = 'force-dynamic';
 
-import { useGetNickname, usePostOnboardingData } from '@apis/user';
+import { usePostOnboardingData } from '@apis/user';
 import { OnboardingDataV2 } from '@apis/user/type';
 import ProgressBar from '@components/common/progressBar/ProgressBar';
-import ExceptLayout from '@components/except/exceptLayout/ExceptLayout';
 import OnboardingSection from '@components/onboarding/OnboardingSection';
 import { ONBOARDING_STEPS, COMMON_DESCRIPTION } from '@constants/onboarding/onboardingSteps';
 import useFunnel from '@hooks/useFunnel';
 import { getStorageValue } from '@hooks/useLocalStorage';
 import React, { useState, useEffect } from 'react';
+import { getCookie } from 'cookies-next';
 import useEventLogger from 'src/gtm/hooks/useEventLogger';
 
 import container from './onboardingPage.css';
 
 const OnboardingPage = () => {
+  const [userName, setUserName] = useState('');
+
+  useEffect(() => {
+    const name = getCookie('userNickname');
+    if (typeof name === 'string') {
+      setUserName(name);
+    }
+  }, []);
+
   const { Funnel, Step, nextStep, prevStep, currentStep } = useFunnel(
     ONBOARDING_STEPS.map((step) => step.id),
     '/welcome',
@@ -33,7 +42,6 @@ const OnboardingPage = () => {
   const userId = Number(getStorageValue('userId'));
   const { mutate: postOnboardingMutate } = usePostOnboardingData();
 
-  const { data, isLoading } = useGetNickname(userId);
   const [isInitialLoad, setIsInitialLoad] = useState<boolean>(true);
   const setVh = () => {
     const vh = window.innerHeight * 0.01;
@@ -85,10 +93,6 @@ const OnboardingPage = () => {
     });
   };
 
-  if (isLoading) {
-    return <ExceptLayout type="loading" />;
-  }
-
   return (
     <div className={container}>
       <ProgressBar
@@ -102,9 +106,7 @@ const OnboardingPage = () => {
             <Step key={id} name={id}>
               <OnboardingSection
                 id={id}
-                title={
-                  id === 'ageRange' || id === 'gender' ? [`${data?.nickname}님의`, title] : title
-                }
+                title={id === 'ageRange' || id === 'gender' ? [`${userName}님의`, title] : title}
                 description={COMMON_DESCRIPTION}
                 options={options}
                 isNextDisabledInitially={isNextDisabledInitially || false}

src/app/welcome/page.tsx

@@ -1,36 +1,37 @@
 'use client';
 
-import { useGetNickname } from '@apis/user';
+import React, { useState, useEffect } from 'react';
+import { getCookie } from 'cookies-next';
+import { useRouter } from 'next/navigation';
+import useEventLogger from 'src/gtm/hooks/useEventLogger';
+
 import PageBottomBtn from '@components/common/button/pageBottomBtn/PageBottomBtn';
 import LottiePlayer from '@components/common/lottie/LottiePlayer';
-import ExceptLayout from '@components/except/exceptLayout/ExceptLayout';
 import { WELCOME_TEXT } from '@constants/onboarding/onboardingSteps';
-import { getStorageValue } from '@hooks/useLocalStorage';
-import { useRouter } from 'next/navigation';
-import React from 'react';
-import useEventLogger from 'src/gtm/hooks/useEventLogger';
 
 import * as styles from './welcomePage.css';
 
 const WelcomePage = () => {
   const router = useRouter();
-  const userId = Number(getStorageValue('userId'));
-  const { data, isLoading } = useGetNickname(userId);
   const { logClickEvent } = useEventLogger('onboarding_end');
 
-  if (isLoading) {
-    return <ExceptLayout type="loading" />;
-  }
+  const [userName, setUserName] = useState('');
+
+  useEffect(() => {
+    const name = getCookie('userNickname');
+    if (typeof name === 'string') {
+      setUserName(name);
+    }
+  }, []);
 
   const handleStart = () => {
     router.push('/');
-
     logClickEvent('click_start');
   };
 
   return (
     <div className={styles.container}>
-      <h1 className={styles.titleStyle}>{`${data?.nickname}${WELCOME_TEXT}`}</h1>
+      <h1 className={styles.titleStyle}>{userName ? `${userName}${WELCOME_TEXT}` : ''}</h1>
       <div className={styles.lottieStyle}>
         <LottiePlayer keyId="onboarding" src="/lotties/onboarding.lottie" />
       </div>

src/middleware.ts

@@ -4,8 +4,9 @@ import type { NextRequest } from 'next/server';
 export const middleware = (request: NextRequest) => {
   const { pathname } = request.nextUrl;
 
-  const isLocal = process.env.NODE_ENV === 'development';
-  const token = request.cookies.get(isLocal ? 'userNickname' : 'accessToken');
+  // const isLocal = process.env.NODE_ENV === 'development';
+  // const token = request.cookies.get(isLocal ? 'userNickname' : 'accessToken');
+  const token = request.cookies.get('userNickname');
 
   if ((pathname.startsWith('/myPage') || pathname.startsWith('/wishList')) && !token) {
     const loginUrl = new URL('/login', request.url);