From 4e369fc89e5c4694ee53526a4a94c1cb54f399de Mon Sep 17 00:00:00 2001 From: constantly-dev Date: Tue, 24 Feb 2026 18:14:43 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20jobpins=20layout=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84=20(mock=20data=20=EC=82=AC=EC=9A=A9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/client/src/pages/jobPins/JobPins.tsx | 62 +++++++++++++---------- 1 file changed, 34 insertions(+), 28 deletions(-) diff --git a/apps/client/src/pages/jobPins/JobPins.tsx b/apps/client/src/pages/jobPins/JobPins.tsx index 326b7f9f..3022cd3e 100644 --- a/apps/client/src/pages/jobPins/JobPins.tsx +++ b/apps/client/src/pages/jobPins/JobPins.tsx @@ -1,36 +1,42 @@ -import { Icon } from '@pinback/design-system/icons'; -import { Balloon } from '@shared/components/balloon/Balloon'; +import { Card } from '@pinback/design-system/ui'; +import Footer from '@pages/myBookmark/components/footer/Footer'; + +const MOCK_JOB_PINS = Array.from({ length: 30 }, (_, index) => ({ + id: index + 1, + title: '텍스트텍스트텍스트텍스트텍스트텍스트텍스트', + content: '서브텍스트입니다서브텍스트입니다서브텍스트입니다서브텍스트입니다', + category: '카테고리명', + categoryColor: 'COLOR7' as const, + date: '2025.02.24', +})); const JobPins = () => { return ( -
- {' '} - -
치삐가 방금
- -
도토리 1개를 모았어요!
- - alert('닫힘')}> -
치삐가 방금
+
+
+

관심 직무 핀

+

기획자

+
+

+ 같은 직무의 사람들이 저장한 아티클을 살펴봐요. 선택한 직무를 기준으로 + 최신 핀이 업데이트 돼요! +

-
도토리 1개를 모았어요!
- - - -
도토리 1개를 모았어요!
- - -
- {/* 캐릭터 이미지 */} - +
+ {MOCK_JOB_PINS.map((pin) => ( + + ))} +
- {/* 텍스트 영역 */} -
-
치삐가 방금
-
도토리 1개를 모았어요!
-
-
- +
); }; From edd1bc83a34ba89e9286d48054340611821cecfc Mon Sep 17 00:00:00 2001 From: constantly-dev Date: Tue, 24 Feb 2026 19:24:38 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20memo(save)=20icon=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 --- packages/design-system/src/icons/iconNames.ts | 1 + packages/design-system/src/icons/source/ic_memo.svg | 7 +++++++ 2 files changed, 8 insertions(+) create mode 100644 packages/design-system/src/icons/source/ic_memo.svg diff --git a/packages/design-system/src/icons/iconNames.ts b/packages/design-system/src/icons/iconNames.ts index 894a3353..df18bf77 100644 --- a/packages/design-system/src/icons/iconNames.ts +++ b/packages/design-system/src/icons/iconNames.ts @@ -18,6 +18,7 @@ export const iconNames = [ 'ic_details_disable', 'ic_extension', 'ic_info', + 'ic_memo', 'ic_pin', 'ic_pin_active', 'ic_pin_disable', diff --git a/packages/design-system/src/icons/source/ic_memo.svg b/packages/design-system/src/icons/source/ic_memo.svg new file mode 100644 index 00000000..3fab4c71 --- /dev/null +++ b/packages/design-system/src/icons/source/ic_memo.svg @@ -0,0 +1,7 @@ + + + + + + + From 11921e50979de988159bf25fb2a95c8fa240afc5 Mon Sep 17 00:00:00 2001 From: constantly-dev Date: Tue, 24 Feb 2026 19:25:13 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20mybookmark=20card=20save=20variant?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/card/Card.tsx | 14 +++++- .../src/components/card/MyBookmarkCard.tsx | 45 +++++++++++++------ 2 files changed, 44 insertions(+), 15 deletions(-) diff --git a/packages/design-system/src/components/card/Card.tsx b/packages/design-system/src/components/card/Card.tsx index 836ebd66..4cfdb28d 100644 --- a/packages/design-system/src/components/card/Card.tsx +++ b/packages/design-system/src/components/card/Card.tsx @@ -17,13 +17,23 @@ type RemindProps = BaseProps & { date?: never; }; -type BookmarkProps = BaseProps & { +type BookmarkDefaultProps = BaseProps & { type: 'bookmark'; + variant?: 'default'; date: string; + nickname?: never; timeRemaining?: never; }; -export type CardProps = RemindProps | BookmarkProps; +type BookmarkSaveProps = BaseProps & { + type: 'bookmark'; + variant: 'save'; + nickname: string; + date?: never; + timeRemaining?: never; +}; + +export type CardProps = RemindProps | BookmarkDefaultProps | BookmarkSaveProps; const Card = ( props: CardProps & { diff --git a/packages/design-system/src/components/card/MyBookmarkCard.tsx b/packages/design-system/src/components/card/MyBookmarkCard.tsx index ae0e5061..22a37867 100644 --- a/packages/design-system/src/components/card/MyBookmarkCard.tsx +++ b/packages/design-system/src/components/card/MyBookmarkCard.tsx @@ -1,6 +1,7 @@ import chippiNoImage from '../../assets/chippi_no_image.svg'; import { Icon } from '../../icons'; import Chip, { ChipColor } from '../chip/Chip'; + import BaseCard from './BaseCard'; interface MyBookmarkCardProps { @@ -9,7 +10,9 @@ interface MyBookmarkCardProps { category?: string; categoryColor?: string; imageUrl?: string; - date: string; + variant?: 'default' | 'save'; + date?: string; + nickname?: string; onClick?: () => void; onOptionsClick?: (e: React.MouseEvent) => void; } @@ -20,10 +23,15 @@ const MyBookmarkCard = ({ category, categoryColor, imageUrl, + variant = 'default', date, + nickname, onClick, onOptionsClick, }: MyBookmarkCardProps) => { + const displayNickname = + nickname && nickname.trim().length > 0 ? nickname : '도토리'; + return (
@@ -41,17 +49,19 @@ const MyBookmarkCard = ({

{title}

- + {variant !== 'save' && ( + + )}

@@ -62,7 +72,16 @@ const MyBookmarkCard = ({ )} -

{date}

+ {variant === 'save' ? ( +
+

+ {`(${displayNickname})님의 핀`} +

+ +
+ ) : ( +

{date}

+ )}
); From 96bd7922546324ae90457c79f55604813a7bf6be Mon Sep 17 00:00:00 2001 From: constantly-dev Date: Tue, 24 Feb 2026 19:25:32 +0900 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20card=20storybook=20variant=20save?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/card/Card.stories.tsx | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/packages/design-system/src/components/card/Card.stories.tsx b/packages/design-system/src/components/card/Card.stories.tsx index f6668132..e8e48eda 100644 --- a/packages/design-system/src/components/card/Card.stories.tsx +++ b/packages/design-system/src/components/card/Card.stories.tsx @@ -33,6 +33,15 @@ const meta: Meta = { control: 'text', if: { arg: 'type', eq: 'bookmark' }, }, + variant: { + control: 'inline-radio', + options: ['default', 'save'], + if: { arg: 'type', eq: 'bookmark' }, + }, + nickname: { + control: 'text', + if: { arg: 'variant', eq: 'save' }, + }, }, }; @@ -56,6 +65,7 @@ export const BookMark: Story = { name: 'type: bookmark', args: { type: 'bookmark', + variant: 'default', title: '북마크 카드 타이틀', content: '북마크 컨텐츠 내용입니다.', category: '디자인', @@ -65,6 +75,20 @@ export const BookMark: Story = { }, }; +export const BookMarkSave: Story = { + name: 'type: bookmark (save)', + args: { + type: 'bookmark', + variant: 'save', + title: '북마크 카드 타이틀', + content: '북마크 컨텐츠 내용입니다.', + category: '디자인', + nickname: '하비', + imageUrl: + 'https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?q=80&w=2070&auto=format&fit=crop', + }, +}; + export const LongTextSideBySide: Story = { name: 'case: Long Text', render: () => ( @@ -79,6 +103,7 @@ export const LongTextSideBySide: Story = { /> Date: Tue, 24 Feb 2026 19:25:57 +0900 Subject: [PATCH 5/5] =?UTF-8?q?feat:=20jobPins=20page=20save=20card?= =?UTF-8?q?=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 --- apps/client/src/pages/jobPins/JobPins.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/client/src/pages/jobPins/JobPins.tsx b/apps/client/src/pages/jobPins/JobPins.tsx index 3022cd3e..74347057 100644 --- a/apps/client/src/pages/jobPins/JobPins.tsx +++ b/apps/client/src/pages/jobPins/JobPins.tsx @@ -7,7 +7,8 @@ const MOCK_JOB_PINS = Array.from({ length: 30 }, (_, index) => ({ content: '서브텍스트입니다서브텍스트입니다서브텍스트입니다서브텍스트입니다', category: '카테고리명', categoryColor: 'COLOR7' as const, - date: '2025.02.24', + variant: 'save' as const, + nickname: index % 3 === 0 ? '구글닉네임명' : '', })); const JobPins = () => { @@ -27,11 +28,12 @@ const JobPins = () => { ))}