이 문서에 대해

Phase 3~5는 모바일 앱 연동, 인증·디바이스 정리, 푸시, 프로덕션 안정화 등 운영 단계의 프론트엔드 작업을 모은 로그입니다. work_summary의 한 줄 요약이 가리키는 “후반부”에 해당합니다.

Phase 3-5: Mobile Integration & Production (Jan 2024 - Present)

Nacho app integration, authentication refactoring, push notifications, and production stability

Phase 3: Mobile App Integration (Jan 2024 - Jun 2024)

Nacho App Deep Linking

Universal Links (iOS)

• Created apple-app-site-association file with proper app IDs
• Built environment-specific deep link URLs (dev, stage, prod)
• Developed custom hook useAppDomainRedirect for seamless redirects

Android Deep Linking

• Created scheme-based URLs for direct app launch
• Implemented App Banner component with device detection
• Added QR code images for iOS/Android app downloads

App Download Flow

• Built NachoAppLink component with App Store/Play Store detection
• Created download event tracking for fan club sections
• Implemented staging environment testing with console logging

Event & Promotional Campaigns

Shibuya Event (Japan exclusive)

• Created event landing page with locale-specific banners
• Built temporary banner system with feature flags
• Implemented event-specific copy and images

App Download Campaigns

• Built app download incentive event pages
• Created authenticated event buttons (user verification required)
• Implemented event link updates with dynamic routing

Authentication Architecture Overhaul

Phase 1: Token Access Migration

• Replaced cookie-based token parsing with /api/v1/auth/validate endpoint
• Eliminated client-side JWT decoding security concerns
• Reduced bundle size by removing jwt-decode library

Phase 2: LocalStorage Integration

• Built token storage in localStorage on app first launch
• Created token persistence layer for cross-session authentication
• Implemented token retrieval logic for device mapping APIs

Phase 3: Jotai Atom State Management

• Migrated token state from localStorage reads to reactive Jotai atoms
• Built authTokenStore with automatic synchronization
• Refactored AuthProvider to use centralized token atoms
• Eliminated 50+ direct localStorage access points

Phase 4: Guest Cart Authentication

• Rewrote isTokenValid logic to use /api/v1/auth/validate API
• Removed unsafe accessToken parsing from cookies
• Added JSON.parse error handling for token retrieval

Fan Club & Restricted Products

Fan Club Products

• Implemented fan club product detection
• Conditionally hide coupon download sections for fan club items
• Built product type checking logic in GraphQL queries

Geo-Restriction System

• Created US-specific product cart restrictions (TXT products)
• Implemented restrictedProductIds array with environment configs
• Added cart validation before add-to-cart actions

Feature Flag System

• Integrated Unleash feature flags for gradual rollouts
• Created useFeatureFlag hook for component-level feature gating
• Implemented environment-based flag overrides for testing
• Built flag cleanup workflow after successful rollouts

Routing & Navigation Improvements

Recently-Viewed Page

• Fixed back button behavior
• Replaced router.back() with router.replace() for modal-like behavior
• Added session storage for maintaining navigation context
• Prevented incorrect routing after deep linking

Link Handling

• Migrated Next.js to tags for legacy page transitions
• Implemented remote config for gradual migration of product detail links
• Added link tracking for analytics

Component Library Expansion

Button Component

• Built reusable Button component with theme variants (grayFilled, ktown4uFilled, ktown4uOutlined)
• Size variants: sm, md, lg
• Icon support with lucide-react integration

SortSelect Component

• Right-aligned dropdown with custom styling
• Z-index management for proper layering
• Active/hover state styling

Common Alert Dialog

• Built on Radix UI primitives
• Login prompt modal for unauthenticated actions
• Reusable across review, comment, and checkout flows

Phase 4: Push Notifications & Device Management

Device Mapping System

• Built comprehensive device-user mapping for push notifications
• Created useDeviceId hook for device identifier management
• Developed useMemberId hook for user identification
• Implemented device mapping API integration with Capybara GraphQL

Device-User Lifecycle

• Login: Map device to user ID via updateDeviceUserId mutation
• Logout: Set device userId to null for guest state
• Guest navigation: Track device without user association

NachoPushTokenRegistrar

• Automatic push token registration on app launch
• Device ID → Push token mapping for segmentation
• Changed registration key from userID to deviceID for better tracking

Push Notification Permissions

Permission Check & Settings

• Built checkPermission API with ask: true on first launch
• Created permission state tracking (granted, denied, prompt)
• Integrated with native app settings via Nacho SDK

Permission Collection API

• Built notification consent tracking API calls
• Implemented permission update flow on user action
• Added debug logging for staging environment testing

NachoCode SDK Integration

• Integrated nachocode-client-sdk v1.6.5
• Built wrapper hooks for device management functions
• Added environment checks for dev/stage/prod API endpoints

Coupon Event Automation

Monthly Coupon Pack System

• Built time-based coupon matching logic (September, October coupons)
• Created locale-specific coupon arrays (EVENT_COUPONS_BY_LOCALE)
• Implemented date/time conditional rendering with dayjs

Fall Event Limited Coupons

• Built time-slot coupon matching (different coupons per day/time)
• Created test mode for QA with override flags
• Implemented 17+ date logic for final coupon matching
• Added Japan store special handling (always match certain coupons)

Feature Flag Lifecycle

• Implemented gradual rollout with feature flags
• Removed flags after successful deployment
• Managed test coupon branches for QA environments

Phase 5: Production Stability & MyPage Redesign

MyPage UI Redesign

• Complete redesign of MyPage with modern component architecture
• Built with Radix UI primitives (Dialog, Tabs, Dropdown)
• Implemented responsive layout with mobile-first approach
• Created navigation menu with active state highlighting

User Information Display

• Built ID masking logic for privacy compliance
• Added comprehensive unit tests (Jest) for masking algorithm
• Tested edge cases: short IDs, special characters, various lengths

Logout Functionality

• Added logout button with proper href linking
• Implemented redirect logic after logout
• Built confirmation dialog for logout action

Router Fixes

• Fixed /mypageList → /mypage redirect handling
• Resolved navigation state issues

Access Restrictions

• Built geo-based product access restrictions
• US-specific cart restrictions for certain products (TXT)
• Added restrictedProductIds with environment-specific test IDs
• Implemented validation before add-to-cart actions

Technical Debt & Refactoring

Navigator Layout Refactoring

• Cleaned up layout component structure
• Improved props passing and component composition
• Reduced code duplication across pages

Type Safety Improvements

• Eliminated any types in auth and device mapping modules
• Added proper TypeScript interfaces for all API responses
• Implemented strict null checks

Component Cleanup

• Removed legacy product card components
• Deleted unused icon files and assets
• Cleaned up deprecated feature flag code

마무리

• 이 구간은 앱 딥링크·인증·푸시·타입 안전처럼 “서비스가 커진 뒤”에 두드러지는 과제들이 많습니다. 전체 경력 요약은 work_summary와 병행해 보세요.
• 보안·푸시·스토어 정책은 업데이트가 잦은 영역이라, 문서의 시점 이후 변경이 있었을 수 있습니다.