feat : 프론트 회원가입 기능 구현 완료 #163
Conversation
Walkthrough로그인 페이지에 이메일 기반 회원가입 모달 다이얼로그가 추가되었습니다. 모달에는 이메일, 비밀번호, 비밀번호 확인, 닉네임, 선택적 나이 입력 필드와 실시간 유효성 검사 및 비밀번호 강도 표시 기능이 포함되어 있습니다. 회원가입 API 연동 및 모달 제어를 위한 자바스크립트 함수와 스타일이 대폭 추가되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant LoginPage
participant SignupModal
participant AuthAPI
User->>LoginPage: "이메일 회원가입" 버튼 클릭
LoginPage->>SignupModal: openSignupModal()
User->>SignupModal: 폼 입력 및 제출
SignupModal->>SignupModal: 클라이언트 유효성 검사
SignupModal->>AuthAPI: POST /api/auth/signup (JSON)
AuthAPI-->>SignupModal: 회원가입 성공/실패 응답
SignupModal-->>User: 성공 시 알림, 모달 닫기, 로그인 이메일 자동 입력
Poem
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![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
🔭 Outside diff range comments (1)
src/main/resources/templates/test-login.html (1)
335-343:response.json()을 두 번 호출하여 런타임 오류 발생 가능
fetch("/api/auth/signin")응답 본문은 한 번만 소비할 수 있습니다.
현재 실패 분기와 성공 분기에서 각각await response.json()을 호출해 두 번째 호출 시SyntaxError: Unexpected end of JSON input등이 발생할 수 있습니다.- if (!response.ok) { - const errorData = await response.json(); - alert("로그인 실패: " + (errorData.message || response.status)); - return; - } - - const responseJson = await response.json(); + const responseJson = await response.json(); + if (!response.ok) { + alert("로그인 실패: " + (responseJson.message || response.status)); + return; + }
🧹 Nitpick comments (3)
src/main/resources/templates/test-login.html (3)
207-209: 이메일 입력 필드의type="text"→type="email"권장HTML5 기본 검증과 모바일 키보드 최적화를 위해 로그인 폼의 이메일 입력 타입을
-<input type="text" placeholder="이메일을 입력해주세요"> +<input type="email" placeholder="이메일을 입력해주세요">
357-370: 모달 열림/닫힘 시 스크롤 상태 복구가 완전하지 않을 수 있음
body.style.overflow = 'hidden'후auto로 복구하면, 원래overflow값이unset,scroll등 다른 상태였을 때 의도치 않은 사이드이펙트가 생길 수 있습니다.
모달 열기 전 기존 값을 보존했다가 복구하는 방식을 고려해보세요.let prevOverflow; function openSignupModal() { - document.getElementById('signupModal').style.display = 'flex'; - document.body.style.overflow = 'hidden'; + prevOverflow = document.body.style.overflow; + document.getElementById('signupModal').style.display = 'flex'; + document.body.style.overflow = 'hidden'; } ... function closeSignupModal() { document.getElementById('signupModal').style.display = 'none'; - document.body.style.overflow = 'auto'; + document.body.style.overflow = prevOverflow || '';
581-585: 비밀번호 실시간 검증 시validatePassword와의 불일치 가능성
updatePasswordStrength()는 길이·영문·숫자·특수문자 총 4조건을 독립적으로 평가하지만, 최종 제출 검증은 정규식 하나로 일괄 검사합니다.
조건 정의가 변경될 때 두 함수가 불일치할 위험이 있으니, 한 곳(예: 상수화된 헬퍼)에서 조건을 정의해 공유하도록 리팩터링을 고려하세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/main/resources/templates/test-login.html(4 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build
| <div class="form-group"> | ||
| <label>이메일 <span class="required">*</span></label> | ||
| <input type="email" id="signupEmail" placeholder="이메일을 입력해주세요" required> | ||
| <div class="error-message" id="emailError"></div> | ||
| </div> |
There was a problem hiding this comment.
오류 메시지 DOM 매핑이 잘못되어 메시지가 표시되지 않음
showError()는 fieldId + 'Error' 형식의 요소를 찾지만, 마크업에서는 emailError, passwordError 등 필드명 없이 정의되어 있습니다.
그 결과 유효성 오류 텍스트가 표시되지 않고, UX 가 심각하게 저하됩니다.
가능한 두 가지 해결책
- 마크업 수정 – 오류 영역 id 를
signupEmailError,signupPasswordError… 로 변경 - showError 수정 –
errorId를 직접 받아 사용
가벼운 수정으로 끝내려면 마크업을 통일하는 편이 빠릅니다:
- <div class="error-message" id="emailError"></div>
+ <div class="error-message" id="signupEmailError"></div>
...
- <div class="error-message" id="passwordError"></div>
+ <div class="error-message" id="signupPasswordError"></div>
...
- <div class="error-message" id="passwordConfirmError"></div>
+ <div class="error-message" id="signupPasswordConfirmError"></div>
...
- <div class="error-message" id="usernameError"></div>
+ <div class="error-message" id="signupUsernameError"></div>그리고 signupAge 필드에도 동일한 오류 div 를 추가하세요(아래 별도 코멘트 참조).
Also applies to: 397-403
🤖 Prompt for AI Agents
In src/main/resources/templates/test-login.html around lines 246 to 250 and also
lines 397 to 403, the error message div IDs do not match the expected pattern
used by showError(), causing validation messages not to display. To fix this,
rename the error message div IDs to include the input field IDs as prefixes, for
example change "emailError" to "signupEmailError" and similarly for other fields
like password and age. This will align the markup with the showError()
function's logic and ensure error messages appear correctly.
| <div class="form-group"> | ||
| <label>나이 (선택)</label> | ||
| <input type="number" id="signupAge" placeholder="나이를 입력해주세요" min="1" max="150"> | ||
| </div> | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
나이(age) 입력 필드에 오류 표시 영역이 없음
validateForm()에서 showError('signupAge', …)가 호출되지만 해당 id를 가진 <div>가 존재하지 않아 오류 메시지가 표시되지 않습니다.
<input type="number" id="signupAge" placeholder="나이를 입력해주세요" min="1" max="150">
+<div class="error-message" id="signupAgeError"></div>📝 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.
| <div class="form-group"> | |
| <label>나이 (선택)</label> | |
| <input type="number" id="signupAge" placeholder="나이를 입력해주세요" min="1" max="150"> | |
| </div> | |
| <div class="form-group"> | |
| <label>나이 (선택)</label> | |
| <input type="number" id="signupAge" placeholder="나이를 입력해주세요" min="1" max="150"> | |
| <div class="error-message" id="signupAgeError"></div> | |
| </div> |
🤖 Prompt for AI Agents
In src/main/resources/templates/test-login.html around lines 292 to 296, the age
input field lacks an error display container, so calls to showError('signupAge',
...) do not show messages. Add a dedicated <div> or similar element with an id
or class linked to 'signupAge' immediately after the input field to serve as the
error message area, ensuring validateForm() can display validation errors
properly.
Summary by CodeRabbit
신규 기능
버그 수정
스타일