[Feat] 회원가입 페이지 구현

[1jiwoo27]

📌 Related Issue

• Closes [Feat] 회원가입 페이지 구현 #29

✅ Checklist

• PR 제목의 형식을 잘 작성했나요? e.g. [Feat] PR 템플릿 작성
• 빌드가 성공했나요? (pnpm build)
• 이슈는 등록했나요?
• 리뷰어와 라벨을 지정했나요?

📚 Tasks

• 회원가입 페이지 구현
• 단계별로 분리 (username, password, email)

⭐ PR Point (To Reviewer)

• 로그인 페이지와 마찬가지로 이후에 로고와 서비스명을 추가할 예정입니다 ~

📷 Screenshot

Summary by CodeRabbit

릴리스 노트

• 새로운 기능
  • 사용자명, 비밀번호, 이메일 단계별 회원가입 프로세스 추가
  • 실시간 양식 유효성 검사 및 오류 메시지 표시 기능 구현
  • 회원가입 페이지 UI 스타일 개선

[coderabbitai]

Note

.coderabbit.yaml has unrecognized properties

CodeRabbit is using all valid settings from your configuration. Unrecognized properties (listed below) have been ignored and may indicate typos or deprecated fields that can be removed.

⚠️ Parsing warnings (1)

Validation error: Unrecognized key(s) in object: 'ignored_paths'

⚙️ Configuration instructions

• Please see the configuration documentation for more information.
• You can also validate your configuration using the online YAML validator.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Walkthrough

회원가입 페이지에 다단계 폼 플로우를 구현했습니다. 새로운 스타일 모듈, 회원가입 단계별 상수 정의, 그리고 USERNAME, PASSWORD, EMAIL 세 단계로 진행되는 폼 로직을 추가했습니다.

Changes

응집도 / 파일(들)	변경 요약
회원가입 스타일 src/pages/signup/signup-page.css.ts	vanilla-extract를 사용하여 container, errorMsg, moveToLogin, memberText 네 가지 공개 스타일 내보내기 추가. 테마 토큰과 레이아웃, 타이포그래피 속성 포함.
회원가입 상수 src/shared/constants/signup-step.ts	username, password, email 세 단계로 구성된 SignUpStep 상수 객체 및 련합 타입 정의. const assertion으로 리터럴 타입 보장.
회원가입 페이지 로직 src/pages/signup/signup-page.tsx	다단계 회원가입 흐름 구현. useNavigate, 단계별 상태 관리(USERNAME/PASSWORD/EMAIL), 폼 필드 입력 및 검증 로직 추가. handleNext 함수로 각 단계 진행 시 유효성 검사. 로그인 네비게이션 경로 유지.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant UI as SignupPage
    participant Validation

    User->>UI: 페이지 로드
    activate UI
    UI->>UI: 초기 상태: USERNAME 단계
    deactivate UI

    loop 각 단계별 진행
        User->>UI: 입력 값 변경
        activate UI
        UI->>UI: 상태 업데이트
        deactivate UI

        User->>UI: 다음 버튼 클릭
        activate UI
        UI->>Validation: 현재 단계 검증
        activate Validation
        alt 검증 성공
            Validation-->>UI: 통과
            UI->>UI: 다음 단계로 진행
        else 검증 실패
            Validation-->>UI: 오류 메시지
            UI->>UI: 오류 표시
        end
        deactivate Validation
        deactivate UI
    end

    alt EMAIL 단계 완료
        User->>UI: 가입 완료
        UI->>UI: 로그인 페이지로 이동
    end

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

• signup-page.css.ts: 스타일 정의만 포함되어 있으므로 검토 부담 낮음
• signup-step.ts: 단순 상수 정의로 복잡도 낮음
• signup-page.tsx: 다단계 폼 검증 로직 검토 필요. 각 단계별 검증 규칙(username 길이/형식, password 강도/일치, email 형식)이 요구사항에 맞는지 확인 권장

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Free

📥 Commits

Reviewing files that changed from the base of the PR and between b87927b and 7622281.

📒 Files selected for processing (3)

• src/pages/signup/signup-page.css.ts (1 hunks)
• src/pages/signup/signup-page.tsx (1 hunks)
• src/shared/constants/signup-step.ts (1 hunks)

---

Note

🎁 Summarized by CodeRabbit Free

Your organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting https://app.coderabbit.ai/login.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}