Feat/#12

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "npm": "^10.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

src/App.css

@@ -2,4 +2,4 @@
   width: 100vi;
   height: 100vh;
   background-color: #1F2329;
-}
+}

src/App.jsx

@@ -4,11 +4,11 @@ import './reset.css'
 import Sidebar from "./components/sidebar/sidebar";
 
 function App() {
-    return (
-        <div className="App">
-            <Sidebar />
-        </div>
-    );
+  return (
+    <div className="App">
+        <Sidebar />
+    </div>
+  );
 }
 
-export default App;
+export default App;

src/components/betting/betting-teams/BettingDetail.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import './bettingDetail.css';
+import RightTeam from './RightTeam';
+import LeftTeam from './LeftTeam';
+
+function BettingDetail({ leftTeam, rightTeam }){
+    return (
+        <div id={"BettingDetail"}>
+            <LeftTeam info={leftTeam} />
+            <div className='line-box'>
+                <div className="line" />
+            </div>
+            <RightTeam info={rightTeam} />
+        </div>
+    );
+}
+
+export default BettingDetail;

src/components/betting/betting-teams/LeftTeam.css

@@ -31,7 +31,7 @@
 }
 
 #LeftTeam .LeftTeam-bettingpercent{
-    width: 4.5rem;
+    width: 5.5rem;
     height: 2.25rem;
     flex-shrink: 0;
 

src/components/betting/betting-teams/LeftTeam.jsx

@@ -1,12 +1,17 @@
 import './LeftTeam.css';
 
-import money from '../../../assets/betting/img/blue_money.svg'
-import people from '../../../assets/betting/img/blue_people.svg'
-import percent from '../../../assets/betting/img/blue_percent.svg'
+import money from '../../../assets/betting/component/img/blue_money.svg'
+import people from '../../../assets/betting/component/img/blue_people.svg'
+import percent from '../../../assets/betting/component/img/blue_percent.svg'
+
+function LeftTeam({ info }) {
+    let progressbarLength = info[4]/10;
+    let totalBettingMoney = info[1];
+    let UnitIndex = 0;
+    let moneyUnit = ['', 'K', 'M', 'B', 'T', 'Qd', 'Qnt', 'Sxt', 'Sep', 'Oct', 'Non', 'Dec'];
 
-function LeftTeam(props) {
     const LeftTeamProgressbar = {
-        width: `${props.info.progressbarLength}rem`,
+        width: `${progressbarLength}rem`,
         height: '0.75rem',
         flexShrink: '0',
 
@@ -16,31 +21,34 @@ function LeftTeam(props) {
         background: '#3879FE',
     };
 
+    while (totalBettingMoney >= 1000){
+        totalBettingMoney = totalBettingMoney / 1000;
+        UnitIndex += 1;
+    }
+
     return (
-        <div id={"LeftTeam"}>
-            <div className='LeftTeam-name'>{props.info.name}</div>
+        <div id='LeftTeam'>
+            <div className='LeftTeam-name'>{info[0]}</div>
             <div className='LeftTeam-totalbettingmoney'>
-                <div className='img'>
-                    <img src={money} alt='money' />
-                </div>
+                <img src={money} alt='money' />
                 <div className='LeftTeam-totalbettingmoney-text'>
-                    {props.info.totalbettingmoney}
+                    {totalBettingMoney}{moneyUnit[UnitIndex]}
                 </div>
             </div>
             <div className='LeftTeam-odds'>
-                <img src={percent} alt='percent' />
+                <img src={people} alt='people' />
                 <div className='LeftTeam-odds-text'>
-                    {props.info.odds}
+                    {info[2]}
                 </div>
             </div>
             <div className='LeftTeam-personnel'>
-                <img src={people} alt='people' />
+                <img src={percent} alt='percent' />
                 <div className='LeftTeam-personnel-text'>
-                    {props.info.personnel}
+                    {info[3]}
                 </div>
             </div>
-            <div className='LeftTeam-bettingpercent'>{props.info.bettingpercent}%</div>
-            <div className='LeftTeam-progressbar' style={LeftTeamProgressbar}>{props.info.progressbar}</div>
+            <div className='LeftTeam-bettingpercent'>{info[4]}%</div>
+            <div style={LeftTeamProgressbar}></div>
         </div>
     )
 }

src/components/betting/betting-teams/RightTeam.css

@@ -31,7 +31,7 @@
 }
 
 #RightTeam .RightTeam-bettingpercent{
-    width: 4.5rem;
+    width: 5.5rem;
     height: 2.25rem;
     flex-shrink: 0;
 

src/components/betting/betting-teams/RightTeam.jsx

@@ -1,12 +1,17 @@
 import './RightTeam.css';
 
-import money from '../../../assets/betting/img/red_money.svg'
-import people from '../../../assets/betting/img/red_people.svg'
-import percent from '../../../assets/betting/img/red_percent.svg'
+import money from '../../../assets/betting/component/img/red_money.svg'
+import people from '../../../assets/betting/component/img/red_people.svg'
+import percent from '../../../assets/betting/component/img/red_percent.svg'
+
+function RightTeam({ info }){
+    let progressbarLength = info[4]/10;
+    let totalBettingMoney = info[1];
+    let UnitIndex = 0;
+    let moneyUnit = ['', 'K', 'M', 'B', 'T', 'Qd', 'Qnt', 'Sxt', 'Sep', 'Oct', 'Non', 'Dec'];
 
-function RightTeam(props){
     const RightTeamProgressbar = {
-        width: `${props.info.progressbarLength}rem`,
+        width: `${progressbarLength}rem`,
         height: '0.75rem',
         flexShrink: '0',
 
@@ -16,29 +21,34 @@ function RightTeam(props){
         background: '#F5019B',
     };
 
+    while (totalBettingMoney >= 1000){
+        totalBettingMoney = totalBettingMoney / 1000;
+        UnitIndex += 1;
+    }
+
     return (
         <div id='RightTeam'>
-            <div className='RightTeam-name'>{props.info.name}</div>
+            <div className='RightTeam-name'>{info[0]}</div>
             <div className='RightTeam-totalbettingmoney'>
                 <div className='RightTeam-totalbettingmoney-text'>
-                    {props.info.totalbettingmoney}
+                    {totalBettingMoney}{moneyUnit[UnitIndex]}
                 </div>
                 <img src={money} alt='money' />
             </div>
             <div className='RightTeam-odds'>
                 <div className='RightTeam-odds-text'>
-                    {props.info.odds}
+                    {info[2]}
                 </div>
                 <img src={people} alt='people' />
             </div>
             <div className='RightTeam-personnel'>
                 <div className='RightTeam-personnel-text'>
-                    {props.info.personnel}
+                    {info[3]}
                 </div>
                 <img src={percent} alt='percent' />
             </div>
-            <div className='RightTeam-bettingpercent'>{props.info.bettingpercent}%</div>
-            <div style={RightTeamProgressbar}>{props.info.progressbar}</div>
+            <div className='RightTeam-bettingpercent'>{info[4]}%</div>
+            <div style={RightTeamProgressbar}></div>
         </div>
     )
 }

src/components/betting/set/BettingSet.jsx

@@ -0,0 +1,83 @@
+import React, { useState, useEffect } from 'react';
+import './bettingSet.css';
+import BettingTitle from '../title/BettingTitle';
+import BettingDetail from './../betting-teams/BettingDetail';
+
+function BettingSet({ title, teams }) {
+    const [bettingTitle, setBettingTitle] = useState({ title: "배팅", hour: 24, minute: 30 });
+    const [bettingTeams, setBettingTeams] = useState({
+        "LeftTeam": {
+            "name": "0팀",
+            "totalbettingmoney": 300000000000000000,
+            "odds": "1:1",
+            "personnel": 300,
+            "bettingpercent": 50
+        },
+        "RightTeam": {
+            "name": "0팀",
+            "totalbettingmoney": 300000000000000000,
+            "odds": "1:1",
+            "personnel": 300,
+            "bettingpercent": 50
+        }
+    });
+
+    const bettingTeamsArray = Object.values(bettingTeams);
+
+    const handleTitle = async (at) => {
+        setBettingTitle((prev) => {
+            return {
+                ...prev,
+                title: at[0],
+                hour : at[1],
+                minute : at[2]
+            }
+        });
+    }
+
+    const handleTeams = async (at) => {
+        setBettingTeams((prev) => {
+            return {
+                ...prev,
+                "LeftTeam": {
+                    "name": at[0].name,
+                    "totalbettingmoney": at[0].totalbettingmoney,
+                    "odds": at[0].odds,
+                    "personnel": at[0].personnel,
+                    "bettingpercent": at[0].bettingpercent
+                },
+                "RightTeam": {
+                    "name": at[1].name,
+                    "totalbettingmoney": at[1].totalbettingmoney,
+                    "odds": at[1].odds,
+                    "personnel": at[1].personnel,
+                    "bettingpercent": at[1].bettingpercent
+                }
+            }
+        });
+    }
+
+    useEffect(() => {
+        if (title) {
+            const titleArray = Object.values(title)
+            handleTitle(titleArray)
+        }
+    }, [title]);
+
+    useEffect(() => {
+        if (teams) {
+            const teamsArray = Object.values(teams);
+            handleTeams(teamsArray);
+        }
+    }, [teams]);
+
+    return (
+        <div id='BettingSet' className='BettingSet'>
+            <BettingTitle title={bettingTitle.title} hour={bettingTitle.hour} minute={bettingTitle.minute} />
+            <div className='emptyspace'></div>
+            <BettingDetail leftTeam={Object.values(bettingTeamsArray[0])} rightTeam={Object.values(bettingTeamsArray[1])} />
+        </div>
+    );
+}
+
+export default BettingSet;

src/components/betting/set/bettingSet.css

@@ -0,0 +1,9 @@
+#BettingSet {
+    width: 22.5rem;
+    height: 13.6rem;
+}
+
+#BettingSet .emptyspace {
+    width: 22.5rem;
+    height: 0.25rem;
+}

src/components/betting/title/BettingTitle.jsx

@@ -1,18 +1,15 @@
 import './bettingTitle.css'
 
-function BettingTitle(props) {
-    let deadline = ``;
-
-    if (props.hour){
-        deadline += `${props.hour}시간 ${props.minute}분`;
-    } else if (props.minute){
-        deadline += `${props.minute}분`;
-    }
-
+function BettingTitle({ title, hour, minute }) {
     return (
         <div id={"BettingTitle"}>
-            <h4 className="main-title">{props.title}</h4>
-            <p className="deadline">{deadline} 후에 마감이 됩니다</p>
+            <h4 className="main-title">{title}</h4>
+            <p className="deadline">
+                {
+                    hour ? `${hour}시간 ${minute}분 후에 마감이 됩니다` :
+                    (minute ? `${minute}분 후에 마감이 됩니다` : "곧 마감합니다")
+                }
+            </p>
         </div>
     );
 }

src/components/betting/title/bettingTitle.css

@@ -16,7 +16,7 @@
     background: #363636;
 }
 
-#BettingTitle > .main-title {
+#BettingTitle .main-title {
     width: 8.37881rem;
     height: 1.08694rem;
     flex-shrink: 0;
@@ -32,7 +32,7 @@
     line-height: normal;
 }
 
-#BettingTitle > .deadline {
+#BettingTitle .deadline {
     width: 10.24913rem;
     height: 0.86956rem;
     flex-shrink: 0;

src/pages/betting/list/BettingList.css

@@ -0,0 +1,18 @@
+#BettingList {
+    margin: 0;
+    padding: 0;
+}
+
+#BettingList .event {
+    display: flex;
+}
+
+#BettingList .pageTitle {
+    color: #FFF;
+    text-align: center;
+    font-family: WAGURI;
+    font-size: 1.25rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+}