From fd418d3ae451310bda2775972a022ddf36647286 Mon Sep 17 00:00:00 2001 From: bangdler <90082464+bangdler@users.noreply.github.com> Date: Sun, 29 May 2022 21:57:23 +0900 Subject: [PATCH] =?UTF-8?q?[Team-33][bangtae=20&=20=ED=8F=AC=ED=82=A4]=201?= =?UTF-8?q?=EC=A3=BC=EC=B0=A8=20=EA=B8=88=EC=9A=94=EC=9D=BC=20PR=20(#94)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Feature/3 (#26) * rename: gnb 폴더 생성하여 관련 컴포넌트 이동 - styled -> customStyled 로 변경 적용 * refactor: gnb 컴포넌트 css 수정 * feat: main banner UI 구현 * refactor: gnb 컴포넌트 hover 및 cursor pointer 적용 * Feature/2 (#27) * chore: mui 버전 통일 * feat: 글로벌 스타일 추가 * feat: SearchBar 컴포넌트 style 작성 및 이벤트 추가 * Feature/alias (#28) * chore: alias 경로 설정을 위한 react-app-rewired 설치 및 설정파일 생성 * refactor: 절대경로 반영 (index, app, gnb, main-banner) * fix: search input width 고정 Co-authored-by: moon-yerim <75062526+moonyerim2@users.noreply.github.com> --- airbnb-app/config-overrides.js | 5 + airbnb-app/jsconfig.json | 8 + airbnb-app/jsconfig.paths.json | 9 + airbnb-app/package-lock.json | 600 +++++------------- airbnb-app/package.json | 13 +- airbnb-app/src/App.js | 12 +- airbnb-app/src/common/globalStyle.js | 16 + airbnb-app/src/component/GNB.jsx | 38 -- .../src/component/{ => gnb}/AccountMenu.jsx | 9 +- airbnb-app/src/component/gnb/GNB.jsx | 24 + airbnb-app/src/component/{ => gnb}/Logo.jsx | 6 +- .../src/component/{ => gnb}/MenuTabs.jsx | 12 +- .../src/component/main-banner/MainBanner.jsx | 21 + .../src/component/search-bar/ResetButton.jsx | 18 +- .../src/component/search-bar/SearchBar.jsx | 48 +- .../src/component/search-bar/SearchButton.jsx | 30 + .../src/component/search-bar/SearchInput.jsx | 64 +- airbnb-app/src/constants/searchBarText.js | 2 +- airbnb-app/src/index.js | 2 +- 19 files changed, 431 insertions(+), 506 deletions(-) create mode 100644 airbnb-app/config-overrides.js create mode 100644 airbnb-app/jsconfig.json create mode 100644 airbnb-app/jsconfig.paths.json delete mode 100644 airbnb-app/src/component/GNB.jsx rename airbnb-app/src/component/{ => gnb}/AccountMenu.jsx (61%) create mode 100644 airbnb-app/src/component/gnb/GNB.jsx rename airbnb-app/src/component/{ => gnb}/Logo.jsx (72%) rename airbnb-app/src/component/{ => gnb}/MenuTabs.jsx (61%) create mode 100644 airbnb-app/src/component/main-banner/MainBanner.jsx create mode 100644 airbnb-app/src/component/search-bar/SearchButton.jsx diff --git a/airbnb-app/config-overrides.js b/airbnb-app/config-overrides.js new file mode 100644 index 000000000..ef5e01731 --- /dev/null +++ b/airbnb-app/config-overrides.js @@ -0,0 +1,5 @@ +const { alias, configPaths } = require('react-app-rewire-alias'); + +const aliasMap = configPaths('./jsconfig.paths.json'); + +module.exports = alias(aliasMap); diff --git a/airbnb-app/jsconfig.json b/airbnb-app/jsconfig.json new file mode 100644 index 000000000..c19be8a40 --- /dev/null +++ b/airbnb-app/jsconfig.json @@ -0,0 +1,8 @@ +{ + "extends": "./jsconfig.paths.json", + "compilerOptions": { + }, + "include": [ + "src" + ] +} diff --git a/airbnb-app/jsconfig.paths.json b/airbnb-app/jsconfig.paths.json new file mode 100644 index 000000000..b15748d54 --- /dev/null +++ b/airbnb-app/jsconfig.paths.json @@ -0,0 +1,9 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": ["src/*"], + "@component/*": ["src/component/*"] + } + } +} \ No newline at end of file diff --git a/airbnb-app/package-lock.json b/airbnb-app/package-lock.json index 9d1d0fe05..217ecd6c7 100644 --- a/airbnb-app/package-lock.json +++ b/airbnb-app/package-lock.json @@ -1,7 +1,7 @@ { "name": "airbnb-app", "version": "0.1.0", - "lockfileVersion": 1, + "lockfileVersion": 2, "requires": true, "packages": { "": { @@ -12,6 +12,7 @@ "@emotion/styled": "^11.8.1", "@mui/icons-material": "^5.8.0", "@mui/material": "^5.8.1", + "@mui/styled-engine-sc": "^5.8.0", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.2.0", "@testing-library/user-event": "^13.5.0", @@ -21,6 +22,10 @@ "styled-components": "^5.3.5", "styled-reset": "^4.4.1", "web-vitals": "^2.1.4" + }, + "devDependencies": { + "react-app-rewire-alias": "^1.1.7", + "react-app-rewired": "^2.2.1" } }, "node_modules/@ampproject/remapping": { @@ -3210,6 +3215,30 @@ } } }, + "node_modules/@mui/styled-engine-sc": { + "version": "5.8.0", + "resolved": "https://registry.npmjs.org/@mui/styled-engine-sc/-/styled-engine-sc-5.8.0.tgz", + "integrity": "sha512-46eRLWxjTF0d50Q1Q9tj96cgF41r7lesbXAy6kKocCdUfJ8rbIo36C4Ws8Pd7nfVsvaitTb7tmCbVQzDT3niJQ==", + "dependencies": { + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@types/styled-components": "^5.1.14", + "styled-components": "^5.3.1" + }, + "peerDependenciesMeta": { + "@types/styled-components": { + "optional": true + } + } + }, "node_modules/@mui/system": { "version": "5.8.1", "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.8.1.tgz", @@ -13922,6 +13951,39 @@ "node": ">=14" } }, + "node_modules/react-app-rewire-alias": { + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/react-app-rewire-alias/-/react-app-rewire-alias-1.1.7.tgz", + "integrity": "sha512-vn4xU3E/wzh2/fGxda9ZQ6CtW2XdZB/WxAgNOdNPyUcX3hA3mh+kCRGwo19gSjzeTPpoZQwZRblHabLr6mwOTw==", + "dev": true, + "peerDependencies": { + "react-app-rewired": "1 || ^2" + } + }, + "node_modules/react-app-rewired": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/react-app-rewired/-/react-app-rewired-2.2.1.tgz", + "integrity": "sha512-uFQWTErXeLDrMzOJHKp0h8P1z0LV9HzPGsJ6adOtGlA/B9WfT6Shh4j2tLTTGlXOfiVx6w6iWpp7SOC5pvk+gA==", + "dev": true, + "dependencies": { + "semver": "^5.6.0" + }, + "bin": { + "react-app-rewired": "bin/index.js" + }, + "peerDependencies": { + "react-scripts": ">=2.1.3" + } + }, + "node_modules/react-app-rewired/node_modules/semver": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", + "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "dev": true, + "bin": { + "semver": "bin/semver" + } + }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -15849,19 +15911,6 @@ "is-typedarray": "^1.0.0" } }, - "node_modules/typescript": { - "version": "4.6.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.4.tgz", - "integrity": "sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==", - "peer": true, - "bin": { - "tsc": "bin/tsc", - "tsserver": "bin/tsserver" - }, - "engines": { - "node": ">=4.2.0" - } - }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", @@ -18281,158 +18330,14 @@ "@csstools/postcss-unset-value": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@csstools/postcss-unset-value/-/postcss-unset-value-1.0.1.tgz", - "integrity": "sha512-f1G1WGDXEU/RN1TWAxBPQgQudtLnLQPyiWdtypkPC+mVYNKFKH/HYXSxH4MVNqwF8M0eDsoiU7HumJHCg/L/jg==" + "integrity": "sha512-f1G1WGDXEU/RN1TWAxBPQgQudtLnLQPyiWdtypkPC+mVYNKFKH/HYXSxH4MVNqwF8M0eDsoiU7HumJHCg/L/jg==", + "requires": {} }, "@csstools/selector-specificity": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-1.0.0.tgz", - "integrity": "sha512-RkYG5KiGNX0fJ5YoI0f4Wfq2Yo74D25Hru4fxTOioYdQvHBxcrrtTTyT5Ozzh2ejcNrhFy7IEts2WyEY7yi5yw==" - }, - "@emotion/babel-plugin": { - "version": "11.9.2", - "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz", - "integrity": "sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw==", - "requires": { - "@babel/helper-module-imports": "^7.12.13", - "@babel/plugin-syntax-jsx": "^7.12.13", - "@babel/runtime": "^7.13.10", - "@emotion/hash": "^0.8.0", - "@emotion/memoize": "^0.7.5", - "@emotion/serialize": "^1.0.2", - "babel-plugin-macros": "^2.6.1", - "convert-source-map": "^1.5.0", - "escape-string-regexp": "^4.0.0", - "find-root": "^1.1.0", - "source-map": "^0.5.7", - "stylis": "4.0.13" - }, - "dependencies": { - "babel-plugin-macros": { - "version": "2.8.0", - "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz", - "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==", - "requires": { - "@babel/runtime": "^7.7.2", - "cosmiconfig": "^6.0.0", - "resolve": "^1.12.0" - } - }, - "cosmiconfig": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz", - "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==", - "requires": { - "@types/parse-json": "^4.0.0", - "import-fresh": "^3.1.0", - "parse-json": "^5.0.0", - "path-type": "^4.0.0", - "yaml": "^1.7.2" - } - }, - "escape-string-regexp": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", - "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==" - }, - "source-map": { - "version": "0.5.7", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" - } - } - }, - "@emotion/cache": { - "version": "11.7.1", - "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz", - "integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==", - "requires": { - "@emotion/memoize": "^0.7.4", - "@emotion/sheet": "^1.1.0", - "@emotion/utils": "^1.0.0", - "@emotion/weak-memoize": "^0.2.5", - "stylis": "4.0.13" - } - }, - "@emotion/hash": { - "version": "0.8.0", - "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", - "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" - }, - "@emotion/is-prop-valid": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz", - "integrity": "sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ==", - "requires": { - "@emotion/memoize": "^0.7.4" - } - }, - "@emotion/memoize": { - "version": "0.7.5", - "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz", - "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==" - }, - "@emotion/react": { - "version": "11.9.0", - "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.9.0.tgz", - "integrity": "sha512-lBVSF5d0ceKtfKCDQJveNAtkC7ayxpVlgOohLgXqRwqWr9bOf4TZAFFyIcNngnV6xK6X4x2ZeXq7vliHkoVkxQ==", - "requires": { - "@babel/runtime": "^7.13.10", - "@emotion/babel-plugin": "^11.7.1", - "@emotion/cache": "^11.7.1", - "@emotion/serialize": "^1.0.3", - "@emotion/utils": "^1.1.0", - "@emotion/weak-memoize": "^0.2.5", - "hoist-non-react-statics": "^3.3.1" - } - }, - "@emotion/serialize": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.3.tgz", - "integrity": "sha512-2mSSvgLfyV3q+iVh3YWgNlUc2a9ZlDU7DjuP5MjK3AXRR0dYigCrP99aeFtaB2L/hjfEZdSThn5dsZ0ufqbvsA==", - "requires": { - "@emotion/hash": "^0.8.0", - "@emotion/memoize": "^0.7.4", - "@emotion/unitless": "^0.7.5", - "@emotion/utils": "^1.0.0", - "csstype": "^3.0.2" - } - }, - "@emotion/sheet": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz", - "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g==" - }, - "@emotion/styled": { - "version": "11.8.1", - "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.8.1.tgz", - "integrity": "sha512-OghEVAYBZMpEquHZwuelXcRjRJQOVayvbmNR0zr174NHdmMgrNkLC6TljKC5h9lZLkN5WGrdUcrKlOJ4phhoTQ==", - "requires": { - "@babel/runtime": "^7.13.10", - "@emotion/babel-plugin": "^11.7.1", - "@emotion/is-prop-valid": "^1.1.2", - "@emotion/serialize": "^1.0.2", - "@emotion/utils": "^1.1.0" - } - }, - "@emotion/stylis": { - "version": "0.8.5", - "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", - "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" - }, - "@emotion/unitless": { - "version": "0.7.5", - "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", - "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" - }, - "@emotion/utils": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.1.0.tgz", - "integrity": "sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ==" - }, - "@emotion/weak-memoize": { - "version": "0.2.5", - "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz", - "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==" + "integrity": "sha512-RkYG5KiGNX0fJ5YoI0f4Wfq2Yo74D25Hru4fxTOioYdQvHBxcrrtTTyT5Ozzh2ejcNrhFy7IEts2WyEY7yi5yw==", + "requires": {} }, "@emotion/babel-plugin": { "version": "11.9.2", @@ -19164,96 +19069,6 @@ "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz", "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==" }, - "@material-ui/core": { - "version": "4.12.4", - "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.4.tgz", - "integrity": "sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==", - "requires": { - "@babel/runtime": "^7.4.4", - "@material-ui/styles": "^4.11.5", - "@material-ui/system": "^4.12.2", - "@material-ui/types": "5.1.0", - "@material-ui/utils": "^4.11.3", - "@types/react-transition-group": "^4.2.0", - "clsx": "^1.0.4", - "hoist-non-react-statics": "^3.3.2", - "popper.js": "1.16.1-lts", - "prop-types": "^15.7.2", - "react-is": "^16.8.0 || ^17.0.0", - "react-transition-group": "^4.4.0" - } - }, - "@material-ui/icons": { - "version": "4.11.3", - "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.3.tgz", - "integrity": "sha512-IKHlyx6LDh8n19vzwH5RtHIOHl9Tu90aAAxcbWME6kp4dmvODM3UvOHJeMIDzUbd4muuJKHmlNoBN+mDY4XkBA==", - "requires": { - "@babel/runtime": "^7.4.4" - } - }, - "@material-ui/styles": { - "version": "4.11.5", - "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.5.tgz", - "integrity": "sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==", - "requires": { - "@babel/runtime": "^7.4.4", - "@emotion/hash": "^0.8.0", - "@material-ui/types": "5.1.0", - "@material-ui/utils": "^4.11.3", - "clsx": "^1.0.4", - "csstype": "^2.5.2", - "hoist-non-react-statics": "^3.3.2", - "jss": "^10.5.1", - "jss-plugin-camel-case": "^10.5.1", - "jss-plugin-default-unit": "^10.5.1", - "jss-plugin-global": "^10.5.1", - "jss-plugin-nested": "^10.5.1", - "jss-plugin-props-sort": "^10.5.1", - "jss-plugin-rule-value-function": "^10.5.1", - "jss-plugin-vendor-prefixer": "^10.5.1", - "prop-types": "^15.7.2" - }, - "dependencies": { - "csstype": { - "version": "2.6.20", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz", - "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==" - } - } - }, - "@material-ui/system": { - "version": "4.12.2", - "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.2.tgz", - "integrity": "sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==", - "requires": { - "@babel/runtime": "^7.4.4", - "@material-ui/utils": "^4.11.3", - "csstype": "^2.5.2", - "prop-types": "^15.7.2" - }, - "dependencies": { - "csstype": { - "version": "2.6.20", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz", - "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==" - } - } - }, - "@material-ui/types": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz", - "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==" - }, - "@material-ui/utils": { - "version": "4.11.3", - "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.3.tgz", - "integrity": "sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==", - "requires": { - "@babel/runtime": "^7.4.4", - "prop-types": "^15.7.2", - "react-is": "^16.8.0 || ^17.0.0" - } - }, "@mui/base": { "version": "5.0.0-alpha.82", "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.82.tgz", @@ -19316,6 +19131,14 @@ "prop-types": "^15.8.1" } }, + "@mui/styled-engine-sc": { + "version": "5.8.0", + "resolved": "https://registry.npmjs.org/@mui/styled-engine-sc/-/styled-engine-sc-5.8.0.tgz", + "integrity": "sha512-46eRLWxjTF0d50Q1Q9tj96cgF41r7lesbXAy6kKocCdUfJ8rbIo36C4Ws8Pd7nfVsvaitTb7tmCbVQzDT3niJQ==", + "requires": { + "prop-types": "^15.8.1" + } + }, "@mui/system": { "version": "5.8.1", "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.8.1.tgz", @@ -20373,12 +20196,14 @@ "acorn-import-assertions": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz", - "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==" + "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==", + "requires": {} }, "acorn-jsx": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", - "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==" + "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", + "requires": {} }, "acorn-node": { "version": "1.8.2", @@ -20464,7 +20289,8 @@ "ajv-keywords": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", - "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==" + "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", + "requires": {} }, "ansi-escapes": { "version": "4.3.2", @@ -20759,7 +20585,8 @@ "babel-plugin-named-asset-import": { "version": "0.3.8", "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.8.tgz", - "integrity": "sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q==" + "integrity": "sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q==", + "requires": {} }, "babel-plugin-polyfill-corejs2": { "version": "0.3.1", @@ -21430,7 +21257,8 @@ "css-declaration-sorter": { "version": "6.2.2", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.2.2.tgz", - "integrity": "sha512-Ufadglr88ZLsrvS11gjeu/40Lw74D9Am/Jpr3LlYm5Q4ZP5KdlUhG+6u2EjyXeZcxmZ2h1ebCKngDjolpeLHpg==" + "integrity": "sha512-Ufadglr88ZLsrvS11gjeu/40Lw74D9Am/Jpr3LlYm5Q4ZP5KdlUhG+6u2EjyXeZcxmZ2h1ebCKngDjolpeLHpg==", + "requires": {} }, "css-has-pseudo": { "version": "3.0.4", @@ -21513,7 +21341,8 @@ "css-prefers-color-scheme": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz", - "integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==" + "integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==", + "requires": {} }, "css-select": { "version": "4.3.0", @@ -21558,15 +21387,6 @@ } } }, - "css-vendor": { - "version": "2.0.8", - "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz", - "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==", - "requires": { - "@babel/runtime": "^7.8.3", - "is-in-browser": "^1.0.2" - } - }, "css-what": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", @@ -21636,7 +21456,8 @@ "cssnano-utils": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz", - "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==" + "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==", + "requires": {} }, "csso": { "version": "4.2.0", @@ -22507,7 +22328,8 @@ "eslint-plugin-react-hooks": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.5.0.tgz", - "integrity": "sha512-8k1gRt7D7h03kd+SAAlzXkQwWK22BnK6GKZG+FJA6BAGy22CFvl8kCIXKpVux0cCxMWDQUPqSok0LKaZ0aOcCw==" + "integrity": "sha512-8k1gRt7D7h03kd+SAAlzXkQwWK22BnK6GKZG+FJA6BAGy22CFvl8kCIXKpVux0cCxMWDQUPqSok0LKaZ0aOcCw==", + "requires": {} }, "eslint-plugin-testing-library": { "version": "5.5.0", @@ -23444,11 +23266,6 @@ "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz", "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==" }, - "hyphenate-style-name": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz", - "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==" - }, "iconv-lite": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", @@ -23460,7 +23277,8 @@ "icss-utils": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", - "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==" + "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", + "requires": {} }, "idb": { "version": "6.1.5", @@ -23633,11 +23451,6 @@ "is-extglob": "^2.1.1" } }, - "is-in-browser": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz", - "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=" - }, "is-module": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz", @@ -24497,7 +24310,8 @@ "jest-pnp-resolver": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz", - "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==" + "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==", + "requires": {} }, "jest-regex-util": { "version": "27.5.1", @@ -25348,84 +25162,6 @@ "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-5.0.0.tgz", "integrity": "sha512-PNYZIdMjVIvVgDSYKTT63Y+KZ6IZvGRNNWcxwD+GNnUz1MKPfv30J8ueCjdwcN0nDx2SlshgyB7Oy0epAzVRRg==" }, - "jss": { - "version": "10.9.0", - "resolved": "https://registry.npmjs.org/jss/-/jss-10.9.0.tgz", - "integrity": "sha512-YpzpreB6kUunQBbrlArlsMpXYyndt9JATbt95tajx0t4MTJJcCJdd4hdNpHmOIDiUJrF/oX5wtVFrS3uofWfGw==", - "requires": { - "@babel/runtime": "^7.3.1", - "csstype": "^3.0.2", - "is-in-browser": "^1.1.3", - "tiny-warning": "^1.0.2" - } - }, - "jss-plugin-camel-case": { - "version": "10.9.0", - "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.9.0.tgz", - "integrity": "sha512-UH6uPpnDk413/r/2Olmw4+y54yEF2lRIV8XIZyuYpgPYTITLlPOsq6XB9qeqv+75SQSg3KLocq5jUBXW8qWWww==", - "requires": { - "@babel/runtime": "^7.3.1", - "hyphenate-style-name": "^1.0.3", - "jss": "10.9.0" - } - }, - "jss-plugin-default-unit": { - "version": "10.9.0", - "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.9.0.tgz", - "integrity": "sha512-7Ju4Q9wJ/MZPsxfu4T84mzdn7pLHWeqoGd/D8O3eDNNJ93Xc8PxnLmV8s8ZPNRYkLdxZqKtm1nPQ0BM4JRlq2w==", - "requires": { - "@babel/runtime": "^7.3.1", - "jss": "10.9.0" - } - }, - "jss-plugin-global": { - "version": "10.9.0", - "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.9.0.tgz", - "integrity": "sha512-4G8PHNJ0x6nwAFsEzcuVDiBlyMsj2y3VjmFAx/uHk/R/gzJV+yRHICjT4MKGGu1cJq2hfowFWCyrr/Gg37FbgQ==", - "requires": { - "@babel/runtime": "^7.3.1", - "jss": "10.9.0" - } - }, - "jss-plugin-nested": { - "version": "10.9.0", - "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.9.0.tgz", - "integrity": "sha512-2UJnDrfCZpMYcpPYR16oZB7VAC6b/1QLsRiAutOt7wJaaqwCBvNsosLEu/fUyKNQNGdvg2PPJFDO5AX7dwxtoA==", - "requires": { - "@babel/runtime": "^7.3.1", - "jss": "10.9.0", - "tiny-warning": "^1.0.2" - } - }, - "jss-plugin-props-sort": { - "version": "10.9.0", - "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.9.0.tgz", - "integrity": "sha512-7A76HI8bzwqrsMOJTWKx/uD5v+U8piLnp5bvru7g/3ZEQOu1+PjHvv7bFdNO3DwNPC9oM0a//KwIJsIcDCjDzw==", - "requires": { - "@babel/runtime": "^7.3.1", - "jss": "10.9.0" - } - }, - "jss-plugin-rule-value-function": { - "version": "10.9.0", - "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.9.0.tgz", - "integrity": "sha512-IHJv6YrEf8pRzkY207cPmdbBstBaE+z8pazhPShfz0tZSDtRdQua5jjg6NMz3IbTasVx9FdnmptxPqSWL5tyJg==", - "requires": { - "@babel/runtime": "^7.3.1", - "jss": "10.9.0", - "tiny-warning": "^1.0.2" - } - }, - "jss-plugin-vendor-prefixer": { - "version": "10.9.0", - "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.9.0.tgz", - "integrity": "sha512-MbvsaXP7iiVdYVSEoi+blrW+AYnTDvHTW6I6zqi7JcwXdc6I9Kbm234nEblayhF38EftoenbM+5218pidmC5gA==", - "requires": { - "@babel/runtime": "^7.3.1", - "css-vendor": "^2.0.8", - "jss": "10.9.0" - } - }, "jsx-ast-utils": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.0.tgz", @@ -26196,11 +25932,6 @@ } } }, - "popper.js": { - "version": "1.16.1-lts", - "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz", - "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==" - }, "postcss": { "version": "8.4.14", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz", @@ -26222,7 +25953,8 @@ "postcss-browser-comments": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/postcss-browser-comments/-/postcss-browser-comments-4.0.0.tgz", - "integrity": "sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg==" + "integrity": "sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg==", + "requires": {} }, "postcss-calc": { "version": "8.2.4", @@ -26288,7 +26020,8 @@ "postcss-custom-media": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-8.0.0.tgz", - "integrity": "sha512-FvO2GzMUaTN0t1fBULDeIvxr5IvbDXcIatt6pnJghc736nqNgsGao5NT+5+WVLAQiTt6Cb3YUms0jiPaXhL//g==" + "integrity": "sha512-FvO2GzMUaTN0t1fBULDeIvxr5IvbDXcIatt6pnJghc736nqNgsGao5NT+5+WVLAQiTt6Cb3YUms0jiPaXhL//g==", + "requires": {} }, "postcss-custom-properties": { "version": "12.1.7", @@ -26317,22 +26050,26 @@ "postcss-discard-comments": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.1.tgz", - "integrity": "sha512-5JscyFmvkUxz/5/+TB3QTTT9Gi9jHkcn8dcmmuN68JQcv3aQg4y88yEHHhwFB52l/NkaJ43O0dbksGMAo49nfQ==" + "integrity": "sha512-5JscyFmvkUxz/5/+TB3QTTT9Gi9jHkcn8dcmmuN68JQcv3aQg4y88yEHHhwFB52l/NkaJ43O0dbksGMAo49nfQ==", + "requires": {} }, "postcss-discard-duplicates": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz", - "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==" + "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==", + "requires": {} }, "postcss-discard-empty": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz", - "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==" + "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==", + "requires": {} }, "postcss-discard-overridden": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz", - "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==" + "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==", + "requires": {} }, "postcss-double-position-gradients": { "version": "3.1.1", @@ -26354,7 +26091,8 @@ "postcss-flexbugs-fixes": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz", - "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==" + "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==", + "requires": {} }, "postcss-focus-visible": { "version": "6.0.4", @@ -26375,12 +26113,14 @@ "postcss-font-variant": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz", - "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==" + "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==", + "requires": {} }, "postcss-gap-properties": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-3.0.3.tgz", - "integrity": "sha512-rPPZRLPmEKgLk/KlXMqRaNkYTUpE7YC+bOIQFN5xcu1Vp11Y4faIXv6/Jpft6FMnl6YRxZqDZG0qQOW80stzxQ==" + "integrity": "sha512-rPPZRLPmEKgLk/KlXMqRaNkYTUpE7YC+bOIQFN5xcu1Vp11Y4faIXv6/Jpft6FMnl6YRxZqDZG0qQOW80stzxQ==", + "requires": {} }, "postcss-image-set-function": { "version": "4.0.6", @@ -26393,7 +26133,8 @@ "postcss-initial": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-4.0.1.tgz", - "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==" + "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==", + "requires": {} }, "postcss-js": { "version": "4.0.0", @@ -26434,12 +26175,14 @@ "postcss-logical": { "version": "5.0.4", "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.4.tgz", - "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==" + "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==", + "requires": {} }, "postcss-media-minmax": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz", - "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==" + "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==", + "requires": {} }, "postcss-merge-longhand": { "version": "5.1.5", @@ -26500,7 +26243,8 @@ "postcss-modules-extract-imports": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", - "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==" + "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", + "requires": {} }, "postcss-modules-local-by-default": { "version": "4.0.0", @@ -26558,7 +26302,8 @@ "postcss-normalize-charset": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz", - "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==" + "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==", + "requires": {} }, "postcss-normalize-display-values": { "version": "5.1.0", @@ -26643,12 +26388,14 @@ "postcss-overflow-shorthand": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-3.0.3.tgz", - "integrity": "sha512-CxZwoWup9KXzQeeIxtgOciQ00tDtnylYIlJBBODqkgS/PU2jISuWOL/mYLHmZb9ZhZiCaNKsCRiLp22dZUtNsg==" + "integrity": "sha512-CxZwoWup9KXzQeeIxtgOciQ00tDtnylYIlJBBODqkgS/PU2jISuWOL/mYLHmZb9ZhZiCaNKsCRiLp22dZUtNsg==", + "requires": {} }, "postcss-page-break": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-3.0.4.tgz", - "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==" + "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==", + "requires": {} }, "postcss-place": { "version": "7.0.4", @@ -26739,7 +26486,8 @@ "postcss-replace-overflow-wrap": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz", - "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==" + "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==", + "requires": {} }, "postcss-selector-not": { "version": "5.0.0", @@ -27012,6 +26760,30 @@ "whatwg-fetch": "^3.6.2" } }, + "react-app-rewire-alias": { + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/react-app-rewire-alias/-/react-app-rewire-alias-1.1.7.tgz", + "integrity": "sha512-vn4xU3E/wzh2/fGxda9ZQ6CtW2XdZB/WxAgNOdNPyUcX3hA3mh+kCRGwo19gSjzeTPpoZQwZRblHabLr6mwOTw==", + "dev": true, + "requires": {} + }, + "react-app-rewired": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/react-app-rewired/-/react-app-rewired-2.2.1.tgz", + "integrity": "sha512-uFQWTErXeLDrMzOJHKp0h8P1z0LV9HzPGsJ6adOtGlA/B9WfT6Shh4j2tLTTGlXOfiVx6w6iWpp7SOC5pvk+gA==", + "dev": true, + "requires": { + "semver": "^5.6.0" + }, + "dependencies": { + "semver": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", + "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "dev": true + } + } + }, "react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -27858,6 +27630,21 @@ "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz", "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==" }, + "string_decoder": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", + "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", + "requires": { + "safe-buffer": "~5.2.0" + }, + "dependencies": { + "safe-buffer": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", + "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==" + } + } + }, "string-length": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz", @@ -27924,21 +27711,6 @@ "es-abstract": "^1.19.5" } }, - "string_decoder": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", - "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", - "requires": { - "safe-buffer": "~5.2.0" - }, - "dependencies": { - "safe-buffer": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", - "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==" - } - } - }, "stringify-object": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz", @@ -27988,29 +27760,8 @@ "style-loader": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz", - "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==" - }, - "styled-components": { - "version": "5.3.5", - "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.5.tgz", - "integrity": "sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==", - "requires": { - "@babel/helper-module-imports": "^7.0.0", - "@babel/traverse": "^7.4.5", - "@emotion/is-prop-valid": "^1.1.0", - "@emotion/stylis": "^0.8.4", - "@emotion/unitless": "^0.7.4", - "babel-plugin-styled-components": ">= 1.12.0", - "css-to-react-native": "^3.0.0", - "hoist-non-react-statics": "^3.0.0", - "shallowequal": "^1.1.0", - "supports-color": "^5.5.0" - } - }, - "styled-reset": { - "version": "4.4.1", - "resolved": "https://registry.npmjs.org/styled-reset/-/styled-reset-4.4.1.tgz", - "integrity": "sha512-7j99JIwzotNQmoS8MQJu8OTBDE48gaMEr6SYvuH8xfL0K/a5vNHSRaccTfAiGBs9D3mjLDPxg5iLh3HqFvefPQ==" + "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==", + "requires": {} }, "styled-components": { "version": "5.3.5", @@ -28332,11 +28083,6 @@ "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz", "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==" }, - "tiny-warning": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", - "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" - }, "tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -28813,7 +28559,8 @@ "ws": { "version": "8.6.0", "resolved": "https://registry.npmjs.org/ws/-/ws-8.6.0.tgz", - "integrity": "sha512-AzmM3aH3gk0aX7/rZLYvjdvZooofDu3fFOzGqcSnQ1tOcTWwhM/o+q++E8mAyVVIyUdajrkzWUGftaVSDLn1bw==" + "integrity": "sha512-AzmM3aH3gk0aX7/rZLYvjdvZooofDu3fFOzGqcSnQ1tOcTWwhM/o+q++E8mAyVVIyUdajrkzWUGftaVSDLn1bw==", + "requires": {} } } }, @@ -29247,7 +28994,8 @@ "ws": { "version": "7.5.7", "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.7.tgz", - "integrity": "sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==" + "integrity": "sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==", + "requires": {} }, "xml-name-validator": { "version": "3.0.0", diff --git a/airbnb-app/package.json b/airbnb-app/package.json index 461f8af82..ccf010bfa 100644 --- a/airbnb-app/package.json +++ b/airbnb-app/package.json @@ -7,8 +7,7 @@ "@emotion/styled": "^11.8.1", "@mui/icons-material": "^5.8.0", "@mui/material": "^5.8.1", - "@material-ui/core": "^4.12.4", - "@material-ui/icons": "^4.11.3", + "@mui/styled-engine-sc": "^5.8.0", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.2.0", "@testing-library/user-event": "^13.5.0", @@ -20,9 +19,9 @@ "web-vitals": "^2.1.4" }, "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", + "start": "react-app-rewired start", + "build": "react-app-rewired build", + "test": "react-app-rewired test", "eject": "react-scripts eject" }, "eslintConfig": { @@ -42,5 +41,9 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "react-app-rewire-alias": "^1.1.7", + "react-app-rewired": "^2.2.1" } } diff --git a/airbnb-app/src/App.js b/airbnb-app/src/App.js index 71741e921..d01ea3968 100644 --- a/airbnb-app/src/App.js +++ b/airbnb-app/src/App.js @@ -1,9 +1,10 @@ -import { CustomThemeProvider } from './custom-styled-component/CustomThemeProvider'; +import { CustomThemeProvider } from '@/custom-styled-component/CustomThemeProvider'; import { ThemeProvider } from 'styled-components'; -import { GlobalStyle } from './common/globalStyle'; -import theme from './common/theme'; -import GNB from './component/GNB'; -import SearchBar from './component/search-bar/SearchBar'; +import { GlobalStyle } from '@/common/globalStyle'; +import theme from '@/common/theme'; +import GNB from '@component/gnb/GNB'; +import SearchBar from '@component/search-bar/SearchBar'; +import MainBanner from '@component/main-banner/MainBanner'; function App() { return ( @@ -11,6 +12,7 @@ function App() { + diff --git a/airbnb-app/src/common/globalStyle.js b/airbnb-app/src/common/globalStyle.js index 30c9b2a68..aaabbcda6 100644 --- a/airbnb-app/src/common/globalStyle.js +++ b/airbnb-app/src/common/globalStyle.js @@ -3,4 +3,20 @@ import reset from 'styled-reset'; export const GlobalStyle = createGlobalStyle` ${reset} + + * { + padding: 0; + color: ${({ theme }) => theme.color.black}; + } + + input { + border: none; + outline: none; + background-color: transparent; + } + + button { + border: none; + cursor: pointer; + } `; diff --git a/airbnb-app/src/component/GNB.jsx b/airbnb-app/src/component/GNB.jsx deleted file mode 100644 index 65dd33c20..000000000 --- a/airbnb-app/src/component/GNB.jsx +++ /dev/null @@ -1,38 +0,0 @@ -import { Container, Grid, Box } from '@mui/material'; -import Logo from './Logo'; -import MenuTabs from './MenuTabs'; -import AccountMenu from './AccountMenu'; -import styled from 'styled-components'; - -function GNB() { - return ( - // - // - // - // - // - // - // - // - // - // - // - // - // - - - - - - ); -} - -const StyledContainer = styled.div` - width: 1280px; - margin: 24px auto 0 auto; - display: flex; - align-items: center; - justify-content: space-between; -`; - -export default GNB; diff --git a/airbnb-app/src/component/AccountMenu.jsx b/airbnb-app/src/component/gnb/AccountMenu.jsx similarity index 61% rename from airbnb-app/src/component/AccountMenu.jsx rename to airbnb-app/src/component/gnb/AccountMenu.jsx index 53f93be73..d94bdb690 100644 --- a/airbnb-app/src/component/AccountMenu.jsx +++ b/airbnb-app/src/component/gnb/AccountMenu.jsx @@ -1,17 +1,17 @@ -import styled from 'styled-components'; +import customStyled from '@/custom-styled-component/customStyled'; import DehazeIcon from '@mui/icons-material/Dehaze'; import AccountCircleIcon from '@mui/icons-material/AccountCircle'; function AccountMenu() { return ( - - + + ); } -const StyledDiv = styled.div` +const StyledDiv = customStyled.div` display: flex; width: 76px; height: 40px; @@ -20,6 +20,7 @@ const StyledDiv = styled.div` gap: 10px; border-radius: ${({ theme }) => theme.borderRadius.radius3}; border: 1px solid ${({ theme }) => theme.color.grey4}; + background: ${({ theme }) => theme.color.white}; `; export default AccountMenu; diff --git a/airbnb-app/src/component/gnb/GNB.jsx b/airbnb-app/src/component/gnb/GNB.jsx new file mode 100644 index 000000000..35a1485fa --- /dev/null +++ b/airbnb-app/src/component/gnb/GNB.jsx @@ -0,0 +1,24 @@ +import customStyled from '@/custom-styled-component/customStyled'; +import Logo from '@component/gnb/Logo'; +import MenuTabs from '@component/gnb/MenuTabs'; +import AccountMenu from '@component/gnb/AccountMenu'; + +function GNB() { + return ( + + + + + + ); +} + +const StyledContainer = customStyled.div` + width: 1280px; + margin: 24px 80px; + display: flex; + align-items: center; + justify-content: space-between; +`; + +export default GNB; diff --git a/airbnb-app/src/component/Logo.jsx b/airbnb-app/src/component/gnb/Logo.jsx similarity index 72% rename from airbnb-app/src/component/Logo.jsx rename to airbnb-app/src/component/gnb/Logo.jsx index 563525e57..8875336a0 100644 --- a/airbnb-app/src/component/Logo.jsx +++ b/airbnb-app/src/component/gnb/Logo.jsx @@ -1,11 +1,10 @@ -import styled from 'styled-components'; +import customStyled from '@/custom-styled-component/customStyled'; function Logo() { return LOGO; } -//const StyledTypography = styled(Typography)`` -const StyledTitle = styled.h1` +const StyledTitle = customStyled.h1` width: 88px; height: 46px; line-height: 46px; @@ -13,6 +12,7 @@ const StyledTitle = styled.h1` font-size: ${({ theme }) => theme.fontSize.logo}; font-weight: ${({ theme }) => theme.fontWeight.logo}; color: ${({ theme }) => theme.color.grey1}; + cursor: pointer; `; export default Logo; diff --git a/airbnb-app/src/component/MenuTabs.jsx b/airbnb-app/src/component/gnb/MenuTabs.jsx similarity index 61% rename from airbnb-app/src/component/MenuTabs.jsx rename to airbnb-app/src/component/gnb/MenuTabs.jsx index 4876050b5..e77c55fb2 100644 --- a/airbnb-app/src/component/MenuTabs.jsx +++ b/airbnb-app/src/component/gnb/MenuTabs.jsx @@ -1,3 +1,4 @@ +import customStyled from '@/custom-styled-component/customStyled'; import styled from 'styled-components'; function MenuTabs() { @@ -5,14 +6,14 @@ function MenuTabs() { return ( - {menuList.map(menu => ( - {menu} + {menuList.map((menu, key) => ( + {menu} ))} ); } -const StyledContainer = styled.ul` +const StyledContainer = customStyled.ul` display: flex; gap: 24px; `; @@ -23,6 +24,11 @@ const StyledTab = styled.li` font-size: ${({ theme }) => theme.fontSize.large}; font-weight: ${({ theme }) => theme.fontWeight.regular}; color: ${({ theme }) => theme.color.grey1}; + cursor: pointer; + &:hover { + color: ${({ theme }) => theme.color.grey3}; + text-decoration: underline; + } `; export default MenuTabs; diff --git a/airbnb-app/src/component/main-banner/MainBanner.jsx b/airbnb-app/src/component/main-banner/MainBanner.jsx new file mode 100644 index 000000000..47ede0c80 --- /dev/null +++ b/airbnb-app/src/component/main-banner/MainBanner.jsx @@ -0,0 +1,21 @@ +import customStyled from '@/custom-styled-component/customStyled'; + +function MainBanner() { + return ( + + ); +} + +const StyledImg = customStyled.img` + position: absolute; + left: 0px; + top: 0px; + width: 1440px; + height: 640px; + z-index: -1; +`; + +export default MainBanner; diff --git a/airbnb-app/src/component/search-bar/ResetButton.jsx b/airbnb-app/src/component/search-bar/ResetButton.jsx index a1668c7c3..39e48574e 100644 --- a/airbnb-app/src/component/search-bar/ResetButton.jsx +++ b/airbnb-app/src/component/search-bar/ResetButton.jsx @@ -1,12 +1,20 @@ -import IconButton from '@material-ui/core/IconButton'; -import ClearIcon from '@material-ui/icons/Clear'; +import ClearIcon from '@mui/icons-material/Clear'; +import styled from 'styled-components'; -function ResetButton() { +function ResetButton({ visibility = 'hidden' }) { return ( - - + + ); } +const IconButton = styled.button` + visibility: ${({ visibility }) => visibility}; + width: 20px; + height: 20px; + background-color: ${({ theme }) => theme.color.grey6}; + border-radius: ${({ theme }) => theme.borderRadius.radius1}; +`; + export default ResetButton; diff --git a/airbnb-app/src/component/search-bar/SearchBar.jsx b/airbnb-app/src/component/search-bar/SearchBar.jsx index 66e0bb4dd..b5c32a627 100644 --- a/airbnb-app/src/component/search-bar/SearchBar.jsx +++ b/airbnb-app/src/component/search-bar/SearchBar.jsx @@ -1,14 +1,52 @@ +import styled from 'styled-components'; import SEARCH_INPUT_TEXT from '../../constants/searchBarText'; import SearchInput from './SearchInput'; +import { useState, Fragment } from 'react'; + +const searchInputText = Object.entries(SEARCH_INPUT_TEXT); function SearchBar() { + const [currentInput, setCurrentInput] = useState(null); + const isLastElement = index => index === searchInputText.length - 1; + const isCurrentInput = label => label === currentInput; + const isFocus = currentInput !== null; + + const handleBlur = () => { + setCurrentInput(null); + }; + return ( - <> - {Object.entries(SEARCH_INPUT_TEXT).map(([key, { label, placeholder }]) => ( - - ))} - +
+ + {searchInputText.map(([key, { label, placeholder }], index) => ( + + + + ))} + +
); } +const SearchMenu = styled.span` + display: flex; + align-items: center; + border: 1px solid ${({ theme }) => theme.color.grey4}; + border-radius: ${({ theme }) => theme.borderRadius.radius1}; + background-color: ${({ theme, bgColor }) => theme.color[bgColor]}; +`; + +const Form = styled.form` + display: flex; + justify-content: center; + margin-top: 30px; +`; + export default SearchBar; diff --git a/airbnb-app/src/component/search-bar/SearchButton.jsx b/airbnb-app/src/component/search-bar/SearchButton.jsx new file mode 100644 index 000000000..8d5d06ae8 --- /dev/null +++ b/airbnb-app/src/component/search-bar/SearchButton.jsx @@ -0,0 +1,30 @@ +import SearchRoundedIcon from '@mui/icons-material/SearchRounded'; +import styled from 'styled-components'; + +function SearchButton({ isFocus = false }) { + return ( + + + 검색 + + ); +} + +const SubmitButton = styled.button` + display: flex; + align-items: center; + justify-content: center; + padding: ${({ padding }) => padding}; + margin-left: auto; + background-color: ${({ theme }) => theme.color.primary}; + border-radius: ${({ theme }) => theme.borderRadius.radius1}; +`; + +const ButtonText = styled.span` + display: ${({ display }) => display}; + color: ${({ theme }) => theme.color.white}; + font-size: ${({ theme }) => theme.fontSize.xlarge}; + font-weight: ${({ theme }) => theme.fontWeight.bold}; +`; + +export default SearchButton; diff --git a/airbnb-app/src/component/search-bar/SearchInput.jsx b/airbnb-app/src/component/search-bar/SearchInput.jsx index af2c796b9..bce74efc9 100644 --- a/airbnb-app/src/component/search-bar/SearchInput.jsx +++ b/airbnb-app/src/component/search-bar/SearchInput.jsx @@ -1,19 +1,63 @@ -import { Input, Box } from '@material-ui/core'; -import customStyled from '../../custom-styled-component/customStyled'; +import styled from 'styled-components'; import ResetButton from './ResetButton'; +import SearchButton from './SearchButton'; +import { useState } from 'react'; + +function SearchInput({ label, placeholder, isLastElement, isCurrentInput, isFocus, setCurrentInput }) { + const [isFilled, setIsFilled] = useState(false); + + const handleFocus = label => { + setCurrentInput(label); + }; -function SearchInput({ label, placeholder }) { return ( - - - - - + handleFocus(label)} + > +
+ + +
+ + {isLastElement ? null : } + {isLastElement ? : null} + ); } -const Label = customStyled.div` - color: ${({ theme }) => theme.color.black}; +const Label = styled.div` + font-size: ${({ theme }) => theme.fontSize.small}; + font-weight: ${({ theme }) => theme.fontWeight.bold}; + line-height: 17px; +`; + +const Input = styled.input` + font-size: ${({ theme }) => theme.fontSize.large}; + font-weight: ${({ theme }) => theme.fontWeight.regular}; + line-height: 20px; +`; + +const Line = styled.span` + position: absolute; + right: 0; + height: 44px; + border-left: 1px solid ${({ theme }) => theme.color.grey5}; +`; + +const Container = styled.div` + position: relative; + display: inline-flex; + align-items: center; + ${({ isLastElement }) => { + return isLastElement ? `width: 280px;` : `width: 180px;`; + }} + height: 37px; + padding: 20px 30px; + border-radius: ${({ theme }) => theme.borderRadius.radius1}; + background-color: ${({ theme, bgColor }) => theme.color[bgColor]}; `; export default SearchInput; diff --git a/airbnb-app/src/constants/searchBarText.js b/airbnb-app/src/constants/searchBarText.js index 49d9a47cc..7adeca866 100644 --- a/airbnb-app/src/constants/searchBarText.js +++ b/airbnb-app/src/constants/searchBarText.js @@ -12,7 +12,7 @@ const SEARCH_INPUT_TEXT = { placeholder: '금액대 설정', }, PERSONNEL: { - label: '체크인', + label: '인원', placeholder: '게스트 추가', }, }; diff --git a/airbnb-app/src/index.js b/airbnb-app/src/index.js index 593edf121..83a30d1f5 100644 --- a/airbnb-app/src/index.js +++ b/airbnb-app/src/index.js @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import App from './App'; +import App from '@/App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(