Skip to content

feat(web): 회원가입 로그인 API 연동 - #73

Merged
meteorqz6 merged 10 commits into
developfrom
feature/66-auth-signup-login
Jun 24, 2026
Merged

feat(web): 회원가입 로그인 API 연동#73
meteorqz6 merged 10 commits into
developfrom
feature/66-auth-signup-login

Conversation

@meteorqz6

@meteorqz6 meteorqz6 commented Jun 24, 2026

Copy link
Copy Markdown
Contributor

작업 내용

  • 회원가입/로그인 폼을 react-hook-form과 shared Zod schema 기반으로 변경
  • 회원가입/로그인 API 호출 및 hasOrganization 기준 라우팅 연결
  • API 오류 메시지 표시 유틸 추가
  • /organization/new를 onboarding 라우트로 이동해 사이드바 없는 화면으로 분리
    • TODO: 최종 확정된 사이드바 작업 merge 후에는 사이드바에서 로그아웃 부분은 존재하도록 수정

검증

  • pnpm --filter @fragment/shared build
  • pnpm --filter @fragment/web typecheck
  • pnpm --filter @fragment/web lint
  • 브라우저 수동 확인 완료

Closes #66

Summary by CodeRabbit

  • New Features

    • 웹 앱에서 인증 관련 회원가입, 로그인, 로그아웃, 세션 갱신, 내 정보 조회 기능이 추가되었습니다.
    • 온보딩 화면의 기본 레이아웃이 적용되었습니다.
    • 환경설정 예시에 프로덕션용 API 주소 설정이 추가되었습니다.
  • Bug Fixes

    • 회원가입/로그인 폼의 입력 검증과 오류 표시가 개선되었습니다.
    • 비밀번호, 이메일, 이름 등 입력값에 대한 검증 규칙이 더 명확해졌습니다.
    • 인증 실패 시 더 일관된 오류 메시지가 표시되도록 개선되었습니다.

@coderabbitai

coderabbitai Bot commented Jun 24, 2026

Copy link
Copy Markdown

Warning

Review limit reached

@meteorqz6, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 43 minutes and 46 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits.

🚦 How do rate limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 608cc20c-6bdf-44a6-a750-a2d43f5c8745

📥 Commits

Reviewing files that changed from the base of the PR and between 3140686 and b31c12f.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (7)
  • apps/web/package.json
  • apps/web/src/app/(onboarding)/layout.tsx
  • apps/web/src/app/(onboarding)/organization/new/page.tsx
  • apps/web/src/features/auth/components/login-form.tsx
  • apps/web/src/features/auth/components/signup-form.tsx
  • apps/web/src/features/auth/utils/auth-error-message.ts
  • packages/shared/src/schemas/auth.ts
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/66-auth-signup-login

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@meteorqz6 meteorqz6 self-assigned this Jun 24, 2026
Base automatically changed from feature/65-auth-api-client to develop June 24, 2026 07:50
@meteorqz6

Copy link
Copy Markdown
Contributor Author

@coderabbitai review

@coderabbitai

coderabbitai Bot commented Jun 24, 2026

Copy link
Copy Markdown
✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@coderabbitai

coderabbitai Bot commented Jun 24, 2026

Copy link
Copy Markdown

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Get PR details and comments
gh pr view 73 --repo pair-study/final-project --json title,body,state,comments,reviews,reviewRequests

echo "=== PR FILES ==="
gh pr diff 73 --repo pair-study/final-project --name-only

Length of output: 6921


🏁 Script executed:

#!/bin/bash
# Get the full diff for review
gh pr diff 73 --repo pair-study/final-project

Length of output: 27669


🏁 Script executed:

#!/bin/bash
# Check zod version in shared package and if it's re-exported
cat packages/shared/package.json
echo "---"
# Check if zod is already in shared's dependencies
grep -r '"zod"' packages/shared/package.json apps/web/package.json

Length of output: 877



@meteorqz6 PR #73 리뷰입니다. 전반적으로 react-hook-form + shared Zod schema 통합이 깔끔하게 이루어졌고, API 클라이언트 구조도 MVP 범위에 적합합니다. 아래 항목들을 확인해 주세요.


🔴 Must-fix

apps/web/src/lib/api-client.ts — 401 자동 토큰 갱신 미연결

refreshSession()auth-api.ts에 이미 정의되어 있지만, apiClient 내부에 401 응답 시 자동 refresh → 재시도 로직이 없습니다. 현재 상태에서 액세스 토큰 만료 시 모든 요청이 ApiError(401)로 실패합니다.

// api-client.ts 의 fetch 이후 error 처리 부분 예시
if (response.status === 401 && !init._isRetry) {
  await refreshSession(); // 갱신 시도
  return apiClient(path, { ...options, _isRetry: true });
}

MVP 범위 내 인증 플로우 완성을 위해 이 연결이 필요합니다. 아니면 401 처리를 의도적으로 컴포넌트 레이어로 위임하는 것이라면 주석으로 명시해 주세요.


🟡 Should-fix

apps/web/src/lib/api-client.ts Line 154 — 응답 타입 단언

return parsedResponse as TResponse; // 런타임 검증 없음

API 스펙이 바뀌거나 서버가 예상 밖 구조를 내려줄 때 런타임 오류가 발생합니다. 호출 측에서 Zod schema를 옵션으로 넘겨 검증하는 방식을 권장합니다.

// 옵션으로 schema를 받는 오버로드 추가 예시
export function apiClient<TResponse>(
  path: string,
  options?: ApiJsonRequestOptions & { schema?: z.ZodType<TResponse> },
): Promise<TResponse>;

login-form.tsx / signup-form.tsx — 필드 에러 접근성

개별 필드의 에러 <p>id를 부여하고, 해당 입력 요소에 aria-describedby를 연결해야 스크린 리더가 에러를 필드와 연관지을 수 있습니다.

<Input
  id="email"
  aria-invalid={Boolean(errors.email)}
  aria-describedby={errors.email ? "email-error" : undefined}
  {...register("email")}
/>
{errors.email && (
  <p id="email-error" className="text-sm text-destructive">
    {errors.email.message}
  </p>
)}

🟢 Minor

login-form.tsx / signup-form.tsxformError 타입

const [formError, setFormError] = useState(""); // "" vs null 구분 없음

useState<string | null>(null)로 초기화하면 의도가 더 명확합니다.

packages/shared/src/schemas/auth.tsmin(1) + min(8) 체이닝

빈 값 "비밀번호를 입력하세요." / 짧은 값 "비밀번호는 8자 이상이어야 합니다." 순서로 UX 메시지를 분리한 것은 의도적이고 올바릅니다.

zod 중복 선언

packages/sharedapps/web 모두 zod를 선언하고 있지만, pnpm이 3.25.76으로 단일 인스턴스로 deduplicate하고 있어 instanceof 불일치 문제는 없습니다. apps/web에서 @hookform/resolvers/zod의 peer 요구사항을 충족하기 위해 명시적 선언이 필요하므로 현재 구조가 맞습니다.

@meteorqz6
meteorqz6 merged commit e3a0bc4 into develop Jun 24, 2026
2 checks passed
@meteorqz6
meteorqz6 deleted the feature/66-auth-signup-login branch June 24, 2026 08:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(web): 회원가입 및 로그인 API 연결

2 participants