From 96fb4a2012126ef7ab55a9ddd1659c42acce2fc3 Mon Sep 17 00:00:00 2001 From: andyye <63383967+0ev@users.noreply.github.com> Date: Sat, 16 Sep 2023 14:34:49 +0900 Subject: [PATCH 1/7] Add: Leaderboard Page --- src/pages/Event/Event2023FallLeaderboard.tsx | 19 ++++++++++++++++++- src/tools/loadenv.ts | 2 +- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/src/pages/Event/Event2023FallLeaderboard.tsx b/src/pages/Event/Event2023FallLeaderboard.tsx index 572f693d5..066a2f29e 100644 --- a/src/pages/Event/Event2023FallLeaderboard.tsx +++ b/src/pages/Event/Event2023FallLeaderboard.tsx @@ -1,8 +1,24 @@ +import { useState } from "react"; + + + +import useQuery from "hooks/useTaxiAPI"; + + + import AdaptiveDiv from "components/AdaptiveDiv"; import HeaderWithLeftNav from "components/Header/HeaderWithLeftNav"; import Title from "components/Title"; +import WhiteContainer from "components/WhiteContainer"; + + +const LeaderboardItem = () => { + return ; +}; const Event2023FallLeaderboard = () => { + const [leaderboard, setLeaderboard] = useState([]); + const [, leaderboard] = useQuery.get("/reports/searchByUser"); return ( { 리더보드 + ); }; -export default Event2023FallLeaderboard; +export default Event2023FallLeaderboard; \ No newline at end of file diff --git a/src/tools/loadenv.ts b/src/tools/loadenv.ts index 556f0b0ec..1d588984b 100644 --- a/src/tools/loadenv.ts +++ b/src/tools/loadenv.ts @@ -17,7 +17,7 @@ export const kakaoSDKKey = env.REACT_APP_KAKAO_SDK_KEY; // optional export const gaTrackingId = env.REACT_APP_GA_TRACKING_ID; // optional export const firebaseConfig: Nullable = env.REACT_APP_FIREBASE_CONFIG && JSON.parse(env.REACT_APP_FIREBASE_CONFIG); // optional -export const eventMode: Nullable = undefined; // "2023fall"; +export const eventMode: Nullable = "2023fall"; // "2023fall"; // devicet-type 감지 const userAgent = navigator.userAgent.toLowerCase(); From bef1dd088fdcd1787655d8be88b01d207029dd4a Mon Sep 17 00:00:00 2001 From: andyye <63383967+0ev@users.noreply.github.com> Date: Sat, 16 Sep 2023 16:07:25 +0900 Subject: [PATCH 2/7] Add: LeaderboardItem compoenet --- .../useTaxiAPI/{useQuery.tsx => useQuery.ts} | 21 ++- src/pages/Event/Event2023FallLeaderboard.tsx | 139 ++++++++++++++++-- 2 files changed, 140 insertions(+), 20 deletions(-) rename src/hooks/useTaxiAPI/{useQuery.tsx => useQuery.ts} (62%) diff --git a/src/hooks/useTaxiAPI/useQuery.tsx b/src/hooks/useTaxiAPI/useQuery.ts similarity index 62% rename from src/hooks/useTaxiAPI/useQuery.tsx rename to src/hooks/useTaxiAPI/useQuery.ts index 27dadaba7..72a60058c 100644 --- a/src/hooks/useTaxiAPI/useQuery.tsx +++ b/src/hooks/useTaxiAPI/useQuery.ts @@ -5,10 +5,17 @@ import useAxios from "./useAxios"; type Method = "get" | "post"; const wrapUseQuery = - (method: Method) => - (url: string, data?: any, dep?: [any]): [any, any, boolean] => { + (method: Method) => + ( + url: string, + data?: any, + dep?: [any] + ): [any, ResponseType | null, boolean] => { const axios = useAxios(); - const [res, setRes] = useState({}); + const [res, setRes] = useState<{ error: any; data: ResponseType | null }>({ + error: null, + data: null, + }); const [loading, setLoading] = useState(true); const latestReqID = useRef(0); @@ -21,7 +28,7 @@ const wrapUseQuery = data, onSuccess: (res) => { if (isUnmounted || currentReqID !== latestReqID.current) return; - setRes({ error: null, data: res }); + setRes({ error: null, data: res as ResponseType }); setLoading(false); }, onError: (e) => { @@ -39,6 +46,8 @@ const wrapUseQuery = }; export default { - get: wrapUseQuery("get"), - post: wrapUseQuery("post"), + get: (url: string, data?: any, dep?: [any]) => + wrapUseQuery("get")(url, data, dep), + post: (url: string, data?: any, dep?: [any]) => + wrapUseQuery("post")(url, data, dep), }; diff --git a/src/pages/Event/Event2023FallLeaderboard.tsx b/src/pages/Event/Event2023FallLeaderboard.tsx index 066a2f29e..379f472fd 100644 --- a/src/pages/Event/Event2023FallLeaderboard.tsx +++ b/src/pages/Event/Event2023FallLeaderboard.tsx @@ -1,24 +1,131 @@ -import { useState } from "react"; - - - -import useQuery from "hooks/useTaxiAPI"; - - - import AdaptiveDiv from "components/AdaptiveDiv"; import HeaderWithLeftNav from "components/Header/HeaderWithLeftNav"; import Title from "components/Title"; +import ProfileImage from "components/User/ProfileImage"; import WhiteContainer from "components/WhiteContainer"; +import theme from "tools/theme"; -const LeaderboardItem = () => { - return ; +const LeaderboardItem = ({ + index, + name, + profileImageUrl, + ticket1Amount, + ticket2Amount, +}: Leader & { index: number }) => { + return ( + +
+
+ +
+ {name} +
+ +
hello
+ + ); +}; + +type Leader = { + name: string; + profileImageUrl: string; + ticket1Amount: number; + ticket2Amount: number; }; +const testLeaderboard: Leader[] = [ + // 닉네임이 다 좀 이상한데 제가 만든건 아니고 챗지피티가... ㅎㅎ 백 연결되면 뺄 예정이니 남겨주세요 :) + { + name: "바람의노래", + ticket1Amount: 99, + ticket2Amount: 98, + profileImageUrl: "https://via.placeholder.com/150?text=WindSong", + }, + { + name: "빛나는별빛여행자", + ticket1Amount: 97, + ticket2Amount: 96, + profileImageUrl: "https://via.placeholder.com/150?text=ShiningStar", + }, + { + name: "토끼달무희", + ticket1Amount: 95, + ticket2Amount: 94, + profileImageUrl: "https://via.placeholder.com/150?text=RabbitMoon", + }, + { + name: "불꽃춤추는자", + ticket1Amount: 93, + ticket2Amount: 92, + profileImageUrl: "https://via.placeholder.com/150?text=FireDancer", + }, + { + name: "천사의미소", + ticket1Amount: 91, + ticket2Amount: 90, + profileImageUrl: "https://via.placeholder.com/150?text=AngelSmile", + }, + { + name: "물결타는서퍼", + ticket1Amount: 89, + ticket2Amount: 88, + profileImageUrl: "https://via.placeholder.com/150?text=Wavesurfer", + }, + { + name: "구름을걷는자", + ticket1Amount: 87, + ticket2Amount: 86, + profileImageUrl: "https://via.placeholder.com/150?text=Cloudwalker", + }, + { + name: "사과나무아래서", + ticket1Amount: 85, + ticket2Amount: 84, + profileImageUrl: "https://via.placeholder.com/150?text=UnderAppleTree", + }, + { + name: "섬의왕자", + ticket1Amount: 83, + ticket2Amount: 82, + profileImageUrl: "https://via.placeholder.com/150?text=IslandPrince", + }, + { + name: "파도소리", + ticket1Amount: 81, + ticket2Amount: 80, + profileImageUrl: "https://via.placeholder.com/150?text=WaveSound", + }, +]; + const Event2023FallLeaderboard = () => { - const [leaderboard, setLeaderboard] = useState([]); - const [, leaderboard] = useQuery.get("/reports/searchByUser"); + // 백 연결을 기다리는 중... + // const [, leaderboard] = useQuery.get( + // "/events/2023fall/public-notice/leaderboard" + // ); + const leaderboard = testLeaderboard; + return ( { 리더보드 - + + {leaderboard?.map((item, index) => ( + + ))} + ); }; -export default Event2023FallLeaderboard; \ No newline at end of file +export default Event2023FallLeaderboard; From fdd890adf52d8faf445f123346bd0d8fc3cb24eb Mon Sep 17 00:00:00 2001 From: andyye <63383967+0ev@users.noreply.github.com> Date: Sat, 16 Sep 2023 16:55:18 +0900 Subject: [PATCH 3/7] Add: complete draft for leaderboard --- src/components/Title.tsx | 6 +- src/pages/Event/Event2023FallLeaderboard.tsx | 74 +++++++++++++------- src/static/events/2023fallTicketIcon.svg | 3 + 3 files changed, 57 insertions(+), 26 deletions(-) create mode 100644 src/static/events/2023fallTicketIcon.svg diff --git a/src/components/Title.tsx b/src/components/Title.tsx index 284629846..b6fc61582 100644 --- a/src/components/Title.tsx +++ b/src/components/Title.tsx @@ -4,6 +4,7 @@ import theme from "tools/theme"; import AddRoundedIcon from "@mui/icons-material/AddRounded"; import ConfirmationNumberRoundedIcon from "@mui/icons-material/ConfirmationNumberRounded"; +import EmojiEventsRoundedIcon from "@mui/icons-material/EmojiEventsRounded"; import ErrorOutlineRoundedIcon from "@mui/icons-material/ErrorOutlineRounded"; import FavoriteRoundedIocn from "@mui/icons-material/FavoriteRounded"; import FeedRounedIcon from "@mui/icons-material/FeedRounded"; @@ -36,7 +37,8 @@ type IconProps = { | "notice" | "ticket" | "festival" - | "shop"; + | "shop" + | "leaderboard"; }; type TitleProps = { @@ -85,6 +87,8 @@ const Icon = ({ type: icon }: IconProps) => { return ; case "shop": return ; + case "leaderboard": + return ; default: return <>; } diff --git a/src/pages/Event/Event2023FallLeaderboard.tsx b/src/pages/Event/Event2023FallLeaderboard.tsx index 379f472fd..1cbefedcc 100644 --- a/src/pages/Event/Event2023FallLeaderboard.tsx +++ b/src/pages/Event/Event2023FallLeaderboard.tsx @@ -6,6 +6,33 @@ import WhiteContainer from "components/WhiteContainer"; import theme from "tools/theme"; +import { ReactComponent as TicketIcon } from "static/events/2023fallTicketIcon.svg"; + +// const RankIcon = ({}) => {}; + +type ticketAmountProps = { + amount: number; + fill: string; + marginLeft?: string; +}; + +const TicketAmount = ({ amount, fill, marginLeft }: ticketAmountProps) => { + return ( +
+ + {amount} +
+ ); +}; + const LeaderboardItem = ({ index, name, @@ -18,32 +45,31 @@ const LeaderboardItem = ({ css={{ display: "flex", alignItems: "center", - justifyContent: "space-between", padding: "12px 16px", }} >
+ +
+
-
- -
{name}
- -
hello
+ + ); }; @@ -70,7 +96,7 @@ const testLeaderboard: Leader[] = [ profileImageUrl: "https://via.placeholder.com/150?text=ShiningStar", }, { - name: "토끼달무희", + name: "정말_정말_저어엉말_아름다운_선형대수학개론", ticket1Amount: 95, ticket2Amount: 94, profileImageUrl: "https://via.placeholder.com/150?text=RabbitMoon", @@ -124,7 +150,7 @@ const Event2023FallLeaderboard = () => { // const [, leaderboard] = useQuery.get( // "/events/2023fall/public-notice/leaderboard" // ); - const leaderboard = testLeaderboard; + const leaderboard = testLeaderboard; // 백 연결을 기다리는 중... return ( @@ -144,14 +170,12 @@ const Event2023FallLeaderboard = () => { }, ]} /> - + <Title icon="leaderboard" isHeader> 리더보드 - - {leaderboard?.map((item, index) => ( - - ))} - + {leaderboard?.map((item, index) => ( + + ))} ); }; diff --git a/src/static/events/2023fallTicketIcon.svg b/src/static/events/2023fallTicketIcon.svg new file mode 100644 index 000000000..cbcc59574 --- /dev/null +++ b/src/static/events/2023fallTicketIcon.svg @@ -0,0 +1,3 @@ + + + From 8a6480a3ccd5886b4a2dbfed9b05c004cf18e9b6 Mon Sep 17 00:00:00 2001 From: andyye <63383967+0ev@users.noreply.github.com> Date: Sat, 16 Sep 2023 16:57:29 +0900 Subject: [PATCH 4/7] Fix: change eventMode to undefined --- src/tools/loadenv.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tools/loadenv.ts b/src/tools/loadenv.ts index 1d588984b..556f0b0ec 100644 --- a/src/tools/loadenv.ts +++ b/src/tools/loadenv.ts @@ -17,7 +17,7 @@ export const kakaoSDKKey = env.REACT_APP_KAKAO_SDK_KEY; // optional export const gaTrackingId = env.REACT_APP_GA_TRACKING_ID; // optional export const firebaseConfig: Nullable = env.REACT_APP_FIREBASE_CONFIG && JSON.parse(env.REACT_APP_FIREBASE_CONFIG); // optional -export const eventMode: Nullable = "2023fall"; // "2023fall"; +export const eventMode: Nullable = undefined; // "2023fall"; // devicet-type 감지 const userAgent = navigator.userAgent.toLowerCase(); From 3b99f55edadb45fa7054e8d62770d8d72c25d5a4 Mon Sep 17 00:00:00 2001 From: andyye <63383967+0ev@users.noreply.github.com> Date: Wed, 20 Sep 2023 21:59:57 +0900 Subject: [PATCH 5/7] Add: leaderboard --- src/pages/Event/Event2023FallLeaderboard.tsx | 279 ++++++++++++------- src/static/events/2023fallTicketIcon.svg | 3 - src/tools/theme.ts | 6 + src/types/event2023fall.d.ts | 8 + 4 files changed, 193 insertions(+), 103 deletions(-) delete mode 100644 src/static/events/2023fallTicketIcon.svg diff --git a/src/pages/Event/Event2023FallLeaderboard.tsx b/src/pages/Event/Event2023FallLeaderboard.tsx index 1cbefedcc..e3df5369d 100644 --- a/src/pages/Event/Event2023FallLeaderboard.tsx +++ b/src/pages/Event/Event2023FallLeaderboard.tsx @@ -1,3 +1,10 @@ +import { useMemo } from "react"; + +import type { Leader } from "types/event2023fall"; + +import { useValueRecoilState } from "hooks/useFetchRecoilState"; +import useQuery from "hooks/useTaxiAPI"; + import AdaptiveDiv from "components/AdaptiveDiv"; import HeaderWithLeftNav from "components/Header/HeaderWithLeftNav"; import Title from "components/Title"; @@ -6,151 +13,206 @@ import WhiteContainer from "components/WhiteContainer"; import theme from "tools/theme"; -import { ReactComponent as TicketIcon } from "static/events/2023fallTicketIcon.svg"; +import { ReactComponent as Ticket1Icon } from "static/events/2023fallTicket1.svg"; +import { ReactComponent as Ticket2Icon } from "static/events/2023fallTicket2.svg"; -// const RankIcon = ({}) => {}; - -type ticketAmountProps = { - amount: number; - fill: string; - marginLeft?: string; -}; - -const TicketAmount = ({ amount, fill, marginLeft }: ticketAmountProps) => { +const LeaderboardTopBar = () => { return (
- - {amount} + 순위 + 플레이어 + + + 상품 확률
); }; const LeaderboardItem = ({ index, - name, + nickname, profileImageUrl, ticket1Amount, ticket2Amount, -}: Leader & { index: number }) => { + probability, + isMe, +}: Leader & { index: number; isMe: boolean }) => { + const styleContainer = (index: number) => { + switch (index) { + case 0: + return { + color: "#C6B200", + border: "0.5px solid #E4CD00", + background: "#FFEE5A", + boxShadow: "0px 1px 5px 0px #E4CD00", + ...theme.font24, + }; + case 1: + return { + color: "#96BCC6", + border: "0.5px solid #BBD4DA", + background: "#EEF6F8", + boxShadow: "0px 1px 5px 0px #BBD4DA", + ...theme.font24, + }; + case 2: + return { + color: "#CD6830", + border: "0.5px solid #DE8C5D", + background: "#FFC5A4", + boxShadow: "0px 1px 5px 0px #DE8C5D", + ...theme.font24, + }; + case -1: + return { + color: theme.purple_disabled, + background: theme.purple, + boxShadow: theme.shadow, + ...theme.font20, + }; + default: + return { + color: theme.purple_disabled, + background: theme.white, + boxShadow: theme.shadow, + ...theme.font20, + }; + } + }; + + const styleText = (index: number) => { + switch (index) { + case 0: + return "#6B6000"; + case 1: + return "#337182"; + case 2: + return "#9E3800"; + case -1: + return theme.white; + default: + return theme.purple; + } + }; + + const styleTicketText = { + ...theme.font16, + width: "30px", + flexShrink: 0, + textAlign: "center", + } as CSS; + + const realProbability = useMemo( + () => 1 - (1 - probability) ** (ticket1Amount * 1 + ticket2Amount * 5), + [probability, ticket1Amount, ticket2Amount] + ); + return ( + {index + 1}
+ {isMe && ( +
+ 나 +
+ )}
- {name} + {nickname} +
+ + {ticket1Amount || 0} + + {ticket2Amount || 0} +
+ + {Math.trunc(realProbability * 100) || 0} + + .{Math.floor(((realProbability * 100) % 1) * 10)}%
- - ); }; -type Leader = { - name: string; - profileImageUrl: string; - ticket1Amount: number; - ticket2Amount: number; -}; - -const testLeaderboard: Leader[] = [ - // 닉네임이 다 좀 이상한데 제가 만든건 아니고 챗지피티가... ㅎㅎ 백 연결되면 뺄 예정이니 남겨주세요 :) - { - name: "바람의노래", - ticket1Amount: 99, - ticket2Amount: 98, - profileImageUrl: "https://via.placeholder.com/150?text=WindSong", - }, - { - name: "빛나는별빛여행자", - ticket1Amount: 97, - ticket2Amount: 96, - profileImageUrl: "https://via.placeholder.com/150?text=ShiningStar", - }, - { - name: "정말_정말_저어엉말_아름다운_선형대수학개론", - ticket1Amount: 95, - ticket2Amount: 94, - profileImageUrl: "https://via.placeholder.com/150?text=RabbitMoon", - }, - { - name: "불꽃춤추는자", - ticket1Amount: 93, - ticket2Amount: 92, - profileImageUrl: "https://via.placeholder.com/150?text=FireDancer", - }, - { - name: "천사의미소", - ticket1Amount: 91, - ticket2Amount: 90, - profileImageUrl: "https://via.placeholder.com/150?text=AngelSmile", - }, - { - name: "물결타는서퍼", - ticket1Amount: 89, - ticket2Amount: 88, - profileImageUrl: "https://via.placeholder.com/150?text=Wavesurfer", - }, - { - name: "구름을걷는자", - ticket1Amount: 87, - ticket2Amount: 86, - profileImageUrl: "https://via.placeholder.com/150?text=Cloudwalker", - }, - { - name: "사과나무아래서", - ticket1Amount: 85, - ticket2Amount: 84, - profileImageUrl: "https://via.placeholder.com/150?text=UnderAppleTree", - }, - { - name: "섬의왕자", - ticket1Amount: 83, - ticket2Amount: 82, - profileImageUrl: "https://via.placeholder.com/150?text=IslandPrince", - }, - { - name: "파도소리", - ticket1Amount: 81, - ticket2Amount: 80, - profileImageUrl: "https://via.placeholder.com/150?text=WaveSound", - }, -]; - const Event2023FallLeaderboard = () => { - // 백 연결을 기다리는 중... - // const [, leaderboard] = useQuery.get( - // "/events/2023fall/public-notice/leaderboard" - // ); - const leaderboard = testLeaderboard; // 백 연결을 기다리는 중... + const [, leaderboardResponse] = useQuery.get( + "/events/2023fall/public-notice/leaderboard" + ); + const { ticket1Amount, ticket2Amount } = + useValueRecoilState("event2023FallInfo") || {}; + const { nickname, profileImgUrl } = useValueRecoilState("loginInfo") || {}; return ( @@ -173,9 +235,26 @@ const Event2023FallLeaderboard = () => { 리더보드 - {leaderboard?.map((item, index) => ( - + + {leaderboardResponse?.leaderboard.map((item: Leader, index: number) => ( + ))} + {leaderboardResponse?.rank > 20 && ( + + )} ); }; diff --git a/src/static/events/2023fallTicketIcon.svg b/src/static/events/2023fallTicketIcon.svg deleted file mode 100644 index cbcc59574..000000000 --- a/src/static/events/2023fallTicketIcon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/tools/theme.ts b/src/tools/theme.ts index 19c700eee..b6bba3b05 100644 --- a/src/tools/theme.ts +++ b/src/tools/theme.ts @@ -74,6 +74,12 @@ const theme = { fontWeight: 700, lineHeight: "23px", }, + font24: { + fontSize: 24, + letterSpacing: -0.75, + fontWeight: 900, + lineHeight: "28px", + }, font28: { fontSize: 28, letterSpacing: -1, diff --git a/src/types/event2023fall.d.ts b/src/types/event2023fall.d.ts index b93ea3982..cbd80f8b9 100644 --- a/src/types/event2023fall.d.ts +++ b/src/types/event2023fall.d.ts @@ -40,3 +40,11 @@ export type Transaction = { comment: string; doneat: Date; }; + +export type Leader = { + nickname: string; + profileImageUrl: string; + ticket1Amount: number; + ticket2Amount: number; + probability: number; +}; From 365e4c14513958bb93dd7be13768b748b518a712 Mon Sep 17 00:00:00 2001 From: andyye <63383967+0ev@users.noreply.github.com> Date: Wed, 20 Sep 2023 22:02:57 +0900 Subject: [PATCH 6/7] Fix: change margin bottom --- src/pages/Event/Event2023FallLeaderboard.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/Event/Event2023FallLeaderboard.tsx b/src/pages/Event/Event2023FallLeaderboard.tsx index e3df5369d..15ca6e9ef 100644 --- a/src/pages/Event/Event2023FallLeaderboard.tsx +++ b/src/pages/Event/Event2023FallLeaderboard.tsx @@ -139,6 +139,7 @@ const LeaderboardItem = ({ display: "flex", alignItems: "center", padding: "8px 15px", + marginBottom: "8px", gap: "8px", ...styleContainer(isMe ? -1 : index), }} From 2fa4d81a984197d844285ada20d76b01ba2b39d0 Mon Sep 17 00:00:00 2001 From: 14Kgun Date: Wed, 20 Sep 2023 23:29:43 +0900 Subject: [PATCH 7/7] Refactor: Event2023FallLeaderboard --- src/components/Empty.tsx | 27 +-- src/components/ModalPopup/Body/BodyReport.tsx | 2 +- src/hooks/useTaxiAPI/useQuery.ts | 18 +- src/pages/Event/Event2023FallLeaderboard.tsx | 192 ++++++++++-------- src/pages/Home/RoomList.tsx | 2 +- src/pages/Myroom/R1Myroom.tsx | 4 +- src/pages/Myroom/R2Myroom.jsx | 4 +- src/pages/Search/SideResult.jsx | 4 +- src/tools/theme.ts | 6 - src/types/event2023fall.d.ts | 8 - 10 files changed, 137 insertions(+), 130 deletions(-) diff --git a/src/components/Empty.tsx b/src/components/Empty.tsx index 95e6bf421..c1961c771 100644 --- a/src/components/Empty.tsx +++ b/src/components/Empty.tsx @@ -1,40 +1,41 @@ -import { ReactNode } from "react"; +import { HTMLProps, ReactNode } from "react"; import theme from "tools/theme"; import NotInterestedIcon from "@material-ui/icons/NotInterested"; -type ScreenType = "mobile" | "pc"; - type EmptyProps = { - screen: ScreenType; - children: ReactNode; - marginBottom?: PixelValue; -}; + type: "mobile" | "pc"; + children?: ReactNode; + className?: string; +} & HTMLProps; -const Empty = ({ screen, children, marginBottom }: EmptyProps) => { - const styleCommon: CSS = { +const Empty = ({ type, children, className, ...divProps }: EmptyProps) => { + const styleCommon = { display: "flex", justifyContent: "center", ...theme.font14_bold, color: theme.gray_text, columnGap: "6px", - marginBottom: marginBottom, }; - const styleMobile: CSS = { + const styleMobile = { ...styleCommon, padding: "24px 0", borderRadius: "12px", backgroundColor: theme.gray_background, border: "0.25px solid " + theme.gray_line, }; - const stylePC: CSS = { + const stylePC = { ...styleCommon, padding: "48px 0 26px", }; return ( -
+
{children}
diff --git a/src/components/ModalPopup/Body/BodyReport.tsx b/src/components/ModalPopup/Body/BodyReport.tsx index 7c9c7793f..4cff00b68 100644 --- a/src/components/ModalPopup/Body/BodyReport.tsx +++ b/src/components/ModalPopup/Body/BodyReport.tsx @@ -54,7 +54,7 @@ const ReportList = (props: BodyReportProps) => { }; if (!props.selectedReportHistory?.length) { return ( - + {props.option === "Reporting" ? t("page_report.empty_reported") : t("page_report.empty_received")} diff --git a/src/hooks/useTaxiAPI/useQuery.ts b/src/hooks/useTaxiAPI/useQuery.ts index 72a60058c..7ba9f8959 100644 --- a/src/hooks/useTaxiAPI/useQuery.ts +++ b/src/hooks/useTaxiAPI/useQuery.ts @@ -5,14 +5,10 @@ import useAxios from "./useAxios"; type Method = "get" | "post"; const wrapUseQuery = - (method: Method) => - ( - url: string, - data?: any, - dep?: [any] - ): [any, ResponseType | null, boolean] => { + (method: Method) => + (url: string, data?: any, dep?: [any]): [any, any, boolean] => { const axios = useAxios(); - const [res, setRes] = useState<{ error: any; data: ResponseType | null }>({ + const [res, setRes] = useState<{ error: any; data: any }>({ error: null, data: null, }); @@ -28,7 +24,7 @@ const wrapUseQuery = data, onSuccess: (res) => { if (isUnmounted || currentReqID !== latestReqID.current) return; - setRes({ error: null, data: res as ResponseType }); + setRes({ error: null, data: res }); setLoading(false); }, onError: (e) => { @@ -46,8 +42,6 @@ const wrapUseQuery = }; export default { - get: (url: string, data?: any, dep?: [any]) => - wrapUseQuery("get")(url, data, dep), - post: (url: string, data?: any, dep?: [any]) => - wrapUseQuery("post")(url, data, dep), + get: wrapUseQuery("get"), + post: wrapUseQuery("post"), }; diff --git a/src/pages/Event/Event2023FallLeaderboard.tsx b/src/pages/Event/Event2023FallLeaderboard.tsx index 15ca6e9ef..01ff972ff 100644 --- a/src/pages/Event/Event2023FallLeaderboard.tsx +++ b/src/pages/Event/Event2023FallLeaderboard.tsx @@ -1,11 +1,11 @@ import { useMemo } from "react"; -import type { Leader } from "types/event2023fall"; - import { useValueRecoilState } from "hooks/useFetchRecoilState"; import useQuery from "hooks/useTaxiAPI"; import AdaptiveDiv from "components/AdaptiveDiv"; +import Empty from "components/Empty"; +import Footer from "components/Footer"; import HeaderWithLeftNav from "components/Header/HeaderWithLeftNav"; import Title from "components/Title"; import ProfileImage from "components/User/ProfileImage"; @@ -16,53 +16,62 @@ import theme from "tools/theme"; import { ReactComponent as Ticket1Icon } from "static/events/2023fallTicket1.svg"; import { ReactComponent as Ticket2Icon } from "static/events/2023fallTicket2.svg"; -const LeaderboardTopBar = () => { - return ( -
( +
+ 순위 + 플레이어 + - 순위 - 플레이어 - - - 상품 확률 -
- ); + /> + + 상품 확률 +
+); + +type LeaderboardElem = { + nickname: string; + profileImageUrl: string; + ticket1Amount: number; + ticket2Amount: number; + probability: number; +}; + +type LeaderboardItemProps = { + value: LeaderboardElem; + rank: number; + isMe?: boolean; }; const LeaderboardItem = ({ - index, - nickname, - profileImageUrl, - ticket1Amount, - ticket2Amount, - probability, - isMe, -}: Leader & { index: number; isMe: boolean }) => { + value, + rank, + isMe = false, +}: LeaderboardItemProps) => { const styleContainer = (index: number) => { switch (index) { case 0: @@ -71,7 +80,8 @@ const LeaderboardItem = ({ border: "0.5px solid #E4CD00", background: "#FFEE5A", boxShadow: "0px 1px 5px 0px #E4CD00", - ...theme.font24, + ...theme.font20, + fontSize: "24px", }; case 1: return { @@ -79,7 +89,8 @@ const LeaderboardItem = ({ border: "0.5px solid #BBD4DA", background: "#EEF6F8", boxShadow: "0px 1px 5px 0px #BBD4DA", - ...theme.font24, + ...theme.font20, + fontSize: "24px", }; case 2: return { @@ -87,7 +98,8 @@ const LeaderboardItem = ({ border: "0.5px solid #DE8C5D", background: "#FFC5A4", boxShadow: "0px 1px 5px 0px #DE8C5D", - ...theme.font24, + ...theme.font20, + fontSize: "24px", }; case -1: return { @@ -129,8 +141,11 @@ const LeaderboardItem = ({ } as CSS; const realProbability = useMemo( - () => 1 - (1 - probability) ** (ticket1Amount * 1 + ticket2Amount * 5), - [probability, ticket1Amount, ticket2Amount] + () => + 1 - + (1 - value.probability) ** + (value.ticket1Amount * 1 + value.ticket2Amount * 5), + [value] ); return ( @@ -141,10 +156,10 @@ const LeaderboardItem = ({ padding: "8px 15px", marginBottom: "8px", gap: "8px", - ...styleContainer(isMe ? -1 : index), + ...styleContainer(isMe ? -1 : rank), }} > - {index + 1} + {rank + 1}
- +
{isMe && (
- {nickname} + {value.nickname}
- {ticket1Amount || 0} + {value.ticket1Amount || 0} - {ticket2Amount || 0} + {value.ticket2Amount || 0}
{ - const [, leaderboardResponse] = useQuery.get( + const { leaderboard, rank, probability } = useQuery.get( "/events/2023fall/public-notice/leaderboard" - ); + )[1] || { leaderboard: [], rank: 0 }; const { ticket1Amount, ticket2Amount } = useValueRecoilState("event2023FallInfo") || {}; const { nickname, profileImgUrl } = useValueRecoilState("loginInfo") || {}; + const myLeaderboardInfo = useMemo>(() => { + if (!nickname || !profileImgUrl || !probability) return null; + return { + nickname, + profileImageUrl: profileImgUrl, + ticket1Amount: ticket1Amount || 0, + ticket2Amount: ticket2Amount || 0, + probability, + }; + }, [nickname, profileImgUrl, ticket1Amount, ticket2Amount, probability]); return ( - + <> { }, ]} /> - - 리더보드 - - - {leaderboardResponse?.leaderboard.map((item: Leader, index: number) => ( - - ))} - {leaderboardResponse?.rank > 20 && ( - - )} - + + + 리더보드 + + {leaderboard.length > 0 ? ( + <> + + {leaderboard.map((elem: LeaderboardElem, index: number) => ( + + ))} + {rank > 20 && myLeaderboardInfo && ( + + )} + + ) : ( + 리더보드가 비어있습니다. + )} + +