🦁 멋쟁이사자처럼 6기 ReadyAct 팀의 React 팀프로젝트
🗓️ 기획 기간 : 2023.08.29 ~ 2023.09.05
🗓️ 개발 기간 : 2023.09.05 ~ 2023.09.25
🗓️ 추후 리팩토링 예정 기간 : 2023.09.26 ~
Ready! Act
| 이은빈 | 조지현 | 홍다영 | 서진만 |
|---|---|---|---|
 |
 |
 |
 |
COPYRIGHT RESERVED. 2023 © By Armin Khorsandipour
아이콘의 경우 내장된 이모티콘을 활용하여 저작권 문제를 해결하고 익숙함을 이끌어 냄
Button, Input 같이 재사용성이 높은 요소는 아토믹 컴포넌트로 제작
- Splash: Framer-motion을 활용하여 로고 애니메이션 적용, LocalStorage를 활용하여 최초 1회만 보는 기능 구현
- 상단 메뉴(전체 / 채소 / 과일 / 곡류 / 육류): Swiper.js를 활용하여 FreeMode 효과 적용, 접근성을 고려하여 Keyboard, Mousewheel로 조작 가능하도록 구현, 클릭 시 필터링된 상품 리스트 페이지로 이동
- 지도: 카카오 지도 API를 활용하여 PocketHost에 등록된 공동구매 상품의 픽업 위치 표시
- 더하기 버튼: 방 개설 페이지로 이동
- 하단 메뉴(홈 / 검색 / 내 정보): 메뉴 클릭 시 각각 메인 페이지, 검색 페이지, 프로필 페이지(로그인하지 않은 경우 로그인 페이지)로 이동
- 뒤로가기 버튼: 버튼 클릭 시 메인 페이지로 이동
- 리스트: PocketHost를 활용하여 카테고리, 상품명, 상세내용, 진행상태, 픽업 일자, 참여자 현황 정보 렌더링
- 검색: PocketHost를 활용하여 키워드 입력 시 해당 키워드가 포함된 상품 필터링
- 회원가입: 프로필, 이름, 이메일, 비밀번호 입력 후 가입 버튼 클릭 시 PocketHost에 유저 정보 등록 후 로그인 페이지로 이동
- 프로필: 로그인 시 LocalStorage에 유저 정보 저장 후 로그인된 사용자 정보(이름, 이메일, 가입일자) 렌더링
- 판매 상품: PocketHost를 활용하여 사용자가 판매하는 상품 렌더링
- 로그아웃: 로그아웃 클릭 시 LocalStorage에서 저장된 정보를 삭제
- 회원탈퇴: 회원탈퇴 버튼 클릭 시 PocketHost에서 사용자 정보 제거
- 상품 정보: PocketHost를 활용하여 제품명, 가격, 상세내용 렌더링
- 현재 상태: PocketHost를 활용하여 상품의 현재 진행 상태 렌더링
- 상태 변경: 상태값 설정 후 변경 버튼 클릭 시 PocketHost에 등록된 정보 업데이트
- Context API 를 사용한 전역 상태 관리와 컴포넌트 간의 데이터 전달 편리화
- 페이지 이동시 전역 데이터 공유를 통한 상태값 유지 기능으로 UX 사용성 개선
- Pocket Host 를 이용한 서버 통신과 Form 데이터 생성
- Kakao Map API 를 사용한 공동구매 거래 위치 선택 기능
- Local Storage 와 Pocket Host 의 ID 를 비교하여 동명이인을 방지한 로그인 정보 출력
- HTML
<Form>태그를 사용한 데이터 전송과 수신 - 다양한 입력 양식 제작
<input><button><textarea><date><select><option> - react-router-dom 의 Link 컴포넌트를 사용한 렌더링
- 이미지를 업로드할 수 있는 파일 업로드 기능
- Date.prototype.toISOString() 메서드를 활용한 날짜와 시간 데이터 커스텀
- 참여 인원을 계산해주는 Counter 기능
- 아토믹 컴포넌트를 활용한 코드 분산 관리
- 게시물 : 기존 방 개설 페이지에 기재한 사항이 반영될 수 있도록 함
PocketHost를 활용하여(게시물 작성자, 상품명, 상품이미지, 픽업 시간, 장소, 내용, 참여인원, 참여자의 프로필사진, 1인당 정산비)렌더링 - PocketHost의 관계확장을 이용하여 참여 인원의 프로필 이미지 화면에 렌더링
- 더보기 버튼 : 클릭 시 참여자 관리, 모임 삭제 리스트 확인
- 더보기, 참여하기 버튼 : 클릭 시 Framer-motion을 활용하여 애니메이션 적용
- TAP : 접근성을 고려하여 Keyboard로 접근할 때 focus가 모달 다이얼로그 밖으로 나가지 못하게 설정
- 딤(Dim) : 딤처리를 하여 모달 다이얼로그 이외의 작업을 하지 못하도록 설정
- 지도API : 게시물 상세 페이지의 픽업위치> 를 누르면 카카오 지도 API를 활용하여 PocketHost에 등록된 공동구매 상품의 픽업 위치를 표시
- 참여 유저 목록 :게시물 상세 페이지의 참여하기 버튼 클릭 후 네,참여할래요를 누르면 LocalStorage에있는 현재 로그인된 사용자의 아이디 값과 네,참여할래요의 버튼을 누른 사용자(PocketHost에 등록 되어있는 사용자)의 아이디 값이 같다면 참여유저 목록페이지, 게시물 상세 페이지의 참여인원 및 프로필 사진을 화면에 렌더링
- PocketHost : 임시로 먼저 쌓인 데이터(유저정보)를 화면에 렌더링
- 로그인 : 아이디,비밀번호 입력시 pocketHost에 등록된 정보와 일치 여부 확인,로컬스토리지에 저장 후 로그인
- 참여하기 버튼 클릭시 한 번 더 확인하기 위해 창을 띄운 후 사용자가 선택한 것에 따라 창 넘어가기
- pocketHost에 팀원들이 필요한 사용자 정보 및 프로필,프로덕스 정보(판매 상품,픽업 위치,픽업 날짜,상태,사진 등) 여러가지 데이터를 쌓아서 데이터 당길 수 있도록 하였습니다!!
- 사용자가 안전하게 공동 구매의 모임을 개설하고 참여하여 소비 비용절감 등의 긍정적인 효과를 경험할 수 있는 모바일 공동 구매 모임 플랫폼 서비스
- 상품 데이터 베이스 (PocketHost)
- 상품 검색 엔진
- 사용자 인증(회원가입, 로그인, 로그아웃, 회원탈퇴)
- 지도API를 활용한 위치 기반 서비스
📦src
┣ 📂api
┃ ┗ 📜pocketbase.js
┣ 📂assets
┃ ┣ 📂icons
┃ ┃ ┣ 📜activeAlarm.svg
┃ ┃ ┣ 📜arrow.svg
┃ ┃ ┣ 📜arrowLeft.svg
┃ ┃ ┣ 📜close.svg
┃ ┃ ┣ 📜complete.svg
┃ ┃ ┣ 📜crownSmall.svg
┃ ┃ ┣ 📜currentSpot.svg
┃ ┃ ┣ 📜dinner.svg
┃ ┃ ┣ 📜dots.svg
┃ ┃ ┣ 📜imgUpload.svg
┃ ┃ ┣ 📜inactiveAlarm.svg
┃ ┃ ┣ 📜location.svg
┃ ┃ ┣ 📜logo.svg
┃ ┃ ┣ 📜minusCircle.svg
┃ ┃ ┣ 📜myLocation.svg
┃ ┃ ┣ 📜participateNum.svg
┃ ┃ ┣ 📜pickup.svg
┃ ┃ ┣ 📜pickuptime.svg
┃ ┃ ┣ 📜plus.svg
┃ ┃ ┣ 📜plusCircle.svg
┃ ┃ ┣ 📜prev.svg
┃ ┃ ┣ 📜proceeding.svg
┃ ┃ ┣ 📜reset.svg
┃ ┃ ┣ 📜spot.svg
┃ ┃ ┗ 📜waiting.svg
┃ ┗ 📜placeholderProfile.jpeg
┣ 📂components
┃ ┣ 📜Button.jsx
┃ ┣ 📜FormInput.jsx
┃ ┣ 📜Input.jsx
┃ ┗ 📜Spinner.jsx
┣ 📂context
┃ ┗ 📜Auth.jsx
┣ 📂data
┃ ┗ 📜category.js
┣ 📂hooks
┃ ┗ 📜useStorage.js
┣ 📂layout
┃ ┣ 📜CreateHeader.jsx
┃ ┗ 📜Header.jsx
┣ 📂pages
┃ ┣ 📂auth
┃ ┃ ┣ 📜Profile.jsx
┃ ┃ ┣ 📜SignIn.jsx
┃ ┃ ┣ 📜SignUp.jsx
┃ ┃ ┗ 📜Withdrawal.jsx
┃ ┣ 📂details
┃ ┃ ┣ 📜Backdrop.jsx
┃ ┃ ┣ 📜Cancel.jsx
┃ ┃ ┣ 📜ChangeStatus.jsx
┃ ┃ ┣ 📜CheckIcon.jsx
┃ ┃ ┣ 📜Detail.jsx
┃ ┃ ┣ 📜DetailMap.jsx
┃ ┃ ┣ 📜DetailStatus.jsx
┃ ┃ ┣ 📜Dialog.jsx
┃ ┃ ┣ 📜Participation.jsx
┃ ┃ ┣ 📜SeeMore.jsx
┃ ┃ ┗ 📜StatusIcon.jsx
┃ ┣ 📂products
┃ ┃ ┣ 📜Fruit.jsx
┃ ┃ ┣ 📜Grains.jsx
┃ ┃ ┣ 📜Meat.jsx
┃ ┃ ┣ 📜Total.jsx
┃ ┃ ┗ 📜Vegetable.jsx
┃ ┣ 📂users
┃ ┃ ┣ 📜SignInUsers.jsx
┃ ┃ ┗ 📜Users.jsx
┃ ┣ 📜CreateRoom.jsx
┃ ┣ 📜Home.jsx
┃ ┣ 📜Logo.jsx
┃ ┗ 📜Search.jsx
┣ 📂parts
┃ ┣ 📂create
┃ ┃ ┣ 📜CategoryDropdown.jsx
┃ ┃ ┣ 📜ContentTextarea.jsx
┃ ┃ ┣ 📜Creator.jsx
┃ ┃ ┣ 📜DatePicker.jsx
┃ ┃ ┣ 📜FileUpload.jsx
┃ ┃ ┣ 📜MeetingPoint.jsx
┃ ┃ ┣ 📜ParticipateCounter.jsx
┃ ┃ ┣ 📜PaymentToggleButton.jsx
┃ ┃ ┣ 📜Price.jsx
┃ ┃ ┣ 📜Status.jsx
┃ ┃ ┣ 📜TimePicker.jsx
┃ ┃ ┗ 📜Title.jsx
┃ ┣ 📂map
┃ ┃ ┣ 📜currentLocation.js
┃ ┃ ┣ 📜Location.jsx
┃ ┃ ┣ 📜Location.module.css
┃ ┃ ┗ 📜mapMark.js
┃ ┣ 📂nav
┃ ┃ ┣ 📜HomeIcon.jsx
┃ ┃ ┣ 📜Nav.jsx
┃ ┃ ┣ 📜ProfileIcon.jsx
┃ ┃ ┗ 📜SearchIcon.jsx
┃ ┗ 📜AnimationLogo.jsx
┣ 📂styles
┃ ┣ 📜ChangeStatus.module.css
┃ ┣ 📜customComponents.css
┃ ┣ 📜Home.module.css
┃ ┣ 📜Nav.module.css
┃ ┗ 📜tailwind.css
┣ 📂utils
┃ ┣ 📜debounce.js
┃ ┣ 📜getPbImageURL.js
┃ ┗ 📜numberWithComma.js
┣ 📜App.jsx
┣ 📜main.jsx
┗ 📜routes.jsx
- 기획 PPT : https://www.canva.com/design/DAFtduXfXbA/jRnic1N9EeQvgeXpOlpl5Q/view
- wiki : https://github.com/FRONTENDSCHOOL6/ready-act/wiki
| 이름 | 회고내용 | |
|---|---|---|
| 이은빈 조장 🚀 | 기획부터 배포까지 직접 진행하며 원하는 서비스와 기능에 집중하여 '프로젝트 16조'만의 개성이 담긴 서비스를 만들었다는 점에서 감회가 새롭습니다. 직접 기획한 서비스인만큼 구현하고 싶은 기능에 집중하여 개발할 수 있었다는 점, 프로젝트를 유동적으로 설계 / 변경할 수 있다는 점에서 프로젝트에 대한 집중도, 만족도가 높았습니다. 또한, 개념을 알고 있는 것에서 그치지 않고 학습한 내용을 다양하게 활용하며 직접 서비스를 만들어 보니 '왜 TanStack Query가 필요한지, 상태 관리가 중요한지', 어떻게 사용해야 하는지에 대해 체감할 수 있어 진정한 '습(習)'의 시간을 가질 수 있었습니다. 아직 구현하고 싶은 기능이 많고, 사용자를 고려한 서비스가 되기에 개선해야 할 부분이 많습니다. 따라서 프로젝트가 끝남에 안주하지 않고 계속해서 리팩토링의 과정을 거쳐 실제 사용자가 사용할 수 있는 서비스로 만들고 싶습니다. | |
| 조지현 스크럼마스터 🚩 | 리엑트 기능 작동 원리에 깊이 이해할 수 있는시간이었습니다. 다양한 기능을 고민하고 구현하는 과정을 통해 리엑트 상태관리에 대한 이해도를 높일 수 있었으며 PocketHost 통신과 지도 API 등 기능 구현에 대한 흥미를 한 층 더 높일 수 있는 계기가 되었습니다. PocketHost 와 통신하며 Create Form 양식을 전송하는 와중에 많은 문제를 겪었고 이를 통해 문제 상황을 해결하는 능력을 기를 수 있었으며 useRef 에 의지하여 제작하던 코드 구조를 Context API 를 사용하여 리팩토링 하는 작업을 하면서 Context API 를 통한 상태 관리에 대한 이해도를 쌓을 수 있는 기회를 가지게 되었습니다. 프로젝트를 진행하는 동안 팀원들과 코드가 제대로 동작하는지를 테스트하고 선생님과 팀원들의 도움을 받아 가며 서로 지식을 공유하며 협업하는 경험을 하면서 전체적으로 프로젝트를 통해 팀워크와 커뮤니케이션 능력을 향상시킬 수 있는 소중한 시간이었습니다. | |
| 서진만 | 3주가 조금 넘는 기간동안 React프로젝트를 하면서 팀원들과 함께 원하는 주제로 기획부터 배포까지 양보하고 합의점을 찾아 끊임없이 피드백을 주고 받으면서 팀원들의 열정이 느껴져 지치는 줄 모르고 자극을 받아 끝까지 열심히 할 수 있었습니다. 이번 프로젝트를 통해 [PocketHost] 에 있는 데이터 들을 SDK방식으로 데이터를 불러와 화면에 렌더링 하는 방법과 관계확장을 통해 카테고리가 다른 데이터도 한페이지에 가져올 수 있다는 것을 알게 되었습니다. 그리고 이번 프로젝트를 통해 [카카오 지도 API] 를 활용하여 픽업할 위치를 설정하게 되어 매우 만족하고 있습니다. 또 모달 다이얼로그를 [Framer Motion] 을 이용하여 애니메이션 효과를 주어 사용자에게 재미를 줄 수 있을것 같아 만족하고 있는 부분입니다. 이번 프로젝트에서 가장 어려웠던 점은 TanStack Query 입니다. 처음에는 TanStack Query를 왜 사용하는지에 대해서 의문점이 많았지만 [TanStack Query] 를 사용하고 나서는 코드가 간결해지고 한번 불러온 데이터 들을 캐싱하여 다른 페이지를 갔다가 다시 원래의 페이지로 돌아올때 빠른 속도로 화면에 렌더링 된다는 점이 가장 장점인 것을 느끼게 되었습니다. | |
| 홍다영 | 프로젝트를 하며 팀원들과 소통하고 어렵지만 같이 해나갈 수 있는 협업에 대해 많이 배운 것 같습니다!!그리고 일부분이 아니라 자유 주제로 기획,디자인 등등을 매일매일 회의하며 다같이 만들어 갈 수 있어서 좋은 경험이었습니다. 포켓베이스를 활용한 구현이 익숙하지 않고 어려워서 제대로 페이지 기능 구현을 못 한 것 같아 너무 아쉽지만 사용해 볼 수 있는 기회라서 좋았습니다. |
npm i 또는 pnpm i
npm run dev 또는 pnpm dev