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

Feature/lucy
100-hours-a-week · Sep 13, 2024 · 4eab131 · 4eab131
2 parents f947570 + 78bcd2d
commit 4eab131
Show file tree

Hide file tree

Showing 27 changed files with 14,187 additions and 8,093 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,6 +29,8 @@
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.26.0",
     "react-scripts": "^5.0.1",
+    "react-spring": "^9.7.4",
+    "react-spring-carousel": "^2.0.19",
     "styled-components": "^6.1.12",
     "sweetalert": "^2.1.2",
     "tree": "^0.1.3",

diff --git a/public/index.html b/public/index.html
@@ -19,18 +19,18 @@
       async
       src="https://www.googletagmanager.com/gtag/js?id=G-49KV0XZ9K9"
     ></script>
-    <script>
+    <!-- <script>
       window.dataLayer = window.dataLayer || [];
       function gtag() {
         dataLayer.push(arguments);
       }
       gtag("js", new Date());
 
       gtag("config", "G-49KV0XZ9K9");
-    </script>
+    </script> -->
 
     <!-- Microsoft clarity 설정 -->
-    <script type="text/javascript">
+    <!-- <script type="text/javascript">
       (function (c, l, a, r, i, t, y) {
         c[a] =
           c[a] ||
@@ -43,7 +43,7 @@
         y = l.getElementsByTagName(r)[0];
         y.parentNode.insertBefore(t, y);
       })(window, document, "clarity", "script", "ns87h3q3tp");
-    </script>
+    </script> -->
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/Component/Chart/chartStyle.ts b/src/Component/Chart/chartStyle.ts
@@ -1,7 +1,7 @@
 import styled from "styled-components";
 
 export const ChartStyle = styled.div`
-  width: 100%;
+  width: 95%;
   margin-bottom: 30px;
 `;
 

diff --git a/src/Component/Game/GameNews/gameNewsItem.tsx b/src/Component/Game/GameNews/gameNewsItem.tsx
@@ -0,0 +1,5 @@
+const GameNewsItem = () => {
+  return <div>게임용 뉴스 아이템</div>;
+};
+
+export default GameNewsItem;
diff --git a/src/Component/Game/GameNews/gmaeNewsList.tsx b/src/Component/Game/GameNews/gmaeNewsList.tsx
@@ -0,0 +1,5 @@
+const GameNewsList = () => {
+  return <div>게임용 뉴스 리스으</div>;
+};
+
+export default GameNewsList;
diff --git a/src/Component/Game/Rank/rankBox.tsx b/src/Component/Game/Rank/rankBox.tsx
@@ -0,0 +1,34 @@
+import { RankDataProps } from "../../../constants/interface";
+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";
+
+const RankBox: React.FC<RankDataProps> = ({
+  nickname,
+  budget,
+  rate,
+  index = 0,
+}) => {
+  const rank = index + 1;
+
+  return (
+    <S.Container>
+      {/* 메달 or 순위 */}
+      {rank >= 4 ? (
+        <S.IndexBox>{rank}</S.IndexBox>
+      ) : (
+        <S.Medal src={rank === 1 ? gold : rank === 2 ? silver : bronze} />
+      )}
+
+      <S.UserContainer>
+        <S.Nickname>{nickname}</S.Nickname>
+        <S.Budget>{budget}</S.Budget>
+        <S.Rate>{rate} %</S.Rate>
+      </S.UserContainer>
+    </S.Container>
+  );
+};
+
+export default RankBox;
diff --git a/src/Component/Game/Rank/rankBoxStyle.ts b/src/Component/Game/Rank/rankBoxStyle.ts
@@ -0,0 +1,54 @@
+import styled from "styled-components";
+import { Colors } from "../../../Styles/Colors";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  /* justify-content: start; */
+  align-items: center;
+  border-radius: 20px;
+  margin-bottom: 1rem;
+  padding: 0.8rem 1rem;
+  box-shadow: 0px 6px 5px rgb(213, 213, 213);
+  border: 1px solid rgb(213, 213, 213);
+  /* min-width: 95%; */
+  white-space: nowrap;
+  gap: 1rem;
+`;
+
+export const IndexBox = styled.div`
+  border: 1px solid #e6e6e6;
+  width: 50px;
+  height: 50px;
+  border-radius: 50px;
+  font-size: 20px;
+  text-align: center;
+  padding-top: 0.8rem;
+  color: #858494;
+`;
+
+export const UserContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+`;
+
+export const Nickname = styled.div`
+  width: 150px;
+`;
+
+export const Budget = styled.span`
+  width: 120px;
+  color: #858494;
+  font-family: "SCDream3";
+`;
+
+export const Rate = styled.span`
+  color: ${Colors.red};
+  font-family: "SCDream3";
+`;
+
+export const Medal = styled.img`
+  width: 50px;
+  height: 45px;
+`;
diff --git a/src/Component/Game/Rank/rankList.tsx b/src/Component/Game/Rank/rankList.tsx
@@ -0,0 +1,19 @@
+import RankBox from "./rankBox";
+import { RankListProps } from "../../../constants/interface";
+import styled from "styled-components";
+
+const Container = styled.div`
+  margin-top: 2rem;
+`;
+
+const RankList: React.FC<RankListProps> = ({ data }) => {
+  return (
+    <Container>
+      {data.map((item, index) => {
+        return <RankBox key={index} index={index} {...item} />;
+      })}
+    </Container>
+  );
+};
+
+export default RankList;
diff --git a/src/Component/Game/Rank/saySkrr.tsx b/src/Component/Game/Rank/saySkrr.tsx
@@ -0,0 +1,78 @@
+import styled from "styled-components";
+import { SaySkrrProps } from "../../../constants/interface";
+import { Colors } from "../../../Styles/Colors";
+import SpeechBubbleImg from "../../../img/speechBubble.png";
+
+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;
+  height: 150px;
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+`;
+const TextBox = styled.div`
+  position: absolute;
+  top: 1.8rem;
+  left: 2rem;
+  width: 200px;
+  height: 80px;
+`;
+
+const Colored = styled.span`
+  color: ${Colors.main};
+`;
+
+const SaySkrr: React.FC<SaySkrrProps> = ({ rank, money }) => {
+  return (
+    <Say>
+      <SpeechBubble src={SpeechBubbleImg} />
+      <TextBox>
+        {rank !== 4 ? (
+          <div>
+            <Colored>{rank}등</Colored> Skrrr
+            <br />
+            10년 전에 투자했으면
+            <br />
+            <Colored>{money}원</Colored>
+            <br />
+            벌었을텐데...
+          </div>
+        ) : (
+          <div>
+            <Colored>{rank}등</Colored> Skrrr
+            <br />넌 ... 투자하지 마라...
+          </div>
+        )}
+      </TextBox>
+    </Say>
+  );
+};
+
+export default SaySkrr;
diff --git a/src/Component/GameCarousel/carouselItem.tsx b/src/Component/GameCarousel/carouselItem.tsx
@@ -0,0 +1,44 @@
+import styled from "styled-components";
+import GameChart from "./gameChart";
+import GameNewsList from "./gameNewsList";
+import { Colors } from "../../Styles/Colors";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+`;
+
+const TitleStyle = styled.div`
+  margin-top: 2rem;
+  font-size: 20px;
+`;
+
+const ColoredText = styled.span`
+  color: ${Colors.main};
+  font-family: "SCDream7";
+`;
+
+const NameStyle = styled.div`
+  margin-top: 0.2rem;
+  font-size: 30px;
+`;
+
+const CarouselItem = ({ data }: any) => {
+  // console.log(data.news);
+  return (
+    <Container>
+      <TitleStyle> 
+        내가 거래한 <ColoredText>{data.fakeName}</ColoredText>의 정체
+      </TitleStyle>
+      <NameStyle>{data.realName}</NameStyle>
+      <GameChart data={data.chart} />
+      <TitleStyle>해당 종목의 뉴스 히스토리</TitleStyle>
+      <GameNewsList data={data.news} />
+    </Container>
+  );
+};
+
+export default CarouselItem;