뉴뉴 (Knewnew)::PC버전 🍭

개발 인원 및 기간

• 개발 기간 : 2022/8/16 ~ 2022/9/7 (3주)
• 개발 인원 : FE 3명, BE 3명
  • Front-end : 김광희, 손민지, 정훈조
  • Back-end : 손찬규(PM), 안상현, 음정민

프로젝트 소개

모바일 어플리케이션 뉴뉴(Knewnew)의 PC버전 페이지 제작을 위한 프로젝트 입니다.
뉴뉴(Knewnew)는 수많은 온라인 식품 선택지 속에서 유저 간 추천을 통해 원하는 식품을 손쉽게 발견할 수 있는 데이터 기반 푸드 포털 플랫폼입니다.
식품에 대한 후기를 카테고리 별로 게시하고 조회하며 소통하는 커뮤니티 기능에 중점을 두고 있습니다.
기존 어플리케이션 '뉴뉴(Knewnew)'는 React Native로 구현되었으나 PC버전은 React.js로 구현되어
디자인 모티브만 가져왔을 뿐 개발은 초기 세팅부터 모두 직접 구현하였습니다.

사용기술 스택

Front-end

         

Back-end

     

협업 툴

         

시연 영상 및 구현 사항

🍭뉴뉴 (Knewnew)

메인(=리스트) 페이지

• 게시글 리스트 조회
• 무한스크롤
• 비로그인 사용자도 조회는 가능하나 수정, 삭제 등의 조작은 로그인 사용자만 가능하도록 구현
  
  
  

소셜 로그인

• Kakao / Naver OAuth 2.0 API를 이용한 소셜 로그인 기능 구현
• JWT를 이용한 인증과 Refresh Token을 이용한 토큰 보안 강화
• Token의 상태 관리를 하기 위해 Redux 활용
  
  
  
  

추가 정보 입력 페이지

• 회원가입 이후 추가 정보 수집 후 저장
• 최초 회원가입 시 1회만 수집되며, 이후 로그인 시에는 생략되고 바로 메인 페이지로 이동
  
  
  

글쓰기 페이지

• Form Data를 활용한 게시글 전송 기능 구현
• S3와 pre signed URL을 이용한 이미지 파일 업로드 기능 구현
  
  
  
  

게시글 상세 페이지

• 게시글 조회, 삭제 기능 구현
• 이미지 슬라이더 구현
• 댓글 및 대댓글의 생성, 삭제 기능 구현
  
  
  
  
  
  

마이 페이지

• 로그인한 사용자의 정보 조회
• 로그아웃
  
  
  

기타 페이지

• 모바일 앱 연계 모달창
• Nav / Footer
• 잘못된 접근 시 활용 가능한 404 페이지