Skip to content

hongppa324/fillurpill

This branch is up to date with 7eveloper/fillurpill:main.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

676f3d9 · May 3, 2024
Mar 18, 2024
Mar 22, 2024
Mar 25, 2024
Mar 18, 2024
Mar 19, 2024
May 3, 2024
Mar 20, 2024
Mar 24, 2024
Mar 18, 2024
Mar 24, 2024
Mar 24, 2024
Mar 18, 2024
Mar 23, 2024
Mar 18, 2024

Repository files navigation

React 심화 프로젝트

📢 과제 개요

24. 03. 18 - 24. 03. 25

  • 프로젝트명 : Fill ur Pill
  • 개요 : 건강기능식품 검색, 조회, 섭취 이력 관리, 구매까지 연계된 웹사이트

📑 사용 기술

  • Typescript, Next.js 적용
  • 전역상태 관리 : zustand
  • 서버상태 관리 : react-query
  • 인증/인가 : supabase
  • 디자인 시스템: Shadcn UI (Tailwind CSS)사용
  • 버전관리 : Github
  • 협업 툴: Figma, Notion, Slack, Canva
  • 배포 : Vercel

💡 기술 선정 이유

  • Typescript: type에러 방지 및 개발생산성 향상
  • Next Js: SSG, SSR ,CSR 등 검색엔진 최적화와 초기 로딩성능 향상
  • Zustand: Redux에 비해서 코드량이 적고, 러닝 커브가 낮음
  • React-query : 간편한 비동기 상태 서버관리
  • Supabase: 서버리스DB이고 빠른 성능 및 관계형 데이터베이스 기반

페이지 소개

  • 로그인/회원가입
  • 설문조사
  • 마이페이지
  • 섭취이력
  • 제품검색 페이지
    • 상세페이지
  • 리뷰작성 페이지

실제 구현 화면(프로젝트 사용 방법)

로그인, 회원 가입

image

  • email , password(비밀번호는 최소 6자의 대/소문자, 숫자와 특수문자를 포함해야) 기입시 회원가입 성공

설문조사

image

  • 키(0~300cm), 몸무게(0,200kg), 성별, 나이 기입하면 설문조사 완료

마이페이지

image

  • 닉네임을 따로 수정이 가능하고, 설문조사 페이지에서 저장된 값들을 수정이 되도록 구현

image

  • 영양제 섭취 일자나 자신의 건강에 관한 내용을 날짜 클릭을 통해 저장할수있고, 필요가 없어지면 삭제가 가능하도록 구현 image
  • 설문조사에 대한 정보를 가지고 나의 bmi수치가 어느정도인지 차트로 알려주는 페이지

제품검색 페이지

image

  • 기능, 이름, 성분별로 검색이 가능하도록 구현하였고, 스켈레톤ui사용및 무한스크롤 기능을 삽입.

image

  • 제품에 대한 상세페이지로서, 해당 제품에 대해 구매욕구가 생기면 링크로 들어갈 수 있는페이지 구현

리뷰작성 페이지

image

  • 영양제를 검색하여 추천영양제를 클릭하고 제목, 추천이유, 별점을 이용하여 해당 영양제에 대한 리뷰를 남길 수 있는페이지

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 97.4%
  • CSS 2.5%
  • JavaScript 0.1%