my-movie-book-search-app/ ├── public/ │ ├── index.html │ └── ... ├── src/ │ ├── assets/ # 이미지, 폰트 등의 정적 파일 │ ├── components/ # 재사용 가능한 UI 컴포넌트
│ │ │ ├── banner/ # 배너 관련 컴포넌트
│ │ │ ├── chatbot/ # 챗봇 관련 컴포넌트
│ │ │ ├── contexts/ # 컨텍스트 관련 컴포넌트 │ │ │ ├── modals/ # 모달 관련 컴포넌트
│ │ │ ├── layout/ # 레이아웃 관련 컴포넌트 │ │ │ │ ├── Header.js │ │ │ │ ├── Footer.js │ │ │ │ └── Layout.js │ │ ├── SearchBar.js │ │ ├── MovieCard.js │ │ └── BookCard.js
│ ├── hooks/ # React의 커스텀 훅을 관리하는 파일 │ ├── pages/ # 페이지별 컴포넌트
│ │ │ ├── MainPage
│ │ │ │ ├── MainPage.jsx
│ │ │ │ └── MainPage.css
│ │ │ └── MyPage │ │ └── BookCard.js │ ├── services/ # API 요청 및 로직 │ ├── store/ # 상태 관리 (예: Redux, Zustand 등) │ ├── styles/ # 글로벌 스타일 (Tailwind 설정 포함) │ ├── utils/ # 유틸리티 함수 │ ├── App.js # 애플리케이션의 메인 컴포넌트 │ ├── index.js # 엔트리 포인트 └── package.json
public/
정적 파일을 저장하는 폴더입니다. 예를 들어, index.html 파일이나 이미지 파일 등을 저장합니다.
src/
애플리케이션의 소스 코드가 위치하는 폴더입니다.
assets/
이미지, 아이콘, 폰트 등 자주 사용되는 리소스를 저장합니다.
components/
재사용 가능한 UI 컴포넌트를 저장합니다. 예를 들어, 검색 바, 영화/도서 카드, 필터 컴포넌트 등입니다.
SearchBar.jsMovieCard.jsBookCard.jspages/
각 페이지에 해당하는 컴포넌트를 저장합니다. 예를 들어, 검색 결과 페이지, 상세 페이지 등입니다.
HomePage.jsSearchResultsPage.jsMovieDetailPage.jsBookDetailPage.jsservices/
API 호출 로직을 관리하는 폴더입니다. 영화와 도서 검색을 위한 API 요청을 처리하는 파일을 여기에 두면 좋습니다.
movieService.jsbookService.jsstore/
상태 관리 관련 파일을 저장합니다. Redux나 Zustand 등을 사용하는 경우 상태 관련 로직을 이곳에 두면 됩니다.
styles/
글로벌 스타일 파일을 저장합니다. Tailwind CSS를 사용할 경우, 여기에 설정 파일이나 글로벌 스타일을 작성할 수 있습니다.
tailwind.config.jsglobal.cssutils/
여러 곳에서 사용되는 유틸리티 함수들을 모아 놓는 폴더입니다. 예를 들어, 날짜 포맷팅 함수나 API 에러 핸들링 함수 등을 여기에 넣을 수 있습니다.
formatDate.jsapiUtils.jsApp.js
애플리케이션의 메인 컴포넌트입니다. 라우팅, 레이아웃, 전역 상태 등을 관리할 수 있습니다.
index.js
리액트 앱의 진입점입니다. 여기서 ReactDOM을 이용해 애플리케이션을 렌더링합니다.