From be42996561a195eab5128ba2d55fe5cb01fe2f0f Mon Sep 17 00:00:00 2001 From: 89882 Date: Thu, 15 Feb 2024 19:21:50 +0900 Subject: [PATCH 01/15] setting: install cva --- package-lock.json | 20 ++++++++++++++++++++ package.json | 1 + 2 files changed, 21 insertions(+) diff --git a/package-lock.json b/package-lock.json index 1bf032dd..0eb6712e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@heroicons/react": "^2.1.1", "@mswjs/http-middleware": "^0.9.2", + "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", "express": "^4.18.2", "next": "14.1.0", @@ -3181,6 +3182,25 @@ "integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==", "dev": true }, + "node_modules/class-variance-authority": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz", + "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==", + "dependencies": { + "clsx": "2.0.0" + }, + "funding": { + "url": "https://joebell.co.uk" + } + }, + "node_modules/class-variance-authority/node_modules/clsx": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", + "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==", + "engines": { + "node": ">=6" + } + }, "node_modules/cli-cursor": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz", diff --git a/package.json b/package.json index 9b943f13..c3f2389c 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "dependencies": { "@heroicons/react": "^2.1.1", "@mswjs/http-middleware": "^0.9.2", + "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", "express": "^4.18.2", "next": "14.1.0", From 306b87ad4fb1686a6c3495294f72a39a82ae3d8d Mon Sep 17 00:00:00 2001 From: 89882 Date: Thu, 15 Feb 2024 19:23:40 +0900 Subject: [PATCH 02/15] =?UTF-8?q?feat:=20button=20component=20variant,=20s?= =?UTF-8?q?ize=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/ui/view/atom/button.tsx | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 app/ui/view/atom/button.tsx diff --git a/app/ui/view/atom/button.tsx b/app/ui/view/atom/button.tsx new file mode 100644 index 00000000..47cb6cb2 --- /dev/null +++ b/app/ui/view/atom/button.tsx @@ -0,0 +1,35 @@ +import { cva } from 'class-variance-authority'; +import { ButtonHTMLAttributes } from 'react'; + +interface ButtonProps extends ButtonHTMLAttributes { + variant?: 'primary' | 'secondary' | 'text'; + size?: 'xs' | 'sm' | 'md' | 'lg'; +} +export function Button({ children, className, variant = 'primary', size = 'md' }: ButtonProps) { + const ButtonVariants = cva( + ` + flex justify-center items-center px-[6px] py-[1px] + `, + { + variants: { + variant: { + primary: 'bg-primary rounded-[100px] text-white border-0', + secondary: 'bg-white rounded-[100px] border-solid border-[1px] border-gray', + text: '', + }, + size: { + default: '', + xs: 'w-[116px] h-[47px] text-[18px] font-medium leading-5', + sm: 'w-[144px] h-[40px] text-[14px] font-medium leading-3', + md: 'w-[198px] h-[50px] text-[18px] font-medium leading-3', + lg: 'w-[396px] h-[80px] text-[30px] font-medium leading-9', + }, + }, + defaultVariants: { + variant: 'primary', + size: 'md', + }, + }, + ); + return ; +} From a935a7b6c21176957938b359610161b553bcd756 Mon Sep 17 00:00:00 2001 From: 89882 Date: Thu, 15 Feb 2024 19:28:27 +0900 Subject: [PATCH 03/15] =?UTF-8?q?chore:=20color=20theme=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tailwind.config.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/tailwind.config.ts b/tailwind.config.ts index 3d42ff39..8ed037d6 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -12,6 +12,12 @@ const config: Config = { 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', 'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', }, + colors: { + primary: '#0B4093', + dark: '#002968', + black: '#2f2f2f', + gray: '#9f9f9f', + }, }, }, plugins: [], From 9aec13e5ea22ad43a25fb06f10f3219af33112af Mon Sep 17 00:00:00 2001 From: 89882 Date: Thu, 15 Feb 2024 21:46:38 +0900 Subject: [PATCH 04/15] =?UTF-8?q?feat:=20button=20atom=20component=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/ui/view/atom/button.tsx | 59 +++++++++++++++++++++---------------- 1 file changed, 34 insertions(+), 25 deletions(-) diff --git a/app/ui/view/atom/button.tsx b/app/ui/view/atom/button.tsx index 47cb6cb2..642181a1 100644 --- a/app/ui/view/atom/button.tsx +++ b/app/ui/view/atom/button.tsx @@ -1,35 +1,44 @@ import { cva } from 'class-variance-authority'; +import Link from 'next/link'; import { ButtonHTMLAttributes } from 'react'; interface ButtonProps extends ButtonHTMLAttributes { - variant?: 'primary' | 'secondary' | 'text'; - size?: 'xs' | 'sm' | 'md' | 'lg'; + variant?: 'primary' | 'secondary' | 'text' | 'delete'; + size?: 'xs' | 'sm' | 'md' | 'lg' | 'default'; + href?: string; } -export function Button({ children, className, variant = 'primary', size = 'md' }: ButtonProps) { - const ButtonVariants = cva( - ` - flex justify-center items-center px-[6px] py-[1px] - `, - { - variants: { - variant: { - primary: 'bg-primary rounded-[100px] text-white border-0', - secondary: 'bg-white rounded-[100px] border-solid border-[1px] border-gray', - text: '', - }, - size: { - default: '', - xs: 'w-[116px] h-[47px] text-[18px] font-medium leading-5', - sm: 'w-[144px] h-[40px] text-[14px] font-medium leading-3', - md: 'w-[198px] h-[50px] text-[18px] font-medium leading-3', - lg: 'w-[396px] h-[80px] text-[30px] font-medium leading-9', - }, +export function Button({ children, variant = 'primary', size = 'default', href, ...props }: ButtonProps) { + const ButtonVariants = cva(`flex justify-center items-center px-[6px] py-[1px]`, { + variants: { + variant: { + primary: 'bg-primary rounded-[100px] text-white border-0', + secondary: 'bg-white rounded-[100px] border-solid border-[1px] border-gray', + text: '', + delete: 'py-[7px] px-[14px] bg-[#35353559] rounded-[7px] text-white leading-5 font-medium text-[18px]', }, - defaultVariants: { - variant: 'primary', - size: 'md', + size: { + default: '', + xs: 'w-[116px] h-[47px] text-[18px] font-medium leading-5', + sm: 'w-[144px] h-[40px] text-[14px] font-medium leading-3', + md: 'w-[198px] h-[50px] text-[18px] font-medium leading-3', + lg: 'w-[396px] h-[80px] text-[30px] font-medium leading-9', }, }, + defaultVariants: { + variant: 'primary', + size: 'md', + }, + }); + + if (href) + return ( + + {children} + + ); + return ( + ); - return ; } From 0308ea87e62b117a7bbfa5286bfaf3b8fcde0ab3 Mon Sep 17 00:00:00 2001 From: 89882 Date: Thu, 15 Feb 2024 21:48:28 +0900 Subject: [PATCH 05/15] =?UTF-8?q?chore:=20default=20variant=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 --- app/ui/view/atom/button.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/app/ui/view/atom/button.tsx b/app/ui/view/atom/button.tsx index 642181a1..ca584aab 100644 --- a/app/ui/view/atom/button.tsx +++ b/app/ui/view/atom/button.tsx @@ -24,10 +24,6 @@ export function Button({ children, variant = 'primary', size = 'default', href, lg: 'w-[396px] h-[80px] text-[30px] font-medium leading-9', }, }, - defaultVariants: { - variant: 'primary', - size: 'md', - }, }); if (href) From 35957d31a39f98b94b437b88fff598b73c4ccaed Mon Sep 17 00:00:00 2001 From: 89882 Date: Fri, 16 Feb 2024 00:59:52 +0900 Subject: [PATCH 06/15] fix: children -> label prop --- app/ui/view/atom/button.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/app/ui/view/atom/button.tsx b/app/ui/view/atom/button.tsx index ca584aab..eab4c675 100644 --- a/app/ui/view/atom/button.tsx +++ b/app/ui/view/atom/button.tsx @@ -3,11 +3,12 @@ import Link from 'next/link'; import { ButtonHTMLAttributes } from 'react'; interface ButtonProps extends ButtonHTMLAttributes { + label: string; variant?: 'primary' | 'secondary' | 'text' | 'delete'; size?: 'xs' | 'sm' | 'md' | 'lg' | 'default'; href?: string; } -export function Button({ children, variant = 'primary', size = 'default', href, ...props }: ButtonProps) { +export function Button({ label, variant = 'primary', size = 'default', href, ...props }: ButtonProps) { const ButtonVariants = cva(`flex justify-center items-center px-[6px] py-[1px]`, { variants: { variant: { @@ -29,12 +30,12 @@ export function Button({ children, variant = 'primary', size = 'default', href, if (href) return ( - {children} + {label} ); return ( ); } From ff59271f04e20312a4fada5f87d65b0ec29bbc7a Mon Sep 17 00:00:00 2001 From: 89882 Date: Fri, 16 Feb 2024 13:14:28 +0900 Subject: [PATCH 07/15] =?UTF-8?q?chore:=20button=20style=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/ui/view/atom/button.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/app/ui/view/atom/button.tsx b/app/ui/view/atom/button.tsx index eab4c675..911b551b 100644 --- a/app/ui/view/atom/button.tsx +++ b/app/ui/view/atom/button.tsx @@ -15,14 +15,14 @@ export function Button({ label, variant = 'primary', size = 'default', href, ... primary: 'bg-primary rounded-[100px] text-white border-0', secondary: 'bg-white rounded-[100px] border-solid border-[1px] border-gray', text: '', - delete: 'py-[7px] px-[14px] bg-[#35353559] rounded-[7px] text-white leading-5 font-medium text-[18px]', + delete: 'py-[7px] px-3.5 bg-[#35353559] rounded-[7px] text-white leading-5 font-medium text-[18px]', }, size: { default: '', - xs: 'w-[116px] h-[47px] text-[18px] font-medium leading-5', - sm: 'w-[144px] h-[40px] text-[14px] font-medium leading-3', - md: 'w-[198px] h-[50px] text-[18px] font-medium leading-3', - lg: 'w-[396px] h-[80px] text-[30px] font-medium leading-9', + xs: 'w-[116px] h-[47px] text-lg font-medium leading-5', + sm: 'w-[144px] h-10 text-sm font-medium leading-3', + md: 'w-[198px] h-[50px] text-lg font-medium leading-3', + lg: 'w-[396px] h-20 text-3xl font-medium leading-9', }, }, }); From 0d372c8b623eb8a620a8add933999d0008dc73ce Mon Sep 17 00:00:00 2001 From: 89882 Date: Fri, 16 Feb 2024 14:25:05 +0900 Subject: [PATCH 08/15] =?UTF-8?q?setting:=20storybook=20font=20=EB=B0=8F?= =?UTF-8?q?=20style=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/preview-body.html | 10 ++++++++++ .storybook/preview.ts | 1 + 2 files changed, 11 insertions(+) create mode 100644 .storybook/preview-body.html diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html new file mode 100644 index 00000000..0e574222 --- /dev/null +++ b/.storybook/preview-body.html @@ -0,0 +1,10 @@ + + + diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 60beea0f..2280cb94 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -1,4 +1,5 @@ import type { Preview } from '@storybook/react'; +import '../app/globals.css'; const preview: Preview = { parameters: { From 4352042f2bfa0a4f206e609927f828be05f84961 Mon Sep 17 00:00:00 2001 From: 89882 Date: Fri, 16 Feb 2024 14:26:51 +0900 Subject: [PATCH 09/15] =?UTF-8?q?style:=20font=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/globals.css | 14 +++++++++----- app/layout.tsx | 11 +++++++---- 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/app/globals.css b/app/globals.css index a0d367b8..fc0389c9 100644 --- a/app/globals.css +++ b/app/globals.css @@ -16,13 +16,17 @@ } } -body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb)); -} - @layer utilities { .text-balance { text-wrap: balance; } } + +*, +a { + font-family: 'Pretendard'; +} + +a:-webkit-any-link { + text-decoration: none; +} diff --git a/app/layout.tsx b/app/layout.tsx index 28da9d37..29e89d5f 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,9 +1,6 @@ import type { Metadata } from 'next'; -import { Inter } from 'next/font/google'; import './globals.css'; -const inter = Inter({ subsets: ['latin'] }); - export const metadata: Metadata = { title: 'Create Next App', description: 'Generated by create next app', @@ -16,7 +13,13 @@ export default function RootLayout({ }>) { return ( - {children} + + + + {children} ); } From 0f5a644b3128a560b02b0ed8ca62cc9b313e7f17 Mon Sep 17 00:00:00 2001 From: 89882 Date: Fri, 16 Feb 2024 14:27:28 +0900 Subject: [PATCH 10/15] =?UTF-8?q?feat:=20button=20stories=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/ui/view/atom/button/button.stories.tsx | 89 ++++++++++++++++++++++ app/ui/view/atom/{ => button}/button.tsx | 4 +- 2 files changed, 91 insertions(+), 2 deletions(-) create mode 100644 app/ui/view/atom/button/button.stories.tsx rename app/ui/view/atom/{ => button}/button.tsx (87%) diff --git a/app/ui/view/atom/button/button.stories.tsx b/app/ui/view/atom/button/button.stories.tsx new file mode 100644 index 00000000..898effab --- /dev/null +++ b/app/ui/view/atom/button/button.stories.tsx @@ -0,0 +1,89 @@ +import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { Button } from './button'; + +const meta = { + title: 'ui/view/atom/Button', + component: Button, + tags: ['autodocs'], + parameters: { + componentSubtitle: 'Button은 사용자가 한 번의 탭으로 작업을 수행하고 선택할 수 있는 컴포넌트입니다.', + docs: { + description: { + component: ` +- variant값으로 "primary" | "secondary" | "text" | "delete" 중 하나를 선택할 수 있습니다.\n +- size값으로 "lg" | "md" | "sm" | "xs" | "default" 중 하나를 선택할 수 있습니다.\n +- href 값으로 url을 할당할 수 있고 Link Button 일 때 필수적으로 할당해야 합니다.\n +- label 값으로 button 태그에 존재하는 text를 의미하고 필수적으로 할당해야 합니다 +`, + }, + }, + }, + argTypes: { + variant: { + description: 'Button의 Variant를 설정합니다.', + table: { + type: { summary: 'ButtonVariant' }, + defaultValue: { summary: 'primary' }, + }, + options: ['primary', 'secondary', 'text', 'delete'], + control: { + type: 'radio', + }, + }, + size: { + description: 'Button의 size를 설정합니다.', + table: { + type: { summary: 'ButtonSize' }, + defaultValue: { summary: 'md' }, + }, + options: ['lg', 'md', 'sm', 'xs', 'default'], + control: { + type: 'radio', + }, + }, + href: { + description: 'Link Button일 때 url을 설정합니다.', + table: { + type: { summary: 'ButtonHref' }, + defaultValue: { summary: '' }, + }, + }, + label: { + description: 'Button의 label을 설정합니다', + table: { + type: { summary: 'ButtonLabel' }, + defaultValue: { summary: '' }, + }, + }, + }, +} satisfies Meta; + +export default meta; + +export const PrimaryButton: StoryObj = { + args: { + size: 'md', + variant: 'primary', + label: '수강현황 자세히보기', + }, + render: (args) => ); -} +}); From 43a32f3bcdef38e6130b59901d5230c6913c0441 Mon Sep 17 00:00:00 2001 From: 89882 Date: Sun, 18 Feb 2024 15:52:25 +0900 Subject: [PATCH 14/15] style: button width -> padding --- app/ui/view/atom/button/button.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/app/ui/view/atom/button/button.tsx b/app/ui/view/atom/button/button.tsx index 01190ab0..9098eefd 100644 --- a/app/ui/view/atom/button/button.tsx +++ b/app/ui/view/atom/button/button.tsx @@ -7,20 +7,20 @@ interface ButtonProps extends React.ButtonHTMLAttributes { size?: 'xs' | 'sm' | 'md' | 'lg' | 'default'; } -export const ButtonVariants = cva(`flex justify-center items-center px-[6px] py-[1px]`, { +export const ButtonVariants = cva(`flex justify-center items-center`, { variants: { variant: { primary: 'bg-primary rounded-[100px] text-white border-0 hover:bg-primary-hover', secondary: 'bg-white rounded-[100px] border-solid border-[1px] border-gray hover:bg-white-hover', text: 'font-medium text-slate-400 text-sm hover:text-slate-600', - delete: 'py-[7px] px-[14px] bg-[#35353559] rounded-[7px] text-white leading-5 font-medium text-[18px]', + delete: 'py-2 px-3.5 bg-[#35353559] rounded-[7px] text-white leading-5 font-medium text-[18px]', }, size: { default: '', - xs: 'w-[116px] h-[47px] text-lg font-medium leading-5', - sm: 'w-[144px] h-10 text-sm font-medium leading-3', - md: 'w-[198px] h-12 text-lg font-medium leading-3', - lg: 'w-[396px] h-20 text-3xl font-medium leading-9', + xs: 'px-5 py-3 text-lg font-medium leading-5', + sm: 'px-12 py-3.5 text-sm font-medium leading-3', + md: 'px-6 py-4 text-lg font-medium leading-3', + lg: 'px-32 py-6 text-3xl font-medium leading-9', }, }, }); From 1d6594e45dc84d14ebb9b0c04d47e60d5b516c1c Mon Sep 17 00:00:00 2001 From: 89882 Date: Sun, 18 Feb 2024 16:05:28 +0900 Subject: [PATCH 15/15] =?UTF-8?q?chore:=20story=20book=20href=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/ui/view/atom/button/button.stories.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/app/ui/view/atom/button/button.stories.tsx b/app/ui/view/atom/button/button.stories.tsx index db5ec49d..0dbc6857 100644 --- a/app/ui/view/atom/button/button.stories.tsx +++ b/app/ui/view/atom/button/button.stories.tsx @@ -13,7 +13,6 @@ const meta = { component: ` - variant값으로 "primary" | "secondary" | "text" | "delete" 중 하나를 선택할 수 있습니다.\n - size값으로 "lg" | "md" | "sm" | "xs" | "default" 중 하나를 선택할 수 있습니다.\n -- href 값으로 url을 할당할 수 있고 Link Button 일 때 필수적으로 할당해야 합니다.\n - label 값으로 button 태그에 존재하는 text를 의미하고 필수적으로 할당해야 합니다 `, }, @@ -42,13 +41,6 @@ const meta = { type: 'radio', }, }, - href: { - description: 'Link Button일 때 url을 설정합니다.', - table: { - type: { summary: 'ButtonHref' }, - defaultValue: { summary: '' }, - }, - }, label: { description: 'Button의 label을 설정합니다', table: {