🔀 Merge pull request #66 from alittlekitten/design-v1.6.1

Feature/v1.6.1 D-Day 탭 중심 로직 및 디자인 패치 (기타 디자인 패치 포함)

README.md

@@ -19,11 +19,11 @@
 
 **👉 배포 페이지 : https://alittlekitten.github.io/SsocoTimer/**
 
-**최신 업데이트 날짜 : `2022.04.29`**
+**최신 업데이트 날짜 : `2022.06.05`**
 
-**최신 릴리즈 버전 : `ver 1.6.0`**
+**최신 릴리즈 버전 : `ver 1.6.1`**
 
-![Honeycam 2022-04-29 04-29-39](https://user-images.githubusercontent.com/14370441/165831202-631f382a-96a9-40f1-aaab-65316f97f678.gif)
+![Honeycam 2022-06-05 01-07-53](https://user-images.githubusercontent.com/14370441/172014867-12fedd62-705a-4e09-865a-c5586d77bbd6.gif)
 
 - `React`와 `CRA`를 이용해서 간단한 스톱워치와 타이머 기능을 가진 애플리케이션을 만들어보는 연습용 레포지토리입니다.
 - React의 기본적인 동작 방식을 익히고 있습니다.
@@ -199,6 +199,14 @@
 - [x] svg 사진에 설명(alt) 추가 - svg 파일에 alt속성을 직접 줄 수 없어 우회적으로 title 적용
 - [x] 탭에 들어가는 이름에 띄어쓰기 추가
 
+### `22.06.05` - `v1.6.1`
+
+- [x] 화면이 작은 경우 스크롤이 생기는 부분 제거
+- [x] 해당 월에 없는 날짜가 화면에 남아있는 현상 제거
+- [x] useDday 비즈니스 로직을 별도로 분리
+- [x] 다크모드일 때 nav바에 흰색 그림자 추가
+- [x] D-day부분 결과 메시지창 컬러 하이라이팅으로 가독성 향상
+
 <br />
 
 ## 🗝 고민한 점
@@ -303,7 +311,7 @@
   - 이 과정을 통해 컴포넌트는 출력 부분, 커스텀 훅은 로직 부분을 담당하는 관심사 분리가 보다 명확하게 이루어질 수 있었습니다.
 - 또한 재사용이 가능한 Time Management와 관련된 부분을 별도로 커스텀 훅으로 뽑아내서 hooks 폴더의 utils 폴더 안에 넣었습니다. (커스텀 훅 2단 분리)
   - 그렇게 빼낸 useTimeManage 커스텀 훅은 각각의 컴포넌트 담당 커스텀 훅에서 사용했습니다.
-- 현재까지 가장 큰 3개의 기능단위인 Timer, Stopwatch, Clock에 대한 비즈니스 로직 분리를 완료했습니다.
+- 현재까지 가장 큰 4개의 기능단위인 Timer, Stopwatch, Clock, Dday에 대한 비즈니스 로직 분리를 완료했습니다.
   - 다만 각각의 비즈니스 로직 단위도 다소 큰 부분이 있어서 조금 더 세세하게 나눌 예정입니다.
 - 추가로 전역 store에서 useSelector로 가져오는 상태를 래핑하는 커스텀 훅을 생성해서 사용할 예정입니다.
 
@@ -376,6 +384,10 @@
 
 ## 🎞 움짤
 
+### ver 1.6.1
+
+![Honeycam 2022-06-05 01-07-53](https://user-images.githubusercontent.com/14370441/172014867-12fedd62-705a-4e09-865a-c5586d77bbd6.gif)
+
 ### ver 1.6.0
 
 ![Honeycam 2022-04-29 04-29-39](https://user-images.githubusercontent.com/14370441/165831202-631f382a-96a9-40f1-aaab-65316f97f678.gif)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ssocotimer",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "private": true,
   "dependencies": {
     "@babel/preset-react": "^7.16.7",

src/components/Dday.tsx

@@ -1,56 +1,20 @@
 import { css, useTheme } from "@emotion/react";
-import React, { useEffect, useState } from "react";
+import useDday from "@hooks/useDday";
 import { ThemeVariables } from "@styles/palette";
 import { Helmet } from "react-helmet-async";
 
 const Dday = () => {
-  const nowTime = new Date();
-  const [year, setYear] = useState<number>(nowTime.getFullYear());
-  const [month, setMonth] = useState<number>(nowTime.getMonth() + 1);
-  const [day, setDay] = useState<number>(nowTime.getDate());
-  const [msg, setMsg] = useState<string>("");
+  const {
+    year,
+    month,
+    day,
+    ddayCal,
+    yearOnChange,
+    monthOnChange,
+    dayOnChange,
+  } = useDday();
   const theme = useTheme() as ThemeVariables;
 
-  const yearOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const nowYear = new Date().getFullYear();
-    const originalValue = e.target.value;
-    const onlyNumber = originalValue.replace(/[^0-9]/g, "");
-    if (!onlyNumber) setYear(0);
-    else if (+onlyNumber > 2099) setYear(nowYear);
-    else setYear(+onlyNumber);
-  };
-
-  const monthOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const originalValue = e.target.value;
-    const onlyNumber = originalValue.replace(/[^0-9]/g, "");
-    if (!onlyNumber) setMonth(0);
-    else if (+onlyNumber > 12) return;
-    else setMonth(+onlyNumber);
-  };
-
-  const dayOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const maxDay = new Date(year, month, 0).getDate();
-    const originalValue = e.target.value;
-    const onlyNumber = originalValue.replace(/[^0-9]/g, "");
-    if (!onlyNumber) setDay(0);
-    else if (+onlyNumber > maxDay) return;
-    else setDay(+onlyNumber);
-  };
-
-  useEffect(() => {
-    const today = new Date();
-    const dday = new Date(year, month - 1, day);
-    const calGetTime = today.getTime() - dday.getTime();
-    const result = Math.floor(calGetTime / (1000 * 60 * 60 * 24));
-    if (year < 1970 || year > 2099 || month === 0 || day === 0) {
-      setMsg("유효하지 않은 날짜입니다!");
-    } else {
-      if (result === 0) setMsg(`오늘이 바로 D-Day!`);
-      else if (result > 0) setMsg(`오늘로부터 ${result}일 지났습니다!!`);
-      else setMsg(`앞으로 ${Math.abs(result)}일 남았습니다!!!`);
-    }
-  }, [year, month, day]);
-
   return (
     <>
       <Helmet>
@@ -82,7 +46,21 @@ const Dday = () => {
         </p>
       </div>
       <div css={resultContainer(theme)}>
-        <p>{msg}</p>
+        {ddayCal === null ? (
+          <p>유효하지 않은 날짜입니다!</p>
+        ) : ddayCal === 0 ? (
+          <p>
+            오늘이 바로 <span>D-day</span>!!
+          </p>
+        ) : ddayCal > 0 ? (
+          <p>
+            오늘로부터 <span>{ddayCal}</span>일 지났습니다!!
+          </p>
+        ) : (
+          <p>
+            앞으로 <span>{Math.abs(ddayCal)}</span>일 남았습니다!!
+          </p>
+        )}
       </div>
     </>
   );
@@ -135,6 +113,10 @@ const resultContainer = (theme: ThemeVariables) => css`
     line-height: 50px;
     vertical-align: middle;
     color: ${theme.text1};
+
+    span {
+      color: ${theme.highlightText};
+    }
   }
 `;
 

src/components/Header.tsx

@@ -35,7 +35,7 @@ const Header = () => {
   return (
     <div>
       <div css={main(theme)}>
-        <span className="version">Ssoco Timer v1.6.0 </span>
+        <span className="version">Ssoco Timer v1.6.1 </span>
 
         <div className="icons">
           <span className="copyright">

src/components/Nav.tsx

@@ -8,14 +8,17 @@ const Nav = () => {
   const { tap } = useSelector((state: RootState) => state.tapReducer);
   const dispatch = useDispatch(); // store의 reducer를 부름 -> reducer를 통해 새로운 action을 넘겨줌으로써 state를 변경함
   const theme = useTheme() as ThemeVariables;
+  const { themeStatus } = useSelector(
+    (state: RootState) => state.optionReducer
+  );
 
   const onClickTimer = () => dispatch({ type: "Timer" });
   const onClickStopwatch = () => dispatch({ type: "Stopwatch" });
   const onClickClock = () => dispatch({ type: "Clock" });
   const onClickDday = () => dispatch({ type: "Dday" });
 
   return (
-    <div css={Buttons({ tap, theme })}>
+    <div css={Buttons({ tap, theme, themeStatus })}>
       <Link to="/">
         <button className="timer" onClick={onClickTimer}>
           타이머
@@ -43,6 +46,7 @@ const Nav = () => {
 interface ButtonsProps {
   tap: String;
   theme: ThemeVariables;
+  themeStatus: String;
 }
 
 const Buttons = (props: ButtonsProps) => css`
@@ -64,8 +68,11 @@ const Buttons = (props: ButtonsProps) => css`
     border: none;
     border-radius: 4px;
 
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-      0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: ${props.themeStatus === "light"
+      ? `0 4px 6px -1px rgba(0, 0, 0, 0.1),
+      0 2px 4px -1px rgba(0, 0, 0, 0.06);`
+      : `0 4px 6px -1px rgba(255, 255, 255, 0.5),
+      0 2px 4px -1px rgba(255, 255, 255, 0.3);`};
 
     cursor: pointer;
 

src/hooks/useDday.tsx

@@ -0,0 +1,61 @@
+import React, { useState, useEffect } from "react";
+
+const useDday = () => {
+  const nowTime = new Date();
+  const [year, setYear] = useState<number>(nowTime.getFullYear());
+  const [month, setMonth] = useState<number>(nowTime.getMonth() + 1);
+  const [day, setDay] = useState<number>(nowTime.getDate());
+  const [ddayCal, setDdayCal] = useState<number | null>(0);
+
+  const yearOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const nowYear = new Date().getFullYear();
+    const originalValue = e.target.value;
+    const onlyNumber = originalValue.replace(/[^0-9]/g, "");
+    if (!onlyNumber) setYear(0);
+    else if (+onlyNumber > 2099) setYear(nowYear);
+    else setYear(+onlyNumber);
+  };
+
+  const monthOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const originalValue = e.target.value;
+    const onlyNumber = originalValue.replace(/[^0-9]/g, "");
+    if (!onlyNumber) setMonth(0);
+    else if (+onlyNumber > 12) return;
+    else setMonth(+onlyNumber);
+  };
+
+  const dayOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const maxDay = new Date(year, month, 0).getDate();
+    const originalValue = e.target.value;
+    const onlyNumber = originalValue.replace(/[^0-9]/g, "");
+    if (!onlyNumber) setDay(0);
+    else if (+onlyNumber > maxDay) return;
+    else setDay(+onlyNumber);
+  };
+
+  useEffect(() => {
+    const today = new Date();
+    const dday = new Date(year, month - 1, day);
+    const maxDay = new Date(year, month, 0).getDate();
+    if (day > maxDay) setDay(maxDay);
+    const calGetTime = today.getTime() - dday.getTime();
+    const result = Math.floor(calGetTime / (1000 * 60 * 60 * 24));
+    if (year < 1970 || year > 2099 || month === 0 || day === 0) {
+      setDdayCal(null);
+    } else {
+      setDdayCal(result);
+    }
+  }, [year, month, day]);
+
+  return {
+    year,
+    month,
+    day,
+    ddayCal,
+    yearOnChange,
+    monthOnChange,
+    dayOnChange,
+  };
+};
+
+export default useDday;

src/index.css

@@ -8,6 +8,7 @@ html {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  overflow: hidden;
 }
 
 code {

src/styles/palette.ts

@@ -26,6 +26,7 @@ const themeVariableSets: Record<Theme, ThemeVariables> = {
     hrLine: "#F9EDED",
     text1: "#000000",
     text2: "#282828",
+    highlightText: "#CF393E",
     hour12am: "#FF6B6B",
     hour12pm: "#0083FF",
     alert1: "#FFD3D3",
@@ -54,6 +55,7 @@ const themeVariableSets: Record<Theme, ThemeVariables> = {
     hrLine: "#F9EDED",
     text1: "#FFFFFF",
     text2: "#E0E0E0",
+    highlightText: "#FFFCA5",
     hour12am: "#FF6B6B",
     hour12pm: "#0083FF",
     alert1: "#FFD3D3",