From e1c3c3270a3d4b6ab128dff72b7c14dbb0a4e7f1 Mon Sep 17 00:00:00 2001
From: happppi <102276917+hhbb0081@users.noreply.github.com>
Date: Mon, 27 May 2024 21:41:43 +0900
Subject: [PATCH 1/8] =?UTF-8?q?Feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/Login/components/LoginBtn.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/Login/components/LoginBtn.tsx b/src/features/Login/components/LoginBtn.tsx
index cd947b9..4961b7f 100644
--- a/src/features/Login/components/LoginBtn.tsx
+++ b/src/features/Login/components/LoginBtn.tsx
@@ -5,7 +5,7 @@ import "./Login.css";
 
 export default function LoginBtn() {
   const handleLogin = () => {
-    window.location.href = `https://kauth.kakao.com/oauth/authorize?client_id=${process.env.NEXT_PUBLIC_API_KEY}&redirect_url=${process.env.NEXT_PUBLIC_REDIRECT_URL}&response_type=code`
+    window.location.href = `${process.env.NEXT_PUBLIC_KAKAO_URL}`;
   }
   return (
     <Image src={IMAGES.loginKakao} alt="kakao login" className="login_kakao" onClick={handleLogin}/>

From 885bab2ed33063d866382ed55dcd2e9c648ea882 Mon Sep 17 00:00:00 2001
From: happppi <102276917+hhbb0081@users.noreply.github.com>
Date: Mon, 27 May 2024 21:44:55 +0900
Subject: [PATCH 2/8] =?UTF-8?q?Feat:=20withCredentials=20=EC=98=B5?=
 =?UTF-8?q?=EC=85=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/http.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/apis/http.tsx b/src/apis/http.tsx
index bc7de52..b17aa8c 100644
--- a/src/apis/http.tsx
+++ b/src/apis/http.tsx
@@ -3,7 +3,8 @@ import axios from "axios";
 import { AxiosInstance, AxiosRequestConfig } from "axios";
 
 const axiosInstance = axios.create({
-    baseURL: process.env.NEXT_PUBLIC_LOCAL_URL
+    baseURL: process.env.NEXT_PUBLIC_LOCAL_URL,
+    withCredentials: true
 });
 
 export interface HttpClient extends AxiosInstance {

From 61d4ce28c7de3e399c84fcc2981b620cca255afa Mon Sep 17 00:00:00 2001
From: happppi <102276917+hhbb0081@users.noreply.github.com>
Date: Mon, 27 May 2024 21:45:22 +0900
Subject: [PATCH 3/8] =?UTF-8?q?Fix:=20URL=20=EB=88=84=EB=9D=BD=EB=90=9C=20?=
 =?UTF-8?q?=EB=B6=80=EB=B6=84=20=EC=B6=94=EA=B0=80=20(/api)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/.env b/.env
index a58bccf..38cb3b8 100644
--- a/.env
+++ b/.env
@@ -1,4 +1,2 @@
 NEXT_PUBLIC_API_URL=http://3.34.58.135:8080
-NEXT_PUBLIC_LOCAL_URL=http://localhost:8080
-NEXT_PUBLIC_API_KEY=bf46dcac98a9a9ce6a13a465fa86d0b2
-NEXT_PUBLIC_REDIRECT_URL=http://3.34.58.135:3000
\ No newline at end of file
+NEXT_PUBLIC_LOCAL_URL=http://localhost:8080/api
\ No newline at end of file

From ec3602a546f1d75e1fcf533336eace3fdc448bfa Mon Sep 17 00:00:00 2001
From: happppi <102276917+hhbb0081@users.noreply.github.com>
Date: Mon, 27 May 2024 21:46:31 +0900
Subject: [PATCH 4/8] =?UTF-8?q?Feat:=20react-hook-form=20register=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/atoms/button/Button.tsx        |  5 +-
 .../atoms/fileUpload/FileUpload.tsx           |  5 +-
 src/components/atoms/input/Input.tsx          | 23 ++++---
 src/components/atoms/textarea/Textarea.tsx    |  5 +-
 src/components/atoms/toggle/Toggle.tsx        | 11 ++-
 src/components/molecules/authBox/AuthBox.tsx  | 29 +++++---
 .../molecules/inputBox/InputBox.tsx           | 68 +++++++++++++++----
 7 files changed, 103 insertions(+), 43 deletions(-)

diff --git a/src/components/atoms/button/Button.tsx b/src/components/atoms/button/Button.tsx
index 86e39f3..b3c1054 100644
--- a/src/components/atoms/button/Button.tsx
+++ b/src/components/atoms/button/Button.tsx
@@ -11,14 +11,15 @@ export interface ButtonProps {
   height?: string;
   fontSize?: string;
   fontWeight?: string;
+  type?: "button" | "submit" | "reset" | undefined;
 }
 
-export function Button({ children, onClick, color = "#2b2b2b", backgroundColor = "#51F8C4", size = "lg", fontSize = "1rem", fontWeight = "700" }: ButtonProps) {
+export function Button({ children, onClick, color = "#2b2b2b", backgroundColor = "#51F8C4", size = "lg", fontSize = "1rem", fontWeight = "700", type = "button" }: ButtonProps) {
   const style: React.CSSProperties = {
     color: color,
     backgroundColor: backgroundColor,
     fontSize: fontSize,
     fontWeight: fontWeight,
   };
-  return <div onClick={onClick} className={`btn ${size}`} style={style}>{children}</div>;
+  return <button onClick={onClick} className={`btn ${size}`} style={style} type={type}>{children}</button>;
 }
diff --git a/src/components/atoms/fileUpload/FileUpload.tsx b/src/components/atoms/fileUpload/FileUpload.tsx
index 827e7a1..4b26e73 100644
--- a/src/components/atoms/fileUpload/FileUpload.tsx
+++ b/src/components/atoms/fileUpload/FileUpload.tsx
@@ -6,9 +6,11 @@ import "./FileUpload.css";
 
 export interface FileUploadProps {
   children?: ReactNode;
+  name: string;
+  register: any;
 }
 
-export function FileUpload({ children }: FileUploadProps) {
+export function FileUpload({ children, name, register }: FileUploadProps) {
   interface imageState {
     url?: string;
     name?: string;
@@ -53,6 +55,7 @@ export function FileUpload({ children }: FileUploadProps) {
                 type="file"
                 accept="image/*"
                 onChange={handleImageChange}
+                {...register(name)}
                 multiple
               />
             </>
diff --git a/src/components/atoms/input/Input.tsx b/src/components/atoms/input/Input.tsx
index 85e87fe..6c499b9 100644
--- a/src/components/atoms/input/Input.tsx
+++ b/src/components/atoms/input/Input.tsx
@@ -1,38 +1,41 @@
 "use client";
 
-import React, { forwardRef, useState } from "react";
-import { UseControllerProps, useController } from "react-hook-form";
+import { forwardRef, useState } from "react";
+import { UseControllerProps } from "react-hook-form";
 import "./input.css";
 
 export interface InputProps extends UseControllerProps{
   placeholder?: string;
   size?: 'sm' | 'md' | 'lg';
   maxCnt?: number;
+  register: any;
+  value?: string | number;
 }
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ control, size = "lg", placeholder = "", maxCnt = 0, name = '', ...props }, ref) => {
+  ({ register, size = "lg", placeholder = "", maxCnt = 0, name = '', value, ...props }, ref) => {
     const [textCnt, setTextCnt] = useState(0);
-    const {
-      field,
-      fieldState: { error }
-    } = useController({ name, control });
+    // const {
+    //   field,
+    //   fieldState: { error }
+    // } = useController({ name, control });
 
     const handleChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
       setTextCnt(e.target.value.length);
+      // field.onChange(e);
     }
 
     return (
       <div className="input__wrapper">
         <input 
-          ref={ref}
           type="text"
           className={`input ${size}`}
           placeholder={placeholder}
-          onChange={field.onChange}
-          value={field.value || ''}
+          onChange={handleChangeInput}
+          value={value}
           maxLength={maxCnt !== 0 ? maxCnt : undefined}
           name={name}
+          {...register(name)}
           {...props}
         />
         {maxCnt !== 0 && (
diff --git a/src/components/atoms/textarea/Textarea.tsx b/src/components/atoms/textarea/Textarea.tsx
index d97d235..ac10627 100644
--- a/src/components/atoms/textarea/Textarea.tsx
+++ b/src/components/atoms/textarea/Textarea.tsx
@@ -10,9 +10,11 @@ export interface TextareaProps {
   height?: string;
   fontSize?: string;
   maxCnt?: number;
+  name: string;
+  register: any;
 }
 
-export function Textarea({ backgroundColor = "#2B2B2B", color = "#fff", size = "big", height = "12rem", fontSize = "16px", content = "", maxCnt = 300 }: TextareaProps) {
+export function Textarea({ backgroundColor = "#2B2B2B", color = "#fff", size = "big", height = "12rem", fontSize = "16px", content = "", maxCnt = 300, name, register }: TextareaProps) {
   const [isFocused, setIsFocused] = useState(false);
   const [textCnt, setTextCnt] = useState(0);
   const style: React.CSSProperties = {
@@ -50,6 +52,7 @@ export function Textarea({ backgroundColor = "#2B2B2B", color = "#fff", size = "
         onBlur={handleBlur}
         onChange={handleTextCnt}
         maxLength={maxCnt}
+        {...register(name)}
       />
       <p>
         <span>{textCnt}</span>
diff --git a/src/components/atoms/toggle/Toggle.tsx b/src/components/atoms/toggle/Toggle.tsx
index c419494..a8b0e24 100644
--- a/src/components/atoms/toggle/Toggle.tsx
+++ b/src/components/atoms/toggle/Toggle.tsx
@@ -12,17 +12,15 @@ export interface ToggleProps {
   width?: string;
   fontSize?: string;
   content?: string;
+  name: string;
+  register: any;
 }
 
 export function Toggle({
-  children,
-  color = "#2b2b2b",
-  backgroundColor = "#51F8C4",
-  size = "big",
   height = "2rem",
   width = "4rem",
-  fontSize = "16rem",
-  content = "",
+  name,
+  register
 }: ToggleProps) {
   const [on, setOn] = useState(false);
   const changeToggle = () => {
@@ -65,6 +63,7 @@ export function Toggle({
         checked={on}
         //   onChange={noop}
         data-testid="toggle-input"
+        {...register(name)}
       />
       <span
         className={toggleClassName}
diff --git a/src/components/molecules/authBox/AuthBox.tsx b/src/components/molecules/authBox/AuthBox.tsx
index afb5be4..5cee5ba 100644
--- a/src/components/molecules/authBox/AuthBox.tsx
+++ b/src/components/molecules/authBox/AuthBox.tsx
@@ -1,18 +1,26 @@
 "use client";
 import { Button } from "@/components/atoms/button";
 import { Input } from "@/components/atoms/input";
+import { usePostCertification } from "@/hook/user/usePostCertification";
 import { useState } from "react";
-import { useForm } from "react-hook-form";
 import "./AuthBox.css";
 import { AUTH_BTN, AUTH_PLACEHOLDER } from "./const";
 
-export const AuthBox = () => {
-    const { control, handleSubmit, getValues } = useForm();
+export const AuthBox = ({register}: any) => {
     const [display, setDisplay] = useState(false);
+    const {mutate, isSuccess} = usePostCertification();
+    const [authNum, setAuthNum] = useState({
+        toNumber: "",
+        certificationNum: 0
+    });
+
     const handleAuthnum = () => {
         setDisplay(true);
-        handleSubmit(onSubmit);
-        console.log(getValues());
+        // mutate({
+        //     toNumber: 
+        // })
+        // handleSubmit(onSubmit);
+        // console.log(getValues());
     }
 
     const onSubmit = () => {
@@ -25,9 +33,14 @@ export const AuthBox = () => {
             <div className="signup__inputBox">
                 <Input 
                     size="md"
-                    name="mobile"
+                    name="userPhone"
                     placeholder={AUTH_PLACEHOLDER.mobile}
-                    control={control}
+                    // value={authNum.toNumber}
+                    // onChange={(e: React.ChangeEvent<HTMLInputElement>) => setAuthNum((prev) => ({
+                    //     ...prev,
+                    //     toNumber: e.target.value
+                    // }))}
+                    register={register}
                 />
                 <Button 
                     size="sm"
@@ -40,7 +53,7 @@ export const AuthBox = () => {
                     size="md"
                     name="authNum"
                     placeholder={AUTH_PLACEHOLDER.authNum}
-                    control={control}
+                    register={register}
                 />
                 <Button size="sm">{AUTH_BTN.checkNum}</Button>
             </div>) :
diff --git a/src/components/molecules/inputBox/InputBox.tsx b/src/components/molecules/inputBox/InputBox.tsx
index 7c6de49..afdca56 100644
--- a/src/components/molecules/inputBox/InputBox.tsx
+++ b/src/components/molecules/inputBox/InputBox.tsx
@@ -7,9 +7,9 @@ import { Toggle } from "@/components/atoms/toggle";
 import { AuthBox } from "../authBox";
 import { ChipBox } from "../chipBox/ChipBox";
 
-import { FieldValues, useForm } from "react-hook-form";
-import "./InputBox.css";
 import { CodeInput } from "@/components/atoms/input/CodeInput";
+import { COLORS } from "@/styles";
+import "./InputBox.css";
 
 export interface InputBoxProps {
   title?: string;
@@ -17,7 +17,9 @@ export interface InputBoxProps {
   type?: string;
   subtitle?: string;
   essential?: boolean;
-  name?: string;
+  name: string;
+  register: any;
+  control?: any;
 }
 export function InputBox({
   title,
@@ -26,53 +28,89 @@ export function InputBox({
   subtitle,
   essential,
   name,
+  register,
+  control,
 }: InputBoxProps) {
-  const { control } = useForm<FieldValues>();
+  // const { control } = useForm<FieldValues>();
 
   let inputComponent;
   switch (type) {
     case "input":
-      inputComponent = <Input maxCnt={maxCnt} name="name" control={control} />;
+      inputComponent = 
+        <Input 
+          maxCnt={maxCnt} 
+          name={name}
+          // control={control} 
+          register={register}
+        />;
       break;
     case "numInput":
       inputComponent = (
-        <CodeInput maxCnt={maxCnt} name="name" control={control} />
+        <CodeInput 
+          maxCnt={maxCnt} 
+          name="name" 
+          control={control} 
+        />
       );
       break;
     case "textarea":
-      inputComponent = <Textarea maxCnt={maxCnt} />;
+      inputComponent = (
+        <Textarea 
+          maxCnt={maxCnt} 
+          name={name}
+          register={register}
+        />
+      );
       break;
     case "toggle":
-      inputComponent = <Toggle />;
+      inputComponent = (
+        <Toggle 
+          name={name}
+          register={register}
+        />
+      );
       break;
     case "chip":
-      inputComponent = <ChipBox />;
+      inputComponent = (
+        <ChipBox />
+      );
       break;
     case "fileUpload":
-      inputComponent = <FileUpload />;
+      inputComponent = (
+        <FileUpload 
+          name={name}
+          register={register}
+        />
+      );
       break;
     case "btnInput":
-      inputComponent = <AuthBox />;
+      inputComponent = <AuthBox register={register} />;
       break;
     default:
       // default는 Input
-      inputComponent = <Input maxCnt={maxCnt} name="name" control={control} />;
+      inputComponent = 
+        <Input 
+          maxCnt={maxCnt} 
+          name="name" 
+          // control={control} 
+          register={register}
+        />;
       break;
   }
   return (
     <div className="registerBox">
       <div className="textBox">
-        <Text fontSize="1.1875rem" color="#fff">
+        <Text fontSize="1.1875rem" color={COLORS.white}>
           {title}
         </Text>
         {essential && (
-          <Text fontSize="1.1875rem" color="#FF4444">
+          <Text fontSize="1.1875rem" color={COLORS.red}>
             *
           </Text>
         )}
       </div>
       {subtitle && (
-        <Text fontSize="0.6875rem" color="#d9d9d9" fontWeight="500">
+        <Text fontSize="0.6875rem" color={COLORS.whitegrey} fontWeight="500">
           {subtitle}
         </Text>
       )}

From 1184150f4bb66b901219f420da02909f595acd0c Mon Sep 17 00:00:00 2001
From: happppi <102276917+hhbb0081@users.noreply.github.com>
Date: Mon, 27 May 2024 21:47:35 +0900
Subject: [PATCH 5/8] =?UTF-8?q?Feat:=20=EC=9D=B8=EC=A6=9D=20=EB=AC=B8?=
 =?UTF-8?q?=EC=9E=90=20=EC=A0=84=EC=86=A1=20custom=20hook=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20(usePostCertification)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/molecules/authBox/AuthBox.tsx |  3 +--
 src/hook/user/usePostCertification.ts        | 12 ++++++++++++
 2 files changed, 13 insertions(+), 2 deletions(-)
 create mode 100644 src/hook/user/usePostCertification.ts

diff --git a/src/components/molecules/authBox/AuthBox.tsx b/src/components/molecules/authBox/AuthBox.tsx
index 5cee5ba..c14f624 100644
--- a/src/components/molecules/authBox/AuthBox.tsx
+++ b/src/components/molecules/authBox/AuthBox.tsx
@@ -1,14 +1,13 @@
 "use client";
 import { Button } from "@/components/atoms/button";
 import { Input } from "@/components/atoms/input";
-import { usePostCertification } from "@/hook/user/usePostCertification";
 import { useState } from "react";
 import "./AuthBox.css";
 import { AUTH_BTN, AUTH_PLACEHOLDER } from "./const";
 
 export const AuthBox = ({register}: any) => {
     const [display, setDisplay] = useState(false);
-    const {mutate, isSuccess} = usePostCertification();
+    // const {mutate, isSuccess} = usePostCertification();
     const [authNum, setAuthNum] = useState({
         toNumber: "",
         certificationNum: 0
diff --git a/src/hook/user/usePostCertification.ts b/src/hook/user/usePostCertification.ts
new file mode 100644
index 0000000..2e868b2
--- /dev/null
+++ b/src/hook/user/usePostCertification.ts
@@ -0,0 +1,12 @@
+import { http } from "@/apis/http";
+import { useMutation } from "@tanstack/react-query";
+
+interface PostCertificationProps {
+  toNumber: string;
+}
+
+export const usePostCertification = async () => {
+  return useMutation({
+    mutationFn: (data: PostCertificationProps) => http.post('/certification/send-random-number', data)
+  })
+}
\ No newline at end of file

From caac5477063802dd28355e5db53fe2f686bd2aa4 Mon Sep 17 00:00:00 2001
From: happppi <102276917+hhbb0081@users.noreply.github.com>
Date: Mon, 27 May 2024 21:48:32 +0900
Subject: [PATCH 6/8] =?UTF-8?q?Feat:=20input=20value=20name=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/user/club/constants/const.ts   | 9 ++++++---
 src/features/user/signup/constants/const.ts | 6 +++---
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/features/user/club/constants/const.ts b/src/features/user/club/constants/const.ts
index 8c8b546..857b533 100644
--- a/src/features/user/club/constants/const.ts
+++ b/src/features/user/club/constants/const.ts
@@ -11,21 +11,21 @@ export const REGISTER_INPUT_ARR = [
       maxCnt: 300,
       type: "textarea",
       essential: true,
-      name: "clubContent"
+      name: "clubIntro"
     },
     {
       title: "모집 여부",
       type: "toggle",
       subtitle: "모집 여부는 설정에서 변경할 수 있어요",
       essential: true,
-      name: "recruit"
+      name: "isPrivate"
     },
     {
       title: "회원명 설정",
       type: "chip",
       subtitle: "회원명 설정은 최초 설정 이후에 변경할 수 없어요",
       essential: true,
-      name: "usernameMethod"
+      name: "namePolicy"
     }
 ];
 
@@ -33,12 +33,14 @@ export const REGISTER_INPUT_ARR2 = [
   {
     title: "모임 대표 사진",
     type: "fileUpload",
+    name: "profileImage",
     essential: false
   },
   {
     title: "대표 연락 수단",
     type: "input",
     maxCnt: 30,
+    name: "contactMeans",
     essential: false,
     // subtitle: "전화번호, 이메일, sns 등",
     content: "예시) 010-7330-9731"
@@ -46,6 +48,7 @@ export const REGISTER_INPUT_ARR2 = [
   {
     title: "모임 관련 링크",
     type: "textarea",
+    name: "clubLinks",
     essential: false,
     subtitle: "notion, 디스코드, 오픈 채팅방 등",
     maxCnt: 300
diff --git a/src/features/user/signup/constants/const.ts b/src/features/user/signup/constants/const.ts
index cd90288..d8d64d9 100644
--- a/src/features/user/signup/constants/const.ts
+++ b/src/features/user/signup/constants/const.ts
@@ -5,19 +5,19 @@ export const SIGNUP_INPUT_ARR = [
         title: "회원 이름",
         type: "input",
         essential: true,
-        name: "username"
+        name: "userName"
     },
     {
         title: "회원 이메일",
         type: "input",
         essential: true,
-        name: "email"
+        name: "userEmail"
     },
     {
         title: "회원 전화번호",
         type: "btnInput",
         essential: true,
-        name: "mobile"
+        name: "userPhone"
     }
 ]
 

From 7b6e304ef98c7003e60b74e51e0d061d7d4fbdf8 Mon Sep 17 00:00:00 2001
From: happppi <102276917+hhbb0081@users.noreply.github.com>
Date: Mon, 27 May 2024 21:49:00 +0900
Subject: [PATCH 7/8] =?UTF-8?q?Feat:=20=EC=B6=94=EA=B0=80=20=ED=9A=8C?=
 =?UTF-8?q?=EC=9B=90=EA=B0=80=EC=9E=85=20custom=20hook(useCreateUser)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../user/signup/components/Signup.tsx         | 54 ++++++++++++-------
 src/hook/user/useCreateUser.ts                | 24 +++++++++
 2 files changed, 60 insertions(+), 18 deletions(-)
 create mode 100644 src/hook/user/useCreateUser.ts

diff --git a/src/features/user/signup/components/Signup.tsx b/src/features/user/signup/components/Signup.tsx
index 852ca6d..db1add5 100644
--- a/src/features/user/signup/components/Signup.tsx
+++ b/src/features/user/signup/components/Signup.tsx
@@ -1,32 +1,50 @@
+import { useRouter } from "next/navigation";
+import React from "react";
+import { useForm } from "react-hook-form";
+
 import { Button } from "@/components/atoms/button";
 import { InputBox } from "@/components/molecules/inputBox";
 import { Wrapper } from "@/components/organisms/Wrapper";
-import { useRouter } from "next/navigation";
-import React from "react";
+import { useCreateUser } from "@/hook/user/useCreateUser";
 import { SIGNUP_BTN, SIGNUP_INPUT_ARR } from "../constants";
 import { SignupHeader } from "./SignupHeader";
 // import "./NicknameOnboarding.css";
 
 const Signup = () => {
     const router = useRouter();
+    const { getValues, register, handleSubmit } = useForm();
+    // const { mutate } = usePostCertification
+    const { data: userResponse, mutate } = useCreateUser();
+    // const { control, handleSubmit } = useForm<FieldValues>();
+
+    const onSubmit = (data: any) => {
+        console.log(data);
+        mutate(data);
+        console.log(userResponse);
+        // router.push("/user/signup/complete");
+    }
     return (
         <Wrapper>
-            <div>
-                <SignupHeader />
-                {SIGNUP_INPUT_ARR.map((box, index) => (
-                    <React.Fragment key={index}>
-                        <InputBox 
-                            title={box.title && box.title}
-                            type={box.type && box.type}
-                            essential={box.essential && box.essential}
-                            name={box.name && box.name}
-                        />
-                    </React.Fragment>
-                ))}
-            </div>
-            <div>
-                <Button onClick={() => router.push("/user/signup/complete")}>{SIGNUP_BTN.complete}</Button>
-            </div>
+            <form onSubmit={handleSubmit(onSubmit)}>
+                <div>
+                    <SignupHeader />
+                        {SIGNUP_INPUT_ARR.map((box, index) => (
+                            <React.Fragment key={index}>
+                                <InputBox 
+                                    title={box.title && box.title}
+                                    type={box.type && box.type}
+                                    essential={box.essential && box.essential}
+                                    name={box.name && box.name}
+                                    register={register}
+                                    // control={control}
+                                />
+                            </React.Fragment>
+                        ))}
+                </div>
+                <div>
+                    <Button type="submit">{SIGNUP_BTN.complete}</Button>
+                </div>
+            </form>
         </Wrapper>
     )
 }
diff --git a/src/hook/user/useCreateUser.ts b/src/hook/user/useCreateUser.ts
new file mode 100644
index 0000000..9637c9a
--- /dev/null
+++ b/src/hook/user/useCreateUser.ts
@@ -0,0 +1,24 @@
+import { http } from "@/apis/http";
+import { useMutation } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+
+export interface CreateUserProps {
+  userName: string;
+  userPhone: string;
+  userEmail: string;
+}
+
+export const useCreateUser = () => {
+  const router = useRouter();
+  return useMutation({
+    mutationFn: (data: CreateUserProps) => http.post('/user/signUp', data),
+    onSuccess: (res) => {
+      alert('회원가입 성공!');
+      console.log(res);
+      router.push("/user/signup/complete");
+    },
+    onError: (err) => {
+      console.log(err);
+    }
+  })
+}
\ No newline at end of file

From 3597652d97a808274dbe140001cf82037f9daf3d Mon Sep 17 00:00:00 2001
From: happppi <102276917+hhbb0081@users.noreply.github.com>
Date: Mon, 27 May 2024 21:49:32 +0900
Subject: [PATCH 8/8] =?UTF-8?q?Feat:=20=EC=8A=A4=EC=BC=80=EC=A5=B4=20?=
 =?UTF-8?q?=EC=A1=B0=ED=9A=8C=20custom=20hook=20=EC=88=98=EC=A0=95=20(useF?=
 =?UTF-8?q?etchSchedule)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../club/components/FirstClubRegister.tsx     | 48 ++++++++++++-------
 src/hook/schedule/useFetchSchedule.ts         |  5 +-
 2 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/src/features/user/club/components/FirstClubRegister.tsx b/src/features/user/club/components/FirstClubRegister.tsx
index f4ae3cd..d06db72 100644
--- a/src/features/user/club/components/FirstClubRegister.tsx
+++ b/src/features/user/club/components/FirstClubRegister.tsx
@@ -1,3 +1,6 @@
+"use client";
+import { useForm } from "react-hook-form";
+
 import { Button } from "@/components/atoms/button";
 import { Step } from "@/components/atoms/steps";
 import { InputBox } from "@/components/molecules/inputBox";
@@ -6,25 +9,36 @@ import { REGISTER_BTN, REGISTER_INPUT_ARR } from "../constants";
 import "./FirstClubRegister.css";
 
 const FirstClubRegister = ({nextClickHandler}: any) => {
+    const { register, handleSubmit } = useForm();
+
+    const onSubmit = (data: any) => {
+        console.log(data);
+    };
     return(
         <Wrapper isHeader={true}>
-            <div className="register__content">
-                <Step currentStep={1}/>
-                {REGISTER_INPUT_ARR.map((box, index) => (
-                    <InputBox 
-                        key={index}
-                        title={box.title && box.title}
-                        maxCnt={box.maxCnt && box.maxCnt}
-                        type={box.type && box.type}
-                        subtitle={box.subtitle && box.subtitle}
-                        essential={true}
-                        name={box.name && box.name}
-                    />
-                ))}
-            </div>
-            <div className="register__btn">
-                <Button onClick={() => nextClickHandler('2')}>{REGISTER_BTN.next}</Button>
-            </div>
+            <form onSubmit={handleSubmit(onSubmit)}>
+                <div className="register__content">
+                    <Step currentStep={1}/>
+                    {REGISTER_INPUT_ARR.map((box, index) => (
+                        <InputBox 
+                            key={index}
+                            title={box.title && box.title}
+                            maxCnt={box.maxCnt && box.maxCnt}
+                            type={box.type && box.type}
+                            subtitle={box.subtitle && box.subtitle}
+                            essential={true}
+                            name={box.name && box.name}
+                            register={register}
+                        />
+                    ))}
+                </div>
+                <div className="register__btn">
+                    <Button 
+                        onClick={() => nextClickHandler('2')}
+                        type="submit"
+                    >{REGISTER_BTN.next}</Button>
+                </div>
+            </form>
         </Wrapper>
     );
 };
diff --git a/src/hook/schedule/useFetchSchedule.ts b/src/hook/schedule/useFetchSchedule.ts
index fbcfa6c..f223a7c 100644
--- a/src/hook/schedule/useFetchSchedule.ts
+++ b/src/hook/schedule/useFetchSchedule.ts
@@ -18,7 +18,10 @@ interface FetchScheduleRes {
 export const useFetchSchedule = async ({clubId, q, sDate, eDate}: FetchScheduleProps) => {
     return useQuery<FetchScheduleRes[]>({
         queryKey: ['schedule', clubId],
-        queryFn: () => http.get<FetchScheduleRes[]>(`/clubs/${clubId}/schedules?q=${q}&sDate=${sDate}&eDate=${eDate}`),
+        queryFn: () => http.get<FetchScheduleRes[]>(
+            `/clubs/${clubId}/schedules?q=${q}&sDate=${sDate}&eDate=${eDate}`
+            // `/clubs/${clubId}/schedules`
+        ),
         staleTime: 1000,
     })
 }
\ No newline at end of file