fix: HistoryDetailCard 에 MarkdownViewer 적용 및 스토립구에 추가

src/components/Card/History/Detail/HistoryDetailCard.css.ts

@@ -126,41 +126,53 @@ export const positionVariants = styleVariants({
 });
 
 export const contentStyle = style([
-  flexColumn,
   textPreStyle,
+  fontVariants['paragraph-m-medium'],
   {
-    gap: '0.75rem',
+    color: commonColorThemeVars.token['gray-scale-06'],
+
     '@media': {
       [ODSBreakpointTokenVariables['breakpoint-s']]: {
-        gap: '0.5rem',
+        ...ODSTextTokenVariables['paragraph-s-regular'],
       },
     },
   },
 ]);
 
 export const contentVariants = styleVariants({
-  LARGE: [
-    flexColumn,
-    textPreStyle,
-    {
-      gap: '0.75rem',
-    },
-  ],
-  SMALL: [
-    flexColumn,
-    textPreStyle,
-    {
+  LARGE: [textPreStyle, fontVariants['paragraph-m-medium']],
+  SMALL: [textPreStyle, fontVariants['paragraph-s-regular']],
+});
+
+export const contentSelector = style({});
+
+globalStyle(`.${contentSelector} > ul`, {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.75rem',
+  listStylePosition: 'inside',
+  '@media': {
+    [ODSBreakpointTokenVariables['breakpoint-s']]: {
       gap: '0.5rem',
     },
-  ],
+  },
 });
 
-export const contentSelector = style({});
+globalStyle(`.${contentSelector} > ol`, {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.75rem',
+  listStylePosition: 'inside',
+  '@media': {
+    [ODSBreakpointTokenVariables['breakpoint-s']]: {
+      gap: '0.5rem',
+    },
+  },
+});
 
-globalStyle(`.${contentSelector} > li`, {
+globalStyle(`li::marker`, {
   color: commonColorThemeVars.token['gray-scale-06'],
   ...ODSTextTokenVariables['paragraph-m-medium'],
-
   '@media': {
     [ODSBreakpointTokenVariables['breakpoint-s']]: {
       ...ODSTextTokenVariables['paragraph-s-regular'],

src/components/Card/History/Detail/HistoryDetailCard.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import React, { PropsWithChildren } from 'react';
+import MarkdownViewer from '@/components/MarkdownViewer/MarkdownViewer';
 import { getStaticContext } from '@/utils/context/StaticContext';
 import CommonCard from '../../Common/CommonCard';
 import StaticContextHistoryDetailCard, {
@@ -23,9 +24,9 @@ import {
 
 // TODO : 스토리북, 테스트코드 추가해야함
 
-interface Props extends HistoryDetailContextProps {
+export interface HistoryDetailCardProps extends HistoryDetailContextProps {
   className?: string;
-  visible_status: VisibleStatusToken;
+  visible_status?: VisibleStatusToken;
 }
 
 const HistoryDetailCard = ({
@@ -37,7 +38,7 @@ const HistoryDetailCard = ({
   period,
   position,
   content,
-}: PropsWithChildren<Props>) => {
+}: PropsWithChildren<HistoryDetailCardProps>) => {
   if (visible_status === 'NONE') return null;
 
   return (
@@ -103,14 +104,13 @@ const Content = () => {
   );
 
   return (
-    <pre
+    <MarkdownViewer
       className={classNames(
         sizeToken ? contentVariants[sizeToken] : contentStyle,
         contentSelector,
       )}
-    >
-      {content}
-    </pre>
+      value={content}
+    />
   );
 };
 

src/components/MarkdownViewer/MarkdownViewer.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import Markdown from 'react-markdown';
+
+interface Props {
+  className?: string;
+  value: string;
+}
+
+const MarkdownViewer = ({ className, value }: Props) => {
+  return <Markdown className={className}>{value}</Markdown>;
+};
+
+export default MarkdownViewer;

src/stories/Components/Card/History/Detail/HistoryDetailCard.stories.tsx

@@ -0,0 +1,43 @@
+import { Meta, StoryObj } from '@storybook/react';
+import HistoryDetailCard, {
+  HistoryDetailCardProps,
+} from '@/components/Card/History/Detail/HistoryDetailCard';
+
+const Template = (args: HistoryDetailCardProps) => (
+  <HistoryDetailCard {...args}>
+    <HistoryDetailCard.Head />
+    <HistoryDetailCard.Content />
+  </HistoryDetailCard>
+);
+
+const meta: Meta<typeof HistoryDetailCard> = {
+  title: 'Components/Card/History/Detail/HistoryDetailCard',
+  component: Template,
+  tags: ['autodocs'],
+  parameters: { layout: 'fullscreen' },
+};
+
+type Story = StoryObj<typeof HistoryDetailCard>;
+export const Large: Story = {
+  args: {
+    sizeToken: 'LARGE',
+    title: '다이닝 코드 웹 사이트 리뉴얼 프로젝트',
+    period: '2022.04 - 2023.06',
+    position: '프론트엔드 개발자',
+    content: `- 노후화된 레거시 웹 프론트엔드를 리뉴얼 하는 프로젝트를 설계 및 유지보수 하고 있습니다.\n- 프론트엔드 파트를 회사에서 혼자 담당하고있고, 중간중간 파트타임 인턴분들이 기여해가며 개발 진행하고 있습니다.\n- PC 환경과 Mobile 환경을 따로 구분하여 적응형으로 개발하고 있습니다.\n- 2년 6월 첫 릴리즈 이후 지속적인 업데이트 진행\n- 2022년 8월 MAU 220만 -> 2023년 3월  330만 까지 상승
+    `,
+  },
+};
+
+export const Small: Story = {
+  args: {
+    sizeToken: 'SMALL',
+    title: '다이닝 코드 웹 사이트 리뉴얼 프로젝트',
+    period: '2022.04 - 2023.06',
+    position: '프론트엔드 개발자',
+    content: `- 노후화된 레거시 웹 프론트엔드를 리뉴얼 하는 프로젝트를 설계 및 유지보수 하고 있습니다.\n- 프론트엔드 파트를 회사에서 혼자 담당하고있고, 중간중간 파트타임 인턴분들이 기여해가며 개발 진행하고 있습니다.\n- PC 환경과 Mobile 환경을 따로 구분하여 적응형으로 개발하고 있습니다.\n- 2년 6월 첫 릴리즈 이후 지속적인 업데이트 진행\n- 2022년 8월 MAU 220만 -> 2023년 3월  330만 까지 상승
+    `,
+  },
+};
+
+export default meta;