Merge pull request #94 from Learn-and-Give/develop

Release/v1.4.0
Learn-and-Give · Sep 22, 2022 · e3ecdd9 · e3ecdd9
2 parents 0634f25 + 6751e34
commit e3ecdd9
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 52 deletions.
diff --git a/components/challenges/challenge-overview.tsx b/components/challenges/challenge-overview.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import React from "react";
+import React, { useEffect } from "react";
 import styled from "styled-components";
 import useChallengeDetailQuery from "../../hooks/challenge-detail-query";
 import { media } from "../../styles/media";
@@ -9,54 +9,25 @@ interface Props {
 function ChallengeOverview({ challengeId }: Props) {
   const { data: challengeDetail } = useChallengeDetailQuery({ challengeId });
 
-  const getDescription = (
-    university: string,
-    department: string,
-    professorName: string
-  ): { countOfLine: number; description: string } => {
-    const strings = [university, department, professorName, "교수님"];
-    const totalLength = strings.reduce((sum, string) => {
-      return sum + string.length;
-    }, 0);
-    if (window.innerWidth > 600 || totalLength < 25) {
-      return { countOfLine: 1, description: strings.join(" ") };
-    } else {
-      return {
-        countOfLine: 2,
-        description: strings.slice(0, 2).join(" ") + <br /> + professorName,
-      };
-    }
-  };
-
   return (
     <>
       {challengeDetail && (
         <Container
           bgImage={challengeDetail.imageUrl}
           className="w-[1036px] h-[140px] rounded-lg bg-black"
         >
-          <Block
-            countOfLine={
-              getDescription(
-                challengeDetail.university,
-                challengeDetail.department,
-                challengeDetail.professorName
-              ).countOfLine
-            }
-          >
+          <Block>
             <Link href={`/challenges/${challengeId}`}>
               <Title titleLength={challengeDetail.title.length}>
                 {challengeDetail.title} {challengeDetail.chapter}기
               </Title>
             </Link>
             <Description>
-              {
-                getDescription(
-                  challengeDetail.university,
-                  challengeDetail.department,
-                  challengeDetail.professorName
-                ).description
-              }
+              {[
+                challengeDetail.university,
+                challengeDetail.department,
+                challengeDetail.professorName,
+              ].join(" ")}
             </Description>
           </Block>
         </Container>
@@ -71,26 +42,32 @@ const Container = styled.div<{ bgImage: string }>`
   position: relative;
   width: 100%;
   height: 140px;
+
   background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
     url(${(p) => p.bgImage});
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+
   border-radius: 8px;
 
   ${media.medium`
-    width: 100vw;
+    width: 100%;
     height: 130px;
+
     border-radius: 0px;
   `}
 `;
 
-const Block = styled.div<{ countOfLine: number }>`
+const Block = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   padding: 0px;
   gap: 8px;
 
   position: relative;
-  width: 412px;
+  width: 100%;
   height: 63px;
   left: 24px;
   top: 57px;
@@ -99,13 +76,12 @@ const Block = styled.div<{ countOfLine: number }>`
     width: 320px;
     height: 54px;
     left: 20px;
-    top: ${(p: { countOfLine: number }) =>
-      p.countOfLine === 1 ? "56px" : "44px"};
+    top: 56px;
   `}
 `;
 
 const Title = styled.h1<{ titleLength: number }>`
-  width: 412px;
+  width: 100%;
   height: 38px;
 
   font-weight: 600;

diff --git a/components/challenges/containers/progress-container.tsx b/components/challenges/containers/progress-container.tsx
@@ -17,7 +17,7 @@ function ChallengeProgressContainer({ challengeId }: Props) {
     challengeId,
   });
   // 챌린지 미션 성공 또는 실패 횟수를 반환하는 함수이다.
-  const missionCount = (successOrFail: string) => {
+  const missionCount = (status: "SUCCESS" | "FAIL" | "REMAIN") => {
     if (!openWeeks && !challengeDetail) {
       return 0;
     }
@@ -29,9 +29,9 @@ function ChallengeProgressContainer({ challengeId }: Props) {
       (week) => week.status === "UNREADABLE"
     ).length;
 
-    if (successOrFail === "SUCCESS") {
+    if (status === "SUCCESS") {
       return successCount;
-    } else if (successOrFail === "FAIL") {
+    } else if (status === "FAIL") {
       return failCount;
     } else {
       return challengeDetail!.totalWeeks - successCount - failCount;
@@ -74,7 +74,7 @@ function ChallengeProgressContainer({ challengeId }: Props) {
           <Block>
             <h3 className="flex items-center gap-2 text-lg">미션 달성률</h3>
             <ProgressBar
-              completed={missionCount("success")}
+              completed={missionCount("SUCCESS")}
               bgColor="#059669"
               height="28px"
               borderRadius="8px"
@@ -83,8 +83,8 @@ function ChallengeProgressContainer({ challengeId }: Props) {
               labelSize={window.innerWidth > 700 ? "14px" : "12px"}
               animateOnRender
               maxCompleted={challengeDetail.totalWeeks}
-              customLabel={`${missionCount("success")}회 (${Math.floor(
-                (missionCount("success") / openWeeks?.totalWeeks) * 100
+              customLabel={`${missionCount("SUCCESS")}회 (${Math.floor(
+                (missionCount("SUCCESS") / openWeeks?.totalWeeks) * 100
               )}%)`}
               customLabelStyles={{ fontWeight: 400, paddingRight: "10px" }}
             />

diff --git a/components/quizzes/blocks/quiz-list.tsx b/components/quizzes/blocks/quiz-list.tsx
@@ -31,7 +31,7 @@ function QuizList({ challengeId, week, page }: Props) {
     }
   };
   return (
-    <div className="w-full sm:overflow-x-scroll">
+    <div className="w-full overflow-x-scroll">
       <table className="table w-full">
         <thead>
           <tr>

diff --git a/components/quizzes/week/week-filter.tsx b/components/quizzes/week/week-filter.tsx
@@ -89,15 +89,15 @@ function WeekFilter() {
           전체선택
         </span>
       </div>
-      <div className="flex gap-2">
+      <div className="flex flex-wrap gap-2">
         {selected.map((week) => (
-          <div key={week} className="badge badge-primary gap-2">
+          <div key={week} className="gap-2 badge badge-primary">
             <svg
               onClick={() => onWeekClick(week)}
               xmlns="http://www.w3.org/2000/svg"
               fill="none"
               viewBox="0 0 24 24"
-              className="inline-block w-4 h-4 stroke-current cursor-pointer"
+              className="inline-block w-4 h-4 cursor-pointer stroke-current"
             >
               <path
                 strokeLinecap="round"