lywon725 · monlaeng · Nov 19, 2022 · Nov 19, 2022
diff --git a/backend/backend/__pycache__/settings.cpython-311.pyc b/backend/backend/__pycache__/settings.cpython-311.pyc
diff --git a/backend/backend/settings.py b/backend/backend/settings.py
@@ -130,9 +130,33 @@
 # https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field
 
 DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
-
 CORS_ORIGIN_WHITELIST = (
     'http://localhost:3000',
     'http://localhost:8000',
-    'http://127.0.0.1:8000'
+    'http://127.0.0.1:8000',
+    'http://127.0.0.1:3000',
+
+    'http://10.90.0.232:3000',
+    'http://10.90.0.232:8000',
 )
+
+CORS_ALLOW_METHODS = (
+    'DELETE',
+    'GET',
+    'OPTIONS',
+    'PATCH',
+    'POST',
+    'PUT',
+)
+
+CORS_ALLOW_HEADERS = (
+    'accept',
+    'accept-encoding',
+    'authorization',
+    'content-type',
+    'dnt',
+    'origin',
+    'user-agent',
+    'x-csrftoken',
+    'x-requested-with',
+)
diff --git a/backend/db.sqlite3 b/backend/db.sqlite3
diff --git a/new_year_message/package-lock.json b/new_year_message/package-lock.json
diff --git a/new_year_message/package.json b/new_year_message/package.json
@@ -12,6 +12,7 @@
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
     "axios": "^1.1.3",
+    "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intersection-observer": "^9.4.1",

diff --git a/new_year_message/src/pages/Category.js b/new_year_message/src/pages/Category.js
@@ -66,7 +66,7 @@ function Mainpage() {
         <S.InputLine/>
 
 
-        <Modal isOpen={modalIsOpen} onRequestClose={() => setModalIsOpen(false)} 
+        <Modal isOpen={modalIsOpen}  onRequestClose={() => setModalIsOpen(false)} 
         style={{
             overlay: {
             position: "fixed",
@@ -81,10 +81,10 @@ function Mainpage() {
                 transform: "translate(-51.8%)",
                 width: "335px",
                 height: "270px",
-                borderRadius: "25px 25px 0 0",
+                borderRadius: "25px 25px 0 0", 
 
         },
-        }}>
+        }} >
             <div class="listTitle">카테고리</div>
                 <div class="listcnt"  >
                     <div class="li" onClickCapture={() => {select(); setCate(1)}}>{CATEGORIES[0].title}</div>

diff --git a/new_year_message/src/pages/MCheck.js b/new_year_message/src/pages/MCheck.js
@@ -1,4 +1,4 @@
-import React, {useState, useEffect} from 'react'
+import React, {useState, useEffect, useRef, useCallback} from 'react'
 import styled from 'styled-components';
 import * as S from '../styles/Majorcss';
 import "../styles/main.css"
@@ -11,6 +11,7 @@ import ginger1 from '../img/Gingerbread.png';
 import ginger2 from '../img/Gingerbread2.png';
 
 import axios from 'axios';
+import moment from "moment";
 
 const MainButton = styled.button`
 background: #FFFFFF;
@@ -36,6 +37,7 @@ color: #8571FF;
 
 `
 
+
 function MCheck() {
     //리덕스
     let a = useSelector((state) => { return state } )
@@ -61,23 +63,57 @@ function MCheck() {
 
 
     const cnt = DB.length;
-    const per = cnt * 10;
+    const per = cnt * 2;
     console.log(cnt);
     document.querySelector(".countP").innerHTML = cnt;
     document.querySelector(".progress-level").style.width = per + "%";
     }
+    const countDownTimer = useCallback((date) => {
+        let _vDate = moment(date);
+        let _second = 1000;
+        let _minute = _second * 60;
+        let _hour = _minute * 60;
+        let _day = _hour * 24;
+        let timer;
+
+        function showRemaining() {
+            try {
+                let now = moment();
+                let distDt = _vDate - now;
+
+                if (distDt < 0) {
+                    clearInterval(timer);
+                    let HapDate = '0' + '일 ' + '0' + '시간 ' + '0' + '분 ' + '0' + '초 :)';
+                    document.getElementById('timer').innerHTML = HapDate;
+                    return;
+                }
+                let days = Math.floor(distDt / _day);
+                let hours = Math.floor((distDt % _day) / _hour);
+                let minutes = Math.floor((distDt % _hour) / _minute);
+                let seconds = Math.floor((distDt % _minute) / _second);
+
+                let HapDate = parseInt(days) + '일 ' + parseInt(hours) + '시간 ' + parseInt(minutes) + '분 ' + parseInt(seconds) + '초:)';
+                document.getElementById('timer').innerHTML = HapDate;
+            }
+            catch (e) {
+                console.log(e);
+            }
+        }
+        timer = setInterval(showRemaining, 1000);
+    }, []);
+
 
     return (
         <S.Wrapper>
-        <S.Text>메시지 확인까지 <br/>13시간 12분 15초 남았어요!</S.Text>
+        <S.Text>메시지 확인까지 <div id="timer">{countDownTimer('2023-01-01')}</div></S.Text>
         <div class="margin">
-        <div class="progress" onWaiting={getDate()}>
+        <div class="progress"  onBeforeInputCapture={getDate()}>
             <div class="progress-level" ></div>
         </div>
         </div>
         <S.textP>
             현재 작성된 메시지 총&nbsp;
-            <p class="countP">100</p>
+            <p class="countP">&nbsp;</p>
             개
         </S.textP>
         <div>

diff --git a/new_year_message/src/pages/Mainpage.js b/new_year_message/src/pages/Mainpage.js
@@ -33,6 +33,7 @@ color: #8571FF;
 
 
 function Mainpage() {
+
 
     const [DB, setDB]= useState([]);
     const getDate = async()=>{
@@ -48,10 +49,11 @@ function Mainpage() {
 
 
     const cnt = DB.length;
-    const per = cnt * 10;
-    console.log(cnt);
+    const per = cnt * 2;
+
     document.querySelector(".countP").innerHTML = cnt;
     document.querySelector(".progress-level").style.width = per + "%";
+
     }
     return (
         <>
@@ -61,12 +63,12 @@ function Mainpage() {
                     <br/>응원의 메시지를 
                     <br/>작성해주세요 🍀
                 </S.Text>
-                <div class="progress" onWaiting={getDate()}>
-                    <div class="progress-level" ></div>
+                <div class="progress">
+                    <div class="progress-level" onBeforeInputCapture={getDate()} ></div>
                 </div>
                 <S.textP>
                     현재 작성된 메시지 총&nbsp;
-                    <p class="countP">100</p>
+                    <p class="countP">&nbsp;</p>
                     개
                 </S.textP>
                 <div>

diff --git a/new_year_message/yarn.lock b/new_year_message/yarn.lock
@@ -9722,6 +9722,11 @@ mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.6, mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.6"
 
+moment@*:
+  version "2.29.4"
+  resolved "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz"
+  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz"