Feat: signin, singup페이지 이전 미션 미개발 부분 진행

codeit-bootcamp-frontend · Jun 29, 2024 · fcecbef · fcecbef
1 parent d7c5cb9
commit fcecbef
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 36 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@hookform/error-message": "^2.0.1",
+    "@tanstack/react-query": "^5.49.0",
     "axios": "^1.7.2",
     "classnames": "^2.5.1",
     "next": "^13.5.6",

diff --git a/pages/signup.js b/pages/signup.js
@@ -2,6 +2,8 @@ import Link from "next/link";
 import styles from "../src/styles/sign.module.scss";
 import classNames from "classnames/bind";
 import { SocialLogin, SignUpForm } from "../src/components";
+import { useEffect } from "react";
+import { checkAccessToken } from "../src/utils";
 
 const cx = classNames.bind(styles);
 
@@ -14,12 +16,12 @@ function signUpPage() {
     <div className={cx("page-container")}>
       <div className={cx("contents")}>
         <div className={cx("title")}>
-          <Link href="/">
-            <img className={cx("logo")} src="/images/logo.svg" alt="로고" />
+          <Link href='/'>
+            <img className={cx("logo")} src='/images/logo.svg' alt='로고' />
           </Link>
           <h2>
             이미 회원이신가요?
-            <Link className={cx("signIn-link")} href="./signin">
+            <Link className={cx("signIn-link")} href='./signin'>
               로그인하기
             </Link>
           </h2>

diff --git a/src/components/SignInForm/SignInForm.js b/src/components/SignInForm/SignInForm.js
@@ -2,7 +2,13 @@ import styles from "./SingInForm.module.scss";
 import classNames from "classnames/bind";
 import { useForm } from "react-hook-form";
 import { InputBox } from "../InputBox";
-import { postIdPwd, regexData, ApiUrl, checkAccessToken } from "../../utils";
+import {
+  postIdPwd,
+  regexData,
+  ApiUrl,
+  checkAccessToken,
+  postSignin,
+} from "../../utils";
 
 const cx = classNames.bind(styles);
 
@@ -30,26 +36,27 @@ export function SignInForm() {
   });
 
   const onSubmit = (data) => {
-    postIdPwd(ApiUrl.signIn, data, setError, "signInToken");
+    console.log(data);
+    postSignin(data, setError);
   };
 
   return (
     <form className={cx("form-wrapper")} onSubmit={handleSubmit(onSubmit)}>
       <InputBox
-        label="이메일"
-        name="email"
-        placeholder="이메일을 입력해 주세요"
+        label='이메일'
+        name='email'
+        placeholder='이메일을 입력해 주세요'
         errors={errors}
         register={{ ...register("email", ValidData.email) }}
       />
       <InputBox
-        label="비밀번호"
-        name="password"
-        placeholder="비밀번호를 입력해 주세요"
+        label='비밀번호'
+        name='password'
+        placeholder='비밀번호를 입력해 주세요'
         errors={errors}
         register={{ ...register("password", ValidData.pwd) }}
       />
-      <button type="submit" className={cx("submit-button")}>
+      <button type='submit' className={cx("submit-button")}>
         로그인
       </button>
     </form>

diff --git a/src/components/SignUpForm/SignUpForm.js b/src/components/SignUpForm/SignUpForm.js
@@ -2,7 +2,7 @@ import styles from "./SignUpForm.module.scss";
 import classNames from "classnames/bind";
 import { useForm } from "react-hook-form";
 import { InputBox } from "../InputBox";
-import { checkDuplicateEmail, regexData } from "../../utils";
+import { checkDuplicateEmail, postSignUp, regexData } from "../../utils";
 
 const cx = classNames.bind(styles);
 
@@ -38,34 +38,37 @@ export function SignUpForm() {
     mode: "onBlur",
   });
 
-  const onSubmit = () => {
-    location.href = "folder";
+  const onSubmit = (data) => {
+    const { email, password } = data;
+    const selectedData = { email, password };
+    console.log(selectedData);
+    postSignUp(selectedData);
   };
 
   return (
     <form className={cx("form-wrapper")} onSubmit={handleSubmit(onSubmit)}>
       <InputBox
-        label="이메일"
-        name="email"
-        placeholder="이메일을 입력해 주세요"
+        label='이메일'
+        name='email'
+        placeholder='이메일을 입력해 주세요'
         errors={errors}
         register={{ ...register("email", ValidData.email) }}
       />
       <InputBox
-        label="비밀번호"
-        name="password"
-        placeholder="영문, 숫자를 조합해 8자 이상 입력해 주세요."
+        label='비밀번호'
+        name='password'
+        placeholder='영문, 숫자를 조합해 8자 이상 입력해 주세요.'
         errors={errors}
         register={{ ...register("password", ValidData.pwd) }}
       />
       <InputBox
-        label="비밀번호 확인"
-        name="passwordCheck"
-        placeholder="비밀번호와 일치하는 값을 입력해주세요"
+        label='비밀번호 확인'
+        name='passwordCheck'
+        placeholder='비밀번호와 일치하는 값을 입력해주세요'
         errors={errors}
         register={{ ...register("passwordCheck", ValidData.pwdCheck) }}
       />
-      <button type="submit" className={cx("submit-button")}>
+      <button type='submit' className={cx("submit-button")}>
         회원가입
       </button>
     </form>

diff --git a/src/utils/api.js b/src/utils/api.js
@@ -1,9 +1,28 @@
 import { ApiUrl } from "./url";
 import axiosInstance from "./axios";
 
-export async function postIdPwd(url, inputData, setError, tokenName) {
+export async function postSignUp(inputData) {
   try {
-    const res = await fetch(url, {
+    const res = await fetch(ApiUrl.signUp, {
+      method: "POST",
+      headers: {
+        "Content-type": "application/json",
+      },
+      body: JSON.stringify(inputData),
+    });
+
+    if (!res.ok) {
+      throw new Error("bad request");
+    }
+    await postSignin(inputData);
+  } catch (error) {
+    console.log(error);
+  }
+}
+
+export async function postSignin(inputData, setError = "") {
+  try {
+    const res = await fetch(ApiUrl.signIn, {
       method: "POST",
       headers: {
         "Content-type": "application/json",
@@ -16,10 +35,12 @@ export async function postIdPwd(url, inputData, setError, tokenName) {
     }
 
     const result = await res.json();
-    const accessToken = result.data.accessToken;
-    saveAccessTokenToLocalStorage(accessToken, tokenName);
+    console.log(result.accessToken);
+    const accessToken = result.accessToken;
+    saveAccessTokenToLocalStorage(accessToken, "signInToken");
     location.href = "folder";
-  } catch {
+  } catch (error) {
+    console.error("SignIn Error:", error);
     setError("password", {
       type: "server",
       message: "비밀번호를 확인해 주세요",
@@ -48,8 +69,7 @@ export async function checkDuplicateEmail(value) {
     if (!res.ok) {
       throw new Error("bad request");
     }
-
-    return (result = await res.json());
+    return true;
   } catch {
     return false;
   }

diff --git a/src/utils/url.js b/src/utils/url.js
@@ -1,10 +1,10 @@
-export const baseUrl = "https://bootcamp-api.codeit.kr/api/";
+export const baseUrl = "https://bootcamp-api.codeit.kr/api/linkbrary/v1/";
 
 export const ApiUrl = {
   sampleUser: `${baseUrl}sample/user`,
   usersFolders: `${baseUrl}users/1/folders`,
   usersLinks: `${baseUrl}users/1/links`,
-  signIn: `${baseUrl}sign-in`,
-  signUp: `${baseUrl}sign-up`,
-  checkEmail: `${baseUrl}check-email`,
+  signIn: `${baseUrl}auth/sign-in`,
+  signUp: `${baseUrl}auth/sign-up`,
+  checkEmail: `${baseUrl}users/check-email`,
 };