feat: 메인 페이지 조회 지연시간 단축

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;

src/main/frontend/src/js/components/Header.jsx

@@ -110,4 +110,4 @@ const FineInfo = ({totalFine, onShowReceipt, className}) => {
             </button>
         </div>
     )
-}
+}

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(<div>
+        <span style={{
+            fontWeight: '600'
+        }}>사용자의 레이팅입니다.</span>
+    </div>)
+
     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 (
         <section className={styles.progressSection}>
-            <h2 className={styles.sectionTitle}>개별 진행 현황</h2>
+            <div className={styles.titleGroup}>
+                <h2 className={styles.sectionTitle}>개별 진행 현황</h2>
+                <span className={cm(styles.reloadIcon, `${isLoadingBaekjoon && styles.loading}`)}
+                      onClick={reload}></span>
+            </div>
             <div className={styles.userProgressContainer}>
                 {isLoadingBaekjoon ? (
                     users && users.map((user, i) => renderSkeletonCard(i))
@@ -213,21 +231,21 @@ export function UserProgress({fromDate, toDate}) {
                         return (
                             <div key={i} className={cm(styles.userProgressCard, `${score >= 60 && styles.completed}`)}>
                                 <div className={styles.userProgressAccent}
-                                     style={{backgroundColor: DesignUtils.getTierColor(user.tier)}}
+                                     style={{backgroundColor: DesignUtils.getTierColor(user.level)}}
                                 />
                                 <div className={styles.userProgressHeader}>
                                     <div className={styles.userProgressInfo}>
                                         <span
-                                            className={cm(styles.tierIcon, `${DesignUtils.getTierIconClass(user.tier)}`)}></span>
+                                            className={cm(styles.tierIcon, `${DesignUtils.getTierIconClass(user.level)}`)}></span>
                                         {/*<TierIcon tier={user.tier} size="small"/>*/}
                                         <span className={styles.userProgressName}>
-                                            {user.nickname} {isWeekPass ?
-                                            <span className={styles.pass_text}>이번주 패스</span> : ''}
-                                            {/*{user.weekPassCount > 0 && (*/}
-                                            {/*    <span className={styles.pass_text}>*/}
-                                            {/*        🛡️{user.weekPassCount}*/}
-                                            {/*    </span>*/}
-                                            {/*)}*/}
+                                            {user.nickname}
+                                            <span className={styles.rating_text} style={{
+                                                color: DesignUtils.getRatingColor(user.level)
+                                            }} onMouseEnter={tooltip.onMouseEnter}
+                                                  onMouseLeave={tooltip.onMouseLeave}>{user.rating}</span>
+                                            {isWeekPass ?
+                                                <span className={styles.pass_text}>PASS</span> : ''}
                                         </span>
                                         <div className={styles.userProgressMenuContainer} data-dropdown={user.id}>
                                             <button

src/main/frontend/src/js/setup/utils/DateUtils.js

@@ -154,7 +154,7 @@ export const DateUtils = {
 
         if (orgMonth === 12 && (days) >= (totalDays - orgDate)) {
             date.setFullYear(date.getFullYear() + 1);
-            date.setMonth(1);
+            date.setMonth(0);
             date.setDate((days) - (totalDays - orgDate));
         } else {
             date.setDate(orgDate + (days));
@@ -209,4 +209,4 @@ export const DateUtils = {
         newDate.setDate(newDate.getDate() + addOffset);
         return newDate;
     }
-}
+}

src/main/frontend/src/js/utils/DesignUtils.js

@@ -1,99 +1,119 @@
 import styles from "../../css/styles_old.module.css"
+
 export const DesignUtils = {
-    getTierColor : (lv)=>{
-        if(lv <= 0){ // unrated
+    getTierColor: (lv) => {
+        if (lv <= 0) { // unrated
             return '#c1ea84';
-        }else if(lv <= 5){ // bronze
+        } else if (lv <= 5) { // bronze
             return '#704131';
-        }else if(lv > 5 && lv <= 10){ // silver
+        } else if (lv > 5 && lv <= 10) { // silver
             return '#a2a2a2';
-        }else if(lv > 10 && lv <= 15){ // gold
+        } else if (lv > 10 && lv <= 15) { // gold
             return '#ffd116';
-        }else if(lv > 15 && lv <= 20){ // platinum
+        } else if (lv > 15 && lv <= 20) { // platinum
             return '#89ffd2';
-        }else if(lv > 20 && lv <= 25){ // diamond
+        } else if (lv > 20 && lv <= 25) { // diamond
             return '#548dff';
-        }else if(lv > 25 && lv <= 30){ // ruby
+        } else if (lv > 25 && lv <= 30) { // ruby
             return '#ff5f5f';
-        }else{
+        } else {
             return 'white'
         }
     },
-    getTierIconClass : (lv)=>{
+    getRatingColor: (lv) => {
+        if (lv <= 0) { // unrated
+            return '#c1ea84';
+        } else if (lv <= 5) { // bronze
+            return '#704131';
+        } else if (lv > 5 && lv <= 10) { // silver
+            return '#858585';
+        } else if (lv > 10 && lv <= 15) { // gold
+            return '#dcb30e';
+        } else if (lv > 15 && lv <= 20) { // platinum
+            return '#36b285';
+        } else if (lv > 20 && lv <= 25) { // diamond
+            return '#2750a4';
+        } else if (lv > 25 && lv <= 30) { // ruby
+            return '#c43131';
+        } else {
+            return 'white'
+        }
+    },
+    getTierIconClass: (lv) => {
         let tier;
         let num;
-        if(lv <= 0){ // unrated
+        if (lv <= 0) { // unrated
             return styles.unrated
-        }else if(lv <= 5){ // bronze
+        } else if (lv <= 5) { // bronze
             tier = 'bronze'
             num = 6 - lv;
-        }else if(lv > 5 && lv <= 10){ // silver
+        } else if (lv > 5 && lv <= 10) { // silver
             tier = 'silver'
             num = 11 - lv;
-        }else if(lv > 10 && lv <= 15){ // gold
+        } else if (lv > 10 && lv <= 15) { // gold
             tier = 'gold'
             num = 16 - lv;
-        }else if(lv > 15 && lv <= 20){ // platinum
+        } else if (lv > 15 && lv <= 20) { // platinum
             tier = 'platinum'
             num = 21 - lv;
-        }else if(lv > 20 && lv <= 25){ // diamond
+        } else if (lv > 20 && lv <= 25) { // diamond
             tier = 'diamond'
             num = 26 - lv;
-        }else if(lv > 25 && lv <= 30){ // ruby
+        } else if (lv > 25 && lv <= 30) { // ruby
             tier = 'ruby'
             num = 31 - lv;
         }
         const classname = `${tier}_${num}`;
         return styles[classname];
     },
-    getBarColor : (per)=>{
-        if(per === 0){
+    getBarColor: (per) => {
+        if (per === 0) {
             return '#ffffff'
-        }else if(per <= 10){
+        } else if (per <= 10) {
             return '#ff0000'
-        }else if(per > 10 && per <= 50){
+        } else if (per > 10 && per <= 50) {
             return '#ffaa54'
-        }else if(per > 50 && per < 100){
+        } else if (per > 50 && per < 100) {
             return '#ffd754'
-        }else if(per >= 100){
+        } else if (per >= 100) {
             return '#2986ff'
-        }else{
+        } else {
             return '#ffffff'
         }
     },
-    getResultColor : (result)=>{
-        if(result === 4){
+    getResultColor: (result) => {
+        if (result === 4) {
             // return '#09d000'
-        }else{
+        } else {
             return '#ff4a4a'
         }
     },
-    getLevelIconClass : (lv)=>{
+    getLevelIconClass: (lv) => {
         let tier;
         let num;
-        if(lv <= 0){ // unrated
+        if (lv <= 0) { // unrated
             tier = 'sprout'
             num = 6 - (-lv);
-        }else if(lv <= 5){ // bronze
+        } else if (lv <= 5) { // bronze
             tier = 'bronze'
             num = 6 - lv;
-        }else if(lv > 5 && lv <= 10){ // silver
+        } else if (lv > 5 && lv <= 10) { // silver
             tier = 'silver'
             num = 11 - lv;
-        }else if(lv > 10 && lv <= 15){ // gold
+        } else if (lv > 10 && lv <= 15) { // gold
             tier = 'gold'
             num = 16 - lv;
-        }else if(lv > 15 && lv <= 20){ // platinum
+        } else if (lv > 15 && lv <= 20) { // platinum
             tier = 'platinum'
             num = 21 - lv;
-        }else if(lv > 20 && lv <= 25){ // diamond
+        } else if (lv > 20 && lv <= 25) { // diamond
             tier = 'diamond'
             num = 26 - lv;
-        }else if(lv > 25 && lv <= 30){ // ruby
+        } else if (lv > 25 && lv <= 30) { // ruby
             tier = 'ruby'
             num = 31 - lv;
         }
         const classname = `${tier}_${num}`;
         return styles[classname];
     }
-}
+}

src/main/java/com/baektracker/domain/baekjoon/service/BaekjoonService.java

@@ -12,6 +12,7 @@
 import com.baektracker.global.exception.CustomException;
 import java.io.IOException;
 import java.time.LocalDate;
+import java.time.LocalDateTime;
 import java.util.ArrayList;
 import java.util.HashMap;
 import java.util.List;
@@ -34,11 +35,10 @@ public class BaekjoonService {
     private static final String Baekjoon_Problem_Status_Page_URL = "https://www.acmicpc.net/status";
 
     @Transactional
-    public void loadBaekjoonProblemStatus() {
+    public int loadBaekjoonProblemStatus() {
+        int count = 0;
         List<User> users = userRepository.findAll();
         for (User user : users) {
-            int count = 0;
-
             List<SolvedProblem> scrappedProblems = new ArrayList<>();
             int top = -1;
             do {
@@ -57,14 +57,15 @@ public void loadBaekjoonProblemStatus() {
 
             if (!scrappedProblems.isEmpty()) {
                 int updatedLastRead = scrappedProblems.get(0).getSubmitId();
-                System.out.printf("qwe (%s) scrapped : %d, last-read: %d\n", user.getUsername(),
-                        scrappedProblems.size(), updatedLastRead);
+//                System.out.printf("qwe (%s) scrapped : %d, last-read: %d\n", user.getUsername(),
+//                        scrappedProblems.size(), updatedLastRead);
                 user.updateLastRead(updatedLastRead);
+                user.updateLastReadTime(LocalDateTime.now());
                 solvedProblemRepository.saveAll(scrappedProblems);
-//                solvedProblemRepository.flush();
-//                userRepository.flush();
+                count += scrappedProblems.size();
             }
         }
+        return count;
     }
 
     private List<SolvedProblem> scrapProblemPage(User user, int top, int lastReadIndex)

src/main/java/com/baektracker/domain/problem/controller/ProblemController.java

@@ -7,7 +7,6 @@
 import java.time.LocalDate;
 import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
-import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
@@ -29,8 +28,7 @@ public ResponseEntity<WeeklyUsersProgressResponse> getProblems(@RequestParam Loc
 
     @GetMapping("/reload")
     public ResponseEntity<Boolean> loadBaekjoonProblems() {
-        baekjoonService.loadBaekjoonProblemStatus();
-        return ResponseEntity.status(HttpStatus.OK).build();
+        return ResponseEntity.ok(baekjoonService.loadBaekjoonProblemStatus() > 0);
     }
 
     @GetMapping("/search")