#57 푸터 랭킹 등록 완료, #69 랭크페이지 뷰 초안

src/components/Footer.jsx

@@ -8,11 +8,16 @@ import footerCommunity from "../assets/headerFooter/footerCommunity.svg";
 import footerCommunityC from "../assets/headerFooter/footerCommunityC.svg";
 import footerMypage from "../assets/headerFooter/footerMypage.svg";
 import footerMypageC from "../assets/headerFooter/footerMypageC.svg";
+import footerRank from "../assets/headerFooter/footerRank.svg"
+import footerRankC from "../assets/headerFooter/footerRankC.svg"
+
 const Footer = () => {
   const navigate = useNavigate();
   const [isListHoverMain, setIsListHoverMain] = useState(false);
   const [isListHoverCommunity, setIsListHoverCommunity] = useState(false);
   const [isListHoverMypage, setIsListHoverMypage] = useState(false);
+  const [isListHoverRank, setIsListHoverRank] = useState(false);
+
 
   const [show, setShow] = useState(false);
   const green = () => {
@@ -52,6 +57,16 @@ const Footer = () => {
       >
         <img src={isListHoverMypage ? footerMypageC : footerMypage} />
       </li>
+
+      <li
+        onMouseOver={() => setIsListHoverRank(true)}
+        onMouseOut={() => setIsListHoverRank(false)}
+        onClick={() => {
+          navigate("/Rank");
+        }}
+      >
+        <img src={isListHoverRank ? footerRankC : footerRank} />
+      </li>
     </StFooterMain>
   );
 };

src/components/ranking/MyRanking.jsx

@@ -0,0 +1,54 @@
+import styled from "styled-components";
+
+function RankBanner() {
+
+    const myRank = "1"
+    const myImg = "data:image/png;base64,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"
+    const myNick = "헬쓰리"
+    const myScore = "33"
+
+    return (
+        <StMyranking>
+            <MyRank >{myRank}</MyRank>
+            <MyProfile>
+                <StImg>
+                    <img style={{ width: "34px", height: "34px" }} src={myImg} />
+                </StImg>
+                {myNick}
+            </MyProfile>
+            <MyScore>{myScore}</MyScore>
+        </StMyranking>
+
+    )
+}
+export default RankBanner
+
+const StMyranking = styled.div`
+width: 340px;
+height: 90px;
+
+font-size: 18px;
+font-weight: bolder;
+display: flex;
+gap: 40px;
+position: fixed;
+bottom: 0; 
+justify-content: center;
+align-items: center;
+box-shadow: 10 10px 10px 10px #9c939376;
+background-color: yellow;
+`;
+const MyRank = styled.div``;
+const StImg = styled.div`
+  /* display: block; */
+  width: 34px;
+  height: 34px;
+  border-radius: 70%;
+  overflow: hidden;
+`;
+const MyProfile = styled.div`
+display:flex;
+align-items:center;
+`;
+
+const MyScore = styled.div``;

src/components/ranking/RankBanner.jsx

@@ -0,0 +1,18 @@
+import styled from "styled-components";
+
+
+function RankBanner() {
+    return (
+        <StBanner>
+            <img style={{ width: "196px", height: "140px" }} src={"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQXk3x0YlelpvZl-Hb5Ro3MJKjx_r06nziC0g&usqp=CAU"} />
+        </StBanner>
+    )
+}
+export default RankBanner
+
+const StBanner = styled.div`
+width:196px;
+height:140px;
+display: block;
+margin: 0 auto;
+`;

src/components/ranking/UserRanking.jsx

@@ -0,0 +1,52 @@
+import styled from "styled-components";
+
+function UserRanking() {
+
+    const userRank = "2"
+    const userImg = "data:image/jpeg;base64,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"
+    const userNick = "르탄이"
+    const userScore = "0"
+
+    return (
+        <StUsersRanking>
+            <UserRank>{userRank}</UserRank>
+
+            <UserProfile>
+                <StImg>
+                    <img style={{ width: "34px", height: "34px" }} src={userImg} />
+                </StImg>
+                {userNick}
+            </UserProfile>
+
+            <UserScore>{userScore}</UserScore>
+        </StUsersRanking>
+    )
+}
+export default UserRanking
+
+const StUsersRanking = styled.div`
+display: flex;
+width: 300px;
+gap: 40px;
+justify-content: center;
+align-items: center;
+
+  overflow-y: scroll;
+  margin: 0 auto;
+  background-color: #fff;
+  position: relative;
+
+`;
+const UserRank = styled.div``;
+const StImg = styled.div`
+  /* display: block; */
+  width: 34px;
+  height: 34px;
+  border-radius: 70%;
+  overflow: hidden;
+`;
+const UserProfile = styled.div`
+display:flex;
+align-items:center;
+`;
+const UserScore = styled.div``;

src/pages/Rank.jsx

@@ -0,0 +1,42 @@
+import styled from "styled-components";
+
+import RankBanner from "../components/ranking/RankBanner";
+import UserRanking from "../components/ranking/UserRanking";
+import MyRanking from "../components/ranking/MyRanking";
+
+
+
+function Rank() {
+
+
+
+    return (
+        <StRanking>
+            <RankBanner/>
+            <UserRanking/>
+            <MyRanking/>
+        </StRanking>
+    );
+};
+
+export default Rank
+
+const StRanking = styled.div`
+width: 340px;
+height: 770px;
+display: flex;
+flex-direction: column;
+
+gap: 20px;
+box-sizing: border-box;
+
+transform: translate(5%, 5%);
+background-color: #11560f;
+overflow-y: scroll;
+`;
+
+
+
+
+
+

src/shared/Router.js

@@ -10,6 +10,7 @@ import Mypage from "../pages/MyPage";
 import Header from "../components/Header";
 import Footer from "../components/Footer";
 import Layout from "../components/Layout";
+import Rank from "../pages/Rank";
 
 const Router = () => {
   return (
@@ -24,6 +25,8 @@ const Router = () => {
           <Route path="/community/detail" element={<CommunityDetail/>} />
           <Route path="/register" element={<Register />} />
           <Route path="/mypage" element={<Mypage />} />
+          <Route path="/rank" element={<Rank />} />
+
         </Routes>
       </Layout>
       <Footer />