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

🚀 Deploy
LikeLion-at-DGU · Aug 3, 2024 · 202de92 · 202de92
2 parents 7cbabb0 + c2e2aeb
commit 202de92
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 deletions.
diff --git a/src/pages/StarPage/ClearStarP.jsx b/src/pages/StarPage/ClearStarP.jsx
@@ -11,7 +11,7 @@ const ClearStarP = () => {
   }
 
   return (
-    <>
+    <S.Wrapper>
       <S.Header>
         <S.BannerImage src={starData.photo} alt={starData.name} />
         <S.BannerTitle>
@@ -23,9 +23,9 @@ const ClearStarP = () => {
         <S.ClearMain>
           <div className="imgContainr">
             <img src={ClearStarPIcon} />
-            <div> {starData.routines_added_count}회</div>
-            <div className="textOverlay">루틴 완료 달성!</div>
+            <div className="textOverlay">{starData.routines_added_count}회</div>
           </div>
+          <div>루틴 완료 달성!</div>
         </S.ClearMain>
         <S.shareBtn>
           <button>
@@ -34,7 +34,7 @@ const ClearStarP = () => {
           </button>
         </S.shareBtn>
       </S.ClearCantainr>
-    </>
+    </S.Wrapper>
   );
 };
 export default ClearStarP;
diff --git a/src/pages/StarPage/StarPage.jsx b/src/pages/StarPage/StarPage.jsx
@@ -53,8 +53,7 @@ const StarPage = () => {
   useEffect(() => {
     if (
       starData &&
-      starData.routines_count.user_count ===
-        starData.routines_count.total_count &&
+      starData.routines_added_count === starData.routines_count.total_count &&
       !isClearStarPVisible
     ) {
       setIsClearStarPVisible(true);

diff --git a/src/pages/StarPage/styled.js b/src/pages/StarPage/styled.js
@@ -1,6 +1,12 @@
 import { styled } from "styled-components";
 import Back from "../../assets/background.svg";
 
+export const Wrapper = styled.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  background-image: url(${Back});
+`;
 export const Header = styled.div`
   position: relative;
   width: 100%;
@@ -62,9 +68,11 @@ export const Ranking = styled.div`
 export const ClearCantainr = styled.div`
   margin-top: 2rem;
   display: flex;
+  height: 100%;
+
   flex-direction: column;
   margin-bottom: 10rem;
-  background-image: url(${Back});
+
   justify-content: center;
   align-items: center;
   gap: 2rem;
@@ -75,9 +83,10 @@ export const ClearMain = styled.div`
   flex-direction: column;
   position: relative;
   width: 100%;
+  flex: 1;
   justify-content: center;
   align-items: center;
-  gap: 10px;
+  gap: 20px;
 
   .imgContainr {
     position: relative;