Fix: #291 소셜로그인 callback URL 오류 수정

src/components/user/auth-form/SocialButton.tsx

@@ -14,7 +14,7 @@ export default function SocialButton({ provider, isSubmitting }: SocialButtonPro
   const googleUrl = import.meta.env.VITE_GOOGLE_URL;
   const kakaoUrl = import.meta.env.VITE_KAKAO_URL;
 
-  const isGoogle = provider === 'GOOGLE';
+  const isGoogle = provider === 'google';
 
   const [isLoading, setIsLoading] = useState(false);
   const { toastError } = useToast();

src/mocks/mockData.ts

@@ -26,7 +26,7 @@ export const USER_DUMMY: UserInfo[] = [
     username: '[email protected]',
     password: 'password@1',
     email: '[email protected]',
-    provider: 'GOOGLE',
+    provider: 'google',
     nickname: '판다',
     bio: '풀스택 개발자를 목표중',
     links: [],
@@ -37,7 +37,7 @@ export const USER_DUMMY: UserInfo[] = [
     username: '[email protected]',
     password: 'password@2',
     email: '[email protected]',
-    provider: 'KAKAO',
+    provider: 'kakao',
     nickname: 'kakao_oauth_2',
     bio: '디자이너 + 프론트엔드 육각형 인재',
     links: [],
@@ -48,7 +48,7 @@ export const USER_DUMMY: UserInfo[] = [
     username: '[email protected]',
     password: 'password@3',
     email: '[email protected]',
-    provider: 'GOOGLE',
+    provider: 'google',
     nickname: '랫서판다',
     bio: '급성장중인 프론트엔드 취준생',
     links: [],
@@ -59,7 +59,7 @@ export const USER_DUMMY: UserInfo[] = [
     username: '[email protected]',
     password: 'password@4',
     email: '[email protected]',
-    provider: 'KAKAO',
+    provider: 'kakao',
     nickname: '북금곰',
     bio: '힘을 숨긴 프론트엔드 취준생',
     links: [],
@@ -70,7 +70,7 @@ export const USER_DUMMY: UserInfo[] = [
     username: '[email protected]',
     password: 'password@5',
     email: '[email protected]',
-    provider: 'KAKAO',
+    provider: 'kakao',
     nickname: '호랑이',
     bio: '백엔드 5년차',
     links: [],
@@ -81,7 +81,7 @@ export const USER_DUMMY: UserInfo[] = [
     username: '[email protected]',
     password: 'password@6',
     email: '[email protected]',
-    provider: 'GOOGLE',
+    provider: 'google',
     nickname: '나무늘보',
     bio: '식스센스 초감각형 풀스택 개발자',
     links: [],
@@ -92,7 +92,7 @@ export const USER_DUMMY: UserInfo[] = [
     username: '[email protected]',
     password: 'password@7',
     email: '[email protected]',
-    provider: 'KAKAO',
+    provider: 'kakao',
     nickname: 'kakao_oauth_7',
     bio: '초럭키비키 백엔드 개발자',
     links: [],
@@ -103,7 +103,7 @@ export const USER_DUMMY: UserInfo[] = [
     username: '[email protected]',
     password: 'password@8',
     email: '[email protected]',
-    provider: 'GOOGLE',
+    provider: 'google',
     nickname: '벨루가',
     bio: '팔방미인 디자이너',
     links: [],
@@ -114,7 +114,7 @@ export const USER_DUMMY: UserInfo[] = [
     username: '[email protected]',
     password: 'password@9',
     email: '[email protected]',
-    provider: 'KAKAO',
+    provider: 'kakao',
     nickname: '펭귄',
     bio: 'MySQL, Postgre SQL DBA',
     links: [],
@@ -125,7 +125,7 @@ export const USER_DUMMY: UserInfo[] = [
     username: '[email protected]',
     password: 'password@10',
     email: '[email protected]',
-    provider: 'GOOGLE',
+    provider: 'google',
     nickname: 'google_oauth_10',
     bio: 'DevOps 3년차',
     links: [],
@@ -213,7 +213,7 @@ export const USER_DUMMY: UserInfo[] = [
     username: '[email protected]',
     password: 'test1234!',
     email: '[email protected]',
-    provider: 'KAKAO',
+    provider: 'kakao',
     nickname: '코니',
     profileImageName: 'Image2.png',
     bio: '커피와 책을 사랑하는 디자이너',
@@ -224,7 +224,7 @@ export const USER_DUMMY: UserInfo[] = [
     username: '[email protected]',
     password: 'test1234!',
     email: '[email protected]',
-    provider: 'GOOGLE',
+    provider: 'google',
     nickname: '레너드',
     profileImageName: 'Image3.jpeg',
     bio: '자연을 사랑하는 사진작가',
@@ -246,7 +246,7 @@ export const USER_DUMMY: UserInfo[] = [
     username: '[email protected]',
     password: 'test1234!',
     email: '[email protected]',
-    provider: 'KAKAO',
+    provider: 'kakao',
     nickname: '제임스',
     profileImageName: 'Image2.png',
     bio: '커피를 코드로 바꾸는 마법사',
@@ -257,7 +257,7 @@ export const USER_DUMMY: UserInfo[] = [
     username: '[email protected]',
     password: 'test1234!',
     email: '[email protected]',
-    provider: 'GOOGLE',
+    provider: 'google',
     nickname: '에드워드',
     profileImageName: 'Image3.jpeg',
     bio: '버그를 춤추게 하는 디버깅의 달인',

src/mocks/services/authServiceHandler.ts

@@ -88,14 +88,14 @@ const authServiceHandler = [
     const { provider } = params as { provider: SocialLoginProvider };
     const { code } = (await request.json()) as { code: string };
 
-    const validProviders = ['KAKAO', 'GOOGLE'];
+    const validProviders = ['kakao', 'google'];
     if (!validProviders.includes(provider)) {
       return HttpResponse.json({ message: '지원하지 않는 Provider입니다.' }, { status: 400 });
     }
 
     // 공급업체별 설정 정보
     const providerConfigs = {
-      KAKAO: {
+      kakao: {
         tokenUrl: `https://kauth.kakao.com/oauth/token`,
         userInfoUrl: 'https://kapi.kakao.com/v2/user/me',
         accessTokenParams: {
@@ -107,7 +107,7 @@ const authServiceHandler = [
         accessTokenKey: 'access_token',
         headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' },
       },
-      GOOGLE: {
+      google: {
         tokenUrl: `https://oauth2.googleapis.com/token`,
         userInfoUrl: 'https://www.googleapis.com/userinfo/v2/me',
         accessTokenParams: {
@@ -165,7 +165,7 @@ const authServiceHandler = [
     }
 
     // 이메일 기반으로 사용자 검색 또는 회원가입
-    const email = provider === 'KAKAO' ? userInfo.kakao_account.email : userInfo.email;
+    const email = provider === 'kakao' ? userInfo.kakao_account.email : userInfo.email;
     if (!email) return HttpResponse.json({ message: '이메일 정보를 가져올 수 없습니다.' }, { status: 400 });
 
     const foundUser = USER_DUMMY.find((user) => user.email === email);

src/pages/user/SignInPage.tsx

@@ -34,7 +34,9 @@ export default function SignInPage() {
     try {
       const response = await getUserInfo();
       setUserInfo(response.data);
+      console.log(response.data);
     } catch (error) {
+      console.error('유저정보 오류', error);
       throw new Error('유저 정보를 가져오는 데 실패했습니다.');
     }
   };
@@ -43,27 +45,33 @@ export default function SignInPage() {
     try {
       const response = await login(formData);
       if (!response.headers) throw new Error();
+      console.log('response', response);
 
       const accessToken = response.headers.authorization;
       if (!accessToken) throw new Error();
+      console.log('accessToken', accessToken);
 
       onLogin(accessToken.split(' ')[1]);
     } catch (error) {
       const axiosError = error as AxiosError;
       if (axiosError.response?.status === 401) {
         throw new Error('아이디와 비밀번호를 한번 더 확인해 주세요.');
       }
+      console.error('로그인 도중 오류', axiosError);
       throw new Error('로그인 도중 오류가 발생했습니다.');
     }
   };
 
   const onSubmit = async (formData: UserSignInForm) => {
     try {
       await handleLogin(formData);
+      console.log('로그인 완료');
       await fetchUserInfo();
+      console.log('유저정보 가져옴');
       navigate('/', { replace: true });
     } catch (error) {
       const axiosError = error as Error;
+      console.error('로그인 + 유저정보 오류', axiosError);
       toastError(axiosError.message);
     }
   };
@@ -94,8 +102,8 @@ export default function SignInPage() {
         <FooterLinks type="signIn" />
       </AuthFormLayout>
       <section className="bottom-0 flex flex-col gap-8 text-center">
-        <SocialButton isSubmitting={isSubmitting} provider="KAKAO" />
-        <SocialButton isSubmitting={isSubmitting} provider="GOOGLE" />
+        <SocialButton isSubmitting={isSubmitting} provider="kakao" />
+        <SocialButton isSubmitting={isSubmitting} provider="google" />
       </section>
     </>
   );

src/routes/MainRouter.tsx

@@ -46,8 +46,8 @@ export default function MainRouter() {
       children: [
         { path: 'signup', element: <SignUpPage /> },
         { path: 'signin', element: <SignInPage /> },
-        { path: 'auth/kakao/callback', element: <SocialCallBackPage provider="KAKAO" /> },
-        { path: 'auth/google/callback', element: <SocialCallBackPage provider="GOOGLE" /> },
+        { path: 'auth/kakao/callback', element: <SocialCallBackPage provider="kakao" /> },
+        { path: 'auth/google/callback', element: <SocialCallBackPage provider="google" /> },
         { path: 'search/id', element: <SearchIdPage /> },
         { path: 'search/password', element: <SearchPasswordPage /> },
       ],

src/types/UserType.tsx

@@ -1,6 +1,6 @@
 import type { Role } from '@/types/RoleType';
 
-export type SocialLoginProvider = 'KAKAO' | 'GOOGLE';
+export type SocialLoginProvider = 'kakao' | 'google';
 
 export type User = {
   userId: number;