목차보기
🔗 배포주소: 카페어디
카페를 찾는 유목민을 위한 카페 추천 사이트 다양한 카테고리별로 나뉘어져있는 카페 추천 사이트 "카페어디"
팀명 : 9조요청 프로젝트명 : ☕️ 카페어디
선장: 조장 - 부선장: 스크럼마스터 - 구조요원: 조원
| 이름 | GitHub | 소개 |
|---|---|---|
| 👮🏻♂️ 이정현 | junghyunlee0922 | 리액트와 친해지고 팀의 중요성을 깨닫자! 역할: 선장, 총괄, 기록 관리, 일정 관리 |
| 👮🏻 짱효진 | bambiru | 리액트 너무 어려워요... 역할: 부선장, 능력자, 디자인 총괄, 밤비 언니 |
| 👮🏻♀️ 이동훈 | dlehdg | 어제보다 더 나은 내가 되고 싶은 개발자(리액트 어렵다.) 역할: 구조요원, 자바스크립트의 신 |
| 👮🏼♀️ 문예은 | mondimhaus | 리액트를 통해 프로젝트를 구현해보는 것 역할: 구조요원 |
팀의 방향성
- 완성 못해도 좋으니까 천천히 시간 가지면서 프로젝트 임하기
- 오늘 할당량 못했다고 밤새면서 다급하게 하지말고 천천히 하기
- 완성 못해도 어떤 과정을 거쳤냐에 따라 발표준비가 나오는거니까 마음 편하게 하기
- 완성 못한거에 스트레스 받지 말기
- 어차피 수료후에 완성해도 됩니다 천천히 해여 천천히~♡
- 회의 자주하기 → 시작하고 1시간 끝나기전 1시간
- 코드리뷰도 자주는 아니더라도 서로가 어떤 식으로 짯는지 알수있게 하기
- 페이지 기능별로(컴포넌트) 담당 해서 다같이 한페이지씩 끝내고 틈 나면 코드리뷰하기
- 모르는거 있으면 즉각 물어봐주세요
- 남탓하지말고 서로 으쌰으쌰 도와주자
- 다같이 성장하는 마음으로 임하기
- 서로간의 공유가 잘 되기
- 새로 알게된점, 오류 해결사항, 어떤 과정을 거쳐서 이 코드를 짯는지 기록하기
- 기록하면 발표준비 할게 많아집니다.
- 커밋도 기준 정해서 자주 하고 이슈 위키 작성하기
| Flow Chart | Chart Part |
|---|---|
| 로그인 | 회원가입 | 메인 |
|---|---|---|
| - 사용자가 입력한 아이디와 비밀번호의 입력값이 포켓베이스 유저 정보에 있다면 로그인 실행 - 로그인이 성공하면 로그인한 유저 정보를 따로 저장 - 이메일과 비밀번호 입력 값이 정규식으로 넣어야 로그인 가능 - 비밀번호 보여주는 기능 |
- 이메일, 비밀번호 유효성 검사 - 사용자가 입력한 정보를 데이터베이스에 저장 - 회원 가입 완료시 메인페이지로 이동 체크박스 - 체크박스 관리 : 클릭 이벤트에 의해 상태 토글, 해당 체크박스의 이름을 통해 상태 업데이트 - 전체 선택 기능 : 모든 체크박스가 선택되거나 해제 |
- 지역 카페리스트와 검색 페이지 컴포넌트로 이동해주는 header - 메인 swiper (광고) - 위치 데이터를 변경 해주는 기능 제공 - 카테고리 중 가장 인기가 많은 노트북과 인스타 카페리스트만 보여주는 반응형 swiper 렌더링 |
| 메인 | 지역별 카페리스트 | 카테고리별 카페리스트 |
|---|---|---|
| - 사용자에게 지역별 전체 카페 리스트 제공 - 카페 클릭시 해당하는 카페의 상세페이지로 이동 - TabBar로 특정 페이지 컴포넌트 이동 기능 제공 |
- 찾고자 하는 지역을 선택시 해당 지역에 있는 카페리스트들 렌더링 - 사용자에게 카페 위치를 보여주는 지도 렌더링 - 카페 선택시 상세 페이지로 이동 |
- 카테고리 선택시 해당 하는 카테고리가 있는 카페리스트 렌더링 - 해당 지역 안에 있는 카페리스트들을 제공 |
| 상세 - 정보 | 상세 - 리뷰 | 리뷰 작성 |
|---|---|---|
| - 카페 상세 정보 표시 (영업시간, 연락처, 위치, 시설정보 등) - 카페의 위치를 검색하여 지도 렌더링 - 활성 탭에 따라 카페의 상세정보 & 리뷰 표시 |
카페 리뷰 - 리뷰 해시태그 순위와 리뷰 목록을 표시 - 리뷰가 없는 경우, 리뷰 없음 페이지 렌더링 |
- 사용자가 작성한 리뷰 목록 확인 가능, 리뷰 작성 가능 - 리뷰 수정 및 삭제 기능 - useRef 사용하여 DOM 요소 접근 - 로그인한 유저 정보 관리하는 store에서 데이터 사용 - formData를 통해 db로 리뷰 데이터 전송 - 해시태그 데이터 가져오기 |
| 검색 | 해시태그 검색 |
|---|---|
| - Zustand 통해 검색어 상태, 카페 목록 상태 관리 - 사용자가 인풋에 검색어를 입력, 해당 검색어 저장 - 인풋에 들어온 값과 pb 데이터 비교 - 검색 결과 화면에 표시 - 최근 검색어, 검색된 카페 목록을 사용자에게 제공 |
- 사용자가 인풋에 검색어를 입력, 해당 검색어 저장 - 인풋에 들어온 값과 pb 데이터 비교 - ZUSTAND를 이용해 선택한 hashtag를 저장 -> 해당 상태를 이용해 DB에서 해당하는 카페의 리스트를 보여줌 |
| 내가 쓴 리뷰 | 마이프로필 & 로그아웃 |
|---|---|
| - 사용자가 작성한 리뷰 목록 - 리뷰 수정 및 삭제 기능 - useRef 사용하여 DOM 요소 접근 - 로그인한 유저 정보를 통해 유저가 작성한 리뷰리스트 렌더링 |
- 사용자 프로필 표시, 로그아웃 기능 제공 - 사용자의 로그인 상태에 따라 프로필을 확인하거나 로그인 페이지로 이동 - 사용자의 리뷰 수, 찜 목록 수 표시 - Zustand 통해 사용자 로그인 상태 확인 |
이번 프로젝트를 통해서 혼자서는 절대 경험 하지못하는 수 많은 경험들을 경험하여 많은것을 배울수 있었습니다.
"팀" 이라는 한 글자가 굉장히 중요하다고 꺠달았습니다.
팀원들과 같이 협업하여 기획부터 디자인 개발까지 함께 하게되어 좋은 경험이었고 많이 배웠습니다.
그리고 어떻게 하지 불안하고 어려운 고민을 팀원들과 함께 고민하여 해결하는 시간을 가지게 되어
너무 좋았고 9조요청 감사했습니다!
이번 프로젝트를 통해서 리액트와 조금 더 가까워진 것 같습니다 ㅎㅎ
라이브러리의 중요성을 깨달았으며, 항상 다가가기 어려워서 그냥 포기하고 말았는데,
이번을 계기로 공식문서를 읽고, 나아가 적용해 볼 수 있는 계기가 된 거 같습니다.
리팩토링하며 앞으로도 조금 더 많은 기능들을 접해보고 싶습니다
이번 프로젝트를 진행하면서 정말 많은 경험과 배움을 얻었습니다.
처음에 프로젝트를 하면서 컨벤션 등 협업을 하기 위해 여러 가지 약속을 정하는(컨벤션) 과정이
중요하다는 사실을 알았고 혼자라면 얻지 못한 소중한 기회를 얻었다라고 생각합니다.
9조 여러분들 다들 고생하습니다.
리액트에 대해 무지한 상태로 시작했지만 이번 프로젝트를 통해 리액트와 한 단계 친해지게 되었습니다.
컴포넌트 위주의 개발을 경험할 수 있어 유익한 시간이었습니다.
프로젝트 컨벤션을 함께 설정하면서 팀에서는 공통의 약속이 상당히 중요한 역할이라는 것을 깨닫게 되었습니다.
pnpm ipnpm dev