shape

Login State Management
& Validation Testing

Description

Unified login system development for Codestates.
Responsible for cross-product login state management and My Page development

Tech Stack

  • React.js
  • Next.js
  • typescript
  • Tanstack-query
  • React-hook-form
  • Zustand
  • Styled-components
  • Jest
  • React-testing-library
  • Storybook

Team

5 (PM 1, PD 1, FE 2, BE 1)

Period

2023.04 ~ 2023.08

Details

  1. My Page development
    • Developed user profile read and update features
    • Implemented verification flow for email and phone number changes; wrote unit tests for validation logic
    • Wrote page-level Storybook stories for UI review and QA (connected msw, deployed via Chromatic)
  2. Unified login state management
    • Enabled access to the unified login token in localStorage from pages across different domains\n(using the cross-storage library)
    • Implemented continueUrl state to redirect users back to their original page after login (zustand + localStorage)
    • Wrote an HOC that verifies login status and token validity before entering protected pages
  3. Legacy service code maintenance
    • Integrated the unified login flow into legacy services (intended as a bridge until new services launched)
    • Removed unused code after confirming status and plans with relevant teams
    • Applied absolute path imports (modified webpack alias via Craco)
Jin-kyeong Song | Frontend Developer