$$config title: 코인 정보 사이트 keywords: - react - Spring $$ # ? 개요 - React 로 홈페이지 구현 - 증권 코인 같은 정보와 현재 가격을 볼수 있는 사이트 - 게시판에 기본적으로 필요한 기능 구현 # ? 원격 저장소 - [깃허브 리포지터리 바로가기](https://github.com/Leehg5/coin) # ? 사용된 기술 ## 형상 & 배포 관리 ``` - GitHub ``` ## 개발 환경 ``` - Visual Studio Code - Spring - SQLyog - IntelliJ IDEA Community Edition 2022.2.2 - xampp-control ``` ## 기술 스택 ``` - React - HTML / CSS3 - tailwind - Daisy UI - Material - SummerNote - Aws ``` ## 기능 현황 | 기능| 구현 | 테스트 | | --- | -- | -- | | 로그인 | ✔️ | ✔️ | | 로그아웃 | ✔️ | ✔️ | | 회원가입 | ✔️ | ✔️ | | 검색 | ✔️ | ✔️ | | Api 코인 증시 데이터 가져오기 | ✔️ | ✔️ | ✔️ | | 자유게시판, 각종 게시판 | ✔️ | ✔️ | | 게시판 페이징 | ✔️ | ✔️ | | 게시판 별로 OVERFLOW | ✔️ | ✔️ | | 로그인 후 글쓰기 CRUD | ✔️ | ✔️ | | 로그인 후 댓글 CRUD | ✔️ | ✔️ | | 공지사항 패치내용 관리자 기능 | ✔️ | ✔️ | | 메인페이지 최적화 DTO | ✔️ | ✔️ | | 개인정보 비번변경/회원탈퇴 | ✔️ | ✔️ | ## Release # ? 진행 상황 ## 진행 상황 분석표 | 기능 | 위치 | 기능내용 | 작성자 | 진행사항 | | --- | -- | -- | -- | -- | | 로그인 | 상단영역 | 검색바로그인 회원가입 | 이용민 | 반영 | | 로그인 | 상단영역 | 관리자 로그인 기능 | 이용민 | 반영 | | API | 우측 영역 | 코인 증시 API 작업 | 이용민 | 반영 | | 게시판 | 우측 영역 | 공지 사항,문의,패치 노트 게시판이 위치 | 이용민 | 반영 | 게시판 | 가운데 영역 | 각 게시판 별로 갯수 지정 | 이용민 | 반영 | | 게시판 | 가운데 영역 | 실시간 게시판 조회수 놀은수 위치 | 이용민 | 반영 | | 게시판 | 가운데 영역 | 각 게시판 조회수 페이징 작업 | 이용민 | 반영 | | 게시판 | 가운데 영역 | 각 게시판 글쓰기 수정 삭제 작업 | 이용민 | 반영 | | 게시판 | 가운데 영역 | 각 게시판 댓글 기능 | 이용민 | 반영 | | 검색 | 가운데 영역 | 해당 글자 제목 내용 댓글 불러오기 | 이용민 | 반영 | | 회원정보 | 가운데 영역 | 회원 정보 변경 회원 탈퇴 기능 | 이용민 | 반영 | ## 회원 - 회원가입이 가능하다. - 로그인과 로그아웃이 가능하다. - 로그인시 화면이 바뀐다. - 회원 정보 변경이 가능하다. - 회원 탈퇴가 가능하다. ## 글쓰기 - 로그인한 회원만 글 쓰기가 가능하다. - 본인이 작성한 글은 수정과 삭제가 가능하다. - 공지사항 패치노트는 관리자만 가능하다. ## 검색 - 게시물을 포함된 글자를 통해 검색이 가능하다. ## 댓글 - 게시글에 댓글 작성이 가능하다. - 본인이 작성한 댓글은 삭제가 가능하다. ## 게시판 - 게시글 작성 • 수정 • 삭제 조회수 기능. - 게시글 리스팅 페이징 작업 ## 댓글 - 게시글에 댓글 작성 삭제 가능하다. ## 검색 - 게시글의 제목 내용 포한한 글 검색 # ? 주요 폴더 및 파일 - `layout` : 공통 레이아웃 디자인 - `board` : 게시판 레이아웃 디자인 - `pages` : 각종 페이지 레이아웃 디자인 - `node_modules` : node 패키지 - `package.json` : node 의존성 - `tailwind.config.js` : 테일윈드 설정 # 모델링 ## ERD ![ERD](https://i.postimg.cc/4x2HXFDP/graphviz.png) # ? 기술설명 ## ✅ 메인화면 ### • desktop ![홈 PC버전](https://i.ibb.co/qdtGy56/image.png) > 메인 `Layout.jsx` ```jsx

``` # ✅ 회원가입 ### • Desktop #### 기본 회원가입 화면 ![desktop 기본 회원가입 화면](https://i.ibb.co/k1Wq636/image.png) #### 아이디 비밀 번호후 회원 가입 성공 실패 ![PC 회원가입 비밀번호 재확인 기능](https://i.ibb.co/pbNG3Py/image.png) > 획원가입 `Layout.jsx` ```jsx

회원가입

``` # ✅ 로그인/로그아웃 ### • Desktop #### 로그인 화면 ![PC 로그인 화면](https://i.ibb.co/yQddqhX/image.png) #### 로그인 후 화면 ![PC 상단바 로그인](https://i.ibb.co/QkVmFhd/image.png) *** > 로그인/로그아윳 `Navbar.jsx` ```jsx

{lonned ? ( <> {check} 님 ) : (

로그인

로그인 페이지

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

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

아이디/비밀번호 찾기

{ 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 ); }}> {" "} 로그인{" "}

카카오 계정으로 신규가입

페이스북 계정으로 신규가입

구글 계정으로 신규가입

)}{" "}

``` # ✅ 게시물 리스팅 - 로그인시 상세화면에서 수정, 삭제 가능 *** ### • Desktop ![PC 게시물 리스팅](https://i.ibb.co/cxJYdSs/image.png) *** > 코인 게시판 `board.jsx` ```jsx

암호 화폐

{test.map((Coin) => ( ))}

게시판 리스트
번호	제목	글쓴이	날짜	조회수
{Coin.id}	{Coin.subject}	{Coin.author}	{Coin.date}	{Coin.views}

1 2 3 4 5

``` *** # ✅ 게시물 상세페이지 # ✅ 게시물 작성/수정/삭제 ### • Desktop - 작성자 본인만 수정 또는 삭제 가능 - 로그인 후에만 글 작성, 수정, 삭제 가능 - 내가 작성한 글에만 수정, 삭제할 수 있도록 권한 부여 - 작성 , 수정, 삭제 완료 후 성공메시지 노출 - 댓글은 댓글작성자만 수정 또는 삭제 가능 ![PC 게시글 상세페이지](https://i.ibb.co/Tc0yjXV/image.png) ![PC 게시글 글쓰기페이지](https://i.ibb.co/Hrm9RP8/image.png) ![PC 게시글 수정페이지](https://i.ibb.co/NghsDFN/image.png) *** > 상세페이지 삭제/수정/댓글 `Layout.jsx` ```jsx

{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); }} />

); }; ``` # ✅ 네트워크 프로그래밍 구현 ### • Desktop - 작성자 본인만 수정 또는 삭제 가능 - 로그인 후에만 글 작성, 수정, 삭제 가능 - 내가 작성한 글에만 수정, 삭제할 수 있도록 권한 부여 - 작성 , 수정, 삭제 완료 후 성공메시지 노출 - 댓글은 댓글작성자만 수정 또는 삭제 가능 ![PC 게시글 글쓰기프로그래밍](https://i.ibb.co/M6W7sNG/image.png) ![PC 게시글 글삭제프로그래밍](https://i.ibb.co/SXyp8kb/image.png) ![PC 게시글 상세 페이지 프로그래밍](https://i.ibb.co/5xSBv9m/image.png) *** > 상세페이지 삭제/수정/댓글(수정/삭제) `Layout.jsx` ```jsx 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(); }; ``` *** # ✅ 데이터 베이스 구현 ### • Desktop rd다이어 그램 ![PC 게시글 erd다이어 그램](https://i.ibb.co/jzKKpR5/erd.jpg) ![PC 게시글 로그인](https://i.ibb.co/nkP3Y05/image.png) ![PC 게시글 로그인](https://i.ibb.co/2ZskpcG/image.png) >로그인 (스프링) `AccountController` ``` @RestController @RequiredArgsConstructor @RequestMapping("/account") @CrossOrigin("*") public class AccountController { private final AccountService accountService; //회원가입 @PostMapping("/signUp") public boolean signUp(@RequestBody AccountInput accountInput) { return this.accountService.signUp(accountInput); } //로그인 @PostMapping("/signIn") public AccountSighInDto signIn(@RequestBody AccountInput accountInput) { return this.accountService.signIn(accountInput); } //패스워드 재설정 @PatchMapping("/pwReset") public boolean pwReset(@RequestBody AccountInput accountInput) { return this.accountService.pwReset(accountInput); } } ``` >게시판 (스프링) `AccountController` ``` @RequestMapping("/board/{lcategory}/{mcategory}") @RequiredArgsConstructor @RestController @CrossOrigin("*") public class BoardController { private final BoardService boardService; @RequestMapping("/") public String index(@PathVariable("lcategory") String Lcategory, @PathVariable("mcategory") String Mcategory) { System.out.println("Coin" + Lcategory + Mcategory); return "Coin" + Lcategory + Mcategory; } //전체 검색 @GetMapping("/searchAll") public List search(@RequestParam("value") String value) { return this.boardService.searchAll(value); } // 게시판별 검색 @GetMapping("/search") public List search(@PathVariable("lcategory") String lcategory, @PathVariable("mcategory") String mcategory, @RequestParam("value") String value) { return this.boardService.search(value, lcategory, mcategory); } //게시글 작성하기 @PostMapping("/post") public boolean boardPost(@PathVariable("lcategory") String lcategory, @PathVariable("mcategory") String mcategory, @RequestBody BoardInput boardInput) { try { return this.boardService.boardPost(lcategory, mcategory, boardInput); } catch (SQLException e) { return false; } } //댓글 작성하기 @PostMapping("/post/comment") public boolean commentPost(@PathVariable("lcategory") String lcategory, @PathVariable("mcategory") String mcategory, @RequestBody BoardInput boardInput) { return this.boardService.commentPost(boardInput); } //이미지 추가하기 //게시글 전체 불러오기 @GetMapping("/get") public List get(@PathVariable("lcategory") String lcategory, @PathVariable("mcategory") String mcategory) { return this.boardService.findAll(lcategory, mcategory); } //게시글 3개 불러오기 @GetMapping("/get3") public List boardGet(@PathVariable("lcategory") String lcategory, @PathVariable("mcategory") String mcategory) { return this.boardService.findThree(lcategory, mcategory); } //게시글 1개 불러오기 @GetMapping("/getid") public BoardDto boardGet(@PathVariable("lcategory") String lcategory, @PathVariable("mcategory") String mcategory, @RequestParam("id") Integer id) { return this.boardService.findByIdToBoard(lcategory, mcategory, id); } //해당 id값의 댓글들 불러오기 @GetMapping("/getid/comment") public List commentGet(@PathVariable("lcategory") String lcategory, @PathVariable("mcategory") String mcategory, @RequestParam("id") Integer id) { return this.boardService.findByIdToComment(lcategory, mcategory, id); } //이미지 불러오기 //게시글 수정 @PatchMapping("/patch") public boolean boardPatch(@PathVariable("lcategory") String lcategory, @PathVariable("mcategory") String mcategory, @RequestBody BoardInput boardInput) { return this.boardService.boardPatch(lcategory, mcategory, boardInput); } //댓글 수정 @PatchMapping("/patch/comment") public boolean commentPatch(@RequestBody BoardInput boardInput) { return this.boardService.commentPatch(boardInput); } // 이미지 수정 //게시글 삭제 @DeleteMapping("/delete") public boolean boardDelete(@PathVariable("lcategory") String lcategory, @PathVariable("mcategory") String mcategory, @RequestBody BoardInput boardInput) { return this.boardService.boardDelete(lcategory, mcategory, boardInput); } //댓글삭제 @DeleteMapping("/delete/comment") public boolean commnetDelete(@RequestBody BoardInput boardInput) { return this.boardService.commnetDelete(boardInput); } // 이미지 삭제 } ``` *** # ✅ SQL활용 ### • Desktop ![PC 게시글 erd다이어 그램](https://i.ibb.co/wdmM3C4/SQL.png) ![PC 게시글 erd다이어 그램](https://i.ibb.co/6wC68J8/SQL-1.png) *** # ✅ SQL응용 ### • Desktop ![PC SQL응용 로그인 글데이터](https://i.ibb.co/Sy366Dd/SQL.png) ![PC SQL응용 게시판 글데이터](https://i.ibb.co/98BHC98/SQL.png) *** # ✅ 서버프로그램 구현 ### • Desktop ![PC 게시글 글쓰기프로그래밍](https://i.ibb.co/M6W7sNG/image.png) ![PC 게시글 글삭제프로그래밍](https://i.ibb.co/SXyp8kb/image.png) ![PC 게시글 상세 페이지 프로그래밍](https://i.ibb.co/5xSBv9m/image.png) > 서버프로그램 구현 `Layout.jsx` ```jsx 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(); }; ``` *** # ? 테스트 내역 ### 회원가입 - 테스트통과 : 통과 - 테스트날짜 : 2022-02-23 - 테스트수행인 : 김지애 ### 로그인 - 테스트통과 : 통과 - 테스트날짜 : 2022-02-23 - 테스트수행인 : 김지애 ### 로그아웃 - 테스트통과 : 통과 - 테스트날짜 : 2022-02-23 - 테스트수행인 : 김지애 ### 게시물 작성, 수정, 삭제 - 테스트통과 : 통과 - 테스트날짜 : 2022-02-23 - 테스트수행인 : 김지애 ### 게시물 댓글 - 테스트통과 : 통과 - 테스트날짜 : 2022-02-23 - 테스트수행인 : 김지애 ### 게시물 검색 - 테스트통과 : 통과 - 테스트날짜 : 2022-02-23 - 테스트수행인 : 김지애 # ? 개선 예정 내역 - Main - [x] 주식 , 코인 현재가 css 변경 진행중 - [x] 검색 css 변경 진행중정 - 게시판 - [x] 상세 페이지, 댓글, 수정, 삭제 css 변경 진행중 - [x] 메인 페이지 정해진 갯수만 정하여 보이게 하는 작업 - [x] 회원 가입 css 변경 진행중 ## 이상 포트폴리오 기술 설명을 마치겠습니다. 긴 글 읽어 주셔서 감사합니다.