[Feat] 문의내역 QuestionCard 컴포넌트 추가

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 (
+    <div className={cx('card-container')}>
+      <div className={cx('top-wrapper')}>
+        <strong className={cx('strategy-name')}>{strategyName}</strong>
+        <span className={cx('created-at')}>{formatDateTime(createdAt)}</span>
+      </div>
+      <h2 className={cx('title')}>{title}</h2>
+      <p className={cx('contents')}>{contents}</p>
+      <div className={cx('bottom-wrapper')}>
+        <div className={cx('avatar-wrapper')}>
+          <Avatar src={profileImage} size="medium" />
+          <span>{nickname}</span>
+        </div>
+        <Label color={status === '답변 완료' ? 'indigo' : 'orange'}>{status}</Label>
+      </div>
+    </div>
+  )
+}
+
+export default QuestionCard

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<typeof QuestionCard> = (args) => (
+  <div style={{ width: '900px', padding: '20px', backgroundColor: '#f8f9fa' }}>
+    <QuestionCard {...args} />
+  </div>
+)
+
+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

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;
+}

shared/types/questions.ts

@@ -0,0 +1 @@
+export type QuestionStatusType = '답변 대기' | '답변 완료'

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 <span className={cx('label-container', color, className)}>{children}</span>
+}
+
+export default Label

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;
+  }
+}

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}`
+}