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; + } `;