From c1424ecafbe40101f62d3d1087eebf9a7e0600aa Mon Sep 17 00:00:00 2001 From: bleuxsy <100823803+bleuxsy@users.noreply.github.com> Date: Thu, 22 Feb 2024 22:43:54 +0900 Subject: [PATCH] =?UTF-8?q?[FE]=20feat:=20review->write=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=84=ED=99=98=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 --- frontend/.eslintrc.json | 83 ------------ frontend/package-lock.json | 163 +++++------------------ frontend/package.json | 13 +- frontend/src/back_button/Back_Button.jsx | 10 -- frontend/src/back_button/back_button.css | 0 frontend/src/back_button/index.js | 1 - frontend/src/cardInfo/CardInfo.jsx | 35 ++++- frontend/src/cardInfo/cardInfo.css | 40 +++++- frontend/src/header/Header.jsx | 37 +---- frontend/src/header/header.css | 12 +- frontend/src/map/KakaoMap.jsx | 1 - frontend/src/map/useKakaoLoader.jsx | 1 - frontend/src/review/Review.jsx | 26 +++- frontend/src/review/review.css | 3 +- frontend/src/write/Write.jsx | 48 +++++-- frontend/src/write/write.css | 42 ++++-- 16 files changed, 205 insertions(+), 310 deletions(-) delete mode 100644 frontend/.eslintrc.json delete mode 100644 frontend/src/back_button/Back_Button.jsx delete mode 100644 frontend/src/back_button/back_button.css delete mode 100644 frontend/src/back_button/index.js diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json deleted file mode 100644 index ecf0c5c..0000000 --- a/frontend/.eslintrc.json +++ /dev/null @@ -1,83 +0,0 @@ -{ - "parserOptions": { - "ecmaVersion": "latest", - "sorceType": "module", - "ecmaFeatures": { - "jsx": true - } - }, - "env": { - "browser": true, - "node": true, - "commonjs": true, - "es2022": true - }, - "globals": { "_": true }, - "plugins": ["import", "html", "react"], - "extends": [ - "airbnb-base", - "prettier", - "react-app", - "eslint:recommended", - "plugin:react/recommended", - "plugin:react/jsx-runtime" - ], - "rules": { - // "off" or 0 - turn the rule off - // "warn" or 1 - turn the rule on as a warning (doesn’t affect exit code) - // "error" or 2 - turn the rule on as an error (exit code is 1 when triggered) - // "no-var": "off", - "no-console": "warn", - "no-plusplus": "off", - "no-shadow": "off", - "vars-on-top": "off", - "no-underscore-dangle": "off", // var _foo; - "comma-dangle": "off", - "func-names": "off", // setTimeout(function () {}, 0); - "prefer-template": "off", - "no-nested-ternary": "off", - "max-classes-per-file": "off", - "consistent-return": "off", - "no-restricted-syntax": ["off", "ForOfStatement"], // disallow specified syntax(ex. WithStatement) - "prefer-arrow-callback": "error", // Require using arrow functions for callbacks - "require-await": "error", - "arrow-parens": ["error", "as-needed"], // a => {} - "no-param-reassign": ["error", { "props": false }], - "no-unused-expressions": [ - "error", - { - "allowTernary": true, // a || b - "allowShortCircuit": true, // a ? b : 0 - "allowTaggedTemplates": true - } - ], - "eslint-plugin-import/no-named-as-default": "off", - "react/jsx-filename-extension": "off", - "import/no-unresolved": "off", - "import/prefer-default-export": "off", - "import/extensions": [ - "error", - "ignorePackages", - { - "js": "never", - "ts": "never", - "tsx": "never" - } - ], - "import/no-extraneous-dependencies": [ - "error", - { - "devDependencies": [true, "**/*.test.js", "**/*.test.jsx", "**/*.spec.js", "**/*.spec.jsx"] // "src/**/*.js", "src/**/*.jsx" - } - ], - "max-len": [ - "error", - { - "code": 120, - "ignoreComments": true, - "ignoreStrings": true, - "ignoreTemplateLiterals": true - } - ] // prettier의 printWidth 옵션 대신 사용 - } -} diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 126ce5c..4dbd505 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -1,18 +1,18 @@ { - "name": "ECHub", + "name": "echub", "version": "1.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "ECHub", + "name": "echub", "version": "1.0.0", "license": "ISC", "dependencies": { "@babel/core": "^7.23.9", "@babel/preset-react": "^7.23.3", + "axios": "^1.6.7", "babel-loader": "^9.1.3", - "eslint-plugin-react": "^7.33.2", "gh-pages": "^6.1.1", "localforage": "^1.10.0", "match-sorter": "^6.3.4", @@ -28,12 +28,7 @@ "webpack-dev-server": "^4.15.1" }, "devDependencies": { - "@babel/plugin-proposal-private-property-in-object": "^7.21.11", - "eslint": "^8.56.0", - "eslint-config-airbnb-base": "^15.0.0", - "eslint-config-prettier": "^9.1.0", - "eslint-plugin-html": "^7.1.0", - "eslint-plugin-import": "^2.29.1" + "@babel/plugin-proposal-private-property-in-object": "^7.21.11" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -5039,6 +5034,29 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "1.6.7", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz", + "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==", + "dependencies": { + "follow-redirects": "^1.15.4", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, + "node_modules/axios/node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/axobject-query": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz", @@ -6650,20 +6668,6 @@ "utila": "~0.4" } }, - "node_modules/dom-serializer": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", - "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", - "dev": true, - "dependencies": { - "domelementtype": "^2.3.0", - "domhandler": "^5.0.2", - "entities": "^4.2.0" - }, - "funding": { - "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" - } - }, "node_modules/domelementtype": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", @@ -6695,35 +6699,6 @@ "node": ">=8" } }, - "node_modules/domhandler": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", - "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", - "dev": true, - "dependencies": { - "domelementtype": "^2.3.0" - }, - "engines": { - "node": ">= 4" - }, - "funding": { - "url": "https://github.com/fb55/domhandler?sponsor=1" - } - }, - "node_modules/domutils": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz", - "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==", - "dev": true, - "dependencies": { - "dom-serializer": "^2.0.0", - "domelementtype": "^2.3.0", - "domhandler": "^5.0.3" - }, - "funding": { - "url": "https://github.com/fb55/domutils?sponsor=1" - } - }, "node_modules/dot-case": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", @@ -6834,18 +6809,6 @@ "node": ">=10.13.0" } }, - "node_modules/entities": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", - "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", - "dev": true, - "engines": { - "node": ">=0.12" - }, - "funding": { - "url": "https://github.com/fb55/entities?sponsor=1" - } - }, "node_modules/envinfo": { "version": "7.11.1", "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.11.1.tgz", @@ -7122,37 +7085,6 @@ "url": "https://opencollective.com/eslint" } }, - "node_modules/eslint-config-airbnb-base": { - "version": "15.0.0", - "resolved": "https://registry.npmjs.org/eslint-config-airbnb-base/-/eslint-config-airbnb-base-15.0.0.tgz", - "integrity": "sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig==", - "dev": true, - "dependencies": { - "confusing-browser-globals": "^1.0.10", - "object.assign": "^4.1.2", - "object.entries": "^1.1.5", - "semver": "^6.3.0" - }, - "engines": { - "node": "^10.12.0 || >=12.0.0" - }, - "peerDependencies": { - "eslint": "^7.32.0 || ^8.2.0", - "eslint-plugin-import": "^2.25.2" - } - }, - "node_modules/eslint-config-prettier": { - "version": "9.1.0", - "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz", - "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==", - "dev": true, - "bin": { - "eslint-config-prettier": "bin/cli.js" - }, - "peerDependencies": { - "eslint": ">=7.0.0" - } - }, "node_modules/eslint-config-react-app": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-7.0.1.tgz", @@ -7239,15 +7171,6 @@ "eslint": "^8.1.0" } }, - "node_modules/eslint-plugin-html": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-html/-/eslint-plugin-html-7.1.0.tgz", - "integrity": "sha512-fNLRraV/e6j8e3XYOC9xgND4j+U7b1Rq+OygMlLcMg+wI/IpVbF+ubQa3R78EjKB9njT6TQOlcK5rFKBVVtdfg==", - "dev": true, - "dependencies": { - "htmlparser2": "^8.0.1" - } - }, "node_modules/eslint-plugin-import": { "version": "2.29.1", "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz", @@ -8992,25 +8915,6 @@ } } }, - "node_modules/htmlparser2": { - "version": "8.0.2", - "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz", - "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==", - "dev": true, - "funding": [ - "https://github.com/fb55/htmlparser2?sponsor=1", - { - "type": "github", - "url": "https://github.com/sponsors/fb55" - } - ], - "dependencies": { - "domelementtype": "^2.3.0", - "domhandler": "^5.0.3", - "domutils": "^3.0.1", - "entities": "^4.4.0" - } - }, "node_modules/http-deceiver": { "version": "1.2.7", "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz", @@ -14576,6 +14480,11 @@ "node": ">= 0.10" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/psl": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz", @@ -17335,16 +17244,16 @@ } }, "node_modules/typescript": { - "version": "5.3.3", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz", - "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==", + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" }, "engines": { - "node": ">=14.17" + "node": ">=4.2.0" } }, "node_modules/unbox-primitive": { diff --git a/frontend/package.json b/frontend/package.json index 8f788c6..0da4435 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,5 +1,5 @@ { - "name": "ECHub", + "name": "echub", "version": "1.0.0", "main": "index.js", "scripts": { @@ -14,16 +14,16 @@ "dependencies": { "@babel/core": "^7.23.9", "@babel/preset-react": "^7.23.3", + "axios": "^1.6.7", "babel-loader": "^9.1.3", - "eslint-plugin-react": "^7.33.2", "gh-pages": "^6.1.1", "localforage": "^1.10.0", "match-sorter": "^6.3.4", "node-emoji": "^2.1.3", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router-dom": "^6.21.3", "react-kakao-maps-sdk": "^1.1.26", + "react-router-dom": "^6.21.3", "react-scripts": "^5.0.1", "sort-by": "^1.2.0", "webpack": "^5.90.1", @@ -31,12 +31,7 @@ "webpack-dev-server": "^4.15.1" }, "devDependencies": { - "@babel/plugin-proposal-private-property-in-object": "^7.21.11", - "eslint": "^8.56.0", - "eslint-config-airbnb-base": "^15.0.0", - "eslint-config-prettier": "^9.1.0", - "eslint-plugin-html": "^7.1.0", - "eslint-plugin-import": "^2.29.1" + "@babel/plugin-proposal-private-property-in-object": "^7.21.11" }, "browserslist": { "production": [ diff --git a/frontend/src/back_button/Back_Button.jsx b/frontend/src/back_button/Back_Button.jsx deleted file mode 100644 index 9f3bfd7..0000000 --- a/frontend/src/back_button/Back_Button.jsx +++ /dev/null @@ -1,10 +0,0 @@ -// import "./back_button.css" - -// export function Back_Button(props){ - -// return - - - - -// } \ No newline at end of file diff --git a/frontend/src/back_button/back_button.css b/frontend/src/back_button/back_button.css deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/src/back_button/index.js b/frontend/src/back_button/index.js deleted file mode 100644 index 9eb1ba7..0000000 --- a/frontend/src/back_button/index.js +++ /dev/null @@ -1 +0,0 @@ -export * from './Back_Button.jsx'; diff --git a/frontend/src/cardInfo/CardInfo.jsx b/frontend/src/cardInfo/CardInfo.jsx index b4ca218..a30fc52 100644 --- a/frontend/src/cardInfo/CardInfo.jsx +++ b/frontend/src/cardInfo/CardInfo.jsx @@ -1,20 +1,30 @@ -import '../App.css'; -import './cardInfo.css'; +import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { Review } from '../review'; import { Write } from '../write'; import { Menu } from '../menu'; +import '../App.css'; +import './cardInfo.css'; export function CardInfo() { const movePage = useNavigate(); + const [activeComponent, setActiveComponent] = useState('review'); - function gopage() { + const goPage = () => { movePage('/'); - } + }; + + const goReview = () => { + setActiveComponent('review'); + }; + + const goWrite = () => { + setActiveComponent('write'); + }; return (
- @@ -30,9 +40,20 @@ export function CardInfo() {
평일 12:0~22:00 / 주말 11:00~22:00
- - + {activeComponent === 'review' && } + {activeComponent === 'write' && } + +
+ + +
+ ); } + diff --git a/frontend/src/cardInfo/cardInfo.css b/frontend/src/cardInfo/cardInfo.css index 5b0f3a3..c489d71 100644 --- a/frontend/src/cardInfo/cardInfo.css +++ b/frontend/src/cardInfo/cardInfo.css @@ -40,10 +40,11 @@ border-radius: 20px; margin-bottom: 30px; } + #back_icon { position: absolute; - left: -5px; - top: -10px; + left: -1px; + top: 0px; width: 30px; height: 30px; } @@ -77,7 +78,7 @@ position: relative; border: 2px solid #276830; background-color: #d8e2dc; - height: 200px; + height: 25px; margin-top: 30px; margin-left: 20px; margin-bottom: 60px; @@ -87,9 +88,34 @@ width: 370px; } -button { +.write_button { + position: relative; + background-color: #276830; + color:#fff; + border-radius: 15px; + width: 70px; + height: 30px; + left: 0px; + top: -240px; +} +.review_button { + position: relative; + background-color: #276830; + color:#fff; + border-radius: 15px; + width: 70px; + height: 30px; + left: 150px; + top: -240px; +} + +.backbtn{ +background-color: #fff; position: relative; - width: 20px; - height: 20px; - left: -10px; + left: 10px; + top: 0px; + width: 30px; + height: 30px; + border-radius: 100%; + } diff --git a/frontend/src/header/Header.jsx b/frontend/src/header/Header.jsx index b15f3e2..8e264d1 100644 --- a/frontend/src/header/Header.jsx +++ b/frontend/src/header/Header.jsx @@ -3,16 +3,6 @@ import coffeeImage from './coffee.png'; import logo from './LogoWhite.png'; export function Header() { - // const [isPopupOpen, setPopupOpen] = useState(false); - - // const openPopup = () => { - // setPopupOpen(true); - // }; - - // const closePopup = () => { - // setPopupOpen(false); - // }; - return (
+
- {/* {isPopupOpen && ( -
-
- - × - -

로그인

-
-
-
    -
  • - - -
    • -
  • - - -
    • -
-
-
-
-
- )} */} -
+ ); } diff --git a/frontend/src/header/header.css b/frontend/src/header/header.css index 212e33c..3927d1d 100644 --- a/frontend/src/header/header.css +++ b/frontend/src/header/header.css @@ -62,6 +62,7 @@ header { cursor: pointer; color: #fff; font-size: 22px; + margin: 5px; border: none; font-family: 'Nanum Gothic', sans-serif; font-weight: 500; @@ -76,15 +77,15 @@ header { left: -15px; } -/* #loginPopup { - display: none; - position: fixed; + #loginPopup { + + position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; padding: 20px; - background: #fff; + background: #296d3a; border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 1000; @@ -107,8 +108,7 @@ header { #loginForm input { padding: 8px; margin-bottom: 10px; -} */ - +} @import url('https://fonts.googleapis.com/css2?family=Gothic+A1&family=Nanum+Gothic&family=Nanum+Pen+Script&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Gothic+A1&family=Nanum+Gothic&family=Nanum+Pen+Script&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Gothic+A1&family=Nanum+Gothic&family=Nanum+Pen+Script&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); diff --git a/frontend/src/map/KakaoMap.jsx b/frontend/src/map/KakaoMap.jsx index ca7c8ac..6dd720f 100644 --- a/frontend/src/map/KakaoMap.jsx +++ b/frontend/src/map/KakaoMap.jsx @@ -1,4 +1,3 @@ -// eslint-disable-next-line import/no-extraneous-dependencies import { useEffect, useRef, useState } from 'react'; import { Map, MapMarker } from 'react-kakao-maps-sdk'; import './map.css'; diff --git a/frontend/src/map/useKakaoLoader.jsx b/frontend/src/map/useKakaoLoader.jsx index 6545e19..1706c6f 100644 --- a/frontend/src/map/useKakaoLoader.jsx +++ b/frontend/src/map/useKakaoLoader.jsx @@ -1,4 +1,3 @@ -// eslint-disable-next-line import/no-extraneous-dependencies import { useKakaoLoader as useKakaoLoaderOrigin } from 'react-kakao-maps-sdk'; export default function useKakaoLoader() { diff --git a/frontend/src/review/Review.jsx b/frontend/src/review/Review.jsx index 0b39a16..9436b35 100644 --- a/frontend/src/review/Review.jsx +++ b/frontend/src/review/Review.jsx @@ -1,6 +1,24 @@ +import React,{ useState } from 'react'; +import { useNavigate } from 'react-router-dom'; import './review.css'; +import { Write } from '../write'; + export function Review() { + const movePage = useNavigate(); + const [activeComponent, setActiveComponent] = useState('review'); + + const goPage = () => { + movePage('/'); + }; + + const goReview = () => { + setActiveComponent('review'); + }; + + const goWrite = () => { + setActiveComponent('write'); + }; return (
평점
@@ -11,6 +29,12 @@ export function Review() {
멀티탭이 많아요
+ + {/* {activeComponent === 'write' && } + */} ); -} + + } diff --git a/frontend/src/review/review.css b/frontend/src/review/review.css index 1661575..9a0de7e 100644 --- a/frontend/src/review/review.css +++ b/frontend/src/review/review.css @@ -25,10 +25,11 @@ padding: 8px; top: 0px; margin: 5px; - width: 200px; + width: 270px; height: 20px; border-radius: 10px; font-weight: lighter; + border: 1px solid #7c987f; } #review-text { position: relative; diff --git a/frontend/src/write/Write.jsx b/frontend/src/write/Write.jsx index 3bc6586..2d7ed9d 100644 --- a/frontend/src/write/Write.jsx +++ b/frontend/src/write/Write.jsx @@ -1,16 +1,44 @@ -import "./write.css" +import React, { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import './write.css'; +import { Review } from '../review'; export function Write() { - return ( + const navigate = useNavigate(); + const [activeComponent, setActiveComponent] = useState('review'); -
-
평점
-
+ const [reviewText, setReviewText] = useState(''); -
자리가 편해서 오래 공부하기 좋아요.
-
+ const handleSave = () => { + // Save the entered text (reviewText) as needed (e.g., to a database or state) + // For now, let's log it to the console + console.log('Saved review text:', reviewText); -
+ // Transition to the Review component + navigate('/review?text=' + encodeURIComponent(reviewText)); + + const goReview = () => { + setActiveComponent('review'); + }; + }; - ); -} \ No newline at end of file + return ( +
+
평점
+
+ +
+ {/* {activeComponent === 'review' && } + */} + +
+ ); +} diff --git a/frontend/src/write/write.css b/frontend/src/write/write.css index 1145a3b..3392ea2 100644 --- a/frontend/src/write/write.css +++ b/frontend/src/write/write.css @@ -1,25 +1,33 @@ .write-box { - background-color: #1d5712; - width: 300px; + width: 350px; height: 200px; padding: 20px; - border-radius: 10px; - margin-left: 50px; - padding-left: 60px; - margin-left: 20px; + margin-top: 10px; + position: relative; + padding: 10px; + top: -30px; + left: 20px; + background-color: #38702e81; + box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.5); } .write { + position: relative; background-color: #ffffffeb; - width: 220px; - height: 170px; + width: 300px; + height: 140px; + left: 5%; margin: 5px; - border: 2px solid #333; + border: 1px solid #7c987f; border-radius: 10px; } #write-text { position: relative; + width: 300px; + height: 140px; text-align: center; - top: 40%; + font-size: 18px; + top: 0px; + border-radius: 10px; } #review-name { @@ -28,7 +36,19 @@ text-shadow: #000000; font-size: 23px; top: 0px; - left: -70px; + left: -100px; height: 30px; font-weight: bold; } +.save-button{ + + position: relative; + background-color: #276830; + color:#fff; + border-radius: 15px; + width: 70px; + height: 30px; + top: -2px; + left:0px; +} +