[add]QnA 임시 저장

cafeflow/src/components/Community/Community.js

@@ -1,22 +1,20 @@
 import React from "react";
-import { useNavigate,Link } from "react-router-dom";
+import { useNavigate, Link } from "react-router-dom";
 import { useState, useEffect } from "react";
 import axios from "axios";
 import { API_URL } from "../Constant";
 import ViewCount from "../../icons/ViewCount.png";
 import "./Community.css";
 
-
-
 const Community = () => {
   const token = localStorage.getItem("jwtToken");
   const [type, setType] = useState("freeBoard");
   const [posts, setposts] = useState([]);
   const [isFreeBoardClick, SetIsFreeBoardClick] = useState(true);
   const [pageNum, setPageNum] = useState(0);
   const [size, setSize] = useState(8);
-  const [keyword,setKeyword]=useState("");
-  const [option,setOption]=useState("제목");
+  const [keyword, setKeyword] = useState("");
+  const [option, setOption] = useState("제목");
   const navigate = useNavigate();
 
   const moveToBoard = () => {
@@ -73,37 +71,37 @@ const Community = () => {
     return `${year}/${month}/${day}`;
   }
 
-  const handleSubmit=(e)=>{
-      e.preventDefault();
-      axios
-      .get(`${API_URL}/boards?page=${pageNum}&size=${size}&boardType=${type}&option=${option}&searchKeyword=${keyword}`, {
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-      })
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    axios
+      .get(
+        `${API_URL}/boards?page=${pageNum}&size=${size}&boardType=${type}&option=${option}&searchKeyword=${keyword}`,
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      )
       .then((response) => {
         setposts(response.data.data.boardList);
-        e.target.value="";
+        e.target.value = "";
       })
       .catch((error) => {
         console.log(error);
       });
-  }
+  };
 
-  const handleKeyDown=(e)=>{
+  const handleKeyDown = (e) => {
     e.preventDefault();
     console.log(e.key);
-
-  }
+  };
 
-  const handleInputChange=(event)=>{
+  const handleInputChange = (event) => {
     setKeyword(event.target.value);
-
-  }
-  const handleSelect=(event)=>{
+  };
+  const handleSelect = (event) => {
     setOption(event.target.value);
-  }
-
+  };
 
   return (
     <div className="a">
@@ -114,30 +112,54 @@ const Community = () => {
             글쓰기
           </button>
         </div>
-        <span className="community-span" style={{ fontWeight: "bold" }}>개발자들과 소통해 보아요! </span>
+        <span className="community-span" style={{ fontWeight: "bold" }}>
+          개발자들과 소통해 보아요!{" "}
+        </span>
         <div className="searchBox">
           <form onSubmit={handleSubmit}>
             <select className="select-box" onChange={handleSelect}>
-                <option value="제목">제목</option>
-                <option value="내용">내용</option>
-                <option value="제목+내용">제목+내용</option>
+              <option value="제목">제목</option>
+              <option value="내용">내용</option>
+              <option value="제목+내용">제목+내용</option>
             </select>
-            <input className="community-search" type="text" placeholder="Search" onChange={handleInputChange}></input>
+            <input
+              className="community-search"
+              type="text"
+              placeholder="Search"
+              onChange={handleInputChange}
+            ></input>
             <button>검색</button>
           </form>
-          
+
           <div
             style={{
               position: "relative",
               marginTop: "3vh",
               display: "flex",
             }}
           >
-
-            <button className="community-checkbox" type="checkbox"  style={{marginRight:"5px"}}></button>
-            <span className="community-checkbox-span" style={{ color: "black" , marginRight:"5px"}}>최신순</span>
-            <button className="community-checkbox" type="checkbox" style={{marginRight:"5px"}}></button>
-            <span className="community-checkbox-span" style={{ color: "black" , marginRight:"5px"}}>인기순</span>
+            <button
+              className="community-checkbox"
+              type="checkbox"
+              style={{ marginRight: "5px" }}
+            ></button>
+            <span
+              className="community-checkbox-span"
+              style={{ color: "black", marginRight: "5px" }}
+            >
+              최신순
+            </span>
+            <button
+              className="community-checkbox"
+              type="checkbox"
+              style={{ marginRight: "5px" }}
+            ></button>
+            <span
+              className="community-checkbox-span"
+              style={{ color: "black", marginRight: "5px" }}
+            >
+              인기순
+            </span>
           </div>
         </div>
         <div className="mycontainer">
@@ -154,48 +176,54 @@ const Community = () => {
           ></span>
         </div>
         <div className="board-container">
-            {/* map 함수를 이용하여 questions에 들어가있는 배열 가져오기 */}
-            {posts.map((post) => (
-              <div>
+          {/* map 함수를 이용하여 questions에 들어가있는 배열 가져오기 */}
+          {posts.map((post) => (
+            <div>
               <ul className="post-list" key={post.boardId}>
                 <li className="community-post-list">
-
                   <div className="community-post-list-up">
-                    <div><span className="community-createdBy">{post.createdBy}</span>
-                      <span className="community-createdAt"> 작성 : {formatDate(post.createdAt)}</span>
+                    <div>
+                      <span className="community-createdBy">
+                        {post.createdBy}
+                      </span>
+                      <span className="community-createdAt">
+                        {" "}
+                        작성 : {formatDate(post.createdAt)}
+                      </span>
                     </div>
                     <div>
                       <img className="viewCountImg" src={ViewCount}></img>
-                       <span className="viewCountSpan">{post.viewCount}</span>
+                      <span className="viewCountSpan">{post.viewCount}</span>
                     </div>
-
                   </div>
-                  <div  className="community-post-list-middle">
-                    <Link className="community-title" to={isFreeBoardClick?`/freepage/${post.boardId}`:`/sharepage/${post.boardId}`}>
+                  <div className="community-post-list-middle">
+                    <Link
+                      className="community-title"
+                      to={
+                        isFreeBoardClick
+                          ? `/freepage/${post.boardId}`
+                          : `/sharepage/${post.boardId}`
+                      }
+                    >
                       {post.title}
                     </Link>
                   </div>
-                  <div  className="community-post-list-down">
-
-                  </div>
+                  <div className="community-post-list-down"></div>
                 </li>
-
               </ul>
-              <div className="divider2">
-              </div>  
-              </div>
-
-            ))}
+              <div className="divider2"></div>
+            </div>
+          ))}
           <div className="pageNum">
-          {/* <button
+            {/* <button
             className="preButton" onClick={() => setPageNum((prevPageNum) => prevPageNum - 1)}
             disabled={pageNum === 0}
           >
           </button>
           <span className="pageNumber">{pageNum+1}/300</span>
           <button className="nextButton" onClick={() => setPageNum((prevPageNum) => prevPageNum + 1)}>
           </button> */}
-        </div>
+          </div>
         </div>
       </div>
     </div>

cafeflow/src/components/Editor/Draft.js

@@ -0,0 +1,59 @@
+// import { convertToRaw } from "draft-js";
+// import draftToHtml from "draftjs-to-html";
+// import { useEffect, useState } from "react";
+// import { EditorState } from "draft-js";
+// import { Editor } from "react-draft-wysiwyg";
+// import draftjsToHtml from "draftjs-to-html";
+
+// import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
+
+// import "./Draft.module.css";
+
+// const Draft = () => {
+//   const [editorState, setEditorState] = useState(EditorState.createEmpty());
+//   const [htmlString, setHtmlString] = useState("");
+
+//   const handleSave = () => {
+//     const rawContentState = convertToRaw(editorState.getCurrentContent());
+//     const htmlOutput = draftToHtml(rawContentState);
+
+//     // Here, you can save the `htmlOutput` to your backend or perform other tasks
+//     console.log(htmlOutput);
+//   };
+
+//   const updateTextDescription = async (state) => {
+//     await setEditorState(state);
+//     const html = draftjsToHtml(convertToRaw(editorState.getCurrentContent()));
+//     setHtmlString(html);
+//   };
+
+//   const uploadCallback = () => {
+//     console.log("이미지 업로드");
+//   };
+
+//   return (
+//     <>
+//       <div className="Draft_Container">
+//         <Editor
+//           placeholder="게시글을 작성해주세요"
+//           editorState={editorState}
+//           onEditorStateChange={updateTextDescription}
+//           toolbar={{
+//             image: { uploadCallback: uploadCallback },
+//           }}
+//           localization={{ locale: "ko" }}
+//           editorStyle={{
+//             height: "400px",
+//             width: "80%",
+//             border: "3px solid lightgray",
+//             padding: "20px",
+//             color: "black",
+//           }}
+//         />
+//         <button onClick={handleSave}>Save</button>
+//       </div>
+//     </>
+//   );
+// };
+
+// export default Draft;

cafeflow/src/components/Editor/Draft.module.css

@@ -0,0 +1,26 @@
+.wrapper-class {
+  display: flex;
+  width: 80%;
+
+  flex-direction: row;
+}
+
+.editor-class {
+  /* Styles for the editor input area */
+  border: 1px solid black;
+  padding: 5px;
+  min-height: 200px;
+}
+
+.toolbar-class {
+  /* Styles for the toolbar */
+  width: 80%;
+}
+
+.Draft_Container {
+  display: flex;
+}
+
+.rdw-option-wrapper {
+  color: black !important;
+}

cafeflow/src/components/Login/Login.js

@@ -26,6 +26,7 @@ const Login = () => {
 
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [point, setPoint] = useState("");
 
   const setToken = useSetRecoilState(tokenState);
   const setAge = useSetRecoilState(ageState);
@@ -49,7 +50,7 @@ const Login = () => {
           password: password,
         })
         .then((response) => {
-          const { jwtToken, email, age, nickname } = response.data;
+          const { jwtToken, email, age, nickname, point } = response.data;
 
           console.log(response.data);
           setToken(jwtToken);
@@ -61,6 +62,9 @@ const Login = () => {
           localStorage.setItem("email", email);
           localStorage.setItem("nickname", nickname);
           localStorage.setItem("age", age);
+          localStorage.setItem("point", point);
+
+          console.log(point);
 
           alert("로그인에 성공했습니다.");
           navigate("/");

cafeflow/src/components/QnAForm/QnAForm.css

@@ -0,0 +1,30 @@
+.QnaForm_Container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  flex-direction: column;
+  background-color: white;
+}
+
+.QnAFormContainer {
+  width: 60vw;
+  height: 80vh;
+  border: 1px solid lightgray;
+  /* justify-content: center; */
+  /* align-items: center; */
+  flex-direction: column;
+  display: flex;
+  margin-top: 11vh;
+  border-radius: 20px;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+  padding: 2vw;
+}
+
+form > h2 {
+  margin-bottom: 1vh;
+}
+
+.QnAInput {
+}