미리보기

OG 태그 및 메타 태그 작업으로 공유 최적화

• 상품 페이지의 OG(Open Graph) 이미지를 상품 대표 이미지와 연결하여 SNS 공유 시 시각적 매력 강화.

• 카카오 공유하기 기능을 추가해 사용자가 여행 상품을 손쉽게 공유하도록 지원.

• 메타 태그 최적화를 통해 검색 엔진 친화적인 구조를 구현하여 웹사이트 노출도를 향상.

접근성 개선 및 크로스 브라우징 이슈 해결

• iOS 환경에서의 크로스 브라우징 이슈(아이폰의 스크롤 바운스, webkit...,CSS Reset, 벤더 프리픽스)를 해결하여 의도한 디자인이 아이폰 (구) 기기에서 동일하게 구현되도록 개선.

• 반응형 디자인을 적용하여 다양한 디바이스에서 최적화된 사용자 경험 제공.

• ARIA 태그 추가와 시맨틱 태그 사용으로 접근성을 강화, 누구나 편리하게 웹사이트를 이용할 수 있도록 개선.

사용자 경험 중심 기능 개발

• 상품 카드 호버 시 지도 -> 여행 사진 스위치 기능을 구현하여 여행 상품과 지도를 동시에 강조.

• 신규 추가 페이지(회사 소개, 트레블 저널 등)에 스크롤 스파이(scroll spy) 기능을 도입, 사용자 탐색성을 향상.

디자인 적용 및 신규 페이지 개발

• 랜딩, 테마, 버킷, 홀리데이, 게시글, 신청 페이지 등 기존 7개 페이지의 디자인 리뉴얼.

• 회사의 비전과 메시지를 전달하는 신규 페이지(회사소개, Different Holidays, 트레블 저널, Contact Us) 4개 추가.

개요

개발 스터디, 프로젝트, 멘토링 등에 함께할 개발자들을 구하거나, 질문을 공유하고 포트폴리오를 관리하는, 개발자를 위한 커뮤니티 플랫폼

기술

Next.js, Typescript, Tailwind.css, hook-form, zustand, jest, Storybook

기여

• 팀장으로서 팀 생산성을 위해 유저 플로우 분석, 컴포넌트 분석, 태스크 분석을 주도적으로 진행하여 작업내용을 이슈에 정리. 스크럼 내용 문서화.

• 팀원 간 원할한 작업 공유 및 디자이너와의 협업 강화를 고려해 github actions 를 이용한 스토리북을 Chromatic 에 배포하고 이를 자동화.

• 일관된 UI 와 사용자 경험을 위해 확장성 있고 재사용 가능한 컴포넌트를 설계하고 적용.

• 반복적으로 일어나는 백엔드 단의 변경에 빠르게 대응하기 위해 openapi-typescript 를 사용하여, 서버 사이드 상태의 인터페이스 정의 자동화

개요

감정을 기록하고, 위로가 되는 짧은 문구를 공유하여 소통하는 플랫폼.

기술

Next.js, Typescript, Tailwind.css, hook-form, zustand

기여

• 공통 컴포넌트 개발: 일관된 UI와 사용자 경험을 위해 재사용 가능한 컴포넌트를 설계하고 적용.

• 인증 인가 구현: http only, secure 옵션을 준 쿠키에 jwt 를 관리하고, api route 를 통해 서버 단에서만 쿠키에 접근하도록 설계

  • 인가된 요청 시 api handler 함수에서 검증된 엔드포인트에 한해서만 요청을 처리하는 예외 처리

  • 토큰의 만료 여부를 검사하여, 액세스 토큰 만료 시 재발급 요청 처리

• 사용자 편의성을 위한 소셜 로그인 및 게스트 로그인 구현

• 일관된 UI 와 사용자 경험을 위해 확장성 있고 재사용 가능한 컴포넌트를 설계하고 적용.

• tailwind css 를 사용해 반응형 구현, 이를 통해 다양한 화면 크기에서 일관된 사용자 경험 제공

개요

할 일을 칸반보드 스타일의 대시보드를 통해 팀원들과 공유하는 협업 플랫폼

기술

Next.js, Typescript, Tailwind.css, hook-form, zustand

기여

• 공통 컴포넌트 개발: 일관된 UI와 사용자 경험을 위해 재사용 가능한 컴포넌트를 설계하고 적용.

  • 폼 컴포넌트: 컴파운드 패턴과 hook form 을 결합해 유연하고 재사용 가능한 폼을 구현.

  • 모달 컴포넌트: 반복적으로 나타나는 모달에 대해 하나의 전역 상태로 모달을 제어하여 모달 상태 관리의 복잡도를 개선.

• 예외 처리: 중복된 이메일로 회원가입 요청 시, 500 에러가 반환되는 상황에 hook-form 의 setError 메서드를 통해 사용자에게 에러 가시화.