Update after demo

.storybook/main.ts

@@ -4,6 +4,10 @@ const path = require("path");
 const STORYBOOK_SCOPE = process.env.STORYBOOK_SCOPE;
 
 const config = {
+  managerHead: (head) => `
+  ${head}
+  <link rel="icon" type="image/png" href="/app/icon.png" />
+  `,
   stories: [
     "./Introduction.mdx",
     "./CHANGELOG.mdx",
@@ -14,7 +18,7 @@ const config = {
         ]
       : [
           "../components/**/*.stories.@(js|jsx|mjs|ts|tsx)",
-          "../app/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+          "../app/**/*.stories.@(js|jsx|mjs|ts|tsx)",
         ]),
   ],
   addons: [

README.md

@@ -1,32 +1,246 @@
-# Motimo: FE
+<div align="center">
 
-## 임시 내용.. Token관련
+# 🚀 Motimo
 
-> 일단 수동으로 tailwind 토큰화한다.
+**목표를 효과적으로 달성하는 방법, 모티모**
 
-- upstream의 design 브랜치에 토큰 json이 업데이트 된다.
-- `npm run build-tokens`를 통해 app/tokens.css를 업데이트 한다
+<br/>
 
-## ✨ Motimo 프론트엔드 레포지토리에 오신 것을 환영합니다!
+<img width="394" height="567" alt="모티모 포스터" src="https://github.com/user-attachments/assets/d78bffcc-99cf-4367-8b54-71a82944eb20" />
 
-> 디자인 시스템 배포 페이지
+[버그 신고](https://github.com/prography/10th-Motimo-FE/issues) · [기능 요청](https://github.com/prography/10th-Motimo-FE/issues)
 
-<a href="10th-motimo-storybook.vercel.app">10th-motimo-storybook.vercel.app</a>
+**[데모 링크](https://motimo-fe-dev.netlify.app)**
+
+</div>
+
+<br/>
+
+---
+
+<br/>
+
+## 📋 목차
+
+- [📑 소개](#-소개)
+- [✨ 주요 기능](#-주요-기능)
+- [🛠️ 기술 스택](#️-기술-스택)
+- [⭐ 주요 페이지 동작](#-주요-페이지-동작)
+- [👥 팀](#-팀)
+- [🚀 Moiomo 디자인 시스템 둘러보기](#-motimo-디자인-시스템-둘러보기)
+- [🤝 기여하기](#-기여하기)
+- [📄 라이선스](#-라이선스)
+- [🙏 감사의 말](#-감사의-말)
+
+<br/><br/>
+
+## 📑 소개
+
+<div>
+
+- 혼자 꾸준히 지속하기 어려운 **기간이 긴 목표** 달성. 모티모에서 다른 사람들과 함께 동기부여를 주며 목표를 달성해보세요!
+- **그룹방**에서 여러 사람들이 투두를 달성하는 것을 보고 동기부여를 얻을 수 있어요!
+- 혼자가 아니라 함께하면 목표 달성률이 올라가요! 서로에게 동기부여를 주며 목표를 달성해봐요!
+</div>
+
+<br/><br/>
+
+## ✨ 주요 기능
+
+#### 🌟 **중장기 목표 설정**
+
+&nbsp; 목표 - 세부목표 - 투두 단계로 할 일을 세분화 할 수 있습니다.
+
+#### 🔥 **기록 남기기**
+
+&nbsp; 투두를 완료 후 감정과 사진 등 기록을 남겨 상세히 정리할 수 있습니다.
+
+#### 💡 **그룹**
+
+&nbsp; 그룹에 들어가 다른 사람들과 투두에 대해 상호작용하며 동기부여를 얻을 수 있습니다.
+
+#### 🎯 **피드**
+
+&nbsp; 보다 많은 사람들의 목표와 달성 과정을 확인하며 동기부여를 얻을 수 있습니다.
 
-## 🚀 Motimo 프론트엔드의 핵심 목표
+<br/><br/>
 
 ## 🛠️ 기술 스택
 
-## 🚧 현재 상태 및 기여
+<div align="center">
+
+### Frontend
+
+![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
+![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)
+![Next.js](https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=next.js&logoColor=white)
+![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)
+![SWR](https://img.shields.io/badge/SWR-000000?style=for-the-badge&logo=swr&logoColor=white)
+![Zustand](https://img.shields.io/badge/Zustand-443E38?style=for-the-badge&logo=zustand&logoColor=white)
+
+### DevOps & Tools
+
+![GitHub Actions](https://img.shields.io/badge/GitHub_Actions-2088FF?style=for-the-badge&logo=github-actions&logoColor=white)
+![Vercel](https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white)
+![Chromatic](https://img.shields.io/badge/Chromatic-FC521F?style=for-the-badge&logo=chromatic&logoColor=white)
+![Netlify](https://img.shields.io/badge/Netlify-0BBFBC?style=for-the-badge&logo=netlify&logoColor=white)
+
+</div>
+
+<br/><br/>
+
+## ⭐ 주요 페이지 동작
+
+> ### 온보딩
+
+- 회원가입 및 로그인
+- 목표 생성과정을 온보딩에 적용
+
+[온보딩](https://github.com/user-attachments/assets/34f0ff79-a5f7-42ea-902d-c8d8deabb9de)
+
+> ### 메인 페이지
+
+- 목표 선택 및 세부 목표별 투두 작성
+- 투두 결과 제출
+- 투두 수정 및 삭제
+- 목표 추가
+
+[메인페이지](https://github.com/user-attachments/assets/9901e0e8-49b8-4ece-83ff-5f5dfc25dfa0)
+
+> ### 목표 상세 페이지
+
+- 세부 목표 완료, 목표 달성 처리
+- 투두 결과 제출
+- 목표명, 기간, 세부 목표 위치와 이름 수정 및 삭제
+
+[목표 상세 페이지](https://github.com/user-attachments/assets/8b9b888d-cc5d-4f27-b417-544165a8c1aa)
+
+> ### 그룹 페이지
+
+- 그룹 참여
+- 투두 완료, 결과 제출에 대한 리액션
+- 그룹 참여원 찌르기
+
+[그룹페이지](https://github.com/user-attachments/assets/cc3c99a8-a7e9-4191-bd8d-ba7b2ae693e2)
 
-### 시작하기
+> ### 마이 페이지
 
-### 기여 방법
+- 개인정보 및 관심사 수정
+- 달성한 목표 확인
+- 알림 설정
+- 로그아웃
 
-## 🔗 백엔드 레포지토리
+[마이페이지](https://github.com/user-attachments/assets/9d426c51-b341-40fc-a3c7-8d0ca14bf669)
 
-## 📧 연락처
+<br/><br/>
+
+## 👥 팀
+
+<div align="center">
+
+|          역할          |  이름  |                  GitHub                  |
+| :--------------------: | :----: | :--------------------------------------: |
+| **Frontend Developer** | 이상현 |  [@Hys-Lee](https://github.com/Hys-Lee)  |
+| **Frontend Developer** | 조형관 |  [@devgony](https://github.com/devgony)  |
+| **Backend Developer**  | 고범석 | [@qjatjr29](https://github.com/qjatjr29) |
+| **Backend Developer**  | 이종은 | [@jongeuni](https://github.com/jongeuni) |
+|   **Project Owner**    | 신동민 |                    -                     |
+|      **Designer**      | 전석희 |                    -                     |
+
+</div>
+
+> ### FE 역할 분담
+
+#### 이상현
+
+- UI
+  - 페이지: 메인 페이지, 상세 페이지, 그룹 채팅방
+  - 주요 공용 컴포넌트: 모달, 바텀시트
+- 기능
+  - 모달, 바텀시트, 토스트 전역 커스텀 훅
+  - 투두, 채팅 무한 스크롤
+- 개발
+  - 스토리북 설정(plop.js) 및 공통 컴포넌트 디자인 시스템화(vercel), 패키지화.
+  - 크로마틱 CI 적용
+  - Figma 디자인 토큰 Tailwind 토큰화 (Token Studio, Style Dictionary)
+  - 스테이징 배포 (netlify)
+
+#### 조형관
+
+- UI
+  - 페이지: 온보딩, 마이 페이지, 그룹 페이지
+  - 주요 공용 컴포넌트: 쿠퍼티노 피커, Lottie 로딩 애니메이션 컴포넌트
+- 기능
+  - OAuth 로그인
+  - 공통 api fetcher 제작
+- 개발
+  - API 생성 (swagger-typescript-api)
+  - Cursor 사용한 제작
+
+<br/><br/>
+
+## 🚀 Motimo 디자인 시스템 둘러보기
+
+> ### **디자인 시스템 페이지**
+
+<img width="1894" height="945" alt="image" src="https://github.com/user-attachments/assets/0154c0fc-1dcf-4f58-b415-591a75fd751e" />
+<a href="10th-motimo-storybook.vercel.app">10th-motimo-storybook.vercel.app</a>
+
+<br/><br/>
+
+> ### **Motimo 공통 컴포넌트 패키지**
+>
+> <img width="1476" height="937" alt="image" src="https://github.com/user-attachments/assets/ade5a4fc-e020-456a-bd8b-b3fc931cc3fe" />
+
+<a href="https://www.npmjs.com/package/motimo-shared-ui">https://www.npmjs.com/package/motimo-shared-ui</a>
+
+<br/><br/>
+
+## 🤝 기여하기
+
+### 🐛 버그 신고
+
+버그를 발견하셨나요? [이슈](https://github.com/prography/10th-Motimo-FE/issues)를 생성해주세요!
+
+### 💡 기능 제안
+
+새로운 기능을 제안하고 싶으시다면 [토론](https://github.com/prography/10th-Motimo-FE/discussions)에서 의견을 나눠주세요!
+
+<br/><br/>
+
+<!-- ## 📊 통계
+
+<div align="center">
+
+![GitHub Stats](https://github-readme-stats.vercel.app/api?username=username&show_icons=true&theme=radical)
+
+![Top Languages](https://github-readme-stats.vercel.app/api/top-langs/?username=username&layout=compact&theme=radical)
+
+</div>
+
+---
+-->
 
 ## 📄 라이선스
 
-이 프로젝트는 [예: MIT License]에 따라 라이선스됩니다. 자세한 내용은 `LICENSE` 파일을 참조하세요.
+이 프로젝트는 **MIT License** 하에 배포됩니다. 자세한 내용은 [LICENSE](LICENSE) 파일을 참조하세요.
+
+<br/><br/>
+
+## 🙏 감사의 말
+
+- [Vaul](https://github.com/emilkowalski/vaul) - 바텀 시트에 사용된 라이브러리
+- [Motion](https://github.com/motiondivision/motion) - 애니메이션에 사용된 라이브러리
+- [Contributors](https://github.com/prography/10th-Motimo-FE/contributors) - 모든 기여자분들께 감사드립니다
+- [Prography](https://prography.org/) - 활발한 개발 환경 지원
+- Motimo 팀원들과 Progarphy 10기 분들
+
+<br/><br/>
+
+<div align="center">
+
+**⭐ 이 프로젝트가 도움이 되셨다면 스타를 눌러주세요! ⭐**
+
+Made with ❤️
+
+</div>

api/service.ts

@@ -1,5 +1,6 @@
 import { Api, HttpClient } from "./generated/motimo/Api";
 import useAuthStore from "../stores/useAuthStore";
+import useToastStore from "@/stores/useToastStore";
 
 // HTTP 클라이언트 생성 시 인증 헤더를 자동으로 추가하는 securityWorker 설정
 const httpClient = new HttpClient({
@@ -16,10 +17,52 @@ const httpClient = new HttpClient({
       };
     }
 
+    const isGuest = useAuthStore.getState().isGuest;
+    if (isGuest) {
+      return { format: "json" };
+    }
+
     return {};
   },
 });
 
+// 비동기 에러 시 toast 띄우기
+const showToast = (content: string, createdAt: Date) => {
+  useToastStore.getState().updateToastInfo({ content, createdAt });
+};
+
+// Debouncer 감싸도 될 것 같은데?
+const debounceer = <T, E>(apiRequest: typeof httpClient.request<T, E>) => {
+  const timeLimit = 1000;
+  let timer: number;
+  let rejectTimer: (reason?: any) => void;
+  return (
+    requestParams: Parameters<typeof httpClient.request<T, E>>[0],
+  ): ReturnType<typeof httpClient.request<T>> => {
+    if (timer) {
+      clearTimeout(timer);
+      rejectTimer("debouncing");
+    }
+    const apiRes: Promise<T> = new Promise((resolve, reject) => {
+      rejectTimer = reject;
+      timer = Number(
+        setTimeout(async () => {
+          try {
+            const res = apiRequest(requestParams);
+            resolve(res);
+          } catch (error) {
+            console.error(error);
+            showToast(`API ERROR`, new Date());
+          }
+        }, timeLimit),
+      );
+    });
+    return apiRes;
+  };
+};
+
+httpClient.request = debounceer(httpClient.request);
+
 // API 클라이언트 인스턴스 생성
 export const api = new Api(httpClient);