feat: 회원가입 - 닉네임 api 연동 완료 (#7)

src/api/loginApi.ts

@@ -18,6 +18,12 @@ export const postSignUpLocation = async (body: { address: string }) => {
   return response.data;
 };
 
+export const postSignUpNickname = async (body: { nickname: string }) => {
+  const response = await axiosInstance.post(`/users/checknickname`, body);
+
+  return response.data;
+};
+
 export const postSignIn = async (body: { email: string; password: string }) => {
   const response = await axiosInstance.post(`/users/login`, body);
 

src/components/pages/login/SetNicknamePage.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { styled } from 'styled-components';
+import { postSignUpNickname } from '../../../api/loginApi';
 
 const SetNicknamePage = () => {
   const navigate = useNavigate();
@@ -10,7 +11,7 @@ const SetNicknamePage = () => {
 
   const validateNickname = (value: string) => {
     setIsValidLength(value.length >= 2 && value.length <= 15);
-    setIsValidFormat(/^[가-힣a-zA-Z0-9]+$/.test(value));
+    setIsValidFormat(/^[가-힣ㄱ-ㅎㅏ-ㅣa-zA-Z0-9]+$/.test(value));
   };
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -50,9 +51,15 @@ const SetNicknamePage = () => {
           띄어쓰기 및 특수문자 사용 불가
         </NicknameCondition>
         <NextButton
-          onClick={() => {
+          onClick={async () => {
             if (isValidLength && isValidFormat) {
-              navigate('/setprofile');
+              const response = await postSignUpNickname({ nickname: nickname });
+
+              if (response.message === '닉네임 중복 확인 완료') {
+                navigate('/setprofile');
+              } else {
+                alert('닉네임이 중복입니다.');
+              }
             } else {
               alert('닉네임 조건을 만족시켜 주세요.');
             }