From c60a04126db8c107a1975f88ec70dc7a90ab130a Mon Sep 17 00:00:00 2001 From: dreamforxou Date: Tue, 19 Mar 2024 03:13:01 +0900 Subject: [PATCH 01/17] =?UTF-8?q?style:=20GlobalStyle.js=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .prettierrc | 6 + package-lock.json | 124 ++++++++++++++++++++ package.json | 1 + public/index.html | 53 ++------- src/App.js | 6 +- src/GlobalStyle.js | 57 +++++++++ src/pages/buttons/AddButton.jsx | 0 src/pages/buttons/DoneButton.jsx | 0 src/pages/buttons/ResetButton.jsx | 0 src/pages/buttons/TrashButton.jsx | 0 src/pages/lists/DoneList.jsx | 0 src/pages/lists/TodoList.jsx | 0 src/pages/mainpage/DayBox.jsx | 0 src/pages/mainpage/MainPage.jsx | 0 src/pages/mainpage/WeekBar.jsx | 0 src/pages/progress/ProgressBar.jsx | 0 src/pages/progress/ProgressStatusNumber.jsx | 0 17 files changed, 205 insertions(+), 42 deletions(-) create mode 100644 .prettierrc create mode 100644 src/GlobalStyle.js create mode 100644 src/pages/buttons/AddButton.jsx create mode 100644 src/pages/buttons/DoneButton.jsx create mode 100644 src/pages/buttons/ResetButton.jsx create mode 100644 src/pages/buttons/TrashButton.jsx create mode 100644 src/pages/lists/DoneList.jsx create mode 100644 src/pages/lists/TodoList.jsx create mode 100644 src/pages/mainpage/DayBox.jsx create mode 100644 src/pages/mainpage/MainPage.jsx create mode 100644 src/pages/mainpage/WeekBar.jsx create mode 100644 src/pages/progress/ProgressBar.jsx create mode 100644 src/pages/progress/ProgressStatusNumber.jsx diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..6c4516e --- /dev/null +++ b/.prettierrc @@ -0,0 +1,6 @@ +{ + "trailingComma": "es5", + "tabWidth": 2, + "semi": true, + "singleQuote": true + } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index e523af2..115138b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", + "styled-components": "^6.1.8", "web-vitals": "^2.1.4" } }, @@ -2283,6 +2284,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.0", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz", + "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==" + }, "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", @@ -4534,6 +4553,11 @@ "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.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.9", "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz", @@ -6037,6 +6061,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", @@ -6469,6 +6501,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.4.1", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz", @@ -6659,6 +6699,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", @@ -15998,6 +16048,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", @@ -16530,6 +16585,70 @@ "webpack": "^5.0.0" } }, + "node_modules/styled-components": { + "version": "6.1.8", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.8.tgz", + "integrity": "sha512-PQ6Dn+QxlWyEGCKDS71NGsXoVLKfE1c3vApkvDYS5KAK+V8fNWGhbSUEo9Gg2iaID2tjLXegEW3bZDUGpofRWw==", + "dependencies": { + "@emotion/is-prop-valid": "1.2.1", + "@emotion/unitless": "0.8.0", + "@types/stylis": "4.2.0", + "css-to-react-native": "3.2.0", + "csstype": "3.1.2", + "postcss": "8.4.31", + "shallowequal": "1.1.0", + "stylis": "4.3.1", + "tslib": "2.5.0" + }, + "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/csstype": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + }, + "node_modules/styled-components/node_modules/postcss": { + "version": "8.4.31", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", + "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", + "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" + } + ], + "dependencies": { + "nanoid": "^3.3.6", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/styled-components/node_modules/tslib": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz", + "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==" + }, "node_modules/stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", @@ -16545,6 +16664,11 @@ "postcss": "^8.2.15" } }, + "node_modules/stylis": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz", + "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==" + }, "node_modules/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 6c9c71f..eefbbf2 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", + "styled-components": "^6.1.8", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/public/index.html b/public/index.html index aa069f2..ffbde88 100644 --- a/public/index.html +++ b/public/index.html @@ -1,43 +1,14 @@ - - - - - - - - - - - - React App - - - -
- - + + + + + Vanilla Todo + + + + + +
+ diff --git a/src/App.js b/src/App.js index 3b90819..345ca64 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,11 @@ +import React from 'react'; +import GlobalStyle from './GlobalStyle'; + function App() { return (
-

CEOS 19기 프론트엔드 파이팅!( ¨̮ )و✧🔥

+ +
); } diff --git a/src/GlobalStyle.js b/src/GlobalStyle.js new file mode 100644 index 0000000..8a83232 --- /dev/null +++ b/src/GlobalStyle.js @@ -0,0 +1,57 @@ +import { createGlobalStyle } from 'styled-components'; + + +/* http://meyerweb.com/eric/tools/css/reset/ +v2.0 | 20110126 +License: none (public domain) +*/ + +const GlobalStyle = createGlobalStyle` + + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +`; + +export default GlobalStyle; diff --git a/src/pages/buttons/AddButton.jsx b/src/pages/buttons/AddButton.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/buttons/DoneButton.jsx b/src/pages/buttons/DoneButton.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/buttons/ResetButton.jsx b/src/pages/buttons/ResetButton.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/buttons/TrashButton.jsx b/src/pages/buttons/TrashButton.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/lists/DoneList.jsx b/src/pages/lists/DoneList.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/lists/TodoList.jsx b/src/pages/lists/TodoList.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/mainpage/DayBox.jsx b/src/pages/mainpage/DayBox.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/mainpage/MainPage.jsx b/src/pages/mainpage/MainPage.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/mainpage/WeekBar.jsx b/src/pages/mainpage/WeekBar.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/progress/ProgressBar.jsx b/src/pages/progress/ProgressBar.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/progress/ProgressStatusNumber.jsx b/src/pages/progress/ProgressStatusNumber.jsx new file mode 100644 index 0000000..e69de29 From 2542d13bce6e59e404030d89607f4a93ec78c06c Mon Sep 17 00:00:00 2001 From: dreamforxou Date: Tue, 19 Mar 2024 18:49:30 +0900 Subject: [PATCH 02/17] =?UTF-8?q?feat:=20=EC=A0=84=EC=B2=B4=EC=A0=81?= =?UTF-8?q?=EC=9D=B8=20=EA=B5=AC=EC=A1=B0=EB=A5=BC=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EC=9E=A1=EA=B3=A0,=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=8C=8C=EC=9D=BC=EC=9D=84=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1,=20reset.css?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .stylelintrc.json | 3 + package-lock.json | 632 ++++++++++++++++++++++++++++++++ package.json | 6 + public/assets/AddButton.png | Bin 0 -> 1503 bytes public/index.html | 2 +- src/App.js | 5 +- src/pages/buttons/AddButton.jsx | 19 + src/pages/mainpage/DateBar.jsx | 28 ++ src/pages/mainpage/MainPage.jsx | 110 ++++++ 9 files changed, 803 insertions(+), 2 deletions(-) create mode 100644 .stylelintrc.json create mode 100644 public/assets/AddButton.png create mode 100644 src/pages/mainpage/DateBar.jsx diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 0000000..78075e1 --- /dev/null +++ b/.stylelintrc.json @@ -0,0 +1,3 @@ +{ + "extends": ["stylelint-config-standard", "stylelint-config-prettier"] + } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 115138b..5fd522d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,9 +13,15 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.22.3", "react-scripts": "5.0.1", "styled-components": "^6.1.8", "web-vitals": "^2.1.4" + }, + "devDependencies": { + "stylelint": "^16.1.0", + "stylelint-config-prettier": "^9.0.5", + "stylelint-config-standard": "^36.0.0" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -2014,6 +2020,70 @@ "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz", "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==" }, + "node_modules/@csstools/css-parser-algorithms": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.6.1.tgz", + "integrity": "sha512-ubEkAaTfVZa+WwGhs5jbo5Xfqpeaybr/RvWzvFxRs4jfq16wH8l8Ty/QEEpINxll4xhuGfdMbipRyz5QZh9+FA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "@csstools/css-tokenizer": "^2.2.4" + } + }, + "node_modules/@csstools/css-tokenizer": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.4.tgz", + "integrity": "sha512-PuWRAewQLbDhGeTvFuq2oClaSCKPIBmHyIobCV39JHRYN0byDcUWJl5baPeNUcqrjtdMNqFooE0FGl31I3JOqw==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": "^14 || ^16 || >=18" + } + }, + "node_modules/@csstools/media-query-list-parser": { + "version": "2.1.9", + "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.9.tgz", + "integrity": "sha512-qqGuFfbn4rUmyOB0u8CVISIp5FfJ5GAR3mBrZ9/TKndHakdnm6pY0L/fbLcpPnrzwCyyTEZl1nUcXAYHEWneTA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "@csstools/css-parser-algorithms": "^2.6.1", + "@csstools/css-tokenizer": "^2.2.4" + } + }, "node_modules/@csstools/normalize.css": { "version": "12.1.1", "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.1.1.tgz", @@ -3371,6 +3441,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.15.3", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz", + "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -5407,6 +5485,15 @@ "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz", "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==" }, + "node_modules/astral-regex": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz", + "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/async": { "version": "3.2.5", "resolved": "https://registry.npmjs.org/async/-/async-3.2.5.tgz", @@ -6520,6 +6607,15 @@ "postcss": "^8.0.9" } }, + "node_modules/css-functions-list": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.1.tgz", + "integrity": "sha512-Nj5YcaGgBtuUmn1D7oHqPW0c9iui7xsTsj5lIX8ZgevdfhmjFfKB3r8moHJtNJnctnYXJyYX5I1pp90HM4TPgQ==", + "dev": true, + "engines": { + "node": ">=12 || >=16" + } + }, "node_modules/css-has-pseudo": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-3.0.4.tgz", @@ -7411,6 +7507,15 @@ "url": "https://github.com/fb55/entities?sponsor=1" } }, + "node_modules/env-paths": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz", + "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==", + "dev": true, + "engines": { + "node": ">=6" + } + }, "node_modules/error-ex": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", @@ -8477,6 +8582,15 @@ "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz", "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==" }, + "node_modules/fastest-levenshtein": { + "version": "1.0.16", + "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz", + "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==", + "dev": true, + "engines": { + "node": ">= 4.9.1" + } + }, "node_modules/fastq": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz", @@ -9163,6 +9277,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/globjoin": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/globjoin/-/globjoin-0.1.4.tgz", + "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==", + "dev": true + }, "node_modules/gopd": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", @@ -9392,6 +9512,18 @@ "node": ">=12" } }, + "node_modules/html-tags": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz", + "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==", + "dev": true, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/html-webpack-plugin": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.6.0.tgz", @@ -9973,6 +10105,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/is-plain-object": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", + "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/is-potential-custom-element-name": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz", @@ -12451,6 +12592,12 @@ "node": ">= 8" } }, + "node_modules/known-css-properties": { + "version": "0.29.0", + "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.29.0.tgz", + "integrity": "sha512-Ne7wqW7/9Cz54PDt4I3tcV+hAyat8ypyOGzYRJQfdxnnjeWsTxt1cy8pjvvKeI5kfXuyvULyeeAvwvvtAX3ayQ==", + "dev": true + }, "node_modules/language-subtag-registry": { "version": "0.3.22", "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz", @@ -12569,6 +12716,12 @@ "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz", "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==" }, + "node_modules/lodash.truncate": { + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz", + "integrity": "sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==", + "dev": true + }, "node_modules/lodash.uniq": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", @@ -12647,6 +12800,16 @@ "tmpl": "1.0.5" } }, + "node_modules/mathml-tag-names": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz", + "integrity": "sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/mdn-data": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz", @@ -12671,6 +12834,18 @@ "node": ">= 4.0.0" } }, + "node_modules/meow": { + "version": "13.2.0", + "resolved": "https://registry.npmjs.org/meow/-/meow-13.2.0.tgz", + "integrity": "sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==", + "dev": true, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/merge-descriptors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", @@ -14668,6 +14843,38 @@ "postcss": "^8.0.3" } }, + "node_modules/postcss-resolve-nested-selector": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz", + "integrity": "sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==", + "dev": true + }, + "node_modules/postcss-safe-parser": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.0.tgz", + "integrity": "sha512-ovehqRNVCpuFzbXoTb4qLtyzK3xn3t/CUBxOs8LsnQjQrShaB4lKiHoVqY8ANaC0hBMHq5QVWk77rwGklFUDrg==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss-safe-parser" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "engines": { + "node": ">=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, "node_modules/postcss-selector-not": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-6.0.1.tgz", @@ -15193,6 +15400,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.22.3", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz", + "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==", + "dependencies": { + "@remix-run/router": "1.15.3" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.22.3", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz", + "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==", + "dependencies": { + "@remix-run/router": "1.15.3", + "react-router": "6.22.3" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -16115,6 +16352,56 @@ "node": ">=8" } }, + "node_modules/slice-ansi": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz", + "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.0.0", + "astral-regex": "^2.0.0", + "is-fullwidth-code-point": "^3.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/slice-ansi?sponsor=1" + } + }, + "node_modules/slice-ansi/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/slice-ansi/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/slice-ansi/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, "node_modules/sockjs": { "version": "0.3.24", "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz", @@ -16664,6 +16951,307 @@ "postcss": "^8.2.15" } }, + "node_modules/stylelint": { + "version": "16.1.0", + "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.1.0.tgz", + "integrity": "sha512-Sh1rRV0lN1qxz/QsuuooLWsIZ/ona7NKw/fRZd6y6PyXYdD2W0EAzJ8yJcwSx4Iw/muz0CF09VZ+z4EiTAcKmg==", + "dev": true, + "dependencies": { + "@csstools/css-parser-algorithms": "^2.4.0", + "@csstools/css-tokenizer": "^2.2.2", + "@csstools/media-query-list-parser": "^2.1.6", + "@csstools/selector-specificity": "^3.0.1", + "balanced-match": "^2.0.0", + "colord": "^2.9.3", + "cosmiconfig": "^9.0.0", + "css-functions-list": "^3.2.1", + "css-tree": "^2.3.1", + "debug": "^4.3.4", + "fast-glob": "^3.3.2", + "fastest-levenshtein": "^1.0.16", + "file-entry-cache": "^8.0.0", + "global-modules": "^2.0.0", + "globby": "^11.1.0", + "globjoin": "^0.1.4", + "html-tags": "^3.3.1", + "ignore": "^5.3.0", + "imurmurhash": "^0.1.4", + "is-plain-object": "^5.0.0", + "known-css-properties": "^0.29.0", + "mathml-tag-names": "^2.1.3", + "meow": "^13.0.0", + "micromatch": "^4.0.5", + "normalize-path": "^3.0.0", + "picocolors": "^1.0.0", + "postcss": "^8.4.32", + "postcss-resolve-nested-selector": "^0.1.1", + "postcss-safe-parser": "^7.0.0", + "postcss-selector-parser": "^6.0.13", + "postcss-value-parser": "^4.2.0", + "resolve-from": "^5.0.0", + "string-width": "^4.2.3", + "strip-ansi": "^7.1.0", + "supports-hyperlinks": "^3.0.0", + "svg-tags": "^1.0.0", + "table": "^6.8.1", + "write-file-atomic": "^5.0.1" + }, + "bin": { + "stylelint": "bin/stylelint.mjs" + }, + "engines": { + "node": ">=18.12.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/stylelint" + } + }, + "node_modules/stylelint-config-prettier": { + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/stylelint-config-prettier/-/stylelint-config-prettier-9.0.5.tgz", + "integrity": "sha512-U44lELgLZhbAD/xy/vncZ2Pq8sh2TnpiPvo38Ifg9+zeioR+LAkHu0i6YORIOxFafZoVg0xqQwex6e6F25S5XA==", + "dev": true, + "bin": { + "stylelint-config-prettier": "bin/check.js", + "stylelint-config-prettier-check": "bin/check.js" + }, + "engines": { + "node": ">= 12" + }, + "peerDependencies": { + "stylelint": ">= 11.x < 15" + } + }, + "node_modules/stylelint-config-standard": { + "version": "36.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-36.0.0.tgz", + "integrity": "sha512-3Kjyq4d62bYFp/Aq8PMKDwlgUyPU4nacXsjDLWJdNPRUgpuxALu1KnlAHIj36cdtxViVhXexZij65yM0uNIHug==", + "dev": true, + "dependencies": { + "stylelint-config-recommended": "^14.0.0" + }, + "engines": { + "node": ">=18.12.0" + }, + "peerDependencies": { + "stylelint": "^16.1.0" + } + }, + "node_modules/stylelint-config-standard/node_modules/stylelint-config-recommended": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-14.0.0.tgz", + "integrity": "sha512-jSkx290CglS8StmrLp2TxAppIajzIBZKYm3IxT89Kg6fGlxbPiTiyH9PS5YUuVAFwaJLl1ikiXX0QWjI0jmgZQ==", + "dev": true, + "engines": { + "node": ">=18.12.0" + }, + "peerDependencies": { + "stylelint": "^16.0.0" + } + }, + "node_modules/stylelint/node_modules/@csstools/selector-specificity": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.2.tgz", + "integrity": "sha512-RpHaZ1h9LE7aALeQXmXrJkRG84ZxIsctEN2biEUmFyKpzFM3zZ35eUMcIzZFsw/2olQE6v69+esEqU2f1MKycg==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "postcss-selector-parser": "^6.0.13" + } + }, + "node_modules/stylelint/node_modules/ansi-regex": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz", + "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-regex?sponsor=1" + } + }, + "node_modules/stylelint/node_modules/argparse": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", + "dev": true + }, + "node_modules/stylelint/node_modules/balanced-match": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz", + "integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==", + "dev": true + }, + "node_modules/stylelint/node_modules/cosmiconfig": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz", + "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==", + "dev": true, + "dependencies": { + "env-paths": "^2.2.1", + "import-fresh": "^3.3.0", + "js-yaml": "^4.1.0", + "parse-json": "^5.2.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/d-fischer" + }, + "peerDependencies": { + "typescript": ">=4.9.5" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/stylelint/node_modules/css-tree": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", + "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", + "dev": true, + "dependencies": { + "mdn-data": "2.0.30", + "source-map-js": "^1.0.1" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" + } + }, + "node_modules/stylelint/node_modules/file-entry-cache": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz", + "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==", + "dev": true, + "dependencies": { + "flat-cache": "^4.0.0" + }, + "engines": { + "node": ">=16.0.0" + } + }, + "node_modules/stylelint/node_modules/flat-cache": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz", + "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==", + "dev": true, + "dependencies": { + "flatted": "^3.2.9", + "keyv": "^4.5.4" + }, + "engines": { + "node": ">=16" + } + }, + "node_modules/stylelint/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/stylelint/node_modules/js-yaml": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", + "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", + "dev": true, + "dependencies": { + "argparse": "^2.0.1" + }, + "bin": { + "js-yaml": "bin/js-yaml.js" + } + }, + "node_modules/stylelint/node_modules/mdn-data": { + "version": "2.0.30", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", + "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", + "dev": true + }, + "node_modules/stylelint/node_modules/signal-exit": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", + "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", + "dev": true, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/stylelint/node_modules/strip-ansi": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", + "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", + "dev": true, + "dependencies": { + "ansi-regex": "^6.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/strip-ansi?sponsor=1" + } + }, + "node_modules/stylelint/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/stylelint/node_modules/supports-hyperlinks": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-3.0.0.tgz", + "integrity": "sha512-QBDPHyPQDRTy9ku4URNGY5Lah8PAaXs6tAAwp55sL5WCsSW7GIfdf6W5ixfziW+t7wh3GVvHyHHyQ1ESsoRvaA==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0", + "supports-color": "^7.0.0" + }, + "engines": { + "node": ">=14.18" + } + }, + "node_modules/stylelint/node_modules/write-file-atomic": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.1.tgz", + "integrity": "sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==", + "dev": true, + "dependencies": { + "imurmurhash": "^0.1.4", + "signal-exit": "^4.0.1" + }, + "engines": { + "node": "^14.17.0 || ^16.13.0 || >=18.0.0" + } + }, "node_modules/stylis": { "version": "4.3.1", "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz", @@ -16799,6 +17387,12 @@ "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz", "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==" }, + "node_modules/svg-tags": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz", + "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==", + "dev": true + }, "node_modules/svgo": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz", @@ -16884,6 +17478,44 @@ "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==" }, + "node_modules/table": { + "version": "6.8.1", + "resolved": "https://registry.npmjs.org/table/-/table-6.8.1.tgz", + "integrity": "sha512-Y4X9zqrCftUhMeH2EptSSERdVKt/nEdijTOacGD/97EKjhQ/Qs8RTlEGABSJNNN8lac9kheH+af7yAkEWlgneA==", + "dev": true, + "dependencies": { + "ajv": "^8.0.1", + "lodash.truncate": "^4.4.2", + "slice-ansi": "^4.0.0", + "string-width": "^4.2.3", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/table/node_modules/ajv": { + "version": "8.12.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz", + "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==", + "dev": true, + "dependencies": { + "fast-deep-equal": "^3.1.1", + "json-schema-traverse": "^1.0.0", + "require-from-string": "^2.0.2", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/table/node_modules/json-schema-traverse": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", + "dev": true + }, "node_modules/tailwindcss": { "version": "3.4.1", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz", diff --git a/package.json b/package.json index eefbbf2..0bb9700 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.22.3", "react-scripts": "5.0.1", "styled-components": "^6.1.8", "web-vitals": "^2.1.4" @@ -35,5 +36,10 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "stylelint": "^16.1.0", + "stylelint-config-prettier": "^9.0.5", + "stylelint-config-standard": "^36.0.0" } } diff --git a/public/assets/AddButton.png b/public/assets/AddButton.png new file mode 100644 index 0000000000000000000000000000000000000000..daddddbf442f4945b35dd9b4a36c8a4b016e92db GIT binary patch literal 1503 zcmV<51t9u~P)@~0drDELIAGL9O(c600d`2O+f$vv5yP7$Wl#oPkVas!-u{Kx2h2G&qzrSWHrc6gbYLj#6i0i^@qFpZ@|#L+eXL zX;VSx^H3zi3}f*b$5^+#cOSYBNvqwxJz2k*)t&Bk@7~+@x$l;N1&GzvWngR*PdnKB z@F>JCHV@ll)^2y8A~3K3v9eMF$2pL6@gN9XWag1=W~?wk5I1k`;h`??Bz*jJQCcp$ zcW)mofP+2wBYQAb$JQd%5;tyq2^KJ31`-e>oVzHsZEWYD1ab_B2M^3=MTi>cqY+DE z5e$)+0AmgD@S)km7&BoYk%oto_y!D6R3UPGuGri(A!Y%}p>4uMo`G)nQ8*(8a6fojlD zG3tCA*x0B;;!QYj$_9q2gDC-2i`FPr%1dB+I*I{|dF<*{Z`h!ac+R)2t4=>i8``oC zc?N=DB|f^t28@yT1WU3=-D4o9K91uJ>U;vkN8r3Q^j7a|YAP}q%of>|D}AYM=$jp9 zXY9mBXbh7=%775{SoiM~JB85^?}43YYlb0GNEw)(ZX)p)iyd(0Z&T_ECrNyS#-Iq@ zV}LcAeL*WEo)#dJgXQ9dp-ajMB%aX0gmXT-t{%7|n^58jHKZ%2MtuxSF!2!z#+*~3 z&`22Dg~>)vjnY6ywH-`jVe(PKnAM93sS0s^+e(nCzm&Ean?;Wdf?z2*ouZ#Ov$T^I z&%OX~`R(-olS5o-{{`?fw$3qF0b|5Km@P+BM6+)TPY?6|&&&W^dJACny@;{e6j(ql zNwX6fH((sNa0=(`EWr6!zyd-w;^Nk=MXL$gscHHBS-k(nJ2+*pLn#OmX3iX4(h}Ij z`>(3?`{Yf44@;$24f^3Y`(+DKDai9&cul?kr>CPaCP1wr*H1QJC(Ep%YJ5Hi+PFMt z?rt%yppoSzK(qMuxrhl}kWDn+03&d|P(IR-9)ESVT+sS>)=ZUf5oZ2YBAEO->9Gx5 zG>`(?0Yw!`iuCM&h;P0d1u0vYe>r;YVW2(+T`5UG@1q;Ng!J7e@d-Yf)$5NE;K+qu z272kVnX#%s#|0BG_2=QYT%8x_zC;H!F*?SK^;=@#vGRb03W-l}=0%;}9*c&-%8Jo?ENcjexQBIMqfm{55S8ZaGF27-VjAXg** z8B~rZ&sBPLQ2#wTNsGIYJCzr;cK(FQp{A-{a#GAj<#y2duX;7wQ<8Fz&f->sEjVd4 zDkFhVjf8NeLw`Jg%CPf?N;>UjcYF0OXdFkbM)ZQJY=J6xqv2-%^f3?zH4kLi{#|e3 zp@LujRw$k8S@Xnfi)Z`Kd)81Ap69$KC<9TxjU6o$}Dh*_|0Ec z3cob_^Tmt97xh6vpId#9J`z3B+8)4nPf-Q_(NinxORBiBuUfTk47w=YHyW1R9cLRx z?FY?**2{h%wabonusM`CpA=s5G}U0c4yG7ksDu)n6L>6@dV|ayYa`rWf&hL z9ol@t*4MXWowT+d$I_thQ)Jxsio*SHv9(mTCmZjbj+yxkBIBY~wn*%SOWPp$R%e5_ zF#|<}TQ41_jzlcRCHvx5%uc5H*sl|R(%r`#%ro89{y!I!*l;awe`x>!002ovPDHLk FV1khcx6=Rs literal 0 HcmV?d00001 diff --git a/public/index.html b/public/index.html index ffbde88..4c01a89 100644 --- a/public/index.html +++ b/public/index.html @@ -3,7 +3,7 @@ - Vanilla Todo + React Todo diff --git a/src/App.js b/src/App.js index 345ca64..4370913 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,13 @@ -import React from 'react'; +import { React, useState } from "react"; +import { BrowserRouter, Routes, Route } from "react-router-dom"; import GlobalStyle from './GlobalStyle'; +import MainPage from './pages/mainpage/MainPage'; function App() { return (
+
); diff --git a/src/pages/buttons/AddButton.jsx b/src/pages/buttons/AddButton.jsx index e69de29..d588a26 100644 --- a/src/pages/buttons/AddButton.jsx +++ b/src/pages/buttons/AddButton.jsx @@ -0,0 +1,19 @@ +import React from "react"; +import styled from "styled-components"; + +const AddButton = ({ onClick }) => { + return ( + + Add + + ); + }; + + export default AddButton; + + const StyledButton = styled.button` + background-color: transparent; + border: none; + cursor: pointer; + padding: 0; +`; \ No newline at end of file diff --git a/src/pages/mainpage/DateBar.jsx b/src/pages/mainpage/DateBar.jsx new file mode 100644 index 0000000..3e31ef4 --- /dev/null +++ b/src/pages/mainpage/DateBar.jsx @@ -0,0 +1,28 @@ +import React from "react"; +import styled from "styled-components"; + + +const DateBar = () => { + const today = new Date(); + const year = today.getFullYear(); + const month = today.getMonth() + 1; + const date = today.getDate(); + + // 0(일요일)부터 6(토요일)까지 숫자로 반환 + const week = ["일", "월", "화", "수", "목", "금", "토"]; + const dayOfWeek = week[today.getDay()]; // 현재 요일 + + // 한글 날짜 포맷으로 변환 + const formattedDate = `${year}년 ${month}월 ${date}일 ${dayOfWeek}요일`; + + return {formattedDate}; +}; + +export default DateBar; + + +const DateContainer = styled.div` + background-color: transeparent; + color: #333; + font-size: 13px; +`; \ No newline at end of file diff --git a/src/pages/mainpage/MainPage.jsx b/src/pages/mainpage/MainPage.jsx index e69de29..3decd2b 100644 --- a/src/pages/mainpage/MainPage.jsx +++ b/src/pages/mainpage/MainPage.jsx @@ -0,0 +1,110 @@ +import React from "react"; +import styled from "styled-components"; +import AddButton from "../buttons/AddButton"; +import DateBar from "./DateBar"; + +const MainPage = () => { + return ( + + +
+ + 투두리스트 + + + +
+ + + + + + + + + + + + + + +
+ +
+ + + ) +} + +export default MainPage; + + +const PageContainer = styled.main` +width: 100vw; +height: 100vh; +background-color: #F9FFD1; +display: flex; +flex-direction: column; +align-items: center; +justify-content: center; +`; + +const ContentContaner = styled.body` +width: 40%; +min-width: 375px; +height: 60%; +min-height: 667px; +background-color: #fff; +border-radius: 10px; +`; +const Header = styled.div` + +`; + +const TitleWrapper = styled.div` + +`; + +const Title = styled.h2` + +`; + +const ProgressStatusNumber = styled.span` + +`; + +const InputContainer = styled.div` + +`; + +const TodoInput = styled.input` + +`; + +const Button = styled.button` + +`; + +const ButtonContainer = styled.div` + +`; + +const ListContainer = styled.div` + +`; + +const TodoList = styled.ul` + +`; + +const DoneList = styled.ul` + +`; + +const Footer = styled.div` + +`; + +const ProgressBar = styled.div` + +`; \ No newline at end of file From 0d7eaaa2c0aeb9b401c4b2e8aa85650409d8d9a3 Mon Sep 17 00:00:00 2001 From: dreamforxou Date: Tue, 19 Mar 2024 19:15:56 +0900 Subject: [PATCH 03/17] =?UTF-8?q?feat:=20=EC=98=A4=EB=8A=98=20=EB=82=A0?= =?UTF-8?q?=EC=A7=9C=20=EB=B6=88=EB=9F=AC=EC=98=A4=EA=B8=B0,=20=ED=97=A4?= =?UTF-8?q?=EB=8D=94=20=EC=99=84=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/GlobalStyle.js | 7 +++++++ src/pages/mainpage/MainPage.jsx | 16 ++++++++++++---- 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/src/GlobalStyle.js b/src/GlobalStyle.js index 8a83232..4643e71 100644 --- a/src/GlobalStyle.js +++ b/src/GlobalStyle.js @@ -8,6 +8,12 @@ License: none (public domain) const GlobalStyle = createGlobalStyle` +@font-face { + font-family: 'SUIT-Regular'; + src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; +} html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, @@ -36,6 +42,7 @@ footer, header, hgroup, menu, nav, section { } body { line-height: 1; + font-family: 'SUIT-Regular'; } ol, ul { list-style: none; diff --git a/src/pages/mainpage/MainPage.jsx b/src/pages/mainpage/MainPage.jsx index 3decd2b..a2c6a6f 100644 --- a/src/pages/mainpage/MainPage.jsx +++ b/src/pages/mainpage/MainPage.jsx @@ -40,6 +40,7 @@ export default MainPage; const PageContainer = styled.main` +min-width: 375px; width: 100vw; height: 100vh; background-color: #F9FFD1; @@ -51,14 +52,19 @@ justify-content: center; const ContentContaner = styled.body` width: 40%; -min-width: 375px; +min-width: 260px; //padding 계산해서 최소 너비 설정 height: 60%; -min-height: 667px; +min-height: 420px; //padding 계산해서 최소 높이 설정 +padding: 50px 20px 30px 20px; background-color: #fff; border-radius: 10px; +display: flex; +flex-direction: column; +align-items: center; + `; const Header = styled.div` - + width: 70% `; const TitleWrapper = styled.div` @@ -66,7 +72,9 @@ const TitleWrapper = styled.div` `; const Title = styled.h2` - +font-family: SUIT-Regular; +font-size: 25px; +font-weight: 800; `; const ProgressStatusNumber = styled.span` From bace924c52be3658de3483b8b3fd6af2c3c9384b Mon Sep 17 00:00:00 2001 From: dreamforxou Date: Tue, 19 Mar 2024 20:51:29 +0900 Subject: [PATCH 04/17] =?UTF-8?q?style:=201.=20=EC=82=AD=EC=A0=9C,?= =?UTF-8?q?=EC=99=84=EB=A3=8C,=EB=A6=AC=EC=85=8B=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=202.=20=EC=9E=85=EB=A0=A5=EA=B0=92=20?= =?UTF-8?q?=EC=A1=B4=EC=9E=AC=20=EC=97=AC=EB=B6=80=EC=97=90=20=EB=94=B0?= =?UTF-8?q?=EB=9D=BC=20=EC=83=89=EC=83=81=20=EB=B3=80=EA=B2=BD=203.=20?= =?UTF-8?q?=EC=A0=84=EC=97=AD=20=ED=8F=B0=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/assets/AddButton.png | Bin 1503 -> 1357 bytes public/assets/Checked.png | Bin 0 -> 1734 bytes public/assets/Reset.png | Bin 0 -> 5286 bytes public/assets/Trash.png | Bin 0 -> 19502 bytes src/pages/buttons/DoneButton.jsx | 19 +++++++++ src/pages/buttons/ResetButton.jsx | 19 +++++++++ src/pages/buttons/TrashButton.jsx | 21 ++++++++++ src/pages/mainpage/DateBar.jsx | 3 +- src/pages/mainpage/MainPage.jsx | 67 ++++++++++++++++++++++++------ 9 files changed, 115 insertions(+), 14 deletions(-) create mode 100644 public/assets/Checked.png create mode 100644 public/assets/Reset.png create mode 100644 public/assets/Trash.png diff --git a/public/assets/AddButton.png b/public/assets/AddButton.png index daddddbf442f4945b35dd9b4a36c8a4b016e92db..d617e6a0d3e243fda3b3a91213cb5422b6d09091 100644 GIT binary patch delta 1289 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 literal 0 HcmV?d00001 diff --git a/public/assets/Reset.png b/public/assets/Reset.png new file mode 100644 index 0000000000000000000000000000000000000000..6958787eb999d7f6002b98aed49423ed76806782 GIT binary patch literal 5286 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 literal 0 HcmV?d00001 diff --git a/public/assets/Trash.png b/public/assets/Trash.png new file mode 100644 index 0000000000000000000000000000000000000000..71f958766a02fdcb09d9c57a087b2735993df538 GIT binary patch literal 19502 zcmeIZWmHvd7dE=+P(i=|K|)#-k!}zbX%GZKDWycZ8#We?3W9WlQql-W$3~Qt7LW#M zknTQn;rqU0oWJLcZ;bE9!x*yNYuz#L8P~k#T#MIgDtAtiULZvf_0 z6T+3}ID}>JL1HVXWlt?j5`W9sPg$le6GVQll*gi+q=k(r6Q z$s=PoyG9dn1W_!PzjfoDYyY1iFMH-jH}+9nUtHrp3JKcbBR|O+e^s6ZDmkI{ZTw7$ z8)PbZ!&F(D_+pa2HMEW+iLOX<@?^(9+q(Bc&h+&etGZBWhK22jQxL1?|KP3&Lo&P@ zJRR(X=`MpP2z@Lk4t!wu@Y&F>6uu~%TnF0QY?Utiz7vNE;!nUqO4{T!0~2-5RC z9Ap&#qv6Ei){^A7>i)?1I62dcu&21#Jk0x0iq+JR!yIKVYb?MPT3_jUHnMC|)nei()($z3i`Z^_< ztYm7O`D*_v9WoQ4XOCe1T#0Dz?XIPa-rRD&6Kx~A>)1bjIJUiA$#()dxL%8oP-nA0 zd%ro|8znj9lgCel>>9lyL4qp2K6^jCZ|mu4!;eTyp=(oyH=C4OPTASK-y1PVZxyT7 z#6@NTSw#@(TzuwhtEzA)UPOB92M-P+%0xZ;ZGPM++<-_^1}CF9X~8S;@W0kY8lZ|*lezU|JnPW!sJLhm9ha&qMA!hgWHC8 z!h4&0Y;H%VWuAoMAY~>Xq_GN5aNOp;Kof!tQAQ%tY~jt5^K;Ie0fxywHXd0{9`W}T z$c}Ge8wLrOr@Qw~X;*7Swdyf2*euew94s-t$hBp+aUN;cV`wVgEpHpA^x!d4B4hmurW++v6jm+g(Qs z4yG002CBf+(kgG9^FNtpRndQsT+!V9gsk@?r9wpqZ-?Jfd#aq`LP$eYYA&*DB2)uM zsl46qXPC?o`24-gm>lt#^4I!-+lHO*zJz@MZ2;lJ-Vvwr_e|rhq<+Y=8mmd3 zSr!LhGUsOc+1}#m417ChO`_~X%dH#0Pwm#ZQp#Wd*=bH{uRjk5V@;xja15`Q7U>Ny z-*nnFp{lq>CfiTLtjyF_8F$s8>FTStQ|!o0I2IrCcu3&M0r(U{hMhVq5p$b)!VxDP z)qo0~bUk>^nOW{DI&s@fj`b;Zh+A>wXH_l;v6UxbOE8p1tof7u}ATZX!KCo?7Un{f?KWvqSHmp|R6e z!RM?bkA)m5=O)h8gH$UHFK^GmBXOT8A9sd(IrjZbq=tV$l2FIBPVVnJ5i;>PhAb@( z_D!bQ2At-+OIJaQdm~b2=LTE?54FlqF4k|_dA1yWDnn{PlWM^u^bEPY9x4mYUz9hN zPkk|D(OcLNF)@6sqtn(eTi#u(^nPnm?B`gluxP3scOvhGi;-y@LTLUr=^ z6JeAcPiHH&dF;E@!b%g-U!2nq!zwqFcseER=O6x*OmMz(pl?I<*CB2j2!$^MM?15} zhZ(+L*GwT-tlS91t3bZ{qaFTU_uD%U;n zMVGrRbIapx?DW28wHj@7#b?kP{`4q&NqeOxL`NF*H@ktUKzT~FJn;j^sw;z|>&N6|Vq^f+$2^7M)pE;`_uba{p7|?UC5J@{U6C z8seLxOEU*#iPWfyyS^)(R;m4ZC zzvGEz`x6W@Pts6L;2tZOQsCl#%bLRT?=>W{qm{k2_ZN6?g(2I#s7ya^kN0j)d8QN| z4B~4oZJmQG95#pbsM@H)U!Fv5{pl?hjH9Z^gL{pQ2gel$g|^ZG&gq{%o4O{|N&`nJ z?!>nieMn`oVDdzC#@t6yD~)e9Ve8}c1Sl>`GGEY;ajCe5Q-Og)std4J>G-77{JvU4 z%yQEZcNrHIqubHZA^&m;2K2r{8NH^!gPZ<2>(nR#y53VK&lgljEm!bDj$MrQCb8_w zuGd8w?R0$XG!?*EM(XowH_266t{UQrX;4^|KkReq<>_cL=O&ul)tF7%Y4Bs^J&$s) zTtoa-N66L&s7@P)wbD+J29qlN)tK0VT4=8Vq$70GtaKIH$djFhcX@Ed$9A_}9X$6x zo%zqS{+QPzv8&|H-G-ls@=JgPG#o5B*I@F80P&JakA}`oBiGm=@QiIxe80BibIu=W zE6K9Pd*40OR<|g0oWa%dQK=6(kCGXXP~1`LzE z5_T*S-V0`Fp2Mt1K^)BX(?)3!vMr44#^uY{;WHyqXdWojG+`rNp5@LcXXQtiw1BOV z?e=j)W6dE#=74-86bvLyfwGYCK-cDBn|p+B*r{A**lSg3L0m+$ecvc0fP;YU2V;acMZ?uaeLC#_(oWoaH<>1j~($;G=o z_6+X^j}8@_5}!n%`P2o%2B|z9iL}$gK!5UQ?@xbK&_Sq!!Kxt-xg(}g@>kFF+7Q2q zjT*-gMI_J9$F3n3=KH%cn||Y5y7lw-LQS~XNPwX2+s`OQX`WFa`M_{SbAj{?K1|kA zVW!66eivBOkzokw9)^*w1ARC=3}}*G={HPHr{ACtkgJ|XCQqQ7L{sv|5_O4itarC zs;ms~sJrJ7ju_a758y|N&SzhR)zA^-#Ii#KdVVZl@EwS`qG-#g*V{d`8U^u-pwT|s zb)Ze6$aof*q?hpO;@0V}VVww)#>j)SjqlQITctrV69>AWegQ+z4_eV?nUOfo=eujm zbiHB%iy5l@^>MU*n067e&b^1H@*7h7q2=D&tWW|(E`Wv&Vb}svg=-)KTlz=CIy8VG z#bH&f%ZkIOHt87d!%B=qkVB>q-cn)>zSqc!8BKt5Bc;Hx#mB6j8+$L`@P)G=VK7}} zgbOFC{L`ZQ+j}lvpm}uQV7?-mv~j7fx6}R#!{r-n=vV{nNh%Eaffflh6PN%?0*aGl z;bGGJ4<+?(K`0=JG^ zVXUQ}7Q@@`6?@47gFq1R+YrO=ej6soUGL;L0nGgAaSb>6e$sw6z)l<;;`kLk3se!g zp-ky(E4?VE{d)jR4tR;=&*31Sw3C$(1xV0IUlObzKHCr_`b8Z5a)DL&b@SX^oA-17 zk(?S2y==+1=Y}qBdR&ouhEQMmm-tZ>bBzP6b?g>cfi+OdUq3l*cq()q?PFEBAlEq=5%@M1dk1me0MPb2{B{LYa81i3UM1V?Y#^D>N2E z0TK`l1puS?lHynYzejSWX;FYiw4p9+&}L!gyFV3m6a%(Ic+qUAPa8=riy(>8(N$>Y z;Z|!X{6G;RQQaDZ)Dqa!%AR;jLEC_)O(o#TBHVJMUiHtfBGg86- zsYsY~HG2Z_cw%9=3OK{)UEzATn&9g%h3{Hh6E~X3OF*e+03(ScZ1VjUC zE&v>@jRCU)7!w<`F^-%xPJz84FoY%M8*pYGCjIwYff6#)64X2eG6B!GIURcVhKn(z=`>Zacce>!EDsYAq7Py^{k6I}0&fHZ~xMxKjYR!2SE3 z2@*MZgaXoj3IJK?0xOb8gzJuZ2iDZZ;*PEnVvdcHtEXC}%YF8-p^%W!k~jCc6W?bV zt*djr4|m$S4G!%!vU}%Sk1EUJHP_tr4;Dra^aNs5;xO@9LNRl;;=KiBIjLqs_kd_j9Xw=O?}$uBjgB9Q67e z@XuT?{LpAxo_)ACa#TrWFEcPczan)w9=N1`v(5Zw{vOS3h8P_dZIQ~;&j6Y)f*UxR zIeB`fom91`eJ^#izqT?pH+B0)!}QamY@efXhRj_3$_(#=c>^&D_T@E$Lta;H``k*M z>Z&Tiu8DgagOtFbky*DxqqHa6B>1|y3(mzd^>9J7VS9PZ_FyU}tV`HxS zes@JqTo5_9S^Gr?dK}$`O?QWbda1*`(MOF3r~10P!$MYNte*EWS%318_XufeE^N+{ zEIOHXZQ*)hfo^{vx2H4@c{_Nq^qnlOBQ@IaWLrGvTs_M6O|#MFl+)e;vn6#C(+NH* zQ`-G%Ij58>^rc1}2orCDjjeSIyxGHSGNr(teT{CuMU780e#p7%EbRWdy3YB7)C1_w z-+=-Owp=MTnG6H$C9%dzWF);yql4a`^*-{6z^FDS;v3KKk3}fHz*;gy!Ttq?T4R66 zV1AhvsBHfFLAu9PpooY9T+Q?-ko23-%8-omOBP-H+;$#Ok%u_AI)Z4KU-Rf&C{j6n ztB7PPwQq@Br9B&>73~Slv=8mBT7=2n&rp16C@1s!?vqd?@geG@XQi5r1>WOqWj$~q6=&deB~2`eCKJI&n9|+ z$llw6JdgGcZct!8m#E=lydj8p?|K@lvx^5D+Ww;bV0+{)CoCP?HmwrWMuizhV|;Y; zvAv-D<}X27Mf=g*Tq4Dv>b>B8Xai9qZ+L&(*I|m8$aQwF;T8q{GIHRx2sdrs=)35* z%_RrgRQ6GSP)m`hH8%B&g}zcEI|y;euMm_|tIt5S{6KElgm_GW2H6FWnNjT+A#I&2 zG>iO0?%d?7_xq8&-uaRBFV_`tcA<)g+rEwbEA(tJE&aqPt^?m9Qsb20EIrESRlsrI zAH0i;8P;|oTgIhoNuo_c5~X0H_`z(kYVK0PHMg>^Sr;)cTEhZmk5`T2D=A(Qrz`MK z3>7B1mS$+s>8lX1>SfzGm z`G*4IHXd}{*Us(I3+9VDn z7K$3_2R!vXYkR{eNZYT0HIK4xs&1Itm22WRd7t`q^|DC-C9gxN^M^x2d z`Cxso9-#d?DYA?DqrvBZJ=51q!3BNR{wi;r92`Q{SI$;7hrh~2@BrUSmM2@iZA5TK z9q=&VrpWoK%8Yr(v~Gq?qNI?=3zRnQ71~!6Bqahs0%$!;w<#F-Nk%2_brf{0hdr}$ zsq^^?nTZbQvmAC*fqV&3T;; zJ|!(#b}SF*t(HTOMy*d4ar(d~5Qb;X49WTzmHA&sIPkF+x4Fc83Jf#osd5@0Dj5u`cH0+p>_aeiQS8_`pTgXl#X7-1QG}ys+r6N8*(#}Egqas-Z&L6 zNrZJ zkS&Cd;Rg0vOzRs<%7dOLBI@`|P0W}8tK_WcSWIHJ%^+ukX}SFFwyDWta2ItHQVY&~ zvMo6F+n+5sX{YN5*RwVPBp#|7YVGv-pBnM-l%&Krna=M8-q*7DF!u)_CkeP_@>qT$ zySPXUi-%=Q0INu-QOGi7VPoX~Hosnu&&UL#IijL>ecOvfZdOU1af>RmpTg+`z>~XUH*zJ_^JbxbZh%~V zv3}aXx|8Ttd-m+QPxx}s`(>nXneWNf#7)!=pFmjP#gEa)Zai;yF3pY)EC_hB+LXWW zi2O1AUBL6I{aZIoC?tW--;YI@23lk(8ls01gCASCVZOm>JJs(Q@`|io#}~KK(kBn8 z(;dOsb@KIS-Y19p7IWO~wh{XtxV?9VMiM__M@K{{qAi5jjdQ?lNUNAhX5*c6XL7WF38?@1yI5DIci#2-G{T$p!XOs+-9{2cLaKMSHfF8-n>M;?f^`(-n}QWLXl-<7;ZoPj}sC{qb0K-IDPU z`KJnQAK!jI)~~ZHbDxflAgDwlvvLHFM;L^N)=~(1wa}^}GI8go(b5*O&x>As^Ar(| z+ZD#8uVfGHUe~O>kGWMULm;O{JT|vIUKSaXWL_q8XMUp&!y+a$Ul>Evmf97pa>wWv zZZc4hAnp-ST;rU=>Sq-t@^xC%KHZ{a}7K&`Q4LWJYx;R^xCEK~={ znc!gI?JXrmdm5L1aO21U9x&=DUuTdtlYEDHsBxf($W30*BtbgQ$Y_VH>dx!Lt*>MY zU8oL@*l>^g^Z9I%MNiWce7OjiX4O;7KAKm2g=pp$kP&qCl1Tc&EEPzRhqgSFjdk2B zi0yTQQ2Wa{H;Dr%NP?h+CEfq#39+zpgXZMsJy*POkIHN_ETbnU=D z)nQrlZk_eTRM9;4e{ti>mK_odl{s~w<|czeh&?8bPnzZWkuay)tt|gdH}HfQTXLp-TVN>rHu>IjiiRf(=hfFUoy&dUUlF5n zZg_NkevtDRK?(+<9({GSqKaqIWZy57`VjV?c@$8GU-Z$<_{QTbrp!l^TS+f|(*k$^ z+S%YP3*n7vjeW$SM8c<}@aqCSqY&)0qBFTak=kY6S?>aw7@t>R-lP~?*-ptB&ypdhr*W;f9UfY#zOtN?0xFEARI4j+G*@2QEii=+mvNUDi}x+ zvz}fn-LgP}(Qa!R+cdk-eaJRh84Om$S3l8>+y}kRac>vPzUst zM_)Nd)lw@BBHl+BLtBA6*R->v%+ zU8DQsJh-KEF&{$n5||zh+nQU?DT5YJvIy+7t;bP=2z_vFdUVCeDQ$NCwEf8L#YBA6 zr7Y|{)q&VYz5LOV+E>+jEl%&ayW?*VG97TQzkFga%f??k*u^1aQ@F)d=t{F4!i$D* zbr>bW0*y?xErdC-X52EpW*oSXCq?bXViV!&@EgdV#Vi4I>e0~CJx)FkSa-hwrKk9{ z=-=hb51ic__7^wav6_P5iF&D|oVKI?YN}#VOj;h!=+?0M+cSJwMZ`3chj4y_t|q>U;3^HzZTLK#e=VKGaaDk1;Rd^uNULh;wS`Dl#kIfqc9CrMU59)40+8nh zyoTqHUGSJ*XofSWhZK55S_;uV4@|ZaoaMe4Gcl0##AE`;*#0Uc{l1bP3na>|o=P{0 z&VSgcs=E3fzhSaK0qA^k+S6k?Z))+1WcC5OBwj{*w@CQGu63r%u|697Yy>=@ym;}# zT)$z$x}{?K{(Ln*C`E&y8fKp#jsYY-GuviWz8%GnZw33#0MeqEeK`2)_}9uiXg>f^WWwPEh-gqEeiSy~ zpy2kZaV$@0M$Sf;jcx*bjZTppZbA{msA}Wj&Kpu74{5zmJNV|a@lN&6RS>bqvo%7x z{lZdngF5Ejf(JCpDh4_)Vg@A(LJ>wq9j^hM|F#6|SXd#ygCGs&{=yh>n7vx4{_K!$ zb2rjZ$-SE37<|PAL?ohg;xiy2T$wa%&<~(_*-`zjpnScMj)>6+ z-NNKtWb)qoFZvd{3JT+PADEfOyT?-akdQL}=R_Q;{8-m=^PML5o7p=t}>W^lL@dL=CYZmyI&Fsxj0vF+BDK z74DHJH3q1W9?maKOkk~2Y&9*v-cLQ)(xTj1AJJ!hKY)TLNC@uN$q-lJEHrxC(BPk` z+vAd+0=afPVw$Pap((HiO#$YB8fXegLQ^0=-HG^-$v2z{WpKr6%PN96rOtz2{ZDok zaErvo^Vo|li8z4TF#0G9GCVM&GNY1xY9HQhVm9uNI{~k91XXK-gnuC<=$X~m@w`@x zw9K#$!XUKGaCm`rW*8_uWnQmh+BK-^&q%|R($g{y`*v})4(b1;Cwa9@L)Rnw07#zT zH6%dG=%kJ(t-GLnxnHAm!Szn+pQa&;!LjnP68~8Ck*N{F$~3xzc(wYDQ(fyD*##tO z4Q3IP$e9m~WAazdp^cZ~0UGm@rg7UR)7-VD)t}<@ zrEp}3Gj-#e0Yy&KJ<&4bt2Lgq#0{;{WS179HfBS)KX=H}Ju>n$ zks1{2(js7C*Z1@AfR7gmyVTB-P1SQj1pl9aM$X~SrGm*f zwyQB{>m1@Vn~(7(%I%oZqx z<1H9bJn1N$|1YP%Pe|=TLgWPL_hVhDWeXWL4H9su+4}i||Dg&bd+xCm!w~s%5i#dw zX{6my-OzX$+NaKP`Oj>KHjbI|x3Wn4COiVW#da8M_ZAe=%2~UJCHd>8pwzzkvHZJ9 zVT1r`nlo%K^3-2iFZ>C;*+v#!9hL)63-1VNzUE)=rUxoZ)r4RqPA@0X}0!{%S z$kFxb+M(Go?JKCd{&l9sxj=sJu>hyny-6d3GLkC}A<=7$&udsB9KIu`7pLhanhWqlgtW>RWv?~Ku zqF0=$U3#Bz2x0;fht7Wu&=%^M|I%?gaNG(Y#c^NkLEoE;iMlY$9$NLwcWuIuzuyAf zbySX%@R0uaefJ9%&_;@CoBte9eEloZ1Vu7O?)qaglI`|wBnaUU$D0|*X<*vgn<*Y#QgpIy}I8W-_ zM2!6Y*k4nT?4-4zxnXztYh^0%Fy5-wVvbC<7T7rpv0>SNhc6^ zPa`!BFRi+P&ZVn2jE@))57R-&_P@r!`M5qd$*MUWiK$i4D1vVH^7J6Jqw`IRG`g~a z0xFG&9~F22ZdkGNMiR@jKkv}6?DW&wb@iTp2G2ub`6d3ON=`-BwAc-IBjb*!7^i;a zmu9bpOb&@3X5%eGO^OM((ZH!-z+DC=g1I}w_+xrjFnnKlQdeQ26ZRU7j^Ih+txE+q?Kb7hSs*}5gpCc9Jtzh>$ z&k(i0nYd#+>|I?C+7}3L-O8{)cR%VYAK(&t$8`#eMNS1#Zde`Zo8^^LXwziz<;nay zsql|sSj|&DTVg}P=9AGhLH$O}+fT3<@t^7ue6=|3k)K55)IFG)?`+?%nZL%iV)Ane{0Nb4F_Tr**xKFf9Rkk$LAh49a6 zd`vTN^HHyCN`!q#S6|aZ20iVFeiuB@by4873K)-9NlmXWUK9;^t8X&=h&N}8qO|7+ z?(y^Sj}Z#(xvlad>z0|b7E4bhA6&$&0hXNBEPg_5zDsKEe@D}sf#5sh39cmlv!_^^ zHidrVaVbycjE&?~`?j>Zt4rf4`-?cXKOpIx;yC)O~Ra5G}>DfZ$HH_q;NEw7DFIXb5;8n()SEU}2 zS@*f9-s%fGrMrM8ZO0E%;P>160;il^CxZzCy^VCnw(@$Ce&V=d=A+SD8O~8k(Sw1w zSv}5?wq+)(aSAOZWq0iLqco90$X{41uyC6!IhA{&Z{COqLXTQy;D-gRZP$cEr(-#w zOsr)=i$q|ZvXht+zbC<{7OIl29>LKuo+T5jFZwZeVDY7Bk~ z?OYrl&cL^22ouyl7m3)Sj(ol#GE!+(lC0ecmBr~d$l|K2Cz1R75mNFV_ATF@w@@up zDNs=^j^L zud984E7|Ix`)7pm-X|E90dOk`ft3T@^qQr?s&gw&dS-%lg-)wGd~r$^T(=YR+=LO>GzPPJbPg*Q_9g(clV?`J=bPR)C zI*N32ez3hO(w?%uAf7WH8e0laIO{>=?MNu@t1S?50npasJ%#kAe)1vPpD_#0MlyDV zIn81|U|_4spD`quK=21!hHDlyGs{mSoh>uNQsd~_I28}luM!iE+M&k}EQ&rc5T-~g zzQ1Ly-DPXA^9?EK-B2b$O8kn#eFewaHnzjL0t`f2FRy(5YQ#Q)*!rR>sMjUg{X8^d z^sIEPLHr#awh~?I6G2@`V`Z&z!BDg^U6vw!IKQ%{vca_J8DtAe*U=;eP8(+%8w=|B z{~(HtT^=AxY0fLn4Ic9r4rI~E3lL>7Jz9_LW`IGB%i_6|&>nU|tXD}A{%BPOiBj~p zQyk?g45Vbm52hiCn7vMp&qR8?oVY{-Pqyb=PGX4AlvLIKfKc>8 zfae3<&;>S|g3(mFWF8~}TE5uIQ1z)V{!aW&9&Qi01-vG0GdDyRe!Z&Aux4L?iNkPA zy5CUkf63t7CKz1-Lkiz|Sj(6e0*21sxIQMW7vbX9XsoVW+uLhOiTD9#*b)!)?P>3` zc~?A3cBq?G@OlDXb`w-1eCw=l;}h{s`5HW$z>J-$7Ow{g9lT71Wy&B{s%unj)VXrr zlyWQK+S|dkl#d$ee}eEv8ByzIhjwP*s&Q5uAatnvf6(vYX-I9{i^Mt?2)r#R=5`Ai zoppS0`=TPJGi-kv{MPTO1@(k&K-2#Op}P0 z^QIIK><3gc$)T&JTbqJ=!v94UkACa5)-Y4u7BZ?E*AOD$lD6;P24+55q-UG&Zo2YY zUn{dB(Du~)%-Qu#(HR0v?IJrUhxtbVxvlFYC6QV6`>b&fQ^2r#y=j1L=E6QAVe{yp z;}5eJc*e%V8(l65jHkZhg^rx?8!SF@BIr(DN9_xbc1CE1Ac1H;sZrq6ydo{j93e7S z)Mu>`Xft^4b8WIf2qOGSOdff+ad{89lT^X(dL@Fsaco>G(`0c;n?OQIfzyGH1Y?9+ zNh=dy+CCS=GD5AbwOen`7E%#-!f~kol}~XLS*4V^Q!QuOtgf6APneru3tmW}%p7$kP_N7Yu2N}Nw)j{SC z&}Hmzz*(K{(|@2l0TVQm59b#gMV0l$4>(JjMR)ciRZ{yDIob(Ep&O20CJn@)) z(ze{%%6r=jcl0{C!R_5cq?Ri}RM@XW*h|9%9zO`bE|){N-EVZV=>N=KU>qfTYqFS% z9p6uzK!ru$@=gjHNHd}NFF!MLzZ zE}q`sQ);yEkz2b8D2WwyH!+J0UYDYj$`_zZt$tZp4ll-{;%LU~%B0P5#g2Ih{E+-s zs!DEr&O!MAe>JyR^hCl5}@5BrOL|7ZHvEg;&kcBH~36AdmqZc0Hv< zG;h{8y3E$XONqG5I?mZLNi1>iKZj*>+DcfC7M0!p%~{Zbmov&l(gxDs;hGwzq-%uWqV^J zu7@2DTUug)KN_oVN~^}#>Y=XEd57MWv5$c!hK0_c$MD==?j8GpwIr5cO*z^$D_){c ziZ^_nB|1wVlsP?-aS|(%vNvzj10_Hsi&tP+jDNkz&DUPbYDN+XQaK+C?DJ0s)%4VEnz}O zX{mm7$1LIgfr!t__Xu1*k2z`xB76Z!=j9wx@u>4J~XYAZZ1Ssa%Z}_ z*?4tEV2J23No6IOG0v!E9ROm~fyvgcQ4uUdvAwwvQ}gtTh&_@^k3kQ^;;vSp( zm(Fc`POUx~S|XA<7*Ty*eYh}P<6Pj@?sHhBGY4<<>2I_KlTWo+zuRAou_2t#q1``N zk|Hm264K5-5;53Xn$EFXMVcT?TH$Ysu%!!lAxBLm)I&>ew&D1M=$nvsM+{8FeK9JB zeQiek^yGErM+fPBQu>8HSI@nzd0Z;ICzWf?)*a8|xD@kcNZfs8wnf>uyu~z6Kihk! zEpy{(Uf;pif~kjnUViSZBu0Vm&%sRES&Rd%b@4+@WHigPpwHWGZ8~dw;E3SJ#%FIH z{%ql3%IEwGTTaPySrr9R&K@J90&Y~lA;%c(-op_V5(EDw9wDbBV%tNKH|sKOBM!)7 zJDiBs=U*!=?bNW7VsEyupT!h#r4*JIAKfJxy|t%Nj9LZye+c=c2P>j-aM4bb3?T=| z#6B+>HsRGE8I{X*u4ZBp^-z6r}qv%-eJWsd#2$d;w&)roP@Mu!Ce_z=4DcQ1Ju1l^ICms@51GO)G zi=|-9((vIYO6;l4JH$Tocj*xNw-;f%)B}Te0=@*79+4n{s2!5}uD%-nbN)8o2a@HZ z7pzF~=zBUu9bOEQS{y#iqFhd1sO?&U>&AxgC$pS?&dH4|44YoYQSE8=jblYv9>dl2 zAEpI1E;c@Wl~rn|Tty8I)SI@N;7@gd2nID-ckqu?9y}WT^~jZUGjMdjJP#k^|Az;M zF?)W9P3n*SQN{(^yPE-e)z?z?;m`AoAx$t=_E~NYdE0&QIC%S1x_k3Rqa@4D*ly?* zL=GM#N(JO{9m!57nVnCG$AwYae$?TV|ja5H#k zaU&_j2Kj_mUUPa&;(gVJR$IIFTf0da*ysIz%zJUnYeN;3PW38r=Psf*$8T zA`)ei9i#|1yby&T2xEyl`a(Ho1j-orf#-JUH>ktm0|i+4!3Dd)YxYny!v`@~7JlH} z6Zp*tPzpc)PWo37|9Zr~q46(9{9gi=+kOZh!myubvRr+?7e#3K+bXwmWDKAEKTP67 A=>Px# literal 0 HcmV?d00001 diff --git a/src/pages/buttons/DoneButton.jsx b/src/pages/buttons/DoneButton.jsx index e69de29..8c3c385 100644 --- a/src/pages/buttons/DoneButton.jsx +++ b/src/pages/buttons/DoneButton.jsx @@ -0,0 +1,19 @@ +import React from "react"; +import styled from "styled-components"; + +const DoneButton = ({ onClick }) => { + return ( + + Checked + + ); +}; + +export default DoneButton; + +const StyledButton = styled.button` + background-color: transparent; + border: none; + cursor: pointer; + padding: 0; +`; diff --git a/src/pages/buttons/ResetButton.jsx b/src/pages/buttons/ResetButton.jsx index e69de29..77f4994 100644 --- a/src/pages/buttons/ResetButton.jsx +++ b/src/pages/buttons/ResetButton.jsx @@ -0,0 +1,19 @@ +import React from "react"; +import styled from "styled-components"; + +const ResetButton = ({ onClick }) => { + return ( + + Reset + + ); +}; + +export default ResetButton; + +const StyledButton = styled.button` + background-color: transparent; + border: none; + cursor: pointer; + padding: 0; +`; diff --git a/src/pages/buttons/TrashButton.jsx b/src/pages/buttons/TrashButton.jsx index e69de29..68ece29 100644 --- a/src/pages/buttons/TrashButton.jsx +++ b/src/pages/buttons/TrashButton.jsx @@ -0,0 +1,21 @@ +import React from "react"; +import styled from "styled-components"; + +const TrashButton = ({ onClick }) => { + return ( + + Trash + + ); +}; + +export default TrashButton; + +const StyledButton = styled.button` + background-color: transparent; + border: none; + cursor: pointer; + padding: 0; + margin-right: -5px; + margin-top: -5px; +`; diff --git a/src/pages/mainpage/DateBar.jsx b/src/pages/mainpage/DateBar.jsx index 3e31ef4..21090d6 100644 --- a/src/pages/mainpage/DateBar.jsx +++ b/src/pages/mainpage/DateBar.jsx @@ -12,7 +12,7 @@ const DateBar = () => { const week = ["일", "월", "화", "수", "목", "금", "토"]; const dayOfWeek = week[today.getDay()]; // 현재 요일 - // 한글 날짜 포맷으로 변환 + // 한글로 변환!! const formattedDate = `${year}년 ${month}월 ${date}일 ${dayOfWeek}요일`; return {formattedDate}; @@ -25,4 +25,5 @@ const DateContainer = styled.div` background-color: transeparent; color: #333; font-size: 13px; + margin-top: 5px; `; \ No newline at end of file diff --git a/src/pages/mainpage/MainPage.jsx b/src/pages/mainpage/MainPage.jsx index a2c6a6f..d5d5e54 100644 --- a/src/pages/mainpage/MainPage.jsx +++ b/src/pages/mainpage/MainPage.jsx @@ -1,9 +1,26 @@ -import React from "react"; +import React, { useState } from "react"; + import styled from "styled-components"; -import AddButton from "../buttons/AddButton"; import DateBar from "./DateBar"; +import AddButton from "../buttons/AddButton"; +import DoneButton from "../buttons/DoneButton"; +import TrashButton from "../buttons/TrashButton"; +import ResetButton from "../buttons/ResetButton"; const MainPage = () => { + const [inputValue, setInputValue] = useState(""); // 입력 값 추적 + + const handleInputChange = (e) => { + setInputValue(e.target.value); + }; + + + + + + + + return ( @@ -16,13 +33,19 @@ const MainPage = () => { - + 0} //입력값 있으면 prop 전달!! + /> - - - + + + @@ -64,7 +87,7 @@ align-items: center; `; const Header = styled.div` - width: 70% + width: 80% `; const TitleWrapper = styled.div` @@ -82,21 +105,39 @@ const ProgressStatusNumber = styled.span` `; const InputContainer = styled.div` - +width: 80%; +display: flex; +flex-direction: row; //인풋칸이랑 버튼 가로로 나열되게 +justify-content: center; +margin-top: 20px; `; const TodoInput = styled.input` - +flex: 1; +border: none; +border-bottom: 1.5px solid ${props => props.hasContent ? '#4A90E2' : '#ccc'}; //입력된 값 있을 때 파란색으로 변경 +color: ${props => props.hasContent ? '#4A90E2' : '#000'}; +font-family: 'SUIT-Regular'; +font-size: 12px; +margin-right: 10px; + +&:focus { + outline: none; + border-bottom: 1.5px solid ${props => props.hasContent ? '#4A90E2' : '#ccc'}; +} `; -const Button = styled.button` - -`; const ButtonContainer = styled.div` - + display: flex; + flex-direction: row; + justify-content: flex-end; + width: 80%; + margin-top: 10px; + margin-left:10px; `; + const ListContainer = styled.div` `; From 24157839fafde5f16a662c336b449d5c3ccefd35 Mon Sep 17 00:00:00 2001 From: dreamforxou Date: Tue, 19 Mar 2024 23:09:59 +0900 Subject: [PATCH 05/17] =?UTF-8?q?feat:=201.=20=ED=95=A0=EC=9D=BC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84=20?= =?UTF-8?q?2.=20=EC=97=94=ED=84=B0=ED=82=A4=20=EC=9E=85=EB=A0=A5=20?= =?UTF-8?q?=ED=95=B8=EB=93=A4=EB=9F=AC=20=EA=B5=AC=ED=98=84=203.=20TodoLis?= =?UTF-8?q?t=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/lists/TodoList.jsx | 35 +++++++++++++++++++++++++++++++++ src/pages/mainpage/MainPage.jsx | 32 ++++++++++++++++++++---------- 2 files changed, 57 insertions(+), 10 deletions(-) diff --git a/src/pages/lists/TodoList.jsx b/src/pages/lists/TodoList.jsx index e69de29..0c14ec6 100644 --- a/src/pages/lists/TodoList.jsx +++ b/src/pages/lists/TodoList.jsx @@ -0,0 +1,35 @@ +import React from 'react'; +import styled from 'styled-components'; + + + +const TodoList = ({ items }) => { + return ( + + {items.map((item, index) => ( + {item} + ))} + + ); +}; + +export default TodoList; + + +const ListContainer = styled.ul` + width: 100%; + max-height: 200px; + overflow-y: auto; // 최대 높이 벗어나면 스크롤 생기게 + list-style: none; + padding: 0; + margin-top: 10px; +`; + +const ListItem = styled.li` + min-width: 70%; + padding: 8px; + margin: 5px 0; + background-color: #f0f0f0; + border-radius: 5px; + font-size: 11px; +`; \ No newline at end of file diff --git a/src/pages/mainpage/MainPage.jsx b/src/pages/mainpage/MainPage.jsx index d5d5e54..0a47e29 100644 --- a/src/pages/mainpage/MainPage.jsx +++ b/src/pages/mainpage/MainPage.jsx @@ -6,15 +6,28 @@ import AddButton from "../buttons/AddButton"; import DoneButton from "../buttons/DoneButton"; import TrashButton from "../buttons/TrashButton"; import ResetButton from "../buttons/ResetButton"; +import TodoList from "../lists/TodoList"; const MainPage = () => { const [inputValue, setInputValue] = useState(""); // 입력 값 추적 - + const [thingsToDo, setThingsToDo] = useState([]); + const handleInputChange = (e) => { setInputValue(e.target.value); }; + const handleKeyDown = (e) => { + if (e.key === 'Enter') { + handleAddTodo(); + e.preventDefault(); + } + }; + const handleAddTodo = () => { + if (!inputValue.trim()) return; // 빈 입력 방지 + setThingsToDo([...thingsToDo, inputValue]); + setInputValue(''); // 입력 필드 초기화 + }; @@ -39,16 +52,19 @@ const MainPage = () => { value={inputValue} // 입력값 상태 onChange={handleInputChange} hasContent={inputValue.length > 0} //입력값 있으면 prop 전달!! + onKeyDown={handleKeyDown} //엔터키로 버튼누르기 /> - - + + + + - +