GreenMate

상세 내용

• 팀에서 PL 역할을 맡아 프로젝트 구조 및 기술 스택 설계, 코드 리뷰 주도

  • 프로젝트 전체 구조를 설계하고 React, Next.js, TypeScript 등의 기술 스택을 선정했습니다.
  • 코드 리뷰를 주도하며 팀원들과 좋은 코딩 패턴을 공유하고 코드 품질 향상을 주도했으며, 이를 통해 전체적인 개발 효율성을 높였습니다.

• NextAuth.js 기반 소셜 로그인과 JWT 기반 이메일/비밀번호 로그인 구현

  •

  NextAuth.js를 사용해 카카오, 네이버 소셜 로그인을 구현하고, 일반 회원가입은 JWT 인증으로 일반 로그인을 구현하여 다양한 인증 방식을 지원하는 회원가입 시스템을 개발했습니다. 이를 통해 안전하고 편리한 사용자 인증 흐름을 제공하며, 세션 관리와 토큰 검증 로직을 최적화했습니다.

• Zustand를 활용한 전역 로그인 상태 관리로 컴포넌트 간 상태 공유 최적화

  •

  로그인 상태를 여러 컴포넌트에서 사용해야 하는 상황에서 props drilling 문제를 해결하기 위해 Zustand를 도입했습니다. 이를 통해 모든 컴포넌트에서 로그인 정보에 쉽게 접근할 수 있게 되었고, 불필요한 리렌더링을 줄여 애플리케이션 성능을 개선했습니다.

• React Hook Form + Zod 조합의 Multi-Step Forms 개발 및 상태 관리 연동

  •

  초기에는 단일 페이지에서 모든 정보를 입력받는 방식으로 개발했으나 회원가입 프로세스가 길어져 사용자의 중간 이탈 위험이 커지고 전반적인 UX가 좋지 않다고 판단했습니다.

  이를 개선하기 위해 Multi-Step Form 구조로 리팩토링하여 사용자가 한 번에 집중해야 할 입력 항목을 줄이고 진행률을 시각적으로 확인할 수 있도록 개선했습니다.

  각 단계에서는 React Hook Form으로 폼 상태를 효율적으로 관리하고 Zod를 활용한 실시간 유효성 검증을 적용했습니다. 또한 Zustand를 통해 단계별 입력 데이터를 전역으로 관리하여 페이지 간 데이터 공유와 이탈 시 입력 내용 보존 기능을 구현했습니다.

• Middleware를 통한 페이지 접근 권한 제어 시스템 구축

  •

  Next.js Middleware를 활용해 사용자 인증 상태와 권한에 따른 페이지 접근 제어 시스템을 구축했습니다. 각 페이지에서 개별적으로 권한을 확인하는 대신 중앙 집중식으로 관리하여 코드의 일관성을 높여 개발 효율성을 높였습니다.

• 마이페이지 전반 개발 (프로필 조회·수정, 비밀번호 변경, 북마크/주문내역/내 식물 관리)

  •

  사용자 마이페이지의 전체 기능을 개발했습니다. 프로필 정보 조회 및 수정, 비밀번호 변경, 북마크 관리, 주문 내역 확인, 반려 식물 생성/조회/수정/삭제(CRUD) 등 필요한 모든 기능을 구현했으며 다양한 디바이스에서 최적화된 사용자 경험을 제공하기 위해 반응형 디자인을 적용했습니다.