From 62c533a717401c296549cd6e60aa103ad3d9992b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=A5=98=EC=9B=90?= Date: Sat, 21 Sep 2024 17:59:11 +0900 Subject: [PATCH 01/16] =?UTF-8?q?feat:=20UI=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 267 +++++++++++++++++++++++++++++++++++- package.json | 4 + src/App.js | 9 -- src/App.jsx | 42 ++++++ src/components/Editor.jsx | 43 ++++++ src/components/Header.jsx | 21 +++ src/components/List.jsx | 54 ++++++++ src/components/TodoItem.jsx | 50 +++++++ src/{index.js => index.jsx} | 0 9 files changed, 474 insertions(+), 16 deletions(-) delete mode 100644 src/App.js create mode 100644 src/App.jsx create mode 100644 src/components/Editor.jsx create mode 100644 src/components/Header.jsx create mode 100644 src/components/List.jsx create mode 100644 src/components/TodoItem.jsx rename src/{index.js => index.jsx} (100%) diff --git a/package-lock.json b/package-lock.json index 97dcc3a..2d402a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,11 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-scripts": "5.0.1", + "styled-components": "^6.1.13", "web-vitals": "^2.1.4" + }, + "devDependencies": { + "@babel/plugin-proposal-private-property-in-object": "^7.21.11" } }, "node_modules/@adobe/css-tools": { @@ -627,9 +631,18 @@ } }, "node_modules/@babel/plugin-proposal-private-property-in-object": { - "version": "7.21.0-placeholder-for-preset-env.2", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz", - "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==", + "version": "7.21.11", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz", + "integrity": "sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==", + "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.18.6", + "@babel/helper-create-class-features-plugin": "^7.21.0", + "@babel/helper-plugin-utils": "^7.20.2", + "@babel/plugin-syntax-private-property-in-object": "^7.14.5" + }, "engines": { "node": ">=6.9.0" }, @@ -1888,6 +1901,18 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-private-property-in-object": { + "version": "7.21.0-placeholder-for-preset-env.2", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz", + "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==", + "license": "MIT", + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/preset-env/node_modules/semver": { "version": "6.3.1", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", @@ -2280,6 +2305,27 @@ "postcss-selector-parser": "^6.0.10" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", + "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==", + "license": "MIT", + "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==", + "license": "MIT" + }, + "node_modules/@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==", + "license": "MIT" + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -4465,6 +4511,12 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz", "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==" }, + "node_modules/@types/stylis": { + "version": "4.2.5", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz", + "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==", + "license": "MIT" + }, "node_modules/@types/testing-library__jest-dom": { "version": "5.14.9", "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz", @@ -5931,6 +5983,15 @@ "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==", + "license": "MIT", + "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", @@ -6358,6 +6419,15 @@ "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==", + "license": "ISC", + "engines": { + "node": ">=4" + } + }, "node_modules/css-declaration-sorter": { "version": "6.4.1", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz", @@ -6499,6 +6569,17 @@ "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==", + "license": "MIT", + "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", @@ -15823,6 +15904,12 @@ "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==", + "license": "MIT" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -16382,6 +16469,68 @@ "webpack": "^5.0.0" } }, + "node_modules/styled-components": { + "version": "6.1.13", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.13.tgz", + "integrity": "sha512-M0+N2xSnAtwcVAQeFEsGWFFxXDftHUD7XrKla06QbpUMmbmtFBMMTcKWvFXtWxuD5qQkB8iU5gk6QASlx2ZRMw==", + "license": "MIT", + "dependencies": { + "@emotion/is-prop-valid": "1.2.2", + "@emotion/unitless": "0.8.1", + "@types/stylis": "4.2.5", + "css-to-react-native": "3.2.0", + "csstype": "3.1.3", + "postcss": "8.4.38", + "shallowequal": "1.1.0", + "stylis": "4.3.2", + "tslib": "2.6.2" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0" + } + }, + "node_modules/styled-components/node_modules/postcss": { + "version": "8.4.38", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", + "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "nanoid": "^3.3.7", + "picocolors": "^1.0.0", + "source-map-js": "^1.2.0" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/styled-components/node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", + "license": "0BSD" + }, "node_modules/stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", @@ -16397,6 +16546,12 @@ "postcss": "^8.2.15" } }, + "node_modules/stylis": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz", + "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==", + "license": "MIT" + }, "node_modules/sucrase": { "version": "3.35.0", "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz", @@ -18653,10 +18808,16 @@ } }, "@babel/plugin-proposal-private-property-in-object": { - "version": "7.21.0-placeholder-for-preset-env.2", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz", - "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==", - "requires": {} + "version": "7.21.11", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz", + "integrity": "sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==", + "dev": true, + "requires": { + "@babel/helper-annotate-as-pure": "^7.18.6", + "@babel/helper-create-class-features-plugin": "^7.21.0", + "@babel/helper-plugin-utils": "^7.20.2", + "@babel/plugin-syntax-private-property-in-object": "^7.14.5" + } }, "@babel/plugin-syntax-async-generators": { "version": "7.8.4", @@ -19461,6 +19622,12 @@ "semver": "^6.3.1" }, "dependencies": { + "@babel/plugin-proposal-private-property-in-object": { + "version": "7.21.0-placeholder-for-preset-env.2", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz", + "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==", + "requires": {} + }, "semver": { "version": "6.3.1", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", @@ -19681,6 +19848,24 @@ "integrity": "sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==", "requires": {} }, + "@emotion/is-prop-valid": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", + "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==", + "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.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -21307,6 +21492,11 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz", "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==" }, + "@types/stylis": { + "version": "4.2.5", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz", + "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==" + }, "@types/testing-library__jest-dom": { "version": "5.14.9", "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz", @@ -22367,6 +22557,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", @@ -22682,6 +22877,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.4.1", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz", @@ -22754,6 +22954,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", @@ -29258,6 +29468,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", @@ -29678,6 +29893,39 @@ "integrity": "sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==", "requires": {} }, + "styled-components": { + "version": "6.1.13", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.13.tgz", + "integrity": "sha512-M0+N2xSnAtwcVAQeFEsGWFFxXDftHUD7XrKla06QbpUMmbmtFBMMTcKWvFXtWxuD5qQkB8iU5gk6QASlx2ZRMw==", + "requires": { + "@emotion/is-prop-valid": "1.2.2", + "@emotion/unitless": "0.8.1", + "@types/stylis": "4.2.5", + "css-to-react-native": "3.2.0", + "csstype": "3.1.3", + "postcss": "8.4.38", + "shallowequal": "1.1.0", + "stylis": "4.3.2", + "tslib": "2.6.2" + }, + "dependencies": { + "postcss": { + "version": "8.4.38", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", + "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", + "requires": { + "nanoid": "^3.3.7", + "picocolors": "^1.0.0", + "source-map-js": "^1.2.0" + } + }, + "tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + } + } + }, "stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", @@ -29687,6 +29935,11 @@ "postcss-selector-parser": "^6.0.4" } }, + "stylis": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz", + "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==" + }, "sucrase": { "version": "3.35.0", "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz", diff --git a/package.json b/package.json index af506b2..f3774f7 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-scripts": "5.0.1", + "styled-components": "^6.1.13", "web-vitals": "^2.1.4" }, "scripts": { @@ -34,5 +35,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "@babel/plugin-proposal-private-property-in-object": "^7.21.11" } } diff --git a/src/App.js b/src/App.js deleted file mode 100644 index 777b355..0000000 --- a/src/App.js +++ /dev/null @@ -1,9 +0,0 @@ -function App() { - return ( -
-

๐ŸถCEOS 20๊ธฐ ํ”„๋ก ํŠธ์—”๋“œ ์ตœ๊ณ ๐Ÿถ

-
- ); -} - -export default App; diff --git a/src/App.jsx b/src/App.jsx new file mode 100644 index 0000000..8c2429a --- /dev/null +++ b/src/App.jsx @@ -0,0 +1,42 @@ +import styled from "styled-components"; +import { createGlobalStyle } from "styled-components"; + +import Header from "./components/Header"; +import List from "./components/List"; +import Editor from "./components/Editor"; + +function App() { + return ( + <> + + +
+ + + + + ); +} + +const AppContainer = styled.div` + display: flex; + flex-direction: column; + gap: 10px; + width: 500px; + margin: 0 auto; + background-color: #f1f3ff; + border-radius: 5px; + padding: 30px; + box-shadow: inset 0 0 20px #d6ddff; +`; + +const GlobalStyle = createGlobalStyle` + body { + background-color: #788bff; + margin: 0; + padding: 0; + font-family: 'Arial', sans-serif; + } +`; + +export default App; diff --git a/src/components/Editor.jsx b/src/components/Editor.jsx new file mode 100644 index 0000000..d95bf42 --- /dev/null +++ b/src/components/Editor.jsx @@ -0,0 +1,43 @@ +import styled from "styled-components"; + +const Editor = () => { + return ( + + + + + ); +}; + +const EditorContainer = styled.div` + display: flex; + gap: 10px; +`; + +const Input = styled.input` + flex: 1; + padding: 15px; + border: 1px solid rgb(220, 220, 220); + border-radius: 5px; + background-color: #d6ddff; + color: #788bff; + outline: none; + border: none; + font-weight: 500; + + &::placeholder { + color: #788bff; + opacity: 1; + } +`; + +const Button = styled.button` + cursor: pointer; + width: 80px; + border: none; + background-color: #788bff; + color: white; + border-radius: 10px; +`; + +export default Editor; diff --git a/src/components/Header.jsx b/src/components/Header.jsx new file mode 100644 index 0000000..0405028 --- /dev/null +++ b/src/components/Header.jsx @@ -0,0 +1,21 @@ +import styled from "styled-components"; + +const Header = () => { + return ( + +

TO DO

+ {new Date().toDateString()} + + ); +}; + +const HeaderContainer = styled.div` + h1 { + color: #788bff; + } + span { + color: #8790ca; + } +`; + +export default Header; diff --git a/src/components/List.jsx b/src/components/List.jsx new file mode 100644 index 0000000..25e2342 --- /dev/null +++ b/src/components/List.jsx @@ -0,0 +1,54 @@ +import styled from "styled-components"; +import TodoItem from "./TodoItem.jsx"; + +const List = () => { + return ( + +

๐Ÿ’œTO DO LIST๐Ÿ’œ

+ + + + + + ); +}; + +const ListContainer = styled.div` + display: flex; + flex-direction: column; + gap: 10px; + margin-top: 40px; + + h4 { + color: #788bff; + margin: 0; + } +`; + +const SearchInput = styled.input` + width: 100%; + border: none; + border-bottom: 1px solid #d9dfff; + padding: 15px 0; + color: #788bff; + margin-bottom: 20px; + background: transparent; + + &:focus { + outline: none; + color: #788bff; + border-bottom: 1px solid #788bff; + } + + &::placeholder { + color: #788bff; + } +`; + +const TodoWrapper = styled.div` + display: flex; + flex-direction: column; + gap: 20px; +`; + +export default List; diff --git a/src/components/TodoItem.jsx b/src/components/TodoItem.jsx new file mode 100644 index 0000000..f3094a8 --- /dev/null +++ b/src/components/TodoItem.jsx @@ -0,0 +1,50 @@ +import styled from "styled-components"; + +const TodoItem = () => { + return ( + + + todo + date + Delete + + ); +}; + +const TodoItemContainer = styled.div` + display: flex; + align-items: center; + gap: 20px; + padding-bottom: 20px; + border-bottom: 1px solid rgb(240, 240, 240); +`; + +const Checkbox = styled.input` + width: 20px; +`; + +const Content = styled.div` + flex: 1; + color: #788bff; + &.completed { + text-decoration: line-through; + color: gray; + } +`; + +const DateText = styled.div` + font-size: 14px; + color: #8790ca; +`; + +const DeleteButton = styled.button` + cursor: pointer; + color: white; + font-size: 14px; + border: none; + border-radius: 5px; + padding: 5px; + background-color: #788bff; +`; + +export default TodoItem; diff --git a/src/index.js b/src/index.jsx similarity index 100% rename from src/index.js rename to src/index.jsx From 9e6771059564ff3c903ed485d4815ed2a2281bf2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=A5=98=EC=9B=90?= Date: Sat, 21 Sep 2024 18:16:02 +0900 Subject: [PATCH 02/16] =?UTF-8?q?feat:=20=ED=95=A0=EC=9D=BC=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80,=20=ED=95=A0=EC=9D=BC=20=EC=82=AD=EC=A0=9C,=20?= =?UTF-8?q?=ED=95=A0=EC=9D=BC=20=EA=B2=80=EC=83=89=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.jsx | 56 +++++++++++++++++++++++++++++++++++-- src/components/Editor.jsx | 37 ++++++++++++++++++++++-- src/components/List.jsx | 44 +++++++++++++++++++++++++---- src/components/TodoItem.jsx | 21 ++++++++++---- 4 files changed, 142 insertions(+), 16 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 8c2429a..5f992f1 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,18 +1,68 @@ import styled from "styled-components"; import { createGlobalStyle } from "styled-components"; - import Header from "./components/Header"; import List from "./components/List"; import Editor from "./components/Editor"; +import { useState, useRef } from "react"; + +const mockDate = [ + { + id: 0, + isDone: false, + content: "React ๊ณต๋ถ€ํ•˜๊ธฐ", + date: new Date().getTime(), + }, + { + id: 1, + isDone: false, + content: "๋นจ๋ž˜ํ•˜๊ธฐ", + date: new Date().getTime(), + }, + { + id: 2, + isDone: false, + content: "๋…ธ๋ž˜์—ฐ์Šตํ•˜๊ธฐ", + date: new Date().getTime(), + }, +]; function App() { + const [todos, setTodos] = useState(mockDate); + const idRef = useRef(3); + + const onCreate = (content) => { + const newTodo = { + id: idRef.current++, + isDone: false, + content: content, + date: new Date().getTime(), + }; + + setTodos([...todos, newTodo]); + }; + + const onUpdate = (targetId) => { + setTodos( + todos.map((todo) => + todo.id === targetId ? { ...todo, isDone: !todo.isDone } : todo + ) + ); + }; + const removeTodo = (targetId) => { + setTodos(todos.filter((todo) => todo.id !== targetId)); + }; return ( <>
- - + + ); diff --git a/src/components/Editor.jsx b/src/components/Editor.jsx index d95bf42..dbfe380 100644 --- a/src/components/Editor.jsx +++ b/src/components/Editor.jsx @@ -1,10 +1,41 @@ import styled from "styled-components"; +import { useRef, useState } from "react"; + +const Editor = ({ onCreate }) => { + const [content, setContent] = useState(""); + + const contentRef = useRef(); // + + const onChangeContent = (e) => { + setContent(e.target.value); + }; + + const onkeydown = (e) => { + if (e.key === "Enter") { + onSubmit(); + } + }; + + const onSubmit = () => { + if (content === "") { + contentRef.current.focus(); + return; + } + onCreate(content); + setContent(""); + }; -const Editor = () => { return ( - - + + ); }; diff --git a/src/components/List.jsx b/src/components/List.jsx index 25e2342..8e4785d 100644 --- a/src/components/List.jsx +++ b/src/components/List.jsx @@ -1,13 +1,47 @@ import styled from "styled-components"; -import TodoItem from "./TodoItem.jsx"; +import TodoItem from "./TodoItem"; +import { useState } from "react"; + +const List = ({ todos, onUpdate, setTodos, removeTodo }) => { + const [search, setSearch] = useState(""); + + const onChangeSearch = (e) => { + setSearch(e.target.value); + }; + + const getFilteredDate = () => { + if (search === "") { + return todos; + } + return todos.filter((todos) => { + return todos.content.toLowerCase().includes(search.toLowerCase()); + }); + }; + + const filteredTodos = getFilteredDate(); -const List = () => { return ( -

๐Ÿ’œTO DO LIST๐Ÿ’œ

- +

Todo List ๐ŸŒฑ

+ - + {filteredTodos.map((todos) => { + return ( + + ); //spread, key + })} ); diff --git a/src/components/TodoItem.jsx b/src/components/TodoItem.jsx index f3094a8..929847a 100644 --- a/src/components/TodoItem.jsx +++ b/src/components/TodoItem.jsx @@ -1,12 +1,23 @@ import styled from "styled-components"; -const TodoItem = () => { +const TodoItem = ({ id, isDone, content, date, onUpdate, removeTodo }) => { + const onChangeCheckbox = () => { + onUpdate(id); + }; + return ( - - todo - date - Delete + + + {content} + + {new Date(date).toLocaleDateString()} + removeTodo(id)}>์‚ญ์ œ ); }; From 509eca8b4d3eb3efc116661adfc78b3cfcbe9b1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=A5=98=EC=9B=90?= Date: Sat, 21 Sep 2024 18:34:41 +0900 Subject: [PATCH 03/16] =?UTF-8?q?fix:word-brak=20=EC=A0=81=EC=9A=A9,=20sty?= =?UTF-8?q?le:=20GlobalStyle=20display=20flex=20=EC=A0=81=EC=9A=A9?= =?UTF-8?q?=ED=95=98=EC=97=AC=20AppContainer=20=EA=B0=80=EC=9A=B4=EB=8D=B0?= =?UTF-8?q?=20=EC=A0=95=EB=A0=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 5 +++++ src/components/List.jsx | 2 ++ src/components/TodoItem.jsx | 3 +++ 3 files changed, 10 insertions(+) diff --git a/src/App.jsx b/src/App.jsx index 5f992f1..312b615 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -78,6 +78,7 @@ const AppContainer = styled.div` border-radius: 5px; padding: 30px; box-shadow: inset 0 0 20px #d6ddff; + height: 80vh; `; const GlobalStyle = createGlobalStyle` @@ -86,6 +87,10 @@ const GlobalStyle = createGlobalStyle` margin: 0; padding: 0; font-family: 'Arial', sans-serif; + display:flex; + height:100vh; + justify-content:center; + align-items:center; } `; diff --git a/src/components/List.jsx b/src/components/List.jsx index 8e4785d..3617e0e 100644 --- a/src/components/List.jsx +++ b/src/components/List.jsx @@ -52,6 +52,8 @@ const ListContainer = styled.div` flex-direction: column; gap: 10px; margin-top: 40px; + overflow-y: auto; + scrollbar-width: none; h4 { color: #788bff; diff --git a/src/components/TodoItem.jsx b/src/components/TodoItem.jsx index 929847a..0874183 100644 --- a/src/components/TodoItem.jsx +++ b/src/components/TodoItem.jsx @@ -46,6 +46,9 @@ const Content = styled.div` const DateText = styled.div` font-size: 14px; color: #8790ca; + word-break: break-word; + word-wrap: break-word; + overflow-wrap: break-word; `; const DeleteButton = styled.button` From 4231ce23853cf294a76873e34657dc1b1c80f956 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=A5=98=EC=9B=90?= Date: Sat, 21 Sep 2024 18:40:56 +0900 Subject: [PATCH 04/16] =?UTF-8?q?fix:=20word-break=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?=EB=B0=8F=20=EC=98=AC=EB=B0=94=EB=A5=B8=20=EC=9C=84=EC=B9=98?= =?UTF-8?q?=EC=97=90=20=EC=9E=AC=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TodoItem.jsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/TodoItem.jsx b/src/components/TodoItem.jsx index 0874183..6ae9dee 100644 --- a/src/components/TodoItem.jsx +++ b/src/components/TodoItem.jsx @@ -37,6 +37,8 @@ const Checkbox = styled.input` const Content = styled.div` flex: 1; color: #788bff; + word-break: break-word; + &.completed { text-decoration: line-through; color: gray; @@ -46,9 +48,6 @@ const Content = styled.div` const DateText = styled.div` font-size: 14px; color: #8790ca; - word-break: break-word; - word-wrap: break-word; - overflow-wrap: break-word; `; const DeleteButton = styled.button` From a96cc82ffd1843a8b395196b5b3ab0f2153f50e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=A5=98=EC=9B=90?= Date: Sat, 21 Sep 2024 18:54:11 +0900 Subject: [PATCH 05/16] =?UTF-8?q?style:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?= =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=EC=9D=84=20=EC=9C=84=ED=95=9C=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/App.jsx b/src/App.jsx index 312b615..57001a9 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -79,6 +79,13 @@ const AppContainer = styled.div` padding: 30px; box-shadow: inset 0 0 20px #d6ddff; height: 80vh; + + /* ๋ชจ๋ฐ”์ผ ๋ฐ˜์‘ํ˜• */ + @media (max-width: 768px) { + width: 360px; + padding: 20px; + height: 90vh; + } `; const GlobalStyle = createGlobalStyle` @@ -91,6 +98,12 @@ const GlobalStyle = createGlobalStyle` height:100vh; justify-content:center; align-items:center; + + /* ๋ชจ๋ฐ”์ผ ๋ฐ˜์‘ํ˜• */ + @media (max-width: 768px) { + height:100vh; + width:100%; + } } `; From 6cf7376e7c4e1f4722e6ec041d07fdcf608411b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=A5=98=EC=9B=90?= Date: Sat, 21 Sep 2024 19:51:59 +0900 Subject: [PATCH 06/16] =?UTF-8?q?style:=20=ED=95=A0=EC=9D=BC=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20=EC=82=AD=EC=A0=9C=20=EC=95=A0=EB=8B=88?= =?UTF-8?q?=EB=A9=94=EC=9D=B4=EC=85=98,=20fix:=20=EA=B3=B5=EB=B0=B1?= =?UTF-8?q?=EB=A7=8C=20=EC=9E=88=EB=8A=94=20=EC=9E=85=EB=A0=A5=EC=9D=84=20?= =?UTF-8?q?=EB=B0=A9=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 59 ++++++++++++++++++++++--------------- src/components/Editor.jsx | 7 +++-- src/components/TodoItem.jsx | 43 +++++++++++++++++++++++++-- 3 files changed, 79 insertions(+), 30 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 57001a9..68bd87a 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -3,7 +3,7 @@ import { createGlobalStyle } from "styled-components"; import Header from "./components/Header"; import List from "./components/List"; import Editor from "./components/Editor"; -import { useState, useRef } from "react"; +import { useRef, useReducer } from "react"; const mockDate = [ { @@ -15,41 +15,57 @@ const mockDate = [ { id: 1, isDone: false, - content: "๋นจ๋ž˜ํ•˜๊ธฐ", + content: "๊ณ ์–‘์ด ๋ฐฅ ์ฃผ๊ธฐ", date: new Date().getTime(), }, { id: 2, isDone: false, - content: "๋…ธ๋ž˜์—ฐ์Šตํ•˜๊ธฐ", + content: "๊ณ ์–‘์ด ๋†€์•„์ฃผ๊ธฐ", date: new Date().getTime(), }, ]; +function reducer(state, action) { + switch (action.type) { + case "CREATE": + return [action.data, ...state]; + case "UPDATE": + return state.map((item) => + item.id === action.targetId ? { ...item, isDone: !item.isDone } : item + ); + case "DELETE": + return state.filter((item) => item.id !== action.targetId); + default: + return state; + } +} + function App() { - const [todos, setTodos] = useState(mockDate); + const [todos, dispatch] = useReducer(reducer, mockDate); const idRef = useRef(3); const onCreate = (content) => { - const newTodo = { - id: idRef.current++, - isDone: false, - content: content, - date: new Date().getTime(), - }; - - setTodos([...todos, newTodo]); + dispatch({ + type: "CREATE", + data: { + id: idRef.current++, + isDone: false, + content: content, + date: new Date().getTime(), + }, + }); }; const onUpdate = (targetId) => { - setTodos( - todos.map((todo) => - todo.id === targetId ? { ...todo, isDone: !todo.isDone } : todo - ) - ); + dispatch({ type: "UPDATE", targetId: targetId }); }; + const removeTodo = (targetId) => { - setTodos(todos.filter((todo) => todo.id !== targetId)); + dispatch({ + type: "DELETE", + targetId: targetId, + }); }; return ( <> @@ -57,12 +73,7 @@ function App() {
- + ); diff --git a/src/components/Editor.jsx b/src/components/Editor.jsx index dbfe380..52aa114 100644 --- a/src/components/Editor.jsx +++ b/src/components/Editor.jsx @@ -4,7 +4,7 @@ import { useRef, useState } from "react"; const Editor = ({ onCreate }) => { const [content, setContent] = useState(""); - const contentRef = useRef(); // + const contentRef = useRef(); const onChangeContent = (e) => { setContent(e.target.value); @@ -12,16 +12,17 @@ const Editor = ({ onCreate }) => { const onkeydown = (e) => { if (e.key === "Enter") { + e.preventDefault(); onSubmit(); } }; const onSubmit = () => { - if (content === "") { + if (content.trim() === "") { contentRef.current.focus(); return; } - onCreate(content); + onCreate(content.trim()); setContent(""); }; diff --git a/src/components/TodoItem.jsx b/src/components/TodoItem.jsx index 6ae9dee..173d5ea 100644 --- a/src/components/TodoItem.jsx +++ b/src/components/TodoItem.jsx @@ -1,12 +1,22 @@ -import styled from "styled-components"; +import React, { useState } from "react"; +import styled, { keyframes } from "styled-components"; const TodoItem = ({ id, isDone, content, date, onUpdate, removeTodo }) => { + const [isRemoving, setIsRemoving] = useState(false); + const onChangeCheckbox = () => { onUpdate(id); }; + const handleRemove = () => { + setIsRemoving(true); + setTimeout(() => { + removeTodo(id); + }, 300); + }; + return ( - + { {content} {new Date(date).toLocaleDateString()} - removeTodo(id)}>์‚ญ์ œ + ์‚ญ์ œ ); }; +// ํ•  ์ผ ์ถ”๊ฐ€ ์• ๋‹ˆ๋ฉ”์ด์…˜ +const slideDownFadeIn = keyframes` + from { + opacity: 0; + transform: translateY(-20px); + } + to { + opacity: 1; + transform: translateY(0); + } +`; + +// ํ•  ์ผ ์‚ญ์ œ ์• ๋‹ˆ๋ฉ”์ด์…˜ +const fadeOutScaleDown = keyframes` + from { + opacity: 1; + transform: scale(1); + } + to { + opacity: 0; + transform: scale(0.9) translateY(+10px); + } +`; + const TodoItemContainer = styled.div` display: flex; align-items: center; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid rgb(240, 240, 240); + animation: ${({ isRemoving }) => + isRemoving ? fadeOutScaleDown : slideDownFadeIn} + 0.3s ease-out forwards; `; const Checkbox = styled.input` From 684325b5ecc23e363e32ee589664e0d42dd95adb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=A5=98=EC=9B=90?= Date: Sat, 21 Sep 2024 20:07:31 +0900 Subject: [PATCH 07/16] =?UTF-8?q?fix:=20'=20isRemoving'=EC=9D=B4=20=20DOM?= =?UTF-8?q?=20=EC=9A=94=EC=86=8C=EC=97=90=20props=EC=A0=84=EB=8B=AC?= =?UTF-8?q?=EB=90=98=EB=8A=94=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TodoItem.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/TodoItem.jsx b/src/components/TodoItem.jsx index 173d5ea..758eb9a 100644 --- a/src/components/TodoItem.jsx +++ b/src/components/TodoItem.jsx @@ -56,7 +56,11 @@ const fadeOutScaleDown = keyframes` } `; -const TodoItemContainer = styled.div` +// prop์ด DOM์— ์ „๋‹ฌ๋˜์ง€ ์•Š๋„๋ก ํ•จ์ˆ˜ํ˜• props ํ•„ํ„ฐ๋ง ์ ์šฉ +const TodoItemContainer = styled.div.attrs((props) => ({ + // ํ•„ํ„ฐ๋งํ•  props๋ฅผ ์ œ์™ธํ•˜๊ณ  styled-components์— ์ „๋‹ฌ + isRemoving: undefined, +}))` display: flex; align-items: center; gap: 20px; From d492af51416c0afdf25754a1caf9a1891b8236d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=A5=98=EC=9B=90?= Date: Sat, 21 Sep 2024 20:32:32 +0900 Subject: [PATCH 08/16] =?UTF-8?q?vercel=20=EB=B0=B0=ED=8F=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit From 92adef17ad535313bb10cd46d2566cf0c09986db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=A5=98=EC=9B=90?= Date: Sat, 21 Sep 2024 20:46:20 +0900 Subject: [PATCH 09/16] =?UTF-8?q?style:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?= =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=EB=84=88=EB=B9=84,=20=EB=86=92?= =?UTF-8?q?=EC=9D=B4=20=EC=A1=B0=EC=A0=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/App.jsx b/src/App.jsx index 68bd87a..a4e4f07 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -90,12 +90,13 @@ const AppContainer = styled.div` padding: 30px; box-shadow: inset 0 0 20px #d6ddff; height: 80vh; + box-sizing: border-box; /* ๋ชจ๋ฐ”์ผ ๋ฐ˜์‘ํ˜• */ @media (max-width: 768px) { width: 360px; + height: 560px; padding: 20px; - height: 90vh; } `; From d0b34059c5123e8da6245d3f93103e83a82d9903 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=A5=98=EC=9B=90?= Date: Sat, 21 Sep 2024 20:57:06 +0900 Subject: [PATCH 10/16] =?UTF-8?q?fix:=20input=EC=B0=BD=20=EC=9E=85?= =?UTF-8?q?=EB=A0=A5=EC=8B=9C=20=ED=99=95=EB=8C=80=20=EB=B0=A9=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/public/index.html b/public/index.html index aa069f2..81c7378 100644 --- a/public/index.html +++ b/public/index.html @@ -14,6 +14,10 @@ manifest.json provides metadata used when your web app is installed on a user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ --> +