Merge pull request #23 from payw-org/feat/19-main-todo

Feat/19 main todo

package.json

@@ -51,6 +51,7 @@
     "firebase": "^8.2.6",
     "react": "^17.0.1",
     "react-datepicker": "^3.4.1",
-    "react-dom": "^17.0.1"
+    "react-dom": "^17.0.1",
+    "squircle.js": "^0.3.0"
   }
 }

public/data/data.json

@@ -1,5 +1,4 @@
 {
-  "mainDate": "2022-02-11 23:59:59",
   "sideBookmarkList": [
     {
       "id": 1,
@@ -69,32 +68,32 @@
       "sectionId": 1,
       "id": 1,
       "title": "과제 제출하기",
-      "dueDate": "2021-02-11 23:59:59",
+      "dueDate": "2021-03-11 23:59:59",
       "isMain": false
     },
     {
       "sectionId": 1,
       "id": 2,
       "title": "스테이크 굽기",
-      "dueDate": "2021-02-07 18:30:00",
+      "dueDate": "2021-03-01 18:30:00",
       "isMain": false
     },
     {
       "sectionId": 1,
       "id": 3,
       "title": "과제 제출하기",
-      "dueDate": "2021-02-11 23:59:59",
+      "dueDate": "2021-04-04 23:59:59",
       "isMain": false
     },
     {
-      "sectionId": 1,
+      "sectionId": 2,
       "id": 4,
       "title": "과제하기",
       "dueDate": "2021-02-11 23:59:59",
       "isMain": false
     },
     {
-      "sectionId": 1,
+      "sectionId": 2,
       "id": 5,
       "title": "개발",
       "dueDate": "2021-02-11 23:59:59",
@@ -120,6 +119,34 @@
       "title": "과제 제출하기",
       "dueDate": "2021-02-11 23:59:59",
       "isMain": false
+    },
+    {
+      "sectionId": 2,
+      "id": 9,
+      "title": "똑딱 만들기",
+      "dueDate": "2021-02-10 23:59:59",
+      "isMain": false
+    },
+    {
+      "sectionId": 2,
+      "id": 10,
+      "title": "똑딱 뚝딱만들기",
+      "dueDate": "2021-02-07 23:59:59",
+      "isMain": false
+    },
+    {
+      "sectionId": 2,
+      "id": 11,
+      "title": "똑딱 똑딱뚝딱만들기",
+      "dueDate": "2021-02-07 23:59:59",
+      "isMain": false
+    },
+    {
+      "sectionId": 2,
+      "id": 11,
+      "title": "똑딱 얼렁뚱땅 만들기",
+      "dueDate": "2021-02-06 23:59:59",
+      "isMain": false
     }
   ],
   "toggleConfig": {

src/App.tsx

@@ -1,19 +1,23 @@
 import React from 'react'
 import { Store } from '@/store'
-import { Timer } from '@/components/Timer'
+import { MainSection } from '@/components/MainSection'
 import { SideMenuBar } from '@/components/SideMenuBar'
 import { TodoContainer } from '@/components/TodoContainer'
 import '@/style/fonts.scss'
 import '@/style/global.scss'
 
 const App: React.FC = () => {
   return (
-    <Store>
-      <div id="bg" style={{ backgroundImage: 'url("images/bg/2.jpg")' }}></div>
-      <Timer />
-      <SideMenuBar />
-      <TodoContainer />
-    </Store>
+    <>
+      <div id="bg" style={{ backgroundImage: 'url("images/bg/1.jpg")' }}>
+        <img id="bg-overlay" src="images/bg/overlay.png"></img>
+      </div>
+      <Store>
+        <MainSection />
+        <SideMenuBar />
+        <TodoContainer />
+      </Store>
+    </>
   )
 }
 

src/components/Timer/DisplayTime/index.tsx → src/components/MainSection/Timer/DisplayTime/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import './style.scss'
 
-interface DisplayTimeProps {
+type DisplayTimeProps = {
   currentTime: string
   nextTime: string
   unit: string

src/components/Timer/DisplayTime/style.scss → src/components/MainSection/Timer/DisplayTime/style.scss

@@ -1,12 +1,14 @@
+@use '@/style/package' as *;
+
 .display-time {
   display: flex;
   align-items: baseline;
-  letter-spacing: 0.025em;
-  font-weight: 600;
-  margin-right: 16px;
+  text-shadow: 0 2px 4px rgba($color-black, 33%);
+  margin-right: 1.6rem;
 
   .value-wrapper {
     position: relative;
+    font-weight: 600;
 
     .next-value {
       position: absolute;
@@ -18,22 +20,24 @@
     .next-value {
       display: flex;
       justify-content: flex-end;
-      font-size: 84px;
+      font-size: 10rem;
       line-height: 1.2em;
-      color: #111;
+      color: $color-gray-50;
       text-align: center;
 
       div {
         span {
           display: inline-block;
-          width: 55px;
+          width: 6.4rem;
         }
       }
     }
   }
 
   .unit {
-    font-size: 48px;
-    color: #222;
+    font-size: 3.2rem;
+    font-weight: 500;
+    color: $color-gray-50;
+    margin-left: 0.4rem;
   }
 }

src/components/Timer/index.tsx → src/components/MainSection/Timer/index.tsx

@@ -1,35 +1,41 @@
 import React, { useEffect, useState } from 'react'
-import { useStore } from '@/store'
 import { getDDay, getTwoDigit } from '@/utils/time'
 import { DisplayTime } from './DisplayTime'
 import './style.scss'
 
-export const Timer: React.FC = () => {
-  const {
-    store: { mainDate },
-  } = useStore()
+export type TimerProps = {
+  mainDate: Date
+}
 
+const getRestTime = (origin: Date, current: Date, isNext = false): string[] => {
+  const isOutOfDate = origin < current
+  const timeGap: Date = new Date(
+    isOutOfDate
+      ? current.getTime() - origin.getTime() + (isNext ? 1000 : 0)
+      : origin.getTime() - current.getTime() - (isNext ? 1000 : 0)
+  )
+  return getDDay(timeGap).map((v, index) =>
+    index === 0 ? `${v}` : getTwoDigit(v)
+  )
+}
+
+export const Timer: React.FC<TimerProps> = ({ mainDate }) => {
   const [currentDateTime, setCurrentDateTime] = useState(new Date())
   useEffect(() => {
     setTimeout(() => {
       setCurrentDateTime(new Date())
     }, 1000)
   }, [currentDateTime])
 
-  const timeGap: Date = new Date(mainDate.getTime() - currentDateTime.getTime())
-  const [restDay, hour, minute, second] = getDDay(timeGap).map((v) =>
-    getTwoDigit(v)
-  )
-
-  const nextTimeGap: Date = new Date(
-    mainDate.getTime() - currentDateTime.getTime() - 1000
+  const [restDay, hour, minute, second] = getRestTime(mainDate, currentDateTime)
+  const [nextRestDay, nextHour, nextMinute, nextSecond] = getRestTime(
+    mainDate,
+    currentDateTime,
+    true
   )
-  const [nextRestDay, nextHour, nextMinute, nextSecond] = getDDay(
-    nextTimeGap
-  ).map((v) => getTwoDigit(v))
 
   return (
-    <div className="timer">
+    <div className="timer" data-component="">
       <DisplayTime
         currentTime={restDay}
         nextTime={nextRestDay}

src/components/MainSection/Timer/style.scss

@@ -0,0 +1,7 @@
+@use '@/style/package' as *;
+
+.timer[data-component] {
+  @include bg-overlay(6rem);
+  width: max-content;
+  display: flex;
+}

src/components/MainSection/index.tsx

@@ -0,0 +1,48 @@
+import React, { useRef, useState } from 'react'
+import { useStore } from '@/store'
+import { getFormattedDate } from '@/utils/time'
+import { setElementAtCursor } from '@/utils/events'
+import { Timer } from './Timer'
+import './style.scss'
+
+export const MainSection: React.FC = () => {
+  const {
+    store: { mainTodo },
+  } = useStore()
+  const [isShowDate, setIsShowDate] = useState<boolean>(false)
+  const dateElement = useRef<HTMLDivElement>(null)
+
+  const showDate = (e) => {
+    if (!isShowDate) setIsShowDate(true)
+
+    setTimeout(() => {
+      if (!dateElement.current) return
+
+      setElementAtCursor(dateElement.current, e)
+    }, 0)
+  }
+
+  return (
+    <div className="main-section" data-component="">
+      <div className="title-wrapper">
+        <span
+          className="title"
+          onPointerMove={showDate}
+          onPointerOut={() => setIsShowDate(false)}
+        >
+          {mainTodo.title}
+          <div
+            className={'date ' + (isShowDate ? 'show' : 'hide')}
+            ref={dateElement}
+          >
+            {getFormattedDate(mainTodo.dueDate, 'YYYY년 M월 D일 hh:mm:ss')}
+          </div>
+        </span>
+        <span className="suffix">
+          {mainTodo.dueDate > new Date() ? '남은시간' : '지난시간'}
+        </span>
+      </div>
+      <Timer mainDate={mainTodo.dueDate}></Timer>
+    </div>
+  )
+}

src/components/MainSection/style.scss

@@ -0,0 +1,61 @@
+@use '@/style/package' as *;
+
+.main-section[data-component] {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  > .title-wrapper {
+    @include bg-overlay(7.3rem);
+    width: fit-content;
+    margin: 0 auto;
+    margin-bottom: 2rem;
+    text-shadow: 0 1px 2px rgba($color-black, 33%);
+
+    .title {
+      position: relative;
+      font: {
+        size: 6rem;
+        weight: 500;
+      }
+      letter-spacing: -0.01em;
+      color: $color-gray-50;
+
+      .date {
+        transition: opacity 0.2s 0.1s;
+        position: absolute;
+        width: max-content;
+        font: {
+          size: 1.4rem;
+          weight: 500;
+        }
+        color: $color-gray-700;
+        background-color: $color-gray-50;
+        padding: 0.5rem 0.9rem;
+        border-radius: 0.4rem;
+        box-shadow: 0 0.4rem 0.8rem rgba($color-black, 50%);
+        text-shadow: none;
+        pointer-events: none;
+
+        &.show {
+          opacity: 1;
+        }
+
+        &.hide {
+          opacity: 0;
+        }
+      }
+    }
+
+    .suffix {
+      font: {
+        size: 3.2rem;
+        weight: 500;
+      }
+      letter-spacing: -0.02em;
+      color: $color-gray-50;
+      margin-left: 1.2rem;
+    }
+  }
+}