[Feature/�BAR-165] 끄적이는 레이아웃 작성 & 데이터 구조화 (#38)

* style: max width 및 전역 설정 추가

* feat: 가이드 컴포넌트 작성

* feat: 데이터 구조화

* refactor: page 스타일 삭제

* feat: 끄적이는 히스토리 dateLabel 스타일링

* feat: dayjs locale 설정

* feat: 히스토리 카드 스타일링

* feat: 컨테이너 스타일링

* refactor: 리뷰 반영

* feat: [WIP] 그리드 레이아웃 수정 필요

* feat: 컬럼 로직 변경

* style: 마크업 디테일

package.json

@@ -24,6 +24,8 @@
     "@vanilla-extract/sprinkles": "^1.6.1",
     "axios": "^1.6.2",
     "clsx": "^2.0.0",
+    "dayjs": "^1.11.10",
+    "ko": "link:dayjs/locale/ko",
     "framer-motion": "^10.18.0",
     "next": "14.0.3",
     "react": "^18",

pages/write/index.tsx

@@ -0,0 +1,60 @@
+import WriteInput from '@components/Input/WriteInput';
+import WriteGuide from '@domain/Write/components/Guide';
+import WritePageTab from '@domain/Write/components/WritePageTab';
+import WriteHistory from '@domain/Write/History';
+import { type WriteHisotry } from '@domain/Write/types';
+import { useInput } from '@hooks/useInput';
+
+const MOCK: WriteHisotry[] = [
+  {
+    date: '2024-01-03',
+    history: [
+      { 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 11test 11test 11test 11test 11test 11test 11test 11test 11test 11test 11test 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',
+    history: [
+      { 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',
+    history: [
+      { createAt: '2024-01-05T11:01', id: '5', value: 'test 5' },
+      { createAt: '2024-01-05T19:01', id: '6', value: 'test 6' },
+    ],
+  },
+];
+
+const WritePage = () => {
+  const writeInput = useInput({ id: 'write-input' });
+
+  return (
+    <WritePageTab
+      write={
+        <>
+          <WriteGuide />
+          <WriteHistory data={MOCK} />
+          <WriteInput inputProps={writeInput} />
+        </>
+      }
+      template={null}
+    />
+  );
+};
+
+export default WritePage;

src/components/Input/WriteInput/index.tsx

@@ -30,6 +30,8 @@ const WriteInput = ({
     lineBreak: {},
   });
 
+  const isValid = useMemo(() => value.length > 0, [value.length]);
+
   const handleResize = (e: ChangeEvent<HTMLTextAreaElement>) => {
     const { scrollHeight, clientHeight, value } = e.target;
 
@@ -64,8 +66,6 @@ const WriteInput = ({
     }
   };
 
-  const isValid = useMemo(() => value.length > 0, [value.length]);
-
   return (
     <div className={style.conatiner}>
       <div

src/components/Input/WriteInput/style.css.ts

@@ -9,7 +9,7 @@ export const conatiner = style({
   borderRadius: '16px',
   width: '100%',
   padding: '22px 12px 22px 24px',
-  border: `2px solid ${COLORS['Blue/Gradient']}`,
+  border: `2px solid ${COLORS['Blue/Default']}`,
 });
 
 export const inputHeight = createVar();

src/constants/icon.ts

@@ -1,5 +1,6 @@
 import Add from '@assets/icons/add.svg';
 import Archive from '@assets/icons/archive.svg';
+import Clock from '@assets/icons/clock.svg';
 import Close from '@assets/icons/close.svg';
 import Copy from '@assets/icons/copy.svg';
 import Logout from '@assets/icons/logout.svg';
@@ -16,6 +17,7 @@ import TemplateDefault from '@assets/icons/template-default.svg';
 export const iconFactory = {
   add: Add,
   archive: Archive,
+  clock: Clock,
   close: Close,
   copy: Copy,
   logout: Logout,

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

@@ -0,0 +1,18 @@
+import dayjs from 'dayjs';
+
+import { type Write } from '@domain/Write/types';
+
+import * as styles from './style.css';
+
+const WriteHistoryCard = ({ createAt, value }: Omit<Write, 'id'>) => {
+  return (
+    <li className={styles.container}>
+      <p className={styles.date}>
+        {dayjs(createAt).locale('ko').format('a h:mm')}
+      </p>
+      <p className={styles.value}>{value}</p>
+    </li>
+  );
+};
+
+export default WriteHistoryCard;

src/domain/Write/History/components/Card/style.css.ts

@@ -0,0 +1,30 @@
+import { style } from '@vanilla-extract/css';
+
+import { sprinkles } from '@styles/sprinkles.css';
+import { COLORS } from '@styles/tokens';
+
+export const container = style({
+  backgroundColor: COLORS['Grey/100'],
+  borderRadius: '16px',
+  padding: '28px 32px',
+  height: 'fit-content',
+});
+
+export const date = style({
+  marginBottom: '16px',
+  color: COLORS['Grey/400'],
+  fontSize: '15px',
+  fontWeight: '500',
+});
+
+export const value = style([
+  sprinkles({ typography: '15/Body/Regular' }),
+  {
+    marginBottom: '16px',
+    color: COLORS['Grey/900'],
+    fontSize: '15px',
+    fontWeight: '400',
+    lineHeight: '24px',
+    letterSpacing: '-0.2px',
+  },
+]);

src/domain/Write/History/components/Column/index.tsx

@@ -0,0 +1,24 @@
+import { type Write } from '@domain/Write/types';
+
+import WriteHistoryCard from '../Card';
+import * as styles from './style.css';
+
+interface ColumnProps {
+  list: Write[] | undefined;
+}
+
+const Column = ({ list }: ColumnProps) => {
+  if (!list) {
+    return null;
+  }
+
+  return (
+    <ol className={styles.container}>
+      {list.map((el) => (
+        <WriteHistoryCard key={el.id} {...el} />
+      ))}
+    </ol>
+  );
+};
+
+export default Column;

src/domain/Write/History/components/Column/style.css.ts

@@ -0,0 +1,8 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '16px',
+  flex: '1',
+});

src/domain/Write/History/index.tsx

@@ -0,0 +1,63 @@
+import dayjs from 'dayjs';
+
+import 'dayjs/locale/ko';
+
+import Icon from '@components/Icon';
+
+import { type Write, type WriteHisotry } from '../types';
+import Column from './components/Column';
+import * as styles from './style.css';
+
+interface WriteHistoryProps {
+  data: WriteHisotry[];
+}
+
+const WriteHistory = ({ data }: WriteHistoryProps) => {
+  const parser = (arr: Write[]): Write[][] => {
+    let queue1: Write[] = [];
+    let queue2: Write[] = [];
+    let queue3: Write[] = [];
+
+    arr.forEach((history, i) => {
+      const extra = i % 3;
+      if (extra === 0) {
+        queue1.push(history);
+      } else if (extra === 1) {
+        queue2.push(history);
+      } else {
+        queue3.push(history);
+      }
+    });
+
+    return [queue1, queue2, queue3];
+  };
+
+  return (
+    <article className={styles.container}>
+      {data.map((writeHistory) => {
+        const { date, history } = writeHistory;
+
+        return (
+          <section key={date}>
+            <div className={styles.dateLabelWrapper}>
+              <div className={styles.dateLabel}>
+                <Icon icon={'clock'} width={20} height={20} />
+                <span className={styles.dateLabelText}>
+                  {dayjs(date).locale('ko').format('YYYY.MM.DD (dd)')}
+                </span>
+              </div>
+            </div>
+
+            <section className={styles.contentWrapper}>
+              {parser(history).map((list, i) => {
+                return <Column key={i} list={list} />;
+              })}
+            </section>
+          </section>
+        );
+      })}
+    </article>
+  );
+};
+
+export default WriteHistory;

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

@@ -0,0 +1,43 @@
+import { style } from '@vanilla-extract/css';
+
+import { COLORS } from '@styles/tokens';
+
+export const container = style({
+  marginBottom: '48px',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '64px',
+  maxHeight: '420px',
+  overflow: 'scroll',
+});
+
+export const dateLabelWrapper = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  marginTop: '12px',
+  marginBottom: '24px',
+});
+
+export const dateLabel = style({
+  padding: '6px 28px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  border: `1px solid ${COLORS['Grey/200']}`,
+  borderRadius: '100px',
+});
+
+export const dateLabelText = style({
+  marginLeft: '6px',
+  color: COLORS['Grey/700'],
+  fontSize: '15px',
+  fontWeight: 500,
+  lineHeight: '24px',
+  letterSpacing: '-0.2px',
+});
+
+export const contentWrapper = style({
+  display: 'flex',
+  gap: '16px',
+});

src/domain/Write/components/Guide/index.tsx

@@ -0,0 +1,11 @@
+import * as styles from './style.css';
+
+const WriteGuide = () => {
+  return (
+    <p className={styles.guideText}>
+      끄적인 글은 일주일 후에 사라져요! 오래 간직하고 싶다면 저장해주세요 😊
+    </p>
+  );
+};
+
+export default WriteGuide;

src/domain/Write/components/Guide/style.css.ts

@@ -0,0 +1,12 @@
+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',
+  fontSize: '15px',
+  fontWeight: '500',
+});