From 7130329c98d920e8c4b51d559ec652306918ead3 Mon Sep 17 00:00:00 2001 From: mgyang53 Date: Thu, 13 Mar 2025 11:24:55 +0900 Subject: [PATCH 1/6] =?UTF-8?q?file:=20=EC=95=88=EC=93=B0=EB=8A=94=20?= =?UTF-8?q?=EA=B8=B0=EB=B3=B8=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/file.svg | 1 - public/globe.svg | 1 - public/next.svg | 1 - public/vercel.svg | 1 - public/window.svg | 1 - 5 files changed, 5 deletions(-) delete mode 100644 public/file.svg delete mode 100644 public/globe.svg delete mode 100644 public/next.svg delete mode 100644 public/vercel.svg delete mode 100644 public/window.svg diff --git a/public/file.svg b/public/file.svg deleted file mode 100644 index 004145c..0000000 --- a/public/file.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/globe.svg b/public/globe.svg deleted file mode 100644 index 567f17b..0000000 --- a/public/globe.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/next.svg b/public/next.svg deleted file mode 100644 index 5174b28..0000000 --- a/public/next.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/vercel.svg b/public/vercel.svg deleted file mode 100644 index 7705396..0000000 --- a/public/vercel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/window.svg b/public/window.svg deleted file mode 100644 index b2b2a44..0000000 --- a/public/window.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file From 8550791405482cac34ca33759d436ee32726ac8e Mon Sep 17 00:00:00 2001 From: mgyang53 Date: Thu, 13 Mar 2025 12:26:20 +0900 Subject: [PATCH 2/6] =?UTF-8?q?fix:=20typo=20=ED=81=B4=EB=9E=98=EC=8A=A4?= =?UTF-8?q?=EB=AA=85=20=EB=B3=80=EA=B2=BD=EC=97=90=20=EB=94=B0=EB=A5=B8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/page.tsx | 2 +- src/components/design-system/TypoSystem.tsx | 22 ++++++++++----------- src/styles/globals.css | 1 + 3 files changed, 13 insertions(+), 12 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 03c57ab..54f6098 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -7,7 +7,7 @@ export default function Home() { // 임시 메인 페이지 // 추후 메인페이지 작업 시 수정해도 됨
-

UIverse 디자인 시스템

+

UIverse 디자인 시스템

diff --git a/src/components/design-system/TypoSystem.tsx b/src/components/design-system/TypoSystem.tsx index 9819910..cdf1ea1 100644 --- a/src/components/design-system/TypoSystem.tsx +++ b/src/components/design-system/TypoSystem.tsx @@ -3,39 +3,39 @@ export default function TypoSystem() {
{/* Titles */}
-

Title1 - 타이포그래피 시스템

-

H1 - 헤딩 텍스트

-

H2 - 헤딩 텍스트

-

H3 - 헤딩 텍스트

+

Title1 - 타이포그래피 시스템

+

H1 - 헤딩 텍스트

+

H2 - 헤딩 텍스트

+

H3 - 헤딩 텍스트

{/* Body Text */}
-

+

Body1 - 본문 텍스트입니다. 가장 큰 본문 텍스트로 중요한 내용을 표시할 때 사용합니다.

-

+

Body2 - 본문 텍스트입니다. 일반적인 본문 내용을 표시할 때 사용하는 크기입니다.

-

+

Body3 - 본문 텍스트입니다. 부가적인 설명이나 덜 중요한 내용을 표시할 때 사용합니다.

{/* Buttons */}
- -
{/* Captions */}
-

Caption1 - 작은 설명 텍스트입니다.

-

Caption2 - 가장 작은 설명 텍스트입니다.

+

Caption1 - 작은 설명 텍스트입니다.

+

Caption2 - 가장 작은 설명 텍스트입니다.

) diff --git a/src/styles/globals.css b/src/styles/globals.css index f3620f1..97a54ca 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -3,6 +3,7 @@ @config "../../tailwind.config.ts"; @theme { + /* 사용할 변수 외 최소화 */ --font-*: initial; --text-*: initial; --color-*: initial; From 2637ecca03f564c2eb60b4d942c1b5c01a3e6e63 Mon Sep 17 00:00:00 2001 From: mgyang53 Date: Thu, 13 Mar 2025 21:14:25 +0900 Subject: [PATCH 3/6] =?UTF-8?q?fix:=20=EA=B3=B5=ED=86=B5=20=EC=BB=AC?= =?UTF-8?q?=EB=9F=AC=20=EC=A0=95=EC=9D=98=20=EC=B6=94=EA=B0=80=20=EB=B0=8F?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/globals.css | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/src/styles/globals.css b/src/styles/globals.css index af504ad..5ff32e3 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -47,10 +47,11 @@ --color-gradient-end: #9d00ff; /* Status Colors */ - --color-error: #ff4242; - --color-positive: #0387ff; + --color-sale: #ff4242; + --color-error: #dd1515; + --color-positive: #007aff; --color-success: #01a768; - --color-warning: #ffc441; + --color-warning: #ffd60a; /* 텍스트 전용 Colors */ --color-normal: var(--color-gray-800); @@ -62,13 +63,19 @@ /* 배경 전용 Colors */ --color-primary-a36: #ffbda3; --color-primary-a8: #fff0eb; + --color-primary-hover: var(--color-orange-600); + --color-secondary-hover: var(--color-gray-900); + --color-tertiary-hover: var(--color-gray-200); + /* 버튼 스타일 outline hover 색상 */ + --color-outline-hover: var(--color-gray-950); + /* disabled 배경용 */ --color-disabled-fill: var(--color-gray-75); /* Border Colors */ - --color-border: var(--color-gray-300); - --color-border-alter: var(--color-gray-200); - --color-border-assist: var(--color-gray-100); + --color-line: var(--color-gray-300); + --color-alter-line: var(--color-gray-200); + --color-assist-line: var(--color-gray-100); /* Border Radius */ --radius-sm: 0.25rem; From 97540bb9ccd668794ddacd210e7b494d49ab5172 Mon Sep 17 00:00:00 2001 From: mgyang53 Date: Thu, 13 Mar 2025 22:36:45 +0900 Subject: [PATCH 4/6] =?UTF-8?q?design:=20=EA=B8=B0=EB=B3=B8=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EA=B5=AC=EC=84=B1=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/page.tsx | 3 ++ src/components/common/button/Button.tsx | 55 +++++++++++++++++++ src/components/design-system/ButtonTest.tsx | 31 +++++++++++ tailwind.config.ts | 60 --------------------- 4 files changed, 89 insertions(+), 60 deletions(-) create mode 100644 src/components/common/button/Button.tsx create mode 100644 src/components/design-system/ButtonTest.tsx diff --git a/src/app/page.tsx b/src/app/page.tsx index 54f6098..3ab8bb8 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,4 +1,5 @@ import BreakpointTest from '@/components/design-system/BreakpointTest' +import ButtonTest from '@/components/design-system/ButtonTest' import ColorPalette from '@/components/design-system/ColorPalette' import TypoSystem from '@/components/design-system/TypoSystem' @@ -14,6 +15,8 @@ export default function Home() { + +
) } diff --git a/src/components/common/button/Button.tsx b/src/components/common/button/Button.tsx new file mode 100644 index 0000000..eb67721 --- /dev/null +++ b/src/components/common/button/Button.tsx @@ -0,0 +1,55 @@ +import * as React from 'react' +import { Slot } from '@radix-ui/react-slot' +import { cva, type VariantProps } from 'class-variance-authority' + +import { cn } from '@/lib/utils' + +const buttonVariants = cva( + 'w-full inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none outline-none cursor-pointer', + { + variants: { + variant: { + primary: + 'bg-primary text-white hover:bg-primary-hover disabled:bg-disabled-fill disabled:text-assistive', + secondary: + 'bg-secondary text-white hover:bg-secondary-hover disabled:bg-disabled-fill disabled:text-assistive', + tertiary: + 'bg-tertiary text-secondary hover:bg-tertiary-hover disabled:bg-disabled-fill disabled:text-assistive', + outline: + 'bg-white text-secondary border border-secondary hover:bg-outline-hover hover:text-white disabled:border-alter-line disabled:text-disabled', + }, + size: { + sm: 'p-1 typo-caption2 rounded-sm gap-0.5', + md: 'px-3.5 py-3 typo-button1 rounded-md gap-1.5', + lg: 'px-4 py-3.5 typo-h3 rounded-md gap-1.5', + }, + }, + defaultVariants: { + variant: 'secondary', + size: 'lg', + }, + }, +) + +const Button = ({ + className, + variant, + size, + asChild = false, + ...props +}: React.ComponentProps<'button'> & + VariantProps & { + asChild?: boolean + }) => { + const Comp = asChild ? Slot : 'button' + + return ( + + ) +} + +export { Button } diff --git a/src/components/design-system/ButtonTest.tsx b/src/components/design-system/ButtonTest.tsx new file mode 100644 index 0000000..fb2fc33 --- /dev/null +++ b/src/components/design-system/ButtonTest.tsx @@ -0,0 +1,31 @@ +import React from 'react' +import { Button } from '../common/button/Button' + +const ButtonTest = () => { + const variants = ['primary', 'secondary', 'tertiary', 'outline'] + const sizes = ['lg', 'md', 'sm'] + return ( +
+

기본 버튼

+ {variants.map((variant) => ( +
+

{variant}

+
+ {sizes.map((s) => ( + <> + + + + ))} +
+
+ ))} +
+ ) +} + +export default ButtonTest diff --git a/tailwind.config.ts b/tailwind.config.ts index 007f2d3..45f3bde 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -19,66 +19,6 @@ export default { lg: '80rem', }, }, - extend: { - colors: { - // Primitive Colors - Grayscale - gray: { - 50: 'var(--color-gray-50)', - 100: 'var(--color-gray-100)', - 200: 'var(--color-gray-200)', - 300: 'var(--color-gray-300)', - 400: 'var(--color-gray-400)', - 500: 'var(--color-gray-500)', - 600: 'var(--color-gray-600)', - 700: 'var(--color-gray-700)', - 800: 'var(--color-gray-800)', - 900: 'var(--color-gray-900)', - 950: 'var(--color-gray-950)', - }, - // Primitive Colors - Orangescale - orange: { - 50: 'var(--color-orange-50)', - 100: 'var(--color-orange-100)', - 200: 'var(--color-orange-200)', - 300: 'var(--color-orange-300)', - 400: 'var(--color-orange-400)', - 500: 'var(--color-orange-500)', - 600: 'var(--color-orange-600)', - 700: 'var(--color-orange-700)', - 800: 'var(--color-orange-800)', - 900: 'var(--color-orange-900)', - }, - // Semantic Colors - Brand - primary: 'var(--color-primary)', - secondary: 'var(--color-secondary)', - tertiary: 'var(--color-tertiary)', - white: 'var(--color-white)', - - // Semantic Colors - Status - error: 'var(--color-error)', - success: 'var(--color-success)', - warning: 'var(--color-warning)', - positive: 'var(--color-positive)', - - // Semantic Colors - Text - text: { - normal: 'var(--color-normal)', - alternative: 'var(--color-alternative)', - assistive: 'var(--color-assistive)', - disable: 'var(--color-disable)', - }, - - // Border Colors - border: 'var(--color-border)', - 'border-alter': 'var(--color-border-alter)', - 'border-assist': 'var(--color-border-assist)', - }, - borderRadius: { - lg: 'var(--radius-lg)', - md: 'var(--radius-md)', - sm: 'var(--radius-sm)', - }, - }, }, plugins: [tailwindAnimate], } satisfies Config From dd724327d9edbd6ecc8da755d6198ab4a45f0f3b Mon Sep 17 00:00:00 2001 From: mgyang53 Date: Thu, 13 Mar 2025 22:39:43 +0900 Subject: [PATCH 5/6] =?UTF-8?q?file:=20=ED=8F=B4=EB=8D=94=EB=AA=85=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/design-system/ButtonTest.tsx | 2 +- src/components/{common => }/layout/Footer.tsx | 0 src/components/{common => }/layout/Header.tsx | 0 3 files changed, 1 insertion(+), 1 deletion(-) rename src/components/{common => }/layout/Footer.tsx (100%) rename src/components/{common => }/layout/Header.tsx (100%) diff --git a/src/components/design-system/ButtonTest.tsx b/src/components/design-system/ButtonTest.tsx index fb2fc33..690accf 100644 --- a/src/components/design-system/ButtonTest.tsx +++ b/src/components/design-system/ButtonTest.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { Button } from '../common/button/Button' +import { Button } from '../common/Button/Button' const ButtonTest = () => { const variants = ['primary', 'secondary', 'tertiary', 'outline'] diff --git a/src/components/common/layout/Footer.tsx b/src/components/layout/Footer.tsx similarity index 100% rename from src/components/common/layout/Footer.tsx rename to src/components/layout/Footer.tsx diff --git a/src/components/common/layout/Header.tsx b/src/components/layout/Header.tsx similarity index 100% rename from src/components/common/layout/Header.tsx rename to src/components/layout/Header.tsx From b2ded1c33ad6f313083be476bb6ebd1ec49fe4f3 Mon Sep 17 00:00:00 2001 From: mgyang53 Date: Thu, 13 Mar 2025 22:42:50 +0900 Subject: [PATCH 6/6] =?UTF-8?q?file:=20=ED=8F=B4=EB=8D=94=EB=AA=85=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EA=B2=BD?= =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/layout.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 910ef84..125340d 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -3,8 +3,8 @@ import type { Metadata } from 'next' import localFont from 'next/font/local' import ViewportAdjuster from '@/components/common/ViewportAdjuster' import '@/styles/globals.css' -import Header from '@/components/common/layout/Header' -import Footer from '@/components/common/layout/Footer' +import Header from '@/components/layout/Header' +import Footer from '@/components/layout/Footer' export const metadata: Metadata = { title: '지혜 | Ji-hye',