From 756fad1a922e96951d5060690ea92d4a2613f3ae Mon Sep 17 00:00:00 2001 From: jin-co Date: Thu, 2 May 2024 09:54:02 +0900 Subject: [PATCH] Update --- React/test-feedback/package-lock.json | 74 ++++++ React/test-feedback/package.json | 4 + React/test-feedback/src/App.js | 16 +- React/test-feedback/src/components/Nav.js | 24 ++ .../src/components/feed/FeedForm.js | 7 + .../src/components/feed/FeedItem.js | 7 + .../src/components/feed/FeedList.js | 7 + .../src/components/feed/FeedStats.js | 7 + .../src/components/shared/Button.js | 7 + .../src/components/shared/Card.js | 7 + React/test-feedback/src/index.css | 236 ++++++++++++++++++ React/test-feedback/src/pages/About.js | 7 + React/test-feedback/src/pages/Home.js | 7 + 13 files changed, 409 insertions(+), 1 deletion(-) create mode 100644 React/test-feedback/src/components/Nav.js create mode 100644 React/test-feedback/src/components/feed/FeedForm.js create mode 100644 React/test-feedback/src/components/feed/FeedItem.js create mode 100644 React/test-feedback/src/components/feed/FeedList.js create mode 100644 React/test-feedback/src/components/feed/FeedStats.js create mode 100644 React/test-feedback/src/components/shared/Button.js create mode 100644 React/test-feedback/src/components/shared/Card.js create mode 100644 React/test-feedback/src/pages/About.js create mode 100644 React/test-feedback/src/pages/Home.js diff --git a/React/test-feedback/package-lock.json b/React/test-feedback/package-lock.json index 03657dc53..6e2e40991 100644 --- a/React/test-feedback/package-lock.json +++ b/React/test-feedback/package-lock.json @@ -11,8 +11,12 @@ "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "framer-motion": "^11.1.7", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-icons": "^5.2.0", + "react-router": "^6.23.0", + "react-router-dom": "^6.23.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" } @@ -3310,6 +3314,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.16.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.0.tgz", + "integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==", + "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", @@ -8800,6 +8812,30 @@ "url": "https://github.com/sponsors/rawify" } }, + "node_modules/framer-motion": { + "version": "11.1.7", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.1.7.tgz", + "integrity": "sha512-cW11Pu53eDAXUEhv5hEiWuIXWhfkbV32PlgVISn7jRdcAiVrJ1S03YQQ0/DzoswGYYwKi4qYmHHjCzAH52eSdQ==", + "dependencies": { + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", @@ -15077,6 +15113,14 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "node_modules/react-icons": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.0.tgz", + "integrity": "sha512-n52Y7Eb4MgQZHsSZOhSXv1zs2668/hBYKfSRIvKh42yExjyhZu0d1IK2CLLZ3BZB1oo13lDfwx2vOh2z9FTV6Q==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -15090,6 +15134,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.23.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz", + "integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==", + "dependencies": { + "@remix-run/router": "1.16.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.23.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.0.tgz", + "integrity": "sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==", + "dependencies": { + "@remix-run/router": "1.16.0", + "react-router": "6.23.0" + }, + "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", diff --git a/React/test-feedback/package.json b/React/test-feedback/package.json index b1696196d..1db882db5 100644 --- a/React/test-feedback/package.json +++ b/React/test-feedback/package.json @@ -6,8 +6,12 @@ "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "framer-motion": "^11.1.7", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-icons": "^5.2.0", + "react-router": "^6.23.0", + "react-router-dom": "^6.23.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, diff --git a/React/test-feedback/src/App.js b/React/test-feedback/src/App.js index da4007db6..1da4b1c8b 100644 --- a/React/test-feedback/src/App.js +++ b/React/test-feedback/src/App.js @@ -1,7 +1,21 @@ import React from 'react' +import { BrowserRouter as Router, Routes, Route } from 'react-router-dom' +import { Nav } from './components/Nav' +import { Home } from './pages/Home' +import { About } from './pages/About' export const App = () => { return ( -
App
+ +
+
+ ) } \ No newline at end of file diff --git a/React/test-feedback/src/components/Nav.js b/React/test-feedback/src/components/Nav.js new file mode 100644 index 000000000..fa7796492 --- /dev/null +++ b/React/test-feedback/src/components/Nav.js @@ -0,0 +1,24 @@ +import React from 'react' +import { Link } from 'react-router-dom' + +export const Nav = ({ text }) => { + const headerStyles = { + backgroundColor: 'rgba(0, 0, 0, 0)', + color: '#ff6a95', + display: 'flex' + } + + return ( +
+

{text}

+
+ Home + About +
+
+ ) +} + +// Nav.defaultProps = { +// text: "what" +// } \ No newline at end of file diff --git a/React/test-feedback/src/components/feed/FeedForm.js b/React/test-feedback/src/components/feed/FeedForm.js new file mode 100644 index 000000000..6c60f96d7 --- /dev/null +++ b/React/test-feedback/src/components/feed/FeedForm.js @@ -0,0 +1,7 @@ +import React from 'react' + +export const FeedForm = () => { + return ( +
FeedForm
+ ) +} diff --git a/React/test-feedback/src/components/feed/FeedItem.js b/React/test-feedback/src/components/feed/FeedItem.js new file mode 100644 index 000000000..24026bfd7 --- /dev/null +++ b/React/test-feedback/src/components/feed/FeedItem.js @@ -0,0 +1,7 @@ +import React from 'react' + +export const FeedItem = () => { + return ( +
FeedItem
+ ) +} diff --git a/React/test-feedback/src/components/feed/FeedList.js b/React/test-feedback/src/components/feed/FeedList.js new file mode 100644 index 000000000..9e9f3a694 --- /dev/null +++ b/React/test-feedback/src/components/feed/FeedList.js @@ -0,0 +1,7 @@ +import React from 'react' + +export const FeedList = () => { + return ( +
FeedList
+ ) +} diff --git a/React/test-feedback/src/components/feed/FeedStats.js b/React/test-feedback/src/components/feed/FeedStats.js new file mode 100644 index 000000000..327f24e1d --- /dev/null +++ b/React/test-feedback/src/components/feed/FeedStats.js @@ -0,0 +1,7 @@ +import React from 'react' + +export const FeedStats = () => { + return ( +
FeedStats
+ ) +} diff --git a/React/test-feedback/src/components/shared/Button.js b/React/test-feedback/src/components/shared/Button.js new file mode 100644 index 000000000..13b2ab6ee --- /dev/null +++ b/React/test-feedback/src/components/shared/Button.js @@ -0,0 +1,7 @@ +import React from 'react' + +export const Button = () => { + return ( +
Button
+ ) +} diff --git a/React/test-feedback/src/components/shared/Card.js b/React/test-feedback/src/components/shared/Card.js new file mode 100644 index 000000000..bc3b4b0ec --- /dev/null +++ b/React/test-feedback/src/components/shared/Card.js @@ -0,0 +1,7 @@ +import React from 'react' + +export const Card = () => { + return ( +
Card
+ ) +} diff --git a/React/test-feedback/src/index.css b/React/test-feedback/src/index.css index e69de29bb..94af30876 100644 --- a/React/test-feedback/src/index.css +++ b/React/test-feedback/src/index.css @@ -0,0 +1,236 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap'); + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: 'Poppins', sans-serif; + background-color: #202142; + color: #fff; + line-height: 1.6; +} + +ul { + list-style: none; +} + +.container { + max-width: 768px; + margin: auto; + padding: 0 20px; +} + +header { + height: 70px; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 30px; +} + +.card { + background-color: #fff; + color: #333; + border-radius: 15px; + padding: 40px 50px; + margin: 20px 0; + position: relative; +} + +.card.reverse { + background-color: rgba(0, 0, 0, 0.4); + color: #fff; +} + +.card h2 { + font-size: 22px; + font-weight: 600; + text-align: center; +} + +.rating { + display: flex; + align-items: center; + justify-content: space-around; + margin: 30px 0 40px; +} + +.rating li, +.num-display { + position: relative; + background: #f4f4f4; + width: 50px; + height: 50px; + padding: 10px; + text-align: center; + border-radius: 50%; + font-size: 19px; + border: 1px #eee solid; + transition: 0.3s; +} + +.rating li label { + position: absolute; + top: 50%; + left: 50%; + width: 50px; + height: 50px; + padding: 10px; + border-radius: 50%; + transform: translate(-50%, -50%); + cursor: pointer; +} + +.rating li:hover, +.num-display { + background: #ff6a95; + color: #fff; +} + +[type='radio'] { + opacity: 0; +} + +[type='radio']:checked ~ label { + background: #ff6a95; + color: #fff; +} + +.input-group { + display: flex; + flex-direction: row; + border: 1px solid #ccc; + padding: 8px 10px; + border-radius: 8px; +} + +input { + flex-grow: 2; + border: none; + font-size: 16px; +} + +input:focus { + outline: none; +} + +.feedback-stats { + color: #fff; + display: flex; + justify-content: space-between; + align-items: center; +} + +.num-display { + position: absolute; + top: -10px; + left: -10px; +} + +.close, +.edit { + position: absolute; + top: 10px; + right: 20px; + cursor: pointer; + background: none; + border: none; +} + +.edit { + right: 40px; +} + +.btn { + color: #fff; + border: 0; + border-radius: 8px; + color: #fff; + width: 100px; + height: 40px; + cursor: pointer; +} + +.btn-primary { + background-color: #202142; +} + +.btn-secondary { + background: #ff6a95; +} + +.btn:hover { + transform: scale(0.98); + opacity: 0.9; +} + +.btn:disabled { + background-color: #cccccc; + color: #333; + cursor: auto; +} + +.btn:disabled:hover { + transform: scale(1); + opacity: 1; +} + +.message { + padding-top: 10px; + text-align: center; + color: rebeccapurple; +} + +/* FIX: Remove position: absolute to keep about icon at the bottom of the + * document */ +.about-link { + display: flex; + justify-content: flex-end; +} + +/* FIX: Remove position: absolute to keep about icon at the bottom of the + * document */ +.about-link a { + color: #fff; + cursor: pointer; +} + +.about-link a:hover { + color: #ff6a95; +} + +.about h1 { + margin-bottom: 20px; +} + +.about p { + margin: 10px 0; +} + +@media (max-width: 600px) { + .rating li { + margin: 10px 3px; + } + + .rating { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + margin: 30px 0 40px; + } + + .input-group input { + width: 80%; + } +} + +/* nav link eg */ +.active { + background-color: #333; + color: red; +} diff --git a/React/test-feedback/src/pages/About.js b/React/test-feedback/src/pages/About.js new file mode 100644 index 000000000..17cf52de5 --- /dev/null +++ b/React/test-feedback/src/pages/About.js @@ -0,0 +1,7 @@ +import React from 'react' + +export const About = () => { + return ( +
About
+ ) +} diff --git a/React/test-feedback/src/pages/Home.js b/React/test-feedback/src/pages/Home.js new file mode 100644 index 000000000..8ab2ceda6 --- /dev/null +++ b/React/test-feedback/src/pages/Home.js @@ -0,0 +1,7 @@ +import React from 'react' + +export const Home = () => { + return ( +
Home
+ ) +}