Feature: 회원가입, 로그인 화면 구현 및 axios 인터셉터 설정

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

src/api/apiClient.ts

@@ -0,0 +1,87 @@
+import axios, { AxiosError, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
+import Router from 'next/router';
+
+import { RetryRequestConfig } from '@/types/AuthTypes';
+
+import { updateAccessToken } from './auth';
+
+// axios 인스턴스 생성
+const apiClient = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_BASE_URL,
+  timeout: 10_000,
+  headers: { 'Content-Type': 'application/json' },
+});
+
+/* Axios 인터셉터 설정 */
+// 토큰 추가 인터셉터
+apiClient.interceptors.request.use(addAccessToken);
+
+// 에러 처리 및 리프레쉬 토큰 추가 인터셉터
+apiClient.interceptors.response.use(
+  (res) => res.data,
+  async (error) => {
+    const status = error.response?.status;
+    const refreshToken = localStorage.getItem('refreshToken');
+
+    if (status !== 401 || !refreshToken) return handleCommonError(error);
+    try {
+      const result = await handleRequestRefreshToken(error, refreshToken);
+      if (result) return result;
+    } catch (refreshTokenError) {
+      // 토큰 삭제 처리 후 리디렉트
+      localStorage.removeItem('accessToken');
+      localStorage.removeItem('refreshToken');
+      Router.replace('/signin');
+      return handleCommonError(refreshTokenError as AxiosError);
+    }
+  },
+);
+
+export default apiClient;
+
+// 토큰 추가 메소드
+function addAccessToken(config: InternalAxiosRequestConfig) {
+  const accessToken = localStorage.getItem('accessToken');
+  if (accessToken && config.headers) {
+    config.headers.Authorization = `Bearer ${accessToken}`;
+  }
+  return config;
+}
+
+// 공통 에러 처리 메소드
+function handleCommonError(error: AxiosError) {
+  if (!error.response) {
+    return Promise.reject(new Error('네트워크 오류가 발생했습니다. 인터넷 상태를 확인해주세요.'));
+  }
+
+  const { status, data } = error.response;
+  // todo: 에러 타입 정의하여 바꾸기
+  let errorMessage = (data as { message?: string })?.message ?? '서버에서 오류가 발생했습니다.';
+
+  // 에러 디버깅
+  console.error('API 에러 발생:', { status, errorMessage, data });
+  return Promise.reject(error);
+}
+
+// 리프레쉬 토큰 및 에러 처리 메소드
+async function handleRequestRefreshToken(
+  error: AxiosError,
+  refreshToken: string,
+): Promise<AxiosResponse | null> {
+  const originalRequest = error.config as RetryRequestConfig;
+
+  if (originalRequest._retry) return null;
+  originalRequest._retry = true;
+
+  const data = await updateAccessToken({ refreshToken });
+
+  // 갱신받은 access 토큰 저장
+  localStorage.setItem('accessToken', data.accessToken);
+
+  // 새 토큰으로 헤더 수정
+  if (originalRequest.headers) {
+    originalRequest.headers.Authorization = `Bearer ${data.accessToken}`;
+  }
+
+  return apiClient(originalRequest); // 토큰 갱신 후 재요청
+}

src/api/auth.ts

@@ -0,0 +1,27 @@
+import apiClient from '@/api/apiClient';
+import {
+  AccessTokenRequest,
+  AccessTokenResponse,
+  KakakoSignInRequest,
+  KakakoSignInResponse,
+  LoginRequest,
+  LoginResponse,
+  SignupRequest,
+  SignupResponse,
+} from '@/types/AuthTypes';
+
+export const createUser = (data: SignupRequest): Promise<SignupResponse> => {
+  return apiClient.post(`/${process.env.NEXT_PUBLIC_TEAM}/auth/signUp`, data);
+};
+
+export const loginUser = (data: LoginRequest): Promise<LoginResponse> => {
+  return apiClient.post(`/${process.env.NEXT_PUBLIC_TEAM}/auth/signIn`, data);
+};
+
+export const updateAccessToken = (data: AccessTokenRequest): Promise<AccessTokenResponse> => {
+  return apiClient.post(`/${process.env.NEXT_PUBLIC_TEAM}/auth/refresh-token`, data);
+};
+
+export const signInKakao = (data: KakakoSignInRequest): Promise<KakakoSignInResponse> => {
+  return apiClient.post(`/${process.env.NEXT_PUBLIC_TEAM}/auth/signIn/KAKAO`, data);
+};

src/api/user.ts

@@ -0,0 +1,6 @@
+import apiClient from '@/api/apiClient';
+import { GetUserResponse } from '@/types/UserTypes';
+
+export const getUser = (): Promise<GetUserResponse> => {
+  return apiClient.get(`/${process.env.NEXT_PUBLIC_TEAM}/users/me`);
+};

src/components/auth/AuthLayout.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { cn } from '@/lib/utils';
+
+interface AuthLayoutProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+const AuthLayout = ({ children, className }: AuthLayoutProps) => {
+  const bgClass = 'flex justify-center items-center bg-gray-100 min-h-screen';
+  const cardClass = cn(
+    'w-full max-w-[21rem] md:max-w-[31rem] py-14 px-5 md:py-16 md:px-12 lg:py-20 flex flex-col items-center justify-center rounded-2xl bg-white border border-gray-300 shadow-[0px_2px_20px_rgba(0,0,0,0.04)]',
+    className,
+  );
+
+  return (
+    <div className={bgClass}>
+      <div className={cardClass}>{children}</div>
+    </div>
+  );
+};
+
+export default AuthLayout;

src/components/auth/AuthLogo.tsx

@@ -0,0 +1,11 @@
+import Logo from '../common/Logo';
+
+const AuthLogo = () => {
+  return (
+    <div className='w-[104px] h-[30px] mb-[56px] md:mb-[64px]'>
+      <Logo className='text-black' />
+    </div>
+  );
+};
+
+export default AuthLogo;

src/components/common/Filter/Filter.tsx

@@ -16,7 +16,6 @@ const Filter = () => {
       <div className='flex flex-col gap-3'>
         <span className='custom-text-xl-bold'>WINE TYPES</span>
         <div className='flex gap-3'>
-          {/* todo: 공통 뱃지로 변경 필요 */}
           {wineTypeOptions.map((option, index) => (
             <Badge
               key={`${option}-${index}`}

src/components/common/FormInput.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import {
+  useFormContext,
+  useFormState,
+  type FieldErrors,
+  type FieldValues,
+  type Path,
+} from 'react-hook-form';
+
+import Input from '@/components/common/Input';
+
+interface FormInputProps<T> {
+  placeholder: string;
+  name: Path<T>;
+  type: string;
+  id: string;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+// FormProvider로 감싸지 않으면 오류 발생
+const FormInput = <T extends FieldValues>(props: FormInputProps<T>) => {
+  const { placeholder, name, type, id, onChange } = props;
+  const methods = useFormContext();
+  const { errors } = useFormState({ name });
+
+  function getErrorMessage(errors: FieldErrors) {
+    const errMsg = errors[name]?.message;
+    const result = errMsg && typeof errMsg === 'string' ? errMsg : '';
+    return result;
+  }
+
+  const { onChange: formOnChange, ...inputProps } = methods.register(name);
+
+  return (
+    <Input
+      {...inputProps}
+      type={type}
+      id={id}
+      name={name}
+      placeholder={placeholder}
+      errorMessage={getErrorMessage(errors)}
+      onChange={(e) => {
+        formOnChange(e);
+        onChange?.(e);
+      }}
+    />
+  );
+};
+
+export default FormInput;

src/components/common/Modal/ErrorModal.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import ConfirmModal from '@/components/common/Modal/ConfirmModal';
+import { Button } from '@/components/ui/button';
+
+interface ErrorModalProps {
+  open: boolean;
+  onOpenChange: (value: boolean) => void;
+  onConfirm?: () => void;
+  errorMessage: string;
+}
+
+const ErrorModal = ({ open, onOpenChange, errorMessage, onConfirm }: ErrorModalProps) => {
+  return (
+    <ConfirmModal
+      open={open}
+      onOpenChange={onOpenChange}
+      /* 버튼커스텀 영역 */
+      buttons={
+        <>
+          <Button
+            size='xl'
+            width='xl'
+            variant='purpleDark'
+            className='flex-auto text-base font-bold'
+            onClick={() => {
+              onOpenChange(false);
+              onConfirm?.();
+            }}
+          >
+            확인
+          </Button>
+        </>
+      }
+    >
+      {/* 모달 내용 영역 */}
+      {errorMessage}
+    </ConfirmModal>
+  );
+};
+
+export default ErrorModal;

src/hooks/useAuthRedirect.tsx

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+
+import { useQuery } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
+
+import { getUser } from '@/api/user';
+
+const useAuthRedirect = () => {
+  const router = useRouter();
+  const { data: userData, isLoading } = useQuery({
+    queryKey: ['getUser'],
+    queryFn: getUser,
+    retry: false,
+  });
+
+  useEffect(() => {
+    if (userData) {
+      router.replace('/');
+    }
+  }, [userData, router]);
+
+  return { userData, isLoading };
+};
+
+export default useAuthRedirect;

src/hooks/useErrorModal.tsx

@@ -0,0 +1,28 @@
+import { useState } from 'react';
+
+const useErrorModal = () => {
+  const [open, setOpen] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const updateErrorMessage = (error: Error) => {
+    setErrorMessage(error.message);
+  };
+
+  const showErrorModal = () => {
+    setOpen(true);
+  };
+
+  const closeErrorModal = () => {
+    setOpen(false);
+    setErrorMessage('');
+  };
+
+  const handleError = (error: Error) => {
+    updateErrorMessage(error);
+    showErrorModal();
+  };
+
+  return { open, setOpen, errorMessage, handleError, showErrorModal, closeErrorModal };
+};
+
+export default useErrorModal;

src/lib/form/schemas.js

@@ -0,0 +1,38 @@
+import z from 'zod';
+export const emailSchema = z
+  .string()
+  .min(1, '이메일은 필수 입력입니다.')
+  .refine(
+    (val) => {
+      const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+      return emailRegex.test(val);
+    },
+    {
+      message: '이메일 형식으로 작성해 주세요.',
+    },
+  );
+
+export const nicknameSchema = z
+  .string()
+  .min(1, '닉네임은 필수 입력입니다.')
+  .max(20, '닉네임은 최대 20자까지 가능합니다.');
+
+export const passwordSchema = z
+  .string()
+  .min(1, '비밀번호는 필수 입력입니다.')
+  .min(8, '비밀번호는 최소 8자 이상입니다.')
+  .refine(
+    (val) => {
+      // 이메일 정규식 직접 검사
+      const passwordRegex = /^[A-Za-z0-9!@#$%^&*]+$/;
+      return passwordRegex.test(val);
+    },
+    {
+      message: '비밀번호는 숫자, 영문, 특수문자로만 가능합니다.',
+    },
+  );
+
+export const passwordConfirmationSchema = z
+  .string()
+  .min(1, '비밀번호 확인을 입력해주세요')
+  .min(8, '비밀번호 확인을 8자 이상 입력해주세요');

src/pages/_app.tsx

@@ -13,13 +13,21 @@ const queryClient = new QueryClient();
 
 export default function App({ Component, pageProps }: AppProps) {
   const { pathname } = useRouter();
-  const pagesWithoutGnb = ['/login', '/signup', '/signin', '/_error'];
+  const pagesWithoutGnb = [
+    '/login',
+    '/signup',
+    '/signin',
+    '/oauth/kakao',
+    '/oauth/signup/kakao',
+    '/_error',
+  ];
   const hideHeader = pagesWithoutGnb.includes(pathname);
 
   return (
     <>
       <Head>
         <title>WINE</title>
+        <meta name='viewport' content='width=device-width, initial-scale=1' />
       </Head>
       <QueryClientProvider client={queryClient}>
         {!hideHeader && <Gnb />}