미리보기

주변 계곡 정보를 제공하는 서비스

담당 파트
지도페이지

• 카카오맵 API를 활용한 지도 인터페이스 개발

  • 현재 위치 기반 계곡 검색 및 표시

  • 지역 내 재검색 기능으로 동적 데이터 로딩

  • 클러스터링을 통한 마커 최적화 관리

• 사용자 친화적 UI/UX 구현

  • 화면 하단 토글로 현재 지도 내 계곡 목록 표시

  • 마커 클릭 시 해당 계곡 정보 하이라이트 및 최상단 표시

• 주변 시설 정보 통합 제공

  • 카테고리 기반 주차장/병원 검색 및 표시

  • 시설물 상세 정보 제공 및 카카오맵 연동

  • 바운딩 박스 기반 최적화된 데이터 필터링

계곡 상세 페이지

• 핵심 정보 제공

  • 물놀이/야영/주차장 가능 여부를 아이콘(✓, ✗, ?)으로 표시

  • 계곡 기본 정보 및 부가 정보 제공

  • 사용자 정보 제보 시스템 구현

• 날씨 및 위치 서비스 통합

  • Weather API 연동으로 7일 날씨 예보 제공

  • 카카오맵 길찾기 연동 및 주변 시설 정보 확인

  • 지도 페이지와 연계한 위치 정보 시스템 구현

계곡 리뷰 페이지

• 사용자 리뷰 관리 기능

  • 무한 스크롤 방식의 리뷰 목록 제공

  • 사용자별 리뷰 필터링 기능

  • 상단 고정 유저 아이콘으로 빠른 접근성 제공

• 사진 갤러리 시스템

  • 그리드 레이아웃으로 리뷰 사진 일괄 표시

  • 사진 클릭 시 확대 보기 기능

  • 사진과 연계된 리뷰 내용 미리보기 제공

사용기술

React, Typescript, Tailwind, Zustand, Vite, React-Query

링크

Github

Next를 이해하기 위해 만든 개인 블로그 서비스입니다.

• Next의 SSG로 설계하여 빠른 웹사이트 구축

• Chakra UI와 CSS 모듈을 활용하여 각 컴포넌트에 대한 스타일을 독립적으로 관리하고, 접근성이 뛰어난 UI 컴포넌트 구현

• SEO 최적화를 위해 메타데이터 설정 각 페이지에 맞는 메타데이터를 설정하여 검색 엔진 최적화

• Vercel을 통한 자동 빌드 및 배포

• 최적화로 lighthouse 점수 개선 (60 -> 95)

실시간 알고리즘 대결 서비스

담당 파트

• 공용 컴포넌트

  • 모달 시스템 설계(게임 결과창 및 방 생성)

  • 게임 내 테스트 케이스 설정

• 실시간 채팅

  • 전체 채팅과 게임방 채팅을 구분하여 설정

  • StompJs 라이브러리를 사용하여 WebSocket 연결을 설정하고, STOMP 프로토콜을 통해 메시지를 전송

  • 메시지를 전송할 때 JSON 형식으로 데이터를 직렬화하여 서버에 전송

• UI/UX

사용기술

React, Typescript, Tailwind, Zustand, Axios, Chakra UI

링크

Github