Feature/user/user detail

.gitignore

@@ -20,4 +20,6 @@
 
 npm-debug.log*
 yarn-debug.log*
-yarn-error.log*
+yarn-error.log*
+
+.env

src/components/Router.tsx

@@ -1,6 +1,7 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 
 import { Dashboard, Login, Main, User } from "pages";
+import UserDetail from "./user/UserDetail";
 
 export default function Router() {
   return (
@@ -9,7 +10,9 @@ export default function Router() {
         <Route path="/" element={<Login />} />
         <Route path="/main/*" element={<Main />}>
           <Route path="dashboard" element={<Dashboard />} />
-          <Route path="user" element={<User />} />
+          <Route path="user" element={<User />}>
+            <Route path=":id" element={<UserDetail />} />
+          </Route>
           <Route path="*" element={<div>소중이들 미안! 404 에러야!</div>} />
         </Route>
         <Route path="/*" element={<div>소중이들 미안! 404 에러야!</div>} />

src/components/dashboard/Summary.tsx

@@ -1,20 +1,30 @@
 import styled from "styled-components";
 import { theme } from "styled-tools";
 
-export default function Summary({
-  summaryIcon,
-  summaryText,
-  dataNumber,
-  dataVariation,
-}) {
+interface SummaryProps {
+  summaryIcon: string;
+  summaryText: string;
+  dataNumber: string | number;
+  dataVariation: number;
+}
+
+export default function Summary(props: SummaryProps) {
+  const { summaryIcon, summaryText, dataNumber, dataVariation } = props;
+
   return (
     <StSummaryBox>
       <StSummaryIcon src={summaryIcon}></StSummaryIcon>
       <StSummaryText>
         <h3>{summaryText}</h3>
         <StSummaryData>
           <StDataNumber>{dataNumber}</StDataNumber>
-          <StDataVariation>{dataVariation}</StDataVariation>
+          {dataVariation ? (
+            <StDataVariation>
+              {dataVariation > 0
+                ? `( +${dataVariation} )`
+                : `( ${dataVariation} )`}
+            </StDataVariation>
+          ) : null}
         </StSummaryData>
       </StSummaryText>
     </StSummaryBox>

src/components/dashboard/SummaryWrapper.tsx

@@ -1,27 +1,71 @@
 import Summary from "./Summary";
 import styled from "styled-components";
 import { joinUserIcon, totalUserIcon, totalPlantingIcon } from "../../assets";
+import { useSetRecoilState } from "recoil";
+import { userTotalNum } from "states";
+import { client } from "utils/api";
+import { useEffect, useState } from "react";
 
 export default function SummaryWrapper() {
+  const [dashboardData, setDashboardData] = useState({
+    todayUserTotal: 0,
+    yesterdayUserTotal: 0,
+    todayContactTotal: 0,
+  });
+
+  const setUserTotalCount = useSetRecoilState(userTotalNum);
+
+  const convertDateToString = (date: Date) => {
+    return date.toISOString().split("T")[0];
+  };
+
+  const todayDate = convertDateToString(new Date());
+  const yesterdayDate = convertDateToString(
+    new Date(new Date().getTime() - 24 * 60 * 60 * 1000)
+  );
+
+  useEffect(() => {
+    (async function () {
+      const todayRes = await client(`/user/count?date=${todayDate}`);
+      const todayUserTotal = todayRes.data.data.totalCount;
+      setUserTotalCount(todayUserTotal);
+      const yesterdayRes = await client.get(
+        `/user/count?date=${yesterdayDate}`
+      );
+      const yesterdayUserTotal = yesterdayRes.data.data.totalCount;
+
+      const { data } = await client("/contact");
+
+      setDashboardData((current) => ({
+        ...current,
+        todayUserTotal,
+        yesterdayUserTotal,
+        todayContactTotal: data.count,
+      }));
+    })();
+  }, [todayDate, yesterdayDate, setUserTotalCount]);
+
   return (
     <StSummaryWrapper>
       <Summary
         summaryIcon={joinUserIcon}
-        summaryText="서비스 신규 이용자 수"
-        dataNumber="10"
-        dataVariation=""
+        summaryText="체리쉬 공식 탄생일"
+        dataNumber="2021-07-04"
+        dataVariation={0}
       />
       <Summary
         summaryIcon={totalUserIcon}
         summaryText="서비스 누적 이용자 수"
-        dataNumber="7,777"
-        dataVariation="+7"
+        dataNumber={dashboardData.todayUserTotal}
+        dataVariation={
+          dashboardData.yesterdayUserTotal - dashboardData.todayUserTotal
+        }
       />
       <Summary
         summaryIcon={totalPlantingIcon}
-        summaryText="서비스 누적 수"
-        dataNumber="7,777"
-        dataVariation="+7"
+        summaryText="서비스 내 누적 물주기 수"
+        dataNumber={dashboardData.todayContactTotal}
+        dataVariation={0}
       />
     </StSummaryWrapper>
   );

src/components/login/LoginForm.tsx

@@ -1,23 +1,51 @@
-import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 import styled from "styled-components";
 import { theme } from "styled-tools";
 import { IdIcon, PwIcon } from "assets";
+import { useState } from "react";
 
 export default function LoginWrapper() {
+  const [account, setAccount] = useState({ id: "", pwd: "" });
+  const navigate = useNavigate();
+
+  const checkIsAdmin = (e) => {
+    e.preventDefault();
+    console.log("account", account, process.env.REACT_APP_ADMIN_ID);
+    if (
+      account.id === `${process.env.REACT_APP_ADMIN_ID}` &&
+      account.pwd === `${process.env.REACT_APP_ADMIN_PWD}`
+    ) {
+      navigate("/main/dashboard");
+    }
+  };
+
   return (
-    <form>
+    <form onSubmit={checkIsAdmin}>
       <StInput>
         <IdIcon />
-        <input id="id" placeholder="아이디를 입력해주세요" />
+        <input
+          id="id"
+          value={account.id}
+          placeholder="아이디를 입력해주세요"
+          onChange={(e) =>
+            setAccount((curr) => ({ ...curr, id: e.target.value }))
+          }
+        />
       </StInput>
       <StInput>
         <PwIcon />
-        <input id="pw" type="password" placeholder="비밀번호를 입력해주세요" />
+        <input
+          id="pw"
+          type="password"
+          value={account.pwd}
+          placeholder="비밀번호를 입력해주세요"
+          onChange={(e) =>
+            setAccount((curr) => ({ ...curr, pwd: e.target.value }))
+          }
+        />
       </StInput>
-      <StLoginButton>
-        <Link to="/main/dashboard">로그인</Link>
-      </StLoginButton>
+      <StLoginButton type="submit">로그인</StLoginButton>
     </form>
   );
 }
@@ -42,7 +70,7 @@ const StInput = styled.div`
   }
 `;
 
-const StLoginButton = styled.p`
+const StLoginButton = styled.button`
   display: flex;
   justify-content: center;
   align-items: center;

src/components/user/PlantList.tsx

@@ -1,19 +1,12 @@
-import { useEffect, useState } from "react";
 import styled from "styled-components";
 import { theme } from "styled-tools";
+import { Plant } from "./UserDetail";
 
-import { getPlantList } from "utils";
-import { Plant } from "utils/tempData";
-
-export default function PlantList() {
-  const [plantList, setPlantList] = useState<Plant[]>([]);
-
-  useEffect(() => {
-    (async function () {
-      const plantData: Plant[] = await getPlantList();
-      setPlantList(plantData);
-    })();
-  }, []);
+interface PlantListProps {
+  plantList: Plant[];
+}
+export default function PlantList(props: PlantListProps) {
+  const { plantList } = props;
 
   return (
     <StWrapper>
@@ -25,12 +18,12 @@ export default function PlantList() {
           <StRecent>최근 물주기 날짜</StRecent>
           <StAccumulated>누적 물주기</StAccumulated>
         </header>
-        {plantList.map((plant) => (
-          <ul key={plant.id}>
+        {plantList.map((plant, idx) => (
+          <ul key={`${plant.name}-${idx}`}>
             <StName>{plant.name}</StName>
-            <StName>{plant.period}일</StName>
-            <StRecent>{plant.recentDate}</StRecent>
-            <StAccumulated>{plant.accumulated}회</StAccumulated>
+            <StName>{plant.waterInterval}일</StName>
+            <StRecent>{plant.lastWaterDate}</StRecent>
+            <StAccumulated>{plant.waterCount}회</StAccumulated>
           </ul>
         ))}
       </StTable>

src/components/user/UserDetail.tsx

@@ -1,36 +1,40 @@
 import { useEffect, useState } from "react";
 import styled from "styled-components";
 
-import { getUserInfo } from "utils";
-import { User } from "utils/tempData";
 import { PlantList, UserInfo } from "..";
-import { plant1 } from "assets";
 import { theme } from "styled-tools";
+import { useRecoilValue } from "recoil";
+import { userDatum, UserDatum } from "states";
+import { client } from "utils/api";
 
-const TEMP_USER_ID: number = 5;
-const INITIAL_PROPS: User = {
-  id: 0,
-  image: "",
-  nickname: "temp",
-  email: "[email protected]",
-  phone: "0000",
-  count: "00",
-};
+export interface Plant {
+  name: string;
+  waterInterval: number;
+  lastWaterDate: string;
+  waterCount: number;
+}
 
 export default function UserDetail() {
-  const [userInfo, setUserInfo] = useState<User>(INITIAL_PROPS);
+  const [plantList, setPlantList] = useState<Plant[]>([]);
+  const user: UserDatum = useRecoilValue<UserDatum>(userDatum);
 
   useEffect(() => {
     (async function () {
-      const userData: User = await getUserInfo(TEMP_USER_ID);
-      setUserInfo({ ...userData, image: plant1 });
+      try {
+        const {
+          data: { plants },
+        } = await client.get(`/user/user/${user.id}`);
+        setPlantList(plants);
+      } catch (err) {
+        console.log("err", err);
+      }
     })();
-  }, []);
+  }, [user]);
 
   return (
     <StWrapper>
-      <UserInfo userInfo={userInfo} />
-      <PlantList />
+      <UserInfo userInfo={user} />
+      <PlantList plantList={plantList} />
     </StWrapper>
   );
 }

src/components/user/UserInfo.tsx

@@ -1,13 +1,25 @@
+import { useEffect } from "react";
 import styled from "styled-components";
 import { theme } from "styled-tools";
 
-import { User } from "utils/tempData";
+interface UserInfoProps {
+  id: number;
+  nickname: string;
+  email: string;
+  thumbNail?: string;
+}
 
-export default function UserInfo(props: { userInfo: User }) {
+export default function UserInfo(props: { userInfo: UserInfoProps }) {
   const userInfo = props.userInfo;
+  useEffect(() => {
+    console.log(userInfo);
+  }, [userInfo]);
+
   return (
     <StWrapper>
-      <img src={userInfo.image} alt="userThumbNail-1" />
+      {userInfo.thumbNail ? (
+        <img src={userInfo.thumbNail} alt="userThumbNail" />
+      ) : null}
       <StInfoWrapper>
         <span>{userInfo.nickname}</span>
         {userInfo.email}