From fd62ca36d3073fe451129149f123b5ab211a4844 Mon Sep 17 00:00:00 2001 From: J1 Date: Wed, 19 Jul 2023 23:48:54 +0900 Subject: [PATCH 1/6] =?UTF-8?q?[FEAT]=20Preview=20Board=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- job1/package-lock.json | 8 +++--- job1/public/index.html | 8 ++++++ job1/src/App.js | 12 ++++---- job1/src/Main/PrevArt.css | 58 +++++++++++++++++++++++++++++++++++++++ job1/src/Main/PrevArt.js | 20 ++++++++++++++ job1/src/Main/PrevCont.js | 19 +++++++++++++ job1/src/Main/Preview.css | 48 ++++++++++++++++++++++++++++++++ job1/src/Main/Preview.js | 22 +++++++++++++++ package-lock.json | 6 ++++ 9 files changed, 192 insertions(+), 9 deletions(-) create mode 100644 job1/src/Main/PrevArt.css create mode 100644 job1/src/Main/PrevArt.js create mode 100644 job1/src/Main/PrevCont.js create mode 100644 job1/src/Main/Preview.css create mode 100644 job1/src/Main/Preview.js create mode 100644 package-lock.json diff --git a/job1/package-lock.json b/job1/package-lock.json index a30dd48..c1d81ac 100644 --- a/job1/package-lock.json +++ b/job1/package-lock.json @@ -15859,16 +15859,16 @@ } }, "node_modules/typescript": { - "version": "4.9.5", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", - "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "version": "5.1.6", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz", + "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==", "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" }, "engines": { - "node": ">=4.2.0" + "node": ">=14.17" } }, "node_modules/unbox-primitive": { diff --git a/job1/public/index.html b/job1/public/index.html index bc41b69..f508830 100644 --- a/job1/public/index.html +++ b/job1/public/index.html @@ -24,6 +24,14 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> + + + Job 일 diff --git a/job1/src/App.js b/job1/src/App.js index 9fb0f67..40066b3 100644 --- a/job1/src/App.js +++ b/job1/src/App.js @@ -5,18 +5,20 @@ import Home from "./View/Home"; import Laws from "./View/Laws"; import Board from "./View/Board"; import News from "./View/News"; +import Preview from "./Main/Preview"; function App() { return (
- + - } /> - } /> - } /> - } /> + } /> + } /> + } /> + } /> +
); diff --git a/job1/src/Main/PrevArt.css b/job1/src/Main/PrevArt.css new file mode 100644 index 0000000..510c8f4 --- /dev/null +++ b/job1/src/Main/PrevArt.css @@ -0,0 +1,58 @@ +.cArticle { + display: flex; + justify-content: space-between; + + /*width: 54.3125rem; + height: 3rem; + flex-shrink: 0;*/ +} + +.cTitle { + color: #000; + text-align: center; + font-family: DM Sans; + font-size: 1rem; + font-style: normal; + font-weight: 500; + line-height: 1.5rem; /* 150% */ +} + +.cLikes { + color: #920000; + text-align: center; + font-family: DM Sans; + font-size: 1rem; + font-style: normal; + font-weight: 500; + line-height: 1.5rem; /* 150% */ +} + +.cDate { + color: #8a8a8a; + text-align: center; + font-family: DM Sans; + font-size: 1rem; + font-style: normal; + font-weight: 500; + line-height: 1.5rem; /* 150% */ +} + +.cTitleHref { + color: #000; +} + +.cTitleHref:link { + text-decoration: none; +} + +.cTitleHref:visited { + text-decoration: none; +} + +.cTitleHref:hover { + text-decoration: underline; +} + +.cTitleHref:active { + text-decoration: underline; +} diff --git a/job1/src/Main/PrevArt.js b/job1/src/Main/PrevArt.js new file mode 100644 index 0000000..ab2c23b --- /dev/null +++ b/job1/src/Main/PrevArt.js @@ -0,0 +1,20 @@ +import "./PrevArt.css"; + +function PrevArt(props) { + return ( +
+
+ +

{props.title}

+ +
+

+ + {props.likes} +

+

{props.date}

+
+ ); +} + +export default PrevArt; diff --git a/job1/src/Main/PrevCont.js b/job1/src/Main/PrevCont.js new file mode 100644 index 0000000..4ff93d5 --- /dev/null +++ b/job1/src/Main/PrevCont.js @@ -0,0 +1,19 @@ +import PrevArt from "./PrevArt"; + +function PrevCont() { + return ( +
+ +
+ +
+ +
+ +
+ +
+ ); +} + +export default PrevCont; diff --git a/job1/src/Main/Preview.css b/job1/src/Main/Preview.css new file mode 100644 index 0000000..14b95d8 --- /dev/null +++ b/job1/src/Main/Preview.css @@ -0,0 +1,48 @@ +.bar { + display: flex; + justify-content: space-between; +} + +.cType { + display: flex; +} + +.hotCommu { + color: #8d8ba7; + text-align: center; + font-family: DM Sans; + font-size: 1rem; + font-style: normal; + font-weight: 700; + line-height: 1.5rem; /* 150% */ + + padding: 0 1rem; +} + +.newCommu { + color: #000; + text-align: center; + font-family: DM Sans; + font-size: 1rem; + font-style: normal; + font-weight: 700; + line-height: 1.5rem; /* 150% */ + + padding: 0 1rem; +} + +.cWriteBtn { + width: 5.5625rem; + height: 2.625rem; + flex-shrink: 0; + border-radius: 1.25rem; + background: #5d5a88; + + color: #fff; + text-align: center; + font-family: DM Sans; + font-size: 1rem; + font-style: normal; + font-weight: 700; + line-height: 1.5rem; /* 150% */ +} diff --git a/job1/src/Main/Preview.js b/job1/src/Main/Preview.js new file mode 100644 index 0000000..041e08f --- /dev/null +++ b/job1/src/Main/Preview.js @@ -0,0 +1,22 @@ +import PrevCont from "./PrevCont"; +import "./Preview.css"; + +function Preview() { + return ( +
+

게시판

+
+
+

HOT

+

NEW

+
+ +
+
+ +
+
+ ); +} + +export default Preview; diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..9a75d9a --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "Job1-Web", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} From 16111b80878a8e6f1df08cb1a7a2e8ceddce3673 Mon Sep 17 00:00:00 2001 From: J1 Date: Thu, 20 Jul 2023 11:13:27 +0900 Subject: [PATCH 2/6] =?UTF-8?q?[ADD]=20Preview=20Board=20=EA=B2=8C?= =?UTF-8?q?=EC=8B=9C=ED=8C=90=20=EC=9D=B4=EB=8F=99=20=ED=91=9C=EC=8B=9C=20?= =?UTF-8?q?(#7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- job1/src/Main/PrevArt.css | 58 ---------------------------------- job1/src/Main/PrevArt.js | 2 +- job1/src/Main/Preview.css | 66 +++++++++++++++++++++++++++++++++++++-- job1/src/Main/Preview.js | 23 ++++++++++++-- 4 files changed, 86 insertions(+), 63 deletions(-) delete mode 100644 job1/src/Main/PrevArt.css diff --git a/job1/src/Main/PrevArt.css b/job1/src/Main/PrevArt.css deleted file mode 100644 index 510c8f4..0000000 --- a/job1/src/Main/PrevArt.css +++ /dev/null @@ -1,58 +0,0 @@ -.cArticle { - display: flex; - justify-content: space-between; - - /*width: 54.3125rem; - height: 3rem; - flex-shrink: 0;*/ -} - -.cTitle { - color: #000; - text-align: center; - font-family: DM Sans; - font-size: 1rem; - font-style: normal; - font-weight: 500; - line-height: 1.5rem; /* 150% */ -} - -.cLikes { - color: #920000; - text-align: center; - font-family: DM Sans; - font-size: 1rem; - font-style: normal; - font-weight: 500; - line-height: 1.5rem; /* 150% */ -} - -.cDate { - color: #8a8a8a; - text-align: center; - font-family: DM Sans; - font-size: 1rem; - font-style: normal; - font-weight: 500; - line-height: 1.5rem; /* 150% */ -} - -.cTitleHref { - color: #000; -} - -.cTitleHref:link { - text-decoration: none; -} - -.cTitleHref:visited { - text-decoration: none; -} - -.cTitleHref:hover { - text-decoration: underline; -} - -.cTitleHref:active { - text-decoration: underline; -} diff --git a/job1/src/Main/PrevArt.js b/job1/src/Main/PrevArt.js index ab2c23b..62ef3c4 100644 --- a/job1/src/Main/PrevArt.js +++ b/job1/src/Main/PrevArt.js @@ -1,4 +1,4 @@ -import "./PrevArt.css"; +import "./Preview.css"; function PrevArt(props) { return ( diff --git a/job1/src/Main/Preview.css b/job1/src/Main/Preview.css index 14b95d8..780f532 100644 --- a/job1/src/Main/Preview.css +++ b/job1/src/Main/Preview.css @@ -7,7 +7,7 @@ display: flex; } -.hotCommu { +.selectedBtn { color: #8d8ba7; text-align: center; font-family: DM Sans; @@ -17,9 +17,10 @@ line-height: 1.5rem; /* 150% */ padding: 0 1rem; + text-decoration: none; } -.newCommu { +.Btn { color: #000; text-align: center; font-family: DM Sans; @@ -29,6 +30,7 @@ line-height: 1.5rem; /* 150% */ padding: 0 1rem; + text-decoration: none; } .cWriteBtn { @@ -46,3 +48,63 @@ font-weight: 700; line-height: 1.5rem; /* 150% */ } + +/* PrevArt */ +.cArticle { + display: flex; + justify-content: space-between; + + /*width: 54.3125rem; + height: 3rem; + flex-shrink: 0;*/ +} + +.cTitle { + color: #000; + text-align: center; + font-family: DM Sans; + font-size: 1rem; + font-style: normal; + font-weight: 500; + line-height: 1.5rem; /* 150% */ +} + +.cLikes { + color: #920000; + text-align: center; + font-family: DM Sans; + font-size: 1rem; + font-style: normal; + font-weight: 500; + line-height: 1.5rem; /* 150% */ +} + +.cDate { + color: #8a8a8a; + text-align: center; + font-family: DM Sans; + font-size: 1rem; + font-style: normal; + font-weight: 500; + line-height: 1.5rem; /* 150% */ +} + +.cTitleHref { + color: #000; +} + +.cTitleHref:link { + text-decoration: none; +} + +.cTitleHref:visited { + text-decoration: none; +} + +.cTitleHref:hover { + text-decoration: underline; +} + +.cTitleHref:active { + text-decoration: underline; +} diff --git a/job1/src/Main/Preview.js b/job1/src/Main/Preview.js index 041e08f..bdabbd5 100644 --- a/job1/src/Main/Preview.js +++ b/job1/src/Main/Preview.js @@ -1,14 +1,33 @@ import PrevCont from "./PrevCont"; +import { Link } from "react-router-dom"; import "./Preview.css"; +import { useState } from "react"; function Preview() { + const [section, setSection] = useState("hot"); return (

게시판

-

HOT

-

NEW

+ { + setSection("hot"); + }} + > + HOT + + { + setSection("new"); + }} + > + NEW +
From 99396e67fc4e57438b4cdc65aecfca38cab396c6 Mon Sep 17 00:00:00 2001 From: J1 Date: Thu, 20 Jul 2023 22:00:19 +0900 Subject: [PATCH 3/6] =?UTF-8?q?[FIX]=20Preview=20Board=20=ED=99=94?= =?UTF-8?q?=EB=A9=B4=20=EC=97=B0=EA=B2=B0=20=EC=88=98=EC=A0=95=20(#7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- job1/package-lock.json | 218 ++++++++++++++++++++++++++++++++++++++ job1/package.json | 1 + job1/src/App.js | 2 - job1/src/Main/PrevCont.js | 2 +- job1/src/Main/Preview.css | 31 +++++- job1/src/Main/Preview.js | 4 +- job1/src/View/Home.js | 16 +-- 7 files changed, 258 insertions(+), 16 deletions(-) diff --git a/job1/package-lock.json b/job1/package-lock.json index c1d81ac..e31333e 100644 --- a/job1/package-lock.json +++ b/job1/package-lock.json @@ -15,6 +15,7 @@ "react-dom": "^18.2.0", "react-router-dom": "^6.14.1", "react-scripts": "5.0.1", + "styled-components": "^6.0.4", "web-vitals": "^2.1.4" } }, @@ -54,6 +55,78 @@ "node": ">=6.0.0" } }, + "node_modules/@babel/cli": { + "version": "7.22.9", + "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.22.9.tgz", + "integrity": "sha512-nb2O7AThqRo7/E53EGiuAkMaRbb7J5Qp3RvN+dmua1U+kydm0oznkhqbTEG15yk26G/C3yL6OdZjzgl+DMXVVA==", + "dependencies": { + "@jridgewell/trace-mapping": "^0.3.17", + "commander": "^4.0.1", + "convert-source-map": "^1.1.0", + "fs-readdir-recursive": "^1.1.0", + "glob": "^7.2.0", + "make-dir": "^2.1.0", + "slash": "^2.0.0" + }, + "bin": { + "babel": "bin/babel.js", + "babel-external-helpers": "bin/babel-external-helpers.js" + }, + "engines": { + "node": ">=6.9.0" + }, + "optionalDependencies": { + "@nicolo-ribaudo/chokidar-2": "2.1.8-no-fsevents.3", + "chokidar": "^3.4.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/cli/node_modules/commander": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", + "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", + "engines": { + "node": ">= 6" + } + }, + "node_modules/@babel/cli/node_modules/make-dir": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz", + "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==", + "dependencies": { + "pify": "^4.0.1", + "semver": "^5.6.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@babel/cli/node_modules/pify": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", + "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", + "engines": { + "node": ">=6" + } + }, + "node_modules/@babel/cli/node_modules/semver": { + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz", + "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", + "bin": { + "semver": "bin/semver" + } + }, + "node_modules/@babel/cli/node_modules/slash": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz", + "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==", + "engines": { + "node": ">=6" + } + }, "node_modules/@babel/code-frame": { "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.5.tgz", @@ -597,6 +670,20 @@ "@babel/core": "^7.13.0" } }, + "node_modules/@babel/plugin-external-helpers": { + "version": "7.22.5", + "resolved": "https://registry.npmjs.org/@babel/plugin-external-helpers/-/plugin-external-helpers-7.22.5.tgz", + "integrity": "sha512-ngnNEWxmykPk82mH4ajZT0qTztr3Je6hrMuKAslZVM8G1YZTENJSYwrIGtt6KOtznug3exmAtF4so/nPqJuA4A==", + "dependencies": { + "@babel/helper-plugin-utils": "^7.22.5" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/plugin-proposal-class-properties": { "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz", @@ -660,6 +747,24 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/plugin-proposal-object-rest-spread": { + "version": "7.20.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz", + "integrity": "sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==", + "dependencies": { + "@babel/compat-data": "^7.20.5", + "@babel/helper-compilation-targets": "^7.20.7", + "@babel/helper-plugin-utils": "^7.20.2", + "@babel/plugin-syntax-object-rest-spread": "^7.8.3", + "@babel/plugin-transform-parameters": "^7.20.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/plugin-proposal-optional-chaining": { "version": "7.21.0", "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz", @@ -2349,6 +2454,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.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" + }, "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", @@ -3287,6 +3410,12 @@ "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz", "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==" }, + "node_modules/@nicolo-ribaudo/chokidar-2": { + "version": "2.1.8-no-fsevents.3", + "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz", + "integrity": "sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==", + "optional": true + }, "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": { "version": "5.1.1-v1", "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz", @@ -4185,6 +4314,11 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz", "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==" }, + "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.8", "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.8.tgz", @@ -5521,6 +5655,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", @@ -6025,6 +6167,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", @@ -6206,6 +6356,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", @@ -8132,6 +8292,11 @@ "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.4.tgz", "integrity": "sha512-INM/fWAxMICjttnD0DX1rBvinKskj5G1w+oy/pnm9u/tSlnBrzFonJMcalKJ30P8RRsPzKcCG7Q8l0jx5Fh9YQ==" }, + "node_modules/fs-readdir-recursive": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz", + "integrity": "sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA==" + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -14768,6 +14933,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", @@ -15170,6 +15340,49 @@ "webpack": "^5.0.0" } }, + "node_modules/styled-components": { + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.0.4.tgz", + "integrity": "sha512-lRJt4vg8hKJhlVG+VKz8QEqPCXKyTryZZ59odyK0UC0HHV3u/mshWTfSay8NpkN0Xijw1iN9r0Leld3dcCcp/w==", + "dependencies": { + "@babel/cli": "^7.21.0", + "@babel/core": "^7.21.0", + "@babel/helper-module-imports": "^7.18.6", + "@babel/plugin-external-helpers": "^7.18.6", + "@babel/plugin-proposal-class-properties": "^7.18.6", + "@babel/plugin-proposal-object-rest-spread": "^7.20.7", + "@babel/preset-env": "^7.20.2", + "@babel/preset-react": "^7.18.6", + "@babel/preset-typescript": "^7.21.0", + "@babel/traverse": "^7.21.2", + "@emotion/is-prop-valid": "^1.2.1", + "@emotion/unitless": "^0.8.0", + "@types/stylis": "^4.0.2", + "css-to-react-native": "^3.2.0", + "csstype": "^3.1.2", + "postcss": "^8.4.23", + "shallowequal": "^1.1.0", + "stylis": "^4.3.0", + "tslib": "^2.5.0" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "babel-plugin-styled-components": ">= 2", + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0" + }, + "peerDependenciesMeta": { + "babel-plugin-styled-components": { + "optional": true + } + } + }, "node_modules/stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", @@ -15185,6 +15398,11 @@ "postcss": "^8.2.15" } }, + "node_modules/stylis": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz", + "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==" + }, "node_modules/sucrase": { "version": "3.33.0", "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.33.0.tgz", diff --git a/job1/package.json b/job1/package.json index 97b3eff..5e14d41 100644 --- a/job1/package.json +++ b/job1/package.json @@ -10,6 +10,7 @@ "react-dom": "^18.2.0", "react-router-dom": "^6.14.1", "react-scripts": "5.0.1", + "styled-components": "^6.0.4", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/job1/src/App.js b/job1/src/App.js index 40066b3..ecb180e 100644 --- a/job1/src/App.js +++ b/job1/src/App.js @@ -5,7 +5,6 @@ import Home from "./View/Home"; import Laws from "./View/Laws"; import Board from "./View/Board"; import News from "./View/News"; -import Preview from "./Main/Preview"; function App() { return ( @@ -18,7 +17,6 @@ function App() { } /> } /> -
); diff --git a/job1/src/Main/PrevCont.js b/job1/src/Main/PrevCont.js index 4ff93d5..928bf8f 100644 --- a/job1/src/Main/PrevCont.js +++ b/job1/src/Main/PrevCont.js @@ -2,7 +2,7 @@ import PrevArt from "./PrevArt"; function PrevCont() { return ( -
+
diff --git a/job1/src/Main/Preview.css b/job1/src/Main/Preview.css index 780f532..dd48594 100644 --- a/job1/src/Main/Preview.css +++ b/job1/src/Main/Preview.css @@ -1,6 +1,20 @@ +.previewContainer { + width: 54.3125rem; +} + +.cHead { + color: #000; + font-family: DM Sans; + font-size: 1.5rem; + font-style: normal; + font-weight: 700; + line-height: 1.5rem; /* 100% */ +} + .bar { display: flex; justify-content: space-between; + height: 3rem; } .cType { @@ -52,11 +66,10 @@ /* PrevArt */ .cArticle { display: flex; - justify-content: space-between; - - /*width: 54.3125rem; + /* justify-content: space-between; */ + width: 54.3125rem; height: 3rem; - flex-shrink: 0;*/ + flex-shrink: 0; } .cTitle { @@ -67,6 +80,8 @@ font-style: normal; font-weight: 500; line-height: 1.5rem; /* 150% */ + + padding-left: 1.61rem; } .cLikes { @@ -77,6 +92,8 @@ font-style: normal; font-weight: 500; line-height: 1.5rem; /* 150% */ + + padding-left: 35rem; } .cDate { @@ -87,6 +104,8 @@ font-style: normal; font-weight: 500; line-height: 1.5rem; /* 150% */ + + padding-left: 10rem; } .cTitleHref { @@ -108,3 +127,7 @@ .cTitleHref:active { text-decoration: underline; } + +hr { + margin: 0 auto; +} diff --git a/job1/src/Main/Preview.js b/job1/src/Main/Preview.js index bdabbd5..4d70c4d 100644 --- a/job1/src/Main/Preview.js +++ b/job1/src/Main/Preview.js @@ -6,8 +6,8 @@ import { useState } from "react"; function Preview() { const [section, setSection] = useState("hot"); return ( -
-

게시판

+
+

게시판

- home -
- ) +function Home() { + return ( +
+ home + +
+ ); } -export default Home; \ No newline at end of file +export default Home; From 9d026533a0c06905ca3b383f668af5c0845db962 Mon Sep 17 00:00:00 2001 From: J1 Date: Fri, 21 Jul 2023 11:16:53 +0900 Subject: [PATCH 4/6] =?UTF-8?q?[ADD]=20Preview=20Board=20CSS=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20(#7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- job1/src/Main/PrevCont.js | 4 ++++ job1/src/Main/Preview.css | 1 + 2 files changed, 5 insertions(+) diff --git a/job1/src/Main/PrevCont.js b/job1/src/Main/PrevCont.js index 928bf8f..d77c675 100644 --- a/job1/src/Main/PrevCont.js +++ b/job1/src/Main/PrevCont.js @@ -12,6 +12,10 @@ function PrevCont() {
+
+ +
+
); } diff --git a/job1/src/Main/Preview.css b/job1/src/Main/Preview.css index dd48594..99363a6 100644 --- a/job1/src/Main/Preview.css +++ b/job1/src/Main/Preview.css @@ -1,5 +1,6 @@ .previewContainer { width: 54.3125rem; + margin: 0 auto; } .cHead { From a0f8dfd7f07a1561428f9a4a9ad3ad906b6d03d7 Mon Sep 17 00:00:00 2001 From: J1 Date: Fri, 21 Jul 2023 12:16:56 +0900 Subject: [PATCH 5/6] =?UTF-8?q?[ADD]=20Preview=20Board=20=ED=8F=B0?= =?UTF-8?q?=ED=8A=B8=20=EC=84=A4=EC=A0=95=20=EC=B6=94=EA=B0=80=20(#7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- job1/src/Main/PrevCont.js | 14 +++++++------- job1/src/Main/Preview.css | 28 +++++++++++++--------------- 2 files changed, 20 insertions(+), 22 deletions(-) diff --git a/job1/src/Main/PrevCont.js b/job1/src/Main/PrevCont.js index d77c675..3169762 100644 --- a/job1/src/Main/PrevCont.js +++ b/job1/src/Main/PrevCont.js @@ -3,19 +3,19 @@ import PrevArt from "./PrevArt"; function PrevCont() { return (
- +
- +
- +
- +
- +
- +
- +
); } diff --git a/job1/src/Main/Preview.css b/job1/src/Main/Preview.css index 99363a6..2be6350 100644 --- a/job1/src/Main/Preview.css +++ b/job1/src/Main/Preview.css @@ -1,15 +1,20 @@ +@import url("https://fonts.googleapis.com/css2?family=DM+Sans&family=Noto+Sans+KR:wght@500&family=Noto+Serif+KR&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=DM+Sans&family=Noto+Sans+KR:wght@500&family=Noto+Serif+KR&display=swap"); + .previewContainer { width: 54.3125rem; margin: 0 auto; + font-family: "DM Sans", "Noto Sans KR", sans-serif; } .cHead { color: #000; - font-family: DM Sans; font-size: 1.5rem; font-style: normal; font-weight: 700; - line-height: 1.5rem; /* 100% */ + line-height: 1.5rem; + + margin-bottom: 2rem; } .bar { @@ -25,11 +30,10 @@ .selectedBtn { color: #8d8ba7; text-align: center; - font-family: DM Sans; font-size: 1rem; font-style: normal; font-weight: 700; - line-height: 1.5rem; /* 150% */ + line-height: 1.5rem; padding: 0 1rem; text-decoration: none; @@ -38,11 +42,10 @@ .Btn { color: #000; text-align: center; - font-family: DM Sans; font-size: 1rem; font-style: normal; font-weight: 700; - line-height: 1.5rem; /* 150% */ + line-height: 1.5rem; padding: 0 1rem; text-decoration: none; @@ -57,17 +60,15 @@ color: #fff; text-align: center; - font-family: DM Sans; font-size: 1rem; font-style: normal; font-weight: 700; - line-height: 1.5rem; /* 150% */ + line-height: 1.5rem; } /* PrevArt */ .cArticle { display: flex; - /* justify-content: space-between; */ width: 54.3125rem; height: 3rem; flex-shrink: 0; @@ -76,11 +77,10 @@ .cTitle { color: #000; text-align: center; - font-family: DM Sans; font-size: 1rem; font-style: normal; font-weight: 500; - line-height: 1.5rem; /* 150% */ + line-height: 1.5rem; padding-left: 1.61rem; } @@ -88,11 +88,10 @@ .cLikes { color: #920000; text-align: center; - font-family: DM Sans; font-size: 1rem; font-style: normal; font-weight: 500; - line-height: 1.5rem; /* 150% */ + line-height: 1.5rem; padding-left: 35rem; } @@ -100,11 +99,10 @@ .cDate { color: #8a8a8a; text-align: center; - font-family: DM Sans; font-size: 1rem; font-style: normal; font-weight: 500; - line-height: 1.5rem; /* 150% */ + line-height: 1.5rem; padding-left: 10rem; } From a496e4a625b3ff473efa11b04efc0a2687e8c7cd Mon Sep 17 00:00:00 2001 From: J1 Date: Fri, 21 Jul 2023 12:30:36 +0900 Subject: [PATCH 6/6] =?UTF-8?q?[ADD]=20=EA=B8=80=EC=93=B0=EA=B8=B0=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=ED=99=94=EB=A9=B4=20=EC=9D=B4=EB=8F=99=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80=20(#7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- job1/src/App.js | 2 ++ job1/src/Main/Preview.js | 10 ++++++++-- job1/src/View/Write.js | 5 +++++ 3 files changed, 15 insertions(+), 2 deletions(-) create mode 100644 job1/src/View/Write.js diff --git a/job1/src/App.js b/job1/src/App.js index ecb180e..069f08e 100644 --- a/job1/src/App.js +++ b/job1/src/App.js @@ -5,6 +5,7 @@ import Home from "./View/Home"; import Laws from "./View/Laws"; import Board from "./View/Board"; import News from "./View/News"; +import Write from "./View/Write"; function App() { return ( @@ -16,6 +17,7 @@ function App() { } /> } /> } /> + } />
diff --git a/job1/src/Main/Preview.js b/job1/src/Main/Preview.js index 4d70c4d..60d5c47 100644 --- a/job1/src/Main/Preview.js +++ b/job1/src/Main/Preview.js @@ -1,10 +1,14 @@ import PrevCont from "./PrevCont"; -import { Link } from "react-router-dom"; +import { Link, useNavigate } from "react-router-dom"; import "./Preview.css"; import { useState } from "react"; function Preview() { const [section, setSection] = useState("hot"); + const navigate = useNavigate(); + const navigateToWrite = () => { + navigate("./write"); + }; return (

게시판

@@ -29,7 +33,9 @@ function Preview() { NEW
- +
diff --git a/job1/src/View/Write.js b/job1/src/View/Write.js new file mode 100644 index 0000000..7b8e72a --- /dev/null +++ b/job1/src/View/Write.js @@ -0,0 +1,5 @@ +function Write() { + return
Write
; +} + +export default Write;