Merge pull request #36 from LikeLionHGU/hwan_#32/글쓰기

Hwan #32/글쓰기
LikeLionHGU · Jul 31, 2024 · 0020f2d · 0020f2d
2 parents 3280659 + 67b669a
commit 0020f2d
Show file tree

Hide file tree

Showing 7 changed files with 199 additions and 79 deletions.
diff --git a/src/App.js b/src/App.js
@@ -4,6 +4,7 @@ import Create from "./pages/Create";
 import List from "./pages/project/List";
 import Detail from "./pages/project/Detail";
 import Mypage from "./pages/Mypage";
+import Update from "./pages/project/Update";
 import Board from "./pages/Board";
 
 function App() {
@@ -15,6 +16,7 @@ function App() {
         <Route path="/list" element={<List />} />
         <Route path="/detail" element={<Detail />} />
         <Route path="/mypage" element={<Mypage />} />
+        <Route path="/update" element={<Update />} />
         <Route path="/board" element={<Board />} />
       </Routes>
     </BrowserRouter>

diff --git a/src/components/Slide.jsx b/src/components/Slide.jsx
@@ -52,6 +52,10 @@ const SlideContent = ({ data, mode }) => {
 export default function Slide({ mode, data }) {
   const prevRef = useRef(null);
   const nextRef = useRef(null);
+
+  const handleSlideClick = (id) => {
+    console.log("id:", id);
+  };
   return (
     <div
       className="slide-container"
@@ -97,7 +101,7 @@ export default function Slide({ mode, data }) {
         className="slide-mySwiper"
       >
         {data.map((item, index) => (
-          <SwiperSlide key={index}>
+          <SwiperSlide key={index} onClick={() => handleSlideClick(item.id)}>
             <SlideContent data={item} mode={mode} />
           </SwiperSlide>
         ))}

diff --git a/src/components/Write.jsx b/src/components/Write.jsx
@@ -80,8 +80,8 @@ export default function Write() {
         "undo",
         "redo",
         "|",
-        "heading",
-        "style",
+        // "heading",
+        // "style",
         "|",
         "fontSize",
         "fontFamily",
@@ -301,46 +301,45 @@ export default function Write() {
   };
 
   return (
-    <div>
-      <div className="main-write-container">
-        <div
-          className="editor-container editor-container_document-editor editor-container_include-style"
-          ref={editorContainerRef}
-        >
-          <div
+    <div className="main-write-container">
+      <div
+        className="editor-container editor-container_document-editor editor-container_include-style"
+        ref={editorContainerRef}
+      >
+        {/* 수정 삽입 서식 도움말 */}
+        {/* <div
             className="editor-container__menu-bar"
             ref={editorMenuBarRef}
-          ></div>
-          <div
-            className="editor-container__toolbar"
-            ref={editorToolbarRef}
-          ></div>
-          <div className="editor-container__editor-wrapper">
-            <div className="editor-container__editor">
-              <div ref={editorRef}>
-                {isLayoutReady && (
-                  <CKEditor
-                    onReady={(editor) => {
-                      editorToolbarRef.current.appendChild(
-                        editor.ui.view.toolbar.element
-                      );
-                      editorMenuBarRef.current.appendChild(
-                        editor.ui.view.menuBarView.element
-                      );
-                    }}
-                    onAfterDestroy={() => {
-                      Array.from(editorToolbarRef.current.children).forEach(
-                        (child) => child.remove()
-                      );
-                      Array.from(editorMenuBarRef.current.children).forEach(
-                        (child) => child.remove()
-                      );
-                    }}
-                    editor={DecoupledEditor}
-                    config={editorConfig}
-                  />
-                )}
+          ></div> */}
+        <div className="editor-container__toolbar" ref={editorToolbarRef}></div>
+        <div className="editor-container__editor-wrapper">
+          <div className="editor-container__editor">
+            <div ref={editorRef}>
+              <div id="editor-history-btn-container">
+                <div id="editor-history-btn">History</div>
               </div>
+              {isLayoutReady && (
+                <CKEditor
+                  onReady={(editor) => {
+                    editorToolbarRef.current.appendChild(
+                      editor.ui.view.toolbar.element
+                    );
+                    editorMenuBarRef.current.appendChild(
+                      editor.ui.view.menuBarView.element
+                    );
+                  }}
+                  onAfterDestroy={() => {
+                    Array.from(editorToolbarRef.current.children).forEach(
+                      (child) => child.remove()
+                    );
+                    Array.from(editorMenuBarRef.current.children).forEach(
+                      (child) => child.remove()
+                    );
+                  }}
+                  editor={DecoupledEditor}
+                  config={editorConfig}
+                />
+              )}
             </div>
           </div>
         </div>

diff --git a/src/pages/Mainpage.jsx b/src/pages/Mainpage.jsx
@@ -39,36 +39,33 @@ export default function Mainpage() {
     };
 
     const fetchAllProjects = () => {
-      axios.get('https://likelion.info/project/get/all', {
-        headers: { Authorization: `Bearer ${token}` },
-        withCredentials: true
-      })
-      .then(response => {
-        setProjects(response.data);
-      })
-      .catch(error => {
-        console.error('Error fetching posts:', error);
-        navigate('/', { replace: true });
-      });
+      axios
+        .get("https://likelion.info/project/get/all", {
+          headers: { Authorization: `Bearer ${token}` },
+          withCredentials: true,
+        })
+        .then((response) => {
+          setProjects(response.data);
+        })
+        .catch((error) => {
+          console.error("Error fetching posts:", error);
+          navigate("/", { replace: true });
+        });
     };
 
-
-
-    fetchBestProjects();
     fetchAllProjects();
-
-
-
-
+    fetchBestProjects();
   }, []);
 
-  useEffect(() => {
-    console.log(bestProjects);
-  }, [bestProjects]);
+  // useEffect(() => {
+  //   console.log(bestProjects);
+  // }, [bestProjects]);
 
-  useEffect(() => {
-    console.log(projects);
-  }, [projects]);
+  // useEffect(() => {
+  //   console.log(
+  //     projects.filter((project) => project.isRecruit && project.isPublic)
+  //   );
+  // }, [projects]);
 
   return (
     <div className="main-page">
@@ -94,7 +91,12 @@ export default function Mainpage() {
             </div>
           </div>
           <div className="main-slide-container">
-            <Slide mode={0} data={bestProjects} />
+            <Slide
+              mode={0}
+              data={projects.filter(
+                (project) => project.isRecruit && project.isPublic
+              )}
+            />
           </div>
         </div>
         <div className="main-section">
@@ -109,7 +111,12 @@ export default function Mainpage() {
             </div>
           </div>
           <div className="main-slide-container">
-            <Slide mode={0} data={bestProjects} />
+            <Slide
+              mode={0}
+              data={projects.filter(
+                (project) => project.isFinished && project.isPublic
+              )}
+            />
           </div>
         </div>
         <div className="main-section">
@@ -124,7 +131,10 @@ export default function Mainpage() {
             </div>
           </div>
           <div className="main-slide-container">
-            <Slide mode={0} data={bestProjects} />
+            <Slide
+              mode={0}
+              data={projects.filter((project) => !project.isFinished)}
+            />
           </div>
         </div>
       </div>

diff --git a/src/pages/project/Update.jsx b/src/pages/project/Update.jsx
@@ -1,10 +1,62 @@
 // 글 수정 페이지
-import Write  from "../../components/Write";
+import { useState } from "react";
+import Header from "../../components/Header";
+import Write from "../../components/Write";
 
+import "../../styles/update.css";
+
+// user === 0 : 독자, 1: 참여자, 2: 관리자
 export default function Update() {
+  const [user, setUser] = useState(0);
   return (
-    <>
-      <Write />
-    </>
+    <div id="update-main-container">
+      <Header mode={3} />
+      <div id="update-write-container">
+        <div id="update-left">
+          {user === 0 ? (
+            <div id="update-left-contents">
+              <div>갈피 목록</div>
+              <div>
+                <div>1갈피..</div>
+              </div>
+            </div>
+          ) : user === 1 ? (
+            <div id="update-left-contents">
+              <div>미승인 사유</div>
+              <div>
+                <div>현재 승인 검토가 진행되지 않음</div>
+              </div>
+            </div>
+          ) : (
+            <div
+              id="update-left-contents"
+              style={{ background: "white" }}
+            ></div>
+          )}
+        </div>
+        <div id="update-middle">
+          <Write />
+        </div>
+        <div id="update-right">
+          {user === 0 ? (
+            <></>
+          ) : user === 1 ? (
+            <div id="update-right-contents">
+              <div>History</div>
+              <div>
+                <div>현재 승인 검토가 진행되지 않음</div>
+              </div>
+            </div>
+          ) : (
+            <div id="update-right-contents">
+              <div>History</div>
+              <div>
+                <div>현재 승인 검토가 진행되지 않음</div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
   );
 }
diff --git a/src/styles/update.css b/src/styles/update.css
@@ -0,0 +1,30 @@
+#update-main-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#update-write-container {
+  display: flex;
+
+  width: 95%;
+}
+
+#update-left {
+  flex: 1;
+  min-width: 150px;
+}
+
+#update-left-contents {
+  margin-right: 40px;
+  background-color: #f7f7f7;
+}
+
+#update-middle {
+  flex: 3;
+  width: 100%;
+}
+
+#update-right {
+  flex: 1;
+}