From 4abb07567bdf99aa4b0c2f1070e38f61b08ed525 Mon Sep 17 00:00:00 2001
From: Q Kim <qoli0703@gmail.com>
Date: Sat, 5 Aug 2023 18:46:45 +0900
Subject: [PATCH 1/9] =?UTF-8?q?feat:=20=EB=B3=84=EC=A0=90=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/Icons/FilledStar.tsx               |  20 +++
 src/components/Star/index.tsx                 |  13 ++
 src/components/StarRating/StarRating.css.ts   |  32 +++++
 .../StarRating/StarRating.stories.tsx         |  28 ++++
 src/components/StarRating/index.tsx           | 122 ++++++++++++++++++
 5 files changed, 215 insertions(+)
 create mode 100644 src/assets/Icons/FilledStar.tsx
 create mode 100644 src/components/Star/index.tsx
 create mode 100644 src/components/StarRating/StarRating.css.ts
 create mode 100644 src/components/StarRating/StarRating.stories.tsx
 create mode 100644 src/components/StarRating/index.tsx

diff --git a/src/assets/Icons/FilledStar.tsx b/src/assets/Icons/FilledStar.tsx
new file mode 100644
index 0000000..71f62af
--- /dev/null
+++ b/src/assets/Icons/FilledStar.tsx
@@ -0,0 +1,20 @@
+const MaterialSymbolsStar = (props: React.SVGProps<SVGSVGElement>) => {
+  const { color } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        fill={color}
+        d="m5.825 22l1.625-7.025L2 10.25l7.2-.625L12 3l2.8 6.625l7.2.625l-5.45 4.725L18.175 22L12 18.275L5.825 22Z"
+      ></path>
+    </svg>
+  );
+};
+
+export default MaterialSymbolsStar;
diff --git a/src/components/Star/index.tsx b/src/components/Star/index.tsx
new file mode 100644
index 0000000..7fab21a
--- /dev/null
+++ b/src/components/Star/index.tsx
@@ -0,0 +1,13 @@
+import FilledStar from '../../assets/Icons/FilledStar';
+
+interface StarProps extends React.SVGProps<SVGSVGElement> {
+  filled?: boolean;
+}
+
+const Star = (props: StarProps) => {
+  const { filled = false, ...rest } = props;
+
+  return <FilledStar color={filled ? '#FDD836' : '#D8D8D8'} {...rest} />;
+};
+
+export default Star;
diff --git a/src/components/StarRating/StarRating.css.ts b/src/components/StarRating/StarRating.css.ts
new file mode 100644
index 0000000..2dd58e8
--- /dev/null
+++ b/src/components/StarRating/StarRating.css.ts
@@ -0,0 +1,32 @@
+import { style } from '@vanilla-extract/css';
+
+export const wrapper = style({
+  display: 'inline-flex',
+  border: 'none',
+  padding: 0,
+  margin: 0,
+});
+
+export const hiddenRadio = style({
+  position: 'absolute',
+  visibility: 'hidden',
+  height: 0,
+  width: 0,
+});
+
+export const hidden = style({
+  border: 'none',
+  clip: 'rect(0 0 0 0)',
+  height: '1px',
+  margin: '-1px',
+  overflow: 'hidden',
+  padding: 0,
+  position: 'absolute',
+  width: '1px',
+});
+
+export const clickable = style({
+  cursor: 'pointer',
+  width: '32px',
+  height: '32px',
+});
diff --git a/src/components/StarRating/StarRating.stories.tsx b/src/components/StarRating/StarRating.stories.tsx
new file mode 100644
index 0000000..8f912e0
--- /dev/null
+++ b/src/components/StarRating/StarRating.stories.tsx
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import StarRating from '.';
+import { useState } from 'react';
+
+const meta: Meta<typeof StarRating> = {
+  component: StarRating,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof StarRating>;
+
+export const Default: Story = {
+  argTypes: {
+    rating: {
+      control: { type: 'range', min: 1, max: 5, step: 1 },
+    },
+  },
+};
+
+const Wrapper = () => {
+  const [rating, setRating] = useState(0);
+  return <StarRating rating={rating} setRating={setRating} />;
+};
+
+export const Interactive: Story = {
+  render: () => <Wrapper />,
+};
diff --git a/src/components/StarRating/index.tsx b/src/components/StarRating/index.tsx
new file mode 100644
index 0000000..fb76b4d
--- /dev/null
+++ b/src/components/StarRating/index.tsx
@@ -0,0 +1,122 @@
+import { useId } from 'react';
+import Star from '../Star';
+import { wrapper, hiddenRadio, hidden, clickable } from './StarRating.css.js';
+
+interface StarRatingProps {
+  rating: number;
+  setRating: React.Dispatch<React.SetStateAction<number>>;
+}
+
+const StarRating = (props: StarRatingProps) => {
+  const { rating, setRating } = props;
+
+  const star1Id = useId();
+  const star2Id = useId();
+  const star3Id = useId();
+  const star4Id = useId();
+  const star5Id = useId();
+
+  return (
+    <fieldset className={wrapper}>
+      <legend className={hidden}>별점 5점 중 {rating}점</legend>
+      <div>
+        <label htmlFor={star1Id} className={clickable}>
+          <Star
+            aria-label="1점"
+            filled={rating >= 1}
+            width="32px"
+            height="32px"
+          />
+        </label>
+        <input
+          type="radio"
+          id={star1Id}
+          value="1점"
+          checked={rating === 1}
+          onChange={() => {
+            setRating(1);
+          }}
+          className={hiddenRadio}
+        />
+
+        <label htmlFor={star2Id} className={clickable}>
+          <Star
+            aria-label="2점"
+            filled={rating >= 2}
+            width="32px"
+            height="32px"
+          />
+        </label>
+        <input
+          type="radio"
+          id={star2Id}
+          value="2점"
+          checked={rating === 2}
+          onChange={() => {
+            setRating(2);
+          }}
+          className={hiddenRadio}
+        />
+
+        <label htmlFor={star3Id} className={clickable}>
+          <Star
+            aria-label="3점"
+            filled={rating >= 3}
+            width="32px"
+            height="32px"
+          />
+        </label>
+        <input
+          type="radio"
+          id={star3Id}
+          value="3점"
+          checked={rating === 3}
+          onChange={() => {
+            setRating(3);
+          }}
+          className={hiddenRadio}
+        />
+
+        <label htmlFor={star4Id} className={clickable}>
+          <Star
+            aria-label="4점"
+            filled={rating >= 4}
+            width="32px"
+            height="32px"
+          />
+        </label>
+        <input
+          type="radio"
+          id={star4Id}
+          value="4점"
+          checked={rating === 4}
+          onChange={() => {
+            setRating(4);
+          }}
+          className={hiddenRadio}
+        />
+
+        <label htmlFor={star5Id} className={clickable}>
+          <Star
+            aria-label="5점"
+            filled={rating >= 5}
+            width="32px"
+            height="32px"
+          />
+        </label>
+        <input
+          type="radio"
+          id={star5Id}
+          value="5점"
+          checked={rating === 5}
+          onChange={() => {
+            setRating(5);
+          }}
+          className={hiddenRadio}
+        />
+      </div>
+    </fieldset>
+  );
+};
+
+export default StarRating;

From 1660680b5b72dede0cd6dc9406a71d9b746cd75e Mon Sep 17 00:00:00 2001
From: Q Kim <qoli0703@gmail.com>
Date: Sat, 5 Aug 2023 18:47:03 +0900
Subject: [PATCH 2/9] =?UTF-8?q?feat:=20=EB=8F=84=EB=A9=94=EC=9D=B8=20?=
 =?UTF-8?q?=ED=83=80=EC=9E=85=EB=93=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/memory.ts | 20 ++++++++++++++++++++
 src/types/tag.ts    |  5 +++++
 2 files changed, 25 insertions(+)
 create mode 100644 src/types/memory.ts
 create mode 100644 src/types/tag.ts

diff --git a/src/types/memory.ts b/src/types/memory.ts
new file mode 100644
index 0000000..986d930
--- /dev/null
+++ b/src/types/memory.ts
@@ -0,0 +1,20 @@
+import type { Tag } from './tag';
+
+export interface Memory {
+  title: string;
+  category: string;
+  tags: Tag[];
+  visitedAt: string;
+  star: number;
+  images: string[];
+  location: {
+    latitude: number;
+    longitude: number;
+  };
+}
+
+export interface NewMemory
+  extends Omit<Memory, 'images' | 'tags' | 'location'> {
+  tags: Array<Tag['id']>;
+  images: File[];
+}
diff --git a/src/types/tag.ts b/src/types/tag.ts
new file mode 100644
index 0000000..b031bca
--- /dev/null
+++ b/src/types/tag.ts
@@ -0,0 +1,5 @@
+export interface Tag {
+  id: number;
+  name: string;
+  color: string;
+}

From 3d67b67df9d4a50cb9c5eefd2dd142ead047764f Mon Sep 17 00:00:00 2001
From: Q Kim <qoli0703@gmail.com>
Date: Sat, 5 Aug 2023 19:17:43 +0900
Subject: [PATCH 3/9] =?UTF-8?q?feat:=20api=20=ED=86=B5=EC=8B=A0=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/category.ts               |  7 +++++++
 src/apis/memory.ts                 | 10 ++++++++++
 src/hooks/queries/useCategories.ts | 17 +++++++++++++++++
 src/hooks/queries/useNewMemory.ts  | 28 ++++++++++++++++++++++++++++
 4 files changed, 62 insertions(+)
 create mode 100644 src/apis/category.ts
 create mode 100644 src/apis/memory.ts
 create mode 100644 src/hooks/queries/useCategories.ts
 create mode 100644 src/hooks/queries/useNewMemory.ts

diff --git a/src/apis/category.ts b/src/apis/category.ts
new file mode 100644
index 0000000..5feb70a
--- /dev/null
+++ b/src/apis/category.ts
@@ -0,0 +1,7 @@
+export const getCategories = async () =>
+  await fetch('/categories', {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
diff --git a/src/apis/memory.ts b/src/apis/memory.ts
new file mode 100644
index 0000000..9ccea5f
--- /dev/null
+++ b/src/apis/memory.ts
@@ -0,0 +1,10 @@
+import type { NewMemory } from '../types/memory';
+
+export const postMemory = async (form: NewMemory) =>
+  await fetch('/memories', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(form),
+  });
diff --git a/src/hooks/queries/useCategories.ts b/src/hooks/queries/useCategories.ts
new file mode 100644
index 0000000..f4168c2
--- /dev/null
+++ b/src/hooks/queries/useCategories.ts
@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query';
+import type { Category, CategoryResponse } from '../../types/category';
+import { getCategories } from '../../apis/category';
+
+const useCategories = () =>
+  useQuery<CategoryResponse, Error, Array<Category['name']>>({
+    queryKey: ['category'],
+    queryFn: async () => {
+      const response = await getCategories();
+      const data = await response.json();
+      return data;
+    },
+    select: ({ categories }) => categories.map(({ name }) => name),
+    initialData: { categories: [] },
+  });
+
+export default useCategories;
diff --git a/src/hooks/queries/useNewMemory.ts b/src/hooks/queries/useNewMemory.ts
new file mode 100644
index 0000000..886936c
--- /dev/null
+++ b/src/hooks/queries/useNewMemory.ts
@@ -0,0 +1,28 @@
+import { useMutation } from '@tanstack/react-query';
+import { postMemory } from '../../apis/memory';
+import type { NewMemory } from '../../types/memory';
+import useModal from '../useModal';
+
+const useNewMemory = () => {
+  const { hide } = useModal();
+
+  return useMutation<unknown, Error, NewMemory>({
+    mutationFn: async (form) => {
+      const response = await postMemory(form);
+      if (response.status !== 201) throw new Error('추억 등록 실패');
+    },
+
+    onSuccess: () => {
+      alert('추억 등록에 성공했어요');
+      hide();
+    },
+
+    onError: (e) => {
+      alert('추억 등록에 실패했어요');
+    },
+
+    retry: 1,
+  });
+};
+
+export default useNewMemory;

From 6f22b760b0efa8b83af0c510f6de495fa5777181 Mon Sep 17 00:00:00 2001
From: Q Kim <qoli0703@gmail.com>
Date: Sat, 5 Aug 2023 19:17:55 +0900
Subject: [PATCH 4/9] =?UTF-8?q?feat:=20=EC=B9=B4=ED=85=8C=EA=B3=A0?=
 =?UTF-8?q?=EB=A6=AC=20=ED=83=80=EC=9E=85=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/category.ts | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 src/types/category.ts

diff --git a/src/types/category.ts b/src/types/category.ts
new file mode 100644
index 0000000..3e48db4
--- /dev/null
+++ b/src/types/category.ts
@@ -0,0 +1,7 @@
+export interface Category {
+  name: string;
+}
+
+export interface CategoryResponse {
+  categories: Category[];
+}

From c542e560299bc9a9e2d7dac953c8ada9ecd38a7f Mon Sep 17 00:00:00 2001
From: Q Kim <qoli0703@gmail.com>
Date: Sat, 5 Aug 2023 19:19:38 +0900
Subject: [PATCH 5/9] =?UTF-8?q?feat:=20=EC=B6=94=EC=96=B5=20=EC=83=88?=
 =?UTF-8?q?=EA=B8=B0=EA=B8=B0=20form?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ImageUploader/ImageUploader.css.ts        |  42 ++++++
 src/components/ImageUploader/index.tsx        |  40 +++++
 src/components/NewMemoryForm/index.tsx        | 138 ++++++++++++++++++
 .../NewMemoryForm/newMemoryForm.css.ts        |  79 ++++++++++
 src/hooks/useImageInput.ts                    |  27 ++++
 src/hooks/usePastDateTimeInput.ts             |  21 +++
 src/hooks/useSelectInput.ts                   |  17 +++
 src/hooks/useTextInput.ts                     |  18 +++
 src/types/memory.ts                           |   3 +-
 src/utils/getToday.ts                         |  10 ++
 10 files changed, 394 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ImageUploader/ImageUploader.css.ts
 create mode 100644 src/components/ImageUploader/index.tsx
 create mode 100644 src/components/NewMemoryForm/index.tsx
 create mode 100644 src/components/NewMemoryForm/newMemoryForm.css.ts
 create mode 100644 src/hooks/useImageInput.ts
 create mode 100644 src/hooks/usePastDateTimeInput.ts
 create mode 100644 src/hooks/useSelectInput.ts
 create mode 100644 src/hooks/useTextInput.ts
 create mode 100644 src/utils/getToday.ts

diff --git a/src/components/ImageUploader/ImageUploader.css.ts b/src/components/ImageUploader/ImageUploader.css.ts
new file mode 100644
index 0000000..8eaadb0
--- /dev/null
+++ b/src/components/ImageUploader/ImageUploader.css.ts
@@ -0,0 +1,42 @@
+import { style } from '@vanilla-extract/css';
+
+export const hidden = style({
+  border: 'none',
+  clip: 'rect(0 0 0 0)',
+  height: '1px',
+  margin: '-1px',
+  overflow: 'hidden',
+  padding: 0,
+  position: 'absolute',
+  width: '1px',
+});
+
+export const uploadButton = style({
+  cursor: 'pointer',
+
+  border: '1px solid #DDDDDD',
+  backgroundColor: '#ffffff',
+  fontSize: '14px',
+
+  transition: 'all 0.15s linear',
+
+  ':focus': {
+    outline: 'none',
+    border: '1px solid #735BF2',
+  },
+
+  ':hover': {
+    backgroundColor: '#CAC2F2',
+  },
+});
+
+export const thumbnail = style({
+  objectFit: 'cover',
+
+  width: '100%',
+  height: '200px',
+  padding: 0,
+  margin: 0,
+
+  borderRadius: '5px',
+});
diff --git a/src/components/ImageUploader/index.tsx b/src/components/ImageUploader/index.tsx
new file mode 100644
index 0000000..fb8f462
--- /dev/null
+++ b/src/components/ImageUploader/index.tsx
@@ -0,0 +1,40 @@
+import { useRef } from 'react';
+import { hidden, thumbnail, uploadButton } from './ImageUploader.css';
+
+interface ImageUploaderProps {
+  images: string[];
+  setImages: (fileList: FileList) => void;
+}
+
+const ImageUploader = (props: ImageUploaderProps) => {
+  const { images, setImages } = props;
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const accessImageInput = () => {
+    inputRef.current?.click();
+  };
+
+  return (
+    <>
+      <button type="button" onClick={accessImageInput} className={`${thumbnail} ${uploadButton}`}>
+        {images.length > 0
+          ? images.map((image) => (
+              <img key={image} src={image} alt={'내 추억'} className={thumbnail} />
+            ))
+          : '추억 사진을 올려주세요!'}
+      </button>
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/jpg, impge/png, image/jpeg"
+        onChange={({ target: { files } }) => {
+          setImages(files);
+        }}
+        className={hidden}
+      />
+    </>
+  );
+};
+
+export default ImageUploader;
diff --git a/src/components/NewMemoryForm/index.tsx b/src/components/NewMemoryForm/index.tsx
new file mode 100644
index 0000000..7632a18
--- /dev/null
+++ b/src/components/NewMemoryForm/index.tsx
@@ -0,0 +1,138 @@
+import type { Category } from '../../types/category';
+import { useState } from 'react';
+import StarRating from '../StarRating';
+import {
+  baseInput,
+  contentInput,
+  inlineRowFlex,
+  normalFont,
+  primaryButton,
+  rounded,
+  title,
+  titleInput,
+  wrapper,
+} from './newMemoryForm.css';
+import useTextInput from '../../hooks/useTextInput';
+import usePastDateTimeInput from '../../hooks/usePastDateTimeInput';
+import getNowInDateTimeFormat from '../../utils/getToday';
+import useSelectInput from '../../hooks/useSelectInput';
+import ImageUploader from '../ImageUploader';
+import useImageInput from '../../hooks/useImageInput';
+import type { NewMemory } from '../../types/memory';
+import useNewMemory from '../../hooks/queries/useNewMemory';
+import useCategories from '../../hooks/queries/useCategories';
+
+const NewMemoryForm = () => {
+  const { data: categories } = useCategories();
+  const { mutate } = useNewMemory();
+
+  const { value: images, files, setValue: setImages } = useImageInput();
+  const { value: memoryTitle, setValue: setMemoryTitle } = useTextInput('', 50);
+  const { value: content, setValue: setContent } = useTextInput('', 1000);
+  const { value: dateTime, setValue: setDateTime } = usePastDateTimeInput();
+  const { value: category, setValue: setCategory } = useSelectInput<Category['name'] | ''>(
+    [...categories, ''],
+    ''
+  );
+  const [rating, setRating] = useState(0);
+
+  const submit = () => {
+    if (images.length === 0) {
+      alert('사진을 추가해 주세요!');
+      return;
+    }
+    if (memoryTitle.length === 0) {
+      alert('제목을 입력해 주세요!');
+      return;
+    }
+    if (category === '') {
+      alert('카테고리를 입력해 주세요!');
+      return;
+    }
+    if (rating === 0) {
+      alert('별점을 입력해 주세요!');
+      return;
+    }
+
+    const formData: NewMemory = {
+      title,
+      category,
+      images: Array.from(files),
+      tags: [],
+      star: rating,
+      visitedAt: dateTime,
+    };
+
+    mutate(formData);
+  };
+
+  return (
+    <form className={wrapper}>
+      <h2 className={title}>추억을 새겨보자</h2>
+
+      <ImageUploader images={images} setImages={setImages} />
+
+      <input
+        type="text"
+        placeholder="어떤 추억인가요?"
+        value={memoryTitle}
+        onChange={({ target: { value } }) => {
+          setMemoryTitle(value);
+        }}
+        className={`${rounded} ${titleInput} ${baseInput}`}
+      />
+
+      <textarea
+        placeholder="조금 더 자세히 알려주세요."
+        value={content}
+        onChange={({ target: { value } }) => {
+          setContent(value);
+        }}
+        className={`${rounded} ${contentInput}`}
+      />
+
+      <input
+        type="date"
+        value={dateTime}
+        onChange={({ target: { value } }) => {
+          setDateTime(value);
+        }}
+        max={getNowInDateTimeFormat()}
+        className={`${rounded} ${baseInput}`}
+      />
+
+      <select
+        className={`${rounded} ${baseInput}`}
+        value={category}
+        onChange={({ target: { value } }) => {
+          setCategory(value);
+        }}
+      >
+        <option value="">카테고리를 골라 주세요.</option>
+        {categories.map((categoryItem) => (
+          <option key={categoryItem} value={categoryItem}>
+            {categoryItem}
+          </option>
+        ))}
+      </select>
+
+      <div className={`${inlineRowFlex}`}>
+        <p className={`${inlineRowFlex} ${normalFont}`}>추억의 점수는?</p>
+        <StarRating rating={rating} setRating={setRating} />
+      </div>
+
+      <button
+        type="submit"
+        onClick={(e) => {
+          e.preventDefault();
+          submit();
+        }}
+        className={`${baseInput} ${primaryButton} ${normalFont}`}
+      >
+        추억 새기기
+      </button>
+    </form>
+  );
+};
+
+export default NewMemoryForm;
diff --git a/src/components/NewMemoryForm/newMemoryForm.css.ts b/src/components/NewMemoryForm/newMemoryForm.css.ts
new file mode 100644
index 0000000..0400fcf
--- /dev/null
+++ b/src/components/NewMemoryForm/newMemoryForm.css.ts
@@ -0,0 +1,79 @@
+import { style } from '@vanilla-extract/css';
+
+export const wrapper = style({
+  display: 'flex',
+  flexDirection: 'column',
+  rowGap: '20px',
+
+  minWidth: '350px',
+  maxWidth: '800px',
+
+  textAlign: 'center',
+});
+
+export const title = style({
+  margin: 0,
+  fontWeight: 'normal',
+  fontSize: '20px',
+  color: '#333333',
+});
+
+export const rounded = style({
+  border: '1px solid #DDDDDD',
+  borderRadius: '5px',
+
+  ':focus': {
+    outline: 'none',
+    border: '1px solid #735BF2',
+  },
+});
+
+export const baseInput = style({
+  boxSizing: 'border-box',
+  MozBoxSizing: 'border-box',
+  WebkitBoxSizing: 'border-box',
+
+  width: '100%',
+  height: '40px',
+  padding: '5px',
+});
+
+export const titleInput = style({
+  fontSize: '14px',
+});
+
+export const contentInput = style({
+  boxSizing: 'border-box',
+  MozBoxSizing: 'border-box',
+  WebkitBoxSizing: 'border-box',
+
+  width: '100%',
+  height: '100px',
+  padding: '10px 5px',
+
+  resize: 'none',
+});
+
+export const inlineRowFlex = style({
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  columnGap: '20px',
+  margin: 0,
+});
+
+export const normalFont = style({
+  fontSize: '14px',
+});
+
+export const primaryButton = style({
+  border: 'none',
+  borderRadius: '5px',
+  color: '#ffffff',
+  backgroundColor: '#735BF2',
+
+  ':focus': {
+    outline: 'none',
+    border: '2px solid #3A21BF',
+  },
+});
diff --git a/src/hooks/useImageInput.ts b/src/hooks/useImageInput.ts
new file mode 100644
index 0000000..614c68e
--- /dev/null
+++ b/src/hooks/useImageInput.ts
@@ -0,0 +1,27 @@
+import { useState, useCallback } from 'react';
+
+const useImageInput = () => {
+  const [value, setValue] = useState<string[]>([]);
+  const [files, setFiles] = useState<FileList>();
+
+  const setImages = useCallback(
+    (fileList: FileList) => {
+      const newImages = [];
+
+      Array.from(fileList).forEach((file) => {
+        if (!/^image\/(jpg|png|jpeg)$/.test(file.type)) return;
+        newImages.push(URL.createObjectURL(file));
+      });
+
+      if (fileList.length === newImages.length) {
+        setValue(newImages);
+        setFiles(fileList);
+      }
+    },
+    [setValue]
+  );
+
+  return { value, files, setValue: setImages };
+};
+
+export default useImageInput;
diff --git a/src/hooks/usePastDateTimeInput.ts b/src/hooks/usePastDateTimeInput.ts
new file mode 100644
index 0000000..261e825
--- /dev/null
+++ b/src/hooks/usePastDateTimeInput.ts
@@ -0,0 +1,21 @@
+import { useState, useCallback } from 'react';
+import getToday from '../utils/getToday';
+
+const usePastDateTimeInput = () => {
+  const [dateTime, setDateTime] = useState(() => getToday());
+
+  const setValue = useCallback(
+    (newDateTime: string) => {
+      if (new Date(newDateTime) > new Date()) {
+        setDateTime(getToday());
+        return;
+      }
+      setDateTime(newDateTime);
+    },
+    [setDateTime]
+  );
+
+  return { value: dateTime, setValue };
+};
+
+export default usePastDateTimeInput;
diff --git a/src/hooks/useSelectInput.ts b/src/hooks/useSelectInput.ts
new file mode 100644
index 0000000..24d9438
--- /dev/null
+++ b/src/hooks/useSelectInput.ts
@@ -0,0 +1,17 @@
+import { useState, useCallback } from 'react';
+
+const useSelectInput = <T>(options: T[], initialValue: T) => {
+  const [value, setValue] = useState<T>(initialValue);
+
+  const setSelected = useCallback(
+    (selected: T) => {
+      if (!options.includes(selected)) return;
+      setValue(selected);
+    },
+    [setValue, options]
+  );
+
+  return { value, setValue: setSelected };
+};
+
+export default useSelectInput;
diff --git a/src/hooks/useTextInput.ts b/src/hooks/useTextInput.ts
new file mode 100644
index 0000000..e64e472
--- /dev/null
+++ b/src/hooks/useTextInput.ts
@@ -0,0 +1,18 @@
+import { useState, useCallback } from 'react';
+
+const useTextInput = (initialValue = '', maxLength = Infinity) => {
+  const [text, setText] = useState(initialValue);
+
+  const setValue = useCallback(
+    (newText: string) => {
+      setText(
+        newText.length > maxLength ? newText.slice(0, maxLength + 1) : newText
+      );
+    },
+    [setText]
+  );
+
+  return { value: text, setValue };
+};
+
+export default useTextInput;
diff --git a/src/types/memory.ts b/src/types/memory.ts
index 986d930..0b8920c 100644
--- a/src/types/memory.ts
+++ b/src/types/memory.ts
@@ -1,8 +1,9 @@
+import type { Category } from './category';
 import type { Tag } from './tag';
 
 export interface Memory {
   title: string;
-  category: string;
+  category: Category['name'];
   tags: Tag[];
   visitedAt: string;
   star: number;
diff --git a/src/utils/getToday.ts b/src/utils/getToday.ts
new file mode 100644
index 0000000..45b9e13
--- /dev/null
+++ b/src/utils/getToday.ts
@@ -0,0 +1,10 @@
+const getToday = () => {
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = (now.getMonth() + 1).toString().padStart(2, '0');
+  const date = now.getDate().toString().padStart(2, '0');
+  const result = `${year}-${month}-${date}`;
+  return result;
+};
+
+export default getToday;

From 5cf29927ddc2cbb1c6e06eedea0987e8e0f4cbbc Mon Sep 17 00:00:00 2001
From: Q Kim <qoli0703@gmail.com>
Date: Sat, 5 Aug 2023 19:20:02 +0900
Subject: [PATCH 6/9] =?UTF-8?q?feat:=20=EB=AA=A8=EB=8B=AC(=EB=B0=94?=
 =?UTF-8?q?=ED=85=80=EC=8B=9C=ED=8A=B8)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Modal/index.ts                 |  7 +++
 .../Modal/ingredients/Content.css.ts          | 43 +++++++++++++++++++
 src/components/Modal/ingredients/Content.tsx  | 23 ++++++++++
 src/components/Modal/ingredients/Trigger.tsx  | 31 +++++++++++++
 src/contexts/modalContext.tsx                 | 20 +++++++++
 src/hooks/useModal.ts                         | 26 +++++++++++
 6 files changed, 150 insertions(+)
 create mode 100644 src/components/Modal/index.ts
 create mode 100644 src/components/Modal/ingredients/Content.css.ts
 create mode 100644 src/components/Modal/ingredients/Content.tsx
 create mode 100644 src/components/Modal/ingredients/Trigger.tsx
 create mode 100644 src/contexts/modalContext.tsx
 create mode 100644 src/hooks/useModal.ts

diff --git a/src/components/Modal/index.ts b/src/components/Modal/index.ts
new file mode 100644
index 0000000..49efa1f
--- /dev/null
+++ b/src/components/Modal/index.ts
@@ -0,0 +1,7 @@
+import ModalProvider from '../../contexts/modalContext';
+import Content from './ingredients/Content';
+import Trigger from './ingredients/Trigger';
+
+const Modal = Object.assign(ModalProvider, { Content, Trigger });
+
+export default Modal;
diff --git a/src/components/Modal/ingredients/Content.css.ts b/src/components/Modal/ingredients/Content.css.ts
new file mode 100644
index 0000000..7370b8a
--- /dev/null
+++ b/src/components/Modal/ingredients/Content.css.ts
@@ -0,0 +1,43 @@
+import { keyframes, style } from '@vanilla-extract/css';
+
+const showModal = keyframes({
+  '0%': {
+    bottom: '-100%',
+  },
+
+  '100%': {
+    bottom: '0',
+  },
+});
+
+export const backdrop = style({
+  position: 'fixed',
+  top: '0',
+  left: '0',
+  width: '100%',
+  height: '100%',
+  backgroundColor: '#33333311',
+});
+
+export const content = style({
+  position: 'fixed',
+  bottom: '0',
+  left: '0',
+
+  overflowX: 'hidden',
+  overflowY: 'auto',
+
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+
+  width: '100%',
+  minHeight: '10%',
+  maxHeight: '90%',
+
+  borderRadius: '10px 10px 0 0',
+  backgroundColor: '#ffffff',
+
+  animation: `${showModal} 0.4s ease-out`,
+});
diff --git a/src/components/Modal/ingredients/Content.tsx b/src/components/Modal/ingredients/Content.tsx
new file mode 100644
index 0000000..5d73a33
--- /dev/null
+++ b/src/components/Modal/ingredients/Content.tsx
@@ -0,0 +1,23 @@
+import { createPortal } from 'react-dom';
+import useModal from '../../../hooks/useModal';
+import { backdrop, content } from './Content.css';
+
+const Content = (props: React.PropsWithChildren) => {
+  const { children } = props;
+  const { isOpen, hide } = useModal();
+
+  const modalRoot = document.getElementById('modal-root');
+
+  return (
+    isOpen &&
+    createPortal(
+      <>
+        <div onClick={hide} className={backdrop} />
+        <section className={content}>{children}</section>
+      </>,
+      modalRoot
+    )
+  );
+};
+
+export default Content;
diff --git a/src/components/Modal/ingredients/Trigger.tsx b/src/components/Modal/ingredients/Trigger.tsx
new file mode 100644
index 0000000..80dec1b
--- /dev/null
+++ b/src/components/Modal/ingredients/Trigger.tsx
@@ -0,0 +1,31 @@
+import useModal from '../../../hooks/useModal';
+
+export interface TriggerProps {
+  type: 'open' | 'close' | 'toggle';
+  className?: string;
+  ariaLabel?: string;
+}
+
+const Trigger = (props: React.PropsWithChildren<TriggerProps>) => {
+  const { type, children, className, ariaLabel } = props;
+  const { show, hide, toggle } = useModal();
+
+  const triggerModal = () => {
+    if (type === 'open') show();
+    if (type === 'close') hide();
+    if (type === 'toggle') toggle();
+  };
+
+  return (
+    <button
+      type="button"
+      className={className}
+      onClick={triggerModal}
+      aria-label={ariaLabel}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Trigger;
diff --git a/src/contexts/modalContext.tsx b/src/contexts/modalContext.tsx
new file mode 100644
index 0000000..5f3d9ca
--- /dev/null
+++ b/src/contexts/modalContext.tsx
@@ -0,0 +1,20 @@
+import { createContext, useState } from 'react';
+
+interface ModalContextProps {
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const ModalContext = createContext<ModalContextProps>(null);
+
+const ModalProvider = (props: React.PropsWithChildren) => {
+  const { children } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <ModalContext.Provider value={{ isOpen, setIsOpen }}>
+      {children}
+    </ModalContext.Provider>
+  );
+};
+
+export default ModalProvider;
diff --git a/src/hooks/useModal.ts b/src/hooks/useModal.ts
new file mode 100644
index 0000000..6f8a3c3
--- /dev/null
+++ b/src/hooks/useModal.ts
@@ -0,0 +1,26 @@
+import { useContext, useCallback } from 'react';
+import { ModalContext } from '../contexts/modalContext';
+
+const useModal = () => {
+  const context = useContext(ModalContext);
+
+  if (context === null) {
+    throw new Error('컴포넌트가 ModalProvider의 자손이 아닙니다.');
+  }
+
+  const { isOpen, setIsOpen } = context;
+
+  const show = useCallback(() => {
+    setIsOpen(true);
+  }, [setIsOpen]);
+  const hide = useCallback(() => {
+    setIsOpen(false);
+  }, [setIsOpen]);
+  const toggle = useCallback(() => {
+    setIsOpen((prev) => !prev);
+  }, [setIsOpen]);
+
+  return { isOpen, show, hide, toggle };
+};
+
+export default useModal;

From 827875a4d65fab51c916d712f7618ef0666023b4 Mon Sep 17 00:00:00 2001
From: Q Kim <qoli0703@gmail.com>
Date: Sat, 5 Aug 2023 19:20:24 +0900
Subject: [PATCH 7/9] feat: nav bar

---
 index.html                                    |  1 +
 src/components/NavBar/NavBar.css.ts           | 19 +++++++++++++
 src/components/NavBar/index.tsx               | 12 +++++++++
 .../NewMemoryModalButton.css.ts               | 27 +++++++++++++++++++
 src/components/NewMemoryModalButton/index.tsx | 18 +++++++++++++
 5 files changed, 77 insertions(+)
 create mode 100644 src/components/NavBar/NavBar.css.ts
 create mode 100644 src/components/NavBar/index.tsx
 create mode 100644 src/components/NewMemoryModalButton/NewMemoryModalButton.css.ts
 create mode 100644 src/components/NewMemoryModalButton/index.tsx

diff --git a/index.html b/index.html
index 96e1ec4..5392190 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,7 @@
   </head>
   <body>
     <div id="root"></div>
+    <div id="modal-root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/src/components/NavBar/NavBar.css.ts b/src/components/NavBar/NavBar.css.ts
new file mode 100644
index 0000000..6f7f4c4
--- /dev/null
+++ b/src/components/NavBar/NavBar.css.ts
@@ -0,0 +1,19 @@
+import { style } from '@vanilla-extract/css';
+
+export const bottomNav = style({
+  display: 'block',
+
+  position: 'fixed',
+  bottom: '0',
+  left: '0',
+
+  minWidth: '350px',
+  width: '100%',
+  height: '50px',
+
+  margin: 'auto auto 0 auto',
+
+  borderRadius: '5px',
+  border: '1px solid pink',
+  backgroundColor: '#ffffff',
+});
diff --git a/src/components/NavBar/index.tsx b/src/components/NavBar/index.tsx
new file mode 100644
index 0000000..a0119c3
--- /dev/null
+++ b/src/components/NavBar/index.tsx
@@ -0,0 +1,12 @@
+import NewMemoryModalButton from '../NewMemoryModalButton';
+import { bottomNav } from './NavBar.css';
+
+const NavBar = () => {
+  return (
+    <nav className={bottomNav}>
+      <NewMemoryModalButton />
+    </nav>
+  );
+};
+
+export default NavBar;
diff --git a/src/components/NewMemoryModalButton/NewMemoryModalButton.css.ts b/src/components/NewMemoryModalButton/NewMemoryModalButton.css.ts
new file mode 100644
index 0000000..03d0e55
--- /dev/null
+++ b/src/components/NewMemoryModalButton/NewMemoryModalButton.css.ts
@@ -0,0 +1,27 @@
+import { style } from '@vanilla-extract/css';
+
+export const circle = style({
+  cursor: 'pointer',
+
+  position: 'absolute',
+  top: '-24px',
+  left: 'calc(50% - 25px)',
+
+  boxSizing: 'border-box',
+  width: '60px',
+  height: '60px',
+
+  border: '7px solid #ffffff',
+  borderRadius: '50%',
+
+  color: '#ffffff',
+  fontSize: '30px',
+  backgroundColor: '#735BF2',
+});
+
+export const wrapper = style({
+  minHeight: '10%',
+  maxHeight: '80%',
+
+  padding: '20px 10px',
+});
diff --git a/src/components/NewMemoryModalButton/index.tsx b/src/components/NewMemoryModalButton/index.tsx
new file mode 100644
index 0000000..c238c75
--- /dev/null
+++ b/src/components/NewMemoryModalButton/index.tsx
@@ -0,0 +1,18 @@
+import Modal from '../Modal';
+import NewMemoryForm from '../NewMemoryForm';
+import { circle, wrapper } from './NewMemoryModalButton.css';
+
+const NewMemoryModalButton = () => (
+  <Modal>
+    <Modal.Trigger type="open" className={circle} aria-label="새로운 추억 새기기">
+      +
+    </Modal.Trigger>
+    <Modal.Content>
+      <div className={wrapper}>
+        <NewMemoryForm />
+      </div>
+    </Modal.Content>
+  </Modal>
+);
+
+export default NewMemoryModalButton;

From 91fce3cc5226c894e7d80d82078e0011af3eb375 Mon Sep 17 00:00:00 2001
From: Q Kim <qoli0703@gmail.com>
Date: Sat, 5 Aug 2023 19:20:50 +0900
Subject: [PATCH 8/9] =?UTF-8?q?feat:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20css=20=EC=A0=9C=EA=B1=B0,=20reset=20css=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.css   | 41 +++---------------------
 src/App.tsx   | 17 ++++------
 src/index.css | 19 -----------
 src/reset.css | 89 +++++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 100 insertions(+), 66 deletions(-)
 create mode 100644 src/reset.css

diff --git a/src/App.css b/src/App.css
index b9d355d..10bc114 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,42 +1,9 @@
 #root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
   text-align: center;
 }
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
diff --git a/src/App.tsx b/src/App.tsx
index 7263a5e..b11a617 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,20 +1,17 @@
+import './reset.css';
 import './App.css';
-import {
-  useQuery,
-  useMutation,
-  useQueryClient,
-  QueryClient,
-  QueryClientProvider,
-} from '@tanstack/react-query';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import NavBar from './components/NavBar';
 
 const queryClient = new QueryClient();
 
-function App() {
+const App = () => {
   return (
     <QueryClientProvider client={queryClient}>
-      hello, world!
+      <h1>hello, world!</h1>
+      <NavBar />
     </QueryClientProvider>
   );
-}
+};
 
 export default App;
diff --git a/src/index.css b/src/index.css
index 2c3fac6..f7c3a35 100644
--- a/src/index.css
+++ b/src/index.css
@@ -36,25 +36,6 @@ h1 {
   line-height: 1.1;
 }
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
diff --git a/src/reset.css b/src/reset.css
new file mode 100644
index 0000000..5de3687
--- /dev/null
+++ b/src/reset.css
@@ -0,0 +1,89 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+  v5.0.1 | 20191019
+  License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, menu, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+main, menu, nav, output, ruby, section, summary,
+time, mark, audio, video, dialog {
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline;
+  border: 0;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, main, menu, nav, section {
+  display: block;
+}
+
+/* HTML5 hidden-attribute fix for newer browsers */
+*[hidden] {
+    display: none;
+}
+
+body {
+  line-height: 1;
+}
+
+menu, ol, ul, dd {
+  list-style: none;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+/****** Elad Shechter's RESET *******/
+/*** box sizing border-box for all elements ***/
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+a { 
+  cursor: pointer; 
+  color: inherit;
+  text-decoration: none;
+  outline: none;
+}
+
+button {
+  cursor: pointer; 
+
+  padding: 0; 
+
+  color: inherit;
+
+  background-color: transparent;
+  border-width: 0;
+}
+
+input::-moz-focus-inner { 
+  margin: 0; 
+  padding: 0;
+  border: 0;
+}
\ No newline at end of file

From aabd2da2bac25c0dd979e8220e1de062b1620450 Mon Sep 17 00:00:00 2001
From: Q Kim <qoli0703@gmail.com>
Date: Sat, 5 Aug 2023 19:21:06 +0900
Subject: [PATCH 9/9] =?UTF-8?q?chore:=20eslint=20=EC=84=A4=EC=A0=95=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.cjs | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 926756e..ff5efdd 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -3,6 +3,7 @@ module.exports = {
     browser: true,
     es2021: true,
   },
+  root: true,
   extends: [
     "standard-with-typescript",
     "plugin:react/recommended",
@@ -13,7 +14,8 @@ module.exports = {
   parserOptions: {
     ecmaVersion: "latest",
     sourceType: "module",
-    project: "./tsconfig.json",
+    project: ["./tsconfig.json"],
+    createDefaultProgram: true,
   },
   plugins: ["react", "@typescript-eslint"],
   rules: {
@@ -21,6 +23,8 @@ module.exports = {
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/triple-slash-reference": "off",
     "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/strict-boolean-expressions": "off",
+    "@typescript-eslint/restrict-template-expressions": "off",
   },
   ignorePatterns: [".eslintrc.cjs", "vite.config.ts"],
 };