first completion

@@ -47,7 +47,7 @@
     border-bottom: 1px solid black;
     padding-left:10%;
     display:grid;
-    grid-template-columns: 15% 20% 40%;
+    grid-template-columns: 25% 50% 15%;
     grid-template-rows: 100%;
     align-items: center;
     padding-top: 1%;
@@ -58,6 +58,7 @@
     border: 0px solid black;
     background-color: #FDF5F3;
     height:100%;
+    width:100%;
     max-height: 18px;
     display: block;
     text-align: left;

@@ -4,11 +4,12 @@ import { useEffect, useState } from 'react';
 import './CommuPage.css'
 
 function InnerContent(props) {
+
   return (
-    <div className='outer'>
+    <div className='outer' value={props.id} onMouseUp={() => { window.location.href = `/showcontent/${props.id}`; }}>
       <div className='inner'>{props.title}</div>
-      <div className='inner'></div>
       <div className='inner'>{props.content}</div>
+      <div className='inner'>{props.time}</div>
     </div>
   );
 }
@@ -39,7 +40,7 @@ function CommuPage() {
         <div>
           {list.map((item, index) => {
             return (
-              <InnerContent key={index} title={item.title} content={item.content} />
+              <InnerContent key={index} id= {item.id} title={item.title} content={item.content} time={item.time} />
             )
           })}
         </div>

@@ -4,16 +4,16 @@ import { useEffect, useState } from 'react';
 import './CommuPage.css'
 
 function InnerContent(props) {
+
   return (
-    <div className='outer'>
+    <div className='outer' value={props.id} onMouseUp={() => { window.location.href = `/showcontent/${props.id}`; }}>
       <div className='inner'>{props.title}</div>
-      <div className='inner'></div>
       <div className='inner'>{props.content}</div>
+      <div className='inner'>{props.time}</div>
     </div>
   );
 }
 
-
 function CommuPageYes() {
   const [list2, setList2] = useState([]);
   const moveToToday = () => {window.location.href = '/mealtalk';}
@@ -45,7 +45,7 @@ function CommuPageYes() {
         <div>
           {list2.map((item, index) => {
             return (
-              <InnerContent key={index} title={item.title} content={item.content} />
+              <InnerContent key={index} id= {item.id} time={item.time} title={item.title} content={item.content} />
             )
           })}
         </div>

+.contentOuter{
+    height: 90%;
+    width: 90%;
+    max-width: 1024px;
+
+    display:grid;
+    grid-template-rows: 15% 70% 10% ;
+    grid-template-columns: 100%;
+    margin: 2% 2%;
+    padding: 2% 1%;
+    background-color: #FDF5E6;
+    place-items: center;
+}
+
+
+.contentOuter :nth-child(1),
+.contentOuter :nth-child(2),
+.contentOuter :nth-child(3){
+    display:block;
+    background-color: ivory;
+    width:95%;
+    height: 95%;
+    border: 1px solid black;
+    padding: 1% 5%;
+}
+.contentOuter :nth-child(1){ /*제목*/
+    justify-content:left;
+    font-size:40px;
+
+}
+.contentOuter :nth-child(2){ /*본문*/
+    justify-content:left;
+    font-size:20px;
+    margin-bottom: 0px;
+}
+.contentOuter :nth-child(3){ /*날짜*/
+    text-align: right;
+    
+    margin-top: 0px;
+}
\ No newline at end of file

+import './App.css';
+import axios from "axios";
+import { useEffect, useState } from 'react';
+import './ShowContent.css'
+
+function ShowContent() {
+    const [title, setTitle] = useState('');
+    const [content, setContent] = useState('');
+    const [item, setItem] = useState('');
+
+   const getContent = async() => {
+      const contId = window.location.pathname.substring(13);
+      console.log(contId);
+      axios.get(`/api/get/${contId}`).then((res)=>{
+        setTitle(res.data.title);
+        setContent(res.data.content);
+        setItem(res.data.date+' '+res.data.time);
+
+        console.log(title, content, item);
+      });
+   };
+
+  useEffect(()=>{
+    getContent();
+  }, []);
+  
+  return (
+    <div className='contentOuter'>
+      <div className='content'>{title}</div>
+      <div className='content'>{content}</div>
+      <div className='content'>{item}</div>
+    </div>
+  );
+}
+export default ShowContent;
\ No newline at end of file

@@ -93,7 +93,7 @@
     border-bottom: 1px solid black;
     padding-left:10%;
     display:grid;
-    grid-template-columns: 15% 20% 40%;
+    grid-template-columns: 25% 50% 15%;
     grid-template-rows: 100%;
     align-items: center;
     padding-top: 1%;
@@ -104,6 +104,7 @@
     border: 0px solid black;
     background-color: #FDF5F3;
     height:100%;
+    width:100%;
     max-height: 18px;
     display: block;
     text-align: left;

@@ -3,17 +3,18 @@ import axios from "axios";
 import { useEffect, useState } from 'react';
 import './MainPage.css'
 
+
 function InnerContent(props) {
+
   return (
-    <div className='outer'>
+    <div className='outer' value={props.id} onMouseUp={() => { window.location.href = `/showcontent/${props.id}`; }}>
       <div className='inner'>{props.title}</div>
-      <div className='inner'></div>
       <div className='inner'>{props.content}</div>
+      <div className='inner'>{props.time}</div>
     </div>
   );
 }
 
-
 function MainPage() {
   const [list, setList] = useState([]);
   let currentYear = new Date().getFullYear();
@@ -21,7 +22,6 @@ function MainPage() {
   let currentDate = new Date().getDate();
   let today = currentYear + '/' + currentMonth + '/' + currentDate;
 
-
   const todayMealTable = async () => {
     axios.get("/api/todayMenu").then(
       (res) => {
@@ -73,11 +73,12 @@ function MainPage() {
     var idArray = [];
     for(var id of arr) idArray.push(id);
     axios.post('/api/get',{idArray:idArray}).then((res)=>{
-      const reverseArr = res.data.reverse().slice(0,8);
+      const reverseArr = res.data.reverse().slice(0,8); // 8개만 띄우기
       setList(reverseArr);
       console.log(reverseArr);
     })
-  }
+  };
+
 
   useEffect(() => {
     todayMealTable();
@@ -99,10 +100,10 @@ function MainPage() {
       </div>
       <div className='mainpageUnder'>
         <div>메뉴에 대한 이야기</div>
-        <div>
+        <div className='contentCover'>
           {list.map((item, index) => {
             return (
-              <InnerContent key={index} title={item.title} content={item.content} />
+              <InnerContent key={index} id= {item.id} title={item.title} content={item.content} time={item.time} />
             )
           })}
         </div>

@@ -12,6 +12,7 @@ import MenuPage from './Component/MenuPage'; // 학식 메뉴 화면
 import CommuPage from './Component/CommuPage'; // 학식 커뮤 화면(오늘)
 import CommuPageYes from './Component/CommuPageYes'; // 학식 커뮤 화면(어제)
 import Writing from './Component/Writing'; // 글 작성 화면
+import ShowContent from './Component/ShowContent'; // 게시글 보는 화면
 
 import {
   BrowserRouter as Router,
@@ -33,6 +34,7 @@ root.render(
           <Route path="/mealtalk" element={<CommuPage />} />
           <Route path="/mealtalk/yesterday" element={<CommuPageYes />} /> 
           <Route path="/writing" element={<Writing />} />
+          <Route path="/showcontent/:id" element={<ShowContent />}/>
         </Routes>
       </Router>
     </div>

@@ -210,13 +210,9 @@ router.get('/api/waiting', async (req, res) => {
     const time = Number(hour + minute);
 
     var result = [];
-<<<<<<< HEAD
-    for(const waiting of waitingList){
-      if(time - Number(waiting.time.replace(':','')) <= 100){
-=======
+
     for (const waiting of waitingList) {
       if (time - Number(waiting.time.replace(':', '')) <= 100) {
->>>>>>> 18c016a2decd0bfd1caea0f6375e92c895b444f3
         result.push(waiting)
       }
     }
@@ -232,18 +228,9 @@ router.post('/api/waiting', async (req, res) => {
     const today = getCurrentDate();
     var waitingList = await waitingModel.findOne({ date: today });
 
-<<<<<<< HEAD
-    const date = new Date();
-    var hour = date.getHours();
-    hour = hour < 10 ? '0' + hour.toString() : hour.toString();
-    var minute = date.getMinutes();
-    minute = minute < 10 ? '0' + minute.toString() : minute.toString();
-    const time = hour + ":" + minute;
-    const newWaiting = {value: req.body.value, time: time};
-=======
+
     const time = getCurrentTime();
     const newWaiting = { value: req.body.value, time: time };
->>>>>>> 18c016a2decd0bfd1caea0f6375e92c895b444f3
 
     if (waitingList == null) await waitingModel({ date: today, waiting: [newWaiting] }).save();
     else {
@@ -261,11 +248,7 @@ router.post('/api/waiting', async (req, res) => {
 
 
 
-<<<<<<< HEAD
-function setting(resultJson){
-=======
 function setting(resultJson) {
->>>>>>> 18c016a2decd0bfd1caea0f6375e92c895b444f3
   var result = {}
   result.fo_date = [resultJson.fo_date1, resultJson.fo_date2, resultJson.fo_date3, resultJson.fo_date4, resultJson.fo_date5];
   result.fo_menu_lun = [resultJson.fo_menu_lun1, resultJson.fo_menu_lun2, resultJson.fo_menu_lun3, resultJson.fo_menu_lun4, resultJson.fo_menu_lun5];

@@ -535,11 +535,6 @@
   "resolved" "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz"
   "version" "0.5.2"
 
-"fsevents@~2.3.2":
-  "integrity" "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="
-  "resolved" "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
-  "version" "2.3.2"
-
 "function-bind@^1.1.1":
   "integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
   "resolved" "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"