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

Release/1.6.0

api/auth/index.ts

@@ -1,8 +1,11 @@
-import api from "../my-api";
+import axios from "axios";
 import { LoginProps } from "./types";
 
 const postLogin = async (loginBody: LoginProps) => {
-  return await api.post("/user/login", loginBody);
+  return await axios.post(
+    "https://prod.kkamjidot.com/v2/user/login",
+    loginBody
+  );
 };
 
 export { postLogin };

api/auth/types.ts

@@ -1,7 +1,7 @@
 interface LoginProps {
-  name: string;
-  code: string;
-  token: string | null;
+  email: string;
+  password: string;
+  fcmToken: string | null;
   platform: string;
 }
 

api/challenges/index.ts

@@ -1,30 +1,30 @@
-import api from "../my-api";
-import { getCode } from "../session-code";
+import api from "../myApi";
+import { getToken } from "../getToken";
 import { ChallengeProps } from "./types";
 
 const fetchMyChallenge = async () => {
-  api.defaults.headers.common["code"] = getCode();
+  api.defaults.headers.common["jwt"] = getToken();
 
   const { data } = await api.get(`/my/challenges`);
   return data;
 };
 
 const fetchChallengeDetail = async ({ challengeId }: ChallengeProps) => {
-  api.defaults.headers.common["code"] = getCode();
+  api.defaults.headers.common["jwt"] = getToken();
 
   const { data } = await api.get(`/challenges/${challengeId}`);
   return data;
 };
 
 const fetchOpenWeeks = async ({ challengeId }: ChallengeProps) => {
-  api.defaults.headers.common["code"] = getCode();
+  api.defaults.headers.common["jwt"] = getToken();
 
   const { data } = await api.get(`/challenges/${challengeId}/weeks`);
   return data;
 };
 
 const fetchCurrentWeek = async ({ challengeId }: ChallengeProps) => {
-  api.defaults.headers.common["code"] = getCode();
+  api.defaults.headers.common["jwt"] = getToken();
 
   const { data } = await api.get(`/challenges/${challengeId}/now`);
   return data;

api/comments/index.ts

@@ -1,21 +1,21 @@
-import api from "../my-api";
-import { getCode } from "../session-code";
+import api from "../myApi";
+import { getToken } from "../getToken";
 import { CommentDeleteProps, CommentProps, CommentUpdateProps } from "./types";
 
 const fetchComments = async ({ quizId }: CommentProps) => {
-  api.defaults.headers.common["code"] = getCode();
+  api.defaults.headers.common["jwt"] = getToken();
   const { data } = await api.get(`/quizzes/${quizId}/comments`);
   return data;
 };
 
 const updateComment = async ({ requestData }: CommentUpdateProps) => {
   const { commentBody, quizId } = requestData;
-  api.defaults.headers.common["code"] = getCode();
+  api.defaults.headers.common["jwt"] = getToken();
   return await api.post(`/quizzes/${quizId}/comments`, commentBody);
 };
 
 const deleteComment = async ({ commentId }: CommentDeleteProps) => {
-  api.defaults.headers.common["code"] = getCode();
+  api.defaults.headers.common["jwt"] = getToken();
 
   await api.delete(`/comments/${commentId}`);
 };

api/getToken.ts

@@ -0,0 +1,6 @@
+export const getToken = () => {
+  if (typeof window === "undefined") {
+    return "";
+  }
+  return sessionStorage.getItem("token") || localStorage.getItem("token") || "";
+};

api/quizzes/hooks.ts

@@ -46,7 +46,6 @@ function useQuizDetailQuery({ quizId }: QuizProps) {
 
 function useQuizzesQuery({
   challengeId,
-  week,
   page,
   suspense = false,
 }: QuizzesProps) {
@@ -65,10 +64,10 @@ function useQuizzesQuery({
 
   switch (page) {
     case "READABLE":
-      queryFn = () => fetchQuizzes({ challengeId, week: week || "" });
+      queryFn = () => fetchQuizzes({ challengeId });
       queryOptions = {
         ...queryOptions,
-        enabled: !!(challengeId && week),
+        enabled: !!challengeId,
       };
       break;
     case "MY":

api/quizzes/index.ts

@@ -1,5 +1,5 @@
-import api from "../my-api";
-import { getCode } from "../session-code";
+import api from "../myApi";
+import { getToken } from "../getToken";
 import {
   QuizAnswerProps,
   QuizGradeProps,
@@ -11,34 +11,34 @@ import {
 } from "./types";
 
 const updateQuizIsSolved = async ({ quizId, answer }: QuizAnswerProps) => {
-  api.defaults.headers.common["code"] = getCode();
+  api.defaults.headers.common["jwt"] = getToken();
 
   return await api.post(`/quizzes/${quizId}/solve`, { answer });
 };
 
 const updateQuizGrade = async ({ quizId, score }: QuizGradeProps) => {
-  api.defaults.headers.common["code"] = getCode();
+  api.defaults.headers.common["jwt"] = getToken();
 
   return await api.post(`/quizzes/${quizId}/grade`, { score });
 };
 
-const fetchQuizzes = async ({ challengeId, week }: QuizzesProps) => {
-  api.defaults.headers.common["code"] = getCode();
+const fetchQuizzes = async ({ challengeId }: QuizzesProps) => {
+  api.defaults.headers.common["jwt"] = getToken();
 
   const { data } = await api.get(`/challenges/${challengeId}/quizzes`, {
-    params: { week },
+    params: { week: "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15" },
   });
   return data;
 };
 
 const updateQuiz = async ({ challengeId, quizSubmitBody }: QuizSubmitProps) => {
-  api.defaults.headers.common["code"] = getCode();
+  api.defaults.headers.common["jwt"] = getToken();
   api.defaults.headers.common["Content-Type"] = "multipart/form-data";
   return await api.post(`/challenges/${challengeId}/quizzes`, quizSubmitBody);
 };
 
 const fetchQuizDetail = async ({ quizId }: QuizProps) => {
-  api.defaults.headers.common["code"] = getCode() || "";
+  api.defaults.headers.common["jwt"] = getToken() || "";
 
   const { data } = await api.get(`/quizzes/${quizId}`);
   return data;
@@ -50,7 +50,7 @@ const fetchMyQuizDetail = async ({ quizId }: QuizProps) => {
 };
 
 const fetchMyQuizzes = async ({ challengeId }: QuizzesProps) => {
-  api.defaults.headers.common["code"] = getCode();
+  api.defaults.headers.common["jwt"] = getToken();
 
   // week가 없으면 0으로 요청하여 전체 퀴즈 리스트를 반환한다.
   const { data } = await api.get(`/challenges/${challengeId}/my/quizzes`);
@@ -59,7 +59,7 @@ const fetchMyQuizzes = async ({ challengeId }: QuizzesProps) => {
 };
 
 const fetchQuizSubmitStackedCount = async () => {
-  api.defaults.headers.common["code"] = getCode();
+  api.defaults.headers.common["jwt"] = getToken();
 
   const { data } = await api.get("/my/quizzes/count");
   return data;
@@ -69,7 +69,7 @@ const fetchSubmitCount = async ({
   challengeId,
   week,
 }: QuizSubmitCountProps) => {
-  api.defaults.headers.common["code"] = getCode();
+  api.defaults.headers.common["jwt"] = getToken();
   const { data } = await api.get(
     `/challenges/${challengeId}/my/quizzes/count`,
     { params: { week } }
@@ -78,13 +78,13 @@ const fetchSubmitCount = async ({
 };
 
 const updateQuizRate = async ({ quizId, rate }: QuizRateProps) => {
-  api.defaults.headers.common["code"] = getCode();
+  api.defaults.headers.common["jwt"] = getToken();
 
   return await api.put(`/quizzes/${quizId}/rate`, { rate });
 };
 
 const fetchLikedQuizzes = async ({ challengeId }: QuizzesProps) => {
-  api.defaults.headers.common["code"] = getCode();
+  api.defaults.headers.common["jwt"] = getToken();
 
   const { data } = await api.get(`/challenges/${challengeId}/my-good-quizzes`);
   return data;

components/challenges/ChallengeMenu.tsx

@@ -12,14 +12,7 @@ function ChallengeMenu({ challengeId }: Props) {
       <ul className="pr-5 menu bg-base-100">
         {openWeeks && (
           <li>
-            <Link
-              href={`/challenges/${challengeId}/quizzes?week=${openWeeks?.weeks
-                .filter((week) => week.status === "READABLE")
-                .map((week) => week.week)
-                .join(",")}`}
-            >
-              열람 가능한 문제
-            </Link>
+            <Link href={`/challenges/${challengeId}/quizzes`}>전체 문제</Link>
           </li>
         )}
         <li>

components/challenges/ChallengeOverview.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import styled from "styled-components";
 import { useChallengeDetailQuery } from "../../api/challenges/hooks";
 import { media } from "../../styles/media";
-import HeadTitle from "../common/Title";
+import HeadTitle from "../common/HeadTitle";
 interface Props {
   challengeId: string;
 }

components/challenges/blocks/ChallengeQuizSummary.tsx

@@ -6,17 +6,16 @@ import { useQuizzesQuery } from "../../../api/quizzes/hooks";
 interface Props {
   title: string;
   page: "READABLE" | "MY" | "LIKED";
-  week?: string;
   challengeId: string;
 }
-function ChallengeQuizSummary({ title, page, week, challengeId }: Props) {
-  const { data: quizzes } = useQuizzesQuery({ challengeId, page, week });
+function ChallengeQuizSummary({ title, page, challengeId }: Props) {
+  const { data: quizzes } = useQuizzesQuery({ challengeId, page });
 
   const getLinkByPage = (quizId?: number) => {
     const BASE_LINK = `/challenges/${challengeId}/quizzes`;
     switch (page) {
       case "READABLE":
-        return BASE_LINK + `${quizId ? `/${quizId}` : ""}?week=${week}`;
+        return BASE_LINK + `${quizId ? `/${quizId}` : ""}`;
       case "MY":
         return BASE_LINK + `${quizId ? `/${quizId}` : ""}/my`;
       case "LIKED":
@@ -39,15 +38,15 @@ function ChallengeQuizSummary({ title, page, week, challengeId }: Props) {
       <Title> {title}</Title>
       <ul>
         {quizzes?.slice(0, 5).map((quiz) => (
-          <Li key={quiz.quizId}>
-            <Link href={getLinkByPage(quiz.quizId)}>
+          <Link href={getLinkByPage(quiz.quizId)} key={quiz.quizId}>
+            <Li>
               <a>{quiz.quizTitle}</a>
-            </Link>
-            <div>
-              <span>{quiz.writerName}</span>
-              <span>{getDateFormatted(quiz.quizCreatedDate)}</span>
-            </div>
-          </Li>
+              <div>
+                <span>{quiz.writerName}</span>
+                <span>{getDateFormatted(quiz.quizCreatedDate)}</span>
+              </div>
+            </Li>
+          </Link>
         ))}
       </ul>
       <Link href={getLinkByPage()}>
@@ -99,6 +98,8 @@ const Li = styled.li`
 
   border-top: 1px solid #f4f4f5;
 
+  cursor: pointer;
+
   a {
     font-weight: 600;
     font-size: 14px;

components/challenges/containers/ChallengeQuizSummaryContainer.tsx

@@ -9,24 +9,13 @@ interface Props {
 function ChallengeQuizSummaryContainer({ challengeId }: Props) {
   const { data: openWeeks } = useOpenWeeksQuery({ challengeId });
 
-  const getReadableWeeks = () => {
-    let readable = new Array<string>();
-    openWeeks?.weeks.forEach((week) => {
-      if (week.status === "READABLE") {
-        readable.push(String(week.week));
-      }
-    });
-    return readable.join(",");
-  };
-
   return (
     <Container>
       {openWeeks && (
         <QuizSummary
           challengeId={challengeId}
-          title={"열람 가능 문제"}
+          title={"전체 문제"}
           page={"READABLE"}
-          week={getReadableWeeks()}
         ></QuizSummary>
       )}
       <QuizSummary

components/dashboard/blocks/MissionStackedCountChart.tsx

@@ -1,8 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { AxiosError } from "axios";
 import React, { useEffect, useState } from "react";
-import api from "../../../api/my-api";
-import { getCode } from "../../../api/session-code";
+import { getToken } from "../../../api/getToken";
 import { Line } from "react-chartjs-2";
 import styled from "styled-components";
 import {
@@ -72,7 +71,7 @@ function MissionStackedCountChart() {
     AxiosError,
     number[]
   >(["missionCount"], fetchQuizSubmitStackedCount, {
-    enabled: !!getCode(),
+    enabled: !!getToken(),
     suspense: true,
     select: (data) => data.map((value) => value.count),
   });

components/dashboard/blocks/MyPointBlock.tsx

@@ -0,0 +1,57 @@
+import { Icon } from "@iconify/react";
+import React from "react";
+import styled from "styled-components";
+import { media } from "../../../styles/media";
+
+function MyPointBlock() {
+  return (
+    <Container>
+      <span>내 포인트</span>
+      <RowBox>
+        <span>5,400</span>
+        <Icon icon="heroicons:information-circle-20-solid" />
+      </RowBox>
+    </Container>
+  );
+}
+
+export default MyPointBlock;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 12px 10px 16px;
+  gap: 10px;
+
+  position: absolute;
+  width: 180px;
+  margin: 10px 24px;
+
+  background: #10b981;
+  border-radius: 6px;
+
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 17px;
+
+  color: #ffffff;
+
+  ${media.medium`
+    position: relative;
+    top: 0px;
+    right: 0px;
+
+    width: 100%;
+    margin: 0;
+
+    border-radius: 0px 0px 8px 8px;
+  `}
+`;
+
+const RowBox = styled.span`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;