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 {
@@ -30,6 +30,8 @@
 
 .article .content {
   font-family: 'Pretendard-Regular';
+  padding-top: 10px;
+  padding-bottom: 10px;
 }
 
 .article .comments {
@@ -39,4 +41,8 @@
 
 .article:hover {
   background-color: #dddddd;
+}
+
+.test{
+  background-color: red;
 }
\ No newline at end of file

frontend/src/css/Main.css

@@ -5,6 +5,13 @@
     font-style: normal;
 }
 
+@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;
+}
+
 .intro {
     /* position: fixed; */
     font-size: 30px;
@@ -18,6 +25,11 @@
     /* flex-wrap: wrap; */
     
 }
+
+#title {
+    font-size: 70px;
+}
+
 .intro p{
     font-size: 35px;
     color: white;
@@ -26,6 +38,13 @@
     line-height: 1.5;
 }
 
+#addInputPrior {
+    margin-right: 90vh;
+    width: 100px;
+    font-family: 'Pretendard-Regular';
+    font-weight: 700;
+}
+
 
 Button {
     width: 150px;

frontend/src/css/PostWrite.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;
+}
+
+#writeContent{
+    font-family: 'Pretendard-Regular';
+    font-weight: 700;
+    font-size: 20px;
+}
\ 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/Main.js

@@ -47,7 +47,7 @@ function Main() {
 
   return (
     <div className="App">
-      <h1>모두의 食道樂</h1>
+      <h1 id='title'>모두의 食道樂</h1>
       <div className="intro">
         <p>가보고 싶은 식당을 찾아보고, <br />가본 식당을 기록해보세요!</p>
       </div>

frontend/src/pages/PostWrite.js

 import React, { useRef, useState, useEffect, useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { UserContext } from '../Context.js';
+import '../css/PostWrite.css'
 
 import SearchMap from '../components/SearchMapByKeyword.js'
 import axios from 'axios';
@@ -152,7 +153,7 @@ function PostWrite() {
             </div>
             <div style={{ display: "grid" }}>
               <label>Content</label>
-              <input
+              <textarea id='writeContent'
                 type="text"
                 name='content'
                 onChange={onTextChange}

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>