feat: 필명 등록 API 연동

mock api를 이용한 필명등록 API 기능 개발.
error code에 따라 중복필명처리, 시스템 alert 처리 추가
- login 기능 추가 후 userId 처리 추가

close #53

data/user/user.api.ts

@@ -1,6 +1,6 @@
 import axios from '~/shared/axios';
 import { SuccessResponse } from '~/shared/types';
-import { UserData, NameRegistrationRequest } from './user.model';
+import { UserData } from './user.model';
 
 export async function getUserInfo(userId: string) {
   const { data } = await axios.get<SuccessResponse<UserData>>(
@@ -14,12 +14,10 @@ export async function getUserInfo(userId: string) {
   return data;
 }
 
-export async function postNameRegistration(
-  nameRegistrationRequest: NameRegistrationRequest,
-) {
+export async function postNameRegistration(userData: UserData) {
   const { data } = await axios.post<SuccessResponse>(
     '/user/name_registration',
-    nameRegistrationRequest,
+    userData,
   );
   return data;
 }

data/user/user.hooks.ts

@@ -1,8 +1,13 @@
-import { useQuery, UseQueryOptions } from 'react-query';
+import {
+  UseMutationOptions,
+  useQuery,
+  UseQueryOptions,
+  useMutation,
+} from 'react-query';
 import { AxiosError } from 'axios';
 import { SuccessResponse } from '~/shared/types';
 import { UserData } from './user.model';
-import { getUserInfo } from './user.api';
+import { getUserInfo, postNameRegistration } from './user.api';
 
 export function useUserInfo(
   userId: string,
@@ -23,3 +28,16 @@ export function useUserInfo(
     },
   );
 }
+
+export function useNameRegistration(
+  options: UseMutationOptions<SuccessResponse, AxiosError<unknown>, UserData>,
+) {
+  return useMutation<SuccessResponse, AxiosError, UserData>(
+    '/user/name_registration',
+    postNameRegistration,
+    {
+      retry: false,
+      ...options,
+    },
+  );
+}

data/user/user.model.ts

@@ -1,9 +1,4 @@
 export interface UserData {
   userId: string;
-  userName: string;
-}
-
-export interface NameRegistrationRequest {
-  userId: string;
-  name: string;
+  userName?: string;
 }

mocks/handlers.ts

@@ -1,11 +1,13 @@
 import { rest, RestRequest } from 'msw';
 import { WritingContentsRequest } from '~/data/services/services.model';
+import { UserData } from '~/data/user/user.model';
 import { API_URL } from '~/shared/constants/environments';
 import {
   ContentsFactory,
   ErrorResponseFactory,
   WriterFactory,
 } from './factories';
+import { camelizeKeys } from 'humps';
 
 export const handlers = [
   rest.get(`${API_URL}/services/main_contents`, (req, res, ctx) => {
@@ -84,7 +86,37 @@ export const handlers = [
         const errorResponse = ErrorResponseFactory.build();
         return res(ctx.status(422), ctx.json(errorResponse));
       }
-      console.log(writingContents);
+
+      return res(
+        ctx.status(200),
+        ctx.json({
+          msg: '응답 성공',
+          data: {},
+        }),
+      );
+    },
+  ),
+  rest.post(
+    `${API_URL}/user/name_registration`,
+    (req: RestRequest<UserData>, res, ctx) => {
+      const userData = camelizeKeys(req.body) as UserData;
+      console.log(userData);
+
+      if (userData.userId === '') {
+        const errorResponse = ErrorResponseFactory.build();
+        return res(ctx.status(422), ctx.json(errorResponse));
+      }
+
+      if (userData.userName === 'invalid') {
+        return res(
+          ctx.status(404),
+          ctx.json({
+            msg: '이미 존재하는 필명입니다.',
+            data: {},
+          }),
+        );
+      }
+
       return res(
         ctx.status(200),
         ctx.json({

pages/registration/penname.tsx → pages/registration/username.tsx

@@ -1,9 +1,41 @@
+import { useState, ChangeEvent } from 'react';
 import { NextPage } from 'next';
 import { NextSeo } from 'next-seo';
 import { Box, Text, Button } from '@nolmungshemung/ui-kits';
 import { BasicInput } from '~/components/Input';
+import { useNameRegistration } from '~/data/user/user.hooks';
 
 const PenName: NextPage = function () {
+  const [userName, setUserName] = useState('');
+  const [showError, setShowError] = useState(false);
+
+  const { mutate } = useNameRegistration({
+    onSuccess() {
+      setShowError(false);
+      window.alert('필명이 등록(수정) 되었습니다!');
+    },
+    onError(error) {
+      const errorCode = error.response?.status;
+      if (errorCode === 404) {
+        setShowError(true);
+      } else if (errorCode === 422) {
+        setShowError(false);
+        window.alert('필명 등록(수정)에 실패했습니다. 관리자에게 문의하세요');
+      }
+    },
+  });
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setUserName(e.target.value);
+  };
+
+  const onPenNameRegist = () => {
+    mutate({
+      userId: '',
+      userName,
+    });
+  };
+
   return (
     <>
       <NextSeo
@@ -46,6 +78,8 @@ const PenName: NextPage = function () {
           >
             <BasicInput
               type="text"
+              value={userName}
+              onChange={handleChange}
               placeholder="필명"
               css={{
                 backgroundColor: '#EEE',
@@ -57,12 +91,28 @@ const PenName: NextPage = function () {
               }}
             />
           </Box>
+          {showError && (
+            <Box
+              css={{
+                marginBottom: '$sp-20',
+              }}
+            >
+              <Text
+                css={{
+                  color: 'rgba(222, 14, 14, 0.9)',
+                }}
+              >
+                이미 사용 중인 필명입니다. 다른 필명을 사용해주세요.
+              </Text>
+            </Box>
+          )}
           <Button
             color="primary"
             size="lg"
             css={{
               cursor: 'pointer',
             }}
+            onClick={onPenNameRegist}
           >
             등록하기
           </Button>