From 43e0e3090fb2a8835c5db0adaea256a0e16478b2 Mon Sep 17 00:00:00 2001 From: deun Date: Thu, 28 Nov 2024 11:11:38 +0900 Subject: [PATCH 1/5] =?UTF-8?q?refactor:=20QuestionCard=20=EA=B3=B5?= =?UTF-8?q?=ED=86=B5=20=EC=8A=A4=ED=83=80=EC=9D=BC=20mixin=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EB=B6=84=EB=A6=AC=20(#140)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../_ui/question-card/card-mixins.scss | 40 +++++++++++++++++++ .../_ui/question-card/styles.module.scss | 25 ++++-------- 2 files changed, 48 insertions(+), 17 deletions(-) create mode 100644 app/(dashboard)/my/questions/_ui/question-card/card-mixins.scss diff --git a/app/(dashboard)/my/questions/_ui/question-card/card-mixins.scss b/app/(dashboard)/my/questions/_ui/question-card/card-mixins.scss new file mode 100644 index 00000000..a3f373a3 --- /dev/null +++ b/app/(dashboard)/my/questions/_ui/question-card/card-mixins.scss @@ -0,0 +1,40 @@ +@mixin card-base { + padding: 24px 40px 16px; + border-radius: 8px; + background-color: $color-white; +} + +@mixin card-subtitle { + @include typo-b2; + color: $color-orange-600; +} + +@mixin card-created-at { + @include typo-b3; + color: $color-gray-400; +} + +@mixin card-top { + display: flex; + align-items: center; + justify-content: space-between; +} + +@mixin card-title { + margin: 12px 0 8px; + @include typo-h4; +} + +@mixin card-bottom { + display: flex; + align-items: center; + justify-content: space-between; +} + +@mixin avatar-group { + display: flex; + align-items: center; + gap: 16px; + color: $color-gray-600; + @include typo-b3; +} diff --git a/app/(dashboard)/my/questions/_ui/question-card/styles.module.scss b/app/(dashboard)/my/questions/_ui/question-card/styles.module.scss index 8b0c70b5..68caf223 100644 --- a/app/(dashboard)/my/questions/_ui/question-card/styles.module.scss +++ b/app/(dashboard)/my/questions/_ui/question-card/styles.module.scss @@ -1,7 +1,7 @@ +@import './card-mixins.scss'; + .card-container { - padding: 24px 40px 16px; - border-radius: 8px; - background-color: $color-white; + @include card-base; } .top-wrapper { @@ -10,19 +10,16 @@ justify-content: space-between; .strategy-name { - @include typo-b2; - color: $color-orange-600; + @include card-subtitle; } .created-at { - @include typo-b3; - color: $color-gray-400; + @include card-created-at; } } .title { - margin: 12px 0 8px; - @include typo-h4; + @include card-title; } .contents { @@ -33,15 +30,9 @@ } .bottom-wrapper { - display: flex; - align-items: center; - justify-content: space-between; + @include card-bottom; } .avatar-wrapper { - display: flex; - align-items: center; - gap: 16px; - color: $color-gray-600; - @include typo-b3; + @include avatar-group; } From 40c11bf5281f0e89d87ee28041304091c2ac0752 Mon Sep 17 00:00:00 2001 From: deun Date: Thu, 28 Nov 2024 11:13:26 +0900 Subject: [PATCH 2/5] =?UTF-8?q?refactor:=20QuestionCard=20=EA=B3=B5?= =?UTF-8?q?=ED=86=B5=20Props=20=EB=B6=84=EB=A6=AC=20(#140)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/(dashboard)/my/questions/_ui/question-card/index.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/app/(dashboard)/my/questions/_ui/question-card/index.tsx b/app/(dashboard)/my/questions/_ui/question-card/index.tsx index 396928a0..18addfdb 100644 --- a/app/(dashboard)/my/questions/_ui/question-card/index.tsx +++ b/app/(dashboard)/my/questions/_ui/question-card/index.tsx @@ -9,13 +9,16 @@ import styles from './styles.module.scss' const cx = classNames.bind(styles) -interface Props { - strategyName: string - title: string +export interface QuestionCardProps { contents: string nickname: string profileImage?: string createdAt: string +} + +interface Props extends QuestionCardProps { + strategyName: string + title: string status: QuestionStatusType } From cc6c8033507fb609de9b4a2b3dbdf0dffee5498f Mon Sep 17 00:00:00 2001 From: deun Date: Thu, 28 Nov 2024 12:08:03 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20QuestionDetailCard=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80=20(#140)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../_ui/question-detail-card/index.tsx | 64 +++++++++++++++++++ .../question-detail-card/styles.module.scss | 54 ++++++++++++++++ 2 files changed, 118 insertions(+) create mode 100644 app/(dashboard)/my/questions/[questionId]/_ui/question-detail-card/index.tsx create mode 100644 app/(dashboard)/my/questions/[questionId]/_ui/question-detail-card/styles.module.scss diff --git a/app/(dashboard)/my/questions/[questionId]/_ui/question-detail-card/index.tsx b/app/(dashboard)/my/questions/[questionId]/_ui/question-detail-card/index.tsx new file mode 100644 index 00000000..6f56a913 --- /dev/null +++ b/app/(dashboard)/my/questions/[questionId]/_ui/question-detail-card/index.tsx @@ -0,0 +1,64 @@ +import classNames from 'classnames/bind' + +import { QuestionStatusType } from '@/shared/types/questions' +import Avatar from '@/shared/ui/avatar' +import Label from '@/shared/ui/label' +import { formatDateTime } from '@/shared/utils/format' + +import { QuestionCardProps } from '../../../_ui/question-card' +import styles from './styles.module.scss' + +const cx = classNames.bind(styles) + +type QuestionDetailCardType = 'question' | 'answer' + +interface Props extends QuestionCardProps { + type?: QuestionDetailCardType + strategyName?: string + title?: string + status?: QuestionStatusType + isAuthor: boolean + onDelete?: () => void +} + +const QuestionDetailCard = ({ + profileImage, + nickname, + contents, + type = 'question', + status, + strategyName, + title = '답변', + createdAt, + isAuthor, + onDelete, +}: Props) => { + return ( +
+
+ {type === 'question' && ( +
+ {strategyName} + +
+ )} +

{title}

+
+
+ + {nickname} + ㅣ {formatDateTime(createdAt)} +
+ {isAuthor && ( + + )} +
+
+
{contents}
+
+ ) +} + +export default QuestionDetailCard diff --git a/app/(dashboard)/my/questions/[questionId]/_ui/question-detail-card/styles.module.scss b/app/(dashboard)/my/questions/[questionId]/_ui/question-detail-card/styles.module.scss new file mode 100644 index 00000000..67f6e6b3 --- /dev/null +++ b/app/(dashboard)/my/questions/[questionId]/_ui/question-detail-card/styles.module.scss @@ -0,0 +1,54 @@ +@import '../../../_ui/question-card/card-mixins.scss'; + +.card-container { + @include card-base; + padding: 35px 40px; +} + +.top-wrapper { + display: flex; + align-items: center; + justify-content: space-between; + + .strategy-name { + @include card-subtitle; + } +} + +.title { + @include card-title; + margin-bottom: 18px; + + &.answer { + @include typo-b1; + } +} + +.bottom-wrapper { + display: flex; + align-items: center; + justify-content: space-between; + padding-bottom: 12px; + margin-bottom: 24px; + border-bottom: 1px solid $color-gray-300; + + .delete-button { + @include typo-c1; + background-color: transparent; + } +} + +.avatar-wrapper { + @include avatar-group; + + .created-at { + margin-left: -8px; + color: $color-gray-400; + } +} + +.card-contents { + color: $color-gray-600; + @include typo-b3; + line-height: 140%; +} From 82d3039aee69e78edf8ca317da1549ce6cc66d04 Mon Sep 17 00:00:00 2001 From: deun Date: Thu, 28 Nov 2024 12:59:28 +0900 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20QuestionDetailCard=20=EC=8A=A4?= =?UTF-8?q?=ED=86=A0=EB=A6=AC=EB=B6=81=20=EC=B6=94=EA=B0=80=20(#140)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../question-detail-card.stories.tsx | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 app/(dashboard)/my/questions/[questionId]/_ui/question-detail-card/question-detail-card.stories.tsx diff --git a/app/(dashboard)/my/questions/[questionId]/_ui/question-detail-card/question-detail-card.stories.tsx b/app/(dashboard)/my/questions/[questionId]/_ui/question-detail-card/question-detail-card.stories.tsx new file mode 100644 index 00000000..f778b621 --- /dev/null +++ b/app/(dashboard)/my/questions/[questionId]/_ui/question-detail-card/question-detail-card.stories.tsx @@ -0,0 +1,57 @@ +import { Meta, StoryFn } from '@storybook/react' + +import QuestionDetailCard from '.' + +const meta: Meta = { + title: 'Components/QuestionDetailCard', + component: QuestionDetailCard, + tags: ['autodocs'], +} + +const Template: StoryFn = (args) => ( +
+ +
+) + +export const Question = Template.bind({}) +Question.args = { + type: 'question', + strategyName: '엄청난 전략', + title: '미국발 경제악화가 한국 증시에 미치는 영향은 무엇인가요?', + contents: + '안녕하세요. 주식투자를 시작하려고 하는데 미국의 경제 상황이 좋지 않다고 들었습니다. 이런 상황에서 한국 증시는 어떤 영향을 받을까요? 구체적인 설명 부탁드립니다.', + nickname: '투자초보', + profileImage: '', + createdAt: '2024-11-03T15:00:00', + status: '답변 대기', + isAuthor: false, + onDelete: () => alert('삭제 버튼 클릭'), +} + +export const QuestionWithDeleteButton = Template.bind({}) +QuestionWithDeleteButton.args = { + ...Question.args, + isAuthor: true, +} + +export const Answer = Template.bind({}) +Answer.args = { + type: 'answer', + title: '답변', + contents: + '안녕하세요. 문의하신 내용에 대해 답변드리겠습니다. 미국과 한국 증시는 높은 상관관계를 보이고 있어 미국의 경제 상황이 한국 증시에 큰 영향을 미칠 수 있습니다. 구체적으로는...', + nickname: '전문가', + profileImage: '', + createdAt: '2024-11-03T16:30:00', + isAuthor: false, + onDelete: () => alert('삭제 버튼 클릭'), +} + +export const AnswerWithDeleteButton = Template.bind({}) +AnswerWithDeleteButton.args = { + ...Answer.args, + isAuthor: true, +} + +export default meta From be9553c0a5ce3a4c753e86e50ffb53ebc971a7a2 Mon Sep 17 00:00:00 2001 From: deun Date: Thu, 28 Nov 2024 13:38:42 +0900 Subject: [PATCH 5/5] =?UTF-8?q?feat:=20use=20client=20=EC=B6=94=EA=B0=80?= =?UTF-8?q?=20(#140)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../questions/[questionId]/_ui/question-detail-card/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/(dashboard)/my/questions/[questionId]/_ui/question-detail-card/index.tsx b/app/(dashboard)/my/questions/[questionId]/_ui/question-detail-card/index.tsx index 6f56a913..fc93d249 100644 --- a/app/(dashboard)/my/questions/[questionId]/_ui/question-detail-card/index.tsx +++ b/app/(dashboard)/my/questions/[questionId]/_ui/question-detail-card/index.tsx @@ -1,3 +1,5 @@ +'use client' + import classNames from 'classnames/bind' import { QuestionStatusType } from '@/shared/types/questions'