feat: 컨테이너 스타일링

YAPP-Github · Jan 15, 2024 · 18d2c0f · 18d2c0f
1 parent 72f274a
commit 18d2c0f
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 25 deletions.
diff --git a/pages/write/index.tsx b/pages/write/index.tsx
@@ -8,15 +8,28 @@ const MOCK: WriteHisotry[] = [
   {
     date: '2024-01-03',
     histroy: [
-      { createAt: '2024-01-03T01:01:01', id: '1', value: 'test 1' },
-      { createAt: '2024-01-03T01:01:02', id: '2', value: 'test 2' },
+      { createAt: '2024-01-03T01:01', id: '1', value: 'test 1' },
+      { createAt: '2024-01-03T11:01', id: '2', value: 'test 2' },
+      { createAt: '2024-01-03T21:01', id: '11', value: 'test 11' },
+      { createAt: '2024-01-03T11:01', id: '21', value: 'test 21' },
+      { createAt: '2024-01-03T21:01', id: '12', value: 'test 12' },
+      { createAt: '2024-01-03T19:01', id: '22', value: 'test 22' },
+      { createAt: '2024-01-03T23:01', id: '23', value: 'test 23' },
     ],
   },
   {
     date: '2024-01-04',
     histroy: [
-      { createAt: '2024-01-04T01:01:01', id: '3', value: 'test 3' },
-      { createAt: '2024-01-04T01:01:02', id: '4', value: 'test 4' },
+      { createAt: '2024-01-04T01:01', id: '3', value: 'test 3' },
+      { createAt: '2024-01-04T01:01', id: '4', value: 'test 4' },
+      { createAt: '2024-01-04T11:01', id: '7', value: 'test 7' },
+    ],
+  },
+  {
+    date: '2024-01-05',
+    histroy: [
+      { createAt: '2024-01-05T11:01', id: '5', value: 'test 5' },
+      { createAt: '2024-01-05T19:01', id: '6', value: 'test 6' },
     ],
   },
 ];

diff --git a/src/domain/Write/History/components/Card.tsx b/src/domain/Write/History/components/Card.tsx
diff --git a/src/domain/Write/History/index.css.ts b/src/domain/Write/History/index.css.ts
@@ -4,12 +4,23 @@ import { COLORS } from '@styles/tokens';
 
 export const container = style({
   marginBottom: '48px',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '64px',
+});
+
+export const contentWrapper = style({
+  display: 'grid',
+  gridTemplateColumns: '1fr 1fr 1fr',
+  gap: '16px',
 });
 
 export const dateLabelWrapper = style({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
+  marginTop: '12px',
+  marginBottom: '24px',
 });
 
 export const dateLabel = style({

diff --git a/src/domain/Write/History/index.tsx b/src/domain/Write/History/index.tsx
@@ -16,7 +16,7 @@ const WriteHistory = ({ data }: WriteHistoryProps) => {
   return (
     <section className={style.container}>
       {data.map((history) => (
-        <ol key={history.date}>
+        <section key={history.date}>
           <div className={style.dateLabelWrapper}>
             <div className={style.dateLabel}>
               <Icon icon={'clock'} width={20} height={20} />
@@ -26,14 +26,16 @@ const WriteHistory = ({ data }: WriteHistoryProps) => {
             </div>
           </div>
 
-          {history.histroy.map((history) => (
-            <WriteHistoryCard
-              key={history.id}
-              createAt={history.createAt}
-              value={history.value}
-            />
-          ))}
-        </ol>
+          <ol className={style.contentWrapper}>
+            {history.histroy.map((history) => (
+              <WriteHistoryCard
+                key={history.id}
+                createAt={history.createAt}
+                value={history.value}
+              />
+            ))}
+          </ol>
+        </section>
       ))}
     </section>
   );