커밋

INVINCIBLE-DMS · Dec 26, 2023 · f555472 · f555472
1 parent 4afba26
commit f555472
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 86 deletions.
diff --git a/src/apis/Profile/index.js b/src/apis/Profile/index.js
@@ -0,0 +1,5 @@
+import { instance } from "../axios"
+
+export const getMyPage = async (token) => {
+    return await instance.get("/my-info/user", { headers: { "Authorization": token } })
+}
diff --git a/src/apis/Ranking/index.js b/src/apis/Ranking/index.js
@@ -1,5 +1,5 @@
-import axios from "axios";
+import { instance } from "../axios";
 
 export const getRanking = async () => {
-    return await axios.get("/school-class");
-}
+    return await instance.get("/school-class");
+}
diff --git a/src/pages/MyPage.jsx b/src/pages/MyPage.jsx
@@ -3,9 +3,17 @@ import Profile from "../asset/imgs/profilePicture.svg";
 import School from "../asset/imgs/schoolIcon.svg";
 import Box from "../asset/imgs/Ticket.svg";
 import Letter from "../asset/imgs/letter.svg";
+import { getMyPage } from "../apis/Profile";
 import { useState } from "react";
+import { Cookies } from "react-cookie";
 
 export const MyPage = () => {
+    const cookies = new Cookies();
+
+    getMyPage(cookies.get("accessToken")).then(res => {
+        console.log(res.data);
+    })
+
     return (
         <>
             <Wrapper>

diff --git a/src/pages/Ranking.jsx b/src/pages/Ranking.jsx
@@ -5,85 +5,73 @@ import ThirdCrown from "../asset/imgs/thirdCrown.svg";
 import Candy from "../asset/imgs/candy.svg";
 import RankingIcon from "../asset/imgs/ranking.svg";
 import { getRanking } from "../apis/Ranking";
+import { useEffect, useState } from "react";
 
 export const Ranking = () => {
+    const [rankingData, setRankingData] = useState(undefined);
+
+    useEffect(() => {
+        getRanking().then(res => {
+            const { data } = res;
+            setRankingData(data);
+        })
+    }, []);
 
     getRanking().then(res => {
         const rankingData = res.data;
-
-        console.log(rankingData)
-
+        console.log(rankingData);
     })
+
     return (
         <>
             <GlobalStyle />
             <Wrapper>
                 <Box1>
                     <ClassInfo1>
-                        <SecondWrapper>
-                            <Img src={SilverCrown}></Img>
-                            <ClassNumber>1-8</ClassNumber>
-                            <CandyWrapper>
-                                <Icon src={Candy}></Icon>
-                                <CandyNumber>500개</CandyNumber>
-                            </CandyWrapper>
-                        </SecondWrapper>
-                        <FirstWrapper>
-                            <Img src={GoldCrown}></Img>
-                            <ClassNumber>1-2</ClassNumber>
-                            <CandyWrapper>
-                                <Icon src={Candy}></Icon>
-                                <CandyNumber>500개</CandyNumber>
-                            </CandyWrapper>
-                        </FirstWrapper>
-                        <ThirdWrapper>
-                            <Img src={ThirdCrown}></Img>
-                            <ClassNumber>1-8</ClassNumber>
-                            <CandyWrapper>
-                                <Icon src={Candy}></Icon>
-                                <CandyNumber>500개</CandyNumber>
-                            </CandyWrapper>
-                        </ThirdWrapper>
+                        {
+                            rankingData && <>
+                                <SecondWrapper>
+                                    <Img src={SilverCrown}></Img>
+                                    <ClassNumber>{rankingData[1].grade}-{rankingData[1].classNumber}</ClassNumber>
+                                    <CandyWrapper>
+                                        <Icon src={Candy}></Icon>
+                                        <CandyNumber>{rankingData[1].candyCount}개</CandyNumber>
+                                    </CandyWrapper>
+                                </SecondWrapper>
+                                <FirstWrapper>
+                                    <Img src={GoldCrown}></Img>
+                                    <ClassNumber>{rankingData[0].grade}-{rankingData[0].classNumber}</ClassNumber>
+                                    <CandyWrapper>
+                                        <Icon src={Candy}></Icon>
+                                        <CandyNumber>{rankingData[0].candyCount}개</CandyNumber>
+                                    </CandyWrapper>
+                                </FirstWrapper>
+                                <ThirdWrapper>
+                                    <Img src={ThirdCrown}></Img>
+                                    <ClassNumber>{rankingData[2].grade}-{rankingData[2].classNumber}</ClassNumber>
+                                    <CandyWrapper>
+                                        <Icon src={Candy}></Icon>
+                                        <CandyNumber>{rankingData[2].candyCount}개</CandyNumber>
+                                    </CandyWrapper>
+                                </ThirdWrapper>
+                            </>
+                        }
                     </ClassInfo1>
                 </Box1>
                 <Box2>
                     <ClassInfo2>
-                        <InfoWrapper>
-                            <RankingImg src={RankingIcon}></RankingImg>
-                            <OtherNumbers>1학년 7반</OtherNumbers>
-                            <CandyImg src={Candy}></CandyImg>
-                            <CandyNumbers>사탕  - 90개</CandyNumbers>
-                        </InfoWrapper>
-                        <InfoWrapper>
-                            <RankingImg src={RankingIcon}></RankingImg>
-                            <OtherNumbers>1학년 7반</OtherNumbers>
-                            <CandyImg src={Candy}></CandyImg>
-                            <CandyNumbers>사탕  - 90개</CandyNumbers>
-                        </InfoWrapper>
-                        <InfoWrapper>
-                            <RankingImg src={RankingIcon}></RankingImg>
-                            <OtherNumbers>1학년 7반</OtherNumbers>
-                            <CandyImg src={Candy}></CandyImg>
-                            <CandyNumbers>사탕  - 90개</CandyNumbers>
-                        </InfoWrapper>
-                        <InfoWrapper>
-                            <RankingImg src={RankingIcon}></RankingImg>
-                            <OtherNumbers>1학년 7반</OtherNumbers>
-                            <CandyImg src={Candy}></CandyImg>
-                            <CandyNumbers>사탕  - 90개</CandyNumbers>
-                        </InfoWrapper>
-                        <InfoWrapper>
-                            <RankingImg src={RankingIcon}></RankingImg>
-                            <OtherNumbers>1학년 7반</OtherNumbers>
-                            <CandyImg src={Candy}></CandyImg>
-                            <CandyNumbers>사탕  - 90개</CandyNumbers>
-                        </InfoWrapper>
-                        <InfoWrapper>
-                            <RankingImg src={RankingIcon}></RankingImg>
-                            <OtherNumbers>1학년 7반</OtherNumbers>
-                            <CandyImg src={Candy}></CandyImg>
-                            <CandyNumbers>사탕  - 90개</CandyNumbers>
-                        </InfoWrapper>
+                        {rankingData?.map((item, index) => (
+                            <InfoWrapper key={index}>
+                                <div>
+                                    <RankingImg src={RankingIcon}></RankingImg>
+                                    <OtherNumbers>{`${item.grade}학년 ${item.classNumber}반`}</OtherNumbers>
+                                </div>
+                                <div>
+                                    <CandyImg src={Candy}></CandyImg>
+                                    <CandyNumbers>{`사탕 - ${item.candyCount}개`}</CandyNumbers>
+                                </div>
+                            </InfoWrapper>
+                        ))}
                     </ClassInfo2>
                 </Box2>
             </Wrapper>
@@ -94,7 +82,6 @@ export const Ranking = () => {
 const CandyNumbers = styled.div`
     font-weight: bold;
     color: ${({ theme }) => theme.color.darkGray};
-    margin-left: 25px;
     font-size: 20px;
 `;
 
@@ -105,7 +92,6 @@ const CandyImg = styled.img`
 const OtherNumbers = styled.div`
     font-size: 20px;
     font-weight: bold;
-    margin-left: 25px;
 `;
 
 const RankingImg = styled.img`
@@ -114,15 +100,20 @@ const RankingImg = styled.img`
 
 const InfoWrapper = styled.div`
     display: flex;
-    flex-direction: row;
-    justify-content: center;
+    justify-content: space-around;
     align-items: center;
     width: 1100px;
-    height: 77px;
+    padding: 10px 0 10px 0;
+    box-sizing: border-box;
     background-color: white;
     border: 1px solid #d1cfcf;
     border-radius: 100px;
     box-shadow: 2px 4px 2px 0px rgb(0, 0, 0, 0.1);
+    & > div {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
 `;
 
 const CandyNumber = styled.div`
@@ -201,12 +192,12 @@ const GlobalStyle = createGlobalStyle`
 `;
 
 const ClassInfo2 = styled.div`
+    gap: 10px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     justify-content: space-between;
-    height: 600px;
     margin-top: 50px;
 `;
 
@@ -223,7 +214,7 @@ const Box2 = styled.div`
     flex-direction: column;
     width: 1451px;
     margin-left: 85px;
-    height: 800px;
+    padding: 10px;
     background-color: white;
     border-radius: 70px 70px 0px 0px;
 `;
@@ -238,6 +229,7 @@ const Wrapper = styled.div`
     display: flex;
     flex-direction: column;
     margin-top: 150px;
+    height: 100vh;
 `;
 
 

diff --git a/src/pages/SignUp.jsx b/src/pages/SignUp.jsx
@@ -14,7 +14,7 @@ export const SignUp = () => {
     const [data, setData] = useState({
         account_id: '',
         password: '',
-        device_token: ''
+        device_token: 'aa'
     });
     const cookie = new Cookies();
 
@@ -36,16 +36,18 @@ export const SignUp = () => {
         })
     }
 
-    const handleChange = (e) => {
-        setData(prev => { return { ...prev, [e.target.id]: e.target.value } });
-    }
-
-    console.log(data);
-
     const updateButtonState = (newName, newNumber) => {
         setIsButtonDisabled(!(newName && newNumber));
     };
 
+    const handleChange = (e) => {
+        setData(prev => {
+            const newData = { ...prev, [e.target.id]: e.target.value };
+            updateButtonState(newData.account_id, newData.password);
+            return newData;
+        });
+    }
+
     return (
         <Wrapper>
             <Box>
@@ -71,7 +73,7 @@ export const SignUp = () => {
                         />
                     </NumberWrapper>
                 </InputWrapper>
-                <NextBtn theme={theme} disabled={isButtonDisabled} onClick={onClick} >회원가입</NextBtn>
+                <NextBtn theme={theme} disabled={isButtonDisabled} onClick={onClick}>회원가입</NextBtn>
             </Box>
         </Wrapper>
     );
@@ -85,18 +87,22 @@ const NextBtn = styled(Link)`
     width: 250px;
     height: 40px;
     font-size: 17px;
-    background-color: ${({ theme }) => theme.color.strongPink}; opacity: ${({ disabled }) => (disabled ? '60%' : '100%')};
+    background-color: ${({ theme }) => theme.color.strongPink};
+    opacity: ${({ disabled }) => (disabled ? '60%' : '100%')};
     font-weight: bolder;
     color: white;
     border: none;
     border-radius: 5px;
+    pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')}; /* Prevent clicking when disabled */
     &:hover {
         cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-        background-color: ${({ theme }) => theme.color.strongPink}; opacity: ${({ disabled }) => (disabled ? '60%' : '100%')};
+        background-color: ${({ theme }) => theme.color.strongPink};
+        opacity: ${({ disabled }) => (disabled ? '60%' : '100%')};
         transition: 0.3s;
     }
 `;
 
+
 const NumberImg = styled.img`
     width: 19px;
     height: 22px;

diff --git a/src/router/Router.jsx b/src/router/Router.jsx
@@ -4,14 +4,19 @@ import { SignUp } from "../pages/SignUp";
 import { Ranking } from "../pages/Ranking";
 import { MyPage } from "../pages/MyPage";
 import { Layout } from "./Layout";
+import { DetailPage } from "../pages/DetailPage";
+import { BoardPage } from "../pages/BoardPage";
 
 export const Router = () => {
   return <BrowserRouter>
     <Routes>
-      <Route element={<Layout />}> { }
-        <Route path="/template" element={<Template />} />
+      <Route element={<Layout />}>
+        <Route path="/board" element={<BoardPage />} />
+        <Route path="/detail/:id" element={<DetailPage />} />
+        <Route path="/profile" element={<MyPage />} />
+        <Route path="/ranking" element={<Ranking />}></Route>
       </Route>
-      <Route path="/signUp" element={<SignUp />}></Route>
+      <Route path="/signUp" element={<SignUp />} />
     </Routes>
   </BrowserRouter >
 }