미리보기

사용자의 위치를 기반으로 주변 계곡을 쉽게 찾고, 상세 정보를 확인할 수 있는 서비스입니다.

기능

• 로그인/회원가입으로 계정을 만들어 계곡에 대한 리뷰를 작성하고 관리할 수 있습니다.

• 사용자는 계곡의 수영 가능 여부, 야영 시설, 주차장 유무 등 필수 정보를 한눈에 확인할 수 있습니다.

• 실시간 날씨 정보와 함께 수심, 연락처 등 안전한 물놀이를 위한 상세 정보를 제공합니다.

담당 파트

지도페이지

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

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

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

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

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

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

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

• 주변 시설 정보 통합 제공

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

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

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

계곡 상세 페이지

• 핵심 정보 제공

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

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

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

• 날씨 및 위치 서비스 통합

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

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

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

계곡 리뷰 페이지

• 사용자 리뷰 관리 기능

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

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

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

• 사진 갤러리 시스템

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

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

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

사용기술

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

링크

Github

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

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

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

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

• Post detail 페이지에 Dynamic import를 적용하여 lazy loading 구현. Markdown 컴포넌트를 동적으로 가져오고, { ssr: false } 옵션을 설정하여 서버사이드 렌더링(SSR) 비활성화

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

상대방과 실시간으로 알고리즘 문제를 풀면서 겨룰 수 있는 서비스입니다.

기능

• 로그인/회원가입 으로 계정을 만들어 마이페이지를 커스텀 할 수 있습니다.

• 방장은 알고리즘 문제와 시간을 설정해 게임 방을 생성 할 수 있고, 참여자는 방을 들어가 준비 버튼을 누르면 방장은 게임을 시작 할 수 있습니다.

• 끝나고 난 후 상대방과 나의 전적을 마이페이지에서 확인 할 수 있습니다.

담당 파트

• 공용 컴포넌트

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

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

• 실시간 채팅

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

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

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

• UI/UX

사용기술

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

링크

Github