Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • 2023_2_webpromgramming_8/sicdorak
1 result
Show changes
Commits on Source (2)
backend/public/uploads/macdoland1701952514971.jpg

46.7 KiB

import React, { useEffect, useState } from "react"; 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 { Routes, Route, Link, useNavigate, Navigate } from 'react-router-dom';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
......
import { Map, MapMarker } from "react-kakao-maps-sdk"; import { Map, MapMarker } from "react-kakao-maps-sdk";
import React, { useRef, useState, useEffect, useContext } from 'react'; import React, { useRef, useState, useEffect, useContext } from 'react';
import '../css/SearchMapByKeyword.css'
const { kakao } = window; const { kakao } = window;
...@@ -59,13 +60,13 @@ function SearchMapByKeyword({ loc, setLoc }) { ...@@ -59,13 +60,13 @@ function SearchMapByKeyword({ loc, setLoc }) {
<div className="UserInput"> <div className="UserInput">
<input onChange={handleInput} /> <input onChange={handleInput} />
<button onClick={() => handleSearch()} style={{ width: '50px', height: '30px' }}>검색</button><br></br> <button onClick={() => handleSearch()} style={{ width: '50px', height: '30px' }}>검색</button><br></br>
<div style={{ display: 'flex' }}> <div className="mapScreen" style={{ display: 'flex' }}>
<Map // 지도를 표시할 Container <Map className="mapSearch"// 지도를 표시할 Container
center={info && info.position || defaultCenter} center={info && info.position || defaultCenter}
style={{ style={{
// 지도의 크기 // 지도의 크기
width: "450px", width: "350px",
height: "450px" height: "550px"
}} }}
onCreate={setMap} onCreate={setMap}
isPanto={true} isPanto={true}
...@@ -95,7 +96,7 @@ function SearchMapByKeyword({ loc, setLoc }) { ...@@ -95,7 +96,7 @@ function SearchMapByKeyword({ loc, setLoc }) {
</MapMarker> </MapMarker>
))} ))}
</Map> </Map>
<div> <div id="searchResult">
<ul> <ul>
{markers.map((marker, index) => ( {markers.map((marker, index) => (
<li key={`marker-${marker.content}-${marker.position.lat},${marker.position.lng}`} <li key={`marker-${marker.content}-${marker.position.lat},${marker.position.lng}`}
......
...@@ -33,6 +33,14 @@ button:active { ...@@ -33,6 +33,14 @@ button:active {
flex-direction: column; flex-direction: column;
} }
.App .search{
margin-right: auto;
}
.App .search .article{
width: 30vw;
}
.App :not(style) { .App :not(style) {
margin: 10px; margin: 10px;
} }
\ No newline at end of file
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
background-color: #ffffff; background-color: #ffffff;
border: 1px solid gray; border: 1px solid gray;
border-radius: 10px; border-radius: 10px;
width: 100vh; width: 55vw;
} }
.article h1 { .article h1 {
...@@ -30,6 +30,8 @@ ...@@ -30,6 +30,8 @@
.article .content { .article .content {
font-family: 'Pretendard-Regular'; font-family: 'Pretendard-Regular';
padding-top: 10px;
padding-bottom: 10px;
} }
.article .comments { .article .comments {
...@@ -39,4 +41,8 @@ ...@@ -39,4 +41,8 @@
.article:hover { .article:hover {
background-color: #dddddd; background-color: #dddddd;
}
.test{
background-color: red;
} }
\ No newline at end of file
...@@ -5,6 +5,13 @@ ...@@ -5,6 +5,13 @@
font-style: normal; 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 { .intro {
/* position: fixed; */ /* position: fixed; */
font-size: 30px; font-size: 30px;
...@@ -18,6 +25,11 @@ ...@@ -18,6 +25,11 @@
/* flex-wrap: wrap; */ /* flex-wrap: wrap; */
} }
#title {
font-size: 70px;
}
.intro p{ .intro p{
font-size: 35px; font-size: 35px;
color: white; color: white;
...@@ -26,6 +38,13 @@ ...@@ -26,6 +38,13 @@
line-height: 1.5; line-height: 1.5;
} }
#addInputPrior {
margin-right: 90vh;
width: 100px;
font-family: 'Pretendard-Regular';
font-weight: 700;
}
Button { Button {
width: 150px; width: 150px;
......
@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
@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
...@@ -47,7 +47,7 @@ function Main() { ...@@ -47,7 +47,7 @@ function Main() {
return ( return (
<div className="App"> <div className="App">
<h1>모두의 食道樂</h1> <h1 id='title'>모두의 食道樂</h1>
<div className="intro"> <div className="intro">
<p>가보고 싶은 식당을 찾아보고, <br />가본 식당을 기록해보세요!</p> <p>가보고 싶은 식당을 찾아보고, <br />가본 식당을 기록해보세요!</p>
</div> </div>
......
import React, { useRef, useState, useEffect, useContext } from 'react'; import React, { useRef, useState, useEffect, useContext } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { UserContext } from '../Context.js'; import { UserContext } from '../Context.js';
import '../css/PostWrite.css'
import SearchMap from '../components/SearchMapByKeyword.js' import SearchMap from '../components/SearchMapByKeyword.js'
import axios from 'axios'; import axios from 'axios';
...@@ -152,7 +153,7 @@ function PostWrite() { ...@@ -152,7 +153,7 @@ function PostWrite() {
</div> </div>
<div style={{ display: "grid" }}> <div style={{ display: "grid" }}>
<label>Content</label> <label>Content</label>
<input <textarea id='writeContent'
type="text" type="text"
name='content' name='content'
onChange={onTextChange} onChange={onTextChange}
......
...@@ -5,6 +5,7 @@ import SearchMap from '../components/SearchMapByKeyword.js' ...@@ -5,6 +5,7 @@ import SearchMap from '../components/SearchMapByKeyword.js'
import { UserContext } from '../Context.js'; import { UserContext } from '../Context.js';
import Article from '../components/Article.js'; import Article from '../components/Article.js';
import axios from 'axios'; import axios from 'axios';
import '../css/Search.css';
axios.defaults.withCredentials = true; axios.defaults.withCredentials = true;
const { kakao } = window; const { kakao } = window;
function Search(props) { function Search(props) {
...@@ -49,7 +50,7 @@ function Search(props) { ...@@ -49,7 +50,7 @@ function Search(props) {
let listItem = []; let listItem = [];
listItem = articleList.map((article) => { listItem = articleList.map((article) => {
return ( return (
<Article <Article className="test"
key={article._id} key={article._id}
data={article} data={article}
></Article> ></Article>
...@@ -70,8 +71,8 @@ function Search(props) { ...@@ -70,8 +71,8 @@ function Search(props) {
}; };
return ( return (
<div style={{ display: 'flex' }}> <div className="search" style={{ display: 'flex' }}>
<div className="search"> <div>
<h1 style={{ textAlign: 'center' }}>검색</h1> <h1 style={{ textAlign: 'center' }}>검색</h1>
<SearchMap loc={location} setLoc={setLocation}></SearchMap> <SearchMap loc={location} setLoc={setLocation}></SearchMap>
</div> </div>
......