세부UI 수정

client/src/Pages/App.js

@@ -53,15 +53,8 @@ function App() {
 
 
   return (
-
-    // <Container className="vh-100 ">
-    //   <Col md={12} >
-    //     <Row className="justify-content-center" >
-    //       <Image src={ohuh} style={{ margin: "5%", marginTop : "3%" }} />
-    //     </Row>
-    //     <Row style={{ marginBottom: "5%" }}>
     <Container className="vh-100 ">
-      <Col md={12} >
+      <Col xs={12} >
         <Nav className="justify-content-end" bg="#fff" variant="light" style={{}} >
           {user ? <Nav.Link onClick={() => handleLogout()}>로그아웃</Nav.Link>
             : (
@@ -72,8 +65,10 @@ function App() {
             )}
           <Nav.Link href='/bookmark'>북마크</Nav.Link>
         </Nav>
-        <Row className="justify-content-center">
-        <Image src={ohuh} style={{ margin: "3%", marginTop : "3%" }} />
+        <Row className="justify-content-center" md={2}>
+          <Col  className="d-flex justify-content-center">
+        <Image src={ohuh}  style={{ margin: "3%", marginTop : "3%" }} fluid />
+          </Col>
         </Row>
         <Row style={{ marginBottom: "5%" }}>
           <Form className="vw-100" onSubmit={handleSubmit}>
@@ -91,11 +86,11 @@ function App() {
             </InputGroup>
           </Form>
         </Row>
-        <Row  >
-          <Col md={6} >
+        <Row  xs={6}>
+          <Col md={6} xs={12}>
             <h1 className=" d-flex justify-content-center" style={{ marginBottom: "7%" }}>인기관광지</h1>
             <Card align="center" border="info" style={{ margin: "3%" }}>
-              <Card.Title style={{ margin: "3%", fontSize: '200%', fontWeight: 'bold' }} >{recommend.name}</Card.Title>
+              <Card.Header style={{  margin: "0",fontSize: '200%', fontWeight: 'bold' }} >{recommend.name}</Card.Header>
               <Card.Img variant="top" style={{ padding: "5%", width: "100%", height: "340px" }} src={recommend.img} />
               <Card.Body >
                 <Card.Text style={{ overflow: 'auto', fontSize: '25px', width: '100%', height: "80px" }} >
@@ -107,10 +102,10 @@ function App() {
             </Card>
           </Col>
 
-          <Col md={6} >
+          <Col md={6} xs={12}>
             <h1 className=" d-flex justify-content-center" style={{ marginBottom: "7%" }}>최근 검색관광지</h1>
-            <Card align="center" border="info" style={{ margin: "3%" }}>
-              <Card.Title style={{ margin: "3%", fontSize: '200%', fontWeight: 'bold' }} >{latest.name}</Card.Title>
+            <Card align="center" border="info" style={{ margin: "3%" }} >
+              <Card.Header style={{  margin: "0", fontSize: '200%', fontWeight: 'bold'}} bg="danger">{latest.name}</Card.Header>
               <Card.Img variant="top" style={{ padding: "5%", width: "100%", height: "340px" }} src={latest.img} />
               <Card.Body >
                 <Card.Text style={{ overflow: 'auto', fontSize: '25px', width: '100%', height: "80px" }} >

client/src/Pages/Search.js

@@ -171,9 +171,9 @@ function Search(props) {
                 {pagePlace.map((place, index) => {
                     return (
                         <Col key={index} md={6} >
-                            <Card align="center" border="info" style={{ margin: "3%" }}>
-
-                                <Card.Title className="d-flex justify-content-center" style={{ margin: "3%", fontSize: '200%', fontWeight: 'bold' }} >{place.name}
+                            <Card align="center" border="info" style={{ margin: "2%" }}>
+                                <Row className="d-flex justify-content-center">
+                                    <Card.Header style={{ margin: "0", marginLeft:"3%",marginRight:"3%",fontSize: '200%', fontWeight: 'bold', width :"100vw"}} >{place.name}
                                         {user ?
                                             <Button
                                                 variant={bookmark[index] ? "primary" : "light"}
@@ -181,7 +181,8 @@ function Search(props) {
                                                 <Icon.BookmarkStarFill size={35} />
                                                 {console.log("bookmark", bookmark)}
                                                 {console.log("bookmark[index]", bookmark[index])}</Button> : null}
-                                </Card.Title>
+                                    </Card.Header>
+                                </Row>
                                 <Card.Img variant="top" style={{ padding: "5%", width: "100%", height: "340px" }} src={place.img} />
                                 <Card.Body>
                                     <Card.Text style={{ overflow: 'auto', fontSize: '25px', width: '100%', height: "80px" }} >