Come-On-App/Come-On-Frontend

### 모임관리와 일정을 한 번에: 컴온! (2.0) ![Static Badge](https://img.shields.io/badge/Apple-black?logo=ios) ![Static Badge](https://img.shields.io/badge/Android-%20)

🧑🏻‍💻 Features

모임 생성부터 관리까지 간편하게, 입장 코드로 참여자를 제한하세요. 날짜 결정은 투표로 신속히, 장소 결정까지 한 번에 해결하세요.

👆 원터치 로그인 - 간편한 한 번의 터치로 로그인하세요!
🚀 모임 즉시 시작 - 언제 어디서나 쉽게 모임을 만들고 시작하세요.
🗳️ 날짜 투표 - 투표로 모임 날짜를 빠르게 정하세요.
🔍 모임 날짜 검색 - 날짜 범위로 필터링하여 원하는 모임을 빠르게 찾아보세요!
🔄 연속 모임 계획 - 모임 카드로 다음 모임도 즉시 계획하세요.
🔒 비공개 모임 - 입장 코드로 비공개 모임에 안전하게 참여하세요.

📱 Demo

	### 쉽고 빠르게 - 사용자의 편의성을 위해 애플 로그인과 구글 로그인을 포함한 소셜 로그인 기능을 지원합니다. 이를 통해 사용자는 복잡한 회원가입 절차 없이도 빠르고 간편하게 로그인할 수 있습니다. - 로그인 과정에서 사용자 경험을 최우선으로 고려합니다. 로그인이 진행되는 동안, 사용자는 로그인 상태(진행 중, 에러 발생)에 따른 명확한 시각적 피드백을 받게 됩니다. 이는 사용자가 현재 로그인 과정에서 어떤 단계에 있는지, 혹은 로그인 시도가 실패했는지를 쉽게 이해할 수 있도록 돕습니다.
	### 모임 즉시 시작 - 사용자의 디바이스에서 직접 원하는 이미지를 업로드할 수 있는 기능을 지원합니다. 이를 통해 사용자는 자유롭게 컨텐츠를 커스터마이즈할 수 있습니다. - 모임 투표 기능을 통해 사용자는 투표 범위를 손쉽게 설정할 수 있으며, 선택한 날짜에 대한 시각적 피드백을 받을 수 있습니다. 이 기능은 사용자가 투표 범위를 더욱 편리하게 선택할 수 있도록 설계되었습니다. - 이러한 기능들은 사용자의 경험을 강화하고, 애플리케이션의 사용성을 높이는 데 중점을 두었습니다.
	### 모임 공유 코드 - 모임을 생성한 사용자가 초대 코드를 발급받아, 이를 다른 사용자들과 손쉽게 공유할 수 있게 해줍니다. 해당 초대 코드를 활용함으로써, 참여자들은 복잡한 절차 없이 단순히 코드를 입력하는 것만으로도 모임에 즉시 참여할 수 있는 편리함을 제공합니다. - 초대 코드가 만료된 경우, 사용자는 원터치로 간편하게 초대 코드를 갱신하여 새로운 코드를 생성할 수 있습니다.
	### 우리 지금 만나 - 사용자가 공유받은 초대 코드를 입력하면, 자동으로 모임에 참가하게 됩니다. 입력 시 대소문자 구분 없이 모든 문자는 자동으로 대문자로 처리되어, 사용 편의성을 높입니다. - 잘못된 코드를 입력했거나 올바른 코드가 확인되면, 사용자에게는 즉각적인 시각적 피드백이 제공됩니다, 이를 통해 사용자는 자신의 입력 상태를 명확하게 인지할 수 있습니다.
	### 이때 만날까? - 사용자는 설정된 가능한 날짜 범위 내에서 원하는 날짜에 투표할 수 있습니다. 투표 과정은 사용자 인터페이스(UI)를 통해 직관적으로 이루어지며, 어떤 참가자가 특정 날짜에 투표했는지 쉽게 확인할 수 있습니다. - 전체 참가자 중 몇 명이 투표에 참여했는지도 간편하게 알 수 있어, 모임 일정 결정 과정을 효율적으로 지원합니다.
	### 모임 확정 - 모임 투표가 완료되면, 선택된 날짜에 확정 표시를 함으로써 모든 사용자가 모임의 확정 날짜를 쉽게 확인할 수 있도록 합니다. 이는 사용자 간의 편리한 소통을 돕고, 모임 준비 과정에서의 혼란을 방지합니다. - 방장은 모임 예정 시간을 선택함으로써, 모임이 언제 열릴지를 결정할 수 있습니다.
	### 1차 모임은 여기! - 모임 장소에 관한 정보는 관련된 카드를 작성함으로써, 참가자들이 모임 장소에 대한 세부 정보를 손쉽게 파악할 수 있습니다. - 사용자가 텍스트를 입력하는 동안, 화면은 사용자가 보기에 가장 편안한 최적의 위치로 자동으로 스크롤됩니다. - 소프트 키보드 다음 버튼 액션을 누를 때마다, 다음 입력 필드로 자동으로 포커스가 이동합니다. - 작성자는 카드가 발행되기 전, 미리보기 기능을 통해 카드가 어떤 모습으로 나타날지 손쉽게 확인할 수 있습니다.
	### 장소가 어디야? - 참가자는 모임에 관련된 다양한 정보를 입력함으로써, 모임의 상세 정보를 구체적으로 기록할 수 있습니다.
	### 네이티브 앱 활성화와 기능 통합 - 모임 카드에 등록된 전화번호나 URL을 활용함으로써, 사용자는 네이티브 링크를 통해 다른 앱을 쉽게 활성화시킬 수 있습니다. 이를 통해 네이티브 기능의 통합을 통한 편리성이 제공됩니다
	### 원하는 날짜의 모임 쉽게 찾기 - 모임 날짜 필터 기능을 통해, 사용자는 특정 날짜에 예정된 모임만을 선택적으로 조회할 수 있습니다. 이를 통해 원하는 날짜 범위 내의 모임을 손쉽고 직관적으로 찾아볼 수 있습니다.
	### 마이페이지 - 마이페이지에서는 사용자가 자신의 이미지와 닉네임을 수정할 수 있습니다. 이미지 업데이트 시, 사용자에게 이미지가 업데이트 중임을 알리는 표시가 나타납니다. - 닉네임 수정 시, 사용자에게 기존 닉네임을 시각적으로 표시하며, 필요할 경우 원래 닉네임으로 쉽게 되돌릴 수 있는 옵션을 제공함으로써 사용자 경험을 향상시켰습니다. - 정보가 업데이트 될 때, 사용자와 관련된 모든 모임 정보도 즉시 최신 상태로 갱신됩니다.

🛠️ 기술 스택

🛠️ 프로젝트

모듈 구조

이 프로젝트는 여러 모듈로 구성되어 있으며, 각 모듈은 특정 기능을 담당합니다. 아래는 프로젝트의 주요 모듈과 그 하위 구조에 대한 설명입니다.

레거시 프로젝트 구조 개선하기: 기능별 모듈화

account

api: 계정 관련 API 인터페이스
components: 계정 관련 리액트 컴포넌트
features: 리덕스 슬라이스 및 상태 관리 로직
hooks: 커스텀 훅
mocks: 테스트를 위한 모의 데이터
navigation: 네비게이션 설정
screens: 스크린 컴포넌트

app

api: 애플리케이션 전반에 걸친 API 인터페이스
components: 공통 리액트 컴포넌트
hooks: 애플리케이션 레벨의 커스텀 훅
mocks: 앱 전반에 사용되는 모의 데이터
navigation: 앱의 루트 네비게이션 구조
redux: 앱 상태 관리를 위한 리덕스 스토어 및 프로바이더

connection

api: 연결 관련 API 인터페이스
components: 연결 및 네트워킹 관련 컴포넌트
hooks: 연결 관련 커스텀 훅
mocks: 연결 기능 테스트를 위한 모의 데이터
screen: 연결 관련 화면 컴포넌트

post

api: 게시글 관련 API 인터페이스
components: 게시글과 관련된 컴포넌트
features: 게시글 관련 상태 관리 로직
hooks: 게시글 기능을 위한 커스텀 훅
mocks: 게시글 기능 테스트를 위한 모의 데이터
navigation: 게시글 관련 네비게이션 설정
screens: 게시글 관련 스크린 컴포넌트

shared

assets: 이미지, 아이콘, 폰트 등의 자산
components: 전역에서 사용될 수 있는 공통 컴포넌트
constants: 애플리케이션 전반에 사용되는 상수 정의
hooks: 여러 모듈에서 재사용할 수 있는 커스텀 훅
provider: 공통 컨텍스트 프로바이더

각 모듈은 독립적인 기능을 가지며, 함께 작동하여 애플리케이션을 구성합니다.

디자인 시스템

레거시 프로젝트에서 겪었던 UI 컴포넌트 수정의 어려움과 문서화의 부족을 개선하기 위해, 2.0 프로젝트에서는 Storybook과 컴포넌트 기반 설계(CDD)를 도입했습니다. 이를 통해 컴포넌트를 기반으로 화면을 점진적으로 조립하는 새로운 개발 프로세스를 구축, 디자이너와의 소통을 향상시키고 컴포넌트의 수정 및 관리를 용이하게 만들었습니다.