Merge branch 'main' into feature/user/#2

package.json

@@ -18,8 +18,10 @@
     "react": "^18.3.1",
     "react-cookie": "^7.1.4",
     "react-dom": "^18.3.1",
+    "react-markdown": "^9.0.1",
     "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",
+    "remark-gfm": "^4.0.0",
     "styled-components": "^6.1.11",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -1,9 +1,10 @@
 import React from 'react';
-import {BrowserRouter,Routes,Route} from 'react-router-dom';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import MainPage from './pages/MainPage';
 import LoginPage from './pages/SignUpPage';
 import SignUpPage from './pages/SignUpPage';
 import SingInPage from './pages/SignInPage';
+import UpdateInfo from './pages/UpdateInfo';
 
 function App() {
   return (
@@ -13,8 +14,9 @@ function App() {
             <Route path="/" element = {<MainPage/>}></Route>
             <Route path="/api/sign-up" element = {<SignUpPage/>}></Route>
             <Route path="/api/login" element = {<SingInPage/>}></Route>
+          <Route path='/info/update/:infoId' element={<UpdateInfo />} />
         </Routes>
-    </BrowserRouter>
+      </BrowserRouter>
     </div>
   );
 }

src/api/FetchInfo.js

@@ -0,0 +1,24 @@
+import axios from 'axios';
+
+export async function fetchPersonInfo(personId) {
+    const response = await axios.get(`/api/info/person/${personId}`);
+    const data = await response.data;
+
+    return data;
+}
+
+export async function fetchSingleInfo(infoId) {
+    const response = await axios.get(`/api/info/${infoId}`);
+    const data = await response.data;
+
+    return data;
+}
+
+export async function updateInfo(infoId, info) {
+    try {
+        const response = await axios.put(`/api/info/${infoId}`, info);
+        console.log(response.data);
+    } catch {
+
+    }
+}

src/components/Description.js

@@ -1,33 +1,26 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
+import { fetchPersonInfo } from '../api/FetchInfo';
+import Info from './Info';
 
 const Description = () => {
+  const [infos, setInfos] = useState([]);
+
+  useEffect(() => {
+    const data = fetchPersonInfo(1);
+    data.then(result => setInfos(result))
+  }, []);
   return (
-    <Paper style={{ padding: 16}}>
+    <Paper style={{ padding: 16 }}>
       <Typography variant="h5" component="h2">
         설명
       </Typography>
       <Typography component="p">
         <ul>
-          <li>ㅋㅋ</li>
-          <li>ㅋㅋ</li>
-          <li>ㅋㅋ</li>
-          <li>ㅋㅋ</li>
-          <li>ㅋㅋ</li>
-          <li>ㅋㅋ</li>
-          <li>ㅋㅋ</li>
-          <li>ㅋㅋ</li>
-          <li>ㅋㅋ</li>
-          <li>ㅋㅋ</li>
-          <li>ㅋㅋ</li>
-          <li>ㅋㅋ</li>
-          <li>ㅋㅋ</li>
-          <li>ㅋㅋ</li>
-          <li>ㅋㅋ</li>
-          <li>ㅋㅋ</li>
-          <li>ㅋㅋ</li>
-
+          {infos && infos.map((info, idx) => {
+            return <Info key={idx} data={info}></Info>
+          })}
         </ul>
         여기에 설명 내용을 작성하세요. 이 부분은 문서의 자세한 정보를 포함합니다.
       </Typography>

src/components/Info.js

@@ -0,0 +1,35 @@
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from 'remark-gfm'
+import styled from 'styled-components';
+import { useNavigate } from 'react-router-dom';
+
+const InfoHeader = styled.div`
+    display: flex;
+    justify-content: space-between;
+`;
+
+const MyBtn = styled.button`
+    border: none;
+    background-color: white;
+`;
+
+export default function Info({ data }) {
+
+    const navigate = useNavigate();
+
+
+
+    return (
+        <>
+            <InfoHeader>
+                <h2>{data.category}</h2>
+                <MyBtn onClick={() => navigate(`/info/update/${data.id}`)}> [ 수정 ] </MyBtn>
+            </InfoHeader>
+            <hr />
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                {data.content}
+            </ReactMarkdown>
+        </>
+    )
+}

src/pages/UpdateInfo.js

@@ -0,0 +1,133 @@
+import React, { useRef, useEffect, useState } from 'react';
+import styled from 'styled-components';
+import Headers from '../components/Headers';
+import { useParams, useNavigate } from "react-router-dom";
+import { fetchSingleInfo, updateInfo } from '../api/FetchInfo';
+import ReactMarkdown from "react-markdown";
+import remarkGfm from 'remark-gfm'
+
+const MainPageWrapper = styled.div`
+  width: 100%;
+  background: #cecece;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-family: 'bmdohyeon';
+  font-size: 2.5vmin;
+  overflow-x:auto;
+  @media screen and (max-width: 768px) {
+    font-size: 4vmin;
+  }
+  
+`;
+
+const UpdateContainer = styled.div`
+  background: white ;
+  padding: 10px;
+  margin: 0 auto;
+  width: 100%;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+const Container = styled.div`
+  position: relative;
+  background: blue;
+  padding: 10px;
+  display: flex;
+  flex-direction: row;
+  justify-content:space-between;
+  width:60vw;
+  margin-top:30px;
+  @media screen and (max-width: 768px) {
+    flex-direction:column;
+  }
+`;
+
+const UpdateHeader = styled.div`
+    display: flex;
+    justify-content: space-between;
+`;
+
+const RanderingBtn = styled.button`
+    border: none;
+    background-color: white;
+    font-weight: bold;
+    font-size: 1em;
+`;
+
+const UpdateForm = styled.form`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+`;
+
+const UpdateTextArea = styled.textarea`
+    width: 90%;
+    border: 1;
+    overflow: visible;
+    text-overflow: ellipsis;
+    resize: none;
+    background-color: rgb(245, 245, 245);
+    border: 1px solid rgb(235, 235, 235);
+    padding: 7px;
+    font-family: 'Noto Sans KR', sans-serif;
+`;
+
+const UpdateBtn = styled.button`
+    width: 40%;
+    margin-top: 10px;
+`;
+
+function UpdateInfo() {
+    const params = useParams();
+    const [info, setInfo] = useState({ category: "", content: "" });
+    const [markdwon, setMarkdwon] = useState("");
+    const textarea = useRef();
+    const navigate = useNavigate();
+
+    const UpdateInfoHandler = (e) => {
+        e.preventDefault();
+        updateInfo(params.infoId, {
+            content: textarea.current.value
+        });
+
+        navigate('/');
+    }
+
+    useEffect(() => {
+        const data = fetchSingleInfo(params.infoId);
+        data.then((result) => setInfo(result));
+    }, []);
+
+    return (
+        <div>
+            <Headers />
+            <MainPageWrapper>
+                <Container>
+                    <UpdateContainer>
+                        <UpdateHeader>
+                            <h2>
+                                {info.category}
+                            </h2>
+                            <RanderingBtn onClick={() => setMarkdwon(textarea.current.value)}> [ 랜더링 ] </RanderingBtn>
+                        </UpdateHeader>
+                        <UpdateForm onSubmit={UpdateInfoHandler}>
+                            <UpdateTextArea ref={textarea} cols={135} rows={25} defaultValue={info.content}></UpdateTextArea>
+                            <UpdateBtn type='submit'>수정</UpdateBtn>
+                        </UpdateForm>
+
+                        <hr />
+                        <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                            {markdwon}
+                        </ReactMarkdown>
+                    </UpdateContainer>
+                </Container>
+            </MainPageWrapper>
+        </div>
+    );
+}
+
+export default UpdateInfo;