diff --git a/README.md b/README.md
index 261f826..b08f37b 100644
--- a/README.md
+++ b/README.md
@@ -2,11 +2,11 @@
**๐ ๋ฐฐํฌ ํ์ด์ง : https://alittlekitten.github.io/SsocoTimer/**
-**์ต์ ์
๋ฐ์ดํธ ๋ ์ง : `2022.02.15`**
+**์ต์ ์
๋ฐ์ดํธ ๋ ์ง : `2022.02.16`**
-**์ต์ ๋ฆด๋ฆฌ์ฆ ๋ฒ์ : `ver 1.0.1`**
+**์ต์ ๋ฆด๋ฆฌ์ฆ ๋ฒ์ : `ver 1.0.2`**
-
+
- React์ CRA๋ฅผ ์ด์ฉํด์ ๊ฐ๋จํ ์คํ์์น๋ฅผ ๋ง๋ค์ด๋ณด๋ ์ฐ์ต์ฉ ๋ ํฌ์งํ ๋ฆฌ์
๋๋ค.
- React์ ๊ธฐ๋ณธ์ ์ธ ๋์ ๋ฐฉ์์ ์ตํ๊ณ ์์ต๋๋ค.
@@ -82,56 +82,64 @@
### `22.02.14`
- [x] ๊ฐ๋ฐ์ ์ ๋ณด ์ถ๊ฐ (๊นํ๋ธ ํ์ด์ง์ ํฐ์คํ ๋ฆฌ ํ์ด์ง ๋งํฌ ๋ฒํผ ์์ฑ)
-- [x] ๋ฒํผ ํฌ๊ธฐ ๋ณ๊ฒฝ์ผ๋ก ์ธํ ์์ ์์น๋ณํ ๋ฒ๊ทธ ์ ๊ฑฐ
+- [x] ๋ฒํผ ํฌ๊ธฐ ๋ณ๊ฒฝ์ผ๋ก ์ธํ ์์ ์์น๋ณํ ๋ฒ๊ทธ ์ ๊ฑฐ [๐ issue๋งํฌ](https://github.com/alittlekitten/SsocoTimer/issues/1)
- [x] ๋ฒํผ์ transition์ ์ฉ
- [x] ๋ฉํ๋ฐ์ดํฐ ์ถ๊ฐ (head์ ๋ก๊ณ ์ ํ์ดํ, ์ค๋ช
์์ )
- [x] ๋๋ฉ์ธ๋ช
๋ณ๊ฒฝ (reactStopwatch -> SsocoTimer)
- [x] ๋ฐฐํฌ ์ฃผ์ ๋ณ๊ฒฝ (https://alittlekitten.github.io/SsocoTimer/)
+### `22.02.15`
+
+- [x] ํ์ด๋จธ๊ฐ ๋๋ฌ์ ๋ ์๋ ์๋ฆฌ(๊ผฌ๊ผฌ๋)๊ฐ ๋๊ฒ ํ๋ ๊ธฐ๋ฅ ์ถ๊ฐ
+- [x] ํ ๊ธ ๋ฒํผ์ ํตํด ์๋ ์๋ฆฌ๋ฅผ ์ผ๊ณ ๋ ์ ์๋ ๊ธฐ๋ฅ์ ์ถ๊ฐ
+- [x] ์ ์์์๊ฒ ๋ฉ์ผ์ ๋ณด๋ผ ์ ์๋ ๋ฒํผ ์ถ๊ฐ
+- [x] `Timer` 00:00:00์ธ ์ํ์์ -๋ฒํผ์ ๋๋ฅด๋ฉด -1:59:59๋ก ๋ณํ๋ ๋ฒ๊ทธ ์์ [๐ issue๋งํฌ](https://github.com/alittlekitten/SsocoTimer/issues/20)
+- [x] `Timer` ์ฌ์ ์ํ์์ +-๋ฒํผ์์ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ ธ๋ค๊ฐ ๋ผ๋ ์๊ฐ ์ฌ์์ด ๋ฉ์ถ๋ ๋ฒ๊ทธ ์์ [๐ issue๋งํฌ](https://github.com/alittlekitten/SsocoTimer/issues/21)
+
## ๐ ๊ณ ๋ฏผํ ์
### ์ด๋ป๊ฒ ์ฆ๊ฐ์ด ๋นจ๋ผ์ง๋ ๋ฒํผ์ ๋ง๋ค์๋๊ฐ
-- setTimeout์ ๋ ๋ฒ์งธ ์ธ์๋ฅผ ์ ์ฐจ ๊ฐ์ํ๊ฒ ๋ง๋ฆ
-- ์ฌ๊ท๋ฅผ ํตํด ๊พน ๋๋ฅด๊ณ ์์ผ๋ฉด ๊ณ์ํด์ count๊ฐ ๋์ํ๊ฒ ๊ตฌํ
-- ๋ง์ฐ์ค์ ํด๋ฆญ๊ณผ ํด๋ฆญํด์ ๋ `onMouseDown`, `onMouseUp`์ผ๋ก ๊ตฌํ
-- ์์ธ์ฌํญ ์ฒ๋ฆฌ๋ฅผ ์ํด `onMouseLeave`์ `onChange`์ด๋ฒคํธ๋ ์ฌ์ฉ
+- setTimeout์ ๋ ๋ฒ์งธ ์ธ์๋ฅผ ์ ์ฐจ ๊ฐ์ํ๊ฒ ๋ง๋ค์์ต๋๋ค.
+- ์ฌ๊ท๋ฅผ ํตํด ๊พน ๋๋ฅด๊ณ ์์ผ๋ฉด ๊ณ์ํด์ count๊ฐ ๋์ํ๊ฒ ๊ตฌํํ์ต๋๋ค.
+- ๋ง์ฐ์ค์ ํด๋ฆญ๊ณผ ํด๋ฆญํด์ ๋ `onMouseDown`, `onMouseUp`์ผ๋ก ๊ตฌํํ์ต๋๋ค.
+- ์์ธ์ฌํญ ์ฒ๋ฆฌ๋ฅผ ์ํด `onMouseLeave`์ `onChange`์ด๋ฒคํธ๋ฅผ ์ฌ์ฉํ์ต๋๋ค.
### input์ ์
๋ ฅ๋ฐ๊ธฐ
-- ์๋ฌด ๊ธ์๋ ์ฐ์ ์
๋ ฅ๋ฐ๊ณ , input์ value๊ฐ ๋ณํ ๋๋ง๋ค `onChange` ์ด๋ฒคํธ๋ก ๊ฐ์
-- ์
๋ ฅ๋ฐ์ ๊ฐ์์ ์ซ์๋ฅผ ์ ์ธํ ๊ฐ์ ์ ๋ถ regex๋ฅผ ์ด์ฉํด์ ์ถ์ถ
-- input๊ฐ์ textํํ๋ก ๋ฐ์ผ๋ฏ๋ก numberํํ๋ก ๋ฐ๊ฟ์ time์ ์ ์ฉ
+- ์๋ฌด ๊ธ์๋ ์ฐ์ ์
๋ ฅ๋ฐ๊ณ , input์ value๊ฐ ๋ณํ ๋๋ง๋ค `onChange` ์ด๋ฒคํธ๋ก ๊ฐ์ํฉ๋๋ค.
+- ์
๋ ฅ๋ฐ์ ๊ฐ์์ ์ซ์๋ฅผ ์ ์ธํ ๊ฐ์ ์ ๋ถ regex๋ฅผ ์ด์ฉํด์ ์ถ์ถํ์ต๋๋ค.
+- input๊ฐ์ textํํ๋ก ๋ฐ์ผ๋ฏ๋ก numberํํ๋ก ๋ฐ๊ฟ์ time์ ์ ์ฉํ์ต๋๋ค.
### ์ซ์ ๊ฐ์๊ฐ 0์์ ๋ฉ์ถ๊ฒ ํ๊ธฐ
-- repeatCount ํจ์ ๋ด์์ setTime ํจ์๊ฐ ์๋ํ ๋ ์กฐ๊ฑด๋ฌธ์ ๊ฑธ์ด์ค
-- ๋ง์ฝ ์๊ฐ์ด ๊ฐ์ํด์ 0์ด ๋๋ ๊ฒฝ์ฐ ๋์ด์ ๊ฐ์ํ์ง ์๋๋ก ์์ธ์ฒ๋ฆฌ
+- repeatCount ํจ์ ๋ด์์ setTime ํจ์๊ฐ ์๋ํ ๋ ์กฐ๊ฑด๋ฌธ์ ๊ฑธ์์ต๋๋ค.
+- ๋ง์ฝ ์๊ฐ์ด ๊ฐ์ํด์ 0์ด ๋๋ ๊ฒฝ์ฐ ๋์ด์ ๊ฐ์ํ์ง ์๋๋ก ์์ธ์ฒ๋ฆฌํ์ต๋๋ค.
### svg ๋ฒํผ ํธ๋ฒ์ ํด๋ฆญ์ ํจ๊ณผ ๋ฃ๊ธฐ
-- `{ ReactComponent as Plus }`๋ฅผ ์ฌ์ฉํ์ฌ svgํ์ผ์ ์ปดํฌ๋ํธ์ฒ๋ผ ์ฌ์ฉ
+- `{ ReactComponent as Plus }`๋ฅผ ์ฌ์ฉํ์ฌ svgํ์ผ์ ์ปดํฌ๋ํธ์ฒ๋ผ ์ฌ์ฉํ์ต๋๋ค.
### ์กฐ๊ฑด๋ถ ์คํ์ผ ์ ์ฉํ๊ธฐ
-- ๊ธฐ์กด์๋ useState๋ง์ผ๋ก time์ ๊ด๋ฆฌํ์ง๋ง, setTimeout์ ์ฌ๊ท๋ฅผ ์ฌ์ฉํ๋ค๋ณด๋ ์ค์๊ฐ์ผ๋ก time์ด ๋ฐ๋์ง ์๋ ๋ฌธ์ ๊ฐ ๋ฐ์
-- ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ์์๋ก ์ ์ญ์ nowTime์ด๋ผ๋ ๋ณ์๋ฅผ ๋ง๋ฆ (ํฅํ ์ํ๊ด๋ฆฌ ์์คํ
์ ์ ์ฉํ๋ฉด์ ์ ์ญ๋ณ์๋ฅผ ์์จ ์์ )
-- Emotion๋ฌธ๋ฒ์ ์ฌ์ฉํ์ฌ ๋ง๋ CSS in JS Component์ props๋ฅผ ์ ๋ฌ
-- props๋ก ๋ฐ์ nowTime๊ฐ์ ์ผํญ์ฐ์ฐ์์ Chaining์ ์ด์ฉํด์ ์กฐ๊ฑด์ ์ ์ฉํ ํ์ ์คํ์ผ ๋ฐ์
+- ๊ธฐ์กด์๋ useState๋ง์ผ๋ก time์ ๊ด๋ฆฌํ์ง๋ง, setTimeout์ ์ฌ๊ท๋ฅผ ์ฌ์ฉํ๋ค๋ณด๋ ์ค์๊ฐ์ผ๋ก time์ด ๋ฐ๋์ง ์๋ ๋ฌธ์ ๊ฐ ๋ฐ์ํ์ต๋๋ค.
+ - ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ์์๋ก ์ ์ญ์ nowTime์ด๋ผ๋ ๋ณ์๋ฅผ ๋ง๋ค์์ต๋๋ค. (์ถํ ๋ก์ง ๋ณ๊ฒฝ์ ํตํด ์ ์ญ๋ณ์๋ฅผ ์์ด์ต๋๋ค.)
+- ์ด๋ ๊ฒ ๋ณํํ ์ํ๋ฅผ props์ ๋ด์ ํ Emotion๋ฌธ๋ฒ์ ์ฌ์ฉํ์ฌ ๋ง๋ CSS in JS Component์ ์ ๋ฌํ์ต๋๋ค.
+- props๋ก ๋ฐ์ nowTime๊ฐ์ ์ผํญ์ฐ์ฐ์์ Chaining์ ์ด์ฉํด์ ์กฐ๊ฑด์ ์ ์ฉํ ํ์ ์คํ์ผ์ ๋ฐ์ํ์ต๋๋ค.
### useEffect ํ์ฉ
- ๊ธฐ์กด์๋ setState ์์์ prev => ๋ฅผ ํตํด ๋ด๋ถ ์ํ๊ฐ์ ํ์ธํ๊ณ ๋ณ๊ฒฝํ๋ ๋ฐฉ์์ ์ฌ์ฉํ์ต๋๋ค.
-- ํ์ง๋ง time์ผ๋ก ๊ด๋ฆฌํ๋ ์๊ฐ ์ํ๊ฐ second, minute, hour๋ก ๋๋ ์ง๋ฉด์ ์ํ๋ค์ด ์ฐ๊ฒฐ๋๊ธฐ ์์ํ์ต๋๋ค.
-- ๊ธฐ์กด prev๋ฅผ ์ด์ฉํ์ฌ ์ํ๊ฐ์ ๋ณ๊ฒฝํ๋ ๋ฐฉ์์ setState ์์์ ๋ ๋ค์ setState๋ฅผ ํ๋ ๊ฒฝ์ฐ ์ค๋ณตํด์ state๋ฅผ ๋ณ๊ฒฝ์ํค๋ ๋ฌธ์ ๋ฅผ ์ผ๊ธฐํ์ต๋๋ค. (๋ ๋๋ง ๋๊ธฐ ์ ์ state๋ฅผ ํ๋ฒ์ ์ฒ๋ฆฌํ๊ธฐ ๋๋ฌธ์ ๋ฌธ์ ๋ฐ์)
-- ๊ทธ๋์ useEffect๋ฅผ ์ฌ์ฉํ์ฌ ๋ ๋๋ง์ด ๋ ์ดํ์ state๋ฅผ ๊ด๋ฆฌํด์ฃผ๋ ๋ฐฉ์์ผ๋ก ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์์์ต๋๋ค.
+ - ํ์ง๋ง time์ผ๋ก ๊ด๋ฆฌํ๋ ์๊ฐ ์ํ๊ฐ second, minute, hour๋ก ๋๋ ์ง๋ฉด์ ์ํ๋ค์ด ์ฐ๊ฒฐ๋๊ธฐ ์์ํ์ต๋๋ค.
+ - ๊ธฐ์กด prev๋ฅผ ์ด์ฉํ์ฌ ์ํ๊ฐ์ ๋ณ๊ฒฝํ๋ ๋ฐฉ์์ setState ์์์ ๋ ๋ค์ setState๋ฅผ ํ๋ ๊ฒฝ์ฐ ์ค๋ณตํด์ state๋ฅผ ๋ณ๊ฒฝ์ํค๋ ๋ฌธ์ ๋ฅผ ์ผ๊ธฐํ์ต๋๋ค. (๋ ๋๋ง ๋๊ธฐ ์ ์ state๋ฅผ ํ๋ฒ์ ์ฒ๋ฆฌํ๊ธฐ ๋๋ฌธ์ ๋ฌธ์ ๋ฐ์)
+- useEffect๋ฅผ ์ฌ์ฉํ์ฌ ๋ ๋๋ง์ด ๋ ์ดํ์ state๋ฅผ ๊ด๋ฆฌํด์ฃผ๋ ๋ฐฉ์์ผ๋ก ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์์์ต๋๋ค.
### useCallback ํ์ฉ
- useEffect๋ฅผ ํ์ฉํ๋ฉด์ ์ค๋ณต๋ ์ฝ๋๋ค์ ๋ฐ์ ์ ์ธํ๊ณ ์์์ ๊ฐ์ ธ๋ค ์ฐ๋ ๋ฐฉ์์ ์ฌ์ฉํ๊ฒ ๋์์ต๋๋ค.
-- ์ด ๊ณผ์ ์์ ํจ์๋ฅผ ์์กด์ฑ ๋ฐฐ์ด ์์ ๋ฃ๋ค๋ณด๋ ๋ฆฌ๋ ๋๋ง์ด ๋ ๋๋ง๋ค ํจ์๊ฐ ์๋ก ์์ฑ์ด ๋๋ ๋ฌธ์ ๊ฐ ๋ฐ์ํ์ต๋๋ค.
+ - ์ด ๊ณผ์ ์์ ํจ์๋ฅผ ์์กด์ฑ ๋ฐฐ์ด ์์ ๋ฃ๋ค๋ณด๋ ๋ฆฌ๋ ๋๋ง์ด ๋ ๋๋ง๋ค ํจ์๊ฐ ์๋ก ์์ฑ์ด ๋๋ ๋ฌธ์ ๊ฐ ๋ฐ์ํ์ต๋๋ค.
- useCallback์ ์ฌ์ฉํ์ฌ ์์กด์ฑ ๋ฐฐ์ด ์์ ๋ค์ด๊ฐ ์์๊ฐ ๋ฐ๋์ง ์์ผ๋ฉด ๊ธฐ์กด์ ์๋ ํจ์๋ฅผ ์ฌ์ฌ์ฉํ๋๋ก ๊ตฌํํ์์ต๋๋ค.
### setTimeout / setInterval์ ๋๋ ์ด ๋ฌธ์ ํด๊ฒฐ
@@ -148,10 +156,21 @@
- ์ด์ ๋ css์ ์๋ transform๊ณผ scale์ ์ด์ฉํ๋ฉด ๋ค๋ฅธ ์์์ ์ํฅ์ ๋ผ์น์ง ์๊ณ ๋ฒํผ์ ํฌ๊ธฐ ๋ณ๊ฒฝ์ด ๊ฐ๋ฅํ๋๋ก ๊ตฌํํ์์ต๋๋ค.
- transition ์์ฑ๊ณผ ํจ๊ป ์ ์ฉํ์ฌ ๋ณด๋ค ์์ฐ์ค๋ฝ๊ณ ๋ถ๋๋ฌ์ด UI/UX๋ฅผ ๋ง๋ค ์ ์์์ต๋๋ค.
+### ์๋ ์ฌ์ / useMemo ํ์ฉ
+
+- Timer์์ ์ฌ์ฉํ๋ ์๋๊ธฐ๋ฅ ์ํ๊ด๋ฆฌ๋ฅผ ์ํด ./src/store ํด๋ ๋ด๋ถ์ soundReducer๋ฅผ ๋ง๋ค๊ณ , ๊ฐ์ ํด๋์ index.js์์ combineReducers๋ฅผ ์ฌ์ฉํด์ ๊ธฐ์กด์ ๋ฆฌ๋์์ ํจ๊ป ์ฌ์ฉํ ์ ์๋๋ก ๋ง๋ค์์ต๋๋ค.
+- Title์์ ํ์ฌ tap ์ํ๊ฐ Timer์ผ ๋๋ง ์๋ ๋ฒํผ์ด ๋์ค๋๋ก ์ค์ ํ์์ต๋๋ค.
+- Timer.jsx์์๋ new Audio()๋ฅผ ์ด์ฉํด์ ์์ํ์ผ์ ๋ถ๋ฌ์ต๋๋ค.
+ - ๋งค๋ฒ ์๋กญ๊ฒ ๋ถ๋ฌ์ค์ง ์๊ณ ํ๋ฒ๋ง ๋ถ๋ฌ์ค๊ธฐ ์ํด์ useMemo๋ฅผ ์ด์ฉํด์ Memoization์ ํ์์ต๋๋ค.
+ - ํ์ด๋จธ๊ฐ ์ฌ์์ค์ 00:00:00์ด ๋๋ฉด Audio์ play ๋ฉ์๋๋ฅผ ์คํํ๋ `playAlarm`ํจ์๋ฅผ ์คํํ๋๋ก ๋ก์ง์ ๊ตฌํํ์ต๋๋ค.
+
## ๐ ์์งค
+### ver 1.0.2
+
+
### ver 1.0.1
