$$config title: 기술 설명서 keywords: - 기술 설명서 $$ # 개요 - 리액트 , 스프링 기반의 증권 사이트 구현 - 게시판 기본 기능 구현 # 기능 ## 회원 - 회원가입 - 로그인 - 로그아웃 - 비밀번호 변경 ## 게시판 - 게시글 작성, 수정, 삭제 - 게시글 상세 페이지 ## 댓글 - 게시글 댓글 작성, 삭제 ## 검색 - 게시글 제목 내용 검색 # 기술 설명 ## 메인화면 ![원본이미지](https://i.imgur.com/H9a6uAg.png) - Layout.jsx ```java import React, { useState, useEffect } from "react"; import Contents from "./Contents"; import "./Layout.scss"; import Navbar from "./Navbar"; import Footer from "./Footer"; import Sidbar from "./Sidbar"; function Layout() { return (

); } export default Layout; ``` - 컴포넌트 형식으로 렌더링 했다. - Navbar.jsx - Sidbar.jsx - Contents.jsx ## 회원가입 ![원본이미지](https://i.imgur.com/JYw2ffO.png) - SignUp.jsx ```java const SignUp = () => { const [userName, setUserName] = useState(""); const [userId, setUserId] = useState(""); const [confirmPassword, setConfirmPassword] = useState(""); const [password, setPassword] = useState(""); const registerd = () => { axios .post("http://localhost:7999/account/signUp", { userId, userName, password, confirmPassword, }) .then((response) => { // Handle success. // setSignUp(response.data); if (response.data == true) { alert("회원가입 성공!! 로그인 하세요"); } else if (response.data == false) { alert("정보를 확인하세요"); } setTimeout(() => {}, 2000); }); }; ``` - 아이디, 이름, 패스워드, 패스워드 확인 값을 axios post 요청으로 백엔드에 보내준다. ## 로그인/로그아웃 ![원본이미지](https://i.imgur.com/FYadjsm.png) - Navbar.jsx ```java { const lonned = await axios({ url: "http://localhost:7999/account/signIn", method: "POST", data: { userId, password }, }); setName(lonned.data.username); setId(lonned.data.userId); setId(lonned.data.userName); if (lonned.data.aboolean == true) { setLonned(lonned.data); setLonned(lonned.data.aboolean); setTimeout(() => {}); alert("로그인 성공"); } else if (lonned.data.aboolean == false) { setLonned(lonned.data.userName); alert("빈칸을 확이나세요"); } console.log(lonned); sessionStorage.setItem( "logined", lonned.data.userName ); sessionStorage.setItem( "user", lonned.data.userName ); sessionStorage.setItem( "userid", lonned.data.userId ); }}> {" "} 로그인{" "} ``` - 로그인 ```java

{lonned ? ( <> {check} 님 ``` - 로그아웃 ## 게시물 검색 ![원본이미지](https://i.imgur.com/knAa5fP.png) - Navbar.jsx ```java const deleteList = async () => { const response = await axios.get( `http://localhost:7999/board/1/2/searchAll?value=${gggg}` ); // console.log(response.data); setBoardText(response.data); console.log(BoardText); if (response.data != false) { navigate("/searchlist", { state: { test: response.data, }, }); } else if (response.data == false) { alert("입력하신 정보가 없습니다"); } }; ``` - axios get 요청으로 파라미터 안에 값(검색내용) 을 넣어 보내준다. ```java

{ setGggg(e.target.value); }} />

``` ![원본이미지](https://i.imgur.com/7tXZX45.png) ![원본이미지](https://i.imgur.com/dHV9iXd.png) - Searchlist.jsx ```java const Searchlist = () => { const location = useLocation(); return (

{location.state.test.map((hhh) => (

{" "} {hhh.subject}

{hhh.lcategory} 게시판

{hhh.author}

{hhh.date}

조회 {hhh.views}

{hhh.contents}

))}

); }; export default Searchlist; ``` ## 게시물 상세 페이지 - 로그인 후에만 댓글 작성 가능 - 댓글 작성자만 삭제 버튼 보이도록 구현 ![원본이미지](https://i.imgur.com/bHRvGsX.png) - DetailPage.jsx ```java const DetailPage = ({ test, setTest }) => { const location = useLocation(); const navigate = useNavigate(); const [boardtext, setBoardText] = useState([]); const [comment, setComment] = useState(""); const [comList, setComList] = useState([]); test.sort(function (a, b) { return b.id - a.id; }); const fetchUsers = async () => { const response2 = await axios.get( `http://localhost:7999/board/coin/b/getid/comment?id=${location.state.number}` ); setComList(response2.data); const response = await axios.get( `http://localhost:7999/board/coin/b/getid?id=${location.state.number}` ); setBoardText(response.data); // 데이터는 response.data 안에 들어있습니다. }; useEffect(() => { fetchUsers(); }, []); const aaa = sessionStorage.getItem("logined") == boardtext.author; const bbb = (ccc) => sessionStorage.getItem("logined") == ccc; const deleteList = async () => { const response = await axios.delete( `http://localhost:7999/board/coin/b/delete`, { data: { id: `${location.state.number}`, author: sessionStorage.getItem("logined"), }, } ); const newres = await axios.get(`http://localhost:7999/board/coin/b/get`); setTest(newres.data); navigate(-1); }; const compost = () => { if (sessionStorage.getItem("user") || false) { axios.post(`http://localhost:7999/board/coin/b/post/comment`, { contents: comment, author: sessionStorage.getItem("logined"), id: `${location.state.number}`, }); console.log( "contents " + comment + " author " + sessionStorage.getItem("logined") + " id " + `${location.state.number}` ); } else if (sessionStorage.getItem("user") || true) { alert("로그인 해주세요"); } console.log(location.state.number); window.location.reload(); }; const comdelete = (x) => { axios.delete(`http://localhost:7999/board/coin/b/delete/comment`, { data: { id: x, author: sessionStorage.getItem("logined"), }, }); window.location.reload(); }; return (

{boardtext.subject}

작성자: {boardtext.author} 날짜: {boardtext.date}

{aaa ? ( <> 수정 ) : ( <> )}

{boardtext.contents}

{comList.map((list) => ( {list.author} {list.date} {list.contents} {bbb(list.author) ? ( <> ) : ( <> )} ))}

{ setComment(e.target.value); }} />

); }; export default DetailPage; ``` ## 게시물 작성/수정/삭제 - 로그인 후에만 글 작성이 가능 - 작성자만 글 수정, 삭제 보이도록 구현 ![원본이미지](https://i.imgur.com/WA7x4Ct.png) ![원본이미지](https://i.imgur.com/knAa5fP.png) ![원본이미지](https://i.imgur.com/61bwf2F.png) ![원본이미지](https://i.imgur.com/1ScD8XI.png) - Write.jsx - UpdateWrite.jsx ```java const Write = () => { const [subject, setSubject] = useState(""); const [author, setAuthor] = useState(""); const [lonned, setLonned] = useState(false); const [contents, setContents] = useState(""); const [selectBoard, setSelectBoard] = useState(""); const navigate = useNavigate(); const post = () => { axios .post(`http://localhost:7999/board/${selectBoard}/b/post`, { subject, contents, author, }) .then((response) => { if (response.data == true) { alert("작성완료"); navigate(-1); } else if (response.data == false) { alert("실패"); } }); }; return (

암호 화폐

* 게시글 목록을 확인해 주세요

{ setSubject(e.target.value); }} />

{
                  setContents(e.target.value);
                }}
              />
            </div>
          </form>

<div class="filebox">
            <input type="file" id="ex_file" />
          </div>
          <div className="Write_button">
            <button
              className="Write_button1"
              onClick={() => {
                post();
                console.log(subject, contents, author);
              }}>
              작성 하기
            </button>
            <button
              className="Write_button2"
              type="button"
              onclick={() => {
                navigate(-1);
              }}>
              돌아기기
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Write;

```
```java
const UpdateWrite = () => {
  const [subject, setSubject] = useState("");
  const [author, setAuthor] = useState("");
  const [lonned, setLonned] = useState(false);
  const [contents, setContents] = useState("");
  const [selectBoard, setSelectBoard] = useState("");
  const navigate = useNavigate();
  const location = useLocation();

const [boardtext, setBoardText] = useState([]);

const fetchUsers = async () => {
    const response = await axios.get(
      `http://localhost:7999/board/coin/b/getid?id=${location.state.number}`
    );
    setBoardText(response.data); // 데이터는 response.data 안에 들어있습니다.
  };

const check = sessionStorage.getItem("logined") || false;
  useEffect(() => {
    if (check) {
      setLonned(sessionStorage.getItem("user"));
    }
    console.log(check);
    setAuthor(check);
  }, []);

useEffect(() => {
    fetchUsers();
  }, []);

return (
    <div className="select-MainDiv">
      <div class="con">
        <h1>수정 페이지</h1>
        <div class="article-write">
          <form>
            <div className="write_list">
              <select
                className="write_select"
                value={selectBoard}
                aria-label="게시판목록"
                onChange={(e) => {
                  setSelectBoard(e.target.value);
                }}>
                <option value="">게시판 목록</option>
                <option value="M">--------------------</option>
                <option value="stockMarket">국내 주식 정보</option>
                <option value="stockMarket">해외 주식 정보</option>
                <option value="stockMarket">주식 게시판</option>
                <option value="M">--------------------</option>
                <option value="coin">코인 정보</option>
                <option value="coin">코인 게시판</option>
                <option value="M">--------------------</option>
                <option value="news">선물/마진 벙보</option>
                <option value="news">선물/마진 게시판</option>
                <option value="M">--------------------</option>
                <option value="테스트8">자유 게시판</option>
                <option value="테스트9">손익 게시판</option>
                <option value="M">--------------------</option>
                <option value="테스트10">공지 사항</option>
                <option value="테스트11">이벤트</option>
                <option value="테스트12">문의</option>
                <option value="M">--------------------</option>
              </select>
              <div className="write_list_title">
                * 게시글 목록을 확인해 주세요
              </div>
            </div>
            <div></div>
            <div>
              <input
                className="write-title"
                type="text"
                placeholder="제목을 입력해주세요"
                defaultValue={boardtext.subject}
                onChange={(e) => {
                  setSubject(e.target.value);
                  console.log(e.target.value);
                }}
              />
            </div>

<div className="write-mimee-div">
              <textarea
                className="write-mimee"
                type="text"
                defaultValue={boardtext.contents}
                onChange={(e) => {
                  setContents(e.target.value);
                }}
              />
            </div>
          </form>
          <div className="Write_button">
            <button
              className="Write_button1"
              onClick={() => {
                patch();
              }}>
              수정 하기
            </button>
            <button
              className="Write_button2"
              type="button"
              onclick={() => {
                navigate(-1);
              }}>
              돌아기기
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default UpdateWrite;

```</article></body></html>