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 : ''}