미리보기

깃허브: https://github.com/MoimPod/moimpod

배포: https://moimpod.vercel.app/

기술 스택: TypeScript, Next.js , TailwindCSS, Zustand, Tanstack Query, axios

[역할]

• 마이페이지(회원정보 조회 및 수정, 참여 모임 조회 및 취소, 리뷰조회 및 작성) 구현

[성과]

• 모임 생성, 참가 및 리뷰 내역 렌더링 방식 변경을 통한 사용자 경험 향상

  • TanStack Query prefetch와 서버 컴포넌트를 적용해 클라이언트 로딩을 최소화 해 사용자 경험을 향상.

• 유지보수성 향상을 위한 반복되는 로직의 공통 컴포넌트화

  • 마이페이지 내 반복되는 데이터 패칭/렌더링 로직을 공통 컴포넌트로 추상화 해 중복 제거 및 유지보수성 개선.

• hydration오류 해결을 통해 사용자에게 신뢰성 있는 컨텐츠 제공

  • 서버 컴포넌트에서 UTC 기준 시간으로 인한 클라이언트 컴포넌트와의 hydration mismatch를 해결하기 위해

    day.js의 timezone 플러그인을 사용. 이를 통해 신뢰성있는 데이터를 제공해 사용자 경험을 향상.

• 사용자 시나리오 테스트 과정에서 무한 스크롤의 사용자 경험 불편을 발견하고 이를 개선

  • 무한 스크롤이 적용된 페이지의 탐색 중 상단으로 이동하는 Scroll to Top 버튼을 구현해 탐색 편의성 개선.

  • scrollY를 감지해 scale 값을 조절하는 애니메이션을 적용해 스크롤 위치에 따른 버튼 노출로 사용자 경험 개선.

깃허브: https://github.com/spoticks/FE_Spoticks

배포: https://www.spoticks.shop/

기술 스택: TypeScript, React, TailwindCSS,, Zustand, Tanstack Query, axios

[역할]

• 프론트엔드 2명, 백엔드 1명 중 프론트 담당

• 로그인, 회원가입, 유저 정보, 예매내역 페이지

[성과]

• JWT 인증방식을 사용한 인증 개발을 통해 보안 및 사용자 편의성 강화

  • Access 토큰은 클라이언트 상태, Refresh 토큰은 HttpOnly 쿠키로 분리해 XSS공격 표면 최소화

  • 새로고침 후에도 로그인 상태 유지를 위해 Refresh 토큰 기반 재인증 구현

• 사용자 경험 및 개발 편의성을 향상하기 위해 로딩 및 에러 상태를 컴포넌트 단위로 처리

  • Suspense와 ErrorBoundary로 로딩·에러 상태를 처리해 일관된 UI를 제공하고 코드의 유지보수성 개선

• 코드 유지보수성 향상을 위해 파일 구조 개편

  • 단일 폴더 컴포넌트 관리 → 페이지 단위 컴포넌트 분리 및 공통 컴포넌트를 아토믹 패턴으로 구조화해 유지보수성 개선

• GitHub Actions를 활용해 PR 병합 시 개인 레포와 자동 동기화되도록 구성

  • Vercel 무료 배포 이용을 위해 개인 저장소로 배포하고, Github Actions로 Organization 저장소와 자동 싱크를
    구현해 협엽 효율 향상