Feat: 추가 회원가입 custom hook(useCreateUser)

.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
+NEXT_PUBLIC_LOCAL_URL=http://localhost:8080/api

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 {

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>;
 }

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
               />
             </>

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 && (

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>

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}

src/components/molecules/authBox/AuthBox.tsx

@@ -2,17 +2,24 @@
 import { Button } from "@/components/atoms/button";
 import { Input } from "@/components/atoms/input";
 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 +32,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 +52,7 @@ export const AuthBox = () => {
                     size="md"
                     name="authNum"
                     placeholder={AUTH_PLACEHOLDER.authNum}
-                    control={control}
+                    register={register}
                 />
                 <Button size="sm">{AUTH_BTN.checkNum}</Button>
             </div>) :

src/components/molecules/inputBox/InputBox.tsx

@@ -7,17 +7,19 @@ 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;
   maxCnt?: number;
   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>
       )}

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}/>