From 56feb98560156ffe5b78cfc888380d0470504c0f Mon Sep 17 00:00:00 2001 From: juyeon-park Date: Mon, 30 Oct 2023 02:19:08 +0900 Subject: [PATCH 01/11] =?UTF-8?q?:tada:=20Tabs=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 3 +- pnpm-lock.yaml | 37 ++++++++++++++++-- src/components/ui/Tabs/Tabs.stories.tsx | 36 +++++++++++++++++ src/components/ui/Tabs/Tabs.tsx | 51 +++++++++++++++++++++++++ src/components/ui/Tabs/index.tsx | 3 ++ 5 files changed, 126 insertions(+), 4 deletions(-) create mode 100644 src/components/ui/Tabs/Tabs.stories.tsx create mode 100644 src/components/ui/Tabs/Tabs.tsx create mode 100644 src/components/ui/Tabs/index.tsx diff --git a/package.json b/package.json index 9263f78a..ce0ec224 100644 --- a/package.json +++ b/package.json @@ -13,12 +13,13 @@ "build-storybook": "storybook build" }, "dependencies": { - "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-dialog": "^1.0.5", + "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-switch": "^1.0.3", + "@radix-ui/react-tabs": "^1.0.4", "@tanstack/react-query": "^5.0.0", "autoprefixer": "^10.4.16", "class-variance-authority": "^0.7.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 84a70096..434ddf72 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,12 +5,12 @@ settings: excludeLinksFromLockfile: false dependencies: - '@radix-ui/react-dropdown-menu': - specifier: ^2.0.6 - version: 2.0.6(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) '@radix-ui/react-dialog': specifier: ^1.0.5 version: 1.0.5(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) + '@radix-ui/react-dropdown-menu': + specifier: ^2.0.6 + version: 2.0.6(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) '@radix-ui/react-icons': specifier: ^1.3.0 version: 1.3.0(react@18.0.0) @@ -23,6 +23,9 @@ dependencies: '@radix-ui/react-switch': specifier: ^1.0.3 version: 1.0.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) + '@radix-ui/react-tabs': + specifier: ^1.0.4 + version: 1.0.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) '@tanstack/react-query': specifier: ^5.0.0 version: 5.0.0(react-dom@18.0.0)(react@18.0.0) @@ -2787,6 +2790,34 @@ packages: react-dom: 18.0.0(react@18.0.0) dev: false + /@radix-ui/react-tabs@1.0.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0): + resolution: {integrity: sha512-egZfYY/+wRNCflXNHx+dePvnz9FbmssDTJBtgRfDY7e8SE5oIo3Py2eCB1ckAbh1Q7cQ/6yJZThJ++sgbxibog==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.23.2 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-context': 1.0.1(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-direction': 1.0.1(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-id': 1.0.1(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) + '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) + '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.0.0)(react@18.0.0) + '@types/react': 18.0.0 + '@types/react-dom': 18.0.0 + react: 18.0.0 + react-dom: 18.0.0(react@18.0.0) + dev: false + /@radix-ui/react-toggle-group@1.0.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0): resolution: {integrity: sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==} peerDependencies: diff --git a/src/components/ui/Tabs/Tabs.stories.tsx b/src/components/ui/Tabs/Tabs.stories.tsx new file mode 100644 index 00000000..c2859925 --- /dev/null +++ b/src/components/ui/Tabs/Tabs.stories.tsx @@ -0,0 +1,36 @@ +import type { Meta, StoryObj } from '@storybook/react' +import { Tabs, TabsList, TabsTrigger, TabsContent } from './Tabs' + +const meta = { + title: 'UI/Tabs', + component: Tabs, + tags: ['autodocs'], + argTypes: {}, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Normal: Story = { + args: {}, + render: () => { + return ( + + + 오퍼하기 + 찔러보기 + + +
카드1
+
카드2
+
카드3
+ + +
카드4
+
카드5
+
카드6
+ + + ) + }, +} diff --git a/src/components/ui/Tabs/Tabs.tsx b/src/components/ui/Tabs/Tabs.tsx new file mode 100644 index 00000000..327f3bc0 --- /dev/null +++ b/src/components/ui/Tabs/Tabs.tsx @@ -0,0 +1,51 @@ +'use client' + +import * as React from 'react' +import * as TabsPrimitive from '@radix-ui/react-tabs' +import { cn } from '@/utils/cn' + +const Tabs = TabsPrimitive.Root + +const TabsList = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +TabsList.displayName = TabsPrimitive.List.displayName + +const TabsTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +TabsTrigger.displayName = TabsPrimitive.Trigger.displayName + +const TabsContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +TabsContent.displayName = TabsPrimitive.Content.displayName + +export { Tabs, TabsList, TabsTrigger, TabsContent } diff --git a/src/components/ui/Tabs/index.tsx b/src/components/ui/Tabs/index.tsx new file mode 100644 index 00000000..010f6d3a --- /dev/null +++ b/src/components/ui/Tabs/index.tsx @@ -0,0 +1,3 @@ +import { Tabs, TabsList, TabsTrigger, TabsContent } from './Tabs' + +export { Tabs, TabsList, TabsTrigger, TabsContent } From 1f9fe9ecb4acdb493656014453823be62a2f4004 Mon Sep 17 00:00:00 2001 From: juyeon-park Date: Mon, 30 Oct 2023 03:46:47 +0900 Subject: [PATCH 02/11] =?UTF-8?q?:tada:=20Badge=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ui/Badge/Badge.stories.tsx | 20 +++++++++++ src/components/ui/Badge/Badge.tsx | 42 +++++++++++++++++++++++ src/components/ui/Badge/index.tsx | 3 ++ 3 files changed, 65 insertions(+) create mode 100644 src/components/ui/Badge/Badge.stories.tsx create mode 100644 src/components/ui/Badge/Badge.tsx create mode 100644 src/components/ui/Badge/index.tsx diff --git a/src/components/ui/Badge/Badge.stories.tsx b/src/components/ui/Badge/Badge.stories.tsx new file mode 100644 index 00000000..ed875344 --- /dev/null +++ b/src/components/ui/Badge/Badge.stories.tsx @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from '@storybook/react' +import { Badge } from './Badge' + +const meta = { + title: 'UI/Badge', + component: Badge, + tags: ['autodocs'], + argTypes: {}, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Normal: Story = { + args: { + variant: 'gradation', + size: 'sm', + children: '거래성사', + }, +} diff --git a/src/components/ui/Badge/Badge.tsx b/src/components/ui/Badge/Badge.tsx new file mode 100644 index 00000000..cce0aead --- /dev/null +++ b/src/components/ui/Badge/Badge.tsx @@ -0,0 +1,42 @@ +import * as React from 'react' +import { cva, type VariantProps } from 'class-variance-authority' +import { cn } from '@/utils' + +const badgeVariants = cva( + 'inline-flex items-center rounded-full px-2 font-medium', + { + variants: { + variant: { + primary: 'bg-primary-color text-white', + secondary: 'bg-secondary-color text-white', + gradation: 'bg-gradient-primary text-white', + information: 'bg-background-secondary-color text-black', + }, + size: { + sm: 'h-[18px] text-xs', + lg: 'h-6 text-sm', + }, + }, + defaultVariants: { + variant: 'information', + size: 'sm', + }, + }, +) + +export interface BadgeProps + extends React.HTMLAttributes, + VariantProps {} + +const Badge = ({ className, variant, size, ...props }: BadgeProps) => { + return ( +
+ ) +} + +Badge.displayName = 'Badge' + +export { Badge, badgeVariants } diff --git a/src/components/ui/Badge/index.tsx b/src/components/ui/Badge/index.tsx new file mode 100644 index 00000000..97ca7067 --- /dev/null +++ b/src/components/ui/Badge/index.tsx @@ -0,0 +1,3 @@ +import { Badge } from './Badge' + +export default Badge From 477ac22cc4475d4b1a58c062f8f8542a739358e9 Mon Sep 17 00:00:00 2001 From: juyeon-park Date: Mon, 30 Oct 2023 15:58:31 +0900 Subject: [PATCH 03/11] =?UTF-8?q?:tada:=20Avatar=20=EA=B3=B5=ED=86=B5=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 27 +++++++++ src/components/ui/Avatar/Avatar.stories.tsx | 34 +++++++++++ src/components/ui/Avatar/Avatar.tsx | 67 +++++++++++++++++++++ src/components/ui/Avatar/index.tsx | 3 + 5 files changed, 132 insertions(+) create mode 100644 src/components/ui/Avatar/Avatar.stories.tsx create mode 100644 src/components/ui/Avatar/Avatar.tsx create mode 100644 src/components/ui/Avatar/index.tsx diff --git a/package.json b/package.json index d5ee5cde..01de7f33 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "chromatic": "npx chromatic --project-token=chpt_00fe989402301dc" }, "dependencies": { + "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-icons": "^1.3.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dc8f4090..d6772519 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,6 +5,9 @@ settings: excludeLinksFromLockfile: false dependencies: + '@radix-ui/react-avatar': + specifier: ^1.0.4 + version: 1.0.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) '@radix-ui/react-dialog': specifier: ^1.0.5 version: 1.0.5(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) @@ -2202,6 +2205,30 @@ packages: react: 18.0.0 react-dom: 18.0.0(react@18.0.0) + /@radix-ui/react-avatar@1.0.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0): + resolution: {integrity: sha512-kVK2K7ZD3wwj3qhle0ElXhOjbezIgyl2hVvgwfIdexL3rN6zJmy5AqqIf+D31lxVppdzV8CjAfZ6PklkmInZLw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.23.2 + '@radix-ui/react-context': 1.0.1(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.0.0)(react@18.0.0) + '@types/react': 18.0.0 + '@types/react-dom': 18.0.0 + react: 18.0.0 + react-dom: 18.0.0(react@18.0.0) + dev: false + /@radix-ui/react-collection@1.0.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0): resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==} peerDependencies: diff --git a/src/components/ui/Avatar/Avatar.stories.tsx b/src/components/ui/Avatar/Avatar.stories.tsx new file mode 100644 index 00000000..10fc1ab3 --- /dev/null +++ b/src/components/ui/Avatar/Avatar.stories.tsx @@ -0,0 +1,34 @@ +import type { Meta, StoryObj } from '@storybook/react' +import { Avatar, AvatarImage, AvatarFallback } from './Avatar' + +const meta = { + title: 'UI/Avatar', + component: Avatar, + tags: ['autodocs'], + argTypes: {}, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Normal: Story = { + args: {}, + render: () => { + return ( + <> + + + NB + + + + NB + + + + NB + + + ) + }, +} diff --git a/src/components/ui/Avatar/Avatar.tsx b/src/components/ui/Avatar/Avatar.tsx new file mode 100644 index 00000000..bf9ed9e7 --- /dev/null +++ b/src/components/ui/Avatar/Avatar.tsx @@ -0,0 +1,67 @@ +'use client' + +import * as React from 'react' +import * as AvatarPrimitive from '@radix-ui/react-avatar' +import { cva, type VariantProps } from 'class-variance-authority' +import { cn } from '@/utils' + +const avatarVariants = cva( + 'relative flex shrink-0 overflow-hidden rounded-full', + { + variants: { + size: { + sm: 'w-6 h-6', + md: 'w-10 h-10', + lg: 'w-[100px] h-[100px]', + }, + }, + }, +) + +export interface AvatarProps + extends React.HTMLAttributes, + VariantProps { + ref?: React.Ref +} + +const Avatar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & + VariantProps +>(({ className, size, ...props }: AvatarProps, ref) => ( + +)) +Avatar.displayName = AvatarPrimitive.Root.displayName + +const AvatarImage = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarImage.displayName = AvatarPrimitive.Image.displayName + +const AvatarFallback = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName + +export { Avatar, AvatarImage, AvatarFallback } diff --git a/src/components/ui/Avatar/index.tsx b/src/components/ui/Avatar/index.tsx new file mode 100644 index 00000000..6fe2f610 --- /dev/null +++ b/src/components/ui/Avatar/index.tsx @@ -0,0 +1,3 @@ +import { Avatar, AvatarImage, AvatarFallback } from './Avatar' + +export { Avatar, AvatarImage, AvatarFallback } From 08b0dda0577040063898eaad58a8775e309db433 Mon Sep 17 00:00:00 2001 From: oaoong Date: Mon, 30 Oct 2023 18:15:03 +0900 Subject: [PATCH 04/11] =?UTF-8?q?:tada:=20=EC=A0=84=EC=B2=B4=20=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(root)/(routes)/(home)/page.tsx | 47 +++++++++++++++++++ src/app/layout.tsx | 14 ++++-- src/components/domain/Header/Header.tsx | 2 +- .../ui/DropdownMenu/DropdownMenu.tsx | 2 +- src/styles/globals.css | 20 ++++++++ tailwind.config.js | 7 +++ 6 files changed, 87 insertions(+), 5 deletions(-) diff --git a/src/app/(root)/(routes)/(home)/page.tsx b/src/app/(root)/(routes)/(home)/page.tsx index 0f000334..b84b1c83 100644 --- a/src/app/(root)/(routes)/(home)/page.tsx +++ b/src/app/(root)/(routes)/(home)/page.tsx @@ -1,6 +1,18 @@ import Link from 'next/link' import Button from '@/components/ui/Button' import { DarkModeButton } from '@/components/ui/DarkModeButton' +import { + Dialog, + DialogTrigger, + DialogContent, + DialogHeader, + DialogTitle, + DialogDescription, + DialogFooter, + DialogClose, +} from '@/components/ui/Dialog' +import Input from '@/components/ui/Input' +import Label from '@/components/ui/Label' export default function HomePage() { return ( @@ -9,6 +21,41 @@ export default function HomePage() { 로긴 + + + + + + + Share link + + Anyone who has this link will be able to view this. + + +
+
+ + +
+ +
+ + + + + + + ) } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index d64b5807..311d1f15 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,5 +1,7 @@ import { Suspense } from 'react' import type { Metadata } from 'next' +import Head from 'next/head' +import Header from '@/components/domain/Header' import { Environment } from '@/config/environment' import TanstackQueryContext from '@/contexts/TanstackQueryContext' import ThemeProviderContext from '@/contexts/ThemeProviderContext' @@ -8,7 +10,7 @@ import '@/styles/globals.css' export const metadata: Metadata = { title: '나비장터', - description: 'Generated by create next app', + description: '물물교환 플랫폼 나비장터입니다.', } if (Environment.apiMocking() === 'enabled') { @@ -25,12 +27,18 @@ export default function RootLayout({ }) { return ( + + + - {children} - {authModal} +
+
+ {children} + {authModal} +
diff --git a/src/components/domain/Header/Header.tsx b/src/components/domain/Header/Header.tsx index c861ac81..e0848a85 100644 --- a/src/components/domain/Header/Header.tsx +++ b/src/components/domain/Header/Header.tsx @@ -19,7 +19,7 @@ type HeaderProps = { const Header = ({ isLogin = false }: HeaderProps) => { return ( -
+
diff --git a/src/components/ui/DropdownMenu/DropdownMenu.tsx b/src/components/ui/DropdownMenu/DropdownMenu.tsx index 909e4c98..8fd4f40b 100644 --- a/src/components/ui/DropdownMenu/DropdownMenu.tsx +++ b/src/components/ui/DropdownMenu/DropdownMenu.tsx @@ -68,7 +68,7 @@ const DropdownMenuContent = React.forwardRef< ref={ref} sideOffset={sideOffset} className={cn( - 'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-background-color p-1 text-text-color shadow-md', + 'z-50 absolute min-w-[8rem] overflow-hidden rounded-md border bg-background-color p-1 text-text-color shadow-md', 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', className, )} diff --git a/src/styles/globals.css b/src/styles/globals.css index b5c61c95..3b8dd281 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -1,3 +1,23 @@ @tailwind base; @tailwind components; @tailwind utilities; + +@layer base { + :root { + --nav-height: 3.5rem; + --page-min-width: 320px; + --page-max-width: 640px; + } +} + +@layer base { + .centered-content { + @apply max-w-[640px] min-w-[320px] shadow-2xl bg-background-color text-text-color relative overflow-hidden mx-auto; + } + + :root, + html, + body { + @apply h-full; + } +} diff --git a/tailwind.config.js b/tailwind.config.js index 5db486eb..ea0d21e0 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -20,6 +20,13 @@ module.exports = { 'gradient-secondary': 'linear-gradient(to right, #7C54D1 0%, #534CD0 100%)', }), + height: { + nav: 'var(--nav-height)', + }, + width: { + page_min: 'var(--page-min-width)', + page_max: 'var(--page-max-width)', + }, }, }, plugins: [ From 0d866601f60a01ff89a7876fb13cf2f533c5fc15 Mon Sep 17 00:00:00 2001 From: oaoong Date: Mon, 30 Oct 2023 23:50:16 +0900 Subject: [PATCH 05/11] =?UTF-8?q?:tada:=20=EA=B5=AC=EA=B8=80,=20=EC=B9=B4?= =?UTF-8?q?=EC=B9=B4=EC=98=A4=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.example | 3 +- public/images/google.png | Bin 0 -> 636 bytes public/images/kakao.png | Bin 0 -> 471 bytes .../LoginButtons/LoginButtons.stories.tsx | 30 +++++++++++++ .../buttons/LoginButtons/LoginButtons.tsx | 42 ++++++++++++++++++ .../domain/buttons/LoginButtons/index.tsx | 3 ++ src/config/assets.ts | 4 ++ src/styles/colors.ts | 3 ++ 8 files changed, 84 insertions(+), 1 deletion(-) create mode 100644 public/images/google.png create mode 100644 public/images/kakao.png create mode 100644 src/components/domain/buttons/LoginButtons/LoginButtons.stories.tsx create mode 100644 src/components/domain/buttons/LoginButtons/LoginButtons.tsx create mode 100644 src/components/domain/buttons/LoginButtons/index.tsx diff --git a/.env.example b/.env.example index 4d0fb3d0..fde7d11b 100644 --- a/.env.example +++ b/.env.example @@ -1 +1,2 @@ -NEXT_PUBLIC_API_MOCKING=enabled # or disabled \ No newline at end of file +NEXT_PUBLIC_API_MOCKING=enabled # or disabled +CHROMATIC_TOKEN=your-token diff --git a/public/images/google.png b/public/images/google.png new file mode 100644 index 0000000000000000000000000000000000000000..bda6281c7ca9cc3b58b23939080f33041950db7b GIT binary patch literal 636 zcmV-?0)zdDP)K~#7FwNp)K z6G0SyZ+262P)rUg_R_41p422QUR1Izco$0#6$FcTk+xpFWs6|(prlX`^pK01A_#gC z|LCe9#Y4?S1QojnZE`5-B5IR0Gtb$LyItFKp{4y`nfc!P_Ip1t0GkAiO3vx&l)~u{ zDU8Pm8=bFa->l1MKG$;&nYbX+x&Jd{A>rL6;5Rh0Y)2YZ`m#kJJP#2dptqgVv&X|R zHB73#*_#wHkyUI?@Yua83^GJ;1QF&{REJ=#(Q3o{&NecVG|dOVSxa<+8Na$VamhueiuUW4I&Oa?ls_%I4n5L zR^l^Hq|!w_Q672}ELi{*kZ5@{Wcg()rRs%z>d0kJEgjG&e;Tk5|p zkBfn@^(4xGWXolzq*#yHr(oN{fSgyg7>SH&B<)p3E;6P52^k!P2%xjuip^c?oiUP@ zA7d*;ayOS{FYXhtRy%-AMB`jkGGUWeDgwtI3}}K=m*B8n>A-J`)t?`~j6P|=R^l&A WZO3Etamg?M000094d($*#}4UG-WK{OSlbd=CiLra4` zFWnsO98xge>vw{pQkvce9`ASGd%y4d`$PDJlwqV1aYq5f72+}~^~HSy5MLy~?Q^B_ zG@OI|9~*|T4MbTMS6~D@fgqxzMSKzbJK1mJoTq#s`=dDRWk>_Ca18MBHVwH<+B8U?Oqs1)T>e9H+Gq z3SDYMk`1^1Vc>8(vuyiN2q8TIhevR!l)Ym8Bl(@%U63f37sBcP85}ZM?V2d1ve0aH z%0`bw=)P2PVFUw4oW0IlE2EVAR<&B_>Ge8{W57rS0)mBP-nJc>kRP`bbraMskYWG; N002ovPDHLkV1m*IzwrP7 literal 0 HcmV?d00001 diff --git a/src/components/domain/buttons/LoginButtons/LoginButtons.stories.tsx b/src/components/domain/buttons/LoginButtons/LoginButtons.stories.tsx new file mode 100644 index 00000000..13380b8e --- /dev/null +++ b/src/components/domain/buttons/LoginButtons/LoginButtons.stories.tsx @@ -0,0 +1,30 @@ +import type { Meta, StoryObj } from '@storybook/react' +import { KakaoLoginButton, GoogleLoginButton } from './LoginButtons' + +const meta = { + title: 'DOMAIN/LoginButtons', + component: KakaoLoginButton, + tags: ['autodocs'], + argTypes: {}, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Normal: Story = { + args: {}, + render: () => ( +
+ alert('카카오 버튼')} /> + alert('구글 버튼')} /> +
+ ), +} + +export const Kakao: Story = { + render: () => alert('카카오 버튼')} />, +} + +export const Google: Story = { + render: () => alert('구글 버튼')} />, +} diff --git a/src/components/domain/buttons/LoginButtons/LoginButtons.tsx b/src/components/domain/buttons/LoginButtons/LoginButtons.tsx new file mode 100644 index 00000000..fc0f6fb8 --- /dev/null +++ b/src/components/domain/buttons/LoginButtons/LoginButtons.tsx @@ -0,0 +1,42 @@ +import React from 'react' +import Image from 'next/image' +import Button from '@/components/ui/Button' +import Assets from '@/config/assets' + +const KakaoLoginButton = ({ onClickButton }: { onClickButton: () => void }) => { + return ( + + ) +} + +const GoogleLoginButton = ({ + onClickButton, +}: { + onClickButton: () => void +}) => { + return ( + + ) +} + +export { KakaoLoginButton, GoogleLoginButton } diff --git a/src/components/domain/buttons/LoginButtons/index.tsx b/src/components/domain/buttons/LoginButtons/index.tsx new file mode 100644 index 00000000..3ac89a00 --- /dev/null +++ b/src/components/domain/buttons/LoginButtons/index.tsx @@ -0,0 +1,3 @@ +import { KakaoLoginButton, GoogleLoginButton } from './LoginButtons' + +export { KakaoLoginButton, GoogleLoginButton } diff --git a/src/config/assets.ts b/src/config/assets.ts index fdfe83b6..723541cb 100644 --- a/src/config/assets.ts +++ b/src/config/assets.ts @@ -1,9 +1,13 @@ import AlarmIcon from '/public/images/bell.svg' +import GoogleIcon from '/public/images/google.png' +import KakaoIcon from '/public/images/kakao.png' import MenuIcon from '/public/images/menu-icon.svg' const Assets = { menuIcon: MenuIcon, alarmIcon: AlarmIcon, + googleIcon: GoogleIcon, + kakaoIcon: KakaoIcon, } as const export default Assets diff --git a/src/styles/colors.ts b/src/styles/colors.ts index 73613926..cd89cd05 100644 --- a/src/styles/colors.ts +++ b/src/styles/colors.ts @@ -8,6 +8,7 @@ const COLORS = { gray: '#BFBFBF', black: '#000000', white: '#FFFFFF', + kakao: '#FEE103', // dark: { // primary_300: '#534CD0', @@ -30,6 +31,7 @@ const LIGHT_THEMES = { 'text-color': COLORS.black, 'background-secondary-color': COLORS.gray, 'dialog-background-color': COLORS.black, + 'kakao-color': COLORS.kakao, } as const const DARK_THEMES = { @@ -41,6 +43,7 @@ const DARK_THEMES = { 'text-color': COLORS.white, 'background-secondary-color': COLORS.gray, 'dialog-background-color': COLORS.black, + 'kakao-color': COLORS.kakao, } as const export default COLORS From 41027af52f47325747c3b7f8e84d7f0a1dcff891 Mon Sep 17 00:00:00 2001 From: doggopawer Date: Tue, 31 Oct 2023 01:44:45 +0900 Subject: [PATCH 06/11] =?UTF-8?q?=F0=9F=8E=89=20=EA=B3=B5=ED=86=B5=20?= =?UTF-8?q?=ED=8F=B0=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A0=95?= =?UTF-8?q?=EC=9D=98=20=EB=B0=8F=20tailwind=20=EC=BB=A4=EC=8A=A4=ED=85=80?= =?UTF-8?q?=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/sizes.ts | 33 +++++++++++++++++++++++++++++++++ tailwind.config.js | 21 +++++++++++++++++++++ 2 files changed, 54 insertions(+) create mode 100644 src/styles/sizes.ts diff --git a/src/styles/sizes.ts b/src/styles/sizes.ts new file mode 100644 index 00000000..12bf5dc9 --- /dev/null +++ b/src/styles/sizes.ts @@ -0,0 +1,33 @@ +const SIZE = { + font_24: '24px', + font_20: '20px', + font_14: '14px', + font_12: '12px', + font_10: '10px', + card_lg: '161px', + card_md: '118px', + card_sm: '106px', + card_radius: '6px', +} as const + +const FONT_SIZE = { + h1: SIZE.font_24, + h2: SIZE.font_20, + h3: SIZE.font_14, + h4: SIZE.font_12, + p1: SIZE.font_14, + p2: SIZE.font_12, + p3: SIZE.font_10, +} +const FONT_WEIGHT = {} +const HEIGHT = { + 'card-lg': SIZE.card_lg, + 'card-md': SIZE.card_md, + 'card-sm': SIZE.card_sm, +} +const BORDER_RADIUS = { + card: SIZE.card_radius, +} + +export default SIZE +export { FONT_SIZE, FONT_WEIGHT, HEIGHT, BORDER_RADIUS } diff --git a/tailwind.config.js b/tailwind.config.js index 5db486eb..e4220549 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,5 +1,11 @@ const { createThemes } = require('tw-colors') const { LIGHT_THEMES, DARK_THEMES } = require('./src/styles/colors') +const { + HEIGHT, + FONT_SIZE, + FONT_WEIGHT, + BORDER_RADIUS, +} = require('./src/styles/sizes') /** @type {import('tailwindcss').Config} */ module.exports = { @@ -20,6 +26,21 @@ module.exports = { 'gradient-secondary': 'linear-gradient(to right, #7C54D1 0%, #534CD0 100%)', }), + fontSize: { + ...FONT_SIZE, + }, + fontWeight: { + ...FONT_WEIGHT, + }, + colors: { + ...LIGHT_THEMES, + }, + height: { + ...HEIGHT, + }, + borderRadius: { + ...BORDER_RADIUS, + }, }, }, plugins: [ From 993a8e43e83f04f41d6d35a902e2961de2ab183b Mon Sep 17 00:00:00 2001 From: doggopawer Date: Tue, 31 Oct 2023 01:45:02 +0900 Subject: [PATCH 07/11] =?UTF-8?q?=F0=9F=8E=89=20Card=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ui/Card/Card.stories.tsx | 82 +++++++++++++++ src/components/ui/Card/Card.tsx | 131 ++++++++++++++++++++++++ src/components/ui/Card/index.tsx | 3 + 3 files changed, 216 insertions(+) create mode 100644 src/components/ui/Card/Card.stories.tsx create mode 100644 src/components/ui/Card/Card.tsx create mode 100644 src/components/ui/Card/index.tsx diff --git a/src/components/ui/Card/Card.stories.tsx b/src/components/ui/Card/Card.stories.tsx new file mode 100644 index 00000000..0ed1e326 --- /dev/null +++ b/src/components/ui/Card/Card.stories.tsx @@ -0,0 +1,82 @@ +import type { Meta, StoryObj } from '@storybook/react' +import Button from '../Button' +import { Card, CardFlex, CardImage, CardText } from './Card' + +const meta = { + title: 'UI/Card', + component: Card, + tags: ['autodocs'], + argTypes: {}, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Small: Story = { + args: {}, + render: () => { + return ( + + +
+ +
+ + + 스위치 팜 + 스위치 + 10만원대 + 25분전 + + + + ) + }, +} + +export const Large: Story = { + args: {}, + render: () => { + return ( + + +
+ +
+ + + 스위치 팜 + 스위치 + 10만원대 + + 25분전 + + + + ) + }, +} diff --git a/src/components/ui/Card/Card.tsx b/src/components/ui/Card/Card.tsx new file mode 100644 index 00000000..3184ecf5 --- /dev/null +++ b/src/components/ui/Card/Card.tsx @@ -0,0 +1,131 @@ +import * as React from 'react' +import { cva, type VariantProps } from 'class-variance-authority' +import Image from 'next/image' +import { cn } from '@/utils' + +const cardVariants = cva( + 'rounded-card border border-background-secondary-color p-1.5', + { + variants: { + size: { + lg: 'h-card-lg', + md: 'h-card-md', + sm: 'h-card-sm', + }, + }, + defaultVariants: { + size: 'lg', + }, + }, +) + +export type CardProps = React.HTMLAttributes & + VariantProps & { + asChild?: boolean + } + +const Card = React.forwardRef( + ({ size, className, ...props }, ref) => ( +
+ ), +) +Card.displayName = 'Card' + +const cardFlexVariants = cva('flex h-full', { + variants: { + direction: { + row: 'flex-row', + col: 'flex-col', + }, + justify: { + start: 'justify-start', + center: 'justify-center', + end: 'justify-end', + between: 'justify-between', + around: 'justify-around', + }, + align: { + start: 'items-start', + center: 'items-center', + end: 'items-end', + }, + gap: { + space: 'gap-2', + none: 'gap-0', + }, + }, + defaultVariants: { + direction: 'row', + gap: 'none', + }, +}) + +export type CardFlexProps = React.HTMLAttributes & + VariantProps & { + asChild?: boolean + } + +const CardFlex = React.forwardRef( + ({ direction, justify, align, gap, className, ...props }, ref) => ( +
+ ), +) +CardFlex.displayName = 'CardFlex' + +const CardImage = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, alt, ...props }, ref) => ( + {alt} +)) +CardImage.displayName = 'CardImage' + +const cardTextVariants = cva('', { + variants: { + type: { + h1: 'text-h1 font-bold', + h2: 'text-h2 font-bold', + h3: 'text-h3 font-bold', + h4: 'text-h4 font-bold', + p1: 'text-p1', + p2: 'text-p2', + p3: 'text-p3', + }, + color: { + black: 'text-text-color', + gray: 'text-background-secondary-color', + }, + }, + defaultVariants: { + type: 'h1', + // color: 'black', + }, +}) + +export type CardTextProps = React.HTMLAttributes & + VariantProps & { + asChild?: boolean + } + +const CardText = React.forwardRef( + ({ type, color, className, ...props }, ref) => ( +
+ ), +) +CardText.displayName = 'CardText' + +export { Card, CardFlex, CardImage, CardText } diff --git a/src/components/ui/Card/index.tsx b/src/components/ui/Card/index.tsx new file mode 100644 index 00000000..6183f4d6 --- /dev/null +++ b/src/components/ui/Card/index.tsx @@ -0,0 +1,3 @@ +import { Card } from './Card' + +export default Card From e265dc6ed5e69e6e1827348496182facc3a6eee6 Mon Sep 17 00:00:00 2001 From: oaoong Date: Tue, 31 Oct 2023 15:47:22 +0900 Subject: [PATCH 08/11] =?UTF-8?q?:tada:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20UI?= =?UTF-8?q?=20=EC=83=9D=EC=84=B1=20=EB=B0=8F=20=EB=9D=BC=EC=9A=B0=ED=8C=85?= =?UTF-8?q?=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/images/logo.svg | 21 ++++++++ public/images/x-icon.svg | 6 +++ src/app/(root)/(routes)/(auth)/login/page.tsx | 17 +++++-- src/app/(root)/(routes)/(home)/page.tsx | 51 ------------------- src/app/@authModal/(...)login/page.tsx | 31 +++++++++-- src/app/layout.tsx | 2 +- .../domain/LoginForm/LoginForm.stories.tsx | 16 ++++++ src/components/domain/LoginForm/LoginForm.tsx | 14 +++++ src/components/domain/LoginForm/index.tsx | 3 ++ .../domain/LoginForm/section/LoginButtons.tsx | 15 ++++++ src/config/assets.ts | 4 ++ src/styles/globals.css | 2 +- 12 files changed, 123 insertions(+), 59 deletions(-) create mode 100644 public/images/logo.svg create mode 100644 public/images/x-icon.svg create mode 100644 src/components/domain/LoginForm/LoginForm.stories.tsx create mode 100644 src/components/domain/LoginForm/LoginForm.tsx create mode 100644 src/components/domain/LoginForm/index.tsx create mode 100644 src/components/domain/LoginForm/section/LoginButtons.tsx diff --git a/public/images/logo.svg b/public/images/logo.svg new file mode 100644 index 00000000..e1a6deea --- /dev/null +++ b/public/images/logo.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/x-icon.svg b/public/images/x-icon.svg new file mode 100644 index 00000000..8f4a1cbf --- /dev/null +++ b/public/images/x-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/app/(root)/(routes)/(auth)/login/page.tsx b/src/app/(root)/(routes)/(auth)/login/page.tsx index 712ff4ec..663bbf6f 100644 --- a/src/app/(root)/(routes)/(auth)/login/page.tsx +++ b/src/app/(root)/(routes)/(auth)/login/page.tsx @@ -1,5 +1,16 @@ -import React from 'react' +import { FunctionComponent } from 'react' +import LoginForm from '@/components/domain/LoginForm' -export default function LoginPage() { - return
LoginPage
+interface LoginPageProps {} + +const LoginPage: FunctionComponent = ({}) => { + return ( +
+
+ +
+
+ ) } + +export default LoginPage diff --git a/src/app/(root)/(routes)/(home)/page.tsx b/src/app/(root)/(routes)/(home)/page.tsx index b84b1c83..0fe1bf9f 100644 --- a/src/app/(root)/(routes)/(home)/page.tsx +++ b/src/app/(root)/(routes)/(home)/page.tsx @@ -1,61 +1,10 @@ -import Link from 'next/link' -import Button from '@/components/ui/Button' import { DarkModeButton } from '@/components/ui/DarkModeButton' -import { - Dialog, - DialogTrigger, - DialogContent, - DialogHeader, - DialogTitle, - DialogDescription, - DialogFooter, - DialogClose, -} from '@/components/ui/Dialog' -import Input from '@/components/ui/Input' -import Label from '@/components/ui/Label' export default function HomePage() { return (
hi - 로긴 - - - - - - - - Share link - - Anyone who has this link will be able to view this. - - -
-
- - -
- -
- - - - - - -
) } diff --git a/src/app/@authModal/(...)login/page.tsx b/src/app/@authModal/(...)login/page.tsx index 5bbc7b70..2ae20e96 100644 --- a/src/app/@authModal/(...)login/page.tsx +++ b/src/app/@authModal/(...)login/page.tsx @@ -1,5 +1,30 @@ -import React from 'react' +'use client' -export default function LoginModalPage() { - return
LoginModalPage
+import { FunctionComponent } from 'react' +import { useRouter } from 'next/navigation' +import LoginForm from '@/components/domain/LoginForm' +import { Dialog, DialogContent } from '@/components/ui/Dialog' + +interface LoginModalPageProps {} + +const LoginModalPage: FunctionComponent = () => { + const router = useRouter() + return ( + { + if (!open) { + router.back() + } + }} + > + +
+ +
+ + + ) } + +export default LoginModalPage diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 311d1f15..95f6b0cc 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -35,7 +35,7 @@ export default function RootLayout({
-
+
{children} {authModal}
diff --git a/src/components/domain/LoginForm/LoginForm.stories.tsx b/src/components/domain/LoginForm/LoginForm.stories.tsx new file mode 100644 index 00000000..4a67a72d --- /dev/null +++ b/src/components/domain/LoginForm/LoginForm.stories.tsx @@ -0,0 +1,16 @@ +import type { Meta, StoryObj } from '@storybook/react' +import LoginForm from './LoginForm' + +const meta = { + title: 'DOMAIN/LoginForm', + component: LoginForm, + tags: ['autodocs'], + argTypes: {}, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Normal: Story = { + args: {}, +} diff --git a/src/components/domain/LoginForm/LoginForm.tsx b/src/components/domain/LoginForm/LoginForm.tsx new file mode 100644 index 00000000..4e47338c --- /dev/null +++ b/src/components/domain/LoginForm/LoginForm.tsx @@ -0,0 +1,14 @@ +import Image from 'next/image' +import Assets from '@/config/assets' +import LoginButtons from './section/LoginButtons' + +const LoginForm = () => { + return ( +
+ nabi-logo + +
+ ) +} + +export default LoginForm diff --git a/src/components/domain/LoginForm/index.tsx b/src/components/domain/LoginForm/index.tsx new file mode 100644 index 00000000..608996c9 --- /dev/null +++ b/src/components/domain/LoginForm/index.tsx @@ -0,0 +1,3 @@ +import LoginForm from './LoginForm' + +export default LoginForm diff --git a/src/components/domain/LoginForm/section/LoginButtons.tsx b/src/components/domain/LoginForm/section/LoginButtons.tsx new file mode 100644 index 00000000..5b80d764 --- /dev/null +++ b/src/components/domain/LoginForm/section/LoginButtons.tsx @@ -0,0 +1,15 @@ +'use client' + +import React from 'react' +import { KakaoLoginButton, GoogleLoginButton } from '../../buttons/LoginButtons' + +const LoginButtons = () => { + return ( +
+ alert('k')} /> + alert('g')} /> +
+ ) +} + +export default LoginButtons diff --git a/src/config/assets.ts b/src/config/assets.ts index 723541cb..6e2f5033 100644 --- a/src/config/assets.ts +++ b/src/config/assets.ts @@ -1,13 +1,17 @@ import AlarmIcon from '/public/images/bell.svg' import GoogleIcon from '/public/images/google.png' import KakaoIcon from '/public/images/kakao.png' +import Logo from '/public/images/logo.svg' import MenuIcon from '/public/images/menu-icon.svg' +import XIcon from '/public/images/x-icon.svg' const Assets = { menuIcon: MenuIcon, alarmIcon: AlarmIcon, googleIcon: GoogleIcon, kakaoIcon: KakaoIcon, + logo: Logo, + xIcon: XIcon, } as const export default Assets diff --git a/src/styles/globals.css b/src/styles/globals.css index 3b8dd281..63103c99 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -12,7 +12,7 @@ @layer base { .centered-content { - @apply max-w-[640px] min-w-[320px] shadow-2xl bg-background-color text-text-color relative overflow-hidden mx-auto; + @apply max-w-[640px] min-w-[320px] shadow-2xl bg-background-color text-text-color relative overflow-hidden mx-auto p-2 pt-16; } :root, From aa254c70858c6179696d18a3d7dfdfb55648dabd Mon Sep 17 00:00:00 2001 From: doggopawer Date: Tue, 31 Oct 2023 15:50:29 +0900 Subject: [PATCH 09/11] =?UTF-8?q?=F0=9F=90=9B=20tailwind=20=EA=B8=80?= =?UTF-8?q?=EC=9E=90=EC=83=89=20=EC=A0=81=EC=9A=A9=20=EC=98=A4=EB=A5=98=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ui/Card/Card.stories.tsx | 16 +++++------ src/components/ui/Card/Card.tsx | 24 ++++++---------- src/styles/sizes.ts | 37 +++++++------------------ tailwind.config.js | 16 +---------- 4 files changed, 28 insertions(+), 65 deletions(-) diff --git a/src/components/ui/Card/Card.stories.tsx b/src/components/ui/Card/Card.stories.tsx index 0ed1e326..0d81bf00 100644 --- a/src/components/ui/Card/Card.stories.tsx +++ b/src/components/ui/Card/Card.stories.tsx @@ -35,10 +35,10 @@ export const Small: Story = {
- 스위치 팜 - 스위치 - 10만원대 - 25분전 + 스위치 팜 + 스위치 + 10만원대 + 25분전 @@ -69,11 +69,11 @@ export const Large: Story = {
- 스위치 팜 - 스위치 - 10만원대 + 스위치 팜 + 스위치 + 10만원대 - 25분전 + 25분전 diff --git a/src/components/ui/Card/Card.tsx b/src/components/ui/Card/Card.tsx index 3184ecf5..82bbc8e4 100644 --- a/src/components/ui/Card/Card.tsx +++ b/src/components/ui/Card/Card.tsx @@ -1,6 +1,8 @@ import * as React from 'react' import { cva, type VariantProps } from 'class-variance-authority' import Image from 'next/image' +import COLORS from '@/styles/colors' +import { TYPHOGRAPHY } from '@/styles/sizes' import { cn } from '@/utils' const cardVariants = cva( @@ -93,22 +95,14 @@ CardImage.displayName = 'CardImage' const cardTextVariants = cva('', { variants: { type: { - h1: 'text-h1 font-bold', - h2: 'text-h2 font-bold', - h3: 'text-h3 font-bold', - h4: 'text-h4 font-bold', - p1: 'text-p1', - p2: 'text-p2', - p3: 'text-p3', - }, - color: { - black: 'text-text-color', - gray: 'text-background-secondary-color', + title: TYPHOGRAPHY.title, + description: TYPHOGRAPHY.description, + date: TYPHOGRAPHY.date, + icon: TYPHOGRAPHY.icon, }, }, defaultVariants: { - type: 'h1', - // color: 'black', + type: 'description', }, }) @@ -118,10 +112,10 @@ export type CardTextProps = React.HTMLAttributes & } const CardText = React.forwardRef( - ({ type, color, className, ...props }, ref) => ( + ({ type, className, ...props }, ref) => (
), diff --git a/src/styles/sizes.ts b/src/styles/sizes.ts index 12bf5dc9..e79f92f7 100644 --- a/src/styles/sizes.ts +++ b/src/styles/sizes.ts @@ -1,33 +1,16 @@ -const SIZE = { - font_24: '24px', - font_20: '20px', - font_14: '14px', - font_12: '12px', - font_10: '10px', - card_lg: '161px', - card_md: '118px', - card_sm: '106px', - card_radius: '6px', -} as const - -const FONT_SIZE = { - h1: SIZE.font_24, - h2: SIZE.font_20, - h3: SIZE.font_14, - h4: SIZE.font_12, - p1: SIZE.font_14, - p2: SIZE.font_12, - p3: SIZE.font_10, +const TYPHOGRAPHY = { + title: 'text-[14px] font-bold', + description: 'text-[12px]', + date: 'text-[10px] text-[#BFBFBF]', + icon: 'text-[10px]', } -const FONT_WEIGHT = {} const HEIGHT = { - 'card-lg': SIZE.card_lg, - 'card-md': SIZE.card_md, - 'card-sm': SIZE.card_sm, + 'card-lg': '161px', + 'card-md': '118px', + 'card-sm': '106px', } const BORDER_RADIUS = { - card: SIZE.card_radius, + card: '6px', } -export default SIZE -export { FONT_SIZE, FONT_WEIGHT, HEIGHT, BORDER_RADIUS } +export { TYPHOGRAPHY, HEIGHT, BORDER_RADIUS } diff --git a/tailwind.config.js b/tailwind.config.js index e4220549..c88f30c5 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,11 +1,6 @@ const { createThemes } = require('tw-colors') const { LIGHT_THEMES, DARK_THEMES } = require('./src/styles/colors') -const { - HEIGHT, - FONT_SIZE, - FONT_WEIGHT, - BORDER_RADIUS, -} = require('./src/styles/sizes') +const { HEIGHT, BORDER_RADIUS } = require('./src/styles/sizes') /** @type {import('tailwindcss').Config} */ module.exports = { @@ -26,15 +21,6 @@ module.exports = { 'gradient-secondary': 'linear-gradient(to right, #7C54D1 0%, #534CD0 100%)', }), - fontSize: { - ...FONT_SIZE, - }, - fontWeight: { - ...FONT_WEIGHT, - }, - colors: { - ...LIGHT_THEMES, - }, height: { ...HEIGHT, }, From b5eecae5e9133afd7b229613acc8c4742b4551fa Mon Sep 17 00:00:00 2001 From: juyeon-park Date: Wed, 1 Nov 2023 14:32:20 +0900 Subject: [PATCH 10/11] =?UTF-8?q?:tada:=20Tab=20CSS=20=ED=94=84=EB=A1=9C?= =?UTF-8?q?=EC=A0=9D=ED=8A=B8=EC=97=90=20=EB=A7=9E=EA=B2=8C=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 --- src/components/ui/Tabs/Tabs.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ui/Tabs/Tabs.tsx b/src/components/ui/Tabs/Tabs.tsx index 327f3bc0..51d0343d 100644 --- a/src/components/ui/Tabs/Tabs.tsx +++ b/src/components/ui/Tabs/Tabs.tsx @@ -13,7 +13,7 @@ const TabsList = React.forwardRef< Date: Wed, 1 Nov 2023 16:02:50 +0900 Subject: [PATCH 11/11] =?UTF-8?q?:sparkles:=20margin=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/@authModal/(...)login/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/@authModal/(...)login/page.tsx b/src/app/@authModal/(...)login/page.tsx index 2ae20e96..b37b2f02 100644 --- a/src/app/@authModal/(...)login/page.tsx +++ b/src/app/@authModal/(...)login/page.tsx @@ -19,7 +19,7 @@ const LoginModalPage: FunctionComponent = () => { }} > -
+