From 95702523ad77df89605590a94d7b0b809736879e Mon Sep 17 00:00:00 2001 From: deun Date: Wed, 27 Nov 2024 15:20:48 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20Label=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80=20(#128)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- shared/ui/label/index.tsx | 19 +++++++++++++++++++ shared/ui/label/styles.module.scss | 12 ++++++++++++ 2 files changed, 31 insertions(+) create mode 100644 shared/ui/label/index.tsx create mode 100644 shared/ui/label/styles.module.scss diff --git a/shared/ui/label/index.tsx b/shared/ui/label/index.tsx new file mode 100644 index 00000000..6f54541d --- /dev/null +++ b/shared/ui/label/index.tsx @@ -0,0 +1,19 @@ +import classNames from 'classnames/bind' + +import styles from './styles.module.scss' + +const cx = classNames.bind(styles) + +export type ColorType = 'orange' | 'indigo' + +interface Props { + color?: ColorType + className?: string + children: React.ReactNode +} + +const Label = ({ color = 'indigo', className, children }: Props) => { + return {children} +} + +export default Label diff --git a/shared/ui/label/styles.module.scss b/shared/ui/label/styles.module.scss new file mode 100644 index 00000000..031f45dc --- /dev/null +++ b/shared/ui/label/styles.module.scss @@ -0,0 +1,12 @@ +.label-container { + padding: 7px 16px; + border: 1px solid $color-indigo; + border-radius: 4px; + color: $color-indigo; + @include typo-c1; + + &.orange { + border-color: $color-orange-600; + color: $color-orange-600; + } +} From 067502e3ecdae64778ac160a80e7b9d64ba196b0 Mon Sep 17 00:00:00 2001 From: deun Date: Wed, 27 Nov 2024 20:00:49 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20QuestionCard=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80=20(#128)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../my/questions/_ui/question-card/index.tsx | 50 +++++++++++++++++++ .../_ui/question-card/styles.module.scss | 47 +++++++++++++++++ shared/types/questions.ts | 1 + shared/utils/format.ts | 15 ++++++ 4 files changed, 113 insertions(+) create mode 100644 app/(dashboard)/my/questions/_ui/question-card/index.tsx create mode 100644 app/(dashboard)/my/questions/_ui/question-card/styles.module.scss create mode 100644 shared/types/questions.ts create mode 100644 shared/utils/format.ts diff --git a/app/(dashboard)/my/questions/_ui/question-card/index.tsx b/app/(dashboard)/my/questions/_ui/question-card/index.tsx new file mode 100644 index 00000000..396928a0 --- /dev/null +++ b/app/(dashboard)/my/questions/_ui/question-card/index.tsx @@ -0,0 +1,50 @@ +import classNames from 'classnames/bind' + +import type { QuestionStatusType } from '@/shared/types/questions' +import Avatar from '@/shared/ui/avatar' +import Label from '@/shared/ui/label' +import { formatDateTime } from '@/shared/utils/format' + +import styles from './styles.module.scss' + +const cx = classNames.bind(styles) + +interface Props { + strategyName: string + title: string + contents: string + nickname: string + profileImage?: string + createdAt: string + status: QuestionStatusType +} + +const QuestionCard = ({ + strategyName, + title, + contents, + nickname, + profileImage, + createdAt, + status, +}: Props) => { + return ( +
+
+ {strategyName} + {formatDateTime(createdAt)} +
+

{title}

+

{contents}

+
+
+ + {nickname} +
+ +
+
+ ) +} + +export default QuestionCard diff --git a/app/(dashboard)/my/questions/_ui/question-card/styles.module.scss b/app/(dashboard)/my/questions/_ui/question-card/styles.module.scss new file mode 100644 index 00000000..8b0c70b5 --- /dev/null +++ b/app/(dashboard)/my/questions/_ui/question-card/styles.module.scss @@ -0,0 +1,47 @@ +.card-container { + padding: 24px 40px 16px; + border-radius: 8px; + background-color: $color-white; +} + +.top-wrapper { + display: flex; + align-items: center; + justify-content: space-between; + + .strategy-name { + @include typo-b2; + color: $color-orange-600; + } + + .created-at { + @include typo-b3; + color: $color-gray-400; + } +} + +.title { + margin: 12px 0 8px; + @include typo-h4; +} + +.contents { + margin-bottom: 18px; + color: $color-gray-600; + @include typo-b2; + @include ellipsis(1); +} + +.bottom-wrapper { + display: flex; + align-items: center; + justify-content: space-between; +} + +.avatar-wrapper { + display: flex; + align-items: center; + gap: 16px; + color: $color-gray-600; + @include typo-b3; +} diff --git a/shared/types/questions.ts b/shared/types/questions.ts new file mode 100644 index 00000000..a77df7bd --- /dev/null +++ b/shared/types/questions.ts @@ -0,0 +1 @@ +export type QuestionStatusType = '답변 대기' | '답변 완료' diff --git a/shared/utils/format.ts b/shared/utils/format.ts new file mode 100644 index 00000000..a6b11d19 --- /dev/null +++ b/shared/utils/format.ts @@ -0,0 +1,15 @@ +export const formatDateTime = (dateString: string) => { + const date = new Date(dateString) + + if (isNaN(date.getTime())) { + return dateString + } + + const year = date.getFullYear() + const month = String(date.getMonth() + 1).padStart(2, '0') + const day = String(date.getDate()).padStart(2, '0') + const hours = String(date.getHours()).padStart(2, '0') + const minutes = String(date.getMinutes()).padStart(2, '0') + + return `${year}.${month}.${day} ${hours}:${minutes}` +} From 4ff01d483cde0c9f9eddce13782a4fcf24d9a989 Mon Sep 17 00:00:00 2001 From: deun Date: Wed, 27 Nov 2024 20:01:31 +0900 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20QuestionCard=20=EC=8A=A4=ED=86=A0?= =?UTF-8?q?=EB=A6=AC=EB=B6=81=20=EC=B6=94=EA=B0=80=20(#128)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../question-card/question-card.stories.tsx | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 app/(dashboard)/my/questions/_ui/question-card/question-card.stories.tsx diff --git a/app/(dashboard)/my/questions/_ui/question-card/question-card.stories.tsx b/app/(dashboard)/my/questions/_ui/question-card/question-card.stories.tsx new file mode 100644 index 00000000..a0f077ed --- /dev/null +++ b/app/(dashboard)/my/questions/_ui/question-card/question-card.stories.tsx @@ -0,0 +1,35 @@ +import { Meta, StoryFn } from '@storybook/react' + +import QuestionCard from '.' + +const meta: Meta = { + title: 'Components/QuestionCard', + component: QuestionCard, + tags: ['autodocs'], +} + +const Template: StoryFn = (args) => ( +
+ +
+) + +export const Default = Template.bind({}) +Default.args = { + strategyName: '전략 이름', + title: '미국발 경제악화가 한국 증시에 미치는 영향은 무엇인가요?', + contents: + '안녕하세요 주식투자를 해보려고 하는데요 어쩌구... 저쩌구..........안녕하세요 주식투자를 해보려고 하는데요 어쩌구... 저쩌구..........', + nickname: '투자할래요', + profileImage: '', + createdAt: '2024-11-03T15:00:00', + status: '답변 대기', +} + +export const Answered = Template.bind({}) +Answered.args = { + ...Default.args, + status: '답변 완료', +} + +export default meta