Skip to content

CarrotAuction/frontend

Repository files navigation

중고물품 거래 서비스

📖 프로젝트 소개

  • Auction은 중고 물품을 거래해서 보다 저렴한 가격에 구매를 할 수 있는 웹 서비스입니다.
  • 중고거래이기떄문에 내가 생각한 가격보다 저렴하게 구입할 수도 있습니다.
  • 구매자와 판매자의 위치를 시각화해서 보여줌으로써 일정 조율이 편리해집니다.
  • 물건의 시세를 알 수있게 다른 쇼핑몰의 데이터와 가격을 비교할 수 있는 기능을 제공합니다.

🕹️ 기술적 성취

  • 백엔드 팀과 비동기적 소통 및 협업
  • 기획부터 디자인까지 참여한 경험
  • UI/UX 향상 및 이미지, 메모리 최적화

트러블 슈팅 및 기능구현 과정

-승환-

혹시 언제쯤 가능하실까요? [nextJS에 msw 적용기]

우리 어디서 볼까? [카카오 맵 api로 경로 시각화하기]

이것도 봐주라 [광고 모달창 만들기]

Sass 도입기

내가 이미지 빨리 보여줄게 [이미지 최적화하기]

눌렀어? 일단 보여줄게 [좋아요 버튼에 낙관적 업데이트 적용하기]

다른건 몰라도 메모리는 아끼자 [이벤트 버블링 적용해보기]

보기 편하게 준비했어 [프로젝트에 라이브러리없이 페이지네이션 적용해보기 그리고 성능 최적화]

스크롤만 내려 나머진 내가 할게 [프로젝트에 무한 스크롤 적용해보기]

react-portal? 써볼게요 [프로젝트에 react-portal로 모달 적용해보기]

에러? 난 그전에 방지해 [프로젝트에 테스트 적용해보기]


✈️ 데모

메인 페이지

메인페이지

게시물 페이지

게시물페이지

회원가입 페이지

회원가입 페이지

로그인 페이지

로그인 페이지

글쓰기 페이지

글쓰기 페이지

상세 페이지

상세 페이지

원가 비교 페이지

원가 비교 페이지

모바일

메인 페이지 (Mobile) 게시물 페이지 (Mobile)
Main Page (Mobile) Post Page (Mobile)
회원가입 페이지 (Mobile) 로그인 페이지 (Mobile)
Signup Page (Mobile) Login Page (Mobile)
글 쓰기 페이지 (Mobile) 상세 페이지 (Mobile)
Write Page (Mobile) Detail Page (Mobile)
원가 비교 페이지 (Mobile)
원가 비교 페이지

👍 성능 최적화

  • 필요한 시점에 이미지를 불러오도록 lazy loading을 적용 및 layout shift를 방지하기 위한 Next.js image 태그 적용
  • react-hook-form을 사용하여 불필요한 리랜더링 방지 및 마운팅 속도 증가
  • 불필요한 api 요청을 방지하기 위해 tanstack-query를 활용한 데이터 캐싱
  • 브라우저 메모리를 최소화하기위해 이벤트 버블링 적용
  • Debounce를 이용해 사용자 입력 처리 최적화

⚒️ 기술스택

Frontend