Merge remote-tracking branch 'origin/design/#92' into develop

2023-Summer-Bootcamp-TeamD · Aug 3, 2023 · 6b0b290 · 6b0b290
2 parents e73e252 + dfda71f
commit 6b0b290
Showing 1 changed file with 71 additions and 6 deletions.
diff --git a/src/pages/GameResult/index.tsx b/src/pages/GameResult/index.tsx
@@ -61,7 +61,7 @@ const GameResult = () => {
         <span className="center-items">Team D 대표 최현정</span>
       </TheFirstAward>
       <div className="right-items">
-        <Buttons onClick={goToMain}></Buttons>
+        <Buttons onClick={goToMain}> </Buttons>
         <Ranking>
           {userList
             ?.sort((a, b) => b.score - a.score)
@@ -152,7 +152,7 @@ const TheFirstAward = styled.div`
     margin-bottom: 0;
   }
   span:nth-child(7) {
-    font-size: 1%.5;
+    font-size: 1.5rem;
     margin-top: 1rem;
     margin-bottom: 0;
   }
@@ -163,6 +163,43 @@ const TheFirstAward = styled.div`
     margin-left: auto;
     margin-right: auto;
   }
+
+  @media (max-width: 768px) {
+    width: 42vw;
+    height: 50vh;
+    background-size: 42vw 50vh;
+    & > span {
+      margin: 3rem 0;
+    }
+    span {
+      font-size: 1rem;
+    }
+    span:nth-child(2) {
+      font-size: 2rem;
+      margin-top: 2rem;
+    }
+    span:nth-child(3) {
+      font-size: 1rem;
+    }
+    span:nth-child(4) {
+      font-size: 1rem;
+      margin-top: 0;
+      margin-bottom: 1rem;
+    }
+    span:nth-child(5) {
+      font-size: 1.7rem;
+      margin-left: 1rem;
+      margin-right: 1rem;
+    }
+    span:nth-child(6) {
+      font-size: 1rem;
+      margin-top: 5rem;
+    }
+    span:nth-child(7) {
+      font-size: 1.2rem;
+      margin-top: 0.5rem;
+    }
+  }
 `;
 
 const Buttons = styled.div`
@@ -173,16 +210,28 @@ const Buttons = styled.div`
   border-radius: 50%;
   margin-bottom: 3rem;
   font-size: 2.5rem;
+  background-size: contain;
   &:hover {
     cursor: pointer;
     opacity: 0.8;
   }
+  &:first-child {
+    background-image: url(${wrong});
+  }
   &:last-child {
     background-color: transparent;
-    margin-right: 5rem;
   }
-  background-image: url(${wrong});
-  background-size: contain;
+  @media (max-width: 768px) {
+    width: 3rem;
+    height: 3rem;
+    margin-bottom: 6rem;
+    margin-left: 20.5rem;
+
+    & > img {
+      width: 5rem;
+      height: 5rem;
+    }
+  }
 `;
 
 const Ranking = styled.div`
@@ -192,12 +241,21 @@ const Ranking = styled.div`
   background-size: 35vw 60vh;
   display: flex;
   flex-direction: column;
-  align-items: center;
   margin-left: 10rem;
   padding-top: 13rem;
   & > img {
     height: 53vh;
   }
+  @media (min-width: 769px) {
+    align-items: center;
+  }
+  @media (max-width: 768px) {
+    padding-top: 6.6rem;
+    width: 35vw;
+    height: 30vh;
+    margin-left: 3rem;
+    background-size: 35vw 30vh;
+  }
 `;
 
 const Medal = styled.img<{ rank: number }>`
@@ -211,6 +269,10 @@ const Medal = styled.img<{ rank: number }>`
       return `content: url(${BronzeMedal});`;
     }
   }}
+  @media (max-width: 768px) {
+    width: 2.3rem;
+    margin-left: 6rem;
+  }
 `;
 
 const UserInRanking = styled.span<{ rank: number }>`
@@ -225,4 +287,7 @@ const UserInRanking = styled.span<{ rank: number }>`
       return '#bc00fe';
     }
   }};
+  @media (max-width: 768px) {
+    font-size: 2.5rem;
+  }
 `;