From 7fe2d60b506f8cd246ab3e6f414159ed92cff166 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=8B=A0=EC=84=9C=EB=A6=AC=ED=8B=B0=EC=BD=94=EB=8D=94?= <85999976+jisung24@users.noreply.github.com> Date: Fri, 27 Oct 2023 18:31:18 +0900 Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=ED=95=84=EC=9A=94=EC=97=86?= =?UTF-8?q?=EB=8A=94=20import=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 1 - .../common/button/Button.stories.tsx | 2 +- .../common/profile/Profile.stories.tsx | 43 +++++++++++++++++++ src/components/common/profile/Profile.tsx | 34 +++++++++++++++ src/components/common/profile/ProfileType.ts | 8 ++++ src/components/common/profile/constants.ts | 8 ++++ 6 files changed, 94 insertions(+), 2 deletions(-) create mode 100644 src/components/common/profile/Profile.stories.tsx create mode 100644 src/components/common/profile/Profile.tsx create mode 100644 src/components/common/profile/ProfileType.ts create mode 100644 src/components/common/profile/constants.ts diff --git a/src/App.tsx b/src/App.tsx index 8fca0e3e..17d52ab8 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,3 @@ -import Button from './components/common/button/Button' import './styles/index.css' function App() { diff --git a/src/components/common/button/Button.stories.tsx b/src/components/common/button/Button.stories.tsx index cfd10780..68956845 100644 --- a/src/components/common/button/Button.stories.tsx +++ b/src/components/common/button/Button.stories.tsx @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from '@storybook/react' import Button from './Button' const meta = { - title: 'Component/Button', + title: 'Components/Button', component: Button, parameters: { layout: 'centered' diff --git a/src/components/common/profile/Profile.stories.tsx b/src/components/common/profile/Profile.stories.tsx new file mode 100644 index 00000000..358c6657 --- /dev/null +++ b/src/components/common/profile/Profile.stories.tsx @@ -0,0 +1,43 @@ +import type { Meta, StoryObj } from '@storybook/react' +import Profile from './Profile' +const meta = { + title: 'Component/Profile', + component: Profile, + parameters: { + layout: 'centered' + }, + tags: ['autodocs'], + argTypes: { + imageSize: { + control: 'select', + options: ['w-[150px] h-[150px]', 'w-[92px] h-[92px]', 'w-[70px] h-[70px]'] + } + } +} satisfies Meta + +export default meta +type Story = StoryObj + +export const LargeProfile: Story = { + args: { + imageSize: 'L', + canEdit: true, + onClick: () => alert('l size 프로필 변경') + } +} + +export const MediumProfile: Story = { + args: { + imageSize: 'M', + canEdit: false, + onClick: () => alert('l size 프로필 변경') + } +} + +export const SmallProfile: Story = { + args: { + imageSize: 'S', + canEdit: true, + onClick: () => alert('s size 프로필 변경') + } +} diff --git a/src/components/common/profile/Profile.tsx b/src/components/common/profile/Profile.tsx new file mode 100644 index 00000000..1aa03660 --- /dev/null +++ b/src/components/common/profile/Profile.tsx @@ -0,0 +1,34 @@ +import type { ProfileImageProps } from './ProfileType' +import { PROFILE_SIZE, PROFILE_BORDER_COLOR } from './constants' + +const Profile = ({ + imageSize, + imageUrl = 'https://chanwookim.me/agumon-dday/agumon.png', + canEdit = false, + onClick +}: ProfileImageProps) => { + return ( +
+ {'profile +
+ ) +} + +export default Profile diff --git a/src/components/common/profile/ProfileType.ts b/src/components/common/profile/ProfileType.ts new file mode 100644 index 00000000..e068f4a8 --- /dev/null +++ b/src/components/common/profile/ProfileType.ts @@ -0,0 +1,8 @@ +type ProfileImageType = 'S' | 'M' | 'L' + +export interface ProfileImageProps { + imageSize: ProfileImageType + imageUrl?: string + canEdit?: boolean + onClick?: () => void +} diff --git a/src/components/common/profile/constants.ts b/src/components/common/profile/constants.ts new file mode 100644 index 00000000..cfabe6a6 --- /dev/null +++ b/src/components/common/profile/constants.ts @@ -0,0 +1,8 @@ +export const PROFILE_SIZE = { + L: 'w-[150px] h-[150px]', + M: 'w-[92px] h-[92px]', + S: 'w-[70px] h-[70px]' +} +export const PROFILE_BORDER_COLOR = { + black500: 'border-black-500' +} From d0a92b90b0ada06fc74428ede23e3a6d501db984 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=8B=A0=EC=84=9C=EB=A6=AC=ED=8B=B0=EC=BD=94=EB=8D=94?= <85999976+jisung24@users.noreply.github.com> Date: Fri, 27 Oct 2023 18:35:42 +0900 Subject: [PATCH 2/6] =?UTF-8?q?feat:=20storybook=20=EC=A0=80=EC=9E=A5=20?= =?UTF-8?q?=ED=8F=B4=EB=8D=94=EA=B2=BD=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/components/common/profile/Profile.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/profile/Profile.stories.tsx b/src/components/common/profile/Profile.stories.tsx index 358c6657..7cedc010 100644 --- a/src/components/common/profile/Profile.stories.tsx +++ b/src/components/common/profile/Profile.stories.tsx @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from '@storybook/react' import Profile from './Profile' const meta = { - title: 'Component/Profile', + title: 'Components/Profile', component: Profile, parameters: { layout: 'centered' From 7eb1ec1ad20097bade78980b811ec1c80145e351 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=8B=A0=EC=84=9C=EB=A6=AC=ED=8B=B0=EC=BD=94=EB=8D=94?= <85999976+jisung24@users.noreply.github.com> Date: Fri, 27 Oct 2023 18:46:07 +0900 Subject: [PATCH 3/6] =?UTF-8?q?feat:=20=EC=8A=A4=ED=86=A0=EB=A6=AC?= =?UTF-8?q?=EB=B6=81=20=EC=98=B5=EC=85=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/profile/Profile.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/profile/Profile.stories.tsx b/src/components/common/profile/Profile.stories.tsx index 7cedc010..21515c89 100644 --- a/src/components/common/profile/Profile.stories.tsx +++ b/src/components/common/profile/Profile.stories.tsx @@ -10,7 +10,7 @@ const meta = { argTypes: { imageSize: { control: 'select', - options: ['w-[150px] h-[150px]', 'w-[92px] h-[92px]', 'w-[70px] h-[70px]'] + options: ['S', 'M', 'L'] } } } satisfies Meta From d00f6a043d90f2257810b712d76c2162bb4751f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=8B=A0=EC=84=9C=EB=A6=AC=ED=8B=B0=EC=BD=94=EB=8D=94?= <85999976+jisung24@users.noreply.github.com> Date: Fri, 27 Oct 2023 18:46:25 +0900 Subject: [PATCH 4/6] =?UTF-8?q?feat:=20canEdit=EC=9D=BC=20=EB=95=8C=20?= =?UTF-8?q?=EC=BB=A4=EC=84=9C=20pointer=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/profile/Profile.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/profile/Profile.tsx b/src/components/common/profile/Profile.tsx index 1aa03660..67424479 100644 --- a/src/components/common/profile/Profile.tsx +++ b/src/components/common/profile/Profile.tsx @@ -9,7 +9,7 @@ const Profile = ({ }: ProfileImageProps) => { return (
Date: Mon, 30 Oct 2023 14:45:49 +0900 Subject: [PATCH 5/6] =?UTF-8?q?feat:=20onClick=EB=82=B4=EB=B6=80=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 --- src/components/common/profile/Profile.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/common/profile/Profile.tsx b/src/components/common/profile/Profile.tsx index 67424479..a6eaf241 100644 --- a/src/components/common/profile/Profile.tsx +++ b/src/components/common/profile/Profile.tsx @@ -4,8 +4,7 @@ import { PROFILE_SIZE, PROFILE_BORDER_COLOR } from './constants' const Profile = ({ imageSize, imageUrl = 'https://chanwookim.me/agumon-dday/agumon.png', - canEdit = false, - onClick + canEdit = false }: ProfileImageProps) => { return (
{ + alert('onClick') + } + : undefined + } src={imageUrl} alt={'profile photo'} className={'absolute top-0 left-0 w-[100%] h-[100%]'} From d074360cbb9bfc79b318734dbf16f172ff4e7e0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=8B=A0=EC=84=9C=EB=A6=AC=ED=8B=B0=EC=BD=94=EB=8D=94?= <85999976+jisung24@users.noreply.github.com> Date: Mon, 30 Oct 2023 16:41:53 +0900 Subject: [PATCH 6/6] =?UTF-8?q?feat:=20onClick=20=EB=82=B4=EB=B6=80?= =?UTF-8?q?=EB=8F=99=EC=9E=91=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/profile/Profile.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/profile/Profile.tsx b/src/components/common/profile/Profile.tsx index a6eaf241..aad79b9b 100644 --- a/src/components/common/profile/Profile.tsx +++ b/src/components/common/profile/Profile.tsx @@ -24,7 +24,7 @@ const Profile = ({ onClick={ canEdit ? () => { - alert('onClick') + alert('프로필 바꾸는 기능!') } : undefined }