diff --git a/src/main/frontend/src/css/styles.module.css b/src/main/frontend/src/css/styles.module.css
index e147a1909..e24a86de7 100644
--- a/src/main/frontend/src/css/styles.module.css
+++ b/src/main/frontend/src/css/styles.module.css
@@ -65,6 +65,37 @@
min-height: 600px;
}
+.progressSection .titleGroup {
+ display: flex;
+}
+
+.progressSection .titleGroup .reloadIcon {
+ margin-left: 14px;
+ width: 26px;
+ height: 26px;
+ background: url(../images/relaod_blue_icon.png) no-repeat center / 100%;
+ opacity: 0.3;
+ cursor: pointer;
+}
+
+.progressSection .titleGroup .reloadIcon.loading {
+ opacity: 1;
+ animation: loadingAnim 1s linear infinite;
+}
+
+@keyframes loadingAnim {
+ 0% {
+ rotate: 0deg;
+ }
+ 100% {
+ rotate: 360deg;
+ }
+}
+
+.progressSection .titleGroup .reloadIcon:hover {
+ opacity: 1;
+}
+
.progressSection .sectionTitle {
font-size: 18px;
font-weight: 600;
@@ -447,6 +478,12 @@
padding: 1px 5px;
}
+.userProgressName .rating_text {
+ margin: 0 6px;
+ font-size: 14px;
+ cursor: pointer;
+}
+
.userProgressName .pass_text {
font-size: 16px;
font-weight: 600;
diff --git a/src/main/frontend/src/images/relaod_blue_icon.png b/src/main/frontend/src/images/relaod_blue_icon.png
new file mode 100644
index 000000000..2e8755d3a
Binary files /dev/null and b/src/main/frontend/src/images/relaod_blue_icon.png differ
diff --git a/src/main/frontend/src/js/components/Header.jsx b/src/main/frontend/src/js/components/Header.jsx
index d1fc22d9f..1211a11cb 100644
--- a/src/main/frontend/src/js/components/Header.jsx
+++ b/src/main/frontend/src/js/components/Header.jsx
@@ -110,4 +110,4 @@ const FineInfo = ({totalFine, onShowReceipt, className}) => {
)
-}
\ No newline at end of file
+}
diff --git a/src/main/frontend/src/js/components/UserProgress.jsx b/src/main/frontend/src/js/components/UserProgress.jsx
index e3135aead..4cfe8aa14 100644
--- a/src/main/frontend/src/js/components/UserProgress.jsx
+++ b/src/main/frontend/src/js/components/UserProgress.jsx
@@ -7,6 +7,7 @@ import {useApi} from "../api/useApi";
import useModal from "../setup/hook/useModal";
import {ModalType} from "../setup/modal/ModalType";
import {DateUtils} from "../setup/utils/DateUtils";
+import {useTooltipHandlers} from "../setup/utils/TooltipUtils";
export function UserProgress({fromDate, toDate}) {
const modal = useModal()
@@ -25,28 +26,36 @@ export function UserProgress({fromDate, toDate}) {
useEffect(() => {
getAllUsers()
+ initLoad();
}, []);
useEffect(() => {
getWeeklyUsersProgress();
}, [fromDate, toDate]);
+ const tooltip = useTooltipHandlers(
+ 사용자의 레이팅입니다.
+
)
+
const getAllUsers = () => {
- setIsLoadingBaekjoon(true)
+ // setIsLoadingBaekjoon(true)
userApi.getUsers().then(({data}) => {
if (data) {
setUsers(data);
}
- initLoad();
+ getWeeklyUsersProgress()
})
}
const initLoad = () => {
-
+ setIsLoadingBaekjoon(true)
problemApi.loadBaekjoon().then(({data}) => {
- setIsLoadingBaekjoon(false)
if (data) {
getWeeklyUsersProgress()
+ } else {
+ setIsLoadingBaekjoon(false)
}
}).catch(() => {
setIsLoadingBaekjoon(false)
@@ -62,6 +71,7 @@ export function UserProgress({fromDate, toDate}) {
}
setProblems(ob);
}
+ setIsLoadingBaekjoon(false)
})
}
const getProgressPercentage = (current, target) => {
@@ -197,9 +207,17 @@ export function UserProgress({fromDate, toDate}) {
)
}
+ const reload = () => {
+ initLoad()
+ }
+
return (
- 개별 진행 현황
+
+
개별 진행 현황
+
+
{isLoadingBaekjoon ? (
users && users.map((user, i) => renderSkeletonCard(i))
@@ -213,21 +231,21 @@ export function UserProgress({fromDate, toDate}) {
return (
= 60 && styles.completed}`)}>
+ className={cm(styles.tierIcon, `${DesignUtils.getTierIconClass(user.level)}`)}>
{/*
*/}
- {user.nickname} {isWeekPass ?
- 이번주 패스 : ''}
- {/*{user.weekPassCount > 0 && (*/}
- {/* */}
- {/* 🛡️{user.weekPassCount}*/}
- {/* */}
- {/*)}*/}
+ {user.nickname}
+ {user.rating}
+ {isWeekPass ?
+ PASS : ''}