mypage & 이메일 인증 반영 #148
Merged
mypage & 이메일 인증 반영 #148
Conversation
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
Walkthrough이 변경사항은 마이페이지의 CSS, JS, HTML 구조를 전반적으로 개선합니다. CSS는 레이아웃과 버튼, 이메일 인증 UI를 재구성하고, JS는 리뷰 토큰 조회, 이메일 인증 요청 기능을 추가 및 개선합니다. HTML은 프로필, 정보, 소셜 버튼 배치를 재구성합니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Browser
participant Backend
User->>Browser: 페이지 접속
Browser->>Backend: GET /api/users/review-token (with token)
Backend-->>Browser: reviewToken 반환
Browser->>DOM: aiReview 영역에 reviewToken 표시
Browser->>Backend: GET /api/users/me (with token)
Backend-->>Browser: 사용자 정보 반환
Browser->>DOM: 정보 표시
User->>Browser: 이메일 인증 버튼 클릭
Browser->>Backend: POST /api/email/send (with token, redirectUrl)
Backend-->>Browser: 성공/실패 응답
Browser->>User: 알림창(alert) 표시
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
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: 1
🧹 Nitpick comments (6)
src/main/resources/templates/test-mypage.html (2)
32-40: 정보 행 구조화가 잘 되었으나 플레이스홀더 값 개선이 필요합니다.정보를 두 개의 행으로 나누어 구조화한 것은 좋으나, 하드코딩된 플레이스홀더 값들("7th", "문제", "-")을 더 명확하게 개선할 수 있습니다.
다음과 같이 더 명확한 플레이스홀더를 사용하는 것을 제안합니다:
- <div class="info-value" id="ranking">7th</div> + <div class="info-value" id="ranking">-</div> - <div class="info-value" id="solvedCount">문제</div> + <div class="info-value" id="solvedCount">0</div>
41-57: info-row-2 구조는 좋으나 접근성 개선이 필요합니다.inner 컨테이너를 활용한 구조화는 좋지만, 이메일 인증 부분에서 접근성을 개선할 수 있습니다.
이메일 인증 버튼에 접근성을 위한 속성을 추가하는 것을 제안합니다:
<div class="info-label email-verify"> - <span id="emailVerify" class="verify-text">이메일 인증</span> + <span id="emailVerify" class="verify-text" role="button" tabindex="0" aria-label="이메일 인증하기">이메일 인증</span> </div>src/main/resources/static/css/test-mypage.css (3)
131-138: info-row-2 레이아웃 개선이 좋습니다.컬럼 레이아웃으로 변경하고 inner 컨테이너를 추가한 것이 HTML 구조와 잘 맞습니다. 다만 줄 바꿈 없이 한 줄로 작성된 부분이 있습니다.
가독성을 위해 스타일을 분리하는 것을 제안합니다:
-.info-row-2-inner { - display: flex;align-items: center; -} +.info-row-2-inner { + display: flex; + align-items: center; +}
163-176: 버튼 스타일 개선이 좋으나 순서 정리가 필요합니다.GitHub과 블로그 버튼의 스타일을 flex 컨테이너로 변경한 것은 좋은 개선이지만, 스타일 속성 순서를 정리하면 더 좋겠습니다.
CSS 속성 순서를 논리적으로 정리하는 것을 제안합니다:
.github-btn, .blog-btn { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; background: transparent; border: none; border-radius: 10px; padding: 8px 20px; font-size: 12px; font-weight: 800; + color: white; cursor: pointer; transition: background 0.2s; - flex-direction: column; - align-items: center; - justify-content: center; - display: flex; - color: white; }
194-224: 이메일 인증 UI 스타일이 잘 구현되었으나 접근성 개선이 필요합니다.호버 효과와 인증 상태별 스타일 분리가 잘 되어 있습니다. 다만 키보드 접근성을 위한 포커스 스타일이 누락되었습니다.
키보드 접근성을 위한 포커스 스타일을 추가하는 것을 제안합니다:
.email-verify .email-verify:hover { box-shadow: 0 0 8px rgba(0, 123, 255, 0.7); } + +.email-verify .email-verify:focus { + outline: 2px solid #007bff; + outline-offset: 2px; +}src/main/resources/static/js/test-mypage.js (1)
90-108: 이메일 인증 UI 처리 로직 개선이 좋습니다.이미지 엘리먼트를 활용한 UI 개선과 동적 이벤트 바인딩이 잘 구현되어 있습니다. 다만 접근성 개선이 필요합니다.
키보드 접근성을 위한 속성을 추가하는 것을 제안합니다:
emailVerify.innerHTML = ` <img src="/images/email-verify.png" alt="이메일 인증하기" class="email-verify clickable" - id="emailVerifyButton" /> + id="emailVerifyButton" + tabindex="0" + role="button" /> `;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
src/main/resources/static/images/check.pngis excluded by!**/*.pngsrc/main/resources/static/images/email-verify.pngis excluded by!**/*.png
📒 Files selected for processing (3)
src/main/resources/static/css/test-mypage.css(3 hunks)src/main/resources/static/js/test-mypage.js(3 hunks)src/main/resources/templates/test-mypage.html(1 hunks)
🧰 Additional context used
🧠 Learnings (3)
📓 Common learnings
Learnt from: chat26666
PR: ezcode-my/backend#37
File: src/main/java/org/ezcode/codetest/infrastructure/elasticsearch/repository/ProblemElasticsearchRepositoryDsl.java:10-10
Timestamp: 2025-06-06T19:56:27.759Z
Learning: When user chat26666 mentions that code was implemented in a previous PR but explanation was missing, they may submit a follow-up PR just to add documentation/explanation without the actual implementation code.
Learnt from: thezz9
PR: ezcode-my/backend#73
File: src/main/resources/templates/submit-test.html:135-135
Timestamp: 2025-06-18T11:41:58.457Z
Learning: src/main/resources/templates/submit-test.html 파일은 테스트용 파일로, isCorrect 값의 하드코딩은 의도적이며 사용자가 UI 요소를 통해 정답/오답 상태를 선택할 수 있도록 개선 예정입니다.
src/main/resources/static/js/test-mypage.js (1)
Learnt from: thezz9
PR: ezcode-my/backend#75
File: src/main/java/org/ezcode/codetest/application/submission/service/SubmissionService.java:142-147
Timestamp: 2025-06-19T07:00:53.895Z
Learning: SubmissionService.getCodeReview() 메서드에서 토큰 차감을 리뷰 요청 전에 수행하는 이유: OpenAI 서버 장애보다 유저 토큰 부족 상황이 더 빈번하므로, 확률이 높은 실패 케이스를 먼저 체크하여 불필요한 처리를 방지함. OpenAI 서버 장애 시에는 OpenAIClient에서 트랜잭션 롤백으로 토큰 복원이 처리됨.
src/main/resources/templates/test-mypage.html (1)
Learnt from: thezz9
PR: ezcode-my/backend#73
File: src/main/resources/templates/submit-test.html:135-135
Timestamp: 2025-06-18T11:41:58.457Z
Learning: src/main/resources/templates/submit-test.html 파일은 테스트용 파일로, isCorrect 값의 하드코딩은 의도적이며 사용자가 UI 요소를 통해 정답/오답 상태를 선택할 수 있도록 개선 예정입니다.
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
🔇 Additional comments (6)
src/main/resources/templates/test-mypage.html (2)
25-31: 프로필 섹션 구조 개선이 잘 되었습니다.프로필 이미지와 닉네임을 별도 섹션으로 분리한 것은 레이아웃 관리 측면에서 좋은 개선입니다. 하드코딩된 "ezcode"를 "닉네임"으로 변경한 것도 적절합니다.
60-69: 소셜 버튼 컨테이너 추가가 좋습니다.GitHub 아이콘과 블로그 버튼을 별도 컨테이너로 분리한 것은 레이아웃 관리에 도움이 됩니다. GitHub 아이콘 이미지 추가도 UX 개선에 기여합니다.
src/main/resources/static/css/test-mypage.css (2)
71-71: 배경색 변경이 적절합니다.user-infos 섹션의 배경색을 #0B1C17로 변경한 것이 전체 디자인과 잘 어울립니다.
178-181: GitHub 아이콘 스타일이 적절합니다.GitHub 버튼용 아이콘 이미지 크기 설정이 적절합니다.
src/main/resources/static/js/test-mypage.js (2)
18-40: 리뷰 토큰 조회 기능 추가가 좋습니다.별도의 API 호출로 리뷰 토큰을 가져오는 구조가 좋습니다. 에러 처리도 적절하게 되어 있습니다.
64-64: totalSolvedCount 사용으로 변경이 적절합니다.기존 solvedCount에서 totalSolvedCount로 변경한 것이 더 명확한 네이밍입니다.
Comment on lines
+111
to
143
| async function sendEmailVerification() { | ||
| const accessToken = sessionStorage.getItem('accessToken'); | ||
|
|
||
| if (!accessToken) { | ||
| alert('로그인이 필요합니다.'); | ||
| return; | ||
| } | ||
|
|
||
| try { | ||
| const response = await fetch('/api/email/send', { | ||
| method: 'POST', | ||
| headers: { | ||
| 'Content-Type': 'application/json', | ||
| 'Authorization': accessToken | ||
| }, | ||
| body: JSON.stringify({ | ||
| redirectUrl: 'http://localhost:8080' | ||
| }) | ||
| }); | ||
|
|
||
| if (response.ok) { | ||
| const result = await response.json(); | ||
| alert('인증 메일이 발송되었습니다.'); | ||
| console.log(result); | ||
| } else { | ||
| const error = await response.json(); | ||
| alert(`오류: ${error.message || '인증 요청 실패'}`); | ||
| } | ||
| } catch (err) { | ||
| console.error('이메일 인증 오류:', err); | ||
| alert('서버 오류가 발생했습니다.'); | ||
| } | ||
| } |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
이메일 인증 전송 기능이 잘 구현되었으나 보안 및 설정 개선이 필요합니다.
API 호출 로직과 에러 처리가 적절하게 구현되어 있습니다. 다만 하드코딩된 URL과 보안 관련 개선이 필요합니다.
다음 개선사항들을 제안합니다:
+// 환경별 설정을 위한 상수
+const CONFIG = {
+ redirectUrl: window.location.origin
+};
+
async function sendEmailVerification() {
const accessToken = sessionStorage.getItem('accessToken');
if (!accessToken) {
alert('로그인이 필요합니다.');
return;
}
try {
const response = await fetch('/api/email/send', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': accessToken
},
body: JSON.stringify({
- redirectUrl: 'http://localhost:8080'
+ redirectUrl: CONFIG.redirectUrl
})
});또한 CSRF 보안을 위한 토큰 검증을 고려해보세요.
CSRF 보안 설정이 적절히 되어 있는지 확인하기 위해 다음 스크립트를 실행해보세요:
🏁 Script executed:
#!/bin/bash
# CSRF 보안 설정 확인
rg -A 10 -B 5 "csrf" --type javaLength of output: 1925
CSRF 전역 비활성화 확인 및 redirectUrl 하드코딩 제거 필요
이메일 인증 전송 기능은 정상 동작하나, 현 코드에서는 하드코딩된 redirectUrl과 전역 CSRF 비활성화로 인한 보안 취약점이 발견되었습니다.
-
적용 위치
src/main/resources/static/js/test-mypage.js(약 111–143행)src/main/java/org/ezcode/codetest/common/security/config/SecurityConfig.java
-
개선 사항
- redirectUrl 환경 설정화
하드코딩된 URL 대신 런타임 호스트를 참조하도록 변경합니다.+// 환경별 설정을 위한 상수 +const CONFIG = { + redirectUrl: window.location.origin +}; async function sendEmailVerification() { … const response = await fetch('/api/email/send', { … body: JSON.stringify({ - redirectUrl: 'http://localhost:8080' + redirectUrl: CONFIG.redirectUrl }) }); … }
- CSRF 설정 재검토
현재SecurityConfig.java에서.csrf(AbstractHttpConfigurer::disable())로 전역 비활성화되어 있습니다.- 특정 엔드포인트에만 CSRF를 비활성화하거나
- CSRF 토큰 검증을 유지한 채 JWT 인증을 도입하거나
- SameSite 쿠키 설정 등 추가 방어책을 적용하십시오.
- redirectUrl 환경 설정화
위 두 가지를 반영해 보안 및 설정 유연성을 강화해주세요.
📝 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
| async function sendEmailVerification() { | |
| const accessToken = sessionStorage.getItem('accessToken'); | |
| if (!accessToken) { | |
| alert('로그인이 필요합니다.'); | |
| return; | |
| } | |
| try { | |
| const response = await fetch('/api/email/send', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| 'Authorization': accessToken | |
| }, | |
| body: JSON.stringify({ | |
| redirectUrl: 'http://localhost:8080' | |
| }) | |
| }); | |
| if (response.ok) { | |
| const result = await response.json(); | |
| alert('인증 메일이 발송되었습니다.'); | |
| console.log(result); | |
| } else { | |
| const error = await response.json(); | |
| alert(`오류: ${error.message || '인증 요청 실패'}`); | |
| } | |
| } catch (err) { | |
| console.error('이메일 인증 오류:', err); | |
| alert('서버 오류가 발생했습니다.'); | |
| } | |
| } | |
| // 환경별 설정을 위한 상수 | |
| const CONFIG = { | |
| redirectUrl: window.location.origin | |
| }; | |
| async function sendEmailVerification() { | |
| const accessToken = sessionStorage.getItem('accessToken'); | |
| if (!accessToken) { | |
| alert('로그인이 필요합니다.'); | |
| return; | |
| } | |
| try { | |
| const response = await fetch('/api/email/send', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| 'Authorization': accessToken | |
| }, | |
| body: JSON.stringify({ | |
| redirectUrl: CONFIG.redirectUrl | |
| }) | |
| }); | |
| if (response.ok) { | |
| const result = await response.json(); | |
| alert('인증 메일이 발송되었습니다.'); | |
| console.log(result); | |
| } else { | |
| const error = await response.json(); | |
| alert(`오류: ${error.message || '인증 요청 실패'}`); | |
| } | |
| } catch (err) { | |
| console.error('이메일 인증 오류:', err); | |
| alert('서버 오류가 발생했습니다.'); | |
| } | |
| } |
🤖 Prompt for AI Agents
In src/main/resources/static/js/test-mypage.js around lines 111 to 143, replace
the hardcoded redirectUrl with a dynamic value derived from the current runtime
host, such as using window.location.origin, to avoid fixed URLs. Additionally,
in src/main/java/org/ezcode/codetest/common/security/config/SecurityConfig.java,
revise the global CSRF disablement by either enabling CSRF protection globally
and selectively disabling it only for specific endpoints like the email API, or
implement JWT authentication with CSRF tokens maintained, or apply other
mitigations like SameSite cookie attributes to enhance security while preserving
necessary CSRF defenses.
thezz9
approved these changes
Jul 6, 2025
chat26666
approved these changes
Jul 6, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
코드 리뷰 전 확인 체크리스트
type :)Summary by CodeRabbit
신규 기능
버그 수정
스타일
문서