From a9b17dbbe7e5055a3d36786279a9b9a082b0dc29 Mon Sep 17 00:00:00 2001
From: Jiseok <chae0_@naver.com>
Date: Thu, 21 Sep 2023 21:12:25 +0900
Subject: [PATCH 1/7] [style]favicon

---
 public/favicon.ico | Bin 3870 -> 1150 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)

diff --git a/public/favicon.ico b/public/favicon.ico
index a11777cc471a4344702741ab1c8a588998b1311a..7b66cd26dcbcf0010131b33f2c3662985af07b38 100644
GIT binary patch
literal 1150
zcma)*Ye-XJ7{}jb1VOh?^|ikB!6bufYFAf7DxGB8+1WYkLt2>&DvdIUnjv_fBHbWM
zns(1h&6P<iX@)wxsjacOo#hlN%#A`fXFWady9$wlHhyQ%{?GsaocBHNMu-gGixv^Q
zE+y%+30X`CS&pEDN?6AaLa^7qAPoCH?XqQA6lt|Ik;k=lb2?j}t$Jg9dC+dNmAPCl
zliTe!AkoMigixlxS}jk=ee(@jdvi;)^+neeTmQhwpwl_!cDVq(lqqBwxs0qtWC$BE
z%QQ-e01<nx*~IRyUXRn^0POt}r%RG9b&m?91R}JSNkRa~Tw|X;;pXSDcMdm5zp|1f
zfyd)v(E9hx_k$8-w|)DvtHvWnV^*n1j)~VDa|^eIpyT}rcqE*G{#U)dV5w_hytMW*
zjrKZhBam7<3_?b(ORwH7pPy&Dv$?zn_`9E=;JF{{IG_5O8ZB_W>MEn@VI$LMk9xQ}
zAAzrY4g4+d?Um{0eMy(?fO`S{(Igai`k=?|g@OKlxKL_h(3)zrM?K72?Et}O9#f<k
zLh7;>)Plg(j)J<f4>Fzx;AEo&>Jyh3w5A&EQ4jU%D%wDwb}Y0c*XrF~X$QXkD{%LH
zpfNjuvxGo{Xdg{6Xw5X*Lys1{e6<sJvwcXZRNqT6<O5&lM=#AFxR<~3yZ^usVrB{G
zwR>u#H92CWX<(e)?_ar@I<AYaagB?I3WU{~>~%{{cYoP@H}L1#{JHnT3D8nz<T+di
zK8w+vsX1{fd5n;lo)?U)8Us~*Fg&9%!1lq;2+xV_iE229L(-ZiU~g7_aK~D?kgz5;
z^~~{{P(}MN$gle$sUZZqi(PoO_!}`+GiXgU4%fZEIRJHUKLX9r?6#Qo%DozX>|BWn
z#3O~@BXiq^RE9z?SKb;F4j26pj}-mDvkHotrC#;f&JTxjioa7Y&CqP}M#a3ub({8W
zkKItAiiyjL->QyMCU8*-W4(})cJior;8d2b^s!E_O<j?^gNsU($7NA3&CslGAt7xM
OgcxOErvI=1r~V0DC#oI*

literal 3870
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
baj7?x%VD!5Cxk2YbYLNVeiXvvpMCWYo=by@


From 9425deda42f64a456b40d5ae29d852cb4b4e2d87 Mon Sep 17 00:00:00 2001
From: Jiseok <chae0_@naver.com>
Date: Thu, 21 Sep 2023 21:15:50 +0900
Subject: [PATCH 2/7] add style-components

---
 package-lock.json | 421 ++++++++++++++++++++++++++++++++++++++++++----
 package.json      |   1 +
 2 files changed, 389 insertions(+), 33 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index eb6e658d3..da425c42d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
+        "styled-components": "^6.0.8",
         "web-vitals": "^2.1.4"
       }
     },
@@ -34,6 +35,78 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/cli": {
+      "version": "7.22.15",
+      "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.22.15.tgz",
+      "integrity": "sha512-prtg5f6zCERIaECeTZzd2fMtVjlfjhUcO+fBLQ6DXXdq5FljN+excVitJ2nogsusdf31LeqkjAfXZ7Xq+HmN8g==",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.17",
+        "commander": "^4.0.1",
+        "convert-source-map": "^1.1.0",
+        "fs-readdir-recursive": "^1.1.0",
+        "glob": "^7.2.0",
+        "make-dir": "^2.1.0",
+        "slash": "^2.0.0"
+      },
+      "bin": {
+        "babel": "bin/babel.js",
+        "babel-external-helpers": "bin/babel-external-helpers.js"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "optionalDependencies": {
+        "@nicolo-ribaudo/chokidar-2": "2.1.8-no-fsevents.3",
+        "chokidar": "^3.4.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/cli/node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@babel/cli/node_modules/make-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "dependencies": {
+        "pify": "^4.0.1",
+        "semver": "^5.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@babel/cli/node_modules/pify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@babel/cli/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/@babel/cli/node_modules/slash": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
+      "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz",
@@ -353,9 +426,9 @@
       }
     },
     "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.20.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz",
-      "integrity": "sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+      "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -531,6 +604,20 @@
         "@babel/core": "^7.13.0"
       }
     },
+    "node_modules/@babel/plugin-external-helpers": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-external-helpers/-/plugin-external-helpers-7.22.5.tgz",
+      "integrity": "sha512-ngnNEWxmykPk82mH4ajZT0qTztr3Je6hrMuKAslZVM8G1YZTENJSYwrIGtt6KOtznug3exmAtF4so/nPqJuA4A==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-proposal-async-generator-functions": {
       "version": "7.20.7",
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.7.tgz",
@@ -2131,6 +2218,24 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
+      "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.3.0.tgz",
@@ -3005,6 +3110,12 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
+    "node_modules/@nicolo-ribaudo/chokidar-2": {
+      "version": "2.1.8-no-fsevents.3",
+      "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz",
+      "integrity": "sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==",
+      "optional": true
+    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -4252,6 +4363,11 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
     },
+    "node_modules/@types/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw=="
+    },
     "node_modules/@types/testing-library__jest-dom": {
       "version": "5.14.5",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.5.tgz",
@@ -5627,6 +5743,14 @@
         "node": ">= 6"
       }
     },
+    "node_modules/camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -6058,6 +6182,14 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/css-declaration-sorter": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
@@ -6239,6 +6371,16 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "node_modules/css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "node_modules/css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -6426,9 +6568,9 @@
       "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
     },
     "node_modules/csstype": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
-      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -8356,6 +8498,11 @@
       "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.3.tgz",
       "integrity": "sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q=="
     },
+    "node_modules/fs-readdir-recursive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz",
+      "integrity": "sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA=="
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -12128,9 +12275,15 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -12771,9 +12924,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.21",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
-      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+      "version": "8.4.30",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.30.tgz",
+      "integrity": "sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==",
       "funding": [
         {
           "type": "opencollective",
@@ -12782,10 +12935,14 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.4",
+        "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       },
@@ -15129,6 +15286,11 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -15531,6 +15693,49 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/styled-components": {
+      "version": "6.0.8",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.0.8.tgz",
+      "integrity": "sha512-AwI02MTWZwqjzfXgR5QcbmcSn5xVjY4N2TLjSuYnmuBGF3y7GicHz3ysbpUq2EMJP5M8/Nc22vcmF3V3WNZDFA==",
+      "dependencies": {
+        "@babel/cli": "^7.21.0",
+        "@babel/core": "^7.21.0",
+        "@babel/helper-module-imports": "^7.18.6",
+        "@babel/plugin-external-helpers": "^7.18.6",
+        "@babel/plugin-proposal-class-properties": "^7.18.6",
+        "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+        "@babel/preset-env": "^7.20.2",
+        "@babel/preset-react": "^7.18.6",
+        "@babel/preset-typescript": "^7.21.0",
+        "@babel/traverse": "^7.21.2",
+        "@emotion/is-prop-valid": "^1.2.1",
+        "@emotion/unitless": "^0.8.0",
+        "@types/stylis": "^4.0.2",
+        "css-to-react-native": "^3.2.0",
+        "csstype": "^3.1.2",
+        "postcss": "^8.4.23",
+        "shallowequal": "^1.1.0",
+        "stylis": "^4.3.0",
+        "tslib": "^2.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "babel-plugin-styled-components": ">= 2",
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "babel-plugin-styled-components": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/stylehacks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
@@ -15546,6 +15751,11 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz",
+      "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ=="
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -16064,16 +16274,16 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.2.tgz",
-      "integrity": "sha512-wVORMBGO/FAs/++blGNeAVdbNKtIh1rbBL2EyQ1+J9lClJ93KiiKe8PmFIVdXhHcyv44SL9oglmfeSsndo0jRw==",
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=12.20"
+        "node": ">=4.2.0"
       }
     },
     "node_modules/unbox-primitive": {
@@ -17243,6 +17453,53 @@
         "@jridgewell/trace-mapping": "^0.3.9"
       }
     },
+    "@babel/cli": {
+      "version": "7.22.15",
+      "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.22.15.tgz",
+      "integrity": "sha512-prtg5f6zCERIaECeTZzd2fMtVjlfjhUcO+fBLQ6DXXdq5FljN+excVitJ2nogsusdf31LeqkjAfXZ7Xq+HmN8g==",
+      "requires": {
+        "@jridgewell/trace-mapping": "^0.3.17",
+        "@nicolo-ribaudo/chokidar-2": "2.1.8-no-fsevents.3",
+        "chokidar": "^3.4.0",
+        "commander": "^4.0.1",
+        "convert-source-map": "^1.1.0",
+        "fs-readdir-recursive": "^1.1.0",
+        "glob": "^7.2.0",
+        "make-dir": "^2.1.0",
+        "slash": "^2.0.0"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+          "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA=="
+        },
+        "make-dir": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+          "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+          "requires": {
+            "pify": "^4.0.1",
+            "semver": "^5.6.0"
+          }
+        },
+        "pify": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g=="
+        },
+        "semver": {
+          "version": "5.7.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+          "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g=="
+        },
+        "slash": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
+          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A=="
+        }
+      }
+    },
     "@babel/code-frame": {
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz",
@@ -17480,9 +17737,9 @@
       }
     },
     "@babel/helper-plugin-utils": {
-      "version": "7.20.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz",
-      "integrity": "sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ=="
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+      "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
     },
     "@babel/helper-remap-async-to-generator": {
       "version": "7.18.9",
@@ -17601,6 +17858,14 @@
         "@babel/plugin-proposal-optional-chaining": "^7.20.7"
       }
     },
+    "@babel/plugin-external-helpers": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-external-helpers/-/plugin-external-helpers-7.22.5.tgz",
+      "integrity": "sha512-ngnNEWxmykPk82mH4ajZT0qTztr3Je6hrMuKAslZVM8G1YZTENJSYwrIGtt6KOtznug3exmAtF4so/nPqJuA4A==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
     "@babel/plugin-proposal-async-generator-functions": {
       "version": "7.20.7",
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.7.tgz",
@@ -18598,6 +18863,24 @@
       "integrity": "sha512-jwx+WCqszn53YHOfvFMJJRd/B2GqkCBt+1MJSG6o5/s8+ytHMvDZXsJgUEWLk12UnLd7HYKac4BYU5i/Ron1Cw==",
       "requires": {}
     },
+    "@emotion/is-prop-valid": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
+      "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
+      "requires": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
     "@eslint-community/eslint-utils": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.3.0.tgz",
@@ -19241,6 +19524,12 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
+    "@nicolo-ribaudo/chokidar-2": {
+      "version": "2.1.8-no-fsevents.3",
+      "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz",
+      "integrity": "sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==",
+      "optional": true
+    },
     "@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -20180,6 +20469,11 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
     },
+    "@types/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw=="
+    },
     "@types/testing-library__jest-dom": {
       "version": "5.14.5",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.5.tgz",
@@ -21193,6 +21487,11 @@
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="
     },
+    "camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ=="
+    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -21513,6 +21812,11 @@
         "postcss-selector-parser": "^6.0.9"
       }
     },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg=="
+    },
     "css-declaration-sorter": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
@@ -21620,6 +21924,16 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -21758,9 +22072,9 @@
       }
     },
     "csstype": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
-      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
     "damerau-levenshtein": {
       "version": "1.0.8",
@@ -23184,6 +23498,11 @@
       "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.3.tgz",
       "integrity": "sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q=="
     },
+    "fs-readdir-recursive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz",
+      "integrity": "sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA=="
+    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -25903,9 +26222,9 @@
       }
     },
     "nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA=="
     },
     "natural-compare": {
       "version": "1.4.0",
@@ -26358,11 +26677,11 @@
       }
     },
     "postcss": {
-      "version": "8.4.21",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
-      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+      "version": "8.4.30",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.30.tgz",
+      "integrity": "sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==",
       "requires": {
-        "nanoid": "^3.3.4",
+        "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       }
@@ -27883,6 +28202,11 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -28186,6 +28510,32 @@
       "integrity": "sha512-RHs/vcrKdQK8wZliteNK4NKzxvLBzpuHMqYmUVWeKa6MkaIQ97ZTOS0b+zapZhy6GcrgWnvWYCMHRirC3FsUmw==",
       "requires": {}
     },
+    "styled-components": {
+      "version": "6.0.8",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.0.8.tgz",
+      "integrity": "sha512-AwI02MTWZwqjzfXgR5QcbmcSn5xVjY4N2TLjSuYnmuBGF3y7GicHz3ysbpUq2EMJP5M8/Nc22vcmF3V3WNZDFA==",
+      "requires": {
+        "@babel/cli": "^7.21.0",
+        "@babel/core": "^7.21.0",
+        "@babel/helper-module-imports": "^7.18.6",
+        "@babel/plugin-external-helpers": "^7.18.6",
+        "@babel/plugin-proposal-class-properties": "^7.18.6",
+        "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+        "@babel/preset-env": "^7.20.2",
+        "@babel/preset-react": "^7.18.6",
+        "@babel/preset-typescript": "^7.21.0",
+        "@babel/traverse": "^7.21.2",
+        "@emotion/is-prop-valid": "^1.2.1",
+        "@emotion/unitless": "^0.8.0",
+        "@types/stylis": "^4.0.2",
+        "css-to-react-native": "^3.2.0",
+        "csstype": "^3.1.2",
+        "postcss": "^8.4.23",
+        "shallowequal": "^1.1.0",
+        "stylis": "^4.3.0",
+        "tslib": "^2.5.0"
+      }
+    },
     "stylehacks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
@@ -28195,6 +28545,11 @@
         "postcss-selector-parser": "^6.0.4"
       }
     },
+    "stylis": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz",
+      "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ=="
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -28588,9 +28943,9 @@
       }
     },
     "typescript": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.2.tgz",
-      "integrity": "sha512-wVORMBGO/FAs/++blGNeAVdbNKtIh1rbBL2EyQ1+J9lClJ93KiiKe8PmFIVdXhHcyv44SL9oglmfeSsndo0jRw==",
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "peer": true
     },
     "unbox-primitive": {
diff --git a/package.json b/package.json
index 101e3ed4b..3fe269e34 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.0.8",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

From 3d274f86f76c900cf81c9a273a65410945b432d6 Mon Sep 17 00:00:00 2001
From: Jiseok <chae0_@naver.com>
Date: Thu, 21 Sep 2023 21:32:43 +0900
Subject: [PATCH 3/7] =?UTF-8?q?[feat]switch,delete,addTodo=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js | 59 +++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 54 insertions(+), 5 deletions(-)

diff --git a/src/App.js b/src/App.js
index 867910d2a..bf285f507 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,58 @@
+import React, { useState, useEffect } from "react";
+import TodoList from "./components/todoList";
+import DoneList from "./components/doneList";
+import InputTodo from "./components/inputTodo";
+
 function App() {
-	return (
-		<div>
-			<h1>18기 프론트 화이팅~ 푸하항ㅋ</h1>
-		</div>
-	);
+  const [todos, setTodos] = useState([]);
+  const [dones, setDones] = useState([]);
+
+  const addTodo = (item) => {
+    setTodos([...todos, { id: new Date().getTime(), text: item }]);
+  };//item 추가
+
+  const deleteItem = (listName, index) => {
+    const list = listName === "todos" ? todos : dones;
+    const newList = [...list];
+    newList.splice(index, 1);
+    listName === "todos" ? setTodos(newList) : setDones(newList);
+  };
+
+//기존의 리스트와, 인덱스를 받아 todo <-> done , 
+
+  const switchList = (fromListName, index) => {
+    let fromList, toList, setFromList, setToList;
+    if (fromListName === "todos") {
+      fromList = todos;
+      toList = dones;
+      setFromList = setTodos;
+      setToList = setDones;
+    } else {
+      fromList = dones;
+      toList = todos;
+      setFromList = setDones;
+      setToList = setTodos;
+    }
+
+    const itemToMove = fromList[index];
+    const newFromList = [...fromList];
+    newFromList.splice(index, 1);
+    setFromList(newFromList);
+
+    const newToList = [...toList, itemToMove];
+    setToList(newToList);
+  };
+
+  return (
+    <>
+      <main>
+        <h1>할 일</h1>
+        <InputTodo addTodo={addTodo} />
+        <TodoList todos={todos} switchList={switchList} deleteItem={deleteItem} />
+        <DoneList dones={dones} switchList={switchList} deleteItem={deleteItem} />
+      </main>
+    </>
+  );
 }
 
 export default App;

From 8fa2909f99d117b804acbb563e9f0747783e14b5 Mon Sep 17 00:00:00 2001
From: Jiseok <chae0_@naver.com>
Date: Thu, 21 Sep 2023 21:37:29 +0900
Subject: [PATCH 4/7] =?UTF-8?q?[feat]=20components=EC=99=80=20style?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js                  | 22 ++++++++++++
 src/components/doneList.js  | 38 +++++++++++++++++++++
 src/components/inputTodo.js | 68 +++++++++++++++++++++++++++++++++++++
 src/components/itemList.js  | 56 ++++++++++++++++++++++++++++++
 src/components/todoList.js  | 38 +++++++++++++++++++++
 5 files changed, 222 insertions(+)
 create mode 100644 src/components/doneList.js
 create mode 100644 src/components/inputTodo.js
 create mode 100644 src/components/itemList.js
 create mode 100644 src/components/todoList.js

diff --git a/src/App.js b/src/App.js
index bf285f507..df7d06cb9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,7 +2,28 @@ import React, { useState, useEffect } from "react";
 import TodoList from "./components/todoList";
 import DoneList from "./components/doneList";
 import InputTodo from "./components/inputTodo";
+import { createGlobalStyle } from 'styled-components'
 
+const GlobalStyle = createGlobalStyle`
+  main {
+    display: flex;
+    flex-direction: column;
+    width: 400px;
+    height: 620px;
+    margin: 30px auto;
+    padding: 25px;
+    background-color: #ffffff;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    border-radius: 15px;
+  }
+
+  h1 {
+    font-size: 35px;
+    color: #000000;
+    text-align: center;
+    margin-bottom: 20px;
+  }
+`;
 function App() {
   const [todos, setTodos] = useState([]);
   const [dones, setDones] = useState([]);
@@ -45,6 +66,7 @@ function App() {
 
   return (
     <>
+    <GlobalStyle />
       <main>
         <h1>할 일</h1>
         <InputTodo addTodo={addTodo} />
diff --git a/src/components/doneList.js b/src/components/doneList.js
new file mode 100644
index 000000000..942bd2fe1
--- /dev/null
+++ b/src/components/doneList.js
@@ -0,0 +1,38 @@
+import React from "react";
+import ItemList from "./itemList";
+import styled from 'styled-components';
+
+const ListSection = styled.section`
+    display: flex;
+    flex-direction: column; 
+    height: 170px; 
+    overflow-y: auto;
+    margin-bottom: 20px; 
+`;
+
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    width: 100%;  
+`;
+
+function DoneList({ dones, switchList, deleteItem }) {
+  return (
+    <Container>
+      <h2>Done</h2>
+      <ListSection>
+        {dones.map((done, index) => (
+          <ItemList
+            key={index}
+            item={done.text}
+            index={index}
+            switchList={() => switchList("dones", index)}
+            deleteItem={() => deleteItem("dones", index)}
+          />
+        ))}
+      </ListSection>
+    </Container>
+  );
+}
+
+export default DoneList;
diff --git a/src/components/inputTodo.js b/src/components/inputTodo.js
new file mode 100644
index 000000000..db9e47575
--- /dev/null
+++ b/src/components/inputTodo.js
@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+const AddButton = styled.button`
+  width: 90px;
+  padding: 13px;
+  margin-left: 25px;
+  border: none;
+  background-color: #000000;
+  color: #fff;
+  border-radius: 5px;
+  line-height: 18px;
+
+  &:hover {
+    background-color: #FF2D00;
+  }
+`;
+
+const TodoInput = styled.input`
+  width: 240px;
+  padding: 10px;
+  border: 2px solid #ddd;
+  border-radius: 5px;
+  font-size: 18px;
+  line-height: 18px;
+
+  &:focus {
+    border-color: #007bff;
+  }
+`;
+
+const TodoContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+`;
+
+function InputTodo({ addTodo }) {
+  const [input, setInput] = useState('');
+
+  const addTodoTrim = () => {
+    if (input.trim().length > 0) {
+      addTodo(input.trim());
+      setInput('');
+    }
+  };
+
+  const enterKey = (e) => {
+    if (e.key === 'Enter') {
+      addTodoTrim();
+    }
+  };
+
+  return (
+    <TodoContainer>
+      <TodoInput 
+        type="text" 
+        value={input} 
+        onChange={(e) => setInput(e.target.value)}
+        onKeyPress={enterKey} 
+      />
+      <AddButton onClick={addTodoTrim}>Add</AddButton>
+    </TodoContainer>
+  );
+}
+
+export default InputTodo;
diff --git a/src/components/itemList.js b/src/components/itemList.js
new file mode 100644
index 000000000..c2fd29772
--- /dev/null
+++ b/src/components/itemList.js
@@ -0,0 +1,56 @@
+import React from "react";
+import styled from 'styled-components';
+
+const DeleteButton = styled.button`
+  background-color: #FFB6C1;
+  color: white;
+  border: none;
+  box-sizing: border-box;
+  padding: 6px 5px;
+  width: 60px;
+  font-size: 14px;
+  border-radius: 20px;
+  box-shadow: 0 4px 10px rgba(255, 182, 193, 0.2);
+  margin-right: 5px;
+
+  &:hover {
+    background-color: #FF69B4;
+    box-shadow: 0 4px 10px rgba(255, 105, 180, 0.4);
+  }
+
+  &:active {
+    box-shadow: 0 4px 10px rgba(255, 105, 180, 0.2);
+  }
+`;
+
+const TodoItemContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px;
+  margin: 8px 0;
+  cursor: pointer;
+`;
+
+const TodoText = styled.span`
+  flex-grow: 1;
+  margin-right: 10px;
+`;
+
+const ActionsContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+function ItemList({ item, index, switchList, deleteItem }) {
+  return (
+    <TodoItemContainer onClick={switchList}>
+      <TodoText>{item}</TodoText>
+      <ActionsContainer>
+        <DeleteButton onClick={(e) => { e.stopPropagation(); deleteItem(); }}>x</DeleteButton>
+      </ActionsContainer>
+    </TodoItemContainer>
+  );
+}
+
+export default ItemList;
diff --git a/src/components/todoList.js b/src/components/todoList.js
new file mode 100644
index 000000000..d65afe6dd
--- /dev/null
+++ b/src/components/todoList.js
@@ -0,0 +1,38 @@
+import React from "react";
+import ItemList from "./itemList";
+import styled from 'styled-components';
+
+const ListSection = styled.section`
+    display: flex;
+    flex-direction: column; 
+    height: 170px; 
+    overflow-y: auto;
+    margin-bottom: 20px; 
+`;
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    width: 100%;  
+`;
+
+function TodoList({ todos, switchList, deleteItem }) {
+  return (
+    <Container>
+      <h2>Todo</h2>
+    <ListSection>
+      
+      {todos.map((todo, index) => (
+        <ItemList
+          key={index}
+          item={todo.text}
+          index={index}
+          switchList={() => switchList("todos", index)}
+          deleteItem={() => deleteItem("todos", index)}
+        />
+      ))}
+    </ListSection>
+    </Container>
+  );
+}
+
+export default TodoList;

From bd9356475dd6f75e52fea9fbcf3aa90f42decb5d Mon Sep 17 00:00:00 2001
From: Jiseok <chae0_@naver.com>
Date: Thu, 21 Sep 2023 21:39:57 +0900
Subject: [PATCH 5/7] =?UTF-8?q?[feat]localstorage=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/App.js b/src/App.js
index df7d06cb9..0ed877072 100644
--- a/src/App.js
+++ b/src/App.js
@@ -24,13 +24,26 @@ const GlobalStyle = createGlobalStyle`
     margin-bottom: 20px;
   }
 `;
+
 function App() {
   const [todos, setTodos] = useState([]);
   const [dones, setDones] = useState([]);
 
+  useEffect(() => {
+    const savedTodos = localStorage.getItem("todos");
+    const savedDones = localStorage.getItem("dones");
+    if (savedTodos) setTodos(JSON.parse(savedTodos));
+    if (savedDones) setDones(JSON.parse(savedDones));
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem("todos", JSON.stringify(todos));
+    localStorage.setItem("dones", JSON.stringify(dones));
+  }, [todos, dones]);
+
   const addTodo = (item) => {
     setTodos([...todos, { id: new Date().getTime(), text: item }]);
-  };//item 추가
+  };
 
   const deleteItem = (listName, index) => {
     const list = listName === "todos" ? todos : dones;
@@ -39,10 +52,9 @@ function App() {
     listName === "todos" ? setTodos(newList) : setDones(newList);
   };
 
-//기존의 리스트와, 인덱스를 받아 todo <-> done , 
-
   const switchList = (fromListName, index) => {
     let fromList, toList, setFromList, setToList;
+
     if (fromListName === "todos") {
       fromList = todos;
       toList = dones;
@@ -66,7 +78,7 @@ function App() {
 
   return (
     <>
-    <GlobalStyle />
+      <GlobalStyle />
       <main>
         <h1>할 일</h1>
         <InputTodo addTodo={addTodo} />
@@ -78,3 +90,4 @@ function App() {
 }
 
 export default App;
+

From f3460a176528c773fc48f71ddec5e072a6317c1d Mon Sep 17 00:00:00 2001
From: Jiseok <chae0_@naver.com>
Date: Thu, 21 Sep 2023 21:43:57 +0900
Subject: [PATCH 6/7] Empty

---
 public/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index aa069f27c..efbd13ff0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Song Seok TODO</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

From f1b88a085570771beeadf95dadffd3d0e979690d Mon Sep 17 00:00:00 2001
From: Jiseok <chae0_@naver.com>
Date: Fri, 22 Sep 2023 15:04:03 +0900
Subject: [PATCH 7/7] [style] px to rem

---
 src/App.js                  | 18 ++++++++++--------
 src/components/doneList.js  | 12 +++++++++---
 src/components/inputTodo.js | 22 +++++++++++-----------
 src/components/itemList.js  | 23 ++++++++++++-----------
 src/components/todoList.js  | 36 +++++++++++++++++++++---------------
 5 files changed, 63 insertions(+), 48 deletions(-)

diff --git a/src/App.js b/src/App.js
index 0ed877072..f9524a21a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,23 +5,25 @@ import InputTodo from "./components/inputTodo";
 import { createGlobalStyle } from 'styled-components'
 
 const GlobalStyle = createGlobalStyle`
+  html{ font-size: 62.5%; }
+
   main {
     display: flex;
     flex-direction: column;
-    width: 400px;
-    height: 620px;
-    margin: 30px auto;
-    padding: 25px;
+    width: 40rem;
+    height: 62rem;
+    margin: 3rem auto;
+    padding: 2.5rem;
     background-color: #ffffff;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    border-radius: 15px;
+    box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.1);
+    border-radius: 1.5rem;
   }
 
   h1 {
-    font-size: 35px;
+    font-size: 3.5rem;
     color: #000000;
     text-align: center;
-    margin-bottom: 20px;
+    margin-bottom: 2rem;
   }
 `;
 
diff --git a/src/components/doneList.js b/src/components/doneList.js
index 942bd2fe1..053bd895d 100644
--- a/src/components/doneList.js
+++ b/src/components/doneList.js
@@ -2,18 +2,24 @@ import React from "react";
 import ItemList from "./itemList";
 import styled from 'styled-components';
 
+
 const ListSection = styled.section`
     display: flex;
     flex-direction: column; 
-    height: 170px; 
+    height: 17rem; 
     overflow-y: auto;
-    margin-bottom: 20px; 
+    margin-bottom: 2rem; 
+    word-break: break-all;
 `;
 
 const Container = styled.div`
     display: flex;
     flex-direction: column;
-    width: 100%;  
+    width: 100%; 
+     
+    h2 {
+      font-size: 2rem;
+    }
 `;
 
 function DoneList({ dones, switchList, deleteItem }) {
diff --git a/src/components/inputTodo.js b/src/components/inputTodo.js
index db9e47575..ebe0e2b3d 100644
--- a/src/components/inputTodo.js
+++ b/src/components/inputTodo.js
@@ -2,14 +2,14 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 
 const AddButton = styled.button`
-  width: 90px;
-  padding: 13px;
-  margin-left: 25px;
+  width: 9rem;
+  padding: 1.3rem;
+  margin-left: 2.5rem;
   border: none;
   background-color: #000000;
   color: #fff;
-  border-radius: 5px;
-  line-height: 18px;
+  border-radius: 0.5rem;
+  line-height: 1.8rem;
 
   &:hover {
     background-color: #FF2D00;
@@ -17,12 +17,12 @@ const AddButton = styled.button`
 `;
 
 const TodoInput = styled.input`
-  width: 240px;
-  padding: 10px;
-  border: 2px solid #ddd;
-  border-radius: 5px;
-  font-size: 18px;
-  line-height: 18px;
+  width: 24rem;
+  padding: 1rem;
+  border: 0.2rem solid #ddd;
+  border-radius: 0.5rem;
+  font-size: 1.8rem;
+  line-height: 1.8rem;
 
   &:focus {
     border-color: #007bff;
diff --git a/src/components/itemList.js b/src/components/itemList.js
index c2fd29772..c51d4f3bd 100644
--- a/src/components/itemList.js
+++ b/src/components/itemList.js
@@ -6,20 +6,20 @@ const DeleteButton = styled.button`
   color: white;
   border: none;
   box-sizing: border-box;
-  padding: 6px 5px;
-  width: 60px;
-  font-size: 14px;
-  border-radius: 20px;
-  box-shadow: 0 4px 10px rgba(255, 182, 193, 0.2);
-  margin-right: 5px;
+  padding: 0.6rem 0.5rem;
+  width: 6rem;
+  font-size: 1.4rem;
+  border-radius: 2rem;
+  box-shadow: 0 0.4rem 1rem rgba(255, 182, 193, 0.2);
+  margin-right: 0.5rem;
 
   &:hover {
     background-color: #FF69B4;
-    box-shadow: 0 4px 10px rgba(255, 105, 180, 0.4);
+    box-shadow: 0 0.4rem 1rem rgba(255, 105, 180, 0.4);
   }
 
   &:active {
-    box-shadow: 0 4px 10px rgba(255, 105, 180, 0.2);
+    box-shadow: 0 0.4rem 1rem rgba(255, 105, 180, 0.2);
   }
 `;
 
@@ -27,14 +27,15 @@ const TodoItemContainer = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 8px;
-  margin: 8px 0;
+  padding: 0.8rem;
+  margin: 0.8rem 0;
   cursor: pointer;
 `;
 
 const TodoText = styled.span`
   flex-grow: 1;
-  margin-right: 10px;
+  margin-right: 1rem;
+  font-size : 1.6rem;
 `;
 
 const ActionsContainer = styled.div`
diff --git a/src/components/todoList.js b/src/components/todoList.js
index d65afe6dd..d7c8f1ccb 100644
--- a/src/components/todoList.js
+++ b/src/components/todoList.js
@@ -2,35 +2,41 @@ import React from "react";
 import ItemList from "./itemList";
 import styled from 'styled-components';
 
+
 const ListSection = styled.section`
     display: flex;
     flex-direction: column; 
-    height: 170px; 
+    height: 17rem; 
     overflow-y: auto;
-    margin-bottom: 20px; 
+    margin-bottom: 2rem; 
+    word-break: break-all;
 `;
+
 const Container = styled.div`
     display: flex;
     flex-direction: column;
-    width: 100%;  
+    width: 100%;
+
+    h2 {
+      font-size: 2rem;
+    }
 `;
 
 function TodoList({ todos, switchList, deleteItem }) {
   return (
     <Container>
       <h2>Todo</h2>
-    <ListSection>
-      
-      {todos.map((todo, index) => (
-        <ItemList
-          key={index}
-          item={todo.text}
-          index={index}
-          switchList={() => switchList("todos", index)}
-          deleteItem={() => deleteItem("todos", index)}
-        />
-      ))}
-    </ListSection>
+      <ListSection>
+        {todos.map((todo, index) => (
+          <ItemList
+            key={index}
+            item={todo.text}
+            index={index}
+            switchList={() => switchList("todos", index)}
+            deleteItem={() => deleteItem("todos", index)}
+          />
+        ))}
+      </ListSection>
     </Container>
   );
 }