Fix: 사이트 버그 수정

Learn-and-Give · Sep 21, 2022 · d03e83e · d03e83e
1 parent 582f4cd
commit d03e83e
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 23 deletions.
diff --git a/api/quizzes/my-quizzes.ts b/api/quizzes/my-quizzes.ts
@@ -15,5 +15,6 @@ export const fetchMyQuizzes = async ({ challengeId, week }: Props) => {
       week: week ? week : 0,
     },
   });
+
   return data;
 };
diff --git a/components/challenges/containers/progress-container.tsx b/components/challenges/containers/progress-container.tsx
@@ -29,9 +29,9 @@ function ChallengeProgressContainer({ challengeId }: Props) {
       (week) => week.status === "UNREADABLE"
     ).length;
 
-    if (successOrFail === "success") {
+    if (successOrFail === "SUCCESS") {
       return successCount;
-    } else if (successOrFail === "fail") {
+    } else if (successOrFail === "FAIL") {
       return failCount;
     } else {
       return challengeDetail!.totalWeeks - successCount - failCount;

diff --git a/components/layout/header.tsx b/components/layout/header.tsx
@@ -65,7 +65,7 @@ const Container = styled.div`
   background: #ffffff;
   border-bottom: 1px solid #f1f5f9;
 
-  z-index: 10;
+  z-index: 20;
 
   ${media.medium`
     padding: 10px 16px;
@@ -96,11 +96,9 @@ const Navigation = styled.nav`
   padding: 0px;
   gap: 32px;
 
-  width: 280px;
   height: 36px;
 
   ${media.medium`
-    width: 160px;
     gap: 20px;
   `}
 `;
@@ -112,16 +110,10 @@ const Ul = styled.ul`
   padding: 0px;
   gap: 24px;
 
-  width: 168px;
   height: 16px;
-
-  ${media.medium`
-    width: 70px;
-  `}
 `;
 
 const Li = styled.li<{ showInMedium?: boolean }>`
-  width: 76px;
   height: 16px;
 
   font-style: normal;
@@ -143,7 +135,6 @@ const Button = styled.button`
   padding: 10px;
   gap: 10px;
 
-  width: 84px;
   height: 36px;
 
   background: #171717;
@@ -154,7 +145,6 @@ const Button = styled.button`
   line-height: 16px;
 
   ${media.medium`
-    width: 77px;
     font-size: 12px;
   `}
 `;
diff --git a/components/quizzes/blocks/quiz-list.tsx b/components/quizzes/blocks/quiz-list.tsx
@@ -19,7 +19,7 @@ function QuizList({ challengeId, week, page }: Props) {
   });
 
   // page에 따라 퀴즈 상세페이지로 이동하는 href를 설정해주는 함수이다.
-  const getHrefByPage = (quizId: number) => {
+  const getLinkByPage = (quizId: number) => {
     const LINK_HEAD = `/challenges/${challengeId}/quizzes/${quizId}`;
     switch (page) {
       case "MY":
@@ -45,7 +45,7 @@ function QuizList({ challengeId, week, page }: Props) {
         </thead>
         <tbody>
           {quizzes?.map((quiz) => (
-            <Link href={getHrefByPage(quiz.quizId)} key={quiz.quizId}>
+            <Link href={getLinkByPage(quiz.quizId)} key={quiz.quizId}>
               <tr className="cursor-pointer sm:text-sm">
                 <td>{quiz.quizId}</td>
                 <td>{quiz.quizTitle}</td>

diff --git a/hooks/quizzes-query.ts b/hooks/quizzes-query.ts
@@ -17,20 +17,49 @@ export default function useQuizzesQuery({
   page,
   suspense = false,
 }: Props) {
-  const queryKey = [page, challengeId];
+  const queryKey = ["quizzes", page, challengeId];
   let queryFn;
   let queryOptions;
   switch (page) {
     case "READABLE":
       queryFn = () => fetchQuizzes({ challengeId, week: week || "" });
-      queryOptions = { enabled: !!(challengeId && week), suspense };
+      queryOptions = {
+        enabled: !!(challengeId && week),
+        suspense,
+        select: (data: QuizSummary[]) => {
+          const orderData = data.sort(function (a, b) {
+            return +new Date(b.quizCreatedDate) - +new Date(a.quizCreatedDate);
+          });
+          return orderData;
+        },
+      };
+      break;
     case "MY":
       queryFn = () => fetchMyQuizzes({ challengeId });
-      queryOptions = { enabled: !!challengeId, suspense };
+      queryOptions = {
+        enabled: !!challengeId,
+        suspense,
+        select: (data: QuizSummary[]) => {
+          const orderData = data.sort(function (a, b) {
+            return +new Date(b.quizCreatedDate) - +new Date(a.quizCreatedDate);
+          });
+          return orderData;
+        },
+      };
+      break;
     case "LIKED":
       queryFn = () => fetchLikedQuizzes({ challengeId });
-      queryOptions = { enabled: !!challengeId, suspense };
+      queryOptions = {
+        enabled: !!challengeId,
+        suspense,
+        select: (data: QuizSummary[]) => {
+          const orderData = data.sort(function (a, b) {
+            return +new Date(b.quizCreatedDate) - +new Date(a.quizCreatedDate);
+          });
+          return orderData;
+        },
+      };
+      break;
   }
-
   return useQuery<QuizSummary[]>(queryKey, queryFn, queryOptions);
 }
diff --git a/pages/challenges/[cid]/quizzes/my.tsx b/pages/challenges/[cid]/quizzes/my.tsx
@@ -28,7 +28,7 @@ function MyQuizListPage() {
         <>
           <ChallengeOverview challengeId={challengeId} />
           <div className="flex flex-col gap-6 py-5 px-10 bg-white rounded-lg shadow-sm border-[1px] border-gray-300 sm:px-5">
-            <div className="font-semibold">내가 낸 문제</div>
+            <div className="font-semibold">제출한 문제</div>
             <Suspense fallback={<QuizListSkeleton />}>
               <QuizList challengeId={challengeId} page={"MY"} />
             </Suspense>

diff --git a/pages/dashboard/index.tsx b/pages/dashboard/index.tsx
@@ -15,7 +15,7 @@ function Dashboard() {
     }
   );
   return (
-    <div className="flex flex-col gap-10 m-auto py-[80px] px-[200px] sm:py-[88px] sm:px-[12px]">
+    <div className="flex flex-col gap-10 m-auto py-[80px] px-[200px] sm:py-[88px] sm:px-[50px]">
       <div className="text-2xl">내 챌린지</div>
       {myChallenges && <ChallengeList challenges={myChallenges} />}
     </div>

diff --git a/public/sw.js b/public/sw.js
-Original file line number
+Diff line change
@@ Expand Up @@
           week: week ? week : 0,
         },
       });
       return data;
     };