see articles through main page

backend/src/data/articleService.js

@@ -17,6 +17,15 @@ const articleService = {
     } catch (err) {
       throw err;
     }
+  },
+
+  async findAllArticle() {
+    try {
+      const articlelist = await Article.find({}).populate('author', 'nickname').exec();
+      return articlelist;
+    } catch (err) {
+      throw err;
+    }
   }
 };
 

backend/src/index.js

@@ -5,6 +5,7 @@ import process from 'process';
 import moment from 'moment';
 import cookieParser from 'cookie-parser';
 import session from 'express-session';
+
 import connectDB from './db.js';
 import userService from './data/userService.js';
 import articleService from './data/articleService.js';
@@ -127,62 +128,19 @@ app.get("/check", (req, res) => {
   else {
 	  res.send(false);
   }
-/*
-	console.log("로그아웃");
-	if (req.session.sessionid) {
+});
 
-		console.log("로그아웃중입니다!");
-		req.session.destroy((err) => {
-			if (err) {
-				console.log("세션 삭제시에 에러가 발생했습니다.");
-				return;
+app.get("/loadarticle", async (req, res) => {
+  if(req.session.sessionid){	
+	console.log("세션 O")
   }
-			console.log("세션이 삭제됐습니다.");
-		});
-		res.clearCookie('name');
-		res.send(req.body.name);
-	} else {
-		console.log("로그인이 안돼있으시네요?");
-		res.send(req.body.name);
+  else {
+	console.log("세션 X")
   }
-  */
-});
-
-/*
-
-const ArticleSchema = new mongoose.Schema({
-  title: {
-    type: String,
-    required: true,
-  },
-  articleId: {
-    type: String,
-    unique: true,
-  },
-  content: {
-    type: String,
-    required: true,
-  },
-  imageUrls: {
-    type: [String],
-  },
-  author: {
-    type: UserSchema,
-    required: true,
-  },
-  comments: {
-    type: [CommentSchema],
-  },
-  likes: {
-    type: [UserSchema],
-  },
-  createdAt: {
-    type: Date,
-    default: Date.now,
-  },
+  const articles = await articleService.findAllArticle();
+  res.send(JSON.stringify(articles) );
 });
 
-*/
 
 
 

frontend/src/App.js

@@ -65,7 +65,7 @@ function App() {
 				<Route path="/" element={<Main/>}></Route>
 				<Route path="/login" element={<Login/>}></Route>
 				<Route path="/search" element={<Search/>}></Route>
-			{<Route path="/postwrite" element={<PostWrite/>}></Route> }
+				<Route path="/postwrite" element={<PostWrite/>}></Route> 
 			</Routes>
 		</UserContext.Provider>
 		{/* <Footer/> */}

frontend/src/components/Article.js

+import React, {useEffect, useState} from "react";
+
+import { useParams } from 'react-router-dom';
+
+/*
+ {
+    _id: new ObjectId('65675ee46aab64d2ed605e3c'),
+    title: 'ㅋ',
+    content: 'ㅋㅋ',
+    imageUrls: [],
+    author: new ObjectId('6566403f224df4126bfb3e50'),
+    comments: [],
+    likes: [],
+    createdAt: 2023-11-29T15:55:16.525Z,
+    __v: 0
+  }
+
+*/
+
+function Article(prop) {
+  return (
+    <div>
+      <h1>{prop.title}</h1>
+      <h2>{prop.author}</h2>
+      <p>{prop.content}</p>
+      {/* 게시글의 내용을 렌더링합니다. */}
+    </div>
+  );
+}
+
+export default Article;

frontend/src/components/GoogleLoginButton.js

@@ -25,7 +25,7 @@ const GoogleLoginButton = () => {
     navigate("/");
   }
   return (
-    <>
+
       <GoogleOAuthProvider clientId={clientId}>
         <GoogleLogin
           onSuccess={(res) => {
@@ -46,7 +46,7 @@ const GoogleLoginButton = () => {
           }}
         />
       </GoogleOAuthProvider>
-    </>
+
   );
 };
 

frontend/src/components/Post.js

-
-/*
-title: {
-    type: String,
-    required: true,
-  },
-  articleId: {
-    type: String,
-    unique: true,
-  },
-  content: {
-    type: String,
-    required: true,
-  },
-  imageUrls: {
-    type: [String],
-  },
-  author: {
-    type: UserSchema,
-    required: true,
-  },
-  comments: {
-    type: [CommentSchema],
-  },
-  likes: {
-    type: [UserSchema],
-  },
-  createdAt: {
-    type: Date,
-    default: Date.now,
-  },
-});
-
-*/
-
-import React, {useEffect, useState} from "react";
-
-import { useParams } from 'react-router-dom';
-
-function Post() {
-  const [post, setPost] = useState(null);
-  const { id } = useParams(); // URL에서 id를 가져온다./-> articleId
-
-  useEffect(() => {
-    // id를 
-    // 예시: fetchPost(id).then(data => setPost(data));
-  }, [id]);
-
-  if (!post) {
-    return <div>Loading...</div>;
-  }
-
-  return (
-    <div>
-      <h1>{post.title}</h1>
-      <h2>{post.author}</h2>
-      <p>{post.content}</p>
-      {/* 게시글의 내용을 렌더링합니다. */}
-    </div>
-  );
-}
-
-export default Post;

frontend/src/pages/Main.js

 import { useNavigate } from 'react-router-dom';
 import cookie from 'react-cookies';
 import { UserContext } from '../Usercontext.js';
-
+import Article from '../components/Article.js';
 import React, { useEffect, useState, useContext} from 'react';
 
+import axios from 'axios';
+axios.defaults.withCredentials = true;
+
+
 function Button({history, children}){
   const navigate = useNavigate(); 
   return(
@@ -16,10 +20,28 @@ function Button({history, children}){
 function Main() {
 
   const userContext = useContext(UserContext);
+  const [articleList, setArticleList] = useState([])
+  let listItem = [];
+  listItem = articleList.map((article)=>{
+    return(
+      <Article 
+      title={article.title}
+      author = {article.author.nickname}
+      content={article.content} 
+    ></Article>
 
+    )
+  }
+
+  )
   useEffect(() => {
-    // console.log(userContext)
+    requestLoadArticle()
+    .then((response) => {
+      console.log(response)
+      setArticleList(response.data)
+    })
   });
+
   return(
     <div className="App">
       <h1>메인 페이지 입니다.</h1>
@@ -27,8 +49,40 @@ function Main() {
           소개 내용을 담을 공간 
         </div>
         <Button>검색</Button>
+        {listItem}
     </div>)
   ;
 }
 
+
+async function requestLoadArticle() {
+	const response = await axios({
+	  url: 'http://localhost:8080/loadarticle', // 통신할 웹문서
+	  method: 'get', // 통신할 방식
+	});
+	return response;
+  }
+
 export default Main;
+
+/*
+ {
+    _id: new ObjectId('65675ee46aab64d2ed605e3c'),
+    title: 'ㅋ',
+    content: 'ㅋㅋ',
+    imageUrls: [],
+    author: {
+      _id: new ObjectId('6566403f224df4126bfb3e50'),
+      user_id: 'grasscraft0714@gmail.com',
+      nickname: 'ᄅᄅᄒ',
+      email: 'grasscraft0714@gmail.com',
+      google: [Object],
+      __v: 0
+    },
+    comments: [],
+    likes: [],
+    createdAt: 2023-11-29T15:55:16.525Z,
+    __v: 0
+  }
+
+*/