architecture

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

📁 프로젝트 구조 설명

📦src
 ┣ 📂assets
 ┃ ┗ 📜react.svg
 ┣ 📂components
 ┃ ┣ 📂common
 ┃ ┃ ┗ 📜TheFooter.tsx
 ┃ ┣ 📂diary
 ┃ ┃ ┗ 📜Header.tsx
 ┃ ┣ 📂home
 ┃ ┃ ┗ 📜DiaryList.tsx
 ┃ ┣ 📂login
 ┃ ┃ ┣ 📜KakaoCallback.tsx
 ┃ ┃ ┗ 📜Login.tsx
 ┃ ┗ 📜CustomDatePicker.tsx
 ┣ 📂pages
 ┃ ┣ 📂chatting
 ┃ ┃ ┣ 📜ChatPage.tsx
 ┃ ┃ ┗ 📜SettingPage.tsx
 ┃ ┣ 📂collection
 ┃ ┃ ┣ 📜Comments.tsx
 ┃ ┃ ┣ 📜HashtagDetail.tsx
 ┃ ┃ ┗ 📜Hashtags.tsx
 ┃ ┣ 📂writing
 ┃ ┃ ┣ 📜EditPage.tsx
 ┃ ┃ ┗ 📜WritingPage.tsx
 ┃ ┣ 📜DiaryDetail.tsx
 ┃ ┣ 📜Home.tsx
 ┃ ┣ 📜LoadingPage.tsx
 ┃ ┣ 📜LoginPage.tsx
 ┃ ┗ 📜Testpage.tsx
 ┣ 📂services
 ┃ ┣ 📂apis
 ┃ ┃ ┣ 📂chatting
 ┃ ┃ ┃ ┗ 📜chat.ts
 ┃ ┃ ┣ 📂collection
 ┃ ┃ ┃ ┣ 📜�comment.ts
 ┃ ┃ ┃ ┗ 📜collection.ts
 ┃ ┃ ┣ 📂diary
 ┃ ┃ ┃ ┣ 📜diary.ts
 ┃ ┃ ┃ ┗ 📜writing.ts
 ┃ ┃ ┣ 📂hashtag
 ┃ ┃ ┃ ┗ 📜hashtag.ts
 ┃ ┃ ┣ 📜apitest.ts
 ┃ ┃ ┣ 📜axiosInstance.ts
 ┃ ┃ ┗ 📜axiosInstanceWithToken.ts
 ┃ ┣ 📂gpt
 ┃ ┃ ┗ 📜openai.ts
 ┃ ┗ 📂zustand
 ┃ ┃ ┗ 📜setting.ts
 ┣ 📜App.css
 ┣ 📜App.tsx
 ┣ 📜index.css
 ┣ 📜main.tsx
 ┗ 📜vite-env.d.ts
📦public
 ┣ 📂images
 ┃ ┣ 📂characters
 ┃ ┃ ┣ 📂reading
 ┃ ┃ ┣ 📂writing
 ┃ ┃ ┣ 📜앙글이.png
 ┃ ┃ ┣ 📜웅이.png
 ┃ ┃ ┗ 📜티바노.png
 ┃ ┣ 📜arrow.png
 ┃ ┣ 📜home.png
 ┃ ┣ 📜icon.png
 ┃ ┣ 📜meta.png
 ┃ ┣ 📜next.png
 ┃ ┗ 📜send.png
 ┗ 📜_redirects

📦 주요 라이브러리 및 설정 요약

🔧 주요 의존성 (dependencies)

라이브러리	설명
react, react-dom	사용자 인터페이스 구축의 핵심 라이브러리
react-router-dom	SPA 내 페이지 라우팅 처리 (useNavigate, useParams 등)
zustand	경량 전역 상태 관리 라이브러리 (useSettingStore 등에서 사용)
styled-components	CSS-in-JS 방식으로 컴포넌트별 스타일 정의
axios	비동기 API 요청 처리 (postDiary, postComment 등)
react-icons	아이콘 컴포넌트화 (IoHomeOutline, BsArrowRight 등)
react-mobile-picker	모바일 친화적 드럼형 날짜 선택 UI 구현에 사용됨
Gowun Dodum (Google Fonts)	사용자 정의 웹폰트, 전역 스타일에서 font-family로 사용

---

🧪 개발용 의존성 (devDependencies)

라이브러리	설명
vite	빠르고 가벼운 프론트엔드 개발 번들러
@vitejs/plugin-react-swc	SWC 기반으로 React 프로젝트 트랜스파일링
eslint	코드 품질 유지를 위한 린팅 도구
eslint-plugin-react-hooks	React Hook 린팅 지원
eslint-plugin-react-refresh	HMR을 위한 린팅 플러그인
typescript	정적 타입 언어 지원
@typescript-eslint/eslint-plugin	TypeScript 린팅 규칙 제공
@typescript-eslint/parser	ESLint와 TypeScript 통합용 파서
@types/*	TypeScript용 타입 선언 패키지 (예: @types/react 등)

🔌 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 또는 인터셉터 사용