17 feat 랭킹 페이지 제작

src/components/NavBar/NavBar.style.ts

@@ -45,6 +45,7 @@ export const NavBar = styled.div`
     align-items: flex-start;
     gap: 8px;
     flex-shrink: 0;
+    border-bottom: 2px solid rgba(0, 0, 0, 0);
   }
 
   .nav-items a {
@@ -56,8 +57,17 @@ export const NavBar = styled.div`
     line-height: 22px; /* 157.143% */
   }
 
-  .nav-items a:hover {
-    color: #007bff; /* 호버 시 색상 변화 */
+  .nav-item:hover {
+    border-bottom: 2px solid #636ae8;
+  }
+
+  .active {
+    display: flex;
+    padding: 24px 23.75px 24px 17.75px;
+    align-items: flex-start;
+    gap: 8px;
+    flex-shrink: 0;
+    border-bottom: 2px solid #636ae8;
   }
 
   .nav-button {

src/components/NavBar/NavBar.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import * as S from "@/components/NavBar/NavBar.style";
 import logo from "@/assets/image/logo.svg";
 import doc from "@/assets/image/doc.svg";
@@ -9,6 +9,10 @@ import logout from "@/assets/image/logout.svg";
 
 const NavBar = () => {
   const navigate = useNavigate();
+  const location = useLocation();
+
+  // 특정 경로가 현재 경로와 일치하면 해당 스타일을 적용
+  const isActive = (path: string) => location.pathname === path;
 
   return (
     <S.NavBar>
@@ -17,11 +21,17 @@ const NavBar = () => {
           <img src={logo} alt="Logo" onClick={() => navigate("/main")} />
         </div>
         <div className="nav-items">
-          <div className="nav-item" onClick={() => navigate("/lank")}>
+          <div
+            className={isActive("/lank") ? "active" : "nav-item"}
+            onClick={() => navigate("/lank")}
+          >
             <img src={lank} alt="Lank" />
             <a>랭킹 페이지</a>
           </div>
-          <div className="nav-item" onClick={() => navigate("/fileask")}>
+          <div
+            className={isActive("/fileask") ? "active" : "nav-item"}
+            onClick={() => navigate("/fileask")}
+          >
             <img src={doc} alt="Doc" />
             <a>문서 요청하기</a>
           </div>

src/pages/LankPage/LankPage.style.ts

@@ -0,0 +1,63 @@
+import styled from "styled-components";
+
+export const StyledLankPage = styled.div`
+  display: flex;
+  align-items: start;
+  justify-content: center;
+  height: 100vh;
+  margin: 40px 16px;
+  gap: 16px;
+`;
+
+export const LankDescription = styled.div`
+  border-radius: 16px;
+  border: 1px solid #dee1e6;
+  background: #fff;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  justify-content: center;
+
+  .maintitle {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: #636ae8;
+    font-family: Inter;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 30px; /* 150% */
+    margin-bottom: 30px;
+    margin-left: 16px;
+  }
+
+  .subtitle {
+    color: #323743;
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 22px; /* 157.143% */
+  }
+
+  .description {
+    color: #323743;
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px; /* 157.143% */
+    margin-top: 8px;
+    margin-left: 16px;
+    margin-bottom: 30px;
+  }
+`;
+
+export const Lank = styled.div`
+  border-radius: 16px;
+  border: 1px solid #dee1e6;
+  background: #fff;
+  padding: 25px;
+`;

src/pages/LankPage/LankPage.tsx

@@ -1,5 +1,62 @@
+import NavBar from "@/components/NavBar/NavBar";
+import * as S from "@/pages/LankPage/LankPage.style";
+import info from "@/assets/image/info.svg";
+import Table from "@/pages/LankPage/LankTable";
+
 const LankPage = () => {
-  return <h1>LankPage</h1>;
+  return (
+    <>
+      <NavBar />
+      <S.StyledLankPage>
+        <S.LankDescription>
+          <div className="maintitle">
+            <img src={info} alt="info" />
+            랭킹 기준과 혜택
+          </div>
+          <div className="subtitle">랭킹 등급 기준</div>
+          <div className="description">
+            브론즈: 제한 없음 <br />
+            실버: 500포인트 이상인 상위 40% 유저 <br />
+            골드: 1000포인트 이상인 상위 10% 유저 <br />
+            플래티넘: 1500포인트 이상인 상위 3% 유저
+          </div>
+          <div className="subtitle">랭킹별 혜택</div>
+          <div className="description">
+            브론즈: 없음
+            <br />
+            실버: 30 RLUSD, 자료구매시 5% RLUSD 결제, <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;자료 요청 수수료 5% 할인
+            <br />
+            골드: 120 RLUSD, 자료구매시 10% RLUSD 결제, <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;자료 요청 수수료 10% 할인
+            <br />
+            플래티넘: 400 RLUSD, 자료구매시 20% RLUSD 결제, <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;자료 요청 수수료 15% 할인
+          </div>
+          <div className="subtitle">포인트 획득 방식</div>
+          <div className="description">
+            자료 업로드: 100 포인트
+            <br />
+            파일 다운로드수: 10 포인트
+            <br />
+            파일 리뷰 3.5 이상: 50 포인트
+            <br />
+            4.5 이상인 리뷰 개수: 20 포인트
+            <br />
+            리뷰 작성: 5 포인트
+            <br />
+            자료 요청 응답: 50 포인트
+            <br />
+            요청글 등록: 10 포인트
+            <br />
+          </div>
+        </S.LankDescription>
+        <S.Lank>
+          <Table />
+        </S.Lank>
+      </S.StyledLankPage>
+    </>
+  );
 };
 
 export default LankPage;

src/pages/LankPage/LankTable.style.ts

@@ -0,0 +1,97 @@
+import styled from "styled-components";
+
+export const LankTable = styled.table`
+  border-radius: 16px;
+  border: 1px solid #dee1e6;
+  background: rgba(0, 0, 0, 0);
+  width: 55vw;
+  border-collapse: separate;
+  text-align: center;
+
+  .header {
+    border-bottom: 1px solid #dee1e6;
+    background: #fafafb;
+    padding: 10px;
+  }
+  .td {
+    padding: 10px;
+    align-items: center;
+  }
+  .tr:nth-child(2n + 0) {
+    border: 0px solid #dee1e6;
+    background: #fafafb;
+  }
+`;
+
+export const StyledLankPage = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  margin: 20px 16px;
+  gap: 16px;
+`;
+
+export const PaginationWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 15px;
+`;
+
+export const PageButton = styled.button<{ active: boolean }>`
+  padding: 8px 12px;
+  background-color: ${({ active }) => (active ? "#636ae8" : "#fff")};
+  color: ${({ active }) => (active ? "#fff" : "#9095A1")};
+  border-radius: 16px;
+  border: 1px solid ${({ active }) => (active ? "#636ae8" : "#dee1e6")};
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${({ active }) => (active ? "#636ae8" : "#f0f0f0")};
+    border-color: #636ae8; /* hover 시 border 색상 변경 */
+  }
+`;
+
+export const ArrowButton = styled.button`
+  padding: 8px;
+  background-color: #fff;
+  color: #636ae8;
+  border-radius: 50%;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #fff; /* 화살표 버튼에는 hover 배경색을 없애거나 투명하게 */
+  }
+`;
+
+export const Ellipsis = styled.span`
+  color: #636ae8;
+`;
+
+export const StyledLankLabel = styled.div<{ rank: string }>`
+  display: flex;
+  justify-content: center; /* 수평 가운데 정렬 */
+  align-items: center; /* 수직 가운데 정렬 */
+  background-color: ${({ rank }) =>
+    rank === "브론즈"
+      ? "#FFF5F0"
+      : rank === "실버"
+      ? "#F4F6FB"
+      : rank === "골드"
+      ? "#FEF9EE"
+      : "#EFFCFA"};
+  color: ${({ rank }) =>
+    rank === "브론즈"
+      ? "#672700"
+      : rank === "실버"
+      ? "#263F6D"
+      : rank === "골드"
+      ? "#98690C"
+      : "#147567"};
+  border-radius: 18px;
+  width: 80px;
+  font-size: 14px;
+  text-align: center; /* 텍스트 가운데 정렬 */
+  width: 100%; /* 셀의 너비 전체를 사용 */
+`;