Merge pull request #9 from TaePoong719/feature/#7

마크다운 에디터 구현을 위한 초기 세팅 (이슈 #7)

src/components/AttCorrection.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const AttCorrection = () => {
+  return <div>AttCorrection</div>;
+};
+
+export default AttCorrection;

src/components/AttRecognition.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const AttRecognition = () => {
+  return <div>AttRecognition</div>;
+};
+
+export default AttRecognition;

src/components/Attendance.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { useState } from "react";
+import WikiEdit from "./WikiEdit";
+
+interface ValueState {
+  id: number;
+  title: string;
+  content: string;
+}
+
+const Attendance = () => {
+  //수정 창 열고 닫기
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [value, setValue] = useState<ValueState>({
+    id: 1,
+    title: " 제목입니다",
+    content: "내용임",
+  });
+
+  //제목, 내용 상태관리
+  const [title, setTitle] = useState<string>("제목");
+  const [content, setContent] = useState<string>("글 내용");
+
+  // 타이핑 하는 값 받아오기
+  const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setTitle(e.target.value);
+    console.log(e.target.value);
+  };
+
+  const handleContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setContent(e.target.value);
+    console.log(e.target.value);
+  };
+
+  // 수정 완료 버튼 함수
+  const handleSubmitBtn = () => {
+    const updatedValue = { ...value, title, content };
+    setValue(updatedValue);
+    setIsOpen(false);
+    console.log(isOpen);
+  };
+
+  if (!!isOpen)
+    return (
+      <WikiEdit
+        handleTitleChange={handleTitleChange}
+        title={title}
+        content={content}
+        handleSubmitBtn={handleSubmitBtn}
+        handleContentChange={handleContentChange}
+      />
+    );
+  return (
+    <>
+      <main className="main-container">
+        <button onClick={() => setIsOpen(true)}> 수정 </button>
+        <div> {title} </div>
+        <div> {content} </div>
+      </main>
+    </>
+  );
+};
+
+export default Attendance;

src/components/Curriculum.tsx

@@ -1,9 +1,7 @@
-import React from 'react'
+import React from "react";
 
 const Curriculum = () => {
-  return (
-    <div>커리큘럼 관련 Wiki - Curriculum 컴포넌트</div>
-  )
-}
+  return <div>커리큘럼 관련 Wiki - Curriculum 컴포넌트</div>;
+};
 
-export default Curriculum
+export default Curriculum;

src/components/Leave.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Leave = () => {
+  return <div>Leave</div>;
+};
+
+export default Leave;

src/components/Sidebar.tsx

@@ -1,41 +1,48 @@
-import React from 'react'
-import { Link, useLocation } from 'react-router-dom'
-import styled from 'styled-components'
-import "./Sidebar.css"
+import React from "react";
+import { Link, useLocation } from "react-router-dom";
+import styled from "styled-components";
+import "./Sidebar.css";
 
 const Sidebar = () => {
-  const location = useLocation()
-  const hashSplit = location.pathname.split('/')
+  const location = useLocation();
+  const hashSplit = location.pathname.split("/");
 
-  if(hashSplit[1] === 'Wiki'){
-    const sideLink = ["", "교육과정"]
-    const sideName = ["행정", "교육과정"]
-
-    // Wiki 사이드바 
+  if (hashSplit[1] === "Wiki") {
+    //const sideLink = ["", "행정", "학습일정"]
+    const sideName = ["출석", "행정", "학습일정"];
+    const sideLinkAttendance = ["출석 인정", "QR출결 정정 프로세스"];
+    const sideLinkAdmin = ["휴가", "훈련장려금"];
+
+    // Wiki 사이드바
     return (
       <Container>
         <ul className="sidebar__link_wrapper">
-          {
-            sideLink.map((link,idx)=>
-              <li key={sideName[idx]} >
-                <Link to={`/Wiki/${link}`}> {sideName[idx]} </Link>
-              </li>  
-            )
-          }
+          <li key={"출석"}>
+            <Link to={`/Wiki/`}>출석</Link>
+          </li>
+          {sideLinkAttendance.map((link, idx) => (
+            <li key={sideLinkAttendance[idx]}>
+              <Link to={`/Wiki/${link}`}>{link}</Link>
+            </li>
+          ))}
+          <li key={"행정"}>행정</li>
+          {sideLinkAdmin.map((link, idx) => (
+            <li key={sideLinkAdmin[idx]}>
+              <Link to={`/Wiki/${link}`}> {link} </Link>
+            </li>
+          ))}
+          <li key={"학습 일정"}>
+            <Link to={`/Wiki/학습 일정`}>금주의 학습 일정</Link>
+          </li>
         </ul>
       </Container>
-    )
+    );
 
     // Gallery 사이드바
-  }else if(hashSplit[1] === "Gallery"){
-    return (
-      <Container>
-        Gallery Sidebar
-      </Container>
-    )
+  } else if (hashSplit[1] === "Gallery") {
+    return <Container>Gallery Sidebar</Container>;
   }
-
-}
+};
 
 const Container = styled.aside`
   position: fixed;
@@ -46,7 +53,6 @@ const Container = styled.aside`
   width: 140px;
   height: 100%;
   background-color: #ddd;
-`
-
+`;
 
-export default Sidebar
+export default Sidebar;

src/components/TrainingIncentive.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const TrainingIncentive = () => {
+  return <div>TrainingIncentive</div>;
+};
+
+export default TrainingIncentive;

src/components/WikiEdit.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+
+interface ValueState {
+  id: number;
+  title: string;
+  content: string;
+}
+
+interface WikiEditProps {
+  handleSubmitBtn: () => void;
+  handleTitleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleContentChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  content: string;
+  title: string;
+}
+
+const WikiEdit: React.FC<WikiEditProps> = ({
+  handleTitleChange,
+  handleSubmitBtn,
+  handleContentChange,
+  title,
+  content,
+}) => {
+  return (
+    <div>
+      <form>
+        <div>
+          <input name="title" onChange={handleTitleChange} value={title} />
+        </div>
+        <div>
+          <textarea
+            rows={8}
+            onChange={handleContentChange}
+            name="content"
+            value={content}
+          />
+        </div>
+
+        <button onClick={handleSubmitBtn}>수정 완료</button>
+        <button>닫기 </button>
+      </form>
+    </div>
+  );
+};
+
+export default WikiEdit;

src/pages/Wiki.tsx

@@ -1,30 +1,41 @@
-import Sidebar from 'components/Sidebar'
-import React from 'react'
-import styled from 'styled-components'
-import { Route, Routes } from 'react-router-dom'
-import Administration from '../components/Admin'
-import Curriculum from '../components/Curriculum'
+import Sidebar from "components/Sidebar";
+import React from "react";
+import styled from "styled-components";
+import { Route, Routes } from "react-router-dom";
+import Administration from "../components/Admin";
+import Curriculum from "../components/Curriculum";
+import Attendance from "components/Attendance";
+import AttRecognition from "components/AttRecognition";
+import AttCorrection from "components/AttCorrection";
+import Leave from "components/Leave";
+import TrainingIncentive from "components/TrainingIncentive";
 
 const Wiki = () => {
-
   return (
     <>
       <Sidebar />
       <Container>
         <Routes>
-          <Route path="" element={<Administration />}></Route>
-          <Route path="교육과정" element={<Curriculum />}></Route>
+          <Route path="" element={<Attendance />}></Route>
+          <Route path="출석 인정" element={<AttRecognition />}></Route>
+          <Route
+            path="QR출결 정정 프로세스"
+            element={<AttCorrection />}
+          ></Route>
+          <Route path="휴가" element={<Leave />}></Route>
+          <Route path="훈련장려금" element={<TrainingIncentive />}></Route>
+          <Route path="학습 일정" element={<Curriculum />}></Route>
         </Routes>
       </Container>
     </>
-  )
-}
+  );
+};
 
 const Container = styled.section`
   position: relative;
   left: 140px;
   height: calc(100% - 60px);
   width: calc(100% - 140px);
-`
+`;
 
-export default Wiki
+export default Wiki;