[Setting/#143] 공통 UI 컴포넌트 생성

src/components/common/Button.tsx

@@ -0,0 +1,48 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import React, { forwardRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "cursor-pointer relative inline-flex items-center justify-center overflow-hidden rounded-full uppercase tracking-widest transition-all",
+  {
+    variants: {
+      variant: {
+        glass:
+          "border border-white-1/20 bg-white-1/5 backdrop-blur-sm hover:bg-gold-1 hover:border-gold-1 text-white-1 hover:text-black-1",
+        solid:
+          "bg-black-1 text-gold-1 hover:scale-105 after:absolute after:inset-0 after:-z-10 after:bg-white-1 after:opacity-0 after:transition-opacity hover:after:opacity-10",
+      },
+      size: {
+        sm: "px-8 py-3 text-sm font-medium",
+        lg: "px-12 py-6 text-lg font-bold",
+      },
+    },
+    defaultVariants: {
+      variant: "glass",
+      size: "sm",
+    },
+  },
+);
+
+interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+  children: React.ReactNode;
+}
+
+export const BaseButton = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ variant, size, className, children, type = "button", ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        type={type}
+        className={cn(buttonVariants({ variant, size, className }))}
+        {...props}
+      >
+        <span className="relative z-10">{children}</span>
+      </button>
+    );
+  },
+);
+
+BaseButton.displayName = "BaseButton";

src/components/common/Card.tsx

@@ -0,0 +1,81 @@
+import React, { forwardRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface RestaurantCardProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  image: string;
+  name: string;
+  rating: string | number;
+  category: string;
+  location: string;
+}
+
+export const RestaurantCard = forwardRef<HTMLButtonElement, RestaurantCardProps>(
+  ({ image, name, rating, category, location, className, ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        type="button"
+        className={cn(
+          "group cursor-pointer w-full text-left focus:outline-none focus:ring-2 focus:ring-gold-1 focus:ring-offset-2",
+          className,
+        )}
+        {...props}
+      >
+        <div className="relative overflow-hidden aspect-[4/3] mb-6">
+          <img
+            src={image}
+            alt={name}
+            className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
+          />
+          <div className="absolute inset-0 bg-black-1/20 group-hover:bg-transparent transition-colors duration-500" />
+          <div className="absolute top-4 right-4 bg-black-1/80 backdrop-blur-sm px-3 py-1 flex items-center gap-1">
+            <svg
+              className="w-3 h-3 text-gold-1"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              aria-hidden="true"
+              focusable="false"
+            >
+              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+            </svg>
+            <span className="text-white-1 text-xs font-light tracking-wider">{rating}</span>
+          </div>
+        </div>
+
+        <div>
+          <p className="text-gold-1 text-[11px] tracking-[0.2em] uppercase mb-2">{category}</p>
+          <h3 className="text-2xl text-white font-serif mb-2 group-hover:text-gold-1 transition-colors">
+            {name}
+          </h3>
+          <p className="text-text-tertiary text-sm font-light mb-6">{location}</p>
+
+          <div className="w-full h-px bg-white-1/10 group-hover:bg-gold-1/50 transition-colors relative">
+            <div className="absolute left-0 top-0 h-full w-0 bg-gold-1 group-hover:w-full transition-all duration-500" />
+          </div>
+
+          <div className="mt-4 flex justify-between items-center">
+            <span className="text-xs text-text-muted uppercase tracking-widest">View Details</span>
+            <svg
+              className="w-4 h-4 text-text-muted group-hover:text-gold-1 transition-colors transform group-hover:translate-x-1"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              aria-hidden="true"
+              focusable="false"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={1.5}
+                d="M17 8l4 4m0 0l-4 4m4-4H3"
+              />
+            </svg>
+          </div>
+        </div>
+      </button>
+    );
+  },
+);
+
+RestaurantCard.displayName = "RestaurantCard";

src/components/common/Input.tsx

@@ -0,0 +1,42 @@
+import React, { forwardRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface BaseInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  wrapperClassName?: string;
+  labelClassName?: string;
+}
+
+export const BaseInput = forwardRef<HTMLInputElement, BaseInputProps>(
+  ({ label, className, wrapperClassName, labelClassName, ...props }, ref) => {
+    const inputId = props.id;
+    return (
+      <div className={cn("flex flex-col gap-1.5 w-full", wrapperClassName)}>
+        {label && (
+          <label
+            htmlFor={inputId}
+            className={cn(
+              "text-[11px] uppercase tracking-[0.2em] text-text-tertiary ml-1",
+              labelClassName,
+            )}
+          >
+            {label}
+          </label>
+        )}
+        <input
+          ref={ref}
+          type={props.type || "text"}
+          id={inputId}
+          className={cn(
+            "w-full bg-black-2 border border-black-3 focus:border-gold-1 outline-none px-4 py-3.5 text-white-1 transition-colors placeholder:text-text-placeholder font-light",
+            className,
+          )}
+          {...props}
+        />
+      </div>
+    );
+  },
+);
+
+BaseInput.displayName = "BaseInput";

src/components/common/SearchInput.tsx

@@ -0,0 +1,47 @@
+import React, { forwardRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface SearchInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  wrapperClassName?: string;
+  iconClassName?: string;
+}
+
+export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
+  ({ className, wrapperClassName, iconClassName, ...props }, ref) => {
+    return (
+      <div className={cn("group relative w-full", wrapperClassName)}>
+        <input
+          ref={ref}
+          type="search"
+          aria-label="검색"
+          className={cn(
+            "w-full bg-white-1/5 border-b-2 border-white-1/20 text-white-1 px-4 py-4 pl-12 focus:outline-none focus:border-gold-1 focus:bg-white-1/10 transition-all duration-300 font-light placeholder:text-white-1/40",
+            "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none",
+            className,
+          )}
+          {...props}
+        />
+        <svg
+          className={cn(
+            "absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-white-1/50 transition-colors duration-300 group-focus-within:text-gold-1",
+            iconClassName,
+          )}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          aria-hidden="true"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1.5}
+            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+          />
+        </svg>
+      </div>
+    );
+  },
+);
+
+SearchInput.displayName = "SearchInput";

src/main.tsx

@@ -1,4 +1,5 @@
 import "./index.css";
+import "./styles/theme.css";
 
 import { QueryClientProvider } from "@tanstack/react-query";
 import { StrictMode } from "react";

src/styles/theme.css

@@ -1,5 +1,7 @@
 /*컬러 정리*/
 
+@import "tailwindcss";
+
 :root {
   --black-1: #121212;
   --black-2: #1a1a1a;