미리보기

문제를 제작하고 관리할 수 있는 문제은행 플랫폼

사용자가 문제를 문제집에 보관하고, 시험장에서 친구들과 함께 시험을 보고 결과를 확인할 수 있는 커뮤니티 기반 서비스

사용기술: VUE, JAVASCRIPT, TAILWIND CSS, SUPABASE, PRIME VUE

팀 구성
FE 5명
BE 0명 (SUPABASE 사용)

구현 기능 및 기술 이슈 해결 경험

문제집 상세 페이지

• 문제집 내 문제 리스트 확인, 북마크/좋아요 기능, 문제집 수정·삭제 및 댓글 기능 구현
  → 프론트엔드에서 복잡한 상태 관리 없이 깔끔하게 동작할 수 있도록 구성

API 설계 및 Supabase 활용

• Supabase의 테이블 구조를 직접 설계하고, ERD를 기반으로 데이터 흐름 구조화
  → 다양한 관계형 데이터를 효율적으로 불러오기 위해 RPC(Remote Procedure Call) 함수 도입
  → 팀원들이 복잡한 쿼리를 직접 작성하지 않고도 쉽게 데이터 활용 가능하도록 API 추상화

누구나 쉽게 데이트·모임 코스를 기획하고 공유할 수 있는 커뮤니티 기반 플랫폼

사용자가 장소를 찾아 코스를 만들고 타인과 코스나 장소에 대한 생각을 서로 공유할 수 있는 커뮤니티 기반 서비스

사용기술: REACT, TYPESCRIPT, TAILWIND CSS, REACT QUERY, AXIOS, ZUSTAND
팀 구성

FE 5명
BE 0명 (프로그래머스에 제공한 api 사용)

구현 기능 및 기술 이슈 해결 경험

회원 가입

• 회원가입 데이터 입력 과정에서 예상치 못한 에러가 빈번하게 발생
  ⇒ 에러 핸들링 및 유효성 검사를 통해 데이터 일관성 유지 및 사용자 경험 향상

로그인

• 프로그래머스에서 제공하는 로그인 API는 refreshToken 없이 accessToken만 발급하며, 토큰 자체에는 명시적인 유효기간이 없음

• 기술적으로는 세션 만료 등의 문제가 발생하지 않았으나,
  보안과 사용자 경험 측면을 고려해 자체적으로 토큰 만료를 가정한 UX 대응 로직 구현

  ⇒ 쿠키를 직접 설정하여 accessToken의 유효기간을 1시간으로 제한

  사용자 로그인 시, 토큰을 쿠키에 1시간짜리 만료로 저장

  - 이후 setTimeout을 활용하여 1분 간격으로 현재 시각과 쿠키 만료 시간을 비교

  - 토큰 만료가 5분 이내로 다가오면 사용자에게 모달 팝업을 띄워 안내

  연장하기 버튼 클릭 시 쿠키 만료 시간을 다시 1시간 뒤로 갱신

  닫기 버튼을 클릭하거나 모달을 어떠한 동작 없이 5분이상 가만히 놔두면 accessToken 제거 + 로그인 페이지로 리다이렉트

map 기능

지도에서 검색을 사용하여 나온 검색결과를 클릭해 해당 검색결과의 정보를 하나 이상 저장해 코스로 사용

• Kakao Map API를 MapDisplay라는 컴포넌트에 도입하는 과정에서, 지도 위에 또 다른 지도가 겹쳐서 생성되는 현상이 발생

• 사용자가 마우스 스크롤로 지도를 확대/축소할 때마다,

  기존 지도가 유지되지 않고 새로운 지도 인스턴스가 계속 생성되어 겹쳐 보이는 문제

• 이는 MapDisplay가 리렌더링될 때마다 new kakao.maps.Map()이 실행되면서 생긴 문제

  ⇒ useRef를 활용하여 이미 맵이 생성된 경우에는 다시 생성하지 않도록 제어

cl/cd

• Netlify를 이용한 프론트엔드 자동 배포

• GitHub와 연동하여 main 브랜치에 push 시 자동으로 배포