From 963f0e8a71da1fda428508ef7327b5a9f3015042 Mon Sep 17 00:00:00 2001 From: EthanKIM Date: Fri, 4 Nov 2022 12:55:11 +0900 Subject: [PATCH 1/2] style: writepage styling --- client/public/index.html | 1 + client/{src/index.css => public/style.css} | 6 +- client/src/App.js | 2 +- client/src/Pages/MainPage.js | 5 ++ client/src/Pages/WritePage.js | 23 ++++---- client/src/components/Header.js | 9 ++- client/src/components/Review.js | 13 +++- client/src/components/SignupModal.js | 2 +- client/src/components/WriteForm.js | 69 +++++++++++++++++----- client/src/index.js | 1 - client/src/utils/WritePage.css | 14 +++++ client/src/utils/modal.css | 16 +++-- 12 files changed, 110 insertions(+), 51 deletions(-) rename client/{src/index.css => public/style.css} (72%) create mode 100644 client/src/utils/WritePage.css diff --git a/client/public/index.html b/client/public/index.html index d4063eb..828fd4a 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -23,6 +23,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> + React App diff --git a/client/src/index.css b/client/public/style.css similarity index 72% rename from client/src/index.css rename to client/public/style.css index 66af31b..e8b5ec1 100644 --- a/client/src/index.css +++ b/client/public/style.css @@ -1,9 +1,7 @@ body { + font-family: 'Poppins', sans-serif; margin-left: 0; margin-right: 0; margin-bottom: 0; background-color: rgb(252, 250, 234); - - font-family: 'Poppins'; -} - +} \ No newline at end of file diff --git a/client/src/App.js b/client/src/App.js index 6b678f4..55c6803 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -40,7 +40,7 @@ const App = () => { paper: '#ffffff', footer: '#a9def9', header: '#a9def9', - lock: 'rgba(47, 83, 239)', + lock: '#a9def9', yellow: "#F0B918" }, text: { diff --git a/client/src/Pages/MainPage.js b/client/src/Pages/MainPage.js index 0b38cef..a9f622e 100644 --- a/client/src/Pages/MainPage.js +++ b/client/src/Pages/MainPage.js @@ -6,6 +6,8 @@ import { AppContext } from '../AppContext'; import ListContainer from '../components/ListContainer'; import Grid from '@mui/material/Grid'; import axios from 'axios'; +import { Paper, Typography } from '@mui/material'; +import {LinearProgress} from '@mui/material'; const MainPage = () => { const context = useContext(AppContext); @@ -35,6 +37,9 @@ const MainPage = () => { return
; })} + + + ); diff --git a/client/src/Pages/WritePage.js b/client/src/Pages/WritePage.js index 3838729..d72cc42 100644 --- a/client/src/Pages/WritePage.js +++ b/client/src/Pages/WritePage.js @@ -1,5 +1,4 @@ import * as React from 'react'; -import CssBaseline from '@mui/material/CssBaseline'; import Box from '@mui/material/Box'; import Container from '@mui/material/Container'; import Paper from '@mui/material/Paper'; @@ -15,9 +14,11 @@ import { Link } from 'react-router-dom'; import { useContext } from 'react'; import axios from 'axios'; import { AppContext } from '../AppContext'; +import "../utils/WritePage.css" export default function WritePage () { const context = useContext(AppContext); + const {jwt} = context.state; const [activeStep, setActiveStep] = React.useState(0); const [title, setTitle] = React.useState(''); const [content, setContent] = React.useState(''); @@ -27,10 +28,6 @@ export default function WritePage () { const [city, setCity] = React.useState(''); // region 은 넣을필요 없음. 분류할떄만. city만 post - - console.log(region, city) - - const steps = ['글쓰기', '미리보기', '작성 완료']; function getStepContent (step) { @@ -64,9 +61,7 @@ export default function WritePage () { writeImg={writeImg} setWriteImg={setWriteImg} region={region} - setRegion={setRegion} city={city} - setCity={setCity} />); case 2: return ( @@ -88,6 +83,8 @@ export default function WritePage () { } } + // axios 에러가 클라이언트에서 나는거같습니다. + const handleNext = () => { if (title === '' || content === '') { alert('빈칸을 채워주세요'); @@ -101,7 +98,8 @@ export default function WritePage () { userId: userId, title: title, content: content, - imgFile: writeImg + imgFile: writeImg, + city: city, }, { withCredentials: true }).then((res) => { @@ -122,15 +120,14 @@ export default function WritePage () { const theme = createTheme(); return ( - - - - + + + 게시글 작성하기 {steps.map((label) => ( - + {label} ))} diff --git a/client/src/components/Header.js b/client/src/components/Header.js index 4e66c23..d230ce4 100644 --- a/client/src/components/Header.js +++ b/client/src/components/Header.js @@ -11,6 +11,7 @@ import { ThemeProvider } from '@mui/material/styles'; import { Stack } from '@mui/material'; import { AppContext } from '../AppContext'; import HeaderButton from './HeaderButton'; +import {Grid, Paper} from '@mui/material' import axios from 'axios'; const Header = () => { @@ -80,10 +81,10 @@ const Header = () => { @@ -103,11 +104,13 @@ const Header = () => { >TAKO - {/* */} {context.state.isLoggedin ? : } + + + ); }; diff --git a/client/src/components/Review.js b/client/src/components/Review.js index 2250279..0b361e4 100644 --- a/client/src/components/Review.js +++ b/client/src/components/Review.js @@ -3,10 +3,12 @@ import Typography from '@mui/material/Typography'; import Grid from '@mui/material/Grid'; import Button from '@mui/material/Button'; import Box from '@mui/material/Box'; +import { Chip, TextField } from '@mui/material'; export default function Review (props) { const date = new Date(); - const dateString = `${date.getFullYear()}.${date.getMonth()}.${date.getDate()} ${date.getHours()}:${date.getMinutes()} ${date.getHours() > 12 ? 'PM' : 'AM'}`; + const dateString = `${date.getFullYear()}.${date.getMonth()+1}.${date.getDate()} ${date.getHours()}:${date.getMinutes()} ${date.getHours() > 12 ? 'PM' : 'AM'}`; + const {city, region} = props; const information = [ { name: '이름', detail: props.userId }, @@ -24,9 +26,15 @@ export default function Review (props) { - {props.content}asasd + {props.content} + + {region ? : null} + {city ? : null} + + + 작성자 @@ -43,7 +51,6 @@ export default function Review (props) { ))} - diff --git a/client/src/components/SignupModal.js b/client/src/components/SignupModal.js index 3c9672e..fb1e071 100644 --- a/client/src/components/SignupModal.js +++ b/client/src/components/SignupModal.js @@ -27,7 +27,7 @@ const SignupModal = () => { const p = data.get('password'); const p_c = data.get('confirm_password'); if (p !== p_c) { - alert('비밀번호가 일치하지 않습니다.'); + return; } else { // DB로 보내기 axios.post('http://localhost:3001/users/signup', { diff --git a/client/src/components/WriteForm.js b/client/src/components/WriteForm.js index 9d84e1a..df8153f 100644 --- a/client/src/components/WriteForm.js +++ b/client/src/components/WriteForm.js @@ -1,4 +1,4 @@ -import React, {useState} from 'react'; +import React, {useCallback, useState} from 'react'; import Typography from '@mui/material/Typography'; import Grid from '@mui/material/Grid'; import TextField from '@mui/material/TextField'; @@ -8,16 +8,22 @@ import InputLabel from '@mui/material/InputLabel'; import MenuItem from '@mui/material/MenuItem'; import FormControl from '@mui/material/FormControl'; import Select from '@mui/material/Select'; +import { Chip } from '@mui/material'; + export default function WriteForm (props) { const {region, setRegion, city, setCity} = props; - + const [cityList, setCityList] = useState([]); + const asia = ["Seoul", "Tokyo", "BangKok"]; + const europe = ["Paris", "Roma", "London"]; + const america = ["DC", "Ottawa", "NewYork"]; + const africa = ["Rabat", "Kyro"]; + const middleeast = ["New Delhi", "Riyadh", "dubai"]; const regions = ["Asia", "Europe", "America", "Africa", "Middle East"]; - const a = {Asia: ["Seoul", "Tokyo", "BangKok"], Europe: ["Paris", "Roma", "London"]} - const cities = ["Seoul", "Tokyo", "BangKok", "Paris", "Roma", "London", "DC", "Ottawa", "NewYork", "Rabat", "Kyro", "New Delhi", "Riyadh", "dubai"] - console.log(a); + + const handleChangeTitle = (e) => { props.setTitle(e.target.value); }; @@ -42,13 +48,33 @@ export default function WriteForm (props) { } }; - const handleRegionChange = (e) => { - setRegion(e.target.value); - } + const handleRegionChange = useCallback( + (e) => { + const target = e.target.value + setRegion(target); + if (target === "Asia") { + setCityList(asia); + } else if (target === "Europe") { + setCityList(europe); + } else if (target === "America") { + setCityList(america); + } else if (target === "Africa") { + setCityList(africa); + } else { + setCityList(middleeast); + } + }, [] + ) - const handleCityChange = (e) => { - setCity(e.target.value) - } + const handleCityChange = useCallback( + (e) => { + if (!region) { + alert('지역을 먼저 선택해주세요.'); + return; + } + setCity(e.target.value) + }, [region] + ) return ( <> @@ -78,7 +104,11 @@ export default function WriteForm (props) { label="region" onChange={handleRegionChange} > - {regions.map((item, idx) => {item})} + {regions.map((item, idx) => ( + + + ) + )} @@ -92,12 +122,15 @@ export default function WriteForm (props) { label="city" onChange={handleCityChange} > - {cities.map((item, idx) => {item})} + {cityList.map((item, idx) => ( + + + ))} - + Upload File {props.activeStep !== 0 ? 'Place order' : 'Next'} diff --git a/client/src/index.js b/client/src/index.js index ee915e0..993c262 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -1,6 +1,5 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import './index.css'; import App from './App'; import {BrowserRouter as Router} from 'react-router-dom' diff --git a/client/src/utils/WritePage.css b/client/src/utils/WritePage.css new file mode 100644 index 0000000..a77c6b3 --- /dev/null +++ b/client/src/utils/WritePage.css @@ -0,0 +1,14 @@ +*{ + font-family: Poppins, sans-serif ; +} +.css-1u4zpwo-MuiSvgIcon-root-MuiStepIcon-root > circle { + color: #ff85a1; +} + +.css-1u4zpwo-MuiSvgIcon-root-MuiStepIcon-root.Mui-active > circle { + color: #a9def9; +} + +.css-vnkopk-MuiStepLabel-iconContainer .css-1u4zpwo-MuiSvgIcon-root-MuiStepIcon-root.Mui-completed { + color: #a9def9; +} \ No newline at end of file diff --git a/client/src/utils/modal.css b/client/src/utils/modal.css index 5848d82..374a26d 100644 --- a/client/src/utils/modal.css +++ b/client/src/utils/modal.css @@ -1,3 +1,4 @@ + .modal.openModal { font-family: Poppins, sans-serif; line-height: 1.5; @@ -8,7 +9,7 @@ align-items: center; /* 팝업이 열릴때 스르륵 열리는 효과 */ animation: modal-bg-show 0.4s; - z-index: 0; + z-index: 99; } .modal { @@ -18,13 +19,10 @@ right: 0; bottom: 0; left: 0; - z-index: 99; + z-index: 1; background-color: rgba(0, 0, 0, 0.6); } - .css-1999axt-MuiAvatar-root { - background-color: rgba(47, 83 239); - } .modal button { font-family: Poppins, sans-serif; line-height: 1.5; @@ -33,7 +31,7 @@ outline: none; cursor: pointer; border: 0; - background-color: rgba(47, 83, 239); + background-color: #a9def9; color: #ffffff; } @@ -42,7 +40,7 @@ max-width: 450px; margin: 0 auto; border-radius: 0.3rem; - background-color: #fff; + background-color: #ffffff; /* 팝업이 열릴때 스르륵 열리는 효과 */ animation: modal-show 0.3s; overflow: hidden; @@ -50,7 +48,7 @@ .modal > section > header { position: relative; padding: 16px 64px 16px 16px; - background-color: rgba(47, 83, 239); + background-color: #a9def9; font-weight: 700; color: #ffffff; } @@ -92,7 +90,7 @@ font-weight: 600; padding: 6px 12px; color: #ffffff; - background-color: rgba(47, 83 239); + background-color: #a9def9; border-radius: 5px; font-size: 13px; } From 59bacfe5f2127f1e2f319f56b96dccd8cec605a5 Mon Sep 17 00:00:00 2001 From: EthanKIM Date: Fri, 4 Nov 2022 13:48:20 +0900 Subject: [PATCH 2/2] feat: renew mainpage article list --- client/src/Pages/MainPage.js | 4 +++- client/src/Pages/WritePage.js | 2 +- client/src/components/ListContainer.js | 1 + client/src/components/ListContainerByRegion.js | 5 +++-- client/src/components/WriteForm.js | 3 +-- client/src/utils/Header.css | 5 +++++ server/router/articles.js | 2 +- 7 files changed, 15 insertions(+), 7 deletions(-) diff --git a/client/src/Pages/MainPage.js b/client/src/Pages/MainPage.js index a9f622e..ec3e903 100644 --- a/client/src/Pages/MainPage.js +++ b/client/src/Pages/MainPage.js @@ -19,12 +19,14 @@ const MainPage = () => { axios.get('http://localhost:3001/articles', { withCredentials: true }).then((res) => { + console.log(res.data) setMainArticles(res.data); }).catch((err) => { console.error(err); }); }, []); + return ( @@ -33,7 +35,7 @@ const MainPage = () => { - {mainArticles.map((item) => { + {[...mainArticles].reverse().map((item) => { return
; })} diff --git a/client/src/Pages/WritePage.js b/client/src/Pages/WritePage.js index d72cc42..f49fb45 100644 --- a/client/src/Pages/WritePage.js +++ b/client/src/Pages/WritePage.js @@ -127,7 +127,7 @@ export default function WritePage () { {steps.map((label) => ( - + {label} ))} diff --git a/client/src/components/ListContainer.js b/client/src/components/ListContainer.js index 278843d..9399f62 100644 --- a/client/src/components/ListContainer.js +++ b/client/src/components/ListContainer.js @@ -57,6 +57,7 @@ const ListContainer = () => { pr: 3, }}> { const {setMainArticles} = context.action; const handleButtonClick = useCallback((e) => { + // post parameter로. axios.get(`http://localhost:3001/articles?city=${e.target.innerText}`) .then((res) => { console.log(res.data) @@ -25,8 +26,8 @@ const ListContainerByRegion = ({primary}) => { }, [mainArticles]) return ( - - + + diff --git a/client/src/components/WriteForm.js b/client/src/components/WriteForm.js index df8153f..1a08dd3 100644 --- a/client/src/components/WriteForm.js +++ b/client/src/components/WriteForm.js @@ -48,8 +48,7 @@ export default function WriteForm (props) { } }; - const handleRegionChange = useCallback( - (e) => { + const handleRegionChange = useCallback((e) => { const target = e.target.value setRegion(target); if (target === "Asia") { diff --git a/client/src/utils/Header.css b/client/src/utils/Header.css index e69de29..b9f8bbc 100644 --- a/client/src/utils/Header.css +++ b/client/src/utils/Header.css @@ -0,0 +1,5 @@ +.sticky { + position: fixed; + top: 0; + width: 100% +} \ No newline at end of file diff --git a/server/router/articles.js b/server/router/articles.js index bc8926c..618619b 100644 --- a/server/router/articles.js +++ b/server/router/articles.js @@ -4,7 +4,7 @@ const router = express.Router(); router.get('/', find); router.post('/write', write); -router.post('/comment', comment); +router.post('/comment', comment); // delete는 똑같이 여기로 보내는데 query만 추가. router.patch('/like', like); module.exports = router;