From 71c3ddb499762b2422083106af2deb49b92b9403 Mon Sep 17 00:00:00 2001 From: juyeon-park Date: Wed, 1 Nov 2023 16:49:14 +0900 Subject: [PATCH 1/4] =?UTF-8?q?:tada:=20=ED=94=84=EB=A1=9C=ED=95=84=20?= =?UTF-8?q?=EC=98=81=EC=97=AD=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=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 --- .../ProfileSection/ProfileSection.stories.tsx | 19 +++++++++++++++ .../ProfileSection/ProfileSection.tsx | 23 +++++++++++++++++++ .../components/ProfileSection/index.tsx | 3 +++ .../(root)/(routes)/items/[itemId]/page.tsx | 19 +++++++++++++++ src/styles/sizes.ts | 1 + 5 files changed, 65 insertions(+) create mode 100644 src/app/(root)/(routes)/items/[itemId]/components/ProfileSection/ProfileSection.stories.tsx create mode 100644 src/app/(root)/(routes)/items/[itemId]/components/ProfileSection/ProfileSection.tsx create mode 100644 src/app/(root)/(routes)/items/[itemId]/components/ProfileSection/index.tsx create mode 100644 src/app/(root)/(routes)/items/[itemId]/page.tsx diff --git a/src/app/(root)/(routes)/items/[itemId]/components/ProfileSection/ProfileSection.stories.tsx b/src/app/(root)/(routes)/items/[itemId]/components/ProfileSection/ProfileSection.stories.tsx new file mode 100644 index 00000000..e162594d --- /dev/null +++ b/src/app/(root)/(routes)/items/[itemId]/components/ProfileSection/ProfileSection.stories.tsx @@ -0,0 +1,19 @@ +import type { Meta, StoryObj } from '@storybook/react' +import ProfileSection from './ProfileSection' + +const meta = { + title: 'ItemPage/ProfileSection', + component: ProfileSection, + tags: ['autodocs'], + argTypes: {}, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Profile: Story = { + args: { userName: '푸바오바오' }, + render: () => { + return + }, +} diff --git a/src/app/(root)/(routes)/items/[itemId]/components/ProfileSection/ProfileSection.tsx b/src/app/(root)/(routes)/items/[itemId]/components/ProfileSection/ProfileSection.tsx new file mode 100644 index 00000000..42efac56 --- /dev/null +++ b/src/app/(root)/(routes)/items/[itemId]/components/ProfileSection/ProfileSection.tsx @@ -0,0 +1,23 @@ +import { Avatar, AvatarImage } from '@/components/ui/Avatar' +import { TYPHOGRAPHY } from '@/styles/sizes' + +type ProfileSectionProps = { + profileImg?: string + userName: string +} + +const ProfileSection = ({ + profileImg = 'https://github.com/shadcn.png', + userName, +}: ProfileSectionProps) => { + return ( +
+ + + +
{userName}
+
+ ) +} + +export default ProfileSection diff --git a/src/app/(root)/(routes)/items/[itemId]/components/ProfileSection/index.tsx b/src/app/(root)/(routes)/items/[itemId]/components/ProfileSection/index.tsx new file mode 100644 index 00000000..65f6769c --- /dev/null +++ b/src/app/(root)/(routes)/items/[itemId]/components/ProfileSection/index.tsx @@ -0,0 +1,3 @@ +import ProfileSection from './ProfileSection' + +export default ProfileSection diff --git a/src/app/(root)/(routes)/items/[itemId]/page.tsx b/src/app/(root)/(routes)/items/[itemId]/page.tsx new file mode 100644 index 00000000..865e53fa --- /dev/null +++ b/src/app/(root)/(routes)/items/[itemId]/page.tsx @@ -0,0 +1,19 @@ +import ProfileSection from './components/ProfileSection' + +type ItemPageProps = { + params: { + itemId: string + } +} + +const ItemPage = ({ params }: ItemPageProps) => { + return ( +
+
이미지 슬라이더 영역
+ +
아이템 상세정보 영역
+
+ ) +} + +export default ItemPage diff --git a/src/styles/sizes.ts b/src/styles/sizes.ts index e79f92f7..1e4dfb51 100644 --- a/src/styles/sizes.ts +++ b/src/styles/sizes.ts @@ -3,6 +3,7 @@ const TYPHOGRAPHY = { description: 'text-[12px]', date: 'text-[10px] text-[#BFBFBF]', icon: 'text-[10px]', + profile: 'text-color text-[12px] font-bold' } const HEIGHT = { 'card-lg': '161px', From 86be8c064e3af0d617e229a2102d09fb2208f3e3 Mon Sep 17 00:00:00 2001 From: juyeon-park Date: Wed, 1 Nov 2023 16:53:42 +0900 Subject: [PATCH 2/4] =?UTF-8?q?:tada:=20=EB=94=94=EC=9E=90=EC=9D=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/(root)/(routes)/items/[itemId]/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/(root)/(routes)/items/[itemId]/page.tsx b/src/app/(root)/(routes)/items/[itemId]/page.tsx index 865e53fa..4bfe0c0e 100644 --- a/src/app/(root)/(routes)/items/[itemId]/page.tsx +++ b/src/app/(root)/(routes)/items/[itemId]/page.tsx @@ -8,7 +8,7 @@ type ItemPageProps = { const ItemPage = ({ params }: ItemPageProps) => { return ( -
+
이미지 슬라이더 영역
아이템 상세정보 영역
From 4cc6ba2557fcb86ddee6df55a72313f189fddea2 Mon Sep 17 00:00:00 2001 From: juyeon-park Date: Thu, 2 Nov 2023 00:45:22 +0900 Subject: [PATCH 3/4] =?UTF-8?q?:tada:=20=EC=BD=94=EB=93=9C=EB=A6=AC?= =?UTF-8?q?=EB=B7=B0=20=EB=B0=98=EC=98=81=20=EB=B0=8F=20=EC=95=84=EB=B0=94?= =?UTF-8?q?=ED=83=80=20=EB=94=94=ED=8F=B4=ED=8A=B8=20=EC=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=80=20=EC=84=A4=EC=A0=95=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ProfileSection/ProfileSection.tsx | 9 +++------ src/app/(root)/(routes)/items/[itemId]/page.tsx | 2 +- src/components/ui/Avatar/Avatar.stories.tsx | 6 +++--- src/components/ui/Avatar/Avatar.tsx | 9 +++++++-- src/constants/image.ts | 4 ++++ 5 files changed, 18 insertions(+), 12 deletions(-) create mode 100644 src/constants/image.ts diff --git a/src/app/(root)/(routes)/items/[itemId]/components/ProfileSection/ProfileSection.tsx b/src/app/(root)/(routes)/items/[itemId]/components/ProfileSection/ProfileSection.tsx index 42efac56..4bed4260 100644 --- a/src/app/(root)/(routes)/items/[itemId]/components/ProfileSection/ProfileSection.tsx +++ b/src/app/(root)/(routes)/items/[itemId]/components/ProfileSection/ProfileSection.tsx @@ -2,18 +2,15 @@ import { Avatar, AvatarImage } from '@/components/ui/Avatar' import { TYPHOGRAPHY } from '@/styles/sizes' type ProfileSectionProps = { - profileImg?: string + profileImg: string | null userName: string } -const ProfileSection = ({ - profileImg = 'https://github.com/shadcn.png', - userName, -}: ProfileSectionProps) => { +const ProfileSection = ({ profileImg, userName }: ProfileSectionProps) => { return (
- +
{userName}
diff --git a/src/app/(root)/(routes)/items/[itemId]/page.tsx b/src/app/(root)/(routes)/items/[itemId]/page.tsx index 4bfe0c0e..138a6d98 100644 --- a/src/app/(root)/(routes)/items/[itemId]/page.tsx +++ b/src/app/(root)/(routes)/items/[itemId]/page.tsx @@ -10,7 +10,7 @@ const ItemPage = ({ params }: ItemPageProps) => { return (
이미지 슬라이더 영역
- +
아이템 상세정보 영역
) diff --git a/src/components/ui/Avatar/Avatar.stories.tsx b/src/components/ui/Avatar/Avatar.stories.tsx index 10fc1ab3..a5e517c1 100644 --- a/src/components/ui/Avatar/Avatar.stories.tsx +++ b/src/components/ui/Avatar/Avatar.stories.tsx @@ -17,15 +17,15 @@ export const Normal: Story = { return ( <> - + NB - + NB - + NB diff --git a/src/components/ui/Avatar/Avatar.tsx b/src/components/ui/Avatar/Avatar.tsx index bf9ed9e7..24bd3e4f 100644 --- a/src/components/ui/Avatar/Avatar.tsx +++ b/src/components/ui/Avatar/Avatar.tsx @@ -3,6 +3,7 @@ import * as React from 'react' import * as AvatarPrimitive from '@radix-ui/react-avatar' import { cva, type VariantProps } from 'class-variance-authority' +import { DEFAULT_PROFILE_IMG } from '@/constants/image' import { cn } from '@/utils' const avatarVariants = cva( @@ -39,11 +40,15 @@ Avatar.displayName = AvatarPrimitive.Root.displayName const AvatarImage = React.forwardRef< React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( + React.ComponentPropsWithoutRef & { + imgUrl: string | null + } +>(({ className, imgUrl, ...props }, ref) => ( (e.currentTarget.src = DEFAULT_PROFILE_IMG)} {...props} /> )) diff --git a/src/constants/image.ts b/src/constants/image.ts new file mode 100644 index 00000000..b5b92bd7 --- /dev/null +++ b/src/constants/image.ts @@ -0,0 +1,4 @@ +const DEFAULT_PROFILE_IMG = 'https://github.com/shadcn.png' +const DEFAULT_ITEM_IMG = ''; + +export {DEFAULT_PROFILE_IMG, DEFAULT_ITEM_IMG} \ No newline at end of file From 6333d57d6cd20ae9f1ee983b5c28527c74bc75f5 Mon Sep 17 00:00:00 2001 From: juyeon-park Date: Thu, 2 Nov 2023 00:57:51 +0900 Subject: [PATCH 4/4] =?UTF-8?q?:bug:=20=EB=B9=8C=EB=93=9C=20=EC=97=90?= =?UTF-8?q?=EB=9F=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ProfileSection/ProfileSection.stories.tsx | 4 ++-- src/constants/image.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/(root)/(routes)/items/[itemId]/components/ProfileSection/ProfileSection.stories.tsx b/src/app/(root)/(routes)/items/[itemId]/components/ProfileSection/ProfileSection.stories.tsx index e162594d..89945104 100644 --- a/src/app/(root)/(routes)/items/[itemId]/components/ProfileSection/ProfileSection.stories.tsx +++ b/src/app/(root)/(routes)/items/[itemId]/components/ProfileSection/ProfileSection.stories.tsx @@ -12,8 +12,8 @@ export default meta type Story = StoryObj export const Profile: Story = { - args: { userName: '푸바오바오' }, + args: { profileImg: null, userName: '푸바오바오' }, render: () => { - return + return }, } diff --git a/src/constants/image.ts b/src/constants/image.ts index b5b92bd7..29b794a8 100644 --- a/src/constants/image.ts +++ b/src/constants/image.ts @@ -1,4 +1,4 @@ const DEFAULT_PROFILE_IMG = 'https://github.com/shadcn.png' const DEFAULT_ITEM_IMG = ''; -export {DEFAULT_PROFILE_IMG, DEFAULT_ITEM_IMG} \ No newline at end of file +export {DEFAULT_PROFILE_IMG, DEFAULT_ITEM_IMG}