src/
├── components/
│ ├── Header.js (헤더 컴포넌트)
│ │ - 페이지 상단에 위치하는 헤더 렌더링
│ │ - 카드 생성 페이지로 이동 가능한 링크 제공
│ │ - 메인 페이지(로고클릭)로 이동가능한 링크 제공
│ │ - 로그인 및 회원가입 페이지로 이동가능한 링크 제공
│ ├── DropDown.js (헤더 드롭다운 컴포넌트)
│ │ - 헤더 알람창 클릭 시 드롭다운
| | - 헤더 프로필 클릭 시 드롭다운 ( 로그인 및 마이페이지 이동 가능한 링크제공 )
│ ├── Footer.js (푸터 컴포넌트)
│ │ - 페이지 하단에 위치하는 푸터 렌더링
│ ├── CardList.js (카드 목록 컴포넌트)
│ | - 생성된 카드를 서버에서 받아와 카드 이미지만 렌더링
| | - 카드 클릭 시 카드조회 페이지로 이동가능한 링크 제공
│ ├── Effect.js (카드 효과 컴포넌트)
| | - 효과 렌더링
| ├── Button.js
| | - 버튼 컴포넌트(텍스트,아이콘 포함)
├── services/
│ ├── api.js (API 서비스 모듈)
│ │ - 서버와 통신, 데이터 요청 및 응답 처리 (회원가입, 로그인, 카드 생성, 카드 조회 등)
│ ├── kakaoPayment.js (카카오 결제 서비스 모듈)
│ | - 카카오 결제 API를 사용하여 결제 요청을 처리
│ ├── kakaoShare.js (카카오 공유 API 모듈)
│ | - 카카오 공유 API 제공
│ ├── kakaoMap.js (카카오 지도 API 모듈)
│ | - 카카오 지도 API 제공
├── pages/
│ ├── LoginPage.js (로그인 페이지)
│ │ - 로그인 폼을 구성하고 사용자 인증 정보를 서버로 전송
│ ├── SignupPage.js (회원가입 페이지)
│ │ - 회원가입 폼을 구성하고 사용자 정보를 서버로 전송
│ ├── HomePage.js (메인 페이지)
| | - 서비스소개 렌더링
│ │ - 각 카테고리 필터 구현 (인기순,정렬구현)
| | - 검색 기능
│ ├── InvitePage.js (카드 생성 페이지)
│ │ - 카드 생성을 위한 폼 구성, 사용자 입력을 받음
│ │ - 카드 생성에 필요한 정보를 서버로 전송
| | - 카드 이미지를 서버에서 받아서 렌더링
| | - 카카오 맵 api 호출 ?
| | - 저장 시 유저페이지 (나의목록) 또는 메인페이지 이동 링크 제공
│ ├── InviteWritePage.js (카드 조회 페이지 컴포넌트)
│ │ - 카드의 상세 정보 서버에서 받아와서 렌더링(지도포함)
│ │ - 카카오 송금 버튼 클릭 시 카카오 결제 API 호출
| | - 카카오 공유 버튼 클릭 시 카카오 공유 API 호출
| | - 참여한 유저의 프로필 및 인원수 렌더링
| | - 참여기능
| | - 좋아요 표시 기능
| | - 라이브톡 기능
│ ├── MyPage.js (유저 프로필 페이지)
│ | - 유저의 프로필 이미지 서버에서 받아서 렌더링
| | - 유저 정보 렌더링
| | - 찜목록,나의모임 렌더링
├── redux/
│ ├── actions/
│ │ ├── userActions.js (유저 관련 액션 생성자)
│ │ ├── cardActions.js (카드 관련 액션 생성자)
│ │ └── ... (기타 액션 생성자)
│ ├── reducers/
│ │ ├── userReducer.js (유저 관련 리듀서)
│ │ ├── cardReducer.js (카드 관련 리듀서)
│ │ ├── ... (기타 리듀서)
│ ├── store.js (리덕스 스토어 설정)
├── App.js (최상위 컴포넌트)
- 라우팅을 설정하고 각 페이지 컴포넌트를 렌더링
- 리덕스 스토어를 Provider로 감싸서 전역 상태 관리
마이페이지 - 프로필 이미지 선택 모달창
카드생성페이지 - 카드 선택 모달창
카드조회페이지 - 라이브톡 컴포넌트