[JDDESIGN-2] Design: 로그인 및 회원가입 페이지 HIFI 구현#70
Merged
Conversation
📝 WalkthroughWalkthroughThis PR refactors the email authentication flow to remove the signup name requirement and modernizes related UI components. It introduces new logo components, refines existing button/input styling, normalizes question selection logic with stricter custom-flag handling, and restructures the email login screen with updated layout and navigation patterns. ChangesEmail Authentication & Component Updates
Sequence DiagramsequenceDiagram
participant User
participant EmailLoginScreen
participant signupWithEmail
participant ApiAuth
User->>EmailLoginScreen: Enter email, password, passwordConfirm (no name)
EmailLoginScreen->>signupWithEmail: Call with email, password (name = null)
signupWithEmail->>signupWithEmail: Derive fallbackName from email prefix
signupWithEmail->>ApiAuth: POST /api/auth/signup with name ?? fallbackName
ApiAuth-->>signupWithEmail: Success response
signupWithEmail-->>EmailLoginScreen: Auth complete
EmailLoginScreen->>User: Show success screen with LogoHorizontalMedium
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@jobdri/src/components/login/EmailLoginScreen.tsx`:
- Around line 616-619: The signup button currently uses isSignupFilled to
control enabled/disabled but the form submit guard uses isSignupReady, causing
clickable buttons that do nothing; update the button in EmailLoginScreen (the
element with props active, className="self-stretch", disabled, type="submit") to
use isSignupReady (or the same condition used by the submit handler) for its
disabled/active state so UI and submit logic match, ensuring
disabled={!isSignupReady || isSignupSubmitting} (and active={isSignupReady})
instead of isSignupFilled.
In `@jobdri/src/lib/auth.ts`:
- Around line 153-162: The signup flow currently uses name ?? fallbackName which
doesn't handle empty or whitespace-only names; update the logic in the signup
function (where fallbackName and the postAuth call are defined) to trim and
validate name (e.g., const safeName = name && name.trim().length ? name.trim() :
fallbackName) and pass safeName into postAuth instead of name ?? fallbackName so
blank strings or whitespace are replaced by the fallbackName.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: cae51fa3-6f49-4e20-b275-9e5348bf7afd
⛔ Files ignored due to path filters (2)
jobdri/src/assets/ic_LOGO_symbol.svgis excluded by!**/*.svgjobdri/src/assets/ic_LOGO_type.svgis excluded by!**/*.svg
📒 Files selected for processing (8)
jobdri/src/components/apply/SelectQuestion.tsxjobdri/src/components/common/buttons/IconOnlyButton.tsxjobdri/src/components/common/input/InputMain.tsxjobdri/src/components/common/list/ListQ.tsxjobdri/src/components/common/logo/horizontal/m.tsxjobdri/src/components/common/logo/vertical/m.tsxjobdri/src/components/login/EmailLoginScreen.tsxjobdri/src/lib/auth.ts
Comment on lines
+616
to
619
| active={isSignupFilled} | ||
| className="self-stretch" | ||
| disabled={!isSignupReady || isSignupSubmitting} | ||
| disabled={!isSignupFilled || isSignupSubmitting} | ||
| type="submit" |
There was a problem hiding this comment.
Align signup button enablement with actual submit guard.
Button state is based on isSignupFilled, but submit guard uses isSignupReady. This enables a clickable button that silently no-ops on invalid input.
Suggested fix
<Button
label={
isSignupSubmitting ? "인증번호 발송 중" : "회원가입"
}
styleType="primary"
size="large"
- active={isSignupFilled}
+ active={isSignupReady}
className="self-stretch"
- disabled={!isSignupFilled || isSignupSubmitting}
+ disabled={!isSignupReady || isSignupSubmitting}
type="submit"
/>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| active={isSignupFilled} | |
| className="self-stretch" | |
| disabled={!isSignupReady || isSignupSubmitting} | |
| disabled={!isSignupFilled || isSignupSubmitting} | |
| type="submit" | |
| active={isSignupReady} | |
| className="self-stretch" | |
| disabled={!isSignupReady || isSignupSubmitting} | |
| type="submit" |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@jobdri/src/components/login/EmailLoginScreen.tsx` around lines 616 - 619, The
signup button currently uses isSignupFilled to control enabled/disabled but the
form submit guard uses isSignupReady, causing clickable buttons that do nothing;
update the button in EmailLoginScreen (the element with props active,
className="self-stretch", disabled, type="submit") to use isSignupReady (or the
same condition used by the submit handler) for its disabled/active state so UI
and submit logic match, ensuring disabled={!isSignupReady || isSignupSubmitting}
(and active={isSignupReady}) instead of isSignupFilled.
Comment on lines
+153
to
162
| name = null, | ||
| email, | ||
| password, | ||
| }: SignupRequest) { | ||
| const fallbackName = email.split("@")[0] || "회원"; | ||
|
|
||
| await postAuth<null>( | ||
| "/api/auth/signup", | ||
| { name, email, password }, | ||
| { name: name ?? fallbackName, email, password }, | ||
| "회원가입", |
There was a problem hiding this comment.
Harden fallback-name logic for blank name values.
name ?? fallbackName won’t fallback for ""/whitespace. This can send an empty display name if any caller still passes blank input.
Suggested fix
export async function signupWithEmail({
name = null,
email,
password,
}: SignupRequest) {
const fallbackName = email.split("@")[0] || "회원";
+ const normalizedName =
+ typeof name === "string" && name.trim().length > 0 ? name.trim() : fallbackName;
await postAuth<null>(
"/api/auth/signup",
- { name: name ?? fallbackName, email, password },
+ { name: normalizedName, email, password },
"회원가입",
);
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| name = null, | |
| email, | |
| password, | |
| }: SignupRequest) { | |
| const fallbackName = email.split("@")[0] || "회원"; | |
| await postAuth<null>( | |
| "/api/auth/signup", | |
| { name, email, password }, | |
| { name: name ?? fallbackName, email, password }, | |
| "회원가입", | |
| name = null, | |
| email, | |
| password, | |
| }: SignupRequest) { | |
| const fallbackName = email.split("@")[0] || "회원"; | |
| const normalizedName = | |
| typeof name === "string" && name.trim().length > 0 ? name.trim() : fallbackName; | |
| await postAuth<null>( | |
| "/api/auth/signup", | |
| { name: normalizedName, email, password }, | |
| "회원가입", |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@jobdri/src/lib/auth.ts` around lines 153 - 162, The signup flow currently
uses name ?? fallbackName which doesn't handle empty or whitespace-only names;
update the logic in the signup function (where fallbackName and the postAuth
call are defined) to trim and validate name (e.g., const safeName = name &&
name.trim().length ? name.trim() : fallbackName) and pass safeName into postAuth
instead of name ?? fallbackName so blank strings or whitespace are replaced by
the fallbackName.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🔗 관련 이슈
📝 개요
custom값을 기준으로 직접 입력 문항 칩 상태가 유지되도록 수정했습니다.⌨️ 작업 상세 내용
logo/horizontal/m,logo/vertical/m공통 로고 컴포넌트 추가InputMain에 label/gap 커스텀 클래스 props 추가custom값을 우선 반영직접 입력으로 표시💡 코드 설명 및 참고사항
📸 스크린샷 (UI 변경 시)
2026-05-27.004123.mp4
2026-05-27.004437.mp4
2026-05-27.004437.mp4
Summary by CodeRabbit
New Features
Improvements