다시봄

| 친환경 제품을 판매하는 이커머스 플랫폼

🗓️ 기간: 2024.12.16 ~ 2024.01.24

👥 팀 구성: 프론트엔드 개발자 5인

👩‍💻 담당 역할: 프론트엔드 개발 / 회원관리 기능 전담

회원 관리 전반(로그인/회원가입, 주문 내역 조회, 1:1 문의, 후기 관리 등)을 직접 구현했으며, 담당 기능 외에도 장바구니 기능을 리팩토링하여 안정적인 상태 관리를 보강했습니다. 또한, 포트원 결제 API를 연동하여 카드 결제 및 카카오페이 기능을 추가 구현하였습니다.

🛠️ 사용 기술: HTML5, CSS3, TailwindCSS, JavaScript, React.js, Zustand, Tanstack Query

💐 번들링 도구: Vite

🌿 깃허브: move to github

🖥️ 배포 도구: Netlify move to site

🎥시연 영상

• 구현 방식 : React 기반 CSR 방식의 전형적인 쇼핑몰 구조

• 프로젝트 개요 : 친환경 제품 전문 쇼핑몰 ‘자연상점’을 참고하여 제작한 ‘다시봄’은 지속 가능한 소비를 촉진하고, “다시 지구에 봄이 오길 바란다”는 의미를 담아 기획한 친환경 쇼핑몰 웹사이트입니다. 전형적인 이커머스 플랫폼의 구조를 기반으로, 메인 홈 · 상품 목록 · 상세 페이지 · 장바구니 · 주문/결제 · 위시리스트 · 후기/Q&A 등 기본적인 쇼핑몰 기능을 충실히 구현했습니다.

• 프로젝트 진행과정 : 프로젝트는 매주 설정한 마일스톤을 달성하기 위해 GitHub Projects를 활용해 기능 구현의 흐름을 관리했습니다. 또한 매일 아침 20분간 브리핑을 진행하며 각자의 작업 범위를 공유하고 논의한 뒤 개발을 진행했습니다.

  구현 완료 후에는 PR 생성 → 코드 리뷰 → 피드백 반영의 절차를 철저히 지켰습니다. 단순히 병합에 그치지 않고, 실제 브랜치 이동 후 기능 동작 여부를 직접 확인하며 세부적인 피드백을 제공하려 노력했습니다.

  그 결과, 공통적으로 사용하는 라우터 파일의 오류를 조기에 발견하여 해결할 수 있었고, 프로젝트의 초기 진행 속도를 높이는 데 기여할 수 있었습니다. 이러한 협업 프로세스를 통해 프로젝트 수료 후 동료 피드백 리포트에서 코드 품질 관리, 원활한 소통, 협업 기여도 측면에서 긍정적인 평가를 받을 수 있었습니다.

🚀 핵심 기여 내용

• 로그인·회원가입 흐름 및 사용자 세션 관리를 클라이언트 단에서 구현하기 위해 JWT 기반 인증 구조를 설계하여 브라우저 Storage(SessionStorage)와 Zustand 전역 상태를 연동
• OAuth 2.0 인증 코드 플로우를 활용해 카카오 소셜 로그인 기능을 구현하고, Zustand 전역 상태와 Storage를 연동하여 로그인 상태 유지 및 세션 관리 로직 구축
• JWT 기반 Access·Refresh Token 구조를 직접 설계하고, axios 인터셉터로 토큰 만료 시 자동 갱신 로직을 구현하여 UX 향상 및 보안 이슈 방지
• Zustand persist.setOptions()를 활용해 autoLogin 여부에 따른 로컬/세션 스토리지 분기 처리 로직 구현
• TailwindCSS 전역 테마 시스템을 정의하여 폰트·컬러·레이아웃의 UI 일관성 및 스타일링 효율성 확보
• 인증되지 않은 사용자의 접근을 차단하기 위해 Protected Routes 컴포넌트를 구현하여 보안성 강화
• 불필요한 리렌더링과 중복 API 호출을 최소화하기 위해 Zustand 기반 장바구니 로직을 React Query로 리팩토링하여 데이터 캐싱 및 서버 동기화 적용

트러블슈팅

🔹 자동로그인 기능 구현

📌 구현 배경 및 해결 전략

보안에 민감한 요즘, 사용자 인증 정보를 세션 스토리지에 저장해 브라우저 종료 시 삭제하는 방식이 선호됩니다. 하지만 사용자가 자주 방문하는 사이트라면, 자동로그인을 원하는 경우도 많기 때문에, 사용자의 선택에 따라 로그인 정보를 유지할 수 있도록 스토리지를 동적으로 선택하는 기능이 필요했습니다.

자동로그인 체크 여부에 따라 로컬스토리지 또는 세션스토리지 중 적절한 스토리지에 사용자 정보를 저장하는 구조를 전역 상태 라이브러리인 zustand을 활용해 구현하고자 했습니다.

📌 어떤 고민이 있었는지?

자동로그인 기능을 체크한 경우에는 브라우저를 닫아도 로그인 유지, 끈 경우에는 새 창에서 다시 로그인하도록 설계해야 했습니다.

하지만 zustand의 persist 미들웨어는 초기 설정 시 스토리지를 고정해야 해서, autoLogin 상태값에 따라 런타임에 스토리지를 전환하는 기능이 부족했습니다. 이 문제를 해결하려면, persist 외에 추가적인 기능이 필요했습니다.

📌 어떻게 해결했는지?

공식문서를 참고해, persist 미들웨어의 setOptions API를 활용하여 문제를 해결할 수 있었습니다.

persist 미들웨어에서 제공하는 다양한 옵션 중 하나인 setOptions는 스토리지 엔진 자체를 런타임 중 동적으로 바꿀 수 있는 API 입니다. persist 미들웨어는 다양한 추가 옵션들을 제공하는데, 그 중 자동로그인 기능 구현에 완벽하게 부합했던 것이 바로 이 setOptions였습니다.

최종적으로 아래의 코드를 추가해 기능을 구현했습니다. 사용자가 로그인할 때 user 객체에 포함된 autoLogin 값을 기준으로, true일 경우 로컬스토리지를, false일 경우엔 세션스토리지를 반환하도록 하였고, 이를 통해 새로고침이나 페이지 이동시에도 아래 Persist 함수를 통해 다시 autoLogin값을 불러와 유저 정보를 자동으로 복원시킬 수 있었습니다.

📌 무엇을 배웠는지?

• zustand로 전역 상태를 관리할 때는 persist 미들웨어가 필수적이라는 것입니다. persist를 사용해야만 페이지 새로고침이나 이동 시에도 중복되는 useEffect() 코드 없이, 상태값이 항상 안정적으로 유지되기 때문입니다.
• zustand 미들웨어가 제공하는 다양한 옵션이나 API 함수를 활용하면 더욱 섬세한 상태 관리가 가능하다는 것입니다. 특히 자동 로그인처럼 동적인 스토리지 전환이 필요한 경우, setOptions라는 API를 활용하면 코드의 일관성과 유연성을 모두 확보할 수 있다는 사실을 배웠습니다.