[공통] api 및 타입 파일 생성

package.json

@@ -19,6 +19,7 @@
     ]
   },
   "dependencies": {
+    "axios": "^1.6.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",

src/apis/api.ts

@@ -0,0 +1,5 @@
+import axios, { AxiosInstance } from "axios";
+
+export const api: AxiosInstance = axios.create({
+  baseURL: import.meta.env.VITE_APP_BASE_URL,
+});

src/apis/kakao.ts

@@ -0,0 +1,11 @@
+import { KakaoLoginRequestType } from "../types/kakao";
+import { api } from "./api";
+
+const BASE_PATH = "/auth/login";
+
+const kakao = {
+  postKakaoLogin: ({ kakaoToken, fcmToken }: KakaoLoginRequestType) =>
+    api.post(`${BASE_PATH}`, { kakaoToken: kakaoToken, fcmToken: fcmToken }),
+};
+
+export default kakao;

src/apis/user.ts

@@ -0,0 +1,12 @@
+import { api } from "./api";
+
+const BASE_PATH = "/user";
+
+const user = {
+  deleteUser: (accessToken: string) =>
+    api.delete(`${BASE_PATH}`, {
+      headers: { Authorization: accessToken },
+    }),
+};
+
+export default user;

src/components/KakaoButton.tsx

@@ -1,13 +1,10 @@
 import styled from "styled-components";
 import { IcKakao } from "../assets/svg";
+import useKakaoLogin from "../hooks/queries/useKakaoLogin";
 
-interface KakaoBtnInterface {
-  onClickBtn: VoidFunction;
-}
-
-const KakaoButton = ({ onClickBtn }: KakaoBtnInterface) => {
+const KakaoButton = () => {
   return (
-    <KakaoButtonWrapper onClick={onClickBtn}>
+    <KakaoButtonWrapper onClick={useKakaoLogin}>
       <KakaoIcon />
       <KakaoText>카카오 로그인</KakaoText>
     </KakaoButtonWrapper>

src/hooks/queries/useKakaoLogin.tsx

@@ -0,0 +1,9 @@
+import { kakaoURL } from "../../utils/login";
+
+const useKakaoLogin = () => {
+  window.location.replace(kakaoURL);
+
+  return <></>;
+};
+
+export default useKakaoLogin;

src/pages/KakaoLoginPage.tsx

@@ -0,0 +1,12 @@
+// import { useState } from "react";
+
+const KakaoLoginPage = () => {
+  const code = new URL(window.location.href).searchParams.get("code");
+  console.log("CODE", code);
+  // const [accessToken, setAccessToken] = useState(localStorage.getItem("accessToken"));
+  // console.log("ACCESS_TOKEN", accessToken);
+  // if (accessToken) return;
+  return <></>;
+};
+
+export default KakaoLoginPage;

src/pages/LoginPage.tsx

@@ -3,14 +3,12 @@ import { IcPcLogo } from "../assets/svg";
 import KakaoButton from "../components/KakaoButton";
 import IcPcBackgrStars from "../../public/svg/ic_pc_backgr_stars.svg";
 const LoginPage = () => {
-  const onClickLoginBtn = () => {};
-  // console.log("LOGINPAGE!");
   return (
     <LoginPageWrapper>
       <LogoSection>
         <IcPcLogo />
       </LogoSection>
-      <KakaoButton onClickBtn={onClickLoginBtn} />
+      <KakaoButton />
       <LoginMessage>로그인 후 이용이 가능합니다.</LoginMessage>
     </LoginPageWrapper>
   );

src/router/Router.tsx

@@ -5,6 +5,7 @@ import RecordreamLayout from "../pages/RecordreamLayout";
 import DeletePage from "../pages/DeletePage";
 import CompletePage from "../pages/CompletePage";
 import UnregisteredPage from "../pages/UnregisteredPage";
+import KakaoLoginPage from "../pages/KakaoLoginPage";
 
 const router = createBrowserRouter([
   {
@@ -16,8 +17,8 @@ const router = createBrowserRouter([
         element: <LoginPage />,
       },
       {
-        path: "/",
-        element: <LoginPage />,
+        path: "/auth/login",
+        element: <KakaoLoginPage />,
       },
       {
         element: <RecordreamLayout iconOn={true} btnColor="red" btnMessage="탈퇴하기" />,

src/types/kakao.ts

@@ -0,0 +1,16 @@
+export interface KakaoLoginResponseType extends Response {
+  data: {
+    data: {
+      userId: string;
+      isAlreadyUser: boolean;
+      accessToken: string;
+      refreshToken: string;
+      nickname: string;
+    };
+  };
+}
+
+export interface KakaoLoginRequestType {
+  kakaoToken: string;
+  fcmToken: string;
+}

src/types/user.ts

@@ -0,0 +1,3 @@
+export interface DeleteUserResponseType extends Response {}
+
+export interface DeleteUserRequestType {}

src/utils/login.ts

@@ -0,0 +1,5 @@
+export const REST_API_KEY: string = import.meta.env.VITE_REST_API_KEY;
+export const REDIRECT_URI: string = import.meta.env.PROD
+  ? import.meta.env.VITE_REDIRECT_URI
+  : import.meta.env.VITE_LOCAL_REDIRECT_URI;
+export const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;

yarn.lock

@@ -961,13 +961,27 @@ arraybuffer.prototype.slice@^1.0.3:
     is-array-buffer "^3.0.4"
     is-shared-array-buffer "^1.0.2"
 
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
 available-typed-arrays@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz#a5cc375d6a03c2efc87a553f3e0b1522def14846"
   integrity sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==
   dependencies:
     possible-typed-array-names "^1.0.0"
 
+axios@^1.6.8:
+  version "1.6.8"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.8.tgz#66d294951f5d988a00e87a0ffb955316a619ea66"
+  integrity sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==
+  dependencies:
+    follow-redirects "^1.15.6"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -1102,6 +1116,13 @@ colorette@^2.0.20:
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a"
   integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
 
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
 [email protected]:
   version "11.1.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-11.1.0.tgz#62fdce76006a68e5c1ab3314dc92e800eb83d906"
@@ -1224,6 +1245,11 @@ define-properties@^1.1.3, define-properties@^1.2.0, define-properties@^1.2.1:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
 dir-glob@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
@@ -1680,13 +1706,27 @@ flatted@^3.2.9:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.1.tgz#21db470729a6734d4997002f439cb308987f567a"
   integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==
 
+follow-redirects@^1.15.6:
+  version "1.15.6"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b"
+  integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
+
 for-each@^0.3.3:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
   integrity sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==
   dependencies:
     is-callable "^1.1.3"
 
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 fsevents@~2.3.2, fsevents@~2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
@@ -2233,6 +2273,18 @@ [email protected], micromatch@^4.0.4:
     braces "^3.0.2"
     picomatch "^2.3.1"
 
+[email protected]:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.12:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
 mimic-fn@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
@@ -2497,6 +2549,11 @@ prettier@^3.2.5:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368"
   integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 punycode@^2.1.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"