⚡️:: (#118) api 연동

Walkhub · May 31, 2022 · 2b4ac59 · 2b4ac59
1 parent c09fca5
commit 2b4ac59
Show file tree

Hide file tree

Showing 3 changed files with 201 additions and 30 deletions.
diff --git a/src/components/modals/index.tsx b/src/components/modals/index.tsx
@@ -0,0 +1,15 @@
+import { ModalsStateContext } from "@src/contexts/ModalContext";
+import { useContext } from "react";
+
+const Modals = () => {
+  const openedModal = useContext(ModalsStateContext);
+  return (
+    <>
+      {openedModal.map((modal, index) => (
+        <modal.Component key={index} {...modal.props}></modal.Component>
+      ))}
+    </>
+  );
+};
+
+export default Modals;
diff --git a/src/components/userDetail/index.tsx b/src/components/userDetail/index.tsx
@@ -1,48 +1,134 @@
 import styled from "@emotion/styled";
+import { ModalsDispatchContext } from "@src/contexts/ModalContext";
+import fetcher from "@src/utils/function/fetcher";
+import { useContext, useState } from "react";
+import useSWR from "swr";
 import Chart from "../chart";
 import DefaultModal from "../common/DefaultModal";
 import ProfileBox from "../common/ProfileBox";
+import MeasurementResult from "./measurement";
+import useDays from "@src/hooks/useDays";
+import Image from "next/image";
+import simpleLeftArrow from "../../assets/simple_left_arrow.svg";
+import simpleRightArrow from "../../assets/simple_right_arrow.svg";
+interface Props {
+  userId: number;
+}
+
+interface UserData {
+  average_distance: number;
+  average_walk_count: number;
+  class_num: number | null;
+  grade: number | null;
+  name: string;
+  number: null | number;
+  profile_image_url: string;
+  total_distance: number;
+  total_walk_count: number;
+  user_id: number;
+  walk_count_list: number[];
+}
+
+const UserDetail = (props: Props) => {
+  const {
+    addMonth,
+    addWeek,
+    days,
+    resetMonthDays,
+    resetWeekDays,
+    subMonth,
+    subWeek,
+  } = useDays();
+
+  const [isWeek, setIsWeek] = useState<boolean>(true);
+  const { close, open } = useContext(ModalsDispatchContext);
+
+  const { data } = useSWR<UserData>(
+    `/teachers/users/${props.userId}?startAt=${days.startAt.format(
+      "YYYY-MM-DD"
+    )}&endAt=${days.endAt.format("YYYY-MM-DD")}`,
+    fetcher
+  );
 
-const UserDetail = () => {
   return (
-    <DefaultModal>
+    <DefaultModal close={() => close(UserDetail)}>
       <Container>
         <UserTextInfo>
-          <ProfileBox class_num={1} grade={1} name='김의찬' />
+          <ProfileBox userId={props.userId} />
           <UserStepInfo>
             <tbody>
               <tr>
                 <th>평균 걸음수</th>
-                <td>2000</td>
+                <td>{data?.average_walk_count}</td>
               </tr>
               <tr>
-                <th>평균 걸음수</th>
-                <td>2000</td>
+                <th>총합 걸음수</th>
+                <td>{data?.total_walk_count}</td>
               </tr>
               <tr>
-                <th>평균 걸음수</th>
-                <td>2000</td>
+                <th>평균 거리(km)</th>
+                <td>{data?.average_distance}</td>
               </tr>
               <tr>
-                <th>평균 걸음수</th>
-                <td>2000</td>
+                <th>총합 거리(km)</th>
+                <td>{data?.total_distance}</td>
               </tr>
             </tbody>
           </UserStepInfo>
         </UserTextInfo>
         <ChartBox>
           <WeekMonthChange>
-            <WeekMonthButton isClick={true}>주간</WeekMonthButton>
-            <WeekMonthButton isClick={false}>월간</WeekMonthButton>
+            <WeekMonthButton
+              isClick={isWeek}
+              onClick={() => {
+                setIsWeek(true);
+                resetWeekDays();
+              }}
+            >
+              주간
+            </WeekMonthButton>
+            <WeekMonthButton
+              isClick={!isWeek}
+              onClick={() => {
+                setIsWeek(false);
+                resetMonthDays();
+              }}
+            >
+              월간
+            </WeekMonthButton>
           </WeekMonthChange>
           <TimeSetBox>
-            <img></img>
-            <p>2월 2주차</p>
-            <img></img>
+            <Image
+              alt=''
+              src={simpleLeftArrow}
+              onClick={() => (isWeek ? subWeek() : subMonth())}
+            ></Image>
+            <p>{`${days.startAt.format("YYYY-MM-DD")} ~ ${days.endAt.format(
+              "YYYY-MM-DD"
+            )}`}</p>
+            <Image
+              alt=''
+              src={simpleRightArrow}
+              onClick={() => (isWeek ? addWeek() : addMonth())}
+            ></Image>
           </TimeSetBox>
-          <Chart countList={[1000, 3000, 2000, 5000, 4000, 5000, 2220]}></Chart>
+          <Chart
+            endAt={days.endAt}
+            countList={data?.walk_count_list || []}
+          ></Chart>
           <CheckRecord>
-            <p>기록 확인하기</p>
+            <p
+              onClick={() => {
+                close(UserDetail);
+                open(MeasurementResult, {
+                  userId: props.userId,
+                  startAt: days.startAt,
+                  endAt: days.endAt,
+                });
+              }}
+            >
+              기록 확인하기
+            </p>
           </CheckRecord>
         </ChartBox>
       </Container>
@@ -129,6 +215,7 @@ const WeekMonthButton = styled.button<{ isClick: boolean }>`
     isClick ? theme.color.white : theme.color.dark_gray};
   background-color: ${({ isClick, theme }) =>
     isClick ? theme.color.main : theme.color.white};
+  transition: all 0.3s;
 `;
 
 const TimeSetBox = styled.div`
@@ -152,6 +239,7 @@ const CheckRecord = styled.div`
   justify-content: flex-end;
   > p {
     font-size: 14px;
+    cursor: pointer;
     color: ${({ theme }) => theme.color.main};
     border-bottom: 1px solid ${({ theme }) => theme.color.main};
   }

diff --git a/src/components/userDetail/measurement/index.tsx b/src/components/userDetail/measurement/index.tsx
@@ -1,23 +1,84 @@
 import styled from "@emotion/styled";
 import DefaultModal from "@src/components/common/DefaultModal";
+import { ModalsDispatchContext } from "@src/contexts/ModalContext";
+import fetcher from "@src/utils/function/fetcher";
+import { useContext, useState } from "react";
+import useSWR from "swr";
+import UserDetail from "..";
 import ProfileBox from "../../common/ProfileBox";
 import MeasurementCard from "./MeasurementCard";
+import dayjs from "dayjs";
+import BoldLeftArrow from "../../../assets/bold_left_arrow.svg";
+import BoldRightArrow from "../../../assets/bold_right_arrow.svg";
+import Image from "next/image";
+interface Props {
+  userId: number;
+  startAt: dayjs.Dayjs;
+  endAt: dayjs.Dayjs;
+}
 
-const MeasurementResult = () => {
+export interface ExerciseList {
+  exercise_id: number;
+  certifying_shot: string;
+  walk_count: number;
+  speed: number; // m/s단위
+  calorie: number;
+  time: number; // 분단위
+  latitude: number;
+  longitude: number;
+  end_at: string;
+}
+
+const MeasurementResult = (props: Props) => {
+  const [page, setPage] = useState<number>(0);
+
+  const { data: exerciseList } = useSWR<{
+    exercise_analysis_list: ExerciseList[];
+    total_page: number;
+  }>(
+    `/exercises/history/${props.userId}?startAt=${props.startAt.format(
+      "YYYY-MM-DD"
+    )}&endAt=${props.endAt.format("YYYY-MM-DD")}&page=${page}`,
+    fetcher
+  );
+
+  const { close, open } = useContext(ModalsDispatchContext);
   return (
-    <DefaultModal>
+    <DefaultModal close={() => close(MeasurementResult)}>
       <Container>
-        <ProfileBox class_num={1} grade={1} name='김의찬'></ProfileBox>
+        <ProfileBox userId={props.userId}></ProfileBox>
         <CardBox>
-          <img />
-          <MeasurementCard id={1}></MeasurementCard>
-          <MeasurementCard id={2}></MeasurementCard>
-          <MeasurementCard isRight={true} id={3}></MeasurementCard>
-          <MeasurementCard isRight={true} id={4}></MeasurementCard>
-          <img />
+          {page !== 0 && (
+            <Image
+              src={BoldLeftArrow}
+              onClick={() => setPage(state => state - 1)}
+            />
+          )}
+          <div>
+            {(exerciseList?.exercise_analysis_list || []).map((i, idx) => (
+              <MeasurementCard
+                key={i.exercise_id}
+                {...i}
+                isRight={idx % 4 > 1}
+              />
+            ))}
+          </div>
+          {page !== exerciseList?.total_page - 1 && (
+            <Image
+              src={BoldRightArrow}
+              onClick={() => setPage(state => state + 1)}
+            />
+          )}
         </CardBox>
         <CheckUserDetail>
-          <p>유저 정보 확인하기</p>
+          <p
+            onClick={() => {
+              close(MeasurementResult);
+              open(UserDetail, { userId: props.userId });
+            }}
+          >
+            유저 정보 확인하기
+          </p>
         </CheckUserDetail>
       </Container>
     </DefaultModal>
@@ -33,24 +94,31 @@ const Container = styled.div`
 
 const CardBox = styled.div`
   display: flex;
+  height: 252px;
   width: 100%;
   justify-content: space-between;
   margin-top: 32px;
   position: relative;
   align-items: center;
-  > img {
-    position: absolute;
+  > span {
+    position: absolute !important;
     width: 36px;
     height: 36px;
     cursor: pointer;
     background-color: black;
-    :first-child {
+    :first-of-type {
       left: -60px;
     }
     :last-child {
       right: -60px;
     }
   }
+  > div {
+    display: flex;
+    gap: 24px;
+    width: 100%;
+    height: 100%;
+  }
 `;
 
 const CheckUserDetail = styled.div`