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 (
+
);
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) => {
+ return (
+
+ {createAt}
+ {value}
+
+ );
+};
+
+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 (
+
+ {data.map((history) => (
+
+ {history.date}
+
+ {history.histroy.map((history) => (
+
+ ))}
+
+ ))}
+
+ );
+};
+
+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[];
+}