fix: 경고 에러 수정 및 새로고침시 데이터 날라가는 문제 해결

Author: CreatiCoding

frontend/packages/ui/src/components/Input/Input.tsx

@@ -1,4 +1,5 @@
 import { cn } from '@ui/lib/utils';
+import React from 'react';
 
 const labelStyle = "font-['Roboto'] font-normal block text-left text-[14px] leading-[22px]";
 
@@ -11,32 +12,27 @@ interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
   inputClassName?: string;
 }
 
-export function Input({
-  id,
-  type,
-  disabled,
-  required,
-  defaultValue,
-  label,
-  placeholder,
-  inputClassName = '',
-  ...props
-}: Props) {
-  return (
-    <p className="mb-[15px]">
-      {label && <label className={labelStyle}>{label}</label>}
-      <input
-        id={id}
-        className={cn(inputStyle, inputClassName)}
-        type={type}
-        disabled={disabled}
-        required={required}
-        placeholder={placeholder}
-        defaultValue={defaultValue}
-        {...props}
-      />
-    </p>
-  );
-}
+export const Input = React.forwardRef<HTMLInputElement, Props>(
+  ({ id, type, disabled, required, defaultValue, label, placeholder, inputClassName = '', ...props }: Props, ref) => {
+    console.log('defaultValue', defaultValue);
+
+    return (
+      <p className="mb-[15px]">
+        {label && <label className={labelStyle}>{label}</label>}
+        <input
+          ref={ref}
+          id={id}
+          className={cn(inputStyle, inputClassName)}
+          type={type}
+          disabled={disabled}
+          required={required}
+          placeholder={placeholder}
+          defaultValue={defaultValue}
+          {...props}
+        />
+      </p>
+    );
+  },
+);
 
 Input.displayName = 'Input';

frontend/zicdding-class.com/app/(user)/my/_components/MyInfo.tsx

@@ -21,19 +21,22 @@ function useLoginPageGuard(nextPage: string) {
 export function MyInfo({ mode }: { mode: 'view' | 'modify' }) {
   const router = useRouter();
   const { user } = useUser();
-  const { register, getValues } = useForm<{
+  const { register, setValue } = useForm<{
     nickname: string;
     email: string;
     password: string;
     phoneNumber: string;
-  }>({
-    defaultValues: {
-      nickname: user?.nickname,
-      email: user?.email,
-      password: '**********',
-      phoneNumber: user?.phone_num,
-    },
-  });
+  }>();
+
+  useEffect(() => {
+    if (user == null) {
+      return;
+    }
+
+    setValue('nickname', user.nickname);
+    setValue('email', user.email);
+    setValue('phoneNumber', user.phone_num);
+  }, [user, setValue]);
 
   useLoginPageGuard('/login');
 
@@ -50,15 +53,13 @@ export function MyInfo({ mode }: { mode: 'view' | 'modify' }) {
       <Input
         id="nickname"
         label="닉네임"
-        defaultValue={getValues('nickname')}
         disabled={mode === 'view'}
         required={true}
         inputClassName={mode === 'view' ? 'text-[#959595] bg-[#F4F4F4]' : 'bg-[#F4F4F4] text-[#959595]'}
         {...register('nickname')}
       />
 
       <Input
-        defaultValue={getValues('email')}
         label="Email"
         id="email"
         type="email"
@@ -78,7 +79,6 @@ export function MyInfo({ mode }: { mode: 'view' | 'modify' }) {
       />
 
       <Input
-        defaultValue={getValues('phoneNumber')}
         label="전화번호"
         id="phoneNumber"
         type="tel"

frontend/zicdding-class.com/app/_hooks/useUser.ts

@@ -1,13 +1,13 @@
-"use client";
+'use client';
 
-import { useCallback } from "react";
-import { apiV1 } from "@/app/_remotes";
-import { useQuery } from "@tanstack/react-query";
+import { useCallback } from 'react';
+import { apiV1 } from '@/app/_remotes';
+import { useQuery } from '@tanstack/react-query';
 
 export function useUser() {
   const { data, refetch, isError, isFetching } = useQuery({
     initialData: undefined,
-    queryKey: ["useUser"],
+    queryKey: ['useUser'],
     queryFn: () => apiV1.users.getMe(),
     retry: false,
   });