Merge pull request #87 from EthanKIMHG/main

[client] / #15 / createpage, mainpage 최신화
codestates-beb · Nov 4, 2022 · cdae290 · cdae290
2 parents 96a8407 + dfc410e
commit cdae290
Show file tree

Hide file tree

Showing 16 changed files with 124 additions and 55 deletions.
diff --git 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`.
     -->
+    <link rel="stylesheet" href="./style.css">
     <title>React App</title>
   </head>
   <body>

diff --git a/client/src/index.css → client/public/style.css b/client/src/index.css → client/public/style.css
@@ -1,8 +1,9 @@
 body {
+  font-family: 'Poppins', sans-serif;
   margin-left: 0;
   margin-right: 0;
   margin-bottom: 0;
-  background-color: rgb(252,250,250);
+  background-color: rgb(252, 250, 234);
 
   font-family: 'Poppins';
 }

diff --git a/client/src/App.js b/client/src/App.js
@@ -38,10 +38,9 @@ const App = () => {
     palette: {
       background: {
         paper: '#ffffff',
-        footer: 'rgba(32,78,128)',
-        // header: 'rgb(106,145,192)',
-        header: '#54d8dc',
-        lock: 'rgba(47, 83, 239)',
+        footer: '#a9def9',
+        header: '#a9def9',
+        lock: '#a9def9',
         yellow: "#F0B918"
       },
       text: {

diff --git 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);
@@ -17,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 (
     <ThemeProvider theme={context.state.theme}>
       <Grid container spacing={4} justifyContent='center'>
@@ -31,10 +35,13 @@ const MainPage = () => {
           <ListContainer id="main-list"/>
         </Grid>
         <Grid item xs={6} mt={10} sx={{ width: '100%', height: 'auto' }}>
-          {mainArticles.map((item) => {
+          {[...mainArticles].reverse().map((item) => {
             return <Article key={item._id} userId={item.author.userId} title={item.title} content={item.content} imgFile={item.imgFile} />;
           })}
         </Grid>
+        <Grid item xs={12}>
+          <Paper square elevation={0} sx={{height:"25px"}} />
+        </Grid>
       </Grid>
     </ThemeProvider>
   );

diff --git 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 (
     <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <Container component='main' maxWidth='md' sx={{ mb: 4, }}>
-        <Paper variant='outlined' sx={{ my: { xs: 3, md: 6 }, p: { xs: 2, md: 3 },  }}>
-          <Typography component='h1' variant='h4' align='center' sx={{color: 'black'}}>
+      <Container component='div' maxWidth='md' sx={{ mb: 4, }}>
+        <Paper elevation={5} sx={{ my: { xs: 3, md: 6 }, p: { xs: 3, md: 6 }, }}>
+          <Typography component='h1' variant='h4' align='center' sx={{color: 'black', margin:0}}>
             게시글 작성하기
           </Typography>
           <Stepper activeStep={activeStep} sx={{ pt: 3, pb: 5 }}>
             {steps.map((label) => (
-              <Step key={label}>
+              <Step className='step-container' key={label} >
                 <StepLabel>{label}</StepLabel>
               </Step>
             ))}

diff --git 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 = () => {
       <AppBar sx={{
         position: 'sticky',
         boxShadow: 0,
-        maxHeight: '80px',
+        maxHeight: '110px',
         bgcolor: 'background.header',
         mt: '-8px',
-        height: '80px',
+        height: '90px',
         justifyContent: 'center'
       }}
       >
@@ -103,11 +104,13 @@ const Header = () => {
             >TAKO
             </Typography>
           </Box>
-          {/* <Box component="img" sx={{ml: 3, overflow: "hidden", borderRadius: 70, width: "auto", height:72,}} alt=''src="https://img.freepik.com/free-vector/cute-octopus-eating-takoyaki-cartoon-vector-icon-illustration-animal-food-icon-concept-isolated-pr_138676-4795.jpg?size=338&ext=jpg&ga=GA1.2.560317433.1666977347" ></Box> */}
           <Box sx={{ flexGrow: 1 }} />
           {context.state.isLoggedin ? <IsLogin /> : <IsNotLogin />}
         </Toolbar>
       </AppBar>
+      <Grid item xs={12} sx={{}}>
+          <Paper component="header" square elevation={3} sx={{height:"25px"}} />
+        </Grid>
     </ThemeProvider>
   );
 };

diff --git a/client/src/components/ListContainer.js b/client/src/components/ListContainer.js
@@ -57,6 +57,7 @@ const ListContainer = () => {
           pr: 3,
         }}>
           <List
+
             component="nav" className='nav-list'
             subheader={
             <ListSubheader sx={{

diff --git a/client/src/components/ListContainerByRegion.js b/client/src/components/ListContainerByRegion.js
@@ -17,6 +17,7 @@ const ListContainerByRegion = ({primary}) => {
   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 (
-    <List component="div" disablePadding>
-      <ListItemButton sx={{ pl:4 }} onClick={handleButtonClick}>
+    <List component="div" disablePadding >
+      <ListItemButton sx={{ pl:4 }} onClick={handleButtonClick} >
         <ListItemIcon>
           <FlagCircleIcon id="flag"/>
         </ListItemIcon>

diff --git 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) {
         </Grid>
         <Grid item xs={6}>
           <Typography variant='h6' gutterBottom sx={{ mt: 2 }}>
-            {props.content}asasd
+            {props.content}
           </Typography>
         </Grid>
+        <Grid item xs={3} row>
+          {region ? <Chip label={region} sx={{mr: 2,bgcolor:"#a9def9", color: "white", fontWeight:600}}/> : null}
+          {city ? <Chip label={city} sx={{mr: 2, bgcolor:"#a9def9", color: "white", fontWeight:600}}/> : null}
+        </Grid>
+        <Grid item xs={3}>
+        </Grid>
         <Grid item container direction='column' xs={12}>
           <Typography variant='h6' gutterBottom sx={{ mt: 2 }}>
             작성자
@@ -43,7 +51,6 @@ export default function Review (props) {
               </React.Fragment>
             ))}
           </Grid>
-
         </Grid>
       </Grid>
       <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>

diff --git 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
@@ -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,32 @@ 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 +103,11 @@ export default function WriteForm (props) {
               label="region"
               onChange={handleRegionChange}
             >
-              {regions.map((item, idx) => <MenuItem key={idx} value={item}>{item}</MenuItem>)}
+              {regions.map((item, idx) => (
+                <MenuItem sx={{pl: 2}} key={idx} value={item}>
+                  <Chip label={item} sx={{bgcolor:"#a9def9", color: "white", fontWeight:600}}/>
+                </MenuItem>)
+              )}
             </Select>
           </FormControl>
         </Grid>
@@ -92,12 +121,15 @@ export default function WriteForm (props) {
               label="city"
               onChange={handleCityChange}
             >
-              {cities.map((item, idx) => <MenuItem key={idx} value={item}>{item}</MenuItem>)}
+              {cityList.map((item, idx) => (
+              <MenuItem key={idx} value={item}>
+                <Chip label={item} sx={{bgcolor:"#a9def9", color: "white", fontWeight:600}}/>
+              </MenuItem>))}
             </Select>
           </FormControl>
         </Grid>
         <Grid item xs={12}>
-          <Typography sx={{ width: '100%', height: 'auto' }} component='img' src={props.writeImg} alt='' />
+          <Typography sx={{ maxHeight:"500px", width: '100%', height: 'auto' }} component='img' src={props.writeImg} alt='' />
         </Grid>
         <Grid item xs={12}>
           <TextField
@@ -116,7 +148,9 @@ export default function WriteForm (props) {
         <Button
           variant='contained'
           component='label'
-          sx={{ mt: 3, ml: 1 }}
+          sx={{ mt: 3, ml: 1, bgcolor:"#a9def9", "&.MuiButtonBase-root:hover": {
+            bgcolor: "#a9def9"
+          }}}
         >
           Upload File
           <input
@@ -128,7 +162,9 @@ export default function WriteForm (props) {
         <Button
           variant='contained'
           onClick={props.handleNext}
-          sx={{ mt: 3, ml: 1 }}
+          sx={{ mt: 3, ml: 1, bgcolor: "#a9def9", "&.MuiButtonBase-root:hover": {
+            bgcolor: "#a9def9"
+          }  }}
         >
           {props.activeStep !== 0 ? 'Place order' : 'Next'}
         </Button>

diff --git 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/Header.css b/client/src/utils/Header.css
@@ -0,0 +1,5 @@
+.sticky {
+  position: fixed;
+  top: 0;
+  width: 100%
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -57,6 +57,7 @@ const ListContainer = () => { @@
               pr: 3,
             }}>
               <List
                 component="nav" className='nav-list'
                 subheader={
                 <ListSubheader sx={{
@@ Expand Down @@