Gmmq 157 feat: 로그인 페이지 마크업 + 카카오 로그인 페이지 리다이렉션 (#6)

* chore: meta title 수정 * feat: 카카오 소셜 로그인 key, redirect uri 환경변수 추가 * feat: 로그인 페이지 마크업 + 카카오 로그인 페이지 리다이렉션 * feat: 로그인 페이지 마크업 추가 * GMMQ-79 feat: axios interceptor (#4) * feat: baseUrl env 상수 추가, gitignore * feat: axios 인스턴스 추가 * feat: 401, 404, 5xx axios 인터셉터 추가 * Gmmq 72 feat: 라우터 설정하기 (#2) * feat: 라우터 적용을 위한 페이지 생성 * feat: 레이아웃 생성 * feat: 라우터 설정 * chore: index 파일 수정 * feat: Page 폴더 구조 정리 * feat: 라우터 설정 * chore: 사용하지 않는 파일 제거 * fix: 경로 수정 * chore: index 파일 삭제 * fix: 라우팅 변경, 파일 이름 변경 * fix: 환경변수 prefix 수정 --------- Co-authored-by: backward99 <86753969+backward99@users.noreply.github.com> * fix: base url 환경변수 이동 --------- Co-authored-by: backward99 <86753969+backward99@users.noreply.github.com>
resumeme · Oct 26, 2023 · b4d6b52 · b4d6b52
1 parent b297e80
commit b4d6b52
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -2,12 +2,22 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="/vite.svg"
+    />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
+    <title>이력, 써 resume.me</title>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script
+      type="module"
+      src="/src/main.tsx"
+    ></script>
   </body>
 </html>
diff --git a/src/api/axios.ts b/src/api/axios.ts
@@ -1,9 +1,9 @@
 import axios from 'axios';
 import { redirect } from 'react-router-dom';
-import constants from '~/constants';
+import { environments } from '~/config/environments';
 
 export const resumeMeAxios = axios.create({
-  baseURL: constants.baseUrlEnv,
+  baseURL: environments.baseUrlEnv(),
   headers: {
     'Content-Type': 'application/json',
   },

diff --git a/src/config/environments.ts b/src/config/environments.ts
@@ -0,0 +1,14 @@
+const { VITE_BASE_URL, VITE_KAKAO_REST_API_KEY, VITE_KAKAO_REDIRECT_URI } = import.meta.env;
+
+export const environments = {
+  baseUrlEnv: () => checkEnv(VITE_BASE_URL),
+  kakaoRestApiKeyEnv: () => checkEnv(VITE_KAKAO_REST_API_KEY),
+  kakaoRedirectUriEnv: () => checkEnv(VITE_KAKAO_REDIRECT_URI),
+};
+
+const checkEnv = (envKey: string) => {
+  if (!envKey) {
+    throw new Error(`${envKey} 환경변수가 설정돼있지 않습니다.`);
+  }
+  return envKey;
+};
diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -1,7 +1,3 @@
-import { environments } from './environments';
-
-const constants = {
-  ...environments,
-};
+const constants = {};
 
 export default constants;
diff --git a/src/pages/SignInPage/SignInPage.tsx b/src/pages/SignInPage/SignInPage.tsx
@@ -1,5 +1,20 @@
+import { environments } from '~/config/environments';
+
 const SignInPage = () => {
-  return <></>;
+  const kakaoSignInUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${environments.kakaoRestApiKeyEnv()}&redirect_uri=${environments.kakaoRedirectUriEnv()}&response_type=code`;
+  const handleKakaoClick = () => {
+    window.location.href = kakaoSignInUrl;
+  };
+  return (
+    <div>
+      <div>resume.me</div>
+      <div>이력,써에 가입하고 피드백을 받아보세요.</div>
+      <div>연동할 소셜 서비스 계정을 선택하세요.</div>
+      <button onClick={handleKakaoClick}>카카오 로그인</button>
+      <a href="#">계정을 잊으셨나요?</a>
+      <div>ⓒ 아몬드빼빼로</div>
+    </div>
+  );
 };
 
 export default SignInPage;