ShinjungOh · ShinjungOh · Nov 13, 2023 · Nov 6, 2023 · Nov 8, 2023 · Nov 8, 2023
diff --git a/README.md b/README.md
@@ -0,0 +1,221 @@
+<br/>
+
+<div align="center">
+  <img src="https://github.com/ShinjungOh/Haru-Hannyan/assets/39726717/436d3bd3-c143-4fc9-b574-bbe1a1c540f1" width="64px" />
+</div>
+
+<h3 align="center">
+    하루한냥 감정일기
+</h3>
+<p align="center">
+하루한냥은 고양이 스티커로 하루를 기록하는 감정일기입니다.<br/>   
+매일을 기록하고 나만의 고양이를 모아보세요.
+</p>
+
+<br />
+
+<div align="center">
+  <img src="https://github.com/ShinjungOh/Haru-Hannyan/assets/39726717/4baf010b-2be5-4f75-8421-6349453b85cb" width="24%" />
+  <img src="https://github.com/ShinjungOh/Haru-Hannyan/assets/39726717/93235d8d-e745-4499-b535-b4d908e8785b" width="24%" />
+  <img src="https://github.com/ShinjungOh/Haru-Hannyan/assets/39726717/ee04a78a-2c18-4703-8972-c10439a29b9a" width="24%" />
+  <img src="https://github.com/ShinjungOh/Haru-Hannyan/assets/39726717/d5c239f9-42e3-424a-a573-9b7bb79f72c6" width="24%" />
+</div>
+
+<br/><br />
+
+## 배포 링크 
+
+### [http://haru-hannyan.com](http://haru-hannyan.com)
+
+<br/><br/>
+
+## 시작하기
+
+### 설치 및 실행
+
+```bash
+git clone https://github.com/ShinjungOh/Haru-Hannyan
+```
+```bash
+npm install
+```
+
+```bash
+npm run dev
+```
+
+<br/><br/>
+
+## 사용한 기술
+
+<table>
+  <tbody>
+    <tr>
+      <td align="center" valign="middle">
+        <div>
+          <img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png" width="500" height="1" />
+          <img width="50" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Typescript_logo_2020.svg/640px-Typescript_logo_2020.svg.png" />
+          <p align="center">
+            TypeScript
+          <p>
+        </div>
+      </td>
+      <td align="center" valign="middle">
+        <div>
+          <img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png" width="500" height="1" />
+          <img width="50" src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F2f3409f4f8b64d5f880195061aa481ab" />
+          <p align="center">
+            React
+          </p>
+        </div>
+      </td>
+      <td align="center" valign="middle">
+        <div>
+          <img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png" width="500" height="1" />
+          <img width="50" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Vitejs-logo.svg/640px-Vitejs-logo.svg.png" />
+          <p align="center">
+            Vite
+          </P>
+        </div>
+      </td>
+      <td align="center" valign="middle">
+        <div>
+          <img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png" width="500" height="1" />
+          <img width="40" src="https://emotion.sh/logo-96x96.png" />
+          <p align="center">
+            Emotion
+          </p>
+        </div>
+      </td>
+      <td align="center" valign="middle">
+        <div>
+          <img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png" width="500" height="1" />
+          <img width="70" src="https://camo.githubusercontent.com/6f1bf9ab38c7c54c1ab470cce4fc9641e5ecc246e8016751b256bfdba615edaa/68747470733a2f2f696d67312e6461756d63646e2e6e65742f7468756d622f523132383078302f3f73636f64653d6d746973746f72793226666e616d653d68747470732533412532462532466b2e6b616b616f63646e2e6e6574253246646e2532467a7443707a253246627472526d547048507837253246374a564b654456337651534e356e666b324c76445530253246696d672e706e67" />
+          <p align="center">
+            Zustand
+          </p>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <td align="center" valign="middle">
+        <div>
+          <img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png" width="500" height="1" />
+          <img width="50" src="https://mulder21c.github.io//jest/img/jest.png" />
+          <p align="center">
+            Jest
+          </p>
+        </div>
+      </td>
+      <td align="center" valign="middle">
+        <div>
+          <img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png" width="500" height="1" />
+          <img width="50" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/GitHub_Invertocat_Logo.svg/640px-GitHub_Invertocat_Logo.svg.png" />
+          <p align="center">
+            Git
+          </p>
+        </div>
+      </td>
+      <td align="center" valign="middle">
+        <div>
+          <img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png" width="500" height="1" />
+          <img width="50" src="https://emojiisland.com/cdn/shop/products/Dog_Emoji_large.png?v=1571606065" />
+          <p align="center">
+            Husky
+          </p>
+        </div>
+      </td>
+      <td align="center" valign="middle">
+        <div>
+          <img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png" width="500" height="1" />
+          <img width="50" src="https://camo.githubusercontent.com/e7eb6839f0d42fffcd7435133609f4fe6a2cad787439321d809c273d66ac4c77/68747470733a2f2f74656368737461636b2d67656e657261746f722e76657263656c2e6170702f65736c696e742d69636f6e2e737667" />
+          <p align="center">
+            Eslint
+          </p>
+        </div>
+      </td>
+      <td align="center" valign="middle">
+        <div>
+          <img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png" width="500" height="1" />
+          <img width="50" src="https://camo.githubusercontent.com/82935f72bd8f7a84991ceeb91cba325f0ae3b00f7fb2af42da60a81d3ff631b4/68747470733a2f2f74656368737461636b2d67656e657261746f722e76657263656c2e6170702f70726574746965722d69636f6e2e737667" />
+          <p align="center">
+            Prettier
+          </p>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<br/><br/>
+
+## 하루한냥, 어떻게 만들었나요?  
+
+### 1️⃣ 피그마로 스토리보드를 기획했어요.
+
+[//]: # (<img width="25" src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Ffb77e93c28e044178e4694cc939bf4cf" />  )
+
+### [🎨 Figma 바로가기](https://www.figma.com/file/S88IviCMlCb4xS7rzNI5UK/%ED%95%98%EB%A3%A8%ED%95%9C%EB%83%A5?type=design&node-id=0%3A1&mode=design&t=r4R09lYfU7Jvpk4K-1)
+
+하루한냥의 **디자인 시안**과 **디자인 가이드**를 확인할 수 있어요.  
+피그마에 아이디어를 시각적으로 표현하고, 일관된 디자인 가이드를 적용했어요.      
+사용자에게 직관적인 인터페이스를 제공하며, 프로젝트의 전반적인 품질을 향상시켰어요.
+
+<br/>
+
+### 2️⃣ 체계적인 개발 프로세스를 거쳤어요.
+
+### [🔎 프로젝트 개발 과정 바로가기](https://github.com/ShinjungOh/Haru-Hannyan/wiki/01.-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EA%B0%9C%EB%B0%9C-%EA%B3%BC%EC%A0%95)
+
+<div align="center">
+  <img src="https://github.com/ShinjungOh/Haru-Hannyan/assets/39726717/2178baf2-7370-4a7d-a2b5-caf54681188f" width="96%" />
+</div>
+
+각각의 기능 별 **이슈**를 생성하고, 해당 이슈로 **브랜치**를 생성해 작업을 수행했어요. 
+어떤 내용이 변경되었는지 명확하게 전달하기 위해 각 **커밋**에는 **상세한 메시지**를 추가했어요. 
+
+코드의 일관성과 품질을 보장하기 위해, **Eslint**와 **Prettier**를 적용했어요. 
+**Husky**를 사용해 pre-commit 시점에 코드 검사를 수행하고,
+**GitHub Actions**로 지속적인 통합(CI)을 구현해 프로젝트의 안정성을 높였어요. 
+
+각 기능 구현을 마치면 **Pull request**를 통해 멘토와의 **코드 리뷰**를 진행했어요. 
+코드의 품질을 개선하고 다양한 관점을 얻는 귀중한 경험의 시간이었어요.
+소통하며 개발 능력을 향상시키고, 프로젝트 전반의 퀄리티를 높이는 데 크게 기여했어요.
+
+<br/>
+
+### 3️⃣ 프로젝트 컨벤션을 정해서 진행했어요.
+
+### [📃 프로젝트 컨벤션 바로가기](https://github.com/ShinjungOh/Haru-Hannyan/wiki/02.-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%BB%A8%EB%B2%A4%EC%85%98)
+
+일관된 **개발 컨벤션**을 적용해, 프로젝트의 통일성을 높였어요.
+브랜치 이름과 커밋 메시지에 동일한 규칙을 적용해서 어떤 작업이 진행되었는지 **추적**하기 편하고 **이해**하기 쉬워요.
+
+코드의 역할에 따라 **디렉토리**를 분리했어요. 꼭 필요한 부분만 분리해 깔끔한 구조를 만들었어요.
+재사용 가능한 **공통 컴포넌트**, **스타일**을 분리해 효율성이 높아졌어요.
+
+<br/>
+
+### 4️⃣ 블로그에 개발 과정이 담겨있어요.
+
+### [✍️ Blog 바로가기](https://shinjungoh.tistory.com/category/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8/%ED%95%98%EB%A3%A8%ED%95%9C%EB%83%A5)
+
+하루한냥의 **탄생**과 **발전**을 볼 수 있어요.   
+사용성을 높이기 위한 **리팩토링**과 어려움을 겪었던 **트러블 슈팅** 과정을 생생하게 담았어요.  
+
+- [[트러블 슈팅] 11월이 되어야 관측되는 오류가 있다?](https://shinjungoh.tistory.com/entry/%ED%8A%B8%EB%9F%AC%EB%B8%94-%EC%8A%88%ED%8C%85-11%EC%9B%94%EC%9D%B4-%EB%90%98%EC%96%B4%EC%95%BC-%EA%B4%80%EC%B8%A1%EB%90%98%EB%8A%94-%EC%98%A4%EB%A5%98%EA%B0%80-%EC%9E%88%EB%8B%A4)
+- [[하루한냥] 심리 테스트 구현 : API 호출 함수 분리하기](https://shinjungoh.tistory.com/entry/%ED%95%98%EB%A3%A8%ED%95%9C%EB%83%A5-%EC%8B%AC%EB%A6%AC-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EA%B5%AC%ED%98%84-API-%ED%98%B8%EC%B6%9C-%ED%95%A8%EC%88%98-%EB%B6%84%EB%A6%AC%ED%95%98%EA%B8%B0)
+- [[하루한냥] 심리 테스트 구현 : 라디오 버튼 구현하기](https://shinjungoh.tistory.com/entry/%ED%95%98%EB%A3%A8%ED%95%9C%EB%83%A5-%EC%8B%AC%EB%A6%AC-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EA%B5%AC%ED%98%84-%EB%9D%BC%EB%94%94%EC%98%A4-%EB%B2%84%ED%8A%BC-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0)
+- [[리팩토링] useRef로 반응형 resize 이벤트 구현하기 (+ throttle)](https://shinjungoh.tistory.com/entry/%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81-useRef%EB%A1%9C-%EB%B0%98%EC%9D%91%ED%98%95-resize-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-throttle)
+- [[트러블 슈팅] 11월이 되어야 관측되는 오류가 있다?](https://shinjungoh.tistory.com/entry/%ED%8A%B8%EB%9F%AC%EB%B8%94-%EC%8A%88%ED%8C%85-11%EC%9B%94%EC%9D%B4-%EB%90%98%EC%96%B4%EC%95%BC-%EA%B4%80%EC%B8%A1%EB%90%98%EB%8A%94-%EC%98%A4%EB%A5%98%EA%B0%80-%EC%9E%88%EB%8B%A4)
+- [[리팩토링] 디렉토리별 index를 이용한 모듈화 작업하기](https://shinjungoh.tistory.com/entry/%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81-%EB%94%94%EB%A0%89%ED%86%A0%EB%A6%AC%EB%B3%84-index%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EB%AA%A8%EB%93%88%ED%99%94-%EC%9E%91%EC%97%85%ED%95%98%EA%B8%B0)
+- [[트러블 슈팅] Context와 Promise에 타입스크립트를 싸서 드셔보세요](https://shinjungoh.tistory.com/entry/%ED%8A%B8%EB%9F%AC%EB%B8%94-%EC%8A%88%ED%8C%85-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%97%90-Context%EC%99%80-Promise%EB%A5%BC-%EC%8B%B8%EC%84%9C-%EB%93%9C%EC%85%94%EB%B3%B4%EC%84%B8%EC%9A%94)
+- [[하루한냥] 모달 모듈화 구현 : OverlayProvider와 Context API](https://shinjungoh.tistory.com/entry/%ED%95%98%EB%A3%A8%ED%95%9C%EB%83%A5-%EB%AA%A8%EB%8B%AC-%EB%AA%A8%EB%93%88%ED%99%94-%EA%B5%AC%ED%98%84-OverlayProvider%EC%99%80-Context-API)
+- [[하루한냥] 캘린더 구현 : Zustand를 이용한 상태관리 구현하기](https://shinjungoh.tistory.com/entry/%ED%95%98%EB%A3%A8%ED%95%9C%EB%83%A5-%EC%BA%98%EB%A6%B0%EB%8D%94-%EA%B5%AC%ED%98%84-Zustand%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0)
+- [[하루한냥] 캘린더 구현 : 달력의 시작 요일과 마지막날 구하기](https://shinjungoh.tistory.com/entry/%ED%95%98%EB%A3%A8%ED%95%9C%EB%83%A5-%EC%BA%98%EB%A6%B0%EB%8D%94-%EA%B5%AC%ED%98%84-%EB%8B%AC%EB%A0%A5%EC%9D%98-%EC%8B%9C%EC%9E%91-%EC%9A%94%EC%9D%BC%EA%B3%BC-%EB%A7%88%EC%A7%80%EB%A7%89%EB%82%A0-%EA%B5%AC%ED%95%98%EA%B8%B0)
+- [[하루한냥] 로그인/회원가입 : 카카오 소셜 로그인 구현](https://shinjungoh.tistory.com/entry/%ED%95%98%EB%A3%A8%ED%95%9C%EB%83%A5-%EB%A1%9C%EA%B7%B8%EC%9D%B8%ED%9A%8C%EC%9B%90%EA%B0%80%EC%9E%85-%EC%B9%B4%EC%B9%B4%EC%98%A4-%EC%86%8C%EC%85%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84)
+- [[트러블 슈팅] 모듈 시스템과 Jest 테스트](https://shinjungoh.tistory.com/entry/%ED%8A%B8%EB%9F%AC%EB%B8%94-%EC%8A%88%ED%8C%85-%EB%AA%A8%EB%93%88-%EC%8B%9C%EC%8A%A4%ED%85%9C%EA%B3%BC-Jest-%ED%85%8C%EC%8A%A4%ED%8A%B8)
+- [[하루한냥] 레이아웃 구현 : 반응형 웹페이지를 위한 준비](https://shinjungoh.tistory.com/entry/%ED%95%98%EB%A3%A8%ED%95%9C%EB%83%A5-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83-%EA%B5%AC%ED%98%84-%EB%B0%98%EC%9D%91%ED%98%95-%EC%9B%B9%ED%8E%98%EC%9D%B4%EC%A7%80%EB%A5%BC-%EC%9C%84%ED%95%9C-%EC%A4%80%EB%B9%84)
+- [[하루한냥] 레이아웃 구현 : 메뉴바 구현과 리팩토링](https://shinjungoh.tistory.com/entry/%ED%95%98%EB%A3%A8%ED%95%9C%EB%83%A5-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83-%EA%B5%AC%ED%98%84-%EB%A9%94%EB%89%B4%EB%B0%94-%EA%B5%AC%ED%98%84%EA%B3%BC-%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81)
+
+<br/><br />
diff --git a/index.html b/index.html
@@ -4,12 +4,19 @@
   <meta charset='UTF-8' />
   <link rel='icon' type='image/svg+xml' href='images/icon/menu/feel-cat.svg' />
   <meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no' />
+  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+  })(window,document,'script','dataLayer','GTM-K6LTK9X3');</script>
   <meta property='og:title' content='하루한냥'>
   <meta property='og:image' content='https://user-images.githubusercontent.com/97431021/278786434-ab0014ca-8bdb-40d4-ac0f-70537aa80904.png'>
   <meta property="og:site_name" content="하루한냥"/>
   <meta property="og:description" content="고양이 스티커로 하루를 기록하는 감정일기"/>
   <title>하루한냥</title>
 </head>
+<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K6LTK9X3"
+                  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
 <body>
 <div id='root'></div>
 <script type='module' src='/src/main.tsx'></script>

diff --git a/src/assets/react.svg b/src/assets/react.svg