Skip to content

Commit d2ddb0b

Browse files
Eunjin03Eunjin03
authored
Merge pull request #18 from XRPL-Hackathon/17-feat-랭킹-페이지-제작
17 feat 랭킹 페이지 제작
2 parents c8298f1 + 894f7ae commit d2ddb0b

9 files changed

Lines changed: 393 additions & 6 deletions

File tree

‎src/assets/image/backArrow.svg‎

Lines changed: 11 additions & 0 deletions
Loading

‎src/assets/image/frontArrow.svg‎

Lines changed: 11 additions & 0 deletions
Loading

‎src/assets/image/info.svg‎

Lines changed: 17 additions & 0 deletions
Loading

‎src/components/NavBar/NavBar.style.ts‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ export const NavBar = styled.div`
4545
align-items: flex-start;
4646
gap: 8px;
4747
flex-shrink: 0;
48+
border-bottom: 2px solid rgba(0, 0, 0, 0);
4849
}
4950
5051
.nav-items a {
@@ -56,8 +57,17 @@ export const NavBar = styled.div`
5657
line-height: 22px; /* 157.143% */
5758
}
5859
59-
.nav-items a:hover {
60-
color: #007bff; /* 호버 시 색상 변화 */
60+
.nav-item:hover {
61+
border-bottom: 2px solid #636ae8;
62+
}
63+
64+
.active {
65+
display: flex;
66+
padding: 24px 23.75px 24px 17.75px;
67+
align-items: flex-start;
68+
gap: 8px;
69+
flex-shrink: 0;
70+
border-bottom: 2px solid #636ae8;
6171
}
6272
6373
.nav-button {

‎src/components/NavBar/NavBar.tsx‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useNavigate } from "react-router-dom";
1+
import { useNavigate, useLocation } from "react-router-dom";
22
import * as S from "@/components/NavBar/NavBar.style";
33
import logo from "@/assets/image/logo.svg";
44
import doc from "@/assets/image/doc.svg";
@@ -9,6 +9,10 @@ import logout from "@/assets/image/logout.svg";
99

1010
const NavBar = () => {
1111
const navigate = useNavigate();
12+
const location = useLocation();
13+
14+
// 특정 경로가 현재 경로와 일치하면 해당 스타일을 적용
15+
const isActive = (path: string) => location.pathname === path;
1216

1317
return (
1418
<S.NavBar>
@@ -17,11 +21,17 @@ const NavBar = () => {
1721
<img src={logo} alt="Logo" onClick={() => navigate("/main")} />
1822
</div>
1923
<div className="nav-items">
20-
<div className="nav-item" onClick={() => navigate("/lank")}>
24+
<div
25+
className={isActive("/lank") ? "active" : "nav-item"}
26+
onClick={() => navigate("/lank")}
27+
>
2128
<img src={lank} alt="Lank" />
2229
<a>랭킹 페이지</a>
2330
</div>
24-
<div className="nav-item" onClick={() => navigate("/fileask")}>
31+
<div
32+
className={isActive("/fileask") ? "active" : "nav-item"}
33+
onClick={() => navigate("/fileask")}
34+
>
2535
<img src={doc} alt="Doc" />
2636
<a>문서 요청하기</a>
2737
</div>

‎src/pages/LankPage/LankPage.style.ts‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import styled from "styled-components";
2+
3+
export const StyledLankPage = styled.div`
4+
display: flex;
5+
align-items: start;
6+
justify-content: center;
7+
height: 100vh;
8+
margin: 40px 16px;
9+
gap: 16px;
10+
`;
11+
12+
export const LankDescription = styled.div`
13+
border-radius: 16px;
14+
border: 1px solid #dee1e6;
15+
background: #fff;
16+
padding: 16px;
17+
display: flex;
18+
flex-direction: column;
19+
align-items: start;
20+
justify-content: center;
21+
22+
.maintitle {
23+
display: flex;
24+
align-items: center;
25+
gap: 8px;
26+
color: #636ae8;
27+
font-family: Inter;
28+
font-size: 20px;
29+
font-style: normal;
30+
font-weight: 600;
31+
line-height: 30px; /* 150% */
32+
margin-bottom: 30px;
33+
margin-left: 16px;
34+
}
35+
36+
.subtitle {
37+
color: #323743;
38+
font-family: Inter;
39+
font-size: 14px;
40+
font-style: normal;
41+
font-weight: 700;
42+
line-height: 22px; /* 157.143% */
43+
}
44+
45+
.description {
46+
color: #323743;
47+
font-family: Inter;
48+
font-size: 14px;
49+
font-style: normal;
50+
font-weight: 400;
51+
line-height: 22px; /* 157.143% */
52+
margin-top: 8px;
53+
margin-left: 16px;
54+
margin-bottom: 30px;
55+
}
56+
`;
57+
58+
export const Lank = styled.div`
59+
border-radius: 16px;
60+
border: 1px solid #dee1e6;
61+
background: #fff;
62+
padding: 25px;
63+
`;

‎src/pages/LankPage/LankPage.tsx‎

Lines changed: 58 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,62 @@
1+
import NavBar from "@/components/NavBar/NavBar";
2+
import * as S from "@/pages/LankPage/LankPage.style";
3+
import info from "@/assets/image/info.svg";
4+
import Table from "@/pages/LankPage/LankTable";
5+
16
const LankPage = () => {
2-
return <h1>LankPage</h1>;
7+
return (
8+
<>
9+
<NavBar />
10+
<S.StyledLankPage>
11+
<S.LankDescription>
12+
<div className="maintitle">
13+
<img src={info} alt="info" />
14+
랭킹 기준과 혜택
15+
</div>
16+
<div className="subtitle">랭킹 등급 기준</div>
17+
<div className="description">
18+
브론즈: 제한 없음 <br />
19+
실버: 500포인트 이상인 상위 40% 유저 <br />
20+
골드: 1000포인트 이상인 상위 10% 유저 <br />
21+
플래티넘: 1500포인트 이상인 상위 3% 유저
22+
</div>
23+
<div className="subtitle">랭킹별 혜택</div>
24+
<div className="description">
25+
브론즈: 없음
26+
<br />
27+
실버: 30 RLUSD, 자료구매시 5% RLUSD 결제, <br />
28+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;자료 요청 수수료 5% 할인
29+
<br />
30+
골드: 120 RLUSD, 자료구매시 10% RLUSD 결제, <br />
31+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;자료 요청 수수료 10% 할인
32+
<br />
33+
플래티넘: 400 RLUSD, 자료구매시 20% RLUSD 결제, <br />
34+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;자료 요청 수수료 15% 할인
35+
</div>
36+
<div className="subtitle">포인트 획득 방식</div>
37+
<div className="description">
38+
자료 업로드: 100 포인트
39+
<br />
40+
파일 다운로드수: 10 포인트
41+
<br />
42+
파일 리뷰 3.5 이상: 50 포인트
43+
<br />
44+
4.5 이상인 리뷰 개수: 20 포인트
45+
<br />
46+
리뷰 작성: 5 포인트
47+
<br />
48+
자료 요청 응답: 50 포인트
49+
<br />
50+
요청글 등록: 10 포인트
51+
<br />
52+
</div>
53+
</S.LankDescription>
54+
<S.Lank>
55+
<Table />
56+
</S.Lank>
57+
</S.StyledLankPage>
58+
</>
59+
);
360
};
461

562
export default LankPage;

‎src/pages/LankPage/LankTable.style.ts‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import styled from "styled-components";
2+
3+
export const LankTable = styled.table`
4+
border-radius: 16px;
5+
border: 1px solid #dee1e6;
6+
background: rgba(0, 0, 0, 0);
7+
width: 55vw;
8+
border-collapse: separate;
9+
text-align: center;
10+
11+
.header {
12+
border-bottom: 1px solid #dee1e6;
13+
background: #fafafb;
14+
padding: 10px;
15+
}
16+
.td {
17+
padding: 10px;
18+
align-items: center;
19+
}
20+
.tr:nth-child(2n + 0) {
21+
border: 0px solid #dee1e6;
22+
background: #fafafb;
23+
}
24+
`;
25+
26+
export const StyledLankPage = styled.div`
27+
display: flex;
28+
align-items: center;
29+
flex-direction: column;
30+
margin: 20px 16px;
31+
gap: 16px;
32+
`;
33+
34+
export const PaginationWrapper = styled.div`
35+
display: flex;
36+
align-items: center;
37+
justify-content: center;
38+
gap: 8px;
39+
margin-top: 15px;
40+
`;
41+
42+
export const PageButton = styled.button<{ active: boolean }>`
43+
padding: 8px 12px;
44+
background-color: ${({ active }) => (active ? "#636ae8" : "#fff")};
45+
color: ${({ active }) => (active ? "#fff" : "#9095A1")};
46+
border-radius: 16px;
47+
border: 1px solid ${({ active }) => (active ? "#636ae8" : "#dee1e6")};
48+
cursor: pointer;
49+
50+
&:hover {
51+
background-color: ${({ active }) => (active ? "#636ae8" : "#f0f0f0")};
52+
border-color: #636ae8; /* hover 시 border 색상 변경 */
53+
}
54+
`;
55+
56+
export const ArrowButton = styled.button`
57+
padding: 8px;
58+
background-color: #fff;
59+
color: #636ae8;
60+
border-radius: 50%;
61+
cursor: pointer;
62+
63+
&:hover {
64+
background-color: #fff; /* 화살표 버튼에는 hover 배경색을 없애거나 투명하게 */
65+
}
66+
`;
67+
68+
export const Ellipsis = styled.span`
69+
color: #636ae8;
70+
`;
71+
72+
export const StyledLankLabel = styled.div<{ rank: string }>`
73+
display: flex;
74+
justify-content: center; /* 수평 가운데 정렬 */
75+
align-items: center; /* 수직 가운데 정렬 */
76+
background-color: ${({ rank }) =>
77+
rank === "브론즈"
78+
? "#FFF5F0"
79+
: rank === "실버"
80+
? "#F4F6FB"
81+
: rank === "골드"
82+
? "#FEF9EE"
83+
: "#EFFCFA"};
84+
color: ${({ rank }) =>
85+
rank === "브론즈"
86+
? "#672700"
87+
: rank === "실버"
88+
? "#263F6D"
89+
: rank === "골드"
90+
? "#98690C"
91+
: "#147567"};
92+
border-radius: 18px;
93+
width: 80px;
94+
font-size: 14px;
95+
text-align: center; /* 텍스트 가운데 정렬 */
96+
width: 100%; /* 셀의 너비 전체를 사용 */
97+
`;

0 commit comments

Comments
 (0)