[feat] 회원가입 페이지 API 연동 (추가 정보 페이지 미 포함) (#36)

* [feat] initial setting up for Tanstack-query

* [style] added fill props "gray" of ProfileEditButton Component

* [feat] added useTimer hook

* [feat] added FieldTimerButton in Field Component

* [feat] update for email confirmation retry in Field Component and useSignUpState logic

* [feat] update Field Component Naming

* [feat] complete first sign up step page

* [feat] added logic of request server api for additional Info page

* [feat] modify error message for username duplicate

* [refact] refactored sign up page (included github sign up)

* [feat] add login login after being successful sign up step

* [feat] added login login after being successfule sign up step at Github page

src/api/auth.ts

@@ -0,0 +1,27 @@
+import { defaultInstance } from './httpRequest';
+
+interface AuthTokenType {
+  accessToken: string;
+  refreshToken: string;
+}
+
+const postLogin = async (loginInfo: { email: string; password: string }) => {
+  const result = await defaultInstance<AuthTokenType>({
+    method: 'POST',
+    url: '/login',
+    data: loginInfo,
+  });
+
+  return result;
+};
+
+const requestLogout = async () => {
+  const result = await defaultInstance<AuthTokenType>({
+    method: 'GET',
+    url: '/logout/success',
+  });
+
+  return result;
+};
+
+export { postLogin, requestLogout };

src/api/httpRequest.ts

@@ -1,7 +1,11 @@
 import axios, { AxiosError, AxiosInstance, AxiosRequestConfig } from 'axios';
 
-type HttpResponseType = { isSuccess: boolean; code: number; message: string };
-type HttpSuccessType<T> = HttpResponseType & { result?: T };
+export type HttpResponseType = {
+  isSuccess: boolean;
+  code: number;
+  message: string;
+};
+export type HttpSuccessType<T> = HttpResponseType & { result?: T };
 
 const BASE_URL = '/api';
 
@@ -16,7 +20,7 @@ authAxios.interceptors.response.use((config) => {
   return config;
 });
 
-class ResponseError extends Error {
+export class ResponseError extends Error {
   isSuccess: boolean;
 
   code: number;

src/api/info.ts

@@ -0,0 +1,33 @@
+import { defaultInstance } from './httpRequest';
+
+const postSocialAccount = async (account: { socialAccountUrl: string }) => {
+  const url = `/social-accounts`;
+
+  const result = await defaultInstance({
+    method: 'POST',
+    url,
+    data: account,
+  });
+
+  return result;
+};
+
+const postInterest = async ({
+  userId,
+  interestName,
+}: {
+  userId: number;
+  interestName: string;
+}) => {
+  const url = `/users/${userId}/interests`;
+
+  const result = await defaultInstance({
+    method: 'POST',
+    url,
+    data: { userId, interestName },
+  });
+
+  return result;
+};
+
+export { postSocialAccount, postInterest };

src/api/mutations/auth.ts

@@ -0,0 +1,18 @@
+import { UseMutationOptions, useMutation } from '@tanstack/react-query';
+import { postLogin } from '../auth';
+import { HttpSuccessType, ResponseError } from '../httpRequest';
+
+const useLogin = async (
+  options: UseMutationOptions<
+    HttpSuccessType<{ accessToken: string; refreshToken: string }>,
+    ResponseError,
+    { email: string; password: string }
+  >,
+) => {
+  return useMutation({
+    mutationFn: (loginInfo) => postLogin(loginInfo),
+    ...options,
+  });
+};
+
+export { useLogin };

src/api/mutations/info.ts

@@ -0,0 +1,31 @@
+import { UseMutationOptions, useMutation } from '@tanstack/react-query';
+import { HttpSuccessType, ResponseError } from '../httpRequest';
+import { postInterest, postSocialAccount } from '../info';
+
+const useAddSocialAccountMutation = (
+  options: UseMutationOptions<
+    HttpSuccessType<unknown>,
+    ResponseError,
+    { socialAccountUrl: string }
+  >,
+) => {
+  return useMutation({
+    mutationFn: postSocialAccount,
+    ...options,
+  });
+};
+
+const useAddInterest = (
+  options: UseMutationOptions<
+    HttpSuccessType<unknown>,
+    ResponseError,
+    { userId: number; interestName: string }
+  >,
+) => {
+  return useMutation({
+    mutationFn: postInterest,
+    ...options,
+  });
+};
+
+export { useAddSocialAccountMutation, useAddInterest };

src/api/mutations/sign-up.ts

@@ -0,0 +1,56 @@
+import { UseMutationOptions, useMutation } from '@tanstack/react-query';
+import {
+  UserSignUpType,
+  postConfirmCode,
+  postConfirmCodeByEamil,
+  postConfirmUsernameDuplicate,
+  postSignupUser,
+} from '../sign-up';
+import { HttpSuccessType, ResponseError } from '../httpRequest';
+
+export const useSelfSignUpMutation = (
+  options: UseMutationOptions<HttpSuccessType<unknown>, ResponseError, string>,
+) =>
+  useMutation({
+    mutationFn: postConfirmCodeByEamil,
+    ...options,
+  });
+
+export const useEamilConfirmMutation = (
+  options: UseMutationOptions<
+    HttpSuccessType<{ emailToken: string }>,
+    ResponseError,
+    { email: string; code: string }
+  > = {},
+) => {
+  return useMutation({
+    mutationFn: postConfirmCode,
+    ...options,
+  });
+};
+
+export const useConfirmUsernameDuplicate = (
+  options: UseMutationOptions<
+    HttpSuccessType<{ usernameToken: string }>,
+    ResponseError,
+    string
+  > = {},
+) => {
+  return useMutation({
+    mutationFn: postConfirmUsernameDuplicate,
+    ...options,
+  });
+};
+
+export const useSignupUser = (
+  options: UseMutationOptions<
+    HttpSuccessType<unknown>,
+    ResponseError,
+    UserSignUpType
+  > = {},
+) => {
+  return useMutation({
+    mutationFn: postSignupUser,
+    ...options,
+  });
+};

src/api/sign-up.ts

@@ -0,0 +1,69 @@
+import { defaultInstance } from './httpRequest';
+
+type UserSignUpType = {
+  email: string;
+  password: string;
+  username: string;
+  emailToken: string;
+  usernameToken: string;
+};
+
+const postConfirmCodeByEamil = async (email: string) => {
+  const url = `/verification/email?email=${email}`;
+
+  const result = await defaultInstance({
+    method: 'POST',
+    url,
+  });
+
+  return result;
+};
+
+const postConfirmCode = async ({
+  email,
+  code,
+}: {
+  email: string;
+  code: string;
+}) => {
+  const url = `/verification/email/${email}?code=${code}`;
+
+  const result = await defaultInstance<{ emailToken: string }>({
+    method: 'POST',
+    url,
+  });
+
+  return result;
+};
+
+const postConfirmUsernameDuplicate = async (username: string) => {
+  const url = `/verification/username?username=${username}`;
+
+  const result = await defaultInstance<{ usernameToken: string }>({
+    method: 'POST',
+    url,
+  });
+
+  return result;
+};
+
+const postSignupUser = async (userInfo: UserSignUpType) => {
+  const url = `/users`;
+
+  const result = await defaultInstance({
+    method: 'POST',
+    url,
+    data: userInfo,
+  });
+
+  return result;
+};
+
+export {
+  postConfirmCodeByEamil,
+  postConfirmCode,
+  postConfirmUsernameDuplicate,
+  postSignupUser,
+};
+
+export type { UserSignUpType };