Fix Search.css

frontend/src/components/Article.js

 import React, { useEffect, useState } from "react";
-import "../css/Article.css"
+import '../css/Article.css';
 
 import { Routes, Route, Link, useNavigate, Navigate } from 'react-router-dom';
 import { useParams } from 'react-router-dom';

frontend/src/components/SearchMapByKeyword.js

 import { Map, MapMarker } from "react-kakao-maps-sdk";
 import React, { useRef, useState, useEffect, useContext } from 'react';
+import '../css/SearchMapByKeyword.css'
 
 const { kakao } = window;
 
@@ -59,13 +60,13 @@ function SearchMapByKeyword({ loc, setLoc }) {
     <div className="UserInput">
       <input onChange={handleInput} />
       <button onClick={() => handleSearch()} style={{ width: '50px', height: '30px' }}>검색</button><br></br>
-      <div style={{ display: 'flex' }}>
-        <Map // 지도를 표시할 Container
+      <div className="mapScreen" style={{ display: 'flex' }}>
+        <Map className="mapSearch"// 지도를 표시할 Container
           center={info && info.position || defaultCenter}
           style={{
             // 지도의 크기
-            width: "450px",
-            height: "450px"
+            width: "350px",
+            height: "550px"
           }}
           onCreate={setMap}
           isPanto={true}
@@ -95,7 +96,7 @@ function SearchMapByKeyword({ loc, setLoc }) {
             </MapMarker>
           ))}
         </Map>
-        <div>
+        <div id="searchResult">
           <ul>
             {markers.map((marker, index) => (
               <li key={`marker-${marker.content}-${marker.position.lat},${marker.position.lng}`}

frontend/src/css/App.css

@@ -33,6 +33,14 @@ button:active {
   flex-direction: column;
 }
 
+.App .search{
+ margin-right: auto;
+}
+
+.App .search .article{
+  width: 30vw;
+}
+
 .App :not(style) {
   margin: 10px;
 }
\ No newline at end of file

frontend/src/css/Article.css

@@ -16,7 +16,7 @@
   background-color: #ffffff;
   border: 1px solid gray;
   border-radius: 10px;
-  width: 100vh;
+  width: 55vw;
 }
 
 .article h1 {
@@ -41,4 +41,8 @@
 
 .article:hover {
   background-color: #dddddd;
+}
+
+.test{
+  background-color: red;
 }
\ No newline at end of file

frontend/src/css/Search.css

+@font-face {
+    font-family: 'Pretendard-Regular';
+    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+}
+
+.search {
+    /* position: absolute; */
+    display: flex;
+    /* background-color: red; */
+    /* float: left; */
+    /* margin-right: 100vh; */
+}
+
+.mapSearch{
+    align-items: left;
+}
+
+#searchResult li{
+    /* 검색 창에서 검색결과 목록(li) */
+    font-family: 'Pretendard-Regular';
+    /* position: absolute; */
+    /* font-size: 20px; */
+    min-width: 200px;
+    font-weight: 700;   
+}
\ No newline at end of file

frontend/src/pages/Search.js

@@ -5,6 +5,7 @@ import SearchMap from '../components/SearchMapByKeyword.js'
 import { UserContext } from '../Context.js';
 import Article from '../components/Article.js';
 import axios from 'axios';
+import '../css/Search.css';
 axios.defaults.withCredentials = true;
 const { kakao } = window;
 function Search(props) {
@@ -49,7 +50,7 @@ function Search(props) {
   let listItem = [];
   listItem = articleList.map((article) => {
     return (
-      <Article
+      <Article className="test"
         key={article._id}
         data={article}
       ></Article>
@@ -70,8 +71,8 @@ function Search(props) {
   };
 
   return (
-    <div style={{ display: 'flex' }}>
-      <div className="search">
+    <div className="search" style={{ display: 'flex' }}>
+      <div>
         <h1 style={{ textAlign: 'center' }}>검색</h1>
         <SearchMap loc={location} setLoc={setLocation}></SearchMap>
       </div>