.

client/.eslintcache

-[{"C:\\Users\\hello\\Desktop\\project\\search-page\\client\\src\\index.js":"1","C:\\Users\\hello\\Desktop\\project\\search-page\\client\\src\\App.js":"2","C:\\Users\\hello\\Desktop\\project\\search-page\\client\\src\\reportWebVitals.js":"3","C:\\Users\\hello\\Desktop\\project\\search-page\\client\\src\\Hello.js":"4"},{"size":501,"mtime":1609115688113,"results":"5","hashOfConfig":"6"},{"size":112,"mtime":1609115751257,"results":"7","hashOfConfig":"6"},{"size":362,"mtime":499162500000,"results":"8","hashOfConfig":"6"},{"size":290,"mtime":1609117397222,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"lx0k82",{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\hello\\Desktop\\project\\search-page\\client\\src\\index.js",[],"C:\\Users\\hello\\Desktop\\project\\search-page\\client\\src\\App.js",[],"C:\\Users\\hello\\Desktop\\project\\search-page\\client\\src\\reportWebVitals.js",[],"C:\\Users\\hello\\Desktop\\project\\search-page\\client\\src\\Hello.js",[]]
\ No newline at end of file
+[{"C:\\Users\\hello\\Desktop\\project\\search-page\\client\\src\\index.js":"1","C:\\Users\\hello\\Desktop\\project\\search-page\\client\\src\\App.js":"2","C:\\Users\\hello\\Desktop\\project\\search-page\\client\\src\\reportWebVitals.js":"3","C:\\Users\\hello\\Desktop\\project\\search-page\\client\\src\\Hello.js":"4","C:\\Users\\hello\\Desktop\\project\\search-page\\client\\src\\Search.js":"5","C:\\Users\\hello\\Desktop\\project\\search-page\\client\\src\\Components\\Place.js":"6"},{"size":903,"mtime":1609129622778,"results":"7","hashOfConfig":"8"},{"size":1739,"mtime":1609235986692,"results":"9","hashOfConfig":"8"},{"size":362,"mtime":499162500000,"results":"10","hashOfConfig":"8"},{"size":290,"mtime":1609117397222,"results":"11","hashOfConfig":"12"},{"size":4724,"mtime":1609301122942,"results":"13","hashOfConfig":"8"},{"size":2655,"mtime":1609129296817,"results":"14","hashOfConfig":"8"},{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"17"},"1t9w6go",{"filePath":"18","messages":"19","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"20","usedDeprecatedRules":"17"},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"17"},{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"lx0k82",{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"17"},"C:\\Users\\hello\\Desktop\\project\\search-page\\client\\src\\index.js",[],["29","30"],"C:\\Users\\hello\\Desktop\\project\\search-page\\client\\src\\App.js",["31","32"],"import React, { useEffect, useState } from 'react';\r\nimport { Link, Redirect } from 'react-router-dom';\r\nimport ohuh from './ohuh.PNG';\r\nimport { Container, Row, Col, Image, InputGroup, FormControl, Button } from 'react-bootstrap';\r\n\r\nfunction App() {\r\n  const [search, setSearch] = useState(\"\");\r\n  const [state, setState] = useState(false);\r\n\r\n  if (state !== false) {\r\n    return <Redirect to={{\r\n      pathname: `/search/${search}`,\r\n      state: { id: search },\r\n    }} />;\r\n  }\r\n\r\n  const handleChange = (e) => {\r\n    setSearch(e.target.value);\r\n    console.log(e.target.value)\r\n  }\r\n\r\n  const handleSubmit = (e) => {\r\n    setState(true);\r\n  }\r\n\r\n\r\n\r\n  return (\r\n    <Container className=\"vh-100\">\r\n      <Row className=\"d-flex justify-content-md-center\">\r\n          <Image src={ohuh} />\r\n          <Col lg={{span:9, offset:1}} xs={{span: 12, offset:3}}>\r\n          <InputGroup size=\"lg\" lg={6} xs={5}>\r\n            <FormControl\r\n              className=\"d-flex justify-content-lg-center\"\r\n              placeholder=\"검색어를 입력하세요.\"\r\n              aria-label=\"Large\"\r\n              aria-describedby=\"inputGroup-sizing-sm\"\r\n              onChange={handleChange}\r\n            />\r\n            <InputGroup.Append>\r\n              <Button variant=\"outline-secondary\" onClick={handleSubmit}>검색</Button>\r\n            </InputGroup.Append>\r\n          </InputGroup>\r\n          {/* <form onSubmit={handleSubmit}>\r\n          <input className=\"\" name=\"search\" type=\"text\" placeholder=\"검색어를 입력하세요.\" onChange={handleChange}></input>\r\n          <Link to=\"/search\"><button type=\"submit\">검색</button></Link>\r\n        </form> */}\r\n        </Col>\r\n        </Row>\r\n    </Container>\r\n  );\r\n}\r\n\r\nexport default App;\r\n","C:\\Users\\hello\\Desktop\\project\\search-page\\client\\src\\reportWebVitals.js",[],"C:\\Users\\hello\\Desktop\\project\\search-page\\client\\src\\Hello.js",[],"C:\\Users\\hello\\Desktop\\project\\search-page\\client\\src\\Search.js",[],"C:\\Users\\hello\\Desktop\\project\\search-page\\client\\src\\Components\\Place.js",[],{"ruleId":"33","replacedBy":"34"},{"ruleId":"35","replacedBy":"36"},{"ruleId":"37","severity":1,"message":"38","line":1,"column":17,"nodeType":"39","messageId":"40","endLine":1,"endColumn":26},{"ruleId":"37","severity":1,"message":"41","line":2,"column":10,"nodeType":"39","messageId":"40","endLine":2,"endColumn":14},"no-native-reassign",["42"],"no-negated-in-lhs",["43"],"no-unused-vars","'useEffect' is defined but never used.","Identifier","unusedVar","'Link' is defined but never used.","no-global-assign","no-unsafe-negation"]
\ No newline at end of file

client/package-lock.json

@@ -7068,6 +7068,19 @@
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
     },
+    "history": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^3.0.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0",
+        "value-equal": "^1.0.1"
+      }
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -7078,6 +7091,14 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "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",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -9947,6 +9968,15 @@
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
       "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg=="
     },
+    "mini-create-react-context": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
+      "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.1",
+        "tiny-warning": "^1.0.3"
+      }
+    },
     "mini-css-extract-plugin": {
       "version": "0.11.3",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz",
@@ -12428,6 +12458,52 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
       "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
     },
+    "react-router": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
+      "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "hoist-non-react-statics": "^3.1.0",
+        "loose-envify": "^1.3.1",
+        "mini-create-react-context": "^0.4.0",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.6.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "path-to-regexp": {
+          "version": "1.8.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+          "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+          "requires": {
+            "isarray": "0.0.1"
+          }
+        }
+      }
+    },
+    "react-router-dom": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
+      "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.2.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      }
+    },
     "react-scripts": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.1.tgz",
@@ -12915,6 +12991,11 @@
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
     },
+    "resolve-pathname": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -14570,6 +14651,16 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "tiny-invariant": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
+      "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
+    },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "tmpl": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
@@ -15051,6 +15142,11 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "value-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",

client/package.json

@@ -10,6 +10,7 @@
     "react": "^17.0.1",
     "react-bootstrap": "^1.4.0",
     "react-dom": "^17.0.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
     "web-vitals": "^0.2.4"
   },

client/src/App.js

@@ -29,8 +29,10 @@ function App() {
     <Container className="vh-100">
       <Row className="d-flex justify-content-md-center">
           <Image src={ohuh} />
-        <InputGroup size="lg" xs={5}>
+          <Col lg={{span:9, offset:1}} xs={{span: 12, offset:3}}>
+          <InputGroup size="lg" lg={6} xs={5}>
             <FormControl
+              className="d-flex justify-content-lg-center"
               placeholder="검색어를 입력하세요."
               aria-label="Large"
               aria-describedby="inputGroup-sizing-sm"
@@ -44,6 +46,7 @@ function App() {
           <input className="" name="search" type="text" placeholder="검색어를 입력하세요." onChange={handleChange}></input>
           <Link to="/search"><button type="submit">검색</button></Link>
         </form> */}
+        </Col>
         </Row>
     </Container>
   );

client/src/Search.js

@@ -17,7 +17,7 @@ function Search(props) {
         }} />;
     }
 
-    const handleChange = (e) => {
+    const handleChange = (e) => { //input창에 이벤트가 발생했을 때 쓰는 함수
         setSearch(e.target.value);
     }