fine-ants · bakhacode · Oct 23, 2023 · Oct 19, 2023 · Oct 19, 2023 · Oct 19, 2023
diff --git a/fe/index.html b/fe/index.html
@@ -4,6 +4,10 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>FineAnts</title>
+    <!-- Naver Login SDK -->
+    <script
+      src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.2.js"
+      defer></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/fe/package-lock.json b/fe/package-lock.json
diff --git a/fe/package.json b/fe/package.json
@@ -13,6 +13,7 @@
     "@lukemorales/query-key-factory": "^1.3.2",
     "@mui/material": "^5.14.13",
     "@mui/styled-engine-sc": "^6.0.0-alpha.1",
+    "@react-oauth/google": "^0.11.1",
     "@tanstack/react-query": "^4.36.1",
     "axios": "^1.5.1",
     "lightweight-charts": "^4.1.0",

diff --git a/fe/src/api/auth/index.ts b/fe/src/api/auth/index.ts
@@ -15,6 +15,7 @@ export type SignUpData = {
   nickname: string;
   email: string;
   password: string;
+  passwordConfirm: string;
   verificationCode: string;
 };
 
@@ -31,8 +32,7 @@ type AccessTokenData = {
 };
 
 export const postSignUp = async (body: SignUpData) => {
-  console.log("body:", body);
-  const res = await fetcher.post<Response<null>>("/users", body);
+  const res = await fetcher.post<Response<null>>("/auth/signup", body);
   return res.data;
 };
 
@@ -41,12 +41,12 @@ export const postSignIn = async (body: SignInCredentials) => {
   return res.data;
 };
 
-export const getOAuthSignIn = async (
+export const postOAuthSignIn = async (
   provider: OAuthProvider,
   authCode: string
 ) => {
   const res = await fetcher.get<Response<SignInData>>(
-    `/auth/oauth/${provider}?code=${authCode}`
+    `/auth/${provider}/login?code=${authCode}`
   );
   return res.data;
 };
@@ -78,3 +78,26 @@ export const patchUserInfo = async (body: FormData) => {
   });
   return res.data;
 };
+
+export const postNicknameDuplicateCheck = async (nickname: string) => {
+  const res = await fetcher.post<Response<null>>(
+    "/auth/signup/duplicationcheck/nickname",
+    { nickname }
+  );
+  return res.data;
+};
+
+export const postEmailDuplicateCheck = async (email: string) => {
+  const res = await fetcher.post<Response<null>>(
+    "/auth/signup/duplicationcheck/email",
+    { email }
+  );
+  return res.data;
+};
+
+export const postEmailVerification = async (email: string) => {
+  const res = await fetcher.post<Response<null>>("/auth/signup/verifyEmail", {
+    email,
+  });
+  return res.data;
+};
diff --git a/fe/src/api/auth/queries/useOAuthSignInMutation.ts b/fe/src/api/auth/queries/useOAuthSignInMutation.ts
@@ -1,4 +1,4 @@
-import { OAuthProvider, getOAuthSignIn } from "@api/auth";
+import { OAuthProvider, postOAuthSignIn } from "@api/auth";
 import { useMutation } from "@tanstack/react-query";
 import { useNavigate } from "react-router-dom";
 import Routes from "router/Routes";
@@ -15,7 +15,7 @@ export default function useOAuthSignInMutation() {
     }: {
       provider: OAuthProvider;
       authCode: string;
-    }) => getOAuthSignIn(provider, authCode),
+    }) => postOAuthSignIn(provider, authCode),
     onSuccess: ({ data }) => {
       const { accessToken, refreshToken } = data;
 

diff --git a/fe/src/api/fetcher.ts b/fe/src/api/fetcher.ts
@@ -1,13 +1,9 @@
+import { BASE_API_URL } from "@constants/config";
 import { refreshAccessToken } from "api/auth";
 import { HTTPSTATUS } from "api/types";
 import axios from "axios";
 import Routes from "router/Routes";
 
-const BASE_API_URL =
-  process.env.NODE_ENV === "production"
-    ? import.meta.env.VITE_API_URL_PROD
-    : import.meta.env.VITE_API_URL_DEV;
-
 export const fetcher = axios.create({
   baseURL: `${BASE_API_URL}/api`,
   headers: { "Content-Type": "application/json" },

diff --git a/fe/src/assets/images/kakao_login_medium_narrow.png b/fe/src/assets/images/kakao_login_medium_narrow.png
diff --git a/fe/src/assets/images/kakao_login_medium_wide.png b/fe/src/assets/images/kakao_login_medium_wide.png
diff --git a/fe/src/components/auth/GoogleSignInButton.tsx b/fe/src/components/auth/GoogleSignInButton.tsx
@@ -0,0 +1,26 @@
+import useOAuthSignInMutation from "@api/auth/queries/useOAuthSignInMutation";
+import { GoogleLogin } from "@react-oauth/google";
+
+export default function GoogleSignInButton() {
+  const { mutate: oAuthSignInMutate } = useOAuthSignInMutation();
+
+  return (
+    // TODO: custom login button (`useGoogleLogin` "auth-code" flow)
+    <GoogleLogin
+      onSuccess={(credentialResponse) => {
+        const authCode = credentialResponse.credential;
+
+        if (authCode) {
+          oAuthSignInMutate({
+            provider: "google",
+            authCode,
+          });
+        }
+      }}
+      onError={() => {
+        // TODO: Handle error from Google
+        console.log("Login Failed");
+      }}
+    />
+  );
+}
diff --git a/fe/src/components/auth/KakaoSignInButton.tsx b/fe/src/components/auth/KakaoSignInButton.tsx
@@ -0,0 +1,39 @@
+import kakaoLoginButtonImage from "@assets/images/kakao_login_medium_wide.png";
+import { CLIENT_URL, KAKAO_CLIENT_ID } from "@constants/config";
+import { WindowContext } from "@context/WindowContext";
+import openPopUpWindow from "@utils/openPopUpWindow";
+import { useContext } from "react";
+import { styled } from "styled-components";
+
+export default function KakaoSignInButton() {
+  const { onOpenPopUpWindow } = useContext(WindowContext);
+
+  const onKakaoSignIn = () => {
+    const oAuthPopUpWindow = openPopUpWindow(
+      `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${KAKAO_CLIENT_ID}&redirect_uri=${CLIENT_URL}/signin?provider=kakao`,
+      "kakaoOAuth",
+      500,
+      600
+    ); // TODO: handle case where popup doesn't show (Ex: user blocked popups)
+
+    if (oAuthPopUpWindow) {
+      onOpenPopUpWindow(oAuthPopUpWindow);
+    }
+  };
+
+  return (
+    <StyledKakaoSignInButton type="button" onClick={onKakaoSignIn}>
+      <img src={kakaoLoginButtonImage} alt="카카오 로그인" />
+    </StyledKakaoSignInButton>
+  );
+}
+
+const StyledKakaoSignInButton = styled.button`
+  width: 228px;
+  height: 44px;
+
+  img {
+    width: 100%;
+    object-fit: fill;
+  }
+`;
diff --git a/fe/src/components/auth/NaverSignInButton.tsx b/fe/src/components/auth/NaverSignInButton.tsx
@@ -0,0 +1,24 @@
+import { CLIENT_URL, NAVER_CLIENT_ID } from "@constants/config";
+import { useEffect } from "react";
+import styled from "styled-components";
+
+export default function NaverSignInButton() {
+  const naverLogin = new (window as any).naver.LoginWithNaverId({
+    clientId: NAVER_CLIENT_ID,
+    callbackUrl: `${CLIENT_URL}/signin?provider=naver`,
+    isPopup: true,
+    loginButton: {
+      color: "green",
+      type: 3,
+      height: 40,
+    },
+  });
+
+  useEffect(() => {
+    naverLogin.init();
+  }, []);
+
+  return <StyledNaverSignInButton id="naverIdLogin" />;
+}
+
+const StyledNaverSignInButton = styled.div``;
diff --git a/fe/src/constants/config.ts b/fe/src/constants/config.ts
@@ -0,0 +1,15 @@
+export const CLIENT_URL =
+  process.env.NODE_ENV === "production"
+    ? import.meta.env.VITE_CLIENT_URL_PROD
+    : import.meta.env.VITE_CLIENT_URL_DEV;
+
+export const BASE_API_URL =
+  process.env.NODE_ENV === "production"
+    ? import.meta.env.VITE_API_URL_PROD
+    : import.meta.env.VITE_API_URL_DEV;
+
+export const GOOGLE_CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID;
+
+export const KAKAO_CLIENT_ID = import.meta.env.VITE_KAKAO_CLIENT_ID;
+
+export const NAVER_CLIENT_ID = import.meta.env.VITE_NAVER_CLIENT_ID;
diff --git a/fe/src/context/WindowContext.tsx b/fe/src/context/WindowContext.tsx
@@ -0,0 +1,33 @@
+import { ReactNode, createContext, useState } from "react";
+
+export const WindowContext = createContext<{
+  popUpWindow: Window | null;
+  onOpenPopUpWindow: (targetWindow: Window) => void;
+  closePopUpWindow: () => void;
+}>({
+  popUpWindow: null,
+  onOpenPopUpWindow: () => {},
+  closePopUpWindow: () => {},
+});
+
+export function WindowProvider({ children }: { children: ReactNode }) {
+  const [popUpWindow, setPopUpWindow] = useState<Window | null>(null);
+
+  const onOpenPopUpWindow = (targetWindow: Window) => {
+    setPopUpWindow(targetWindow);
+  };
+
+  const closePopUpWindow = () => {
+    if (popUpWindow) {
+      popUpWindow.close();
+      setPopUpWindow(null);
+    }
+  };
+
+  return (
+    <WindowContext.Provider
+      value={{ popUpWindow, onOpenPopUpWindow, closePopUpWindow }}>
+      {children}
+    </WindowContext.Provider>
+  );
+}
diff --git a/fe/src/hooks/useText.tsx b/fe/src/hooks/useText.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 type Props = {
   initialValue?: string;
@@ -31,6 +31,10 @@ export default function useText(options?: Props) {
     setValue(newVal);
   };
 
+  useEffect(() => {
+    onChange(initialValue);
+  }, []);
+
   return {
     value,
     error,

diff --git a/fe/src/mocks/browserServiceWorker.ts b/fe/src/mocks/browserServiceWorker.ts
@@ -1,4 +1,4 @@
 import { setupWorker } from "msw";
-import handlers from "./handlers/index";
+import handlers from "./handlers";
 
 export default setupWorker(...handlers);
diff --git a/fe/src/mocks/data/authData.ts b/fe/src/mocks/data/authData.ts
@@ -0,0 +1,62 @@
+import { HTTPSTATUS } from "@api/types";
+
+export const successfulSignUpData = {
+  code: HTTPSTATUS.created,
+  status: "Created",
+  message: "회원가입이 완료되었습니다",
+  data: {
+    member: {
+      nickname: "Kakamotobi",
+      email: "[email protected]",
+    },
+  },
+};
+
+export const unsuccessfulSignUpData = {
+  code: HTTPSTATUS.badRequest,
+  status: "Bad Request",
+  message: "회원가입이 실패했습니다",
+  data: null,
+};
+
+export const successfulNicknameDuplicationCheckData = {
+  code: HTTPSTATUS.success,
+  status: "Success",
+  message: "닉네임이 사용 가능합니다",
+  data: null,
+};
+
+export const unsuccessfulNicknameDuplicationCheckData = {
+  code: HTTPSTATUS.badRequest,
+  status: "Bad Request",
+  message: "닉네임이 중복되었습니다",
+  data: null,
+};
+
+export const successfulEmailDuplicationCheckData = {
+  code: HTTPSTATUS.success,
+  status: "Success",
+  message: "이메일이 사용 가능합니다",
+  data: null,
+};
+
+export const unsuccessfulEmailDuplicationCheckData = {
+  code: HTTPSTATUS.badRequest,
+  status: "Bad Request",
+  message: "이메일이 중복되었습니다",
+  data: null,
+};
+
+export const successfulEmailVerificationData = {
+  code: HTTPSTATUS.success,
+  status: "Success",
+  message: "이메일로 검증코드를 전송하였습니다",
+  data: null,
+};
+
+export const unsuccessfulEmailVerificationData = {
+  code: HTTPSTATUS.badRequest,
+  status: "Bad Request",
+  message: "이메일 검증코드 전송을 실패했습니다",
+  data: null,
+};