Merge pull request #213 from 100-hours-a-week/feature/lucy

Feature/lucy
100-hours-a-week · Sep 24, 2024 · 630531e · 630531e
2 parents bc99e8e + e07f213
commit 630531e
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 64 deletions.
diff --git a/src/Component/Game/Rank/rankBox.tsx b/src/Component/Game/Rank/rankBox.tsx
@@ -3,7 +3,7 @@ import * as S from "./rankBoxStyle";
 import gold from "../../../img/goldMedal.png";
 import silver from "../../../img/silverMedal.png";
 import bronze from "../../../img/bronzeMedal.png";
-import skrr from "../../../img/SkerrImg.png";
+import { formatPrice, formatRate } from "../../../util/util";
 
 const RankBox: React.FC<RankDataProps> = ({
   nickname,
@@ -15,7 +15,6 @@ const RankBox: React.FC<RankDataProps> = ({
 
   return (
     <S.Container>
-      {/* 메달 or 순위 */}
       {rank >= 4 ? (
         <S.IndexBox>{rank}</S.IndexBox>
       ) : (
@@ -24,8 +23,8 @@ const RankBox: React.FC<RankDataProps> = ({
 
       <S.UserContainer>
         <S.Nickname>{nickname}</S.Nickname>
-        <S.Budget>{total}</S.Budget>
-        <S.Rate>{profitRate} %</S.Rate>
+        <S.Budget>{formatPrice(total)}</S.Budget>
+        <S.Rate>{formatRate(profitRate)} %</S.Rate>
       </S.UserContainer>
     </S.Container>
   );

diff --git a/src/Component/Game/Rank/rankBoxStyle.ts b/src/Component/Game/Rank/rankBoxStyle.ts
@@ -34,18 +34,21 @@ export const UserContainer = styled.div`
 `;
 
 export const Nickname = styled.div`
-  width: 150px;
+  width: 120px;
 `;
 
-export const Budget = styled.span`
-  width: 120px;
+export const Budget = styled.div`
+  width: 130px;
   color: #858494;
   font-family: "SCDream3";
+  text-align: right;
 `;
 
-export const Rate = styled.span`
+export const Rate = styled.div`
   color: ${Colors.red};
   font-family: "SCDream3";
+  text-align: right;
+  width: 100px;
 `;
 
 export const Medal = styled.img`

diff --git a/src/Component/Game/Rank/rankList.tsx b/src/Component/Game/Rank/rankList.tsx
@@ -10,7 +10,7 @@ const RankList: React.FC<RankListProps> = ({ data }) => {
   return (
     <Container>
       {data.length < 1 ? (
-        <p>아직 등록된 랭킹이 없습니다!</p>
+        <p>게임 결과가 없습니다!</p>
       ) : (
         <>
           {data.map((item, index) => {

diff --git a/src/Component/Game/Rank/saySkrr.tsx b/src/Component/Game/Rank/saySkrr.tsx
@@ -2,33 +2,11 @@ import styled from "styled-components";
 import { SaySkrrProps } from "../../../constants/interface";
 import { Colors } from "../../../Styles/Colors";
 import SpeechBubbleImg from "../../../img/speechBubble.png";
+import { formatPrice } from "../../../util/util";
 
 const Say = styled.div`
   position: relative;
 `;
-//   /* 말풍선 모양.. */
-//   position: absolute;
-//   width: 230px;
-//   height: 100px;
-//   top: 20px;
-//   left: 10px;
-//   background: white;
-//   border: 1px solid #484848;
-//   color: ${Colors.main};
-//   border-radius: 80px;
-//   padding-left: 1.8rem;
-//   padding-top: 1.2rem;
-
-//   ::after {
-//     border-top: 30px solid #484848;
-//     border-left: 30px solid transparent;
-//     border-right: 1px solid transparent;
-//     border-bottom: 0px solid transparent;
-//     content: "";
-//     position: absolute;
-//     top: 98px;
-//     left: 160px;
-//   }
 
 const SpeechBubble = styled.img`
   width: 220px;
@@ -47,6 +25,7 @@ const TextBox = styled.div`
 
 const Colored = styled.span`
   color: ${Colors.main};
+  font-family: "SCDream6";
 `;
 
 const SaySkrr: React.FC<SaySkrrProps> = ({ rank, money }) => {
@@ -60,7 +39,7 @@ const SaySkrr: React.FC<SaySkrrProps> = ({ rank, money }) => {
             <br />
             10년 전에 투자했으면
             <br />
-            <Colored>{money}원</Colored>
+            <Colored>{formatPrice(money)}원</Colored>
             <br />
             벌었을텐데...
           </div>

diff --git a/src/Pages/game/totalResult.tsx b/src/Pages/game/totalResult.tsx
@@ -33,20 +33,30 @@ const TextStyle = styled.div`
   margin-bottom: 1rem;
 `;
 
-const BtnContainer = styled.div`
+const BtnBox = styled.div`
   display: flex;
   flex-direction: row;
-  gap: 2rem;
+  align-items: center;
+  gap: 1rem;
+  margin-top: 0.5rem;
+  margin-left: auto;
+  margin-right: 2.5rem;
 `;
 
-const BtnBox = styled.div`
+const NickBox = styled.div`
   display: flex;
-  flex-direction: column;
-  align-items: center;
+  flex-direction: row;
+  border: 1px solid;
+  border-radius: 5px;
+  width: 260px;
+  height: 36px;
+  padding: 10px;
+  color: #858494;
 `;
 
 const TotalResult = () => {
   const nav = useNavigate();
+  const [user, setUser] = useState("");
   const [rankList, setRankList] = useState<RankDataProps[]>([]);
   const [userRank, setUserRank] = useState<number>(0);
   const [userMoney, setUserMoney] = useState<number>(0);
@@ -74,6 +84,9 @@ const TotalResult = () => {
           // 사용자 최종 수익금 저장
           const userBudget = list[userIndex].total;
           setUserMoney(userBudget);
+
+          // 사용자 닉네임 저장
+          setUser(list[userIndex].nickname);
         }
       });
   }, []);
@@ -114,35 +127,34 @@ const TotalResult = () => {
         <SaySkrr rank={userRank} money={userMoney} />
         <ImgStyle src={SkrrImg} alt="껄무새 이미지" />
       </SkrrContainer>
+      <BtnBox>
+        <NickBox>
+          <p style={{ color: "black" }}>{user} </p>
+          <p>의 점수를</p>
+        </NickBox>
+        <Button
+          children="랭킹에 등록하기"
+          $state="normal"
+          $colorType="gradient"
+          $size="small"
+          onClick={() => {
+            handleRankBtn();
+          }}
+        />
+      </BtnBox>
 
       <RankList data={rankList} />
 
-      <BtnContainer>
-        <BtnBox>
-          <TextStyle>내가 거래한 주식의 정체는?</TextStyle>
-          <Button
-            children="🔎 주식 정체 확인하러 가기"
-            $state="normal"
-            $colorType="gradient"
-            $size="gradientBtn"
-            onClick={() => {
-              nav("/game/gameStocks");
-            }}
-          />
-        </BtnBox>
-        <BtnBox>
-          <TextStyle>랭킹 등록</TextStyle>
-          <Button
-            children="내 랭킹 등록하기"
-            $state="normal"
-            $colorType="gradient"
-            $size="medium"
-            onClick={() => {
-              handleRankBtn();
-            }}
-          />
-        </BtnBox>
-      </BtnContainer>
+      <TextStyle>내가 거래한 주식의 정체는?</TextStyle>
+      <Button
+        children="🔎 주식 정체 확인하러 가기"
+        $state="normal"
+        $colorType="gradient"
+        $size="gradientBtn"
+        onClick={() => {
+          nav("/game/gameStocks");
+        }}
+      />
       <BentoBar />
     </Container>
   );