From f9d74bcbefcaf50fca9daf9f56ba72a45ca87c3e Mon Sep 17 00:00:00 2001 From: dew102938 Date: Sat, 16 May 2026 00:17:49 +0900 Subject: [PATCH 1/4] =?UTF-8?q?setting:=20=EA=B3=B5=ED=86=B5=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC,=20=EA=B2=80=EC=83=89=EC=B0=BD,=20=EC=9D=B8=ED=92=8B,?= =?UTF-8?q?=20=EC=B9=B4=ED=8A=B8=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Button.tsx | 47 ++++++++++++++++++ src/components/common/Card.tsx | 69 +++++++++++++++++++++++++++ src/components/common/Input.tsx | 43 +++++++++++++++++ src/components/common/SearchInput.tsx | 49 +++++++++++++++++++ src/main.tsx | 1 + src/styles/theme.css | 2 + 6 files changed, 211 insertions(+) create mode 100644 src/components/common/Button.tsx create mode 100644 src/components/common/Card.tsx create mode 100644 src/components/common/Input.tsx create mode 100644 src/components/common/SearchInput.tsx diff --git a/src/components/common/Button.tsx b/src/components/common/Button.tsx new file mode 100644 index 0000000..59c3cf9 --- /dev/null +++ b/src/components/common/Button.tsx @@ -0,0 +1,47 @@ +import React, { forwardRef } from "react"; +import { cva, type VariantProps } from "class-variance-authority"; +import { clsx, type ClassValue } from "clsx"; +import { twMerge } from "tailwind-merge"; + +function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +} + +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, VariantProps { + children: React.ReactNode; +} + +export const BaseButton = forwardRef( + ({ variant, size, className, children, ...props }, ref) => { + return ( + + ); + }, +); + +BaseButton.displayName = "BaseButton"; diff --git a/src/components/common/Card.tsx b/src/components/common/Card.tsx new file mode 100644 index 0000000..52e9897 --- /dev/null +++ b/src/components/common/Card.tsx @@ -0,0 +1,69 @@ +import React, { forwardRef } from "react"; +import { clsx, type ClassValue } from "clsx"; +import { twMerge } from "tailwind-merge"; + +function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +} + +export interface RestaurantCardProps extends React.HTMLAttributes { + image: string; + name: string; + rating: string | number; + category: string; + location: string; +} + +export const RestaurantCard = forwardRef( + ({ image, name, rating, category, location, className, ...props }, ref) => { + return ( +
+
+ {name} +
+
+ + + + {rating} +
+
+ +
+

{category}

+

+ {name} +

+

{location}

+ +
+
+
+ +
+ View Details + + + +
+
+
+ ); + }, +); + +RestaurantCard.displayName = "RestaurantCard"; diff --git a/src/components/common/Input.tsx b/src/components/common/Input.tsx new file mode 100644 index 0000000..8d8df64 --- /dev/null +++ b/src/components/common/Input.tsx @@ -0,0 +1,43 @@ +import React, { forwardRef } from "react"; +import { clsx, type ClassValue } from "clsx"; +import { twMerge } from "tailwind-merge"; + +function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +} + +export interface BaseInputProps extends React.InputHTMLAttributes { + label?: string; + wrapperClassName?: string; + labelClassName?: string; +} + +export const BaseInput = forwardRef( + ({ label, className, wrapperClassName, labelClassName, ...props }, ref) => { + return ( +
+ {label && ( + + )} + +
+ ); + }, +); + +BaseInput.displayName = "BaseInput"; diff --git a/src/components/common/SearchInput.tsx b/src/components/common/SearchInput.tsx new file mode 100644 index 0000000..b9c72bc --- /dev/null +++ b/src/components/common/SearchInput.tsx @@ -0,0 +1,49 @@ +import React, { forwardRef } from "react"; +import { clsx, type ClassValue } from "clsx"; +import { twMerge } from "tailwind-merge"; + +function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +} + +export interface SearchInputProps extends React.InputHTMLAttributes { + wrapperClassName?: string; + iconClassName?: string; +} + +export const SearchInput = forwardRef( + ({ className, wrapperClassName, iconClassName, ...props }, ref) => { + return ( +
+ + +
+ ); + }, +); + +SearchInput.displayName = "SearchInput"; diff --git a/src/main.tsx b/src/main.tsx index b03cc65..04ba557 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -7,6 +7,7 @@ import { createRoot } from "react-dom/client"; import { queryClient } from "@/query/queryClient.ts"; import App from "./App.tsx"; +import "./styles/theme.css"; createRoot(document.getElementById("root")!).render( diff --git a/src/styles/theme.css b/src/styles/theme.css index 15a1ec6..c85d00a 100644 --- a/src/styles/theme.css +++ b/src/styles/theme.css @@ -1,5 +1,7 @@ /*컬러 정리*/ +@import "tailwindcss"; + :root { --black-1: #121212; --black-2: #1a1a1a; From c35f0a3db715ac339cebe73b713d20c6314c201c Mon Sep 17 00:00:00 2001 From: dew102938 Date: Sat, 16 May 2026 01:06:00 +0900 Subject: [PATCH 2/4] =?UTF-8?q?fix:=20=EC=BD=94=EB=93=9C=EB=9E=98=EB=B9=97?= =?UTF-8?q?=20=EC=88=98=EC=A0=95=EC=82=AC=ED=95=AD=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Button.tsx | 16 +++++++------- src/components/common/Card.tsx | 32 ++++++++++++++++++--------- src/components/common/Input.tsx | 10 ++++----- src/components/common/SearchInput.tsx | 11 ++++----- 4 files changed, 37 insertions(+), 32 deletions(-) diff --git a/src/components/common/Button.tsx b/src/components/common/Button.tsx index 59c3cf9..8995ff6 100644 --- a/src/components/common/Button.tsx +++ b/src/components/common/Button.tsx @@ -1,11 +1,6 @@ import React, { forwardRef } from "react"; import { cva, type VariantProps } from "class-variance-authority"; -import { clsx, type ClassValue } from "clsx"; -import { twMerge } from "tailwind-merge"; - -function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)); -} +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", @@ -35,9 +30,14 @@ interface ButtonProps } export const BaseButton = forwardRef( - ({ variant, size, className, children, ...props }, ref) => { + ({ variant, size, className, children, type = "button", ...props }, ref) => { return ( - ); diff --git a/src/components/common/Card.tsx b/src/components/common/Card.tsx index 52e9897..c989329 100644 --- a/src/components/common/Card.tsx +++ b/src/components/common/Card.tsx @@ -1,12 +1,7 @@ import React, { forwardRef } from "react"; -import { clsx, type ClassValue } from "clsx"; -import { twMerge } from "tailwind-merge"; +import { cn } from "@/lib/utils"; -function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)); -} - -export interface RestaurantCardProps extends React.HTMLAttributes { +export interface RestaurantCardProps extends React.ButtonHTMLAttributes { image: string; name: string; rating: string | number; @@ -14,10 +9,17 @@ export interface RestaurantCardProps extends React.HTMLAttributes( +export const RestaurantCard = forwardRef( ({ image, name, rating, category, location, className, ...props }, ref) => { return ( -
+ ); }, ); diff --git a/src/components/common/Input.tsx b/src/components/common/Input.tsx index 8d8df64..daae167 100644 --- a/src/components/common/Input.tsx +++ b/src/components/common/Input.tsx @@ -1,10 +1,5 @@ import React, { forwardRef } from "react"; -import { clsx, type ClassValue } from "clsx"; -import { twMerge } from "tailwind-merge"; - -function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)); -} +import { cn } from "@/lib/utils"; export interface BaseInputProps extends React.InputHTMLAttributes { label?: string; @@ -14,10 +9,12 @@ export interface BaseInputProps extends React.InputHTMLAttributes( ({ label, className, wrapperClassName, labelClassName, ...props }, ref) => { + const inputId = props.id; return (
{label && (