From b2db54b00eaf05267fa6fdb6159cdfd52e2a6329 Mon Sep 17 00:00:00 2001 From: limyira <102654496+limyira@users.noreply.github.com> Date: Tue, 31 Jan 2023 15:29:11 +0900 Subject: [PATCH] Create post (#31) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * formstate err * #19 feat: 로그인 유효성검증 * feat:login-style-prototype * feat:login-style-prototype * test(#19) * feat:19-login-style2(#19) * feat:19-login-style3(#19) * feat/19-login-style(3) * feat:19-post * feat:25-createPost(#25) * feat:25-createPost-style(#25) * feat:25-createPost-style(#25) * feat:25-createPost(#25) * feat:25-styled-components(#25) * feat:25-Error-fixed(#25) * feat:25-loginData(#25) * feat:25-api연동(#25) * feat:25-gitpull(#25) --- .gitignore | 23 ++ app/package-lock.json | 216 ++++++++++++++-- app/package.json | 1 + app/src/App.js | 6 +- app/src/components/Nav/style.module.css | 75 ++++++ app/src/context/test.js | 2 + app/src/index.js | 33 +-- app/src/pages/Login/Form/index.jsx | 1 - .../Main/Location/Address/style.module.css | 4 + app/src/pages/Main/Location/style.module.css | 82 ++++++ app/src/pages/Main/Post/Modify/index.jsx | 1 - app/src/pages/Main/Post/style.module.css | 241 ++++++++++++++++++ app/src/pages/Main/index.jsx | 4 +- app/src/pages/Main/style.module.css | 97 +++++++ app/src/pages/SignUp/Form/style.module.css | 53 ++++ app/src/pages/SignUp/style.module.css | 36 +++ app/src/pages/Upload/Form/index.jsx | 70 +++++ app/src/pages/Upload/Form/style.module.css | 61 +++++ app/src/pages/Upload/index.jsx | 26 ++ app/src/pages/Upload/item/GridItem.jsx | 64 +++++ app/src/pages/Upload/item/style.module.css | 53 ++++ app/src/pages/Upload/style.module.css | 25 ++ app/src/utils/cookie.js | 14 + app/src/utils/token.js | 60 +++++ node_modules/.package-lock.json | 119 +++++++++ package-lock.json | 226 ++++++++++++++++ package.json | 5 + 27 files changed, 1560 insertions(+), 38 deletions(-) create mode 100644 .gitignore create mode 100644 app/src/pages/Upload/Form/index.jsx create mode 100644 app/src/pages/Upload/Form/style.module.css create mode 100644 app/src/pages/Upload/index.jsx create mode 100644 app/src/pages/Upload/item/GridItem.jsx create mode 100644 app/src/pages/Upload/item/style.module.css create mode 100644 app/src/pages/Upload/style.module.css create mode 100644 app/src/utils/cookie.js create mode 100644 app/src/utils/token.js create mode 100644 node_modules/.package-lock.json create mode 100644 package-lock.json create mode 100644 package.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..24cdedf --- /dev/null +++ b/.gitignore @@ -0,0 +1,23 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* \ No newline at end of file diff --git a/app/package-lock.json b/app/package-lock.json index 3442850..5a91eb9 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -18,6 +18,7 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "axios": "^1.1.3", + "framer-motion": "^8.5.0", "prop-types": "^15.8.1", "react": "^18.2.0", "react-cookie": "^4.1.1", @@ -2193,6 +2194,21 @@ "postcss-selector-parser": "^6.0.10" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "optional": true, + "dependencies": { + "@emotion/memoize": "0.7.4" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "optional": true + }, "node_modules/@eslint/eslintrc": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.1.tgz", @@ -3164,6 +3180,64 @@ "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz", "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==" }, + "node_modules/@motionone/animation": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.15.1.tgz", + "integrity": "sha512-mZcJxLjHor+bhcPuIFErMDNyrdb2vJur8lSfMCsuCB4UyV8ILZLvK+t+pg56erv8ud9xQGK/1OGPt10agPrCyQ==", + "dependencies": { + "@motionone/easing": "^10.15.1", + "@motionone/types": "^10.15.1", + "@motionone/utils": "^10.15.1", + "tslib": "^2.3.1" + } + }, + "node_modules/@motionone/dom": { + "version": "10.15.5", + "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.15.5.tgz", + "integrity": "sha512-Xc5avlgyh3xukU9tydh9+8mB8+2zAq+WlLsC3eEIp7Ax7DnXgY7Bj/iv0a4X2R9z9ZFZiaXK3BO0xMYHKbAAdA==", + "dependencies": { + "@motionone/animation": "^10.15.1", + "@motionone/generators": "^10.15.1", + "@motionone/types": "^10.15.1", + "@motionone/utils": "^10.15.1", + "hey-listen": "^1.0.8", + "tslib": "^2.3.1" + } + }, + "node_modules/@motionone/easing": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.15.1.tgz", + "integrity": "sha512-6hIHBSV+ZVehf9dcKZLT7p5PEKHGhDwky2k8RKkmOvUoYP3S+dXsKupyZpqx5apjd9f+php4vXk4LuS+ADsrWw==", + "dependencies": { + "@motionone/utils": "^10.15.1", + "tslib": "^2.3.1" + } + }, + "node_modules/@motionone/generators": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.15.1.tgz", + "integrity": "sha512-67HLsvHJbw6cIbLA/o+gsm7h+6D4Sn7AUrB/GPxvujse1cGZ38F5H7DzoH7PhX+sjvtDnt2IhFYF2Zp1QTMKWQ==", + "dependencies": { + "@motionone/types": "^10.15.1", + "@motionone/utils": "^10.15.1", + "tslib": "^2.3.1" + } + }, + "node_modules/@motionone/types": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.15.1.tgz", + "integrity": "sha512-iIUd/EgUsRZGrvW0jqdst8st7zKTzS9EsKkP+6c6n4MPZoQHwiHuVtTQLD6Kp0bsBLhNzKIBlHXponn/SDT4hA==" + }, + "node_modules/@motionone/utils": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.15.1.tgz", + "integrity": "sha512-p0YncgU+iklvYr/Dq4NobTRdAPv9PveRDUXabPEeOjBLSO/1FNB2phNTZxOxpi1/GZwYpAoECEa0Wam+nsmhSw==", + "dependencies": { + "@motionone/types": "^10.15.1", + "hey-listen": "^1.0.8", + "tslib": "^2.3.1" + } + }, "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", @@ -8227,6 +8301,23 @@ "url": "https://www.patreon.com/infusion" } }, + "node_modules/framer-motion": { + "version": "8.5.0", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-8.5.0.tgz", + "integrity": "sha512-z5hQvIa+9uFcA2aFmT+6XsUfuVPl9Y1uhs5yntxU1Q0E6hm4wDRpvFlB/yYN/cdfXUctf/1Q1Rep/dqOipz8sg==", + "dependencies": { + "@motionone/dom": "^10.15.3", + "hey-listen": "^1.0.8", + "tslib": "^2.4.0" + }, + "optionalDependencies": { + "@emotion/is-prop-valid": "^0.8.2" + }, + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + } + }, "node_modules/fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", @@ -8258,19 +8349,6 @@ "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" }, - "node_modules/fsevents": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", - "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - "hasInstallScript": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^8.16.0 || ^10.6.0 || >=11.0.0" - } - }, "node_modules/function-bind": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", @@ -8613,6 +8691,11 @@ "he": "bin/he" } }, + "node_modules/hey-listen": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz", + "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==" + }, "node_modules/hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -14176,9 +14259,15 @@ "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, "node_modules/react-hook-form": { +<<<<<<< HEAD + "version": "7.41.5", + "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.41.5.tgz", + "integrity": "sha512-DAKjSJ7X9f16oQrP3TW2/eD9N6HOgrmIahP4LOdFphEWVfGZ2LulFd6f6AQ/YS/0cx/5oc4j8a1PXxuaurWp/Q==", +======= "version": "7.43.0", "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.43.0.tgz", "integrity": "sha512-/rVEz7T0gLdSFwPqutJ1kn2e0sQNyb9ci/hmwEYr2YG0KF/LSuRLvNrf9QWJM+gj88CjDpDW5Bh/1AD7B2+z9Q==", +>>>>>>> 90d162a6bad55ca2549583c22fcc668cc0fba327 "engines": { "node": ">=12.22.0" }, @@ -18654,6 +18743,21 @@ "integrity": "sha512-jwx+WCqszn53YHOfvFMJJRd/B2GqkCBt+1MJSG6o5/s8+ytHMvDZXsJgUEWLk12UnLd7HYKac4BYU5i/Ron1Cw==", "requires": {} }, + "@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "optional": true, + "requires": { + "@emotion/memoize": "0.7.4" + } + }, + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "optional": true + }, "@eslint/eslintrc": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.1.tgz", @@ -19435,6 +19539,64 @@ "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz", "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==" }, + "@motionone/animation": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.15.1.tgz", + "integrity": "sha512-mZcJxLjHor+bhcPuIFErMDNyrdb2vJur8lSfMCsuCB4UyV8ILZLvK+t+pg56erv8ud9xQGK/1OGPt10agPrCyQ==", + "requires": { + "@motionone/easing": "^10.15.1", + "@motionone/types": "^10.15.1", + "@motionone/utils": "^10.15.1", + "tslib": "^2.3.1" + } + }, + "@motionone/dom": { + "version": "10.15.5", + "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.15.5.tgz", + "integrity": "sha512-Xc5avlgyh3xukU9tydh9+8mB8+2zAq+WlLsC3eEIp7Ax7DnXgY7Bj/iv0a4X2R9z9ZFZiaXK3BO0xMYHKbAAdA==", + "requires": { + "@motionone/animation": "^10.15.1", + "@motionone/generators": "^10.15.1", + "@motionone/types": "^10.15.1", + "@motionone/utils": "^10.15.1", + "hey-listen": "^1.0.8", + "tslib": "^2.3.1" + } + }, + "@motionone/easing": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.15.1.tgz", + "integrity": "sha512-6hIHBSV+ZVehf9dcKZLT7p5PEKHGhDwky2k8RKkmOvUoYP3S+dXsKupyZpqx5apjd9f+php4vXk4LuS+ADsrWw==", + "requires": { + "@motionone/utils": "^10.15.1", + "tslib": "^2.3.1" + } + }, + "@motionone/generators": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.15.1.tgz", + "integrity": "sha512-67HLsvHJbw6cIbLA/o+gsm7h+6D4Sn7AUrB/GPxvujse1cGZ38F5H7DzoH7PhX+sjvtDnt2IhFYF2Zp1QTMKWQ==", + "requires": { + "@motionone/types": "^10.15.1", + "@motionone/utils": "^10.15.1", + "tslib": "^2.3.1" + } + }, + "@motionone/types": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.15.1.tgz", + "integrity": "sha512-iIUd/EgUsRZGrvW0jqdst8st7zKTzS9EsKkP+6c6n4MPZoQHwiHuVtTQLD6Kp0bsBLhNzKIBlHXponn/SDT4hA==" + }, + "@motionone/utils": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.15.1.tgz", + "integrity": "sha512-p0YncgU+iklvYr/Dq4NobTRdAPv9PveRDUXabPEeOjBLSO/1FNB2phNTZxOxpi1/GZwYpAoECEa0Wam+nsmhSw==", + "requires": { + "@motionone/types": "^10.15.1", + "hey-listen": "^1.0.8", + "tslib": "^2.3.1" + } + }, "@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", @@ -23164,6 +23326,17 @@ "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz", "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==" }, + "framer-motion": { + "version": "8.5.0", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-8.5.0.tgz", + "integrity": "sha512-z5hQvIa+9uFcA2aFmT+6XsUfuVPl9Y1uhs5yntxU1Q0E6hm4wDRpvFlB/yYN/cdfXUctf/1Q1Rep/dqOipz8sg==", + "requires": { + "@emotion/is-prop-valid": "^0.8.2", + "@motionone/dom": "^10.15.3", + "hey-listen": "^1.0.8", + "tslib": "^2.4.0" + } + }, "fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", @@ -23189,12 +23362,6 @@ "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" }, - "fsevents": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", - "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - "optional": true - }, "function-bind": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", @@ -23428,6 +23595,11 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" }, + "hey-listen": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz", + "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==" + }, "hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -27416,9 +27588,15 @@ "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, "react-hook-form": { +<<<<<<< HEAD + "version": "7.41.5", + "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.41.5.tgz", + "integrity": "sha512-DAKjSJ7X9f16oQrP3TW2/eD9N6HOgrmIahP4LOdFphEWVfGZ2LulFd6f6AQ/YS/0cx/5oc4j8a1PXxuaurWp/Q==", +======= "version": "7.43.0", "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.43.0.tgz", "integrity": "sha512-/rVEz7T0gLdSFwPqutJ1kn2e0sQNyb9ci/hmwEYr2YG0KF/LSuRLvNrf9QWJM+gj88CjDpDW5Bh/1AD7B2+z9Q==", +>>>>>>> 90d162a6bad55ca2549583c22fcc668cc0fba327 "requires": {} }, "react-intersection-observer": { diff --git a/app/package.json b/app/package.json index 8b5c11f..9eac936 100644 --- a/app/package.json +++ b/app/package.json @@ -13,6 +13,7 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "axios": "^1.1.3", + "framer-motion": "^8.5.0", "prop-types": "^15.8.1", "react": "^18.2.0", "react-cookie": "^4.1.1", diff --git a/app/src/App.js b/app/src/App.js index afbdcdd..f316390 100644 --- a/app/src/App.js +++ b/app/src/App.js @@ -5,6 +5,10 @@ import './App.css'; import { Main, SignUp, Post } from './pages/index'; import { PATH } from './constants/path'; import Login from './pages/Login'; +<<<<<<< HEAD +import CreatePost from './pages/Upload'; +======= +>>>>>>> 90d162a6bad55ca2549583c22fcc668cc0fba327 /* prop 타입체크 */ // import PropTypes from 'prop-types'; @@ -24,6 +28,7 @@ function App() { }> }> }> + }> ); @@ -34,5 +39,4 @@ Index.propTypes = { prop이름: PropTypes.array, }; */ - export default App; diff --git a/app/src/components/Nav/style.module.css b/app/src/components/Nav/style.module.css index d09a8aa..2e8a0c8 100644 --- a/app/src/components/Nav/style.module.css +++ b/app/src/components/Nav/style.module.css @@ -1,3 +1,77 @@ +<<<<<<< HEAD +.nav { + width: 100%; + height: 60px; + background: #eff2f4; + position: fixed; + top: 0; + left: 0; + z-index: 9000; +} +.container { + max-width: 1440px; + height: 100%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20px; + box-sizing: border-box; + margin: 0 auto; +} + +/* 로고 */ +.logo { + width: 49px; + height: 54px; + cursor: pointer; +} +.logo img { + width: 100%; + height: 100%; + object-fit: cover; +} + +@media (max-width: 767px) { + .container { + padding: 0 10px; + } + .nav { + width: 100%; + height: 60px; + background: #eff2f4; + position: fixed; + top: 0; + left: 0; + z-index: 9000; + } + .container { + max-width: 1440px; + height: 100%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20px; + box-sizing: border-box; + margin: 0 auto; + } +} +/* 로고 */ +.logo { + width: 49px; + height: 54px; + cursor: pointer; +} +.logo img { + width: 100%; + height: 100%; + object-fit: cover; +} + +@media (max-width: 767px) { + .container { + padding: 0 10px; + } +======= .nav {width: 100%;height: 60px;background: #eff2f4;position: fixed;top: 0;left: 0;z-index: 9000;} .container {max-width: 1440px;height: 100%;display: flex;justify-content: space-between;align-items: center;padding: 0 20px;box-sizing: border-box;margin: 0 auto;} @@ -15,4 +89,5 @@ @media (max-width: 767px) { .container {padding: 0 10px;} +>>>>>>> 90d162a6bad55ca2549583c22fcc668cc0fba327 } diff --git a/app/src/context/test.js b/app/src/context/test.js index 025c7c7..aa74b21 100644 --- a/app/src/context/test.js +++ b/app/src/context/test.js @@ -1,3 +1,5 @@ import { createContext } from 'react'; export const test = createContext(null); + +export const ResultContext = createContext([]); diff --git a/app/src/index.js b/app/src/index.js index f7678d2..804b625 100644 --- a/app/src/index.js +++ b/app/src/index.js @@ -1,21 +1,24 @@ -import React from "react"; -import ReactDOM from "react-dom/client"; -import "./index.css"; -import App from "./App"; -import reportWebVitals from "./reportWebVitals"; -import { BrowserRouter } from "react-router-dom"; -import { Provider } from "react-redux"; -import store from "./store"; +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import App from './App'; +import reportWebVitals from './reportWebVitals'; +import { BrowserRouter } from 'react-router-dom'; +import { Provider } from 'react-redux'; +import store from './store'; +import { CookiesProvider } from 'react-cookie'; -const root = ReactDOM.createRoot(document.getElementById("root")); +const root = ReactDOM.createRoot(document.getElementById('root')); root.render( - - - - - - + + + + + + + + , ); reportWebVitals(); diff --git a/app/src/pages/Login/Form/index.jsx b/app/src/pages/Login/Form/index.jsx index a08eb9c..ef125d1 100644 --- a/app/src/pages/Login/Form/index.jsx +++ b/app/src/pages/Login/Form/index.jsx @@ -28,7 +28,6 @@ const Form = () => { }; // form 안에 input, error 등이 변할경우 useEffect 실행. useEffect(() => {}, [formState]); - return ( <>
diff --git a/app/src/pages/Main/Location/Address/style.module.css b/app/src/pages/Main/Location/Address/style.module.css index 1b4753f..fb06ee6 100644 --- a/app/src/pages/Main/Location/Address/style.module.css +++ b/app/src/pages/Main/Location/Address/style.module.css @@ -1,4 +1,8 @@ +<<<<<<< HEAD +.address_wrap{width: 640px;min-height: 300px; max-height: 500px; overflow-y: auto; display: flex; flex-direction: column; padding: 20px; box-sizing: border-box; position: fixed; top: 90px; left: 50%; transform: translateX(-50%); background: #fff; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;} +======= .address_wrap{width: 640px;min-height: 300px; max-height: 500px; border-radius: 10px; overflow-y: auto; display: flex; flex-direction: column; padding: 20px; box-sizing: border-box; position: fixed; top: 90px; left: 50%; z-index: 9999; transform: translateX(-50%); background: #fff; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;} +>>>>>>> 478e21e1a72341f1477fd1c9bcbf0e7b24cd9a79 .form{} .form .address_search{display: flex;align-items: center;} diff --git a/app/src/pages/Main/Location/style.module.css b/app/src/pages/Main/Location/style.module.css index 019b9d4..64bfff2 100644 --- a/app/src/pages/Main/Location/style.module.css +++ b/app/src/pages/Main/Location/style.module.css @@ -1,3 +1,84 @@ +<<<<<<< HEAD +.location { + width: 140px; + height: 40px; + border-radius: 20px; + background: #eff2f4; + cursor: pointer; +} +.location ul { + height: 100%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20px; + box-sizing: border-box; +} +.location ul li { + font-size: 16px; +} +.location ul li em { +} +.location ul li .icon { +} + +.add_location { + width: 120px; + height: 40px; + border-radius: 20px; + background: #eff2f4; + cursor: pointer; +} +.wrap { + display: inline-block; +} + +.location { + width: 140px; + height: 40px; + border-radius: 20px; + background: #eff2f4; + cursor: pointer; +} +.location ul { + height: 100%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20px; + box-sizing: border-box; +} +.location ul li { + font-size: 16px; +} +.location ul li em { +} +.location ul li .icon { +} + +.add_location { + width: 120px; + height: 40px; + border-radius: 20px; + background: #eff2f4; + cursor: pointer; +} +.add_location ul { + height: 100%; + display: flex; + justify-content: center; + align-items: center; + box-sizing: border-box; +} +.add_location ul li { + font-size: 16px; +} +.add_location ul li em { +} +.add_location ul li .icon { + margin-right: 5px; +} +======= .location {width: 140px;height: 40px;border-radius: 20px;background: #eff2f4;cursor: pointer;} .location ul {height: 100%;display: flex;justify-content: space-between;align-items: center;padding: 0 20px;box-sizing: border-box;} .location ul li {font-size: 16px;} @@ -18,3 +99,4 @@ .add_location ul li {font-size: 16px;} .add_location ul li em {} .add_location ul li .icon {margin-right: 5px;} +>>>>>>> 90d162a6bad55ca2549583c22fcc668cc0fba327 diff --git a/app/src/pages/Main/Post/Modify/index.jsx b/app/src/pages/Main/Post/Modify/index.jsx index d372dc0..e3e4de6 100644 --- a/app/src/pages/Main/Post/Modify/index.jsx +++ b/app/src/pages/Main/Post/Modify/index.jsx @@ -10,7 +10,6 @@ const Index = ({ item }) => { const [modifyPopUp, setModifyPopUp] = useState(); //아이템의 id값이 들어옴 const modify = useRef(); const close = usePopupClose(modify); - /* 영역외 클릭시 팝업창 닫기 */ useEffect(() => { setModifyPopUp(close); diff --git a/app/src/pages/Main/Post/style.module.css b/app/src/pages/Main/Post/style.module.css index 587cc0e..0a1bdb5 100644 --- a/app/src/pages/Main/Post/style.module.css +++ b/app/src/pages/Main/Post/style.module.css @@ -1,3 +1,243 @@ +<<<<<<< HEAD +.post_wrap { + margin-top: 10px; +} +.post_wrap > ul { + display: grid; + grid-template-columns: repeat(4, minmax(335px, auto)); + grid-gap: 20px; +} +.post_wrap > ul > li { + width: 100%; +} + +.post { + width: 100%; + height: 440px; + background: #fff; + border-radius: 10px; + box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; +} + +/* 게시글 상단 정보 */ +.info { + height: 60px; + padding: 10px; + display: flex; + justify-content: space-between; + align-items: center; + box-sizing: border-box; +} +.info .user_img { + width: 40px; + height: 40px; + border-radius: 50%; + background: #555; +} +.info .user_img img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.info .user_info { + display: flex; +} +.post { + width: 100%; + height: 100%; + background: #fff; + border-radius: 10px; + box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; +} + +/* 게시글 상단 정보 */ +.info { + height: 60px; + padding: 10px; + display: flex; + justify-content: space-between; + align-items: center; + box-sizing: border-box; + position: relative; +} +.info .user_img { + width: 40px; + height: 40px; + border-radius: 50%; + background: #555; +} +.info .user_img img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.info .user_info { + display: flex; +} +.info .user_info .user { + margin-left: 10px; +} +.info .user_info .user .user_name { +} +.info .user_info .user .user_name h4 { + font-size: 16px; + color: #222; +} +.info .user_info .user .user_address { +} +.info .user_info .user .user_address ul { + display: flex; +} +.info .user_info .user .user_address ul li { + margin-right: 20px; + position: relative; +} +.info .user_info .user .user_address ul li:last-child { + margin-right: 0; +} +.info .user_info .user .user_address ul li::before { + content: ''; + width: 1px; + height: 10px; + background: #555; + position: absolute; + top: 50%; + right: -10px; + transform: translateY(-50%); +} +.info .user_info .user .user_address ul li:last-child:before { + display: none; +} +.info .user_info .user .user_address ul li:first-child em { + margin-left: 5px; +} + +.modify { + width: 30px; + height: 30px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + font-size: 20px; + cursor: pointer; +} + +/* 게시글 이미지 , 텍스트 전체 영역 */ +.text_wrap { + cursor: pointer; +} + +/* 게시글 이미지 */ +.post .img { + width: 100%; + height: 140px; + background: #555; +} +.post .img img { + width: 100%; + height: 100%; + object-fit: cover; +} + +/* 게시글 텍스트 */ +.post .text { + width: 100%; + height: 160px; + padding: 10px; + box-sizing: border-box; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 6; + -webkit-box-orient: vertical; +} +.post .text p { + font-size: 16px; + font-weight: 300; + line-height: 25px; +} + +/* 게시글 아이콘 */ +.post .sns { + width: 100%; + height: 40px; + border-top: 1px solid #eeeeee; + border-bottom: 1px solid #eeeeee; + box-sizing: border-box; +} +.post .sns ul { + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.post .sns ul li { + margin-right: 30px; + cursor: pointer; +} +.post .sns ul li:last-child { + margin-right: 0; +} +.post .sns ul li em { + font-size: 12px; + margin-left: 5px; +} +.post .sns ul li .icon { + font-size: 26px; +} + +/* 카테고리 */ +.post .category { + width: 100%; + height: 40px; + padding: 0 10px; + box-sizing: border-box; +} +.post .category ul { + height: 100%; + display: flex; + align-items: center; +} +.post .category ul li { + height: 24px; + padding: 0 8px; + box-sizing: border-box; + background: #e5edfe; + border-radius: 20px; +} +.post .category ul li em { + font-size: 12px; + color: #2e8efe; + font-weight: 300; +} + +@media (max-width: 1460px) { + .post_wrap > ul { + grid-template-columns: repeat(3, minmax(335px, auto)); + } +} + +@media (max-width: 1100px) { + .post_wrap > ul { + grid-template-columns: repeat(2, minmax(335px, auto)); + } +} + +@media (max-width: 740px) { + .post_wrap > ul { + grid-template-columns: repeat(1, minmax(335px, auto)); + } +} + +@media (max-width: 390px) { + .post_wrap > ul { + grid-template-columns: repeat(1, minmax(305px, auto)); + } +} +======= .post_wrap {margin-top: 10px;} .post_wrap > ul {display: grid;grid-template-columns: repeat(4, minmax(335px, auto));grid-gap: 20px;} .post_wrap > ul > li {width: 100%;} @@ -79,3 +319,4 @@ grid-template-columns: repeat(1, minmax(305px, auto)); } } +>>>>>>> 90d162a6bad55ca2549583c22fcc668cc0fba327 diff --git a/app/src/pages/Main/index.jsx b/app/src/pages/Main/index.jsx index fba31d8..4b39b99 100644 --- a/app/src/pages/Main/index.jsx +++ b/app/src/pages/Main/index.jsx @@ -5,8 +5,10 @@ import Location from './Location'; import Post from './Post'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faPlus } from '@fortawesome/free-solid-svg-icons'; +import { useNavigate } from 'react-router'; export const Main = () => { + const nav = useNavigate(); return ( <> @@ -36,7 +38,7 @@ export const Main = () => {
diff --git a/app/src/pages/Main/style.module.css b/app/src/pages/Main/style.module.css index 0364aee..3afdfd4 100644 --- a/app/src/pages/Main/style.module.css +++ b/app/src/pages/Main/style.module.css @@ -1,3 +1,99 @@ +<<<<<<< HEAD +.section { + padding-top: 60px; + min-height: 100vh; + box-sizing: border-box; + background: #f8f9fa; +} +.container { + max-width: 1440px; + margin: 0 auto; + padding: 30px 20px; + box-sizing: border-box; +} + +/* 상단 네비,글쓰기 */ +.top_nav { + margin-top: 30px; + display: flex; + justify-content: space-between; +} + +/* 카테고리 */ +.category { +} +.category ul { + display: grid; + flex-wrap: wrap; + grid-template-columns: repeat(5, minmax(auto, auto)); + grid-gap: 0 10px; +} +.category ul li { + width: 100%; + height: 40px; + padding: 0 20px; + text-align: center; + line-height: 40px; + box-sizing: border-box; + background: #e5edfe; + cursor: pointer; + border-radius: 30px; +} +.category ul li:last-child { + margin-right: 0; +} +.category ul li em { + color: #2d8efe; +} + +/* 글쓰기 */ +.writing { +} +.writing .btn { + width: 100px; + height: 40px; + border-radius: 20px; + background: linear-gradient(90deg, #6e8efb, #6253e1); + color: #fff; + cursor: pointer; +} +.writing .btn em { + font-weight: 600; + font-size: 16px; +} +.writing .btn .icon { + margin-right: 5px; + font-size: 16px; +} + +@media (max-width: 767px) { + .container { + padding: 30px 10px; + } + .top_nav { + flex-direction: column; + } + .writing { + margin-top: 10px; + align-self: flex-end; + } +} + +@media (max-width: 500px) { + .category ul { + grid-gap: 0 5px; + } + .category ul li { + padding: 0 10px; + border-radius: 5px; + } +} + +@media (max-width: 380px) { + .category ul li { + padding: 0 5px; + } +======= .section {padding-top: 60px;min-height: 100vh;box-sizing: border-box;background: #f8f9fa;} .container {max-width: 1440px;margin: 0 auto;padding: 30px 20px;box-sizing: border-box;} @@ -44,4 +140,5 @@ @media (max-width: 410px) { .category ul li {padding: 0 5px;} .category ul li em{font-size: 13px;} +>>>>>>> 90d162a6bad55ca2549583c22fcc668cc0fba327 } diff --git a/app/src/pages/SignUp/Form/style.module.css b/app/src/pages/SignUp/Form/style.module.css index 65c0a8d..9641be2 100644 --- a/app/src/pages/SignUp/Form/style.module.css +++ b/app/src/pages/SignUp/Form/style.module.css @@ -1,3 +1,55 @@ +<<<<<<< HEAD +.join_form { +} +.join_form .join_input_box { + margin-bottom: 10px; +} +.join_form .join_input_box input { + width: 340px; + height: 50px; + border: 1px solid #65759a; + border-radius: 5px; + padding: 0 10px; + box-sizing: border-box; +} + +.join_form .password { + display: flex; + flex-direction: column; +} +.join_form .password input:nth-child(2) { + margin-top: -1px; +} + +/* 경고 text */ +.warning { + display: flex; + align-items: center; + color: red; +} +.warning p { + margin-left: 5px; +} + +/* 가입 완료 버튼 */ +.join_form button { + width: 100%; + height: 50px; + color: #fff; + font-size: 16px; + font-weight: 700; + border-radius: 5px; + margin-top: 20px; + cursor: pointer; +} +.join_form button.join_btt1 { + background: #1f8ce6; +} +.join_form button.join_btt2 { + background: #abd5f7; + cursor: default; +} +======= .join_form {} .join_form .join_input_box {margin-bottom: 10px;} .join_form .join_input_box input {width: 340px;height: 50px;border: 1px solid #65759a;border-radius: 5px;padding: 0 10px;box-sizing: border-box;} @@ -13,3 +65,4 @@ .join_form button {width: 100%;height: 50px;color: #fff;font-size: 16px;font-weight: 700;border-radius: 5px;margin-top: 20px;cursor: pointer;} .join_form button.join_btt1 {background: #1f8ce6;} .join_form button.join_btt2 {background: #abd5f7;cursor: default;} +>>>>>>> 90d162a6bad55ca2549583c22fcc668cc0fba327 diff --git a/app/src/pages/SignUp/style.module.css b/app/src/pages/SignUp/style.module.css index 0be15cf..bde3e97 100644 --- a/app/src/pages/SignUp/style.module.css +++ b/app/src/pages/SignUp/style.module.css @@ -1,5 +1,41 @@ +<<<<<<< HEAD +.section { + width: 100%; + height: 100vh; + padding: 70px 0; + box-sizing: border-box; + background: #e4ebf6; + display: flex; + justify-content: center; + align-items: center; +} + +/* 네비 */ +.join_nav { + width: 100%; + height: 50px; + background: #e4ebf6; + border-bottom: 1px solid #ccc; + position: fixed; + top: 0; + left: 0; + z-index: 9999; + display: flex; + justify-content: center; + align-items: center; +} +.join_nav em { + font-size: 20px; + font-weight: bold; + color: #1e9eff; + text-transform: uppercase; + cursor: pointer; + letter-spacing: -0.04em; +} +======= .section {width: 100%;height: 100vh;padding: 70px 0;box-sizing: border-box;background: #e4ebf6;display: flex;justify-content: center;align-items: center;} /* 네비 */ .join_nav {width: 100%;height: 50px;background: #e4ebf6;border-bottom: 1px solid #ccc;position: fixed;top: 0;left: 0;z-index: 9999;display: flex;justify-content: center;align-items: center;} .join_nav em {font-size: 20px;font-weight: bold;color: #1e9eff;text-transform: uppercase;cursor: pointer;letter-spacing: -0.04em;} +>>>>>>> 90d162a6bad55ca2549583c22fcc668cc0fba327 diff --git a/app/src/pages/Upload/Form/index.jsx b/app/src/pages/Upload/Form/index.jsx new file mode 100644 index 0000000..c2fe56e --- /dev/null +++ b/app/src/pages/Upload/Form/index.jsx @@ -0,0 +1,70 @@ +import React from 'react'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faCamera } from '@fortawesome/free-solid-svg-icons'; +import styles from './style.module.css'; +import { useForm } from 'react-hook-form'; +import PropTypes from 'prop-types'; +import axios from '../../../utils/token'; +import { useNavigate } from 'react-router-dom'; + +const Form = ({ image, setImage, count, setCount }) => { + const { register, getValues } = useForm(); + const nav = useNavigate(); + const getImages = () => { + if (count === 10) { + alert('사진은 최대 10장입니다.'); + } else { + setCount(prev => prev + 1); + setImage(prev => { + return [...prev, count]; + }); + } + }; + + const uploadData = async () => { + const category = getValues('category'); + const text = getValues('text'); + try { + const response = await axios.post('http://13.209.94.72:8080/boards/1/posts', { content: 'hello' }); + if (response.status === 201) { + alert('게시물 업로드 완료'); + nav('/'); + } + } catch (err) { + console.log(err); + } + console.log(category, text, image); + }; + + return ( + <> +
+
+ + +
+
+ + 사진올리기 + (최대 10장) +
+
+
+ +
+ + ); +}; +Form.propTypes = { + image: PropTypes.array, + setImage: PropTypes.func, + count: PropTypes.number, + setCount: PropTypes.func, +}; +export default Form; diff --git a/app/src/pages/Upload/Form/style.module.css b/app/src/pages/Upload/Form/style.module.css new file mode 100644 index 0000000..ba9bcb9 --- /dev/null +++ b/app/src/pages/Upload/Form/style.module.css @@ -0,0 +1,61 @@ +.firstsection { + width: 100%; + height: 182px; +} +.categoryBox { + width: 100%; + height: fit-content; + display: flex; + justify-content: space-between; +} +.select { + width: 100px; + height: 40px; + border-radius: 0.2rem; + border: 1px solid; + padding-left: 10px; + background-color: white; + cursor: pointer; +} +.btn { + width: 100px; + height: 40px; + border-radius: 0.2rem; + background-image: linear-gradient(to right, #5b79fd, #4c3ddd); + color: white; + cursor: pointer; +} +.photoupload { + width: 100px; + height: 100px; + margin-top: 31px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + border: 1.5px dashed black; + border-radius: 0.5rem; + background-color: #f6f6f6; + cursor: pointer; +} +.secondsection { + width: 100%; + height: fit-content; +} +textarea { + width: 100%; + height: 228px; + padding: 10px 17px; + box-sizing: border-box; + resize: none; +} + +@media screen and (max-width: 769px) { + textarea { + width: 100%; + height: 180px; + } + .secondsection { + width: 100%; + } +} diff --git a/app/src/pages/Upload/index.jsx b/app/src/pages/Upload/index.jsx new file mode 100644 index 0000000..e1a9feb --- /dev/null +++ b/app/src/pages/Upload/index.jsx @@ -0,0 +1,26 @@ +import Nav from '../../components/Nav'; +import React from 'react'; +import styles from './style.module.css'; +import GridItem from './item/GridItem'; +import Form from './Form'; +import { useState } from 'react'; +const CreatePost = () => { + const [image, setImage] = useState([]); + const [count, setCount] = useState(0); + + return ( + <> +