[AUD-11] 애플 로그인 Redirection 구현

.gitignore

@@ -24,3 +24,9 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

src/constants/index.ts

@@ -0,0 +1 @@
+export * from './login';

src/constants/login.ts

@@ -0,0 +1,24 @@
+export const socialLoginProvider = {
+    apple: {
+        url: 'https://appleid.apple.com/auth/authorize',
+        config: {
+            client_id: import.meta.env.VITE_APPLE_CLIENT_ID,
+            redirect_uri: import.meta.env.VITE_APPLE_REDIRECT_URL,
+            response_type: 'code id_token',
+            state: 'origin:web',
+            scope: 'name email',
+            response_mode: 'form_post',
+            m: 11,
+            v: '1.5.4',
+            // TODO: 임시 속성들. 추후 논의 후 수정해야 함
+        },
+    },
+    kakao: {
+        url: 'https://kauth.kakao.com/oauth/authorize',
+        config: {
+            client_id: import.meta.env.VITE_KAKAO_CLIENT_ID,
+            redirect_uri: import.meta.env.VITE_KAKAO_REDIRECT_URL,
+            response_type: 'code',
+        },
+    },
+};

src/pages/LoginPage.tsx

@@ -1,14 +1,38 @@
+import { socialLoginProvider } from '@/constants';
+import { SocialLoginProviderType } from '@/types';
+
 export default function LoginPage() {
-    const KAKAO_REST_API_KEY = ''; // TODO: 임시 KEY
-    const KAKAO_REDIRECT_URI = 'http://localhost:5173/redirect'; // TODO: 임시 URL
-    const kakaoLoginLink = `https://kauth.kakao.com/oauth/authorize?client_id=${KAKAO_REST_API_KEY}&redirect_uri=${KAKAO_REDIRECT_URI}&response_type=code`;
+    const makeQueryString = (
+        config: Record<string, string | number | boolean>,
+    ) => {
+        return Object.entries(config)
+            .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
+            .join('&');
+    };
+
+    const makeSocialLoginUrl = (provider: SocialLoginProviderType) => {
+        const { url, config } = socialLoginProvider[provider];
+        const queryString = makeQueryString(config);
+
+        return `${url}?${queryString}`;
+    };
+
+    const handleKakaoLogin = () => {
+        window.location.href = makeSocialLoginUrl('kakao');
+    };
+
+    const handleAppleLogin = () => {
+        window.location.href = makeSocialLoginUrl('apple');
+    };
 
-    const handleLogin = () => (window.location.href = kakaoLoginLink);
     return (
         <div>
-            <button type="button" onClick={handleLogin}>
+            <button type="button" onClick={handleKakaoLogin}>
                 카카오로 로그인
             </button>
+            <button type="button" onClick={handleAppleLogin}>
+                애플로 로그인
+            </button>
         </div>
     );
 }

src/pages/MainPage.tsx

@@ -1,30 +1,16 @@
-import reactLogo from '@/assets/react.svg';
 import { useTmap } from '@/hooks/useTmap';
 
-import viteLogo from '/vite.svg';
-
 function MainPage() {
-
-    const { tmapModuleRef, mapContainerRef } = useTmap({
+    const { /*tmapModuleRef, */ mapContainerRef } = useTmap({
         mapId: 'tmap',
         latitude: 37.5652045,
         longitude: 126.98702028,
     });
 
     return (
-            <div>
-                <div ref={mapContainerRef} />
-                <a href="https://vitejs.dev" target="_blank">
-                    <img src={viteLogo} className="logo" alt="Vite logo" />
-                </a>
-                <a href="https://react.dev" target="_blank">
-                    <img
-                        src={reactLogo}
-                        className="logo react"
-                        alt="React logo"
-                    />
-                </a>
-            </div>
+        <div>
+            <div ref={mapContainerRef} />
+        </div>
     );
 }
 

src/types/index.ts

@@ -0,0 +1 @@
+export * from './login';

src/types/login.ts

@@ -0,0 +1 @@
+export type SocialLoginProviderType = 'apple' | 'kakao';

vite-env.d.ts

@@ -0,0 +1,10 @@
+interface ImportMetaEnv {
+    readonly VITE_KAKAO_CLIENT_ID: string;
+    readonly VITE_KAKAO_REDIRECTION_URL: string;
+    readonly VITE_APPLE_CLIENT_ID: string;
+    readonly VITE_APPLE_REDIRECT_URL: string;
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv;
+}