diff --git a/src/main/resources/static/css/test-mypage.css b/src/main/resources/static/css/test-mypage.css
index 8164befc..3f8628a3 100644
--- a/src/main/resources/static/css/test-mypage.css
+++ b/src/main/resources/static/css/test-mypage.css
@@ -67,13 +67,12 @@ body {
align-items: flex-start; /* 위쪽 정렬 (선택) */
gap: 0px; /* 두 영역 사이 간격 */
border-radius: 20px;
- border: 2px solid #6c6c6c;
padding: 0px;
+ background-color: #0B1C17;
}
/* profile-section에 테두리와 배경, 패딩 등 원하는 스타일 추가 */
.profile-section {
- background: #000;
padding: 40px 60px;
min-width: 350px; /* 적당한 최소 너비 (조절 가능) */
display: flex;
@@ -129,10 +128,14 @@ body {
}
/* info-row-2는 좌측정렬, 필요시 각 요소에 margin-right 부여 */
-.info-row-2 {
- justify-content: flex-start;
+.info-row-2 { display: flex;
+ flex-direction: column;
+ align-items: flex-start;
gap: 36px;
}
+.info-row-2-inner {
+ display: flex;align-items: center;
+}
/* info-label, info-value 등 기존 스타일 유지 */
.info-label {
@@ -148,15 +151,8 @@ body {
font-weight: 700;
min-width: 80px;
}
-.info-label.email-verify {
- margin-left: 20px;
- color: #0a1d15;
- background: #00a141;
- border-radius: 3px;
- padding: 2px 10px;
- font-size: 10px;
- font-weight: 700;
-}
+
+
.github-btns {
display: flex;
gap: 10px;
@@ -164,8 +160,7 @@ body {
margin-left: 40px;
}
.github-btn, .blog-btn {
- background: #222;
- color: #fff;
+ background: transparent;
border: none;
border-radius: 10px;
padding: 8px 20px;
@@ -173,33 +168,57 @@ body {
font-weight: 800;
cursor: pointer;
transition: background 0.2s;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ display: flex;
+ color: white;
}
-.github-btn:hover, .blog-btn:hover {
- background: #00a141;
- color: #0a1d15;
+
+.github-btn-img{
+ width: 40px;
+ height: 40px;
}
.github-heatmap-section {
- background: #fff;
border-radius: 10px;
min-height: 200px;
padding: 20px;
margin-top: 30px;
}
.heatmap-placeholder {
- color: #6c6c6c;
text-align: center;
font-size: 18px;
padding: 60px 0;
}
-.email-verify .checkmark {
- display: inline-block;
- width: 18px;
- height: 18px;
- vertical-align: middle;
+/* 이메일 인증 전 텍스트 버튼처럼 보이게 */
+.email-verify .email-verify {
+ height: 25px;
+ border-radius: 6px;
+ padding: 2px;
+ box-sizing: border-box;
+ margin-left: 10px;
+ /* 마우스 올릴 때 */
+ cursor: pointer;
+ transition: box-shadow 0.3s ease;
}
-.email-verify .checkmark svg {
- width: 100%;
- height: 100%;
- display: block;
+
+.email-verify .email-verify:hover {
+ box-shadow: 0 0 8px rgba(0, 123, 255, 0.7); /* 파란빛 그림자 예시 */
+}
+
+.email-verify .check-image {
+ width: 24px;
+ height: 24px;
+ border-radius: 6px;
+ padding: 2px;
+ box-sizing: border-box;
+ margin-left: 10px;
+ /* 아무 액션 안함 */
+ cursor: default;
+ pointer-events: none; /* 클릭, 호버 무시 */
+}
+
+.social-row {
+ display: flex;
}
\ No newline at end of file
diff --git a/src/main/resources/static/images/check.png b/src/main/resources/static/images/check.png
new file mode 100644
index 00000000..0a34f79d
Binary files /dev/null and b/src/main/resources/static/images/check.png differ
diff --git a/src/main/resources/static/images/email-verify.png b/src/main/resources/static/images/email-verify.png
new file mode 100644
index 00000000..4d7f5e19
Binary files /dev/null and b/src/main/resources/static/images/email-verify.png differ
diff --git a/src/main/resources/static/js/test-mypage.js b/src/main/resources/static/js/test-mypage.js
index 0a889cec..2e499905 100644
--- a/src/main/resources/static/js/test-mypage.js
+++ b/src/main/resources/static/js/test-mypage.js
@@ -15,6 +15,30 @@ function fetchUserData() {
const accessToken = sessionStorage.getItem('accessToken');
if (!accessToken) return;
+ // 1. 리뷰 토큰 조회
+ fetch('/api/users/review-token', {
+ method: 'GET',
+ headers: {
+ 'Accept': 'application/json',
+ 'Authorization': accessToken
+ },
+ credentials: 'include'
+ })
+ .then(response => {
+ if (!response.ok) throw new Error('유저 정보를 불러오지 못했습니다.');
+ return response.json();
+ })
+ .then((res) => {
+ // 응답 구조에 따라 아래 코드 수정
+ const user = res.result || res;
+ const aiReviewElem = document.getElementById('aiReview');
+ if (aiReviewElem) aiReviewElem.textContent = user.reviewToken || '-';
+ })
+ .catch(err => {
+ console.error(err);
+ });
+
+
// 1. 내 정보 조회 API 호출 (토큰을 Authorization 헤더에 넣기)
fetch('/api/users', {
method: 'GET',
@@ -37,8 +61,7 @@ function fetchUserData() {
document.getElementById('email').textContent = user.email || '';
document.getElementById('tier').textContent = user.tier || '';
document.getElementById('ranking').textContent = user.ranking || '-';
- document.getElementById('solvedCount').textContent = user.solvedCount || '-';
- document.getElementById('aiReview').textContent = user.aiReview || '-';
+ document.getElementById('solvedCount').textContent = user.totalSolvedCount || '-';
setEmailVerify(!!user.verified);
// 블로그, 깃허브 버튼 링크 처리
@@ -61,14 +84,61 @@ function fetchUserData() {
console.error(err);
// 필요시 에러 안내
});
+
}
-// 이메일 인증 상태 표시 함수
function setEmailVerify(isVerified) {
const emailVerify = document.getElementById('emailVerify');
if (isVerified) {
- emailVerify.innerHTML = ``;
+ emailVerify.innerHTML = `
+
+ `;
} else {
- emailVerify.textContent = '-';
+ emailVerify.innerHTML = `
+
+ `;
+
+ // 이미지 삽입 후 클릭 이벤트 바인딩
+ const emailVerifyButton = document.getElementById('emailVerifyButton');
+ emailVerifyButton.addEventListener('click', sendEmailVerification);
+ }
+}
+
+//이메일 전송
+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('서버 오류가 발생했습니다.');
}
}
+
diff --git a/src/main/resources/templates/test-mypage.html b/src/main/resources/templates/test-mypage.html
index 5dabc3cc..4a3e4b12 100644
--- a/src/main/resources/templates/test-mypage.html
+++ b/src/main/resources/templates/test-mypage.html
@@ -22,40 +22,51 @@
-
-
-
-

-
- ezcode
-
-
-
-
랭킹
-
7th
-
푼 문제 수
-
134,452,565 문제
-
남은 AI 리뷰 횟수
-
5번
-
-
-
티어
-
-
-
아이디
-
-
-
이메일
-
-
-
-
이메일 인증
+
+
+
+
-
-
-
-
-
+
닉네임
+
+
+
+
랭킹
+
7th
+
푼 문제 수
+
문제
+
남은 AI 리뷰 횟수
+
-
-
-
+
+
+
+
+
+
+
+