[FEAT] 로비 로그인 구현 및 회원가입 버튼 수정#98
Hidden character warning
Conversation
Walkthrough로그인 폼에 DOM 요소 ID를 추가하고, 신규 index.jsp 엔트리 포인트를 생성하여 /lobby로 리다이렉트하며, JavaScript 기반 로그인 흐름(폼 검증 및 /noamlLogin 엔드포인트 POST)을 구현합니다. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 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
🧹 Nitpick comments (2)
src/main/webapp/static/lobby/lobby.js (1)
131-154: 로딩 상태 및 에러 처리를 개선할 수 있습니다.현재 구현은 다음과 같은 개선이 가능합니다:
- 로그인 중 버튼을 비활성화하여 중복 요청 방지
- HTTP 상태 코드별 구체적인 에러 메시지 제공
- 네트워크 에러와 서버 에러 구분
🔎 개선된 에러 처리 및 로딩 상태
btnLogin.addEventListener("click", async () => { const email = emailInput.value.trim(); const password = passwordInput.value.trim(); if (!email || !password) { alert("이메일과 비밀번호를 입력해주세요."); return; } + + // 로딩 상태 시작 + btnLogin.disabled = true; + const originalText = btnLogin.textContent; + btnLogin.textContent = "로그인 중..."; try { const response = await fetch(CTX + "/noamlLogin", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email, password }) }); const data = await response.json(); if (response.ok && data.accessToken) { alert("로그인 성공!"); location.reload(); } else { - alert(data.message || "로그인 실패"); + // 상태 코드별 메시지 분기 + if (response.status === 401) { + alert(data.message || "이메일 또는 비밀번호가 올바르지 않습니다."); + } else if (response.status >= 500) { + alert("서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요."); + } else { + alert(data.message || "로그인 실패"); + } } } catch (error) { console.error("로그인 오류:", error); - alert("로그인 중 오류가 발생했습니다."); + alert("네트워크 오류가 발생했습니다. 인터넷 연결을 확인해주세요."); + } finally { + // 로딩 상태 종료 + btnLogin.disabled = false; + btnLogin.textContent = originalText; } });src/main/webapp/index.jsp (1)
2-5: web.xml의 welcome-file 설정 사용을 고려해보세요.JSP 스크립트릿으로 리다이렉트하는 대신,
web.xml에서 welcome-file 설정을 사용하는 것이 더 표준적인 접근 방식입니다.🔎 web.xml 설정 예시
src/main/webapp/WEB-INF/web.xml에 다음 설정 추가:<welcome-file-list> <welcome-file>lobby</welcome-file> </welcome-file-list>그리고 컨트롤러에서 루트 경로를 처리:
@GetMapping("/") public String redirectToLobby() { return "redirect:/lobby"; }이 방식이 JSP 스크립트릿보다 유지보수가 용이합니다.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/main/webapp/WEB-INF/views/lobby.jspsrc/main/webapp/index.jspsrc/main/webapp/static/lobby/lobby.js
🔇 Additional comments (6)
src/main/webapp/static/lobby/lobby.js (3)
157-163: Enter 키 로그인 기능이 잘 구현되었습니다.비밀번호 입력 필드에서 Enter 키로 로그인할 수 있어 사용자 경험이 향상됩니다.
137-137: 엔드포인트 URL의 오타는 아닙니다.
/noamlLogin은 백엔드 컨트롤러(JwtLoginController)에@WebServlet("/noamlLogin")으로 실제 정의되어 있으므로, 프론트엔드의 호출이 올바릅니다. 다만 보안 필터(JwtLoginFilter)에서는/normalLogin을 제외 대상으로 설정하고 있어 설정 불일치 문제가 있습니다. 필터가 정확하게 로그인 엔드포인트를 인증 검증에서 제외하려면, 필터 설정을/noamlLogin으로 수정해야 합니다.Likely an incorrect or invalid review comment.
145-147: accessToken을 저장할 필요가 없습니다 - 세션 기반 인증을 사용 중입니다.이 애플리케이션은 HTTP 세션 기반 인증을 사용하므로, 토큰을 클라이언트에 저장할 필요가 없습니다. 로그인 후
location.reload()를 호출해도 JSESSIONID 쿠키로 인해 세션이 유지되며, 백엔드는session.getAttribute("accessToken")로 토큰을 검증합니다.현재 설계의 문제점: 응답 본문에 accessToken을 포함시키는 것은 세션 기반 인증에서는 불필요하며, JWT 클라이언트 저장 방식과 세션 방식이 혼재되어 있어 혼동을 유발합니다. 세션 기반이라면 응답 본문에서 토큰을 제거하는 것이 명확합니다.
Likely an incorrect or invalid review comment.
src/main/webapp/WEB-INF/views/lobby.jsp (2)
92-92: 로그인 폼 요소에 ID가 잘 추가되었습니다.JavaScript에서 참조할 수 있도록
login-email,login-password,btn-loginID가 적절히 추가되어lobby.js의 로그인 로직과 올바르게 연결됩니다.Also applies to: 97-97, 100-100
111-111: /signup2 엔드포인트는 백엔드에 올바르게 구현되어 있습니다.SignupPageServlet이/signup2로 매핑되어 있으며, 가입 폼 화면을 표시하고 실제 가입 처리는JwtSignupController가/nomalSignup으로 처리합니다.Likely an incorrect or invalid review comment.
src/main/webapp/index.jsp (1)
1-5:/lobby엔드포인트가 정상적으로 구현되어 있습니다.
ViewRoomListController가@WebServlet("/lobby")로 매핑되어 로비 페이지를 제공하고 있으며, JWT 필터에서 인증 없이 접근 가능하도록 설정되어 있습니다.
| <label>비밀번호</label> | ||
| <input type="password" placeholder="비밀번호" /> | ||
| <input id="login-password" type="password" placeholder="비밀번호" /> | ||
| </div> |
There was a problem hiding this comment.
HTML 속성에 구문 오류가 있습니다.
action 속성 값에 중복된 따옴표가 있습니다: action="${CTX}/room/enter"" → 따옴표가 두 개 연속으로 나타납니다.
🔎 구문 오류 수정
- <form class="enter-room-form" action="${CTX}/room/enter"" method="post">
+ <form class="enter-room-form" action="${CTX}/room/enter" method="post">Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/main/webapp/WEB-INF/views/lobby.jsp around line 98, the HTML has a syntax
error: the action attribute contains a duplicated double-quote
(`action="${CTX}/room/enter""`). Remove the extra quote so the attribute is
properly quoted (e.g., action="${CTX}/room/enter"), and scan the surrounding tag
to ensure there are no other stray or mismatched quotes in the same element.
3 participants
📌 작업 내용
🔗 관련 이슈
👀 리뷰 시 참고사항
💭 느낀 점
💻 스크린샷 (선택)
Summary by CodeRabbit
릴리스 노트
✏️ Tip: You can customize this high-level summary in your review settings.