내가 큐레이팅한 리스트로 소통하는 SNS

리스티웨이브에서 모든 기준은 내 ‘취향'입니다.

내 취향을 기록하고, 다른 사람에게 공유하고, 그 과정 속에서 나를 발견해요.

🕰️ 개발 기간

23.01.20 - 23.02.29

📔 Table of Contents

• About the Project
  • Introduce
  • Tech Stack
  • Features
• Getting Started
• Screenshots

🌟 About the Project

🗺️ Introduce

사람들은 다른 사람들의 취향이 묻어나는 '애정템💫', '원픽💘', '필수템🛍️'들을 궁금해합니다.
하지만, 이런 취향을 간단하게 기록할 수 있는 공간이 많지 않습니다.

🌊 Listy Wave는 리스트로 간단하고 솔직하게 자신의 취향과 정보를
기록하고, 공유할 수 있는 서비스를 기획했습니다. ✍️ 👀

👾 Tech Stack

Frontend 기술 스택

• Next.js (v14.0.4)
• React (v18.0.0)
• TypeScript
• vanilla-extract
• Zustand
• Tanstack-query
• Axios

라이브러리

• react-hook-form
• react-cookie
• @mui/material
• farmer-motion (motion library)
• html-to-image (HTML요소의 이미지 변환)
• cheerio (HTML 파싱)
• react-apexcharts (차트 라이브러리)
• react-beautiful-dnd (드래그 앤 드롭)
• Swiper (터치 슬라이드)
• http-proxy-middleware (프록시 생성 미들웨어)
• @egjs/react-grid (Masonry grid)
• browser-image-compression (이미지 파일 압축)
• kakao-api (카카오 공유기능)
• react-toastify (토스트 메세지)
• react-lottie
• husky, prettier, lint (코드 컨벤션)

배포

• Vercel

🎯 Features

• 로그인, 로그아웃, 탈퇴
• 온보딩
• 리스트 생성, 수정, 삭제
• 댓글/답글 생성, 수정, 삭제
• 링크 첨부, 이미지 업로드
• 리스트 상세조회
• 상세 리스트 이미지로 저장하기
• 리스트 콜렉트, SNS 공유, 링크 복사
• 히스토리 보기(그래프, 리스트)
• 리스트 검색, 카테고리별 조회
• 마이리스트, 콜라보리스트 보기
• 팔로잉/팔로워 요청, 취소
• 프로필 수정, 미리보기
• 알림 목록 보기, 알림 확인
• 언어변경(한국어, 영어)

🧰 Getting Started

$ git clone https://github.com/8-Sprinters/ListyWave-front.git

$ yarn install

$ yarn dev

# http://localhost:3000 접속

🌊 배포주소 : Listy Wave

👀 Screenshots

✨ 소개 페이지

✨ 온보딩 페이지

✨ 탐색 페이지

✨ 검색 페이지

✨ 리스트 생성 페이지

✨ 리스트 수정 페이지

✨ 리스트 상세 페이지

✨ 히스토리 페이지

✨ 마이리스트/콜라보리스트 페이지

✨ 콜렉션 페이지

✨ 마이 페이지 - 언어 변경, 로그아웃, 회원 탈퇴

✨ 프로필 수정 페이지

✨ 팔로우/팔로잉 페이지

✨ 알림 페이지

💫 FE 팀원 소개

프론트엔드

안유진	강나현	박소현	민서영	강현지

백엔드

박정수	김동호

디자이너

신은서