diff --git a/src/apis/api/valorant.ts b/src/apis/api/valorant.ts index 89a2004..0852e8f 100644 --- a/src/apis/api/valorant.ts +++ b/src/apis/api/valorant.ts @@ -27,7 +27,7 @@ export const verifyNickname = async (nickname: string) => { */ export const loadHistory = async (agentName: string) => { - await defaultAxios.get(`/api/valorant/user/${agentName}`); + await defaultAxios.get(`/api/valorant/user/${agentName.replace('#', '%23')}`); return null; }; diff --git a/src/pages/battlegrounds/MemberSlot.tsx b/src/pages/battlegrounds/MemberSlot.tsx index e14eb17..949786c 100644 --- a/src/pages/battlegrounds/MemberSlot.tsx +++ b/src/pages/battlegrounds/MemberSlot.tsx @@ -39,6 +39,7 @@ const MemberSlot = ({ name, oauth2Id: MemberOauth2Id }: MemberSlotProps) => { const [memberInfo, setMemberInfo] = React.useState({}); const [isLoading, setIsLoading] = React.useState(true); + const [isFollowed, setIsFollowed] = React.useState(false); // author info const authorTier = tierList.find((aTier) => aTier.value === memberInfo.tier); @@ -201,6 +202,7 @@ const MemberSlot = ({ name, oauth2Id: MemberOauth2Id }: MemberSlotProps) => { severity: 'error', }), ); + setIsFollowed(true); } else { dispatch( snackbarActions.OPEN_SNACKBAR({ @@ -327,7 +329,8 @@ const MemberSlot = ({ name, oauth2Id: MemberOauth2Id }: MemberSlotProps) => { )} - {isInParty(currentCard.memberList, oauth2Id) && + {!isFollowed && + isInParty(currentCard.memberList, oauth2Id) && !isGuest(MemberOauth2Id) && oauth2Id !== MemberOauth2Id && !MemberOauth2Id.startsWith('guest') && ( diff --git a/src/pages/leagueoflegends/MemberSlot.tsx b/src/pages/leagueoflegends/MemberSlot.tsx index d1e4f8d..03d9cc7 100644 --- a/src/pages/leagueoflegends/MemberSlot.tsx +++ b/src/pages/leagueoflegends/MemberSlot.tsx @@ -41,6 +41,7 @@ const MemberSlot = ({ const [memberInfo, setMemberInfo] = React.useState({}); const [isLoading, setIsLoading] = React.useState(true); + const [isFollowed, setIsFollowed] = React.useState(false); // author info const mostLane = positionList.find( @@ -194,6 +195,7 @@ const MemberSlot = ({ severity: 'error', }), ); + setIsFollowed(true); } else { dispatch( snackbarActions.OPEN_SNACKBAR({ @@ -315,7 +317,8 @@ const MemberSlot = ({ )} - {isInParty(currentCard.memberList, oauth2Id) && + {!isFollowed && + isInParty(currentCard.memberList, oauth2Id) && !isGuest(MemberOauth2Id) && oauth2Id !== MemberOauth2Id && ( diff --git a/src/pages/login/AdminLogin.tsx b/src/pages/login/AdminLogin.tsx index 359f7bc..6fcfb6d 100644 --- a/src/pages/login/AdminLogin.tsx +++ b/src/pages/login/AdminLogin.tsx @@ -66,7 +66,6 @@ const AdminLogin = () => { navigate(`/${representative}`); } catch (error: any) { - console.log(error.response); if (error.response.status === 404) { dispatch( snackbarActions.OPEN_SNACKBAR({ diff --git a/src/pages/mypage/Games.tsx b/src/pages/mypage/Games.tsx index 36cdfe2..0f4c003 100644 --- a/src/pages/mypage/Games.tsx +++ b/src/pages/mypage/Games.tsx @@ -13,6 +13,7 @@ import { changeRepresentative } from 'apis/api/user'; import { loadHistory as lolLoadHistory } from 'apis/api/leagueoflegends'; import { getPlatform, loadHistory as pubgLoadHistory } from 'apis/api/pubg'; import { loadHistory as owLoadHistory } from 'apis/api/overwatch'; +import { loadHistory as vlrtLoadHistory } from 'apis/api/valorant'; import { RootState } from 'store'; import { snackbarActions } from 'store/snackbar-slice'; import { userActions } from 'store/user-slice'; @@ -28,7 +29,7 @@ import Nickname from './Games/Nickname'; interface GameFilterProps { selectedGame: string; - setSelectedGame: Dispatch>; + setSelectedGame: Dispatch>; representative: string; } @@ -71,6 +72,8 @@ const GameFilterBar = ({ ); }; +const MemoizedGameFilterBar = React.memo(GameFilterBar); + const GameDataUpdateButton = ({ game }: any) => { const dispatch = useDispatch(); @@ -100,6 +103,11 @@ const GameDataUpdateButton = ({ game }: any) => { dispatch(mypageActions.TOGGLE_REFRESH_OVERWATCH()); } + if (game === 'valorant') { + await vlrtLoadHistory(nickname); + dispatch(mypageActions.TOGGLE_REFRESH_VALORANT()); + } + setIsLoading(false); dispatch( snackbarActions.OPEN_SNACKBAR({ @@ -146,6 +154,7 @@ const ChangeRepresentativeButton = ({ game, representative }: any) => { ); } }; + return ( { overwatchInfo: overwatchData, } = useSelector((state: RootState) => state.mypage); - const [selectedGame, setSelectedGame] = useState(representative); + const [selectedGame, setSelectedGame] = useState(representative); const gameComponents = { lol: , @@ -181,7 +190,7 @@ const Games = () => { return ( <> {/* 게임 필터 바 */} - { +import { GAME_ID } from 'types/games'; + +const Nickname = ({ + name, + game, + isNew, +}: { + name: string; + game: GAME_ID; + isNew: boolean; +}) => { const dispatch = useDispatch(); - const [nickname, setNickname] = useState(name); - const handleNickname = (e: React.ChangeEvent) => { setNickname(e.target.value); }; const [isPosting, setIsPosting] = useState(false); - const [isEdit, setIsEdit] = useState(false); - const [error, setError] = useState(false); useEffect(() => { diff --git a/src/pages/mypage/MyInfo.tsx b/src/pages/mypage/MyInfo.tsx index 6d8bbca..993f525 100644 --- a/src/pages/mypage/MyInfo.tsx +++ b/src/pages/mypage/MyInfo.tsx @@ -22,6 +22,8 @@ const Content = ({ title, content }: ContentProps) => { ); }; +const MemoizedContent = React.memo(Content); + type InfoProps = { title: string; children: JSX.Element | JSX.Element[]; @@ -36,27 +38,38 @@ const Info = ({ title, children }: InfoProps) => { ); }; -const MyInfo = () => { - const { email, created, likeCount, dislikeCount, matchCount } = useSelector( - (state: RootState) => state.mypage, - ); - +const MyInfo = ({ + email, + created, + likeCount, + dislikeCount, + matchCount, +}: { + email: string; + created: string; + likeCount: number; + dislikeCount: number; + matchCount: number; +}) => { return ( <> - - + + - - - + + + ); }; -export default MyInfo; + +const MemoizedMyInfo = React.memo(MyInfo); + +export default MemoizedMyInfo; const Container = styled(MuiBox)(() => ({ width: '100%', diff --git a/src/pages/mypage/RsoCallback.tsx b/src/pages/mypage/RsoCallback.tsx index 487b8dc..f7a62fe 100644 --- a/src/pages/mypage/RsoCallback.tsx +++ b/src/pages/mypage/RsoCallback.tsx @@ -5,9 +5,13 @@ import { connectRSOMypage } from 'apis/api/valorant'; import { changeNickname } from 'apis/api/user'; import { snackbarActions } from 'store/snackbar-slice'; import Linear from 'components/loading/Linear'; +import { useDispatch } from 'react-redux'; +import { userActions } from 'store/user-slice'; const RsoCallback = () => { const navigate = useNavigate(); + const dispatch = useDispatch(); + const params = new URL(document.URL).searchParams; const rsoAccessCode = params.get('code'); @@ -26,6 +30,13 @@ const RsoCallback = () => { await defaultAxios.get(`/api/valorant/user/${gameName}%23${tagLine}`); await changeNickname('valorant', `${gameName}#${tagLine}`); + + dispatch( + userActions.SET_GAMES_WITH_ID({ + id: 'valorant', + value: `${gameName}#${tagLine}`, + }), + ); } catch (error: any) { snackbarActions.OPEN_SNACKBAR({ message: diff --git a/src/pages/mypage/UserInfoContainer.tsx b/src/pages/mypage/UserInfoContainer.tsx index 423fa35..09fffdd 100644 --- a/src/pages/mypage/UserInfoContainer.tsx +++ b/src/pages/mypage/UserInfoContainer.tsx @@ -24,6 +24,10 @@ const UserInfoContainer = () => { (state: RootState) => state.mypage, ); + const { email, created, likeCount, dislikeCount, matchCount } = useSelector( + (state: RootState) => state.mypage, + ); + const [currentMenu, setCurrentMenu] = useState(menuList[0].value); const [title, setTItle] = useState(menuList[0].label); @@ -85,7 +89,15 @@ const UserInfoContainer = () => { { { - myInfo: , + myInfo: ( + + ), games: , follow: , withdrawal: , diff --git a/src/pages/mypage/UserInfoFetcher.tsx b/src/pages/mypage/UserInfoFetcher.tsx index c15051b..f7ac322 100644 --- a/src/pages/mypage/UserInfoFetcher.tsx +++ b/src/pages/mypage/UserInfoFetcher.tsx @@ -38,12 +38,6 @@ const UserInfoFetcher = ({ children }: UserInfoFetcherProps) => { dispatch(mypageActions.SET_LOLINFO({ duoRankInfo, freeRankInfo })); }; - if (games.lol) { - getLolData(); - } - }, [games.lol, refreshLolInfo]); - - useEffect(() => { const getPubgData = async () => { const platform = await getPlatform(games.pubg); const duoInfo = await getPubgPlayerInfo(games.pubg, platform, 'DUO'); @@ -58,22 +52,24 @@ const UserInfoFetcher = ({ children }: UserInfoFetcherProps) => { ); }; - if (games.pubg) { - getPubgData(); - } - }, [games.pubg, refreshPubgInfo]); - - useEffect(() => { const getOverwatchData = async () => { const rankInfo = await getOWPlayerInfo(games.overwatch, 'RANKED'); const normalInfo = await getOWPlayerInfo(games.overwatch, 'NORMAL'); dispatch(mypageActions.SET_OVERWATCHINFO({ rankInfo, normalInfo })); }; + if (games.lol) { + getLolData(); + } + + if (games.pubg) { + getPubgData(); + } + if (games.overwatch) { getOverwatchData(); } - }, [games.overwatch, refreshOverwatchInfo]); + }, [refreshLolInfo, refreshPubgInfo, refreshOverwatchInfo]); return
{children}
; }; diff --git a/src/pages/overwatch/MemberSlot.tsx b/src/pages/overwatch/MemberSlot.tsx index e3dba07..93bdd05 100644 --- a/src/pages/overwatch/MemberSlot.tsx +++ b/src/pages/overwatch/MemberSlot.tsx @@ -55,6 +55,8 @@ const MemberSlot = ({ name, oauth2Id: MemberOauth2Id }: MemberSlotProps) => { mostHero: [], }); const [isLoading, setIsLoading] = React.useState(true); + const [isFollowed, setIsFollowed] = React.useState(false); + // author info const authorNickname = memberInfo.name.split('#')[0]; @@ -184,6 +186,7 @@ const MemberSlot = ({ name, oauth2Id: MemberOauth2Id }: MemberSlotProps) => { severity: 'error', }), ); + setIsFollowed(true); } else { dispatch( snackbarActions.OPEN_SNACKBAR({ @@ -435,7 +438,8 @@ const MemberSlot = ({ name, oauth2Id: MemberOauth2Id }: MemberSlotProps) => {
)} - {isInParty(currentCard.memberList, oauth2Id) && + {!isFollowed && + isInParty(currentCard.memberList, oauth2Id) && !isGuest(MemberOauth2Id) && oauth2Id !== MemberOauth2Id && !MemberOauth2Id.startsWith('guest') && ( diff --git a/src/pages/valorant/Card.tsx b/src/pages/valorant/Card.tsx index cc4d0a4..0c478f0 100644 --- a/src/pages/valorant/Card.tsx +++ b/src/pages/valorant/Card.tsx @@ -68,7 +68,7 @@ const Card = ({ item, expired }: CardProps) => { const authorTier = tierList[item.author.tier]; const totalPlayed = item.author.wins + item.author.losses; - const winRate = Math.round((item.author.wins / totalPlayed) * 100); + const winRate = Math.round((item.author.wins / totalPlayed) * 100) || 0; const maxMember = queueType?.maxMember || 5; const currentMember = item.memberList.length; diff --git a/src/pages/valorant/MemberSlot.tsx b/src/pages/valorant/MemberSlot.tsx index 49d9906..70e34af 100644 --- a/src/pages/valorant/MemberSlot.tsx +++ b/src/pages/valorant/MemberSlot.tsx @@ -41,6 +41,7 @@ const MemberSlot = ({ const [memberInfo, setMemberInfo] = React.useState({}); const [isLoading, setIsLoading] = React.useState(true); + const [isFollowed, setIsFollowed] = React.useState(false); // author info const tier = tierList[memberInfo?.tier]; @@ -147,7 +148,7 @@ const MemberSlot = ({ // 아래 구문은 조금 더 찾아보고 수정할 수 있도록 하겠음. - 6/28 나주엽 // eslint-disable-next-line no-unsafe-optional-chaining const totalPlayed = memberInfo?.wins + memberInfo?.losses; - const winRate = Math.round((memberInfo.wins / totalPlayed) * 100); + const winRate = Math.round((memberInfo.wins / totalPlayed) * 100) || 0; const isAuthor = oauth2Id === currentCard?.oauth2Id; @@ -231,6 +232,7 @@ const MemberSlot = ({ severity: 'error', }), ); + setIsFollowed(true); } else { dispatch( snackbarActions.OPEN_SNACKBAR({ @@ -340,7 +342,8 @@ const MemberSlot = ({ )} - {isInParty(currentCard.memberList, oauth2Id) && + {!isFollowed && + isInParty(currentCard.memberList, oauth2Id) && oauth2Id !== MemberOauth2Id && ( diff --git a/src/pages/valorant/main.tsx b/src/pages/valorant/main.tsx index 527cd80..c089c36 100644 --- a/src/pages/valorant/main.tsx +++ b/src/pages/valorant/main.tsx @@ -91,6 +91,7 @@ const Main = () => { <> {isLogin && } + {!isLogin && } { state.lolInfo = action.payload; @@ -99,6 +104,9 @@ const mypageSlice = createSlice({ TOGGLE_REFRESH_OVERWATCH: (state) => { state.refreshOverwatchInfo = !state.refreshOverwatchInfo; }, + TOGGLE_REFRESH_VALORANT: (state) => { + state.refreshValorantInfo = !state.refreshValorantInfo; + }, }, });