사이드바 반응형 구현

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/button/사용법.md

@@ -0,0 +1,138 @@
+1️⃣ Button은 이렇게 생긴 걸 만들 수 있어요 👇
+
+✔️ 확인 버튼
+
+❌ 취소 버튼
+
+➕ 아이콘이 있는 버튼
+
+🔒 비활성화된 버튼
+
+2️⃣ 기본 사용법 (가장 쉬운 예)
+
+```
+<Button>버튼</Button>
+```
+화면에 기본 버튼이 하나 생겨요
+(파란색, 중간 크기)
+
+3️⃣ 버튼의 중요한 속성들
+
+🔹 1. variant (버튼 색깔 / 모양)
+
+버튼의 종류를 정하는 거예요.
+
+primary:	제일 중요한 버튼 (파란색)
+
+secondary:	보조 버튼 (흰색 + 테두리)
+
+text:	배경 없는 글자 버튼
+
+ghost:	거의 안 보이는 버튼
+
+```
+<Button variant="primary">확인</Button>
+<Button variant="secondary">취소</Button>
+<Button variant="text">자세히 보기</Button>
+<Button variant="ghost">옵션</Button>
+```
+
+🔹 2. size (버튼 크기)
+
+버튼의 키와 두께를 정해요.
+
+lg:	큼
+
+md:	보통 (기본값)
+
+sm:	작음
+
+```
+<Button size="lg">큰 버튼</Button>
+<Button size="md">보통 버튼</Button>
+<Button size="sm">작은 버튼</Button>
+
+```
+
+🔹 3. disabled (비활성화)
+
+```
+<Button disabled>비활성 버튼</Button>
+
+```
+
+4️⃣ 아이콘이 있는 버튼
+
+왼쪽 아이콘
+
+```
+<Button leftIcon={<PlusIcon />}>추가</Button>
+```
+
+오른쪽 아이콘
+
+```
+<Button rightIcon={<ArrowRightIcon />}>다음</Button>
+```
+
+양쪽 다 아이콘
+
+```
+<Button
+  leftIcon={<PlusIcon />}
+  rightIcon={<ArrowRightIcon />}
+>
+  이동
+</Button>
+```
+
+5️⃣ ButtonLabel 컴포넌트 (글자 전용 버튼)
+
+버튼 안에 글자 스타일을 자동으로 예쁘게 만들어줘요
+
+기본 사용
+```
+<ButtonLabel label="저장" />
+```
+
+
+아이콘 + 글자 같이 쓸때 
+
+```
+<ButtonLabel
+  label="삭제"
+  variant="secondary"
+  leftIcon={<TrashIcon />}
+/>
+```
+
+
+6️⃣ Button vs ButtonLabel 차이
+
+Button:	자유롭게 안에 내용 넣기
+
+ButtonLabel: 글자(label)를 쉽게 쓰기
+
+7️⃣ 자주 쓰는 예제 모음 ⭐
+✔️ 확인 / 취소 버튼
+
+```
+<Button variant="primary">확인</Button>
+<Button variant="secondary">취소</Button>
+```
+
+ 플러스 모양 아이콘+추가하기
+
+ ```
+ <Button leftIcon={<PlusIcon />}>
+  추가하기
+</Button>
+ ```
+
+ 클릭 못 하는 버튼
+
+ ```
+<Button disabled>
+  준비 중
+</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>