SOLO PROJECT

/TNOVEL

2024.03.08 ~ 2024.03.21

FRONT-END

TNOVEL은 그릿지에서 주최한 시뮬레이션 챌린지 '그릿지 테스트'를 통해 제작한 프로젝트입니다. 개발 가이드라인, 화면 설계서, 피그마 에셋, API 등이 제공되었고, 주어진 기간 내에 핵심 기능을 구현하는 것이 목표였습니다. 인스타그램과 유사한 여행 기록 SNS로, 로그인, 소셜 로그인(카카오), 회원가입, 게시글 작성/조회, 결제 시스템 등의 기능을 구현했습니다. 챌린지 결과 상위 10% 안에 들어 합격하였습니다.

GITHUB

LIVE DEMO

📝 주요기능 및 특징

여행 기록 게시글 및 댓글 작성/공유 기능
사진 업로드 기능
게시글 무한 스크롤 기능
포트원(구 아임포트) 결제 모듈 연동

🛠️ 사용 기술 및 언어

React

Typescript

Styled-components

Recoil

📊 작업 기여도

인증 기능 구현

로그인, 소셜 로그인(카카오) 기능 개발
회원가입 시 생일 입력, 약관 동의 프로세스 구현

게시글 및 타임라인 기능

게시글 CRUD 및 댓글 Read 기능 개발
게시글 타임라인 무한 스크롤 기능 구현
이미지 첨부 시 파일 업로드 용량 제한 적용

결제 모듈 연동

포트원(구 아임포트) 결제 모듈 연동 및 화면 구현
PC 환경에서 결제 후 콜백 함수를 통한 결제 성공 확인
모바일 환경에서 리다이렉트 URL로 이동 후 결제 성공 확인

💥 트러블 슈팅

Trouble1. 게시글 조회 순서 이슈

문제: 게시글 조회 API를 사용하면 이미 페이지네이션된 결과가 반환되어, 전체 페이지 수를 알 수 없어 최신 순으로 조회할 수 없음
해결: useEffect를 활용하여 첫 접속 시 첫 페이지를 조회하고 전체 페이지 수를 파악한 후, 마지막 페이지(최신)를 불러오도록 구현. 무한 스크롤 시 페이지를 1씩 줄여가며 이전 페이지를 불러옴

📸 사이트 캡쳐

클릭시 크게 볼수있습니다.

로그인 페이지

회원가입 페이지

게시글 작성

게시글 조회

타임라인

결제 페이지

THIS IS MY PORTPOLIO.