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