architecture

🏗️ 프로젝트 구조 및 개발 흐름

📁 프로젝트 구조 설명

src/
├── assets/
├── components/
│   ├── common/
│   ├── diary/
│   ├── home/
│   ├── login/
├── pages/
│   ├── chatting/
│   ├── collection/
│   ├── writing/
├── services/
│   ├── apis/
│   ├── gpt/
│   ├── zustand/
├── App.tsx / main.tsx
└── styles/

public/
└── images/

📦 주요 라이브러리 목록

종류	라이브러리
UI	React 19, styled-components
라우팅	react-router-dom v7
상태관리	Zustand
통신	axios
애니메이션	react-mobile-picker
아이콘	react-icons
번들러	Vite + SWC

🔌 API 통신 규칙

• axios 인스턴스 분리
  • /services/apis/axiosInstance.ts
  • /services/apis/axiosInstanceWithToken.ts
• 호출 예시

  import axios from './axiosInstance';
  
  export const fetchDiaries = async () => {
    const res = await axios.get('/diary');
    return res.data;
  };

• 응답 처리
  • try-catch 또는 인터셉터 사용