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

@@ -1,5 +1,7 @@
 .App {
   width: 100vi;
   height: 100vh;
+  height: 100dvh;
   background-color: #1F2329;
-}
+  display: flex;
+}

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({ teams }){
+    return (
+        <div id={"BettingDetail"}>
+            <LeftTeam info={teams.LeftTeam} />
+            <div className='line-box'>
+                <div className="line" />
+            </div>
+            <RightTeam info={teams.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 ? info.bettingpercent/10 : 10;
+    let totalBettingMoney = info ? info.totalbettingmoney : 0;
+    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,35 @@ 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 ? info.name : '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] ? moneyUnit[UnitIndex] : moneyUnit[0]} */}
+                    {0}
                 </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 ? info.odds : 0}
                 </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 ? info.personnel : 0}
                 </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 ? info.bettingpercent : 100}%</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 ? info.bettingpercent/10 : 10;
+    let totalBettingMoney = info ? info.totalbettingMoney : 0;
+    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 ? info.name : '0반'}</div>
             <div className='RightTeam-totalbettingmoney'>
                 <div className='RightTeam-totalbettingmoney-text'>
-                    {props.info.totalbettingmoney}
+                    {totalBettingMoney}{moneyUnit[UnitIndex] ? moneyUnit[UnitIndex] : ''}
                 </div>
                 <img src={money} alt='money' />
             </div>
             <div className='RightTeam-odds'>
                 <div className='RightTeam-odds-text'>
-                    {props.info.odds}
+                    {info ? info.odds : 0}
                 </div>
                 <img src={people} alt='people' />
             </div>
             <div className='RightTeam-personnel'>
                 <div className='RightTeam-personnel-text'>
-                    {props.info.personnel}
+                    {info ? info.personnel : 0}
                 </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 ? info.bettingpercent : 100}%</div>
+            <div style={RightTeamProgressbar}></div>
         </div>
     )
 }

src/components/betting/set/BettingSet.jsx

@@ -0,0 +1,15 @@
+import './bettingSet.css'
+import BettingTitle from '../title/BettingTitle';
+import BettingDetail from './../betting-teams/BettingDetail';
+
+function BettingSet({ betting }){
+    return (
+        <div id="BettingSet" className="BettingSet">
+            <BettingTitle title={betting.title} />
+            <div className='emptyspace'></div>
+            <BettingDetail teams={betting.teams} />
+        </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,17 +1,20 @@
 import './bettingTitle.css'
 
-function BettingTitle(props) {
-    let deadline = ``;
+function BettingTitle({ title }) {
+    let deadline;
 
-    if (props.hour){
-        deadline += `${props.hour}시간 ${props.minute}분`;
-    } else if (props.minute){
-        deadline += `${props.minute}분`;
-    }
+    switch(true) {
+        case !!title.hour:
+            deadline = `${title.hour}시간 ${title.minute}분`;
+        case !!title.minute:
+            deadline = `${title.minute}분`;
+        default:
+            deadline = '0시간 0분';
+    };
 
     return (
         <div id={"BettingTitle"}>
-            <h4 className="main-title">{props.title}</h4>
+            <h4 className="main-title">{title ? title.title : 'BTO 배팅'}</h4>
             <p className="deadline">{deadline} 후에 마감이 됩니다</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;
+}

src/pages/betting/list/BettingList.jsx

@@ -0,0 +1,29 @@
+import './BettingList.css';
+import BettingSet from './../../../components/betting/set/BettingSet';
+
+function BettingList({ eventList }){
+    let bettingEvents = Object.keys(eventList); // 배팅 종목들 ex) 농구, 축구, 이어달리기
+
+    let bettingList = Object.values(eventList).map((bettings, index) => {
+        return (
+            <div key={index} className='event'>
+            <h2>{bettingEvents[index]}</h2>
+            {
+                Object.values(bettings).map((betting, index) => {
+                    return (
+                        <BettingSet key={betting.id || index} betting={betting} />
+                    );
+                })
+            }
+            </div>
+        );
+    });
+
+    return (
+        <div id='BettingList'>
+            {bettingList}
+        </div>
+    );
+}
+
+export default BettingList;

src/pages/betting/list/banner/Banner.css

@@ -0,0 +1,30 @@
+#Banner {
+    /* width: 92.5rem;
+    height: 21.625rem; */
+    width: 65rem;
+    height: 15rem;
+    flex-shrink: 0;
+
+    border-radius: 1.25rem;
+    background: linear-gradient(90deg, #4D4FE2 0%, #1A8FEC 100%);
+}
+
+#Banner .bettingTitleText {
+    color: #FFF;
+    text-align: center;
+    font-family: WAGURI;
+    font-size: 2.625rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+}
+
+#Banner .bettingTeamText {
+    color: #FFF;
+    text-align: center;
+    font-family: WAGURI;
+    font-size: 1.25rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+}