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

Release/v1.7.0
Learn-and-Give · Oct 18, 2022 · 7884755 · 7884755
2 parents deaf7fe + d4f995d
commit 7884755
Show file tree

Hide file tree

Showing 44 changed files with 642 additions and 326 deletions.
diff --git a/api/auth/index.ts b/api/auth/index.ts
@@ -1,11 +1,8 @@
-import axios from "axios";
+import { apiV2 } from "../myApi";
 import { LoginProps } from "./types";
 
 const postLogin = async (loginBody: LoginProps) => {
-  return await axios.post(
-    "https://prod.kkamjidot.com/v2/user/login",
-    loginBody
-  );
+  return await apiV2.post("/user/login", loginBody);
 };
 
 export { postLogin };
diff --git a/api/challenges/index.ts b/api/challenges/index.ts
@@ -1,4 +1,4 @@
-import api from "../myApi";
+import { api } from "../myApi";
 import { getToken } from "../getToken";
 import { ChallengeProps } from "./types";
 

diff --git a/api/comments/index.ts b/api/comments/index.ts
@@ -1,4 +1,4 @@
-import api from "../myApi";
+import { api } from "../myApi";
 import { getToken } from "../getToken";
 import { CommentDeleteProps, CommentProps, CommentUpdateProps } from "./types";
 

diff --git a/api/myApi.ts b/api/myApi.ts
@@ -4,4 +4,8 @@ const api = axios.create({
   baseURL: process.env.NEXT_PUBLIC_API_BASE_URL,
 });
 
-export default api;
+const apiV2 = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL_V2,
+});
+
+export { api, apiV2 };
diff --git a/api/point/index.ts b/api/point/index.ts
@@ -0,0 +1,10 @@
+import { getToken } from "../getToken";
+import { api } from "../myApi";
+
+const fetchMyPoint = async () => {
+  api.defaults.headers.common["jwt"] = getToken();
+  const { data } = await api.get("/my/point");
+  return data;
+};
+
+export { fetchMyPoint };
diff --git a/api/quizzes/hooks.ts b/api/quizzes/hooks.ts
@@ -7,12 +7,7 @@ import {
   fetchQuizzes,
   fetchSubmitCount,
 } from ".";
-import {
-  QuizDetail,
-  QuizDetailSelect,
-  QuizSubmitCount,
-  QuizSummary,
-} from "../../types/Quiz";
+import { QuizDetail, QuizSubmitCount, QuizSummary } from "../../types/Quiz";
 
 interface QuizProps {
   quizId: string;
@@ -31,15 +26,12 @@ interface QuizSubmitCountProps {
 }
 
 function useQuizDetailQuery({ quizId }: QuizProps) {
-  return useQuery<QuizDetail, AxiosError, QuizDetailSelect>(
+  return useQuery<QuizDetail, AxiosError>(
     ["quizDetail", quizId],
     () => fetchQuizDetail({ quizId }),
     {
       enabled: !!quizId,
       onError: (err) => {},
-      select: (data) => {
-        return { ...data, quizRubric: JSON.parse(data.quizRubric) };
-      },
     }
   );
 }

diff --git a/api/quizzes/index.ts b/api/quizzes/index.ts
@@ -1,33 +1,17 @@
-import api from "../myApi";
+import { api } from "../myApi";
 import { getToken } from "../getToken";
 import {
-  QuizAnswerProps,
-  QuizGradeProps,
   QuizProps,
   QuizRateProps,
   QuizSubmitCountProps,
   QuizSubmitProps,
   QuizzesProps,
 } from "./types";
 
-const updateQuizIsSolved = async ({ quizId, answer }: QuizAnswerProps) => {
-  api.defaults.headers.common["jwt"] = getToken();
-
-  return await api.post(`/quizzes/${quizId}/solve`, { answer });
-};
-
-const updateQuizGrade = async ({ quizId, score }: QuizGradeProps) => {
-  api.defaults.headers.common["jwt"] = getToken();
-
-  return await api.post(`/quizzes/${quizId}/grade`, { score });
-};
-
 const fetchQuizzes = async ({ challengeId }: QuizzesProps) => {
   api.defaults.headers.common["jwt"] = getToken();
 
-  const { data } = await api.get(`/challenges/${challengeId}/quizzes`, {
-    params: { week: "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15" },
-  });
+  const { data } = await api.get(`/challenges/${challengeId}/quizzes`);
   return data;
 };
 
@@ -40,7 +24,7 @@ const updateQuiz = async ({ challengeId, quizSubmitBody }: QuizSubmitProps) => {
 const fetchQuizDetail = async ({ quizId }: QuizProps) => {
   api.defaults.headers.common["jwt"] = getToken() || "";
 
-  const { data } = await api.get(`/quizzes/${quizId}`);
+  const { data } = await api.get(`/quizzes/${quizId}/content`);
   return data;
 };
 
@@ -91,8 +75,6 @@ const fetchLikedQuizzes = async ({ challengeId }: QuizzesProps) => {
 };
 
 export {
-  updateQuizIsSolved,
-  updateQuizGrade,
   fetchQuizzes,
   updateQuiz,
   fetchQuizDetail,

diff --git a/api/quizzes/types.ts b/api/quizzes/types.ts
@@ -1,13 +1,3 @@
-interface QuizAnswerProps {
-  quizId: string;
-  answer: string;
-}
-
-interface QuizGradeProps {
-  quizId: string;
-  score: number;
-}
-
 interface QuizzesProps {
   challengeId: string;
   week?: string;
@@ -33,8 +23,6 @@ interface QuizRateProps {
 }
 
 export type {
-  QuizAnswerProps,
-  QuizGradeProps,
   QuizzesProps,
   QuizSubmitProps,
   QuizProps,

diff --git a/api/solve/hooks.ts b/api/solve/hooks.ts
@@ -0,0 +1,30 @@
+import { useQuery } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+import { fetchQuizSolve } from ".";
+import { QuizSolve, QuizSolveSelect } from "../../types/Quiz";
+import { QuizProps } from "./types";
+
+function useQuizSolveQuery({ quizId }: QuizProps) {
+  return useQuery<QuizSolve, AxiosError, QuizSolveSelect>(
+    ["quizSolve", quizId],
+    () => fetchQuizSolve({ quizId }),
+    {
+      enabled: !!quizId,
+      select: (data) => {
+        return {
+          ...data,
+          quiz: {
+            ...data.quiz,
+            rubric: JSON.parse(data.quiz.rubric).map(
+              (value: { score: string; content: string }) => {
+                return { ...value, score: Number(value.score) };
+              }
+            ),
+          },
+        };
+      },
+    }
+  );
+}
+
+export { useQuizSolveQuery };
diff --git a/api/solve/index.ts b/api/solve/index.ts
@@ -0,0 +1,25 @@
+import { getToken } from "../getToken";
+import { api, apiV2 } from "../myApi";
+import { QuizAnswerProps, QuizGradeProps, QuizProps } from "./types";
+
+const updateQuizIsSolved = async ({ quizId, answer }: QuizAnswerProps) => {
+  api.defaults.headers.common["jwt"] = getToken();
+
+  return await api.post(`/quizzes/${quizId}/solve`, { answer });
+};
+
+const updateQuizGrade = async ({ quizId, scoreBody }: QuizGradeProps) => {
+  apiV2.defaults.headers.common["jwt"] = getToken();
+
+  return await apiV2.post(`/quizzes/${quizId}/grade`, scoreBody);
+};
+
+const fetchQuizSolve = async ({ quizId }: QuizProps) => {
+  apiV2.defaults.headers.common["jwt"] = getToken();
+
+  const { data } = await apiV2.get(`/quizzes/${quizId}/solve`);
+
+  return data;
+};
+
+export { updateQuizIsSolved, updateQuizGrade, fetchQuizSolve };
diff --git a/api/solve/types.ts b/api/solve/types.ts
@@ -0,0 +1,16 @@
+interface QuizProps {
+  quizId: string;
+}
+
+interface QuizAnswerProps extends QuizProps {
+  answer: string;
+}
+
+interface QuizGradeProps extends QuizProps {
+  scoreBody: {
+    score: number;
+    solveRubric: string;
+  };
+}
+
+export type { QuizProps, QuizAnswerProps, QuizGradeProps };
diff --git a/components/challenges/ChallengeOverview.tsx b/components/challenges/ChallengeOverview.tsx
@@ -94,11 +94,6 @@ const Title = styled.h1<{ titleLength: number }>`
 
   color: #ffffff;
 
-  &:hover {
-    color: #4f46e5;
-    transition: 150ms;
-  }
-
   ${media.medium`
     font-size: ${(p: { titleLength: number }) =>
       p.titleLength > 20 ? "24px" : "20px"};

diff --git a/components/dashboard/blocks/MyPointBlock.tsx b/components/dashboard/blocks/MyPointBlock.tsx
@@ -1,17 +1,50 @@
 import { Icon } from "@iconify/react";
-import React from "react";
+import { useQuery } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+import React, { useState } from "react";
 import styled from "styled-components";
+import { fetchMyPoint } from "../../../api/point";
 import { media } from "../../../styles/media";
+import { MyPoint } from "../../../types/Point";
 
 function MyPointBlock() {
+  const [isMouseOver, setIsMouseOver] = useState(false);
+  const [isClicked, setIsClicked] = useState(false);
+
+  const { data: point } = useQuery<MyPoint, AxiosError, number>(
+    ["point"],
+    fetchMyPoint,
+    {
+      select: (data) => data.point,
+    }
+  );
+
   return (
-    <Container>
-      <span>내 포인트</span>
-      <RowBox>
-        <span>5,400</span>
-        <Icon icon="heroicons:information-circle-20-solid" />
-      </RowBox>
-    </Container>
+    <>
+      <Container>
+        <span>내 포인트</span>
+        <RowBox>
+          <span>{point?.toLocaleString()}</span>
+          <InfoIcon>
+            <Icon
+              icon="heroicons:information-circle-20-solid"
+              onMouseOver={() => setIsMouseOver(true)}
+              onMouseOut={() => setIsMouseOver(false)}
+              onClick={() => setIsClicked((prev) => !prev)}
+            />
+          </InfoIcon>
+        </RowBox>
+      </Container>
+      {(isMouseOver || isClicked) && (
+        <TooltipBlock>
+          <TooltipTail />
+          <Tooltip>
+            내 문제가 풀렸을 때 쌓이는 포인트입니다. <br />
+            포인트 사용은 서포터즈에게 문의해주세요.
+          </Tooltip>
+        </TooltipBlock>
+      )}
+    </>
   );
 }
 
@@ -54,4 +87,63 @@ const RowBox = styled.span`
   display: flex;
   align-items: center;
   gap: 5px;
+
+  z-index: 10;
+`;
+
+const InfoIcon = styled.span`
+  cursor: pointer;
+`;
+
+const TooltipBlock = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+
+  position: absolute;
+`;
+const TooltipTail = styled.span`
+  position: relative;
+  width: 8px;
+  height: 8px;
+
+  top: 52px;
+  right: 38px;
+
+  ${media.medium`
+    top: 74px;
+    right: 16px;
+  `}
+
+  transform: rotate(45deg);
+
+  background: rgba(0, 0, 0);
+`;
+const Tooltip = styled.span`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  position: relative;
+
+  width: 243px;
+  height: 58px;
+
+  top: 48px;
+  right: 24px;
+
+  ${media.medium`
+    top: 68px;
+    right: 0px;
+  `}
+
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 15px;
+  text-align: center;
+
+  background: rgba(0, 0, 0);
+  border-radius: 6px;
+
+  color: #ffffff;
 `;
diff --git a/components/dashboard/containers/ChallengeListContainer.tsx b/components/dashboard/containers/ChallengeListContainer.tsx
@@ -34,7 +34,8 @@ export default ChallengeListContainer;
 const Container = styled.div`
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 24px;
+  row-gap: 36px;
+  column-gap: 16px;
 
   width: 100%;