feat: renew mainpage article list

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 (
     <ThemeProvider theme={context.state.theme}>
       <Grid container spacing={4} justifyContent='center'>
@@ -33,7 +35,7 @@ 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>

client/src/Pages/WritePage.js

@@ -127,7 +127,7 @@ export default function WritePage () {
           </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>
             ))}

client/src/components/ListContainer.js

@@ -57,6 +57,7 @@ const ListContainer = () => {
           pr: 3,
         }}>
           <List
+
             component="nav" className='nav-list'
             subheader={
             <ListSubheader sx={{

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>

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") {

client/src/utils/Header.css

@@ -0,0 +1,5 @@
+.sticky {
+  position: fixed;
+  top: 0;
+  width: 100%
+}

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;