Merge pull request #177 from LikeLion-at-DGU/dev

🚀 Deploy
LikeLion-at-DGU · Aug 3, 2024 · 9939a20 · 9939a20
2 parents 439c67a + 1ff9329
commit 9939a20
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 13 deletions.
diff --git a/src/components/StarHeader/StarHeader.jsx b/src/components/StarHeader/StarHeader.jsx
@@ -5,11 +5,11 @@ import progressingBar from "../../assets/progressingBar.svg";
 import completeBar from "../../assets/completeBar.svg";
 import ShareIcon from "../../assets/shareIcon.svg";
 
-const ProgressingBar = ({ usercount, totalcount }) => {
+const ProgressingBar = ({ userroutinecount, totalroutinecount }) => {
   return (
     <S.ProgressingBarWrapper>
-      {Array.from({ length: totalcount }).map((_, index) => {
-        const imgSrc = index < usercount ? completeBar : progressingBar;
+      {Array.from({ length: totalroutinecount }).map((_, index) => {
+        const imgSrc = index < userroutinecount ? completeBar : progressingBar;
         return <img key={index} src={imgSrc} alt={`Progress ${index}`} />;
       })}
     </S.ProgressingBarWrapper>
@@ -25,11 +25,16 @@ export const StarHeader = ({ usercount, totalcount, completecount }) => {
             <div>
               달성 진행중 {usercount}/{totalcount}
             </div>
-            <ProgressingBar usercount={usercount} totalcount={totalcount} />
+
+            <ProgressingBar
+              userroutinecount={usercount}
+              totalroutinecount={totalcount}
+            />
+
           </S.ProgressContainr>
         </div>
         <S.ShareContainr>
-          <div>총 {completecount}회</div>
+          <div> {completecount}회</div>
           <img src={ShareIcon} />
         </S.ShareContainr>
       </S.layout>

diff --git a/src/pages/MyPage/MyPage.jsx b/src/pages/MyPage/MyPage.jsx
@@ -7,7 +7,6 @@ import { useNavigate } from "react-router-dom";
 import { Logout } from "../../components/Logout/Logout";
 import Modal from "../../components/Modal/Modal";
 import LOGO from "../../assets/images/MainLogoImg.svg";
-
 export const MyPage = () => {
   const navigate = useNavigate();
   const [isLogoutVisible, setisLogoutVisible] = useState(false);

diff --git a/src/pages/StarPage/ClearStarP.jsx b/src/pages/StarPage/ClearStarP.jsx
@@ -1,4 +1,3 @@
-import React, { useState, useEffect } from "react";
 import * as S from "./styled";
 import { useMoveonStarP } from "../../hooks/useStar";
 import shareIcon from "../../assets/shareIcon.svg";
@@ -22,9 +21,11 @@ const ClearStarP = () => {
       </S.Header>
       <S.ClearCantainr>
         <S.ClearMain>
-          <img src={ClearStarPIcon} />
-          <div>총 {starData.routines_added_count}회</div>
-          <div className="textOverlay">루틴 완료 달성!</div>
+          <div className="imgContainr">
+            <img src={ClearStarPIcon} />
+            <div> {starData.routines_added_count}회</div>
+            <div className="textOverlay">루틴 완료 달성!</div>
+          </div>
         </S.ClearMain>
         <S.shareBtn>
           <button>

diff --git a/src/pages/StarPage/StarPage.jsx b/src/pages/StarPage/StarPage.jsx
@@ -7,7 +7,7 @@ import Modal from "../../components/Modal/Modal";
 import { CheckUp } from "../../components/CheckUp/CheckUp";
 import { StarHeader } from "../../components/StarHeader/StarHeader";
 import { useRecoilValue, useRecoilState, useSetRecoilState } from "recoil";
-
+import ClearStarP from "./ClearStarP";
 import {
   routineStart,
   routineEnd,
@@ -27,6 +27,7 @@ const StarPage = () => {
   const setID = useSetRecoilState(registerID);
   const starData = starP && starP.data ? starP.data : null;
   const [term, setTerm] = useState(0);
+  const [isClearStarPVisible, setIsClearStarPVisible] = useState(false);
 
   const handlePlusButtonClick = (routineId) => {
     setIsCalendarVisible(true);
@@ -49,6 +50,17 @@ const StarPage = () => {
     }
   }, [startDay, endDay]);
 
+  useEffect(() => {
+    if (
+      starData &&
+      starData.routines_count.user_count ===
+        starData.routines_count.total_count &&
+      !isClearStarPVisible
+    ) {
+      setIsClearStarPVisible(true);
+    }
+  }, [starData]);
+
   if (!starData) {
     return <p>데이터를 불러오는 중입니다...</p>; // theme이 null인 경우 처리
   }
@@ -57,6 +69,11 @@ const StarPage = () => {
     const zonedDate = addHours(new Date(date), 9); // 한국 시간으로 변환
     return format(zonedDate, "yyyy.MM.dd"); // 포맷팅
   };
+
+  if (isClearStarPVisible) {
+    return <ClearStarP />;
+  }
+
   return (
     <>
       <S.Header>

diff --git a/src/pages/StarPage/styled.js b/src/pages/StarPage/styled.js
@@ -72,12 +72,24 @@ export const ClearCantainr = styled.div`
 
 export const ClearMain = styled.div`
   display: flex;
+  flex-direction: column;
   position: relative;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
 
+  .imgContainr {
+    position: relative;
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+  }
   .textOverlay {
     position: absolute;
-    top: 50%;
-    left: 50%;
+    top: 55%;
+    left: 49.5%;
     z-index: 2;
     font-weight: bold;
     text-align: center;