Merge pull request #89 from chchaeun/fix/bug

사이트 버그를 수정했습니다.

api/quizzes/liked-quizzes.ts

@@ -0,0 +1,13 @@
+import api from "../my-api";
+import { getCode } from "../session-code";
+
+interface Props {
+  challengeId: string;
+}
+
+export const fetchLikedQuizzes = async ({ challengeId }: Props) => {
+  api.defaults.headers.common["code"] = getCode();
+
+  const { data } = await api.get(`/challenges/${challengeId}/my-good-quizzes`);
+  return data;
+};

api/quizzes/my-quizzes.ts

@@ -15,5 +15,6 @@ export const fetchMyQuizzes = async ({ challengeId, week }: Props) => {
       week: week ? week : 0,
     },
   });
+
   return data;
 };

components/challenges/blocks/mission-completed.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import styled from "styled-components";
+
+function ChallengeMissionCompleted() {
+  return (
+    <div>
+      <Title>주차별 미션</Title>
+    </div>
+  );
+}
+
+export default ChallengeMissionCompleted;
+const Title = styled.h2`
+  width: 100%;
+`;

components/challenges/blocks/open-weeks-list.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import styled from "styled-components";
+import { classNames } from "../../../styles/classname-maker";
+import { media } from "../../../styles/media";
+import { OpenWeeksSelect } from "../../../types/Challenge";
+interface Props {
+  openWeeks: OpenWeeksSelect;
+}
+function OpenWeekList({ openWeeks }: Props) {
+  return (
+    <Block>
+      {openWeeks.weeks.map((week) => (
+        <WeekBox
+          status={week.status}
+          key={week.week}
+          className={classNames(
+            week.status === "CLOSED" || week.status === "UNREADABLE"
+              ? "bg-[#ebebeb]"
+              : "bg-[#b2a4e5] text-white",
+            "flex justify-center items-center w-7 h-7 rounded font-semibold cursor-default"
+          )}
+        >
+          {week.week}
+        </WeekBox>
+      ))}
+    </Block>
+  );
+}
+
+export default OpenWeekList;
+
+const Block = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+
+  width: 100%;
+
+  ${media.medium`
+    display:grid;
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+    gap: 8px;
+  `};
+`;
+
+const WeekBox = styled.span<{
+  status: "READABLE" | "READABLE_CLOSED" | "CLOSED" | "UNREADABLE";
+}>`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0px;
+  gap: 10px;
+
+  width: 42px;
+  height: 40px;
+
+  background: ${(p) =>
+    p.status === "CLOSED"
+      ? "#F3F4F6"
+      : p.status === "UNREADABLE"
+      ? "#FEF2F2"
+      : "#ecfdf5"};
+
+  border-radius: 8px;
+
+  font-size: 16px;
+  color: ${(p) =>
+    p.status === "CLOSED"
+      ? "#374151"
+      : p.status === "UNREADABLE"
+      ? "#EF4444"
+      : "#047857"};
+
+  ${media.medium`
+    width: 32px;
+    height: 32px;
+    
+    border-radius: 6px;
+
+    font-size: 14px;
+  `}
+`;

components/challenges/blocks/quiz-summary.tsx

@@ -0,0 +1,154 @@
+import Link from "next/link";
+import React from "react";
+import styled from "styled-components";
+import useQuizzesQuery from "../../../hooks/quizzes-query";
+
+interface Props {
+  title: string;
+  page: "READABLE" | "MY" | "LIKED";
+  week?: string;
+  challengeId: string;
+}
+function QuizSummary({ title, page, week, challengeId }: Props) {
+  const { data: quizzes } = useQuizzesQuery({ challengeId, page, week });
+
+  const getLinkByPage = (quizId?: number) => {
+    const BASE_LINK = `/challenges/${challengeId}/quizzes`;
+    switch (page) {
+      case "READABLE":
+        return BASE_LINK + `${quizId ? `/${quizId}` : ""}?week=${week}`;
+      case "MY":
+        return BASE_LINK + `${quizId ? `/${quizId}` : ""}/my`;
+      case "LIKED":
+        return BASE_LINK + `${quizId ? `/${quizId}` : ""}/like`;
+    }
+  };
+
+  const getDateFormatted = (createdDate: string) => {
+    const date_object = new Date(createdDate);
+    const month = date_object.toLocaleString("en-US", { month: "short" });
+    const date = date_object.getDate();
+    const year = date_object.getFullYear();
+    const hours = date_object.getHours();
+    const minutes = date_object.getMinutes();
+    return `${month} ${date}, ${year} ${hours}:${minutes}`;
+  };
+
+  return (
+    <Container>
+      <Title> {title}</Title>
+      <ul>
+        {quizzes?.slice(0, 5).map((quiz) => (
+          <Li key={quiz.quizId}>
+            <Link href={getLinkByPage(quiz.quizId)}>
+              <a>{quiz.quizTitle}</a>
+            </Link>
+            <div>
+              <span>{quiz.writerName}</span>
+              <span>{getDateFormatted(quiz.quizCreatedDate)}</span>
+            </div>
+          </Li>
+        ))}
+      </ul>
+      <Link href={getLinkByPage()}>
+        <Button type="button">더보기</Button>
+      </Link>
+    </Container>
+  );
+}
+
+export default QuizSummary;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+
+  padding: 20px 24px;
+
+  height: 530px;
+
+  background: #ffffff;
+
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
+  border-radius: 8px;
+`;
+
+const Title = styled.h2`
+  position: relative;
+
+  width: 100%;
+
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 24px;
+
+  color: #111827;
+`;
+
+const Li = styled.li`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 8px 0px;
+  gap: 8px;
+
+  width: 100%;
+  height: 79px;
+
+  border-top: 1px solid #f4f4f5;
+
+  a {
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 17px;
+
+    color: #111827;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  div {
+    display: flex;
+    flex-direction: row;
+    gap: 12px;
+
+    span {
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 14px;
+      &:first-child {
+        color: #374151;
+      }
+      &:last-child {
+        color: #9ca3af;
+      }
+    }
+  }
+`;
+
+const Button = styled.button`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 10px 24px;
+  gap: 10px;
+
+  width: 100%;
+  height: 36px;
+
+  background: #f3f4f6;
+  border-radius: 8px;
+
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 16px;
+
+  color: #4b5563;
+
+  cursor: pointer;
+`;

components/challenges/blocks/success-people.tsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
+import useChallengeDetailQuery from "../../../hooks/challenge-detail-query";
+import { media } from "../../../styles/media";
+interface Props {
+  challengeId: string;
+}
+interface FixItem {
+  fixItem: boolean;
+}
+
+function ChallengeSuccessPeople({ challengeId }: Props) {
+  const [scrollY, setScrollY] = useState(0);
+  const [fixItem, setFixItem] = useState(false);
+
+  const { data: challengeDetail } = useChallengeDetailQuery({ challengeId });
+
+  useEffect(() => {
+    (() => {
+      window.addEventListener("scroll", () => setScrollY(window.pageYOffset));
+      if (scrollY > 150) {
+        setFixItem(true);
+      } else {
+        setFixItem(false);
+      }
+    })();
+    return () => {
+      window.removeEventListener("scroll", () =>
+        setScrollY(window.pageYOffset)
+      );
+    };
+  });
+
+  return (
+    <Container fixItem={fixItem}>
+      🔥 이번주 {challengeDetail?.numberOfChallengerWhoCompleted}명 챌린지 미션
+      완료!
+    </Container>
+  );
+}
+
+export default ChallengeSuccessPeople;
+
+const Container = styled.div<FixItem>`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 11px 10px;
+  gap: 10px;
+
+  position: ${(p) => (p.fixItem ? "fixed" : "relative")};
+  width: ${(p: FixItem) => (p.fixItem ? "100vw" : "100%")};
+  height: 41px;
+  top: ${(p) => (p.fixItem ? "60px" : "0px")};
+
+  background: #000000;
+  border-radius: ${(p: FixItem) => (p.fixItem ? "0px" : "8px")};
+
+  color: #ffffff;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 19px;
+
+  z-index: 10;
+  ${media.medium`
+    width: ${(p: FixItem) => (p.fixItem ? "100vw" : "100%")};
+    top: ${(p: FixItem) => (p.fixItem ? "51px" : "0px")};
+
+    font-size: 14px;
+  `};
+`;

components/challenges/challenge-menu.tsx

@@ -0,0 +1,40 @@
+import Link from "next/link";
+import React from "react";
+import useOpenWeeksQuery from "../../hooks/open-weeks";
+interface Props {
+  challengeId: string;
+}
+function ChallengeMenu({ challengeId }: Props) {
+  const { data: openWeeks } = useOpenWeeksQuery();
+  return (
+    <div className="col-start-1 col-span-2 m-10 border-r-[1px] sm:w-5/6 sm:m-auto sm:border-none">
+      <h3 className="py-3 text-sm font-semibold text-gray-500">문제</h3>
+      <ul className="menu bg-base-100 pr-5">
+        {openWeeks && (
+          <li>
+            <Link
+              href={`/challenges/${challengeId}/quizzes?week=${openWeeks?.weeks
+                .filter((week) => week.status === "READABLE")
+                .map((week) => week.week)
+                .join(",")}`}
+            >
+              열람 가능한 문제
+            </Link>
+          </li>
+        )}
+        <li>
+          <Link href={`/challenges/${challengeId}/quizzes/my`} className="">
+            내가 낸 문제
+          </Link>
+        </li>
+        <li>
+          <Link href={`/challenges/${challengeId}/quizzes/like`}>
+            좋아요한 문제
+          </Link>
+        </li>
+      </ul>
+    </div>
+  );
+}
+
+export default ChallengeMenu;