Update: 에어컨 사용 여부 처리 코드 개선. 프론트 시계에러 처리.

client/src/components/TimeNow.js

-import React from 'react';
-import { Row, Card } from 'react-bootstrap';
-import Clock from 'react-live-clock'
-import '../App.css'
-
+import React from "react";
+import { Row, Card } from "react-bootstrap";
+import Clock from "react-live-clock";
+import "../App.css";
 
 function TimeNow() {
-
-    const cardstyled = {
-        margin: 'auto',
-        padding: '1em',
-        display: 'flex',
-        justifyContent: 'center',
-        width: '100%',
-        borderWidth: '3px',
-        borderRadius: '20px',
-        borderColor: 'rgb(110, 189, 142)',
-        color: '#04AB70'
-    }
-    return (
-        <Row className='text-center w-100 my-2'>
-            <Card style={cardstyled}>
-                <Card.Title>
-                    <p>
-                        현재시각
-                    </p>
-                </Card.Title>
-                <Card.Text>
-                        <Clock format={'Y년 M월 D일'} />
-                    <br />
-                    <Clock format={'HH : mm : ss'} ticking={true} timezone={"KR"} />
-                </Card.Text>
-            </Card>
-        </Row>
-    )
+  const cardstyled = {
+    margin: "auto",
+    padding: "1em",
+    display: "flex",
+    justifyContent: "center",
+    width: "100%",
+    borderWidth: "3px",
+    borderRadius: "20px",
+    borderColor: "rgb(110, 189, 142)",
+    color: "#04AB70",
+  };
+  return (
+    <Row className="text-center w-100 my-2">
+      <Card style={cardstyled}>
+        <Card.Title>
+          <p>현재시각</p>
+        </Card.Title>
+        <Card.Text>
+          <Clock format={"Y년 M월 D일"} />
+          <br />
+          <Clock
+            format={"HH : mm : ss"}
+            ticking={true}
+            timezone={"Asia/Seoul"}
+          />
+        </Card.Text>
+      </Card>
+    </Row>
+  );
 }
 
-export default TimeNow;
\ No newline at end of file
+export default TimeNow;

client/src/components/UsingAircon.js

@@ -2,52 +2,53 @@ import axios from "axios";
 import React, { useEffect, useState } from "react";
 import { Form } from "react-bootstrap";
 import { callUserInfo, checkCookies } from "../utils/CheckDB";
-import { isLogined } from './../utils/Auth';
+import { isLogined } from "./../utils/Auth";
 
 function UsingAircon() {
-
-    const [airUsing, setAirUsing] = useState(false)
-
-    // useEffect(() => {
-    //     callUserInfo().then((res) => {
-    //         if (isLogined()) {
-    //             setAirUsing(res.using_aircon)
-    //         }
-    //         else {
-    //             console.log(res)
-    //         }
-    //     })
-    // }, [checkCookies()])
-
-    function airChange() {
-        setAirUsing(!airUsing)
-        async function Useair() {
-            const res = await axios.post('/api/edit-profile', { using_aircon: !airUsing })
-            console.log(res)
-        }
-        
-        Useair()
+  const [airUsing, setAirUsing] = useState(false);
+
+  // useEffect(() => {
+  //     callUserInfo().then((res) => {
+  //         if (isLogined()) {
+  //             setAirUsing(res.using_aircon)
+  //         }
+  //         else {
+  //             console.log(res)
+  //         }
+  //     })
+  // }, [checkCookies()])
+
+  function airChange() {
+    setAirUsing(!airUsing);
+    async function Useair() {
+      const res = await axios.get("/api/toggle-aircon");
+      console.log(res);
     }
 
-
-    console.log('airUsing', airUsing)
-
-    return (
-        <>
-            {isLogined() &&
-                <Form
-                    key='checkbox' className="d-flex justify-content-center w-100" style={{ flexDirection: 'row-reverse' }}>
-                    <Form.Check
-                        type='switch'
-                        id='airconditioner'
-                        label='에어컨 사용중'
-                        onChange={airChange}
-                        checked={airUsing}
-                    />
-                </Form>
-            }
-        </>
-    )
+    Useair();
+  }
+
+  console.log("airUsing", airUsing);
+
+  return (
+    <>
+      {isLogined() && (
+        <Form
+          key="checkbox"
+          className="d-flex justify-content-center w-100"
+          style={{ flexDirection: "row-reverse" }}
+        >
+          <Form.Check
+            type="switch"
+            id="airconditioner"
+            label="에어컨 사용중"
+            onChange={airChange}
+            checked={airUsing}
+          />
+        </Form>
+      )}
+    </>
+  );
 }
 
-export default UsingAircon;
\ No newline at end of file
+export default UsingAircon;

server/API명세서.md

@@ -15,6 +15,7 @@
 | Auth           |     GET     | /confirm?...      | 메일 인증용 토큰의 유효성 확인 요청                         |
 | User Info      |     GET     | /user-info        | 회원 정보 요청                                              |
 | User Info      |    POST     | /edit-profile     | 회원 정보 수정 요청                                         |
+| User Info      |     GET     | /toggle-aircon    | 회원의 에어컨 사용 여부 정보 수정 요청                      |
 
 <br><br>
 
@@ -186,3 +187,8 @@
 
 1. 로그아웃 요청 주소 생성
    : 로그아웃 요청 시 클라이언트의 쿠키에 저장된 토큰을 없애도록 처리.
+
+### 2021.07.31 \_ 에어컨 사용
+
+1. 에어컨 사용 토글 버튼 처리 주소 생성
+   : 사용자의 에어컨 사용 여부 변환 처리.

server/src/routers/globalRouter.js

@@ -32,6 +32,6 @@ globalRouter.get(routes.confirm, getConfirm);
 // User Info
 globalRouter.get(routes.userinfo, onlyPrivate, getUserInfo);
 globalRouter.post(routes.editProfile, onlyPrivate, postEditProfile);
-globalRouter.post(routes.toggleAircon, onlyPrivate, getToggleAircon);
+globalRouter.get(routes.toggleAircon, onlyPrivate, getToggleAircon);
 
 export default globalRouter;