From 7b70be2d4f00233c772232fd2de814de9cdf02c0 Mon Sep 17 00:00:00 2001 From: leekyuho Date: Tue, 19 Sep 2023 21:20:05 +0900 Subject: [PATCH 01/12] =?UTF-8?q?feat=20:=20todolist=20=EA=B8=B0=EC=B4=88?= =?UTF-8?q?=20=EC=84=B8=ED=8C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 2 +- package-lock.json | 439 +++++++++++++++++++++++++++++++++++++--- package.json | 2 + public/favicon.ico | Bin 3870 -> 67646 bytes public/index.html | 2 +- src/App.css | 90 ++++++++ src/App.js | 52 ++++- src/GlobalStyle.js | 16 ++ src/components/Cards.js | 60 ++++++ src/index.js | 13 +- 10 files changed, 630 insertions(+), 46 deletions(-) create mode 100644 src/App.css create mode 100644 src/GlobalStyle.js create mode 100644 src/components/Cards.js diff --git a/.gitignore b/.gitignore index 3c3629e64..b512c09d4 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1 @@ -node_modules +node_modules \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index eb6e658d3..6cfc03103 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,8 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", + "styled-components": "^6.0.8", + "styled-reset": "^4.5.1", "web-vitals": "^2.1.4" } }, @@ -34,6 +36,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 +427,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 +605,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 +2219,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 +3111,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 +4364,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 +5744,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 +6183,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 +6372,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 +6569,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 +8499,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 +12276,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 +12925,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 +12936,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 +15287,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 +15694,60 @@ "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/styled-reset": { + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/styled-reset/-/styled-reset-4.5.1.tgz", + "integrity": "sha512-6EvFWZRwaFRFxiPYMwmnzOe33rDkw5r9jIU0eEi49bkt6VSrvjeMp2ZOw/YFbw5SVs81llIY+5fzHtR2/VBZfQ==", + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "styled-components": ">=4.0.0 || >=5.0.0 || >=6.0.0" + } + }, "node_modules/stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", @@ -15546,6 +15763,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 +16286,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 +17465,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 +17749,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 +17870,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 +18875,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 +19536,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 +20481,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 +21499,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 +21824,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 +21936,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 +22084,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 +23510,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 +26234,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 +26689,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 +28214,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 +28522,38 @@ "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" + } + }, + "styled-reset": { + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/styled-reset/-/styled-reset-4.5.1.tgz", + "integrity": "sha512-6EvFWZRwaFRFxiPYMwmnzOe33rDkw5r9jIU0eEi49bkt6VSrvjeMp2ZOw/YFbw5SVs81llIY+5fzHtR2/VBZfQ==", + "requires": {} + }, "stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", @@ -28195,6 +28563,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 +28961,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..04885d6e5 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,8 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", + "styled-components": "^6.0.8", + "styled-reset": "^4.5.1", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/public/favicon.ico b/public/favicon.ico index a11777cc471a4344702741ab1c8a588998b1311a..dbf2a298ec465832c22b47d9dd1481fbb4c2a023 100644 GIT binary patch literal 67646 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 baj7?x%VD!5Cxk2YbYLNVeiXvvpMCWYo=by@ diff --git a/public/index.html b/public/index.html index aa069f27c..814b72b1a 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`. --> - React App + TODO diff --git a/src/App.css b/src/App.css new file mode 100644 index 000000000..fa0ff92eb --- /dev/null +++ b/src/App.css @@ -0,0 +1,90 @@ +@font-face { + font-family: 'GmarketSansMedium'; + src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); + font-weight: normal; + font-style: normal; +} +.header{ + display: flex; + height: 150px; + width: 500px; + align-items: center; + justify-content: center; +} +.logo{ + font-size: 2em; + font-weight: 700; + width: 300px; +} +.detail{ + font-size: 1em; + width: 180px; +} +#clock-js{ + padding-top: 5px; +} +.todoList{ + display:flex; + flex-direction: column; + width: 28em; +} +.todoInput{/*input container*/ + display:flex; + height:35px; + padding-bottom: 5px; +} +input{/*input 태그 따로 설정*/ + background-color: black; + color: #ECECEC; + border: solid 2px #ECECEC; + border-radius: 6px; + width: 400px; +} +#plusButton{ + background-color: black; + color: #ECECEC; + border: solid 2px #ECECEC; + border-radius: 6px; + width: 35px; + margin-left: 5px; + transition : border 0.3s, color 0.3s; +} +#plusButton:hover{ + border : solid 2px #5f5f5f; + color : #5f5f5f; +} +.todoCard{ + background-color: #ECECEC; + color : black; + display:flex; /*todoElem 세로축 가운데 정렬*/ + align-items:center; + justify-content:space-between;/* item 사이 간격 균일하게 */ + height: 100px; + margin : 7px 0; + border-radius: 8px; +} +.todoCard.checked{ + transition : opacity 0.3s; + opacity: 0.5; +} +.todoCard.checked:hover{ /*마우스 올렸을 때 살짝 밝게*/ + opacity: 0.6; +} +.todoElem{ + flex:1; /*여백 다 채우게끔*/ + margin-left:30px; +} +input[type=checkbox]{ + margin-left: 20px; +} +.todoDelete{ + border: none; + margin-bottom: 80px; + margin-right: 5px; + font-size: 7px; + border-radius: 2px; + transition : background-color 0.3s; +} +.todoDelete:hover{ + background-color: #b1b1b1; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 867910d2a..3f397cb61 100644 --- a/src/App.js +++ b/src/App.js @@ -1,9 +1,51 @@ +import "./App.css"; +import { useState, useEffect } from "react"; +import Cards from "./components/Cards.js"; function App() { - return ( -
-

18기 프론트 화이팅~ 푸하항ㅋ

-
- ); + const [todo, setTodo] = useState(["운동하기", "밥먹기"]); + const [currentTime, setCurrentTime] = useState(new Date()); + + // 시간 업데이트 + const updateClock = () => { + setCurrentTime(new Date()); + }; + + useEffect(() => { + const timer = setInterval(updateClock, 1000); + + return () => { + clearInterval(timer); + }; + }, []); + + const options = { + weekday: "long", + month: "numeric", + day: "numeric", + hour: "2-digit", + minute: "2-digit", + second: "2-digit", + hour12: false, //오전 오후 나누는거 false 처리 + }; + //string으로 만들어 변수로 변환한다. + const stringTime = currentTime.toLocaleDateString("ko-KR", options); + + return ( + <> +
+
TODO-list
+
+
투두리스트를 작성하고 오늘 하루를 기록해요
+
{stringTime}
+
+
+
+ + +
+ + + ); } export default App; diff --git a/src/GlobalStyle.js b/src/GlobalStyle.js new file mode 100644 index 000000000..7e3520236 --- /dev/null +++ b/src/GlobalStyle.js @@ -0,0 +1,16 @@ +import { createGlobalStyle } from "styled-components"; +import reset from "styled-reset"; + +const GlobalStyle = createGlobalStyle` + ${reset}; + body{ + background-color: black; + color : #ECECEC; + font-family: 'GmarketSansMedium'; + display: flex; + flex-direction: column; + align-items: center; + } +`; + +export default GlobalStyle; diff --git a/src/components/Cards.js b/src/components/Cards.js new file mode 100644 index 000000000..72b673ce6 --- /dev/null +++ b/src/components/Cards.js @@ -0,0 +1,60 @@ +import "../App"; +function Cards(props) { + return ( + <> + {props.todo.map((element, i) => { + return ( +
+
+
{element}
+
X
+
+
+ ); + })} + + ); +} + +export default Cards; + +// .todoList{ +// display:flex; +// flex-direction: column; +// width: 450px; +// } +// .todoCard{ +// background-color: #ECECEC; +// color : black; +// display:flex; /*todoElem 세로축 가운데 정렬*/ +// align-items:center; +// justify-content:space-between;/* item 사이 간격 균일하게 */ +// height: 100px; +// margin : 7px 0; +// border-radius: 8px; +// } +// .todoCard.checked{ +// transition : opacity 0.3s; +// opacity: 0.5; +// } +// .todoCard.checked:hover{ /*마우스 올렸을 때 살짝 밝게*/ +// opacity: 0.6; +// } +// .todoElem{ +// flex:1; /*여백 다 채우게끔*/ +// margin-left:30px; +// } +// input[type=checkbox]{ +// margin-left: 20px; +// } +// .todoDelete{ +// border: none; +// margin-bottom: 80px; +// margin-right: 5px; +// font-size: 7px; +// border-radius: 2px; +// transition : background-color 0.3s; +// } +// .todoDelete:hover{ +// background-color: #b1b1b1; +// } diff --git a/src/index.js b/src/index.js index 7173ce536..e447044d4 100644 --- a/src/index.js +++ b/src/index.js @@ -1,10 +1,11 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App'; - +import React from "react"; +import ReactDOM from "react-dom"; +import App from "./App"; +import GlobalStyle from "./GlobalStyle"; ReactDOM.render( + , - document.getElementById('root') -); \ No newline at end of file + document.getElementById("root") +); From 1b90ebbb13ec7377b455b7e5e213f292540fc933 Mon Sep 17 00:00:00 2001 From: leekyuho Date: Tue, 19 Sep 2023 21:31:44 +0900 Subject: [PATCH 02/12] =?UTF-8?q?style:=20css=20=EC=83=89=EC=83=81=20?= =?UTF-8?q?=EB=B3=80=EC=88=98=EB=A1=9C=20=EC=84=A0=EC=96=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.css | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/src/App.css b/src/App.css index fa0ff92eb..745e3379a 100644 --- a/src/App.css +++ b/src/App.css @@ -4,6 +4,10 @@ font-weight: normal; font-style: normal; } +:root{ + --card-color: #ECECEC; + --bg-color: black; +} .header{ display: flex; height: 150px; @@ -34,16 +38,16 @@ padding-bottom: 5px; } input{/*input 태그 따로 설정*/ - background-color: black; - color: #ECECEC; - border: solid 2px #ECECEC; + background-color: var(--bg-color); + color: var(--card-color); + border: solid 2px var(--card-color); border-radius: 6px; width: 400px; } #plusButton{ - background-color: black; - color: #ECECEC; - border: solid 2px #ECECEC; + background-color: var(--bg-color); + color: var(--card-color); + border: solid 2px var(--card-color); border-radius: 6px; width: 35px; margin-left: 5px; @@ -54,8 +58,8 @@ input{/*input 태그 따로 설정*/ color : #5f5f5f; } .todoCard{ - background-color: #ECECEC; - color : black; + background-color: var(--card-color); + color : var(--bg-color); display:flex; /*todoElem 세로축 가운데 정렬*/ align-items:center; justify-content:space-between;/* item 사이 간격 균일하게 */ From 2f3f0f59e23f9abb7e75bbf74db6271f0e0b557a Mon Sep 17 00:00:00 2001 From: leekyuho Date: Wed, 20 Sep 2023 15:00:12 +0900 Subject: [PATCH 03/12] =?UTF-8?q?fix=20:=20react=2018=20=EA=B4=80=EB=A0=A8?= =?UTF-8?q?=20error=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/index.js b/src/index.js index e447044d4..294fe1c6c 100644 --- a/src/index.js +++ b/src/index.js @@ -1,11 +1,11 @@ import React from "react"; -import ReactDOM from "react-dom"; +import ReactDOM from "react-dom/client"; import App from "./App"; import GlobalStyle from "./GlobalStyle"; -ReactDOM.render( +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render( - , - document.getElementById("root") + ); From ca8c2a0e5d2c97fb1a3916f0644b3d28a96e030c Mon Sep 17 00:00:00 2001 From: leekyuho Date: Wed, 20 Sep 2023 21:57:20 +0900 Subject: [PATCH 04/12] =?UTF-8?q?refactor=20:=20clock=20&=20cards=20compon?= =?UTF-8?q?ent=20=ED=8C=8C=EC=9D=BC=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Cards.js | 54 ++++++----------------------------------- src/components/Clock.js | 34 ++++++++++++++++++++++++++ 2 files changed, 41 insertions(+), 47 deletions(-) create mode 100644 src/components/Clock.js diff --git a/src/components/Cards.js b/src/components/Cards.js index 72b673ce6..c98726ec6 100644 --- a/src/components/Cards.js +++ b/src/components/Cards.js @@ -2,59 +2,19 @@ import "../App"; function Cards(props) { return ( <> - {props.todo.map((element, i) => { - return ( -
+
+ {props.todo.map((element, i) => { + return (
{element}
+
X
-
- ); - })} + ); + })} +
); } export default Cards; - -// .todoList{ -// display:flex; -// flex-direction: column; -// width: 450px; -// } -// .todoCard{ -// background-color: #ECECEC; -// color : black; -// display:flex; /*todoElem 세로축 가운데 정렬*/ -// align-items:center; -// justify-content:space-between;/* item 사이 간격 균일하게 */ -// height: 100px; -// margin : 7px 0; -// border-radius: 8px; -// } -// .todoCard.checked{ -// transition : opacity 0.3s; -// opacity: 0.5; -// } -// .todoCard.checked:hover{ /*마우스 올렸을 때 살짝 밝게*/ -// opacity: 0.6; -// } -// .todoElem{ -// flex:1; /*여백 다 채우게끔*/ -// margin-left:30px; -// } -// input[type=checkbox]{ -// margin-left: 20px; -// } -// .todoDelete{ -// border: none; -// margin-bottom: 80px; -// margin-right: 5px; -// font-size: 7px; -// border-radius: 2px; -// transition : background-color 0.3s; -// } -// .todoDelete:hover{ -// background-color: #b1b1b1; -// } diff --git a/src/components/Clock.js b/src/components/Clock.js new file mode 100644 index 000000000..cb57862ee --- /dev/null +++ b/src/components/Clock.js @@ -0,0 +1,34 @@ +import "../App.css"; +import { useState, useEffect } from "react"; + +function Clock() { + const [currentTime, setCurrentTime] = useState(new Date()); + + // 시간 업데이트 + const updateClock = () => { + setCurrentTime(new Date()); + }; + + useEffect(() => { + //mount 시 timer 셋팅 + const timer = setInterval(updateClock, 1000); + return () => { + clearInterval(timer); + }; + }, []); + const options = { + weekday: "long", + month: "numeric", + day: "numeric", + hour: "2-digit", + minute: "2-digit", + second: "2-digit", + hour12: false, //오전 오후 나누는거 false 처리 + }; + //string으로 만들어 변수로 변환한다. + const stringTime = currentTime.toLocaleDateString("ko-KR", options); + + return
{stringTime}
; +} + +export default Clock; From 31c0cd69b1590f98ae6791d2c2740a48c1a9f8a2 Mon Sep 17 00:00:00 2001 From: leekyuho Date: Wed, 20 Sep 2023 22:13:10 +0900 Subject: [PATCH 05/12] =?UTF-8?q?feat=20:=20todo=20=EC=B6=94=EA=B0=80?= =?UTF-8?q?=ED=95=98=EA=B8=B0=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.css | 20 +++++++++++---- src/App.js | 70 ++++++++++++++++++++++++++--------------------------- 2 files changed, 50 insertions(+), 40 deletions(-) diff --git a/src/App.css b/src/App.css index 745e3379a..064c69202 100644 --- a/src/App.css +++ b/src/App.css @@ -4,18 +4,25 @@ font-weight: normal; font-style: normal; } +/* 색상 변수 (코드리뷰 반영) */ :root{ --card-color: #ECECEC; --bg-color: black; } +.wrapper{ + display: flex; + flex-direction: column; + align-items: center; +} .header{ display: flex; height: 150px; - width: 500px; + width: 480px; align-items: center; - justify-content: center; + } .logo{ + display: flex; font-size: 2em; font-weight: 700; width: 300px; @@ -30,6 +37,7 @@ .todoList{ display:flex; flex-direction: column; + text-align: center; width: 28em; } .todoInput{/*input container*/ @@ -37,7 +45,7 @@ height:35px; padding-bottom: 5px; } -input{/*input 태그 따로 설정*/ +input[type=text]{/*input 태그 따로 설정*/ background-color: var(--bg-color); color: var(--card-color); border: solid 2px var(--card-color); @@ -66,6 +74,7 @@ input{/*input 태그 따로 설정*/ height: 100px; margin : 7px 0; border-radius: 8px; + position: relative; } .todoCard.checked{ transition : opacity 0.3s; @@ -75,11 +84,12 @@ input{/*input 태그 따로 설정*/ opacity: 0.6; } .todoElem{ - flex:1; /*여백 다 채우게끔*/ margin-left:30px; } input[type=checkbox]{ - margin-left: 20px; + position:absolute; /*checkbox 위치 고정 (코드리뷰 반영)*/ + top : 40px; + right : 15px; } .todoDelete{ border: none; diff --git a/src/App.js b/src/App.js index 3f397cb61..1a6508f84 100644 --- a/src/App.js +++ b/src/App.js @@ -1,50 +1,50 @@ import "./App.css"; import { useState, useEffect } from "react"; import Cards from "./components/Cards.js"; +import Clock from "./components/Clock.js"; function App() { - const [todo, setTodo] = useState(["운동하기", "밥먹기"]); - const [currentTime, setCurrentTime] = useState(new Date()); - - // 시간 업데이트 - const updateClock = () => { - setCurrentTime(new Date()); + const [todo, setTodo] = useState([]); + const [newTodo, setNewTodo] = useState(""); + //input handler + const handleInputChange = (e) => { + setNewTodo(e.target.value); }; - useEffect(() => { - const timer = setInterval(updateClock, 1000); - - return () => { - clearInterval(timer); - }; - }, []); - - const options = { - weekday: "long", - month: "numeric", - day: "numeric", - hour: "2-digit", - minute: "2-digit", - second: "2-digit", - hour12: false, //오전 오후 나누는거 false 처리 + // + 누르거나 enter 둘다 해당함수 호출 + const handleAddTodo = () => { + if (newTodo.trim() !== "") { + setTodo([newTodo, ...todo]); + setNewTodo(""); + } + }; + const handleSubmit = (e) => { + e.preventDefault(); + handleAddTodo(); }; - //string으로 만들어 변수로 변환한다. - const stringTime = currentTime.toLocaleDateString("ko-KR", options); - return ( - <> -
+
+
TODO-list
투두리스트를 작성하고 오늘 하루를 기록해요
-
{stringTime}
+
-
-
- - -
- - + +
+ + +
+
+ +
+
); } From 1761c964839b24c62178d2b5cd47006cd9ace39e Mon Sep 17 00:00:00 2001 From: leekyuho Date: Wed, 20 Sep 2023 22:14:43 +0900 Subject: [PATCH 06/12] =?UTF-8?q?chore=20:=20global=EC=97=90=EC=84=9C?= =?UTF-8?q?=EC=9D=98=20flex=20=20=EC=84=A0=EC=96=B8=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/GlobalStyle.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/GlobalStyle.js b/src/GlobalStyle.js index 7e3520236..21f4ec2f2 100644 --- a/src/GlobalStyle.js +++ b/src/GlobalStyle.js @@ -7,10 +7,6 @@ const GlobalStyle = createGlobalStyle` background-color: black; color : #ECECEC; font-family: 'GmarketSansMedium'; - display: flex; - flex-direction: column; - align-items: center; } `; - export default GlobalStyle; From 25aa1205d316b01e157f6d4bc24493122703e286 Mon Sep 17 00:00:00 2001 From: leekyuho Date: Wed, 20 Sep 2023 22:48:38 +0900 Subject: [PATCH 07/12] =?UTF-8?q?feat=20:=20delete=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 5 ++--- src/components/Cards.js | 10 +++++++++- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index 1a6508f84..de779a4f9 100644 --- a/src/App.js +++ b/src/App.js @@ -9,8 +9,7 @@ function App() { const handleInputChange = (e) => { setNewTodo(e.target.value); }; - - // + 누르거나 enter 둘다 해당함수 호출 + // submit 시 todo 추가 const handleAddTodo = () => { if (newTodo.trim() !== "") { setTodo([newTodo, ...todo]); @@ -42,7 +41,7 @@ function App() {
- +
); diff --git a/src/components/Cards.js b/src/components/Cards.js index c98726ec6..d6371da9b 100644 --- a/src/components/Cards.js +++ b/src/components/Cards.js @@ -1,5 +1,11 @@ import "../App"; function Cards(props) { + //todo state 에서 삭제 + const handleOnClick = (index) => { + const copyTodo = [...props.todo]; + copyTodo.splice(index, 1); + props.setTodo(copyTodo); + }; return ( <>
@@ -8,7 +14,9 @@ function Cards(props) {
{element}
-
X
+
handleOnClick(i)}> + X +
); })} From 474f8ac857bff46f0d6d5a343a67c637ac76735a Mon Sep 17 00:00:00 2001 From: leekyuho Date: Fri, 22 Sep 2023 03:17:07 +0900 Subject: [PATCH 08/12] =?UTF-8?q?feat=20:=20todo=EC=B2=B4=ED=81=AC=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84(styled-component)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.css | 27 +++------------- src/App.js | 3 +- src/components/Cards.js | 68 +++++++++++++++++++++++++++++++++++------ 3 files changed, 66 insertions(+), 32 deletions(-) diff --git a/src/App.css b/src/App.css index 064c69202..787fc1b6b 100644 --- a/src/App.css +++ b/src/App.css @@ -60,44 +60,27 @@ input[type=text]{/*input 태그 따로 설정*/ width: 35px; margin-left: 5px; transition : border 0.3s, color 0.3s; + cursor: pointer; } #plusButton:hover{ border : solid 2px #5f5f5f; color : #5f5f5f; } -.todoCard{ - background-color: var(--card-color); - color : var(--bg-color); - display:flex; /*todoElem 세로축 가운데 정렬*/ - align-items:center; - justify-content:space-between;/* item 사이 간격 균일하게 */ - height: 100px; - margin : 7px 0; - border-radius: 8px; - position: relative; -} -.todoCard.checked{ - transition : opacity 0.3s; - opacity: 0.5; -} -.todoCard.checked:hover{ /*마우스 올렸을 때 살짝 밝게*/ - opacity: 0.6; -} -.todoElem{ - margin-left:30px; -} + input[type=checkbox]{ position:absolute; /*checkbox 위치 고정 (코드리뷰 반영)*/ top : 40px; right : 15px; + cursor: pointer; } .todoDelete{ border: none; margin-bottom: 80px; - margin-right: 5px; + margin-right: 7px; font-size: 7px; border-radius: 2px; transition : background-color 0.3s; + cursor: pointer; } .todoDelete:hover{ background-color: #b1b1b1; diff --git a/src/App.js b/src/App.js index de779a4f9..d4f56b212 100644 --- a/src/App.js +++ b/src/App.js @@ -12,7 +12,8 @@ function App() { // submit 시 todo 추가 const handleAddTodo = () => { if (newTodo.trim() !== "") { - setTodo([newTodo, ...todo]); + const newTodoItem = { content: newTodo, checked: false }; + setTodo([newTodoItem, ...todo]); setNewTodo(""); } }; diff --git a/src/components/Cards.js b/src/components/Cards.js index d6371da9b..c2693a5b8 100644 --- a/src/components/Cards.js +++ b/src/components/Cards.js @@ -1,23 +1,73 @@ import "../App"; -function Cards(props) { +import styled, { css } from "styled-components"; +import { useEffect, useState } from "react"; +const TodoCard = styled.div` + background-color: var(--card-color); + color: var(--bg-color); + display: flex; /*todoElem 세로축 가운데 정렬*/ + align-items: center; + justify-content: space-between; /* item 사이 간격 균일하게 */ + height: 100px; + margin: 5px 0; + border-radius: 8px; + position: relative; + transition: opacity 0.3s; + opacity: ${(props) => (props.checked ? "0.5" : "1")}; + &:hover { + opacity: ${(props) => (props.checked ? "0.6" : "1")}; + } +`; +const TodoElem = styled.div` + margin-left: 30px; + text-decoration: ${(props) => props.checked && "line-through"}; +`; +function Cards({ todo, setTodo }) { + const unCheckedTodo = todo.filter((element) => !element.checked); + const checkedTodo = todo.filter((element) => element.checked); //todo state 에서 삭제 const handleOnClick = (index) => { - const copyTodo = [...props.todo]; + const copyTodo = [...todo]; copyTodo.splice(index, 1); - props.setTodo(copyTodo); + setTodo(copyTodo); }; + const handleChecked = (element) => { + const copyTodo = [...todo]; + const index = copyTodo.findIndex((e) => e === element); + copyTodo[index].checked = !copyTodo[index].checked; + setTodo(copyTodo); + }; + return ( <>
- {props.todo.map((element, i) => { + {unCheckedTodo.map((element, i) => { + return ( + + {element.content} + handleChecked(element)} + > +
handleOnClick(i)}> + x +
+ + ); + })} + {checkedTodo.map((element, i) => { return ( -
-
{element}
- + + {element.content} + handleChecked(element)} + >
handleOnClick(i)}> - X + x
-
+ ); })}
From 30ff7ce3af78c7efe55243a9841606095f53a7ea Mon Sep 17 00:00:00 2001 From: leekyuho Date: Fri, 22 Sep 2023 18:09:43 +0900 Subject: [PATCH 09/12] =?UTF-8?q?feat=20:=20localStorage=20=EC=A0=80?= =?UTF-8?q?=EC=9E=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 7 ++++++- src/components/Cards.js | 24 +++++++++++++++++------- 2 files changed, 23 insertions(+), 8 deletions(-) diff --git a/src/App.js b/src/App.js index d4f56b212..d2fd61bc8 100644 --- a/src/App.js +++ b/src/App.js @@ -3,8 +3,13 @@ import { useState, useEffect } from "react"; import Cards from "./components/Cards.js"; import Clock from "./components/Clock.js"; function App() { - const [todo, setTodo] = useState([]); + const storedTodo = JSON.parse(localStorage.getItem("data")) || []; + const [todo, setTodo] = useState(storedTodo); const [newTodo, setNewTodo] = useState(""); + //todo 변경 시 localStorage 저장 + useEffect(() => { + localStorage.setItem("data", JSON.stringify(todo)); + }, [todo]); //input handler const handleInputChange = (e) => { setNewTodo(e.target.value); diff --git a/src/components/Cards.js b/src/components/Cards.js index c2693a5b8..864612984 100644 --- a/src/components/Cards.js +++ b/src/components/Cards.js @@ -4,9 +4,9 @@ import { useEffect, useState } from "react"; const TodoCard = styled.div` background-color: var(--card-color); color: var(--bg-color); - display: flex; /*todoElem 세로축 가운데 정렬*/ + display: flex; align-items: center; - justify-content: space-between; /* item 사이 간격 균일하게 */ + justify-content: space-between; height: 100px; margin: 5px 0; border-radius: 8px; @@ -19,17 +19,21 @@ const TodoCard = styled.div` `; const TodoElem = styled.div` margin-left: 30px; - text-decoration: ${(props) => props.checked && "line-through"}; + text-decoration: ${(props) => (props.checked ? "line-through" : "none")}; `; function Cards({ todo, setTodo }) { const unCheckedTodo = todo.filter((element) => !element.checked); const checkedTodo = todo.filter((element) => element.checked); + //todo state 에서 삭제 - const handleOnClick = (index) => { + const handleOnClick = (element) => { const copyTodo = [...todo]; + const index = copyTodo.findIndex((e) => e === element); copyTodo.splice(index, 1); + setTodo(copyTodo); }; + //element에 해당하는 index를 찾아서 checked 바꿔주고 state 변경 const handleChecked = (element) => { const copyTodo = [...todo]; const index = copyTodo.findIndex((e) => e === element); @@ -49,7 +53,10 @@ function Cards({ todo, setTodo }) { checked={element.checked} onChange={() => handleChecked(element)} > -
handleOnClick(i)}> +
handleOnClick(element)} + > x
@@ -58,13 +65,16 @@ function Cards({ todo, setTodo }) { {checkedTodo.map((element, i) => { return ( - {element.content} + {element.content} handleChecked(element)} > -
handleOnClick(i)}> +
handleOnClick(element)} + > x
From a904ba5e0822ea92328b2cbe2dfffd60753d166d Mon Sep 17 00:00:00 2001 From: leekyuho Date: Fri, 22 Sep 2023 18:48:05 +0900 Subject: [PATCH 10/12] =?UTF-8?q?feat=20:=20=EC=83=89=EC=83=81=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 16 +++++++++++++++- src/components/Cards.js | 16 ++++++++++++---- 2 files changed, 27 insertions(+), 5 deletions(-) diff --git a/src/App.js b/src/App.js index d2fd61bc8..a0baadcd7 100644 --- a/src/App.js +++ b/src/App.js @@ -6,6 +6,15 @@ function App() { const storedTodo = JSON.parse(localStorage.getItem("data")) || []; const [todo, setTodo] = useState(storedTodo); const [newTodo, setNewTodo] = useState(""); + //count로 수 올려가면서 차례로 색 지정 + const [cardColor, setCardColor] = useState([ + "#ECECEC", + "#A6DDF5", + "#F5AEAE", + "#87DDCE", + "#F5EDB6", + ]); + const [colorCnt, setColorCnt] = useState(0); //todo 변경 시 localStorage 저장 useEffect(() => { localStorage.setItem("data", JSON.stringify(todo)); @@ -17,8 +26,13 @@ function App() { // submit 시 todo 추가 const handleAddTodo = () => { if (newTodo.trim() !== "") { - const newTodoItem = { content: newTodo, checked: false }; + const newTodoItem = { + content: newTodo, + checked: false, + color: cardColor[colorCnt % 5], + }; setTodo([newTodoItem, ...todo]); + setColorCnt((colorCnt + 1) % 5); setNewTodo(""); } }; diff --git a/src/components/Cards.js b/src/components/Cards.js index 864612984..a121f7975 100644 --- a/src/components/Cards.js +++ b/src/components/Cards.js @@ -2,7 +2,7 @@ import "../App"; import styled, { css } from "styled-components"; import { useEffect, useState } from "react"; const TodoCard = styled.div` - background-color: var(--card-color); + background-color: ${(props) => props.color}; color: var(--bg-color); display: flex; align-items: center; @@ -22,15 +22,23 @@ const TodoElem = styled.div` text-decoration: ${(props) => (props.checked ? "line-through" : "none")}; `; function Cards({ todo, setTodo }) { + //checked card 구분 const unCheckedTodo = todo.filter((element) => !element.checked); const checkedTodo = todo.filter((element) => element.checked); + // const [cardColor, setCardColor] = useState([ + // "#ECECEC", + // "#A6DDF5", + // "#F5AEAE", + // "#87DDCE", + // "#F5EDB6", + // ]); + //todo state 에서 삭제 const handleOnClick = (element) => { const copyTodo = [...todo]; const index = copyTodo.findIndex((e) => e === element); copyTodo.splice(index, 1); - setTodo(copyTodo); }; //element에 해당하는 index를 찾아서 checked 바꿔주고 state 변경 @@ -46,7 +54,7 @@ function Cards({ todo, setTodo }) {
{unCheckedTodo.map((element, i) => { return ( - + {element.content} { return ( - + {element.content} Date: Mon, 2 Oct 2023 03:44:47 +0900 Subject: [PATCH 11/12] =?UTF-8?q?fix:=20=EA=B8=80=EC=9E=90=20card=20?= =?UTF-8?q?=EB=84=98=EC=96=B4=EA=B0=80=EB=8A=94=20=EC=98=A4=EB=A5=98=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 6 +++++- src/components/Cards.js | 10 ++-------- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/src/App.js b/src/App.js index a0baadcd7..c89b5ad73 100644 --- a/src/App.js +++ b/src/App.js @@ -38,7 +38,11 @@ function App() { }; const handleSubmit = (e) => { e.preventDefault(); - handleAddTodo(); + if (newTodo.length >= 80) { + alert("80자 이하로 입력해주세요"); + } else { + handleAddTodo(); + } }; return (
diff --git a/src/components/Cards.js b/src/components/Cards.js index a121f7975..99089fd0f 100644 --- a/src/components/Cards.js +++ b/src/components/Cards.js @@ -20,20 +20,14 @@ const TodoCard = styled.div` const TodoElem = styled.div` margin-left: 30px; text-decoration: ${(props) => (props.checked ? "line-through" : "none")}; + max-width: 350px; + word-wrap: break-word; `; function Cards({ todo, setTodo }) { //checked card 구분 const unCheckedTodo = todo.filter((element) => !element.checked); const checkedTodo = todo.filter((element) => element.checked); - // const [cardColor, setCardColor] = useState([ - // "#ECECEC", - // "#A6DDF5", - // "#F5AEAE", - // "#87DDCE", - // "#F5EDB6", - // ]); - //todo state 에서 삭제 const handleOnClick = (element) => { const copyTodo = [...todo]; From 4b077c1deeadf87d925b0ad66a52db4ecf370111 Mon Sep 17 00:00:00 2001 From: leekyuho Date: Mon, 2 Oct 2023 03:52:08 +0900 Subject: [PATCH 12/12] =?UTF-8?q?fix:=20description=20=EC=A4=84=EB=B0=94?= =?UTF-8?q?=EA=BF=88=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index c89b5ad73..6e43d1925 100644 --- a/src/App.js +++ b/src/App.js @@ -49,7 +49,10 @@ function App() {
TODO-list
-
투두리스트를 작성하고 오늘 하루를 기록해요
+
+ 투두리스트를 작성하고 +
오늘 하루를 기록해요 +