From 050d3e466a15c0f28eb6f96938cbddd3fbf0e247 Mon Sep 17 00:00:00 2001 From: oaoong Date: Mon, 30 Oct 2023 15:31:57 +0900 Subject: [PATCH 1/5] =?UTF-8?q?:bug:=20=EC=8A=A4=ED=86=A0=EB=A6=AC?= =?UTF-8?q?=EB=B6=81=20=EB=B0=B0=ED=8F=AC=20=EC=9E=AC=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/chromatic.yml | 19 ++++++++++++------- package.json | 2 +- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index 5ec439b8..97696174 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -1,17 +1,22 @@ -name: 'Chromatic Deployment' - +name: 'Chromatic' on: - # 원하는 브랜치 명으로 바꿔주시면 됩니다. push: branches: ['develop'] jobs: - test: + chromatic-deployment: runs-on: ubuntu-latest steps: - uses: actions/checkout@v1 - - run: yarn - - uses: chromaui/action@v1 + - name: Install dependencies + run: | + npm install -g pnpm + + - name: Install Dependency + run: pnpm install + + - name: Publish to Chromatic + uses: chromaui/action@v1 + with: projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} - token: ${{ secrets.GITHUB_TOKEN }} diff --git a/package.json b/package.json index d5ee5cde..3dcf635a 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "test": "vitest --run", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build", - "chromatic": "npx chromatic --project-token=chpt_00fe989402301dc" + "chromatic": "bash ./scripts/chromatic_publish.sh" }, "dependencies": { "@radix-ui/react-dialog": "^1.0.5", From 969c40396b1303c20fc0396e5be3c9e463068f09 Mon Sep 17 00:00:00 2001 From: oaoong Date: Mon, 30 Oct 2023 15:56:54 +0900 Subject: [PATCH 2/5] =?UTF-8?q?:sparkles:=20=EC=8A=A4=ED=86=A0=EB=A6=AC?= =?UTF-8?q?=EB=B6=81=20=EB=B0=B0=ED=8F=AC=20=EC=84=A4=EC=A0=95=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/chromatic.yml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index 97696174..2ea3545a 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -1,6 +1,7 @@ name: 'Chromatic' + on: - push: + pull_request: branches: ['develop'] jobs: From 477ac22cc4475d4b1a58c062f8f8542a739358e9 Mon Sep 17 00:00:00 2001 From: juyeon-park Date: Mon, 30 Oct 2023 15:58:31 +0900 Subject: [PATCH 3/5] =?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 4/5] =?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 5/5] =?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