From edd1847f48400be0d0716aa8f9596bc18108dd0b Mon Sep 17 00:00:00 2001
From: jihye9549 <105404542+jihye9549@users.noreply.github.com>
Date: Fri, 4 Aug 2023 00:03:30 +0900
Subject: [PATCH 1/3] =?UTF-8?q?refactor=20:=20=EC=83=81=EC=9E=A5=EB=B0=98?=
=?UTF-8?q?=EC=9D=91=ED=98=95=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/pages/GameResult/index.tsx | 49 +++++++++++++++++++++++++++++-----
1 file changed, 43 insertions(+), 6 deletions(-)
diff --git a/src/pages/GameResult/index.tsx b/src/pages/GameResult/index.tsx
index 522350e..265623b 100644
--- a/src/pages/GameResult/index.tsx
+++ b/src/pages/GameResult/index.tsx
@@ -61,7 +61,7 @@ const GameResult = () => {
Team D 대표 최현정
-
+
{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,17 @@ 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;
`;
const Ranking = styled.div`
@@ -192,7 +230,6 @@ const Ranking = styled.div`
background-size: 35vw 60vh;
display: flex;
flex-direction: column;
- align-items: center;
margin-left: 10rem;
padding-top: 13rem;
& > img {
From cf3f9b2d5e19e1d4988181c36e0513e6e22e63d8 Mon Sep 17 00:00:00 2001
From: jihye9549 <105404542+jihye9549@users.noreply.github.com>
Date: Fri, 4 Aug 2023 00:03:57 +0900
Subject: [PATCH 2/3] =?UTF-8?q?refactor=20:=20=EB=B2=84=ED=8A=BC=20?=
=?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/pages/GameResult/index.tsx | 11 +++++++++++
1 file changed, 11 insertions(+)
diff --git a/src/pages/GameResult/index.tsx b/src/pages/GameResult/index.tsx
index 265623b..b1148b4 100644
--- a/src/pages/GameResult/index.tsx
+++ b/src/pages/GameResult/index.tsx
@@ -221,6 +221,17 @@ const Buttons = styled.div`
&:last-child {
background-color: transparent;
}
+ @media (max-width: 768px) {
+ width: 3rem;
+ height: 3rem;
+ margin-bottom: 6rem;
+ margin-left: 20.5rem;
+
+ & > img {
+ width: 5rem;
+ height: 5rem;
+ }
+ }
`;
const Ranking = styled.div`
From dfda71ffc681275632ddca1f84948e09810362d6 Mon Sep 17 00:00:00 2001
From: jihye9549 <105404542+jihye9549@users.noreply.github.com>
Date: Fri, 4 Aug 2023 00:04:55 +0900
Subject: [PATCH 3/3] =?UTF-8?q?refactor=20:=20=EC=84=9D=EC=B0=A8=EB=A9=94?=
=?UTF-8?q?=EB=AA=A8=20=20=EB=B0=98=EC=9D=91=ED=98=95=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/pages/GameResult/index.tsx | 17 +++++++++++++++++
1 file changed, 17 insertions(+)
diff --git a/src/pages/GameResult/index.tsx b/src/pages/GameResult/index.tsx
index b1148b4..95150c8 100644
--- a/src/pages/GameResult/index.tsx
+++ b/src/pages/GameResult/index.tsx
@@ -246,6 +246,16 @@ const Ranking = styled.div`
& > 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 }>`
@@ -259,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 }>`
@@ -273,4 +287,7 @@ const UserInRanking = styled.span<{ rank: number }>`
return '#bc00fe';
}
}};
+ @media (max-width: 768px) {
+ font-size: 2.5rem;
+ }
`;