💵 티끌모아 태산! tickle + 💵

✨ 배포사이트

• 🔗 tickle plus

• 테스트 계정

  • Id : admin@naver.com
  • Password : admin123!

🌱 프로젝트 소개

[개요]

• 예/적금 상품을 소개하고 개별상품에 대해 검색 · 신청 · 관심상품등록을 할 수 있습니다.
• 회원가입을 진행한 유저를 대상으로 선호상품(예/적금), 주거래은행, 직업에 대한 설문조사를 권유하고 응답한 유저에게는 설문응답을 기반으로 예적금상품을 추천합니다.

[개발 기간]

• 2023. 2. 13 ~ 2022. 2. 24.

[링크]

• 레포
• 팀 노션
• 피그마 (디자인 레퍼런스 : 피클플러스)

👩‍💻 팀 구성

백엔드 4명, 프론트엔드 4명

⚙ 기술 스택

react, typescript, react-router-dom, recoil, recoil-persist, react-cookie, tailwind CSS, vite, axios, react-query, react-icons, framer-motion, react-hook-form, yup

📌 작업영역 및 구현 기능

• 홈

  • 일부 상품에 대한 자동 슬라이드 구현
  • 전체 상품에 대한 무한스크롤 기능
  • 키워드별 상품 출력, 상품데이터 캐싱
    

• 추천상품 페이지

  • 로그인된 유저에 대한 추천상품 출력
  • 추천상품이 없거나 다른 상품을 추천받고 싶은 경우 설문 재참여 유도
    

• 검색 페이지

  • 백엔드에서 제공해주는 검색어, 정렬에 따른 결과를 출력하고, 상품종류와 은행에 따른 추가 필터링 기능 구현
  • 검색어별 상품 데이터 캐싱
  • 추천검색어를 활용한 검색기능 활용 유도
    

• 공통 컴포넌트

  • 상품 카드, 은행선택 드롭다운, 정렬(금리순, 최신순) 토글 버튼
  • 헤더, 네브바

💡 회고

- 프로젝트 관련

• 서버나 db에 대한 지식이 부족해서 백엔드분들께 필요한 기능을 전달하고 소통하는데 어려운점 이 있었습니다. 지금까지는 완전히 구축된 서버와 api만 활용해봤다면 이번에는 백엔드분들께서 필요한 데이터를 말씀해달라고 하셔서 처음에는 어떤 데이터를 요청해야 할지도 막막하다고 느꼈습니다. 데이터 자체는 백의영역, 기능구현 자체를 프론트의 영역으로 나누어 생각하고 진행해서 소통에 어려움이 있었다고 생각합니다. 기획 단계부터 개발할 기능과 데이터에 대해 좀 더 상세하게 함께 논의했다면 백엔드분들도 프론트도 조금 더 수월하게 개발할 수 있지 않았을까 생각이 들었습니다.
• 조장으로서 정기적인 소통 시간이나 체계를 좀 더 명확하게 했으면 좋았겠다는 아쉬움이 남았습니다. 백엔드분들과의 원활한 소통을 위해서 기본적인 데이터베이스나 서버에 대한 공부가 좀 더 필요하다고 느꼈습니다.

- 팀 협업 관련

• pr과 issue에 대한 템플릿을 정해 활용하고 백엔드분들과 협업하는 과정을 경험할 수 있어서 좋은 기회였다고 생각합니다. 또한 조장으로서 팀원들의 코드를 꼼꼼히 확인하고 코드리뷰를 남기는 등 다른분들의 코드를 읽고 배울 수 있는 기회가 되었습니다.