feat: 데이터 구조화

pages/write/index.tsx

@@ -1,5 +1,6 @@
 import WriteInput from '@components/Input/WriteInput';
 import WriteGuide from '@domain/Write/components/Guide';
+import WriteHistory from '@domain/Write/History';
 import { useInput } from '@hooks/useInput';
 
 import * as style from './style.css';
@@ -10,6 +11,7 @@ const WritePage = () => {
   return (
     <div className={style.container}>
       <WriteGuide />
+      <WriteHistory data={[]} />
       <WriteInput inputProps={writeInput} />
     </div>
   );

pages/write/style.css.ts

@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  margin: '0 120px',
+});

src/domain/Write/History/components/Card.tsx

@@ -0,0 +1,12 @@
+import { type Write } from '@domain/Write/types';
+
+const WriteHistoryCard = ({ createAt, value }: Omit<Write, 'id'>) => {
+  return (
+    <li>
+      <p>{createAt}</p>
+      <p>{value}</p>
+    </li>
+  );
+};
+
+export default WriteHistoryCard;

src/domain/Write/History/index.css.ts

@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  marginBottom: '48px',
+});

src/domain/Write/History/index.tsx

@@ -0,0 +1,29 @@
+import { type WriteHisotry } from '../types';
+import WriteHistoryCard from './components/Card';
+import * as style from './index.css';
+
+interface WriteHistoryProps {
+  data: WriteHisotry[];
+}
+
+const WriteHistory = ({ data }: WriteHistoryProps) => {
+  return (
+    <section className={style.container}>
+      {data.map((history) => (
+        <ol key={history.date}>
+          <p>{history.date}</p>
+
+          {history.histroy.map((history) => (
+            <WriteHistoryCard
+              key={history.id}
+              createAt={history.createAt}
+              value={history.value}
+            />
+          ))}
+        </ol>
+      ))}
+    </section>
+  );
+};
+
+export default WriteHistory;

src/domain/Write/components/guide.css.ts

@@ -3,6 +3,7 @@ import { style } from '@vanilla-extract/css';
 import { COLORS } from '@styles/tokens';
 
 export const guideText = style({
+  marginTop: '148px',
   marginBottom: '12px',
   color: COLORS['Grey/500'],
   textAlign: 'center',

src/domain/Write/types/index.ts

@@ -0,0 +1,10 @@
+export interface Write {
+  id: string;
+  createAt: string;
+  value: string;
+}
+
+export interface WriteHisotry {
+  date: string;
+  histroy: Write[];
+}