Refactor/login,dashboard,onboarding

[JuHyeong424]

개요

login, onboarding, dashboard 세 페이지의 UI와 도메인 로직을 분리하고, 컴포넌트 구조를 정리했습니다.

아직 storage는 리팩토링 못함

Login

문제점

• 카카오/구글/애플 로그인 요청 함수 3개가 중복 구조로 존재
• 도메인 로직(인증, 리다이렉트, 메시지 수신)이 페이지 컴포넌트에 혼재
• loading, error 두 상태가 동시에 true가 될 수 있는 불가능한 상태 존재

변경 사항

폴더 구조

login/
  layout.tsx
  page.tsx
  _hooks/useLogin.ts
  _components/
    Header.tsx
    TolliLogoImage.tsx
    Loading.tsx
    LoginActions.tsx
    LoginErrorMessage.tsx
    LoginButton.tsx
    ProviderButton.tsx

컴포넌트 분리

• LoginActions — children 패턴으로 레이아웃만 담당.
  의미 없는 spacer 제거
• ProviderButton — 카카오/구글/애플 공통 버튼. PROVIDER_CONFIG로 브랜드 정보 캡슐화, provider 키만 외부에 노출

// Before
<SocialLoginButton bgColor="#FEE500" textColor="#000000" icon={<KakaoIcon />} text="카카오로 로그인" onClick={...} />

// After
<ProviderButton provider="kakao" onClick={() => requestLogin("kakao")} />

useLogin 훅

• 로그인 요청 함수 3개 → requestLogin(provider) 1개로 통합
• loading + error → useReducer 기반 discriminated union 상태로 통합

type LoginState =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "error"; message: string };

LoginLayout → layout.tsx

Next.js App Router의 layout.tsx로 교체

Onboarding

문제점

• 애니메이션 phase 상태(idle/exit/enter)와 네비게이션 로직이 페이지에 혼재
• STEPS 배열에 extra: JSX 인스턴스 저장 (모듈 로드 시 고정)
• notifyOnboardingComplete 중복 호출
• 마지막 스텝에서 시작하기 클릭 시 exit 애니메이션 후 빈 화면 노출

변경 사항

폴더 구조

onboarding/
  layout.tsx        ← 공통 px 적용
  page.tsx
  _hooks/
    useOnboarding.ts
    useSlideAnimation.ts
  _components/
    StepIndicator.tsx
    OnboardingSlide.tsx
    OnboardingActions.tsx

useSlideAnimation

• 3단계 상태 머신(idle → exit → enter) 추출
• onExit: (destination: number) => void 콜백 주입으로 훅 분리

useOnboarding

• 마지막 스텝에서 navigateToLogin() 직접 호출 (exit 애니메이션 미실행)
• notifyOnboardingComplete 모듈 레벨 function 선언으로 호이스팅 보장

반응형 스타일

• 고정 px → clamp() 기반 반응형 값으로 전환
• 공통 px → layout.tsx에서 일괄 적용

extra: LearningSteps

• JSX 인스턴스() → 컴포넌트 참조(LearningSteps)로 수정

Dashboard

문제점

• loading, error boolean 조합으로 불가능한 상태 허용
• setActiveIndex setter를 props로 직접 전달 (React anti-pattern)
• activeIndex 0/1 숫자값으로 의미 모호
• AfterFinish, BeforeFinish, Bookmark가 대시보드 루트에 산재

변경 사항

폴더 구조

dashboard/
  page.tsx
  _hooks/
    useDashboard.ts
    useTab.ts
    useBookmark.ts
  _components/
    DashboardLayout.tsx
    DashboardHeader.tsx
    DashboardNav.tsx
    FetchError.tsx
    home/
      DashboardHome.tsx
      AfterFinish.tsx
      BeforeFinish.tsx
      Card.tsx
      Nickname.tsx
      Illustration.tsx
    bookmark/
      Bookmark.tsx
      BookmarkList.tsx
      BookmarkHeader.tsx
      BookmarkEmpty.tsx
      IndividualBookmark.tsx

useDashboard / useBookmark

• loading + error + data → useReducer discriminated union으로 통합

type State =
  | { status: "loading" }
  | { status: "error" }
  | { status: "success"; data: Data };

useTab

• activeIndex: 0 | 1 → activeTab: "home" | "bookmark" 의미 있는 타입
• setActiveIndex props 전달 → handleTabChange 콜백으로 교체

Card

• AfterFinish, BeforeFinish 공통 article UI 추출
• className? prop으로 각 화면별 추가 스타일 주입

FetchError

• dashboard와 bookmark 양쪽에서 동일한 에러 UI 재사용

IndividualBookmark

• fetchData props 노출 → onDelete 콜백으로 교체 (구현 세부사항 은닉)
• handleDeleteBookmark(verseId) 파라미터 제거 → 클로저의 value.verse.id 직접 사용

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
tolli-fe-web	Ready	Preview, Comment	Jun 29, 2026 8:32am