From 48a31f51fc5bda897448882b74688a3a3c8f9dbd Mon Sep 17 00:00:00 2001
From: wonjin-dev <fsdjin159@gmail.com>
Date: Mon, 15 Jan 2024 00:52:21 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EA=B5=AC?=
 =?UTF-8?q?=EC=A1=B0=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/write/index.tsx                        |  2 ++
 pages/write/style.css.ts                     |  5 ++++
 src/domain/Write/History/components/Card.tsx | 12 ++++++++
 src/domain/Write/History/index.css.ts        |  5 ++++
 src/domain/Write/History/index.tsx           | 29 ++++++++++++++++++++
 src/domain/Write/components/guide.css.ts     |  1 +
 src/domain/Write/types/index.ts              | 10 +++++++
 7 files changed, 64 insertions(+)
 create mode 100644 pages/write/style.css.ts
 create mode 100644 src/domain/Write/History/components/Card.tsx
 create mode 100644 src/domain/Write/History/index.css.ts
 create mode 100644 src/domain/Write/History/index.tsx
 create mode 100644 src/domain/Write/types/index.ts

diff --git a/pages/write/index.tsx b/pages/write/index.tsx
index 95d08409..62fc8f7b 100644
--- a/pages/write/index.tsx
+++ b/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>
   );
diff --git a/pages/write/style.css.ts b/pages/write/style.css.ts
new file mode 100644
index 00000000..bf193496
--- /dev/null
+++ b/pages/write/style.css.ts
@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  margin: '0 120px',
+});
diff --git a/src/domain/Write/History/components/Card.tsx b/src/domain/Write/History/components/Card.tsx
new file mode 100644
index 00000000..72adf656
--- /dev/null
+++ b/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;
diff --git a/src/domain/Write/History/index.css.ts b/src/domain/Write/History/index.css.ts
new file mode 100644
index 00000000..89aae24a
--- /dev/null
+++ b/src/domain/Write/History/index.css.ts
@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  marginBottom: '48px',
+});
diff --git a/src/domain/Write/History/index.tsx b/src/domain/Write/History/index.tsx
new file mode 100644
index 00000000..e2b47a75
--- /dev/null
+++ b/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;
diff --git a/src/domain/Write/components/guide.css.ts b/src/domain/Write/components/guide.css.ts
index 566f5132..b882af68 100644
--- a/src/domain/Write/components/guide.css.ts
+++ b/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',
diff --git a/src/domain/Write/types/index.ts b/src/domain/Write/types/index.ts
new file mode 100644
index 00000000..0b073161
--- /dev/null
+++ b/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[];
+}