Merge pull request #71 from Stack-Knowledge/hotfix/scoring

[hotfix] scoring

Author: frorong

packages/api/admin/src/hooks/user/useGetScoringList.ts

@@ -7,11 +7,10 @@ import type { ScoringListType } from 'types';
 import type { UseQueryOptions } from '@tanstack/react-query';
 
 export const useGetScoringList = (
-  pageNumber: number,
   options?: UseQueryOptions<ScoringListType[]>
 ) =>
   useQuery<ScoringListType[]>(
     userQueryKeys.getScoringList(),
-    () => get(userUrl.scoring(pageNumber)),
+    () => get(userUrl.scoring()),
     options
   );

packages/api/common/src/libs/urlController.ts

@@ -18,7 +18,7 @@ export const solveUrl = {
 } as const;
 
 export const userUrl = {
-  scoring: (pageNumber: number) => `/user/scoring/list/${pageNumber}`,
+  scoring: () => `/user/scoring`,
   scoringResult: (solveId: string) => `/user/scoring/${solveId}`,
   solveDetail: (solveId: string) => `/user/scoring/${solveId}`,
 };

packages/common/src/PageContainer/MainPage/index.tsx

@@ -12,7 +12,7 @@ const MainPage: React.FC<MainPageProps> = ({ isClient }) => {
     <S.MainWrapper>
       <Banner />
       <S.MissionAlertText>
-        * 문제는 12:30 ~ 19:30분까지 풀수 있습니다.
+        * 문제는 12:30 ~ 19:30분까지 풀 수 있습니다.
       </S.MissionAlertText>
       <MainContents isClient={isClient} />
     </S.MainWrapper>

packages/common/src/components/Banner/Banner2/index.tsx

@@ -7,7 +7,7 @@ import DocumentIcon from 'common/assets/Banner/DocumentIcon.png';
 const Banner2 = () => (
   <S.BannerWrapper>
     <S.BannerTitleContainer>
-      <S.BannerTitle>상품받고</S.BannerTitle>
+      <S.BannerTitle>상품 받고</S.BannerTitle>
       <S.BannerTitle>시험 점수도 챙기자!!</S.BannerTitle>
     </S.BannerTitleContainer>
     <S.DocumentContainer>

packages/common/src/components/MissionDetailInput /index.tsx

@@ -32,8 +32,8 @@ const MissionDetailInput: React.FC<MissionDetailInputProps> = ({
         <S.MissionDetailInput
           placeholder={
             role === 'admin'
-              ? '문제를 작성해주시기 바랍니다.'
-              : '답변을 작성해주시기 바랍니다.'
+              ? '문제를 작성해 주시기 바랍니다.'
+              : '답변을 작성해 주시기 바랍니다.'
           }
           maxLength={MAXLENGTH}
           value={inputValue}

packages/common/src/components/RankingCard/index.tsx

@@ -6,8 +6,6 @@ import { RankingPropsType } from 'types';
 
 import DefaultProfile from 'common/assets/svg/DefaultProfile.svg';
 
-import Image from 'next/image';
-
 interface RankingCardType extends RankingPropsType {
   rank: number;
 }
@@ -19,13 +17,12 @@ const RankingCard: React.FC<RankingCardType> = ({
 }) => (
   <S.CardWrapper href={'/ranking'} className='medalWrapper'>
     {rank <= 3 && <S.Medal className='medal'>{rank}</S.Medal>}
-    <S.ProfileWrapper>
-      <Image
-        fill
-        alt='profile'
-        src={profileImage ? profileImage : DefaultProfile}
-      />
-    </S.ProfileWrapper>
+    <S.ProfileImage
+      width={90}
+      height={90}
+      alt='profile'
+      src={profileImage ? profileImage : DefaultProfile}
+    />
     <S.UserName>{name}</S.UserName>
     <S.FlexWrapper>
       <S.Point>{cumulatePoint}</S.Point>

packages/common/src/components/RankingCard/style.ts

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 
 import Link from 'next/link';
+import Image from 'next/image';
 
 export const CardWrapper = styled(Link)`
   width: 14rem;
@@ -15,16 +16,8 @@ export const CardWrapper = styled(Link)`
   cursor: pointer;
 `;
 
-export const ProfileWrapper = styled.div`
-  width: 5.625rem;
-  height: 5.625rem;
+export const ProfileImage = styled(Image)`
   border-radius: 50%;
-
-  overflow: hidden;
-  position: relative;
-  img {
-    object-fit: cover;
-  }
 `;
 
 export const UserName = styled.span`

projects/admin/src/components/MissionCarousel/index.tsx

@@ -11,40 +11,60 @@ import { useGetScoringList } from 'api/admin';
 
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
 
 const MissionCarousel = () => {
   const [pageIndex, setPageIndex] = useState(0);
-  const [data, setData] = useState<ScoringListType[] | undefined>([]);
-
-  const { data: newData } = useGetScoringList(pageIndex);
+  const [missionList, setMissionList] = useState<ScoringListType[][]>();
 
+  const { data, isError } = useGetScoringList();
   const { push } = useRouter();
 
   const onCardClick = (solveId: string) => {
     push(`/mission/scoring/${solveId}`);
   };
 
   const moveRight = () => {
-    if (data?.length === 10) setPageIndex((cur) => cur + 1);
+    if (missionList && pageIndex < missionList.length - 1)
+      if (
+        pageIndex !== missionList.length - 2 ||
+        missionList[missionList.length - 1][0]
+      )
+        setPageIndex((prev) => prev + 1);
   };
 
   const moveLeft = () => {
-    if (pageIndex > 0) setPageIndex((cur) => cur - 1);
+    if (pageIndex > 0) setPageIndex((prev) => prev - 1);
   };
 
   useEffect(() => {
-    setData(newData);
-  }, [newData]);
+    const newMissionList: ScoringListType[][] = [];
+    let temp: ScoringListType[] = [];
+    data?.forEach((item, index) => {
+      temp.push(item);
+      if ((index + 1) % 10 === 0) {
+        newMissionList.push(temp);
+        temp = [];
+      }
+    });
+    if (data)
+      newMissionList.push(data.slice(newMissionList.length * 10, data.length));
+    setMissionList(newMissionList);
+  }, [data]);
+
+  if (isError) {
+    toast.error('권한이 없는 사용자입니다.');
+  }
 
   return (
     <>
-      {data?.length != 0 && (
+      {missionList?.length != 0 && missionList && (
         <S.CarouselWrapper>
           <S.PointerWrapper onClick={moveLeft}>
             <VectorIcon direction='left' />
           </S.PointerWrapper>
           <S.ContentWrapper>
-            {data?.map((item, index) => (
+            {missionList[pageIndex]?.map((item, index) => (
               <TaskCard
                 onClick={() => onCardClick(item.solveId)}
                 key={item.solveId + index}

projects/admin/src/components/ShopCarousel/index.tsx

@@ -41,7 +41,11 @@ const ShopCarousel = () => {
 
   const moveRight = () => {
     if (orderedItemList && pageIndex < orderedItemList.length - 1)
-      setPageIndex((prev) => prev + 1);
+      if (
+        pageIndex !== orderedItemList.length - 2 ||
+        orderedItemList[orderedItemList.length - 1][0]
+      )
+        setPageIndex((prev) => prev + 1);
   };
 
   return (

projects/client/src/components/MissionCarousel/index.tsx

@@ -45,7 +45,11 @@ const MissionCarousel = () => {
 
   const moveRight = () => {
     if (missionList && pageIndex < missionList.length - 1)
-      setPageIndex((prev) => prev + 1);
+      if (
+        pageIndex !== missionList.length - 2 ||
+        missionList[missionList.length - 1][0]
+      )
+        setPageIndex((prev) => prev + 1);
   };
 
   return (