diff --git a/components/PlayerImage.tsx b/components/PlayerImage.tsx index 73692f01a..fd00f051f 100644 --- a/components/PlayerImage.tsx +++ b/components/PlayerImage.tsx @@ -28,6 +28,7 @@ export default function PlayerImage({ quality={`${size}`} unoptimized={imgError} onError={() => setImgError(true)} + priority={true} /> diff --git a/components/main/Section.tsx b/components/main/Section.tsx index 2338aa267..ed58fb7e9 100644 --- a/components/main/Section.tsx +++ b/components/main/Section.tsx @@ -16,7 +16,7 @@ export default function Section({ sectionTitle, path }: SectionProps) { const router = useRouter(); const pathCheck: pathType = { game: , - rank: , + rank: , }; return ( diff --git a/components/mode/modeItems/ModeToggle.tsx b/components/mode/modeItems/ModeToggle.tsx index fe3a5ffe3..8fbea1267 100644 --- a/components/mode/modeItems/ModeToggle.tsx +++ b/components/mode/modeItems/ModeToggle.tsx @@ -2,17 +2,11 @@ import styles from 'styles/mode/ModeToggle.module.scss'; interface ModeToggleProps { id: string; - text: string; checked: boolean; onToggle: () => void; } -export default function ModeToggle({ - id, - text, - checked, - onToggle, -}: ModeToggleProps) { +export default function ModeToggle({ id, checked, onToggle }: ModeToggleProps) { return (
diff --git a/components/mode/modeWraps/RankModeWrap.tsx b/components/mode/modeWraps/RankModeWrap.tsx index 7e4321a02..f6f8c3420 100644 --- a/components/mode/modeWraps/RankModeWrap.tsx +++ b/components/mode/modeWraps/RankModeWrap.tsx @@ -12,14 +12,9 @@ interface RankModeWrapProps { } export default function RankModeWrap({ children, setMode }: RankModeWrapProps) { - const { seasonList, season, seasonDropDownHandler, seasonMode } = - useSeasonDropDown(); - const { onToggle, Mode } = useModeToggle( - seasonMode === 'NORMAL' ? 'NORMAL' : 'RANK' - ); - const [showSeasons, setShowSeasons] = useState( - seasonMode !== 'NORMAL' - ); + const { seasonList, season, seasonDropDownHandler } = useSeasonDropDown(); + const { onToggle, Mode } = useModeToggle('RANK'); + const [showSeasons, setShowSeasons] = useState(true); useEffect(() => { setShowSeasons(Mode === 'RANK'); @@ -32,7 +27,6 @@ export default function RankModeWrap({ children, setMode }: RankModeWrapProps) { {showSeasons && seasonList && ( diff --git a/components/rank/MyRank.tsx b/components/rank/MyRank.tsx index 51db919c3..baa82ee6f 100644 --- a/components/rank/MyRank.tsx +++ b/components/rank/MyRank.tsx @@ -3,27 +3,24 @@ import { myRankState, scrollState } from 'utils/recoil/myRank'; import styles from 'styles/rank/RankList.module.scss'; import { ToggleMode } from 'types/rankTypes'; -export default function MyRank(toggleMode: ToggleMode) { +interface MyRankProp { + toggleMode: ToggleMode; +} + +export default function MyRank(prop: MyRankProp) { + const { toggleMode } = prop; const myRank = useRecoilValue(myRankState); const setIsScroll = useSetRecoilState(scrollState); - const rankType = toggleMode === 'RANK' ? '랭크' : '열정'; + const rankType = toggleMode === 'RANK' ? 'rank' : 'vip'; const isRanked = myRank[toggleMode] === -1 ? 'unrank' : 'RANK'; const content = { unrank: { style: '', - message: [ - `💡 나의 ${ - rankType + (toggleMode === 'RANK' ? '가' : '이') - } 정해지지 않았습니다 💡`, - ], + message: [`My ${rankType}:`, ` 00`], }, RANK: { style: styles.rank, - message: [ - `🚀🚀 나의 ${rankType}`, - ` ${myRank[toggleMode]}위`, - ' 바로가기 🚀🚀', - ], + message: [`My ${rankType}:`, ` ${myRank[toggleMode]}`], }, }; diff --git a/components/rank/RankList.tsx b/components/rank/RankList.tsx index 7b5a0cccf..aeedcea37 100644 --- a/components/rank/RankList.tsx +++ b/components/rank/RankList.tsx @@ -1,22 +1,24 @@ -import { useState } from 'react'; -import { RankUser, NormalUser, Rank, ToggleMode } from 'types/rankTypes'; +import React, { useState, createContext } from 'react'; +import { RankUser, NormalUser, Rank } from 'types/rankTypes'; import RankListMain from './topRank/RankListMain'; import RankListFrame from './RankListFrame'; import RankListItem from './RankListItem'; import useRankList from 'hooks/rank/useRankList'; - +import { ToggleMode } from 'types/rankTypes'; interface RankListProps { toggleMode: ToggleMode; season?: number; isMain?: boolean; } +export const ToggleModeContext = createContext<'RANK' | 'NORMAL'>('RANK'); + export default function RankList({ toggleMode, season, - isMain = false, + isMain, }: RankListProps) { - const seasonMode = 'RANK'; const [rank, setRank] = useState(); + const [ranker, setRanker] = useState(); const [page, setPage] = useState(1); const pageInfo = { currentPage: rank?.currentPage, @@ -29,33 +31,50 @@ export default function RankList({ targetMode !== 'NORMAL' ? 'ranks/single' : 'exp'; const seasonQuery = toggleMode === 'RANK' ? `&season=${season}` : ''; return isMain - ? `/pingpong/${modeQuery(seasonMode)}?page=1&size=3` - : `/pingpong/${modeQuery(toggleMode)}?page=${page}${seasonQuery}`; + ? `/pingpong/${modeQuery(toggleMode)}?page=1&size=3` + : `/pingpong/${modeQuery(toggleMode)}?page=${page}&size=20${seasonQuery}`; + }; + + const makePathRanker = (): string => { + const modeQuery = (targetMode?: string) => + targetMode !== 'NORMAL' ? 'ranks/single' : 'exp'; + const seasonQuery = toggleMode === 'RANK' ? `&season=${season}` : ''; + return isMain + ? `/pingpong/${modeQuery(toggleMode)}?page=1&size=3` + : `/pingpong/${modeQuery(toggleMode)}?page=1&size=3${seasonQuery}`; }; useRankList({ makePath: makePath(), + makePathRanker: makePathRanker(), toggleMode: toggleMode, season: season, setRank: setRank, + setRanker: setRanker, page: page, setPage: setPage, pageInfo: pageInfo, }); - if (isMain) return ; + if (isMain && ranker) { + return ; + } return ( - - {rank?.rankList.map((item: NormalUser | RankUser, index) => ( - - ))} - + +
+ {ranker && } + + {rank?.rankList.map((item: NormalUser | RankUser, index) => ( + + ))} + +
+ ); } @@ -69,7 +88,7 @@ function makeUser(user: NormalUser | RankUser) { const makeInit = (init: number) => (user.rank < 0 ? '-' : init); return { intraId: user.intraId, - rank: makeInit(user.rank), + rank: user.rank, statusMessage: makeStatusMessage(user.statusMessage), point: !isRankModeType(user) ? user.exp : makeInit(user.ppp), level: !isRankModeType(user) ? user.level : null, diff --git a/components/rank/RankListItem.tsx b/components/rank/RankListItem.tsx index 53415669b..9f8b39182 100644 --- a/components/rank/RankListItem.tsx +++ b/components/rank/RankListItem.tsx @@ -6,31 +6,29 @@ import { ToggleMode } from 'types/rankTypes'; interface User { intraId: string; - rank: number | string; + rank: number; statusMessage: string; point: number | string; level: number | null; } interface RankListItemProps { - index: number; user: User; toggleMode: ToggleMode; } -export default function RankListItem({ - index, - user, - toggleMode, -}: RankListItemProps) { +export default function RankListItem({ user, toggleMode }: RankListItemProps) { const { rank, intraId, statusMessage, point, level } = user; const myIntraId = useRecoilValue(userState).intraId; const wrapStyle = { - evenOdd: index % 2 === 0 ? styles.even : styles.odd, topStandard: rank < 4 ? styles.top : styles.standard, + rankItem: { + RANK: styles.Ranking, + NORMAL: styles.Vip, + }, myRankItem: { - rank: intraId === myIntraId && level === null ? styles.myRanking : '', - normal: intraId === myIntraId && level !== null ? styles.myVip : '', + RANK: intraId === myIntraId && level === null ? styles.myRanking : '', + NORMAL: intraId === myIntraId && level !== null ? styles.myVip : '', }, }; @@ -45,8 +43,8 @@ export default function RankListItem({ return (
{rank}
{makeIntraIdLink()}
diff --git a/components/rank/topRank/RankListItemMain.tsx b/components/rank/topRank/RankListItemMain.tsx index 4adb1befb..924817fb9 100644 --- a/components/rank/topRank/RankListItemMain.tsx +++ b/components/rank/topRank/RankListItemMain.tsx @@ -1,35 +1,68 @@ import Link from 'next/link'; +import React, { useContext } from 'react'; import { RankUser, NormalUser } from 'types/rankTypes'; import styles from 'styles/rank/RankListMain.module.scss'; - +import PlayerImage from 'components/PlayerImage'; +import { ToggleModeContext } from '../RankList'; +import { TbQuestionMark } from 'react-icons/tb'; interface RankListItemMainProps { user: NormalUser | RankUser; - isSeasonNormal: boolean; } -export default function RankListItemMain({ - user, - isSeasonNormal, -}: RankListItemMainProps) { - const { rank, intraId, statusMessage } = user; - const messageFiltered = - statusMessage.length > 10 - ? statusMessage.slice(0, 10) + '...' - : statusMessage; +export default function RankListItemMain({ user }: RankListItemMainProps) { + const { rank, intraId, userImageUri } = user; const rankFiltered = rank < 0 ? '-' : rank; - + const toggleMode = useContext(ToggleModeContext); + const renderLink = intraId !== 'intraId'; return (
-
{rankFiltered}
-
- - {intraId} - +
+
+
+ {renderLink ? ( + + + + ) : ( +
+ { + + } +
+ )} + {intraId} +
+
+ {rankFiltered} +
+
-
{messageFiltered}
); } diff --git a/components/rank/topRank/RankListMain.tsx b/components/rank/topRank/RankListMain.tsx index b289a8445..512c827ea 100644 --- a/components/rank/topRank/RankListMain.tsx +++ b/components/rank/topRank/RankListMain.tsx @@ -1,32 +1,63 @@ import { RankUser, NormalUser, Rank } from 'types/rankTypes'; import RankListItemMain from './RankListItemMain'; import styles from 'styles/rank/RankListMain.module.scss'; - +import { useEffect, useState } from 'react'; interface RankListMainProps { rank?: Rank; + isMain: boolean; } -export default function RankListMain({ rank }: RankListMainProps) { - //const isNormalSeason = seasonMode === 'normal'; - const isNormalSeason = false; - const content = { - normal: { style: styles.normal, title: 'VIP' }, - rank: { style: '', title: 'Champion' }, - both: { style: '', title: 'Champion' }, - }; +export default function RankListMain({ rank, isMain }: RankListMainProps) { + const [rankList, setRankList] = useState([]); + + useEffect(() => { + if (rank?.rankList.length === 3) { + setRankList(rank.rankList); + } else if (rank?.rankList.length === 2) { + dummyRankList[0] = rank.rankList[0]; + dummyRankList[1] = rank.rankList[1]; + setRankList(dummyRankList); + } else { + setRankList(dummyRankList); + } + }, [rank]); + + const bangElements = Array.from({ length: 5 }, (_, index) => ( +
+ )); return ( -
-
- {content.rank.title} +
+
{bangElements}
+
+ {rankList.map((item: NormalUser | RankUser) => ( + + ))}
- {rank?.rankList.map((item: NormalUser | RankUser) => ( - - ))}
); } + +const dummyRankList: RankUser[] | NormalUser[] = [ + { + rank: 2, + intraId: 'intraId', + statusMessage: 'Hi', + ppp: 100, + userImageUri: '', + }, + { + rank: 1, + intraId: 'intraId', + statusMessage: 'Hi', + ppp: 90, + userImageUri: '', + }, + { + rank: 3, + intraId: 'intraId', + statusMessage: 'Hi', + ppp: 80, + userImageUri: '', + }, +]; diff --git a/hooks/rank/useRankList.ts b/hooks/rank/useRankList.ts index e37234c2a..a1ffbaa52 100644 --- a/hooks/rank/useRankList.ts +++ b/hooks/rank/useRankList.ts @@ -6,9 +6,11 @@ import { myRankState, scrollState } from 'utils/recoil/myRank'; import { MyRank, ToggleMode } from 'types/rankTypes'; interface useRankListProps { makePath: string; + makePathRanker: string; toggleMode: ToggleMode; season: number | undefined; setRank: Dispatch>; + setRanker: Dispatch>; page: number; setPage: Dispatch>; pageInfo: { @@ -20,9 +22,11 @@ interface useRankListProps { const useRankList = ({ makePath, + makePathRanker, toggleMode, season, setRank, + setRanker, page, setPage, pageInfo, @@ -40,15 +44,32 @@ const useRankList = ({ type: 'setError', }); + const getRankerDataHandler = useAxiosGet({ + url: makePathRanker, + setState: (data) => { + [data.rankList[0], data.rankList[1]] = [ + data.rankList[1], + data.rankList[0], + ]; + setRanker(data); + setMyRank((prev) => ({ ...prev, [toggleMode]: data.myRank })); + }, + err: 'DK01', + type: 'setError', + }); + + useEffect(() => { + getRankerDataHandler(); + }, [page, season, toggleMode]); + useEffect(() => { async function waitRankList() { await getRankDataHandler(); } - waitRankList().then(() => { if (isScroll) { window.scrollTo({ - top: ((myRank[toggleMode] - 1) % 20) * 45, + top: ((myRank[toggleMode] - 1) % 20) * 60, behavior: 'smooth', }); setIsScroll(false); diff --git a/package-lock.json b/package-lock.json index 55c3b4cdb..53ad745c2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3512,6 +3512,36 @@ "glob": "7.1.7" } }, + "node_modules/@next/swc-android-arm-eabi": { + "version": "13.2.4", + "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.2.4.tgz", + "integrity": "sha512-DWlalTSkLjDU11MY11jg17O1gGQzpRccM9Oes2yTqj2DpHndajrXHGxj9HGtJ+idq2k7ImUdJVWS2h2l/EDJOw==", + "cpu": [ + "arm" + ], + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-android-arm64": { + "version": "13.2.4", + "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-13.2.4.tgz", + "integrity": "sha512-sRavmUImUCf332Gy+PjIfLkMhiRX1Ez4SI+3vFDRs1N5eXp+uNzjFUK/oLMMOzk6KFSkbiK/3Wt8+dHQR/flNg==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 10" + } + }, "node_modules/@next/swc-darwin-arm64": { "version": "13.2.4", "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.2.4.tgz", @@ -3527,6 +3557,156 @@ "node": ">= 10" } }, + "node_modules/@next/swc-darwin-x64": { + "version": "13.2.4", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.2.4.tgz", + "integrity": "sha512-a6LBuoYGcFOPGd4o8TPo7wmv5FnMr+Prz+vYHopEDuhDoMSHOnC+v+Ab4D7F0NMZkvQjEJQdJS3rqgFhlZmKlw==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-freebsd-x64": { + "version": "13.2.4", + "resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.2.4.tgz", + "integrity": "sha512-kkbzKVZGPaXRBPisoAQkh3xh22r+TD+5HwoC5bOkALraJ0dsOQgSMAvzMXKsN3tMzJUPS0tjtRf1cTzrQ0I5vQ==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm-gnueabihf": { + "version": "13.2.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.2.4.tgz", + "integrity": "sha512-7qA1++UY0fjprqtjBZaOA6cas/7GekpjVsZn/0uHvquuITFCdKGFCsKNBx3S0Rpxmx6WYo0GcmhNRM9ru08BGg==", + "cpu": [ + "arm" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-gnu": { + "version": "13.2.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.2.4.tgz", + "integrity": "sha512-xzYZdAeq883MwXgcwc72hqo/F/dwUxCukpDOkx/j1HTq/J0wJthMGjinN9wH5bPR98Mfeh1MZJ91WWPnZOedOg==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-musl": { + "version": "13.2.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.2.4.tgz", + "integrity": "sha512-8rXr3WfmqSiYkb71qzuDP6I6R2T2tpkmf83elDN8z783N9nvTJf2E7eLx86wu2OJCi4T05nuxCsh4IOU3LQ5xw==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-x64-gnu": { + "version": "13.2.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.2.4.tgz", + "integrity": "sha512-Ngxh51zGSlYJ4EfpKG4LI6WfquulNdtmHg1yuOYlaAr33KyPJp4HeN/tivBnAHcZkoNy0hh/SbwDyCnz5PFJQQ==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-x64-musl": { + "version": "13.2.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.2.4.tgz", + "integrity": "sha512-gOvwIYoSxd+j14LOcvJr+ekd9fwYT1RyMAHOp7znA10+l40wkFiMONPLWiZuHxfRk+Dy7YdNdDh3ImumvL6VwA==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-arm64-msvc": { + "version": "13.2.4", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.2.4.tgz", + "integrity": "sha512-q3NJzcfClgBm4HvdcnoEncmztxrA5GXqKeiZ/hADvC56pwNALt3ngDC6t6qr1YW9V/EPDxCYeaX4zYxHciW4Dw==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-ia32-msvc": { + "version": "13.2.4", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.2.4.tgz", + "integrity": "sha512-/eZ5ncmHUYtD2fc6EUmAIZlAJnVT2YmxDsKs1Ourx0ttTtvtma/WKlMV5NoUsyOez0f9ExLyOpeCoz5aj+MPXw==", + "cpu": [ + "ia32" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-x64-msvc": { + "version": "13.2.4", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.2.4.tgz", + "integrity": "sha512-0MffFmyv7tBLlji01qc0IaPP/LVExzvj7/R5x1Jph1bTAIj4Vu81yFQWHHQAP6r4ff9Ukj1mBK6MDNVXm7Tcvw==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", diff --git a/pages/rank.tsx b/pages/rank.tsx index afe220551..20cb685e6 100644 --- a/pages/rank.tsx +++ b/pages/rank.tsx @@ -11,7 +11,6 @@ export default function Rank() { RANK: { style: '', title: 'Ranking' }, NORMAL: { style: styles.vip, title: 'VIP' }, }; - return (

diff --git a/stories/rank/ranklisttrophy.stories.tsx b/stories/rank/ranklisttrophy.stories.tsx new file mode 100644 index 000000000..57a3ff73d --- /dev/null +++ b/stories/rank/ranklisttrophy.stories.tsx @@ -0,0 +1,51 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import RankListMain, { + RankListMainProps, +} from 'components/rank/topRank/RankListMain'; + +const meta: Meta = { + title: 'RANK/RanklistMain', + component: RankListMain, + tags: ['autodocs'], + argTypes: {}, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + rank: { + myRank: 150, + currentPage: 1, + totalPage: 20, + rankList: [], + }, + }, +}; + +export const NonDataRanker: Story = { + args: { + rank: { + myRank: 150, + currentPage: 1, + totalPage: 20, + rankList: [ + { + rank: 2, + intraId: 'user1', + statusMessage: 'Hello', + ppp: 100, + userImageUri: 'image1.png', + }, + { + rank: 1, + intraId: 'user2', + statusMessage: 'Hi', + ppp: 90, + userImageUri: 'image2.png', + }, + ], + }, + }, +}; diff --git a/styles/Layout/Layout.module.scss b/styles/Layout/Layout.module.scss index 3990db990..5f6138dc6 100644 --- a/styles/Layout/Layout.module.scss +++ b/styles/Layout/Layout.module.scss @@ -25,7 +25,7 @@ } .buttonContainer { - z-index: 2; + z-index: 3; position: sticky; top: 83%; margin-left: 75%; diff --git a/styles/PlayerImage.module.scss b/styles/PlayerImage.module.scss index 9dae61f50..8eb174190 100644 --- a/styles/PlayerImage.module.scss +++ b/styles/PlayerImage.module.scss @@ -102,3 +102,31 @@ @include userImage(4.7rem); } } + +.ranktropybig { + @include imageWrap; + div { + @include userRankImage(6.5rem); + cursor: pointer; + } +} +.ranktropy { + @include imageWrap; + div { + @include userRankImage(4.5rem); + cursor: pointer; + } +} + +@media (max-width: 467px) { + .ranktropy { + div { + @include userRankImage(4rem); + } + } + .ranktropybig { + div { + @include userRankImage(5rem); + } + } +} diff --git a/styles/common.scss b/styles/common.scss index 5966ba0b8..279efa82a 100644 --- a/styles/common.scss +++ b/styles/common.scss @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css2?family=Life+Savers&display=swap'); + /* font-size */ $giant-giant-font: 2.4rem; $giant-big-font: 2.1rem; @@ -20,12 +22,17 @@ $pp-blue: #471df0; $pp-gray: #7a6e7b; $rank-red: #de1825; +$rank-purple: #b24bf1; +$rank-hotpink: #ff7ac2; $rank-pink: #ffc5c8; +$rank-pink2: #feede3; +$rank-pink3: #ffc0d3; $rank-blue: #471df0; $norm-hotpink: #dc3789; $norm-lightblue: #5acfe8; $norm-lightblue2: #1ea1c8; +$norm-purple: #b24bf1; $norm-emerald: #cef1d0; $light-gray: #f0f0f0; @@ -109,8 +116,6 @@ $text-shadow-blue: 2px 2px 0px $pp-blue; @mixin pageTitle { color: white; font-family: $title-font; - font-size: 1.625rem; - margin-bottom: 1rem; } @mixin modalTitle { @@ -236,6 +241,16 @@ $text-shadow-blue: 2px 2px 0px $pp-blue; } } +@mixin userRankImage($size) { + position: relative; + width: $size; + height: $size; + border-radius: 50%; + img { + border-radius: 50%; + } +} + @keyframes upDown { 0%, 40%, diff --git a/styles/main/SearchBar.module.scss b/styles/main/SearchBar.module.scss index cb7080b09..87e193219 100644 --- a/styles/main/SearchBar.module.scss +++ b/styles/main/SearchBar.module.scss @@ -5,6 +5,7 @@ justify-content: space-between; align-items: center; position: relative; + z-index: 2; height: 2.5rem; margin: 1rem 0.8rem 0; padding: 0.8rem 1rem; diff --git a/styles/main/Section.module.scss b/styles/main/Section.module.scss index f6539e29a..a4e06effa 100644 --- a/styles/main/Section.module.scss +++ b/styles/main/Section.module.scss @@ -1,6 +1,8 @@ // @import 'styles/common.scss'; .sectionWrap { + position: relative; + z-index: 1; margin-top: 2.5rem; > .titleWrap { display: flex; diff --git a/styles/mode/ModeToggle.module.scss b/styles/mode/ModeToggle.module.scss index 43ff70e9b..5c17c904d 100644 --- a/styles/mode/ModeToggle.module.scss +++ b/styles/mode/ModeToggle.module.scss @@ -6,18 +6,10 @@ width: 4rem; height: 1.6rem; border-radius: 2rem; - background: $norm-lightblue2; + background: #7297f4; color: white; box-shadow: 0 0 1rem 3px rgba(0 0 0 / 15%); cursor: pointer; - .toggleText { - position: absolute; - top: 50%; - left: 50%; - font-size: $small-font; - font-weight: 600; - transform: translate(0, -50%); - } } /* 토글 버튼 */ @@ -35,7 +27,7 @@ /* 체크박스가 체크될 시 변경되는 요소 */ .toggle:checked ~ .toggleSwitch { - background: $rank-red; + background: $rank-purple; .toggleText { position: absolute; top: 50%; diff --git a/styles/mode/SeasonDropDown.module.scss b/styles/mode/SeasonDropDown.module.scss index 57c13364a..de57a7b2b 100644 --- a/styles/mode/SeasonDropDown.module.scss +++ b/styles/mode/SeasonDropDown.module.scss @@ -2,17 +2,19 @@ .selectBox { position: relative; - width: 6rem; + z-index: 1; + width: 5rem; height: 1.6rem; border-radius: $mini-radius; font-size: $small-font; background: white; + background: rgba(255, 255, 255, 0.3); } .select { z-index: 1; position: relative; - width: 5rem; + width: 4rem; height: inherit; margin: 0 0.5rem; border: 0 none; diff --git a/styles/rank/RankList.module.scss b/styles/rank/RankList.module.scss index dc8d5d929..0082ca045 100644 --- a/styles/rank/RankList.module.scss +++ b/styles/rank/RankList.module.scss @@ -7,24 +7,22 @@ .title { @include pageTitle; - &.vip { - text-shadow: $text-border-black, 0.3rem 0.3rem 0 $norm-lightblue2; - } } /* MyRank */ .myRank { - width: fit-content; - margin-bottom: 1.7rem; - margin-inline: auto; + position: relative; + z-index: 1; + margin-bottom: 0.5rem; color: white; - font-weight: 600; - font-size: $medium-font; - text-shadow: 0.1rem 0.1rem 0.1rem $rank-blue; - text-align: center; - span:nth-child(2) { - color: $g1-top; - } + opacity: 0.5; + width: fit-content; + font-weight: 700; + font-size: $big-font; + font-family: $title-font; + text-decoration-line: underline; + color: #df98d7; + margin-left: auto; &.rank { cursor: pointer; } @@ -38,36 +36,35 @@ align-items: center; height: 2.5rem; padding: 0 0.2rem; - margin-top: 0.15rem; - border-radius: $big-radius; + margin-top: 0rem; color: $dark-gray; - div:nth-child(2) { - justify-self: start; + &:not(:nth-child(2)) { + margin-top: 0.15rem; } } .container { + position: relative; + z-index: 1; font-size: $small-font; } .division { @include rankGrid; - background: $rank-red; - color: white; - font-weight: 700; + background: #c9a5e6; + color: black; + font-weight: 500; + border-radius: 0.5rem 0.5rem 0 0; &.normal { - background: $norm-lightblue2; + background: #59afdf; } } -/* RankListItem */ .rankItemWrap { @include rankGrid; - &.odd { - background: white; - } - &.even { - background: $gray; + background: #e8d1fc; + &.Vip { + background: #d9e3ff; } &.top { color: $loser-red; @@ -77,15 +74,14 @@ color: $dark-gray; } &.myRanking { - border: 0.07rem solid $rank-red; - background: $g1-bottom; + border: 0.1rem solid #962fea; + background: #c9a5e6; } &.myVip { - border: 0.07rem solid $norm-lightblue2; - background: $norm-emerald; + border: 0.07rem solid #59afdf; + background: #59afdf; } .intraId { - justify-self: start; color: black; font-weight: 700; span { @@ -97,10 +93,13 @@ color: $dark-gray; } .ppp { - justify-self: center; - color: $winner-blue; + color: #6c00d9; font-weight: 600; } + + &.Vip .ppp { + color: #cb0c9f; + } } .level { diff --git a/styles/rank/RankListMain.module.scss b/styles/rank/RankListMain.module.scss index 251a92c5c..bc8778770 100644 --- a/styles/rank/RankListMain.module.scss +++ b/styles/rank/RankListMain.module.scss @@ -1,57 +1,342 @@ @import '../common.scss'; +@import url('https://fonts.googleapis.com/css2?family=Life+Savers&display=swap'); .mainContainer { + position: relative; + top: 1.5rem; font-size: 1.05rem; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + align-items: end; + margin-top: 2rem; + height: 16rem; + &.isMain { + height: 15.5rem; + margin-top: 9.5rem; + } + transform: scale(1.14); +} + +.mainData:nth-child(1) { + position: relative; + right: -1.2rem; + background: linear-gradient( + 180deg, + #ff67d4 16.67%, + #d30399 36.24%, + rgba(49, 18, 79, 0) 83.85% + ); + &.normal { + background: linear-gradient( + 180deg, + #ff96e1 16.67%, + #ff61d3 39.58%, + #0d3299 83.85% + ); + } + height: 15rem; + border-radius: 58px; +} + +.mainData:nth-child(2) { + position: relative; + height: 18rem; + border-radius: 65px; + z-index: 1; + background: linear-gradient( + 179.91deg, + #f8e118 20.95%, + #fe7a00 44.38%, + #884609 76.08%, + #351050 85.99%, + rgba(48, 18, 79, 0) 90.86% + ); + &.normal { + background: linear-gradient( + 179.91deg, + #39db7a 34.61%, + #067741 63.98%, + #0b2d8e 80.37% + ); + } +} + +.mainData:nth-child(3) { + position: relative; + right: 1.2rem; + background: linear-gradient( + 180deg, + #57a4ff 9.9%, + #40798d 36.24%, + rgba(48, 18, 79, 0) 83.86% + ); + &.normal { + background: linear-gradient( + 180deg, + #b6d7ff 9.9%, + #6aaeff 36.24%, + #4076b6 65.1%, + #0e36a3 86.46% + ); + } + height: 15rem; + border-radius: 58px; } -.title { +.bangContainer { display: flex; - justify-content: center; - align-items: center; - height: 2.9rem; - border-radius: $big-radius; - color: white; - font-size: 1.8rem; - font-family: $title-font; - text-shadow: $text-border-black; - letter-spacing: 0.1rem; - background: $rank-red; + justify-content: space-around; + margin-top: -7.5rem; +} + +.bang { + position: relative; + width: 3.5rem; + height: 7rem; + background: linear-gradient( + 180deg, + rgba(44, 16, 74, 0.69) 0%, + #5e3c83 84.38% + ); +} + +.bang:nth-child(1) { + left: 30%; + top: 5rem; + transform: rotate(-47.37deg); + clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 99%); +} + +.bang:nth-child(2) { + left: 20%; + top: 3rem; + clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 99%); +} + +.bang:nth-child(3) { + left: 10%; + top: 5rem; + transform: rotate(47.37deg); + clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 99%); +} + +.bang:nth-child(4) { + right: 0%; + top: 8rem; + transform: rotate(90deg); + clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 99%); +} + +.bang:nth-child(5) { + right: 60%; + top: 8rem; + transform: rotate(-90deg); + clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 99%); +} + +.leaf { + height: 8.4rem; + background: linear-gradient( + 70.48deg, + #693200 28.73%, + #ed9b00 38.5%, + #fede5d 41.72%, + #fffdd2 60.48%, + #b5661d 73.6%, + #5c2f06 76.05% + ); &.normal { - background: $norm-lightblue2; + background: linear-gradient( + 70.48deg, + #21621c 28.73%, + #279d25 38.5%, + #bdfba0 41.72%, + #deffd2 60.48%, + #33b51d 73.6%, + #065c09 76.05% + ); } + border-radius: 65px 65px 100px 0px; } -.mainData { - display: grid; - grid-template-columns: 1.5fr 2.1fr 4fr; - align-items: center; - height: 2.9rem; - margin-top: 0.2rem; - border-radius: $big-radius; - background: $rank-pink; +.leaf1 { + height: 8rem; + background: linear-gradient(180deg, #ffcf55 36.24%, #ff823c 73.96%); &.normal { - background: $norm-emerald; + background: linear-gradient(180deg, #b4ff55 31.48%, #35cd0f 79.34%); } + border-radius: 65px 65px 100px 0px; } -.rankNumber { - color: $rank-red; - font-weight: 700; - text-align: center; +@mixin rankNumber($txt-color, $txt-normalcolor, $top: -3rem, $left: -1rem) { + position: relative; + left: $left; + top: $top; + background: $txt-color; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + &.normal { + background: $txt-normalcolor; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + font-family: 'Life Savers'; + font-weight: 400; + text-align: end; + font-size: 90px; + line-height: 10rem; + line-height: 114px; + letter-spacing: 0.04em; +} + +.rankNumber1 { + @include rankNumber( + linear-gradient( + 180.89deg, + rgba(255, 233, 194, 0.552801) 26.68%, + rgba(202, 165, 69, 0.3) 47.47%, + rgba(255, 209, 91, 0.51) 65.76%, + rgba(155, 117, 19, 0) 84.03% + ), + linear-gradient( + 180.75deg, + #9fff72 20.79%, + #7ecf90 40.34%, + #12aa61 51.48%, + #1a9126 64.98% + ), + 0rem + ); +} + +.rankNumber2 { + @include rankNumber( + linear-gradient( + 180.89deg, + #cb20a5 28.21%, + rgba(194, 74, 168, 0.3) 34.24%, + #930072 51.62%, + #351050 76.19% + ), + linear-gradient( + 180.89deg, + #ff95e1 28.21%, + #bf54c3 44.44%, + #7f48b4 51.62%, + #5840ab 67.12% + ), + -2.6rem + ); +} + +.rankNumber3 { + @include rankNumber( + linear-gradient( + 179.14deg, + #6fb1d0 22.37%, + rgba(80, 123, 137, 0.3) 46.14%, + #3d3285 56.64%, + #411868 68.3% + ), + linear-gradient( + 179.14deg, + #add3ff 29.82%, + #7ab7ff 39.23%, + #4880c4 51.49%, + #2d5dae 62.84% + ) + ); +} + +.questionCircleRank { + display: flex; + justify-content: center; + background-color: #c7b1ee; + border-radius: 50%; } .intraId { - color: black; + display: flex; + flex-direction: column; + align-items: center; + position: relative; + top: -2.5rem; + height: 7.5rem; + color: #5b0539; font-weight: 700; - text-align: left; + text-align: center; span { cursor: pointer; } + &.first { + top: -3rem; + color: #640000; + } + &.last { + color: #001b44; + } } -.statusMessage { - color: $dark-blue; - font-size: $medium-font; - font-weight: 500; - text-align: left; +@media (max-width: 467px) { + .mainData:nth-child(1) { + right: -0.9rem; + height: 12rem; + } + + .mainData:nth-child(2) { + height: 13.5rem; + } + + .mainData:nth-child(3) { + right: 0.9rem; + height: 12rem; + } + + .mainContainer { + margin-top: 1rem; + &.isMain { + height: 11.5rem; + } + } + .bang { + width: 2.5rem; + height: 5rem; + } + + .bang:nth-child(1) { + top: 5.5rem; + } + .bang:nth-child(2) { + top: 3.5rem; + } + .bang:nth-child(3) { + top: 5.5rem; + } + .leaf { + height: 6.4rem; + } + + .leaf1 { + height: 6rem; + } + + .rankNumber1 { + font-size: 70px; + top: -1.6rem; + } + .rankNumber2 { + font-size: 70px; + top: -3rem; + } + .rankNumber3 { + font-size: 70px; + } + .intraId { + top: -2rem; + &.first { + top: -2.5rem; + } + } }