refactor: ref가 prop으로 자동전달 componentPropsWithRef 사용

app/myinfo/page.tsx

@@ -3,8 +3,17 @@ import MyInfoClient from "@/feature/MyInfo/MyInfoClient";
 
 export default function MyInfoPage() {
   return (
-    <Suspense fallback={<div>로딩중...</div>}>
-      <MyInfoClient />
-    </Suspense>
+    <div className="flex min-h-screen">
+      <div className="flex ml-30 xl:ml-117.5 pt-10">
+        <Sidebar active={activeMenu} onChange={setActiveMenu} />
+
+        <main className="flex-1">
+          {activeMenu === "MY_INFO" && <MyInfoView />}
+          {activeMenu === "RESERVATIONS" && <ReservationView />}
+          {activeMenu === "MY_EXPERIENCE" && <MyExperinenceView />}
+          {activeMenu === "RESERVATION_STATUS" && <ReservaionStatusView />}
+        </main>
+      </div>
+    </div>
   );
 }

components/button/Button.tsx

@@ -1,62 +1,77 @@
 "use client";
 
-import { ButtonHTMLAttributes, ReactNode } from "react";
+import { ReactNode, ComponentPropsWithRef } from "react";
+import { cn } from "@/lib/utils/twmerge";
 import {
   ButtonVariants,
   buttonIconVariants,
   buttonLabelVariants,
 } from "./ButtonVariants";
-import { cn } from "@/lib/utils/twmerge";
 
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: "primary" | "secondary" | "text" | "ghost";
-  size?: "lg" | "md" | "sm";
-}
+const DEFAULT_BUTTON_PROPS = {
+  variant: "primary",
+  size: "md",
+} as const;
 
-interface ButtonSubProps {
+type BaseButtonProps = {
   variant?: "primary" | "secondary" | "text" | "ghost";
   size?: "lg" | "md" | "sm";
-  className?: string;
-  children: ReactNode;
-}
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
+};
 
-export const ButtonIcon = ({
-  variant = "primary",
-  className,
-  children,
-}: ButtonSubProps) => (
-  <span className={cn(buttonIconVariants({ variant }), className)}>
-    {children}
-  </span>
-);
+export type ButtonProps = ComponentPropsWithRef<"button"> & BaseButtonProps;
 
-export const ButtonLabel = ({
-  variant = "primary",
-  size = "md",
-  className,
-  children,
-}: ButtonSubProps) => (
-  <span className={cn(buttonLabelVariants({ variant, size }), className)}>
-    {children}
-  </span>
-);
+export type ButtonLabelProps = ButtonProps & {
+  label?: string;
+};
 
-export function Button({
-  variant = "primary",
-  size = "md",
+export const Button = ({
+  variant = DEFAULT_BUTTON_PROPS.variant, 
+  size = DEFAULT_BUTTON_PROPS.size,       
   disabled = false,
   className,
   children,
+  leftIcon,
+  rightIcon,
+  ref,
   ...props
-}: ButtonProps) {
+}: ButtonProps) => {
   return (
     <button
       type="button"
       disabled={disabled}
       className={cn(ButtonVariants({ variant, size }), className)}
+      ref={ref}
       {...props}
     >
+      {leftIcon && (
+        <span className={cn(buttonIconVariants({ variant }))}>{leftIcon}</span>
+      )}
       {children}
+      {rightIcon && (
+        <span className={cn(buttonIconVariants({ variant }))}>{rightIcon}</span>
+      )}
     </button>
   );
-}
+};
+
+export const ButtonLabel = ({
+  label,
+  children,
+  variant = DEFAULT_BUTTON_PROPS.variant, 
+  size = DEFAULT_BUTTON_PROPS.size,       
+  ref,
+  ...buttonProps
+}: ButtonLabelProps) => {
+  return (
+    <Button variant={variant} size={size} ref={ref} {...buttonProps}>
+      {label && (
+        <span className={cn(buttonLabelVariants({ variant, size }))}>
+          {label}
+        </span>
+      )}
+      {children}
+    </Button>
+  );
+};

components/input/Input.tsx

@@ -1,8 +1,19 @@
 import { ComponentProps } from "react";
 import clsx from "clsx";
 
-export function Input({ className, ...props }: ComponentProps<"input">) {
+type InputProps = ComponentProps<"input"> & {
+  inputRef?: React.Ref<HTMLInputElement>;
+};
+
+export function Input({ className, inputRef, ...props }: InputProps) {
   return (
-    <input {...props} className={clsx("border rounded px-3 py-2", className)} />
+    <input
+      ref={inputRef}
+      {...props}
+      className={clsx(
+        "h-[54px] w-full rounded-[16px] border px-[20px] text-sm outline-none",
+        className
+      )}
+    />
   );
 }

components/input/inputfield.tsx

@@ -1,29 +1,44 @@
-import { ReactNode } from "react";
-import { Input } from "./Input";
+import { useId, ReactNode } from "react";
 import clsx from "clsx";
+import { Input } from "./Input";
 
-interface InputFieldProps {
+interface InputFieldProps extends React.ComponentProps<typeof Input> {
   label?: string;
   error?: string;
   helperText?: string;
-  inputProps?: React.ComponentProps<typeof Input>;
   children?: ReactNode;
-  className?: string;
 }
 
 export function InputField({
   label,
   error,
   helperText,
-  inputProps,
   children,
   className,
+  ...props
 }: InputFieldProps) {
+  const id = useId();
+
   return (
-    <div className={clsx("flex flex-col gap-1", className)}>
-      {label && <label className="text-sm font-medium">{label}</label>}
+    <div className="flex w-full flex-col gap-[10px]">
+      {label && (
+        <label htmlFor={id} className="text-[16px] font-medium text-gray-900">
+          {label}
+        </label>
+      )}
 
-      {children ?? <Input {...inputProps} />}
+      {children ?? (
+        <Input
+          id={id}
+          {...props}
+          className={clsx(
+            error
+              ? "border-red-500 focus:ring-red-500"
+              : "border-gray-200 focus:ring-primary-500",
+            className
+          )}
+        />
+      )}
 
       {error ? (
         <p className="text-xs text-red-500">{error}</p>

components/input/passwordinput.tsx

@@ -4,30 +4,31 @@ import { useState } from "react";
 import Image from "next/image";
 import { Input } from "./Input";
 import type { ComponentProps } from "react";
+import clsx from "clsx";
 
-interface PasswordInputProps extends Omit<ComponentProps<"input">, "type"> {
-  className?: string;
-}
+type PasswordInputProps = ComponentProps<typeof Input>;
 
 export function PasswordInput({ className, ...props }: PasswordInputProps) {
   const [visible, setVisible] = useState(false);
 
   return (
-    <div className="relative">
+    <div className="relative w-full">
       <Input
         {...props}
         type={visible ? "text" : "password"}
-        className={`pr-10 ${className ?? ""}`}
+        className={clsx("pr-12", className)}
       />
 
       <button
         type="button"
+        aria-label={visible ? "비밀번호 숨기기" : "비밀번호 표시"}
+        aria-pressed={visible}
         onClick={() => setVisible((v) => !v)}
-        className="absolute right-3 top-1/2 -translate-y-1/2"
+        className="absolute right-4 top-1/2 -translate-y-1/2 focus:outline-none focus:ring-2 focus:ring-primary-500"
       >
         <Image
           src={visible ? "/icon_active_on.svg" : "/icon_active_off.svg"}
-          alt={visible ? "비밀번호 숨기기" : "비밀번호 보기"}
+          alt=""
           width={20}
           height={20}
         />

components/input/searchinput.tsx

@@ -1,17 +1,16 @@
 import Image from "next/image";
 import { Input } from "./Input";
 import type { ComponentProps } from "react";
+import clsx from "clsx";
 
-interface SearchInputProps extends ComponentProps<"input"> {
-  className?: string;
-}
-
-export function SearchInput({ className, ...props }: SearchInputProps) {
+export function SearchInput({
+  className,
+  ...props
+}: ComponentProps<typeof Input>) {
   return (
-    <div className="relative">
-      <Input {...props} className={`pl-10 ${className ?? ""}`} />
-
-      <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2">
+    <div className="relative w-full">
+      <Input {...props} className={clsx("pl-[44px]", className)} />
+      <span className="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2">
         <Image src="/icon_search.svg" alt="검색" width={20} height={20} />
       </span>
     </div>