From 59bacfe5f2127f1e2f319f56b96dccd8cec605a5 Mon Sep 17 00:00:00 2001
From: EthanKIM <khg023246@gmail.com>
Date: Fri, 4 Nov 2022 13:48:20 +0900
Subject: [PATCH] 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 a9f622e3..ec3e9037 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 (
     <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>
diff --git a/client/src/Pages/WritePage.js b/client/src/Pages/WritePage.js
index d72cc42f..f49fb454 100644
--- a/client/src/Pages/WritePage.js
+++ b/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>
             ))}
diff --git a/client/src/components/ListContainer.js b/client/src/components/ListContainer.js
index 278843dc..9399f62c 100644
--- 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
index 5a1eb07d..9d111275 100644
--- 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/WriteForm.js b/client/src/components/WriteForm.js
index df8153fd..1a08dd33 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 e69de29b..b9f8bbc0 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 bc8926ce..618619b8 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;