자바 웹 공부 64 - SpringBoot(새로 만들기16 / 게시판) + Axios

나머지 남은 것들을 차근차근 만들어보자

 

회원가입 페이지

1. 입력값 미 입력 시 붉게 표시 안됨.

 

front - board -> views-> SignUpCardView -> index

 

아래 SignUpCardView 아래에 만들어주고

 

아래로 내려와서

해주고 properties로 받아와야 한다. FirstPage로 가서 추가해 주고

 

바로 아래 return 쪽에

 

다음 단계를 눌렀을 때 체크해 주게 만들어줘야 한다. onNextButtonHandler로 가서

 

FirstPage와 똑같이 만들어주자

다음 단계를 눌렀을 때 빨갛게 변한다.

 

이메일 주소만 바뀌는 게 보이니

input에 넣었던걸 FormControl로 변경

 

비밀번호 확인에도 변경

브라우저에서 확인해 보면 모두 바뀌는 것을 확인이 가능하다.

 

이제 SecondPage도 만들어주자

 

회원가입 버튼을 눌렀을 때 체크

 

브라우저로 가서 확인

 

2. 중복된 이메일이나 비밀번호 확인 불일치에 대한 알림 메시지를 안 띄움

 

이메일 주소 쪽으로 와서

이걸 입력할 때마다 적용이 되는 기능을 만들어보자

 

First Page return 위에 새 const를 만들어주고 변경

 

위로 가서 추가해 주고 emailMessage를 넣어주자

 

한 가지 해줄 것이 있는데, front든 back-end든 정규식을 써줘야 한다.

(자세한 건 주석처리 해놨다)

 

패턴이 일치하면 true, 불일치하면 false

 

브라우저 회원가입에 가서 확인해 보면

잘 된다. 주의할 점은 {2,3}에서 {2, 3}(띄어쓰기)가 안되도록 하자

 

패스워드도 똑같이 해주자

const를 만들어 놓고(아래건 미리 만듦)

 

8-20자리의 패스워드

 

넣어줬다면 브라우저로 돌아와서 확인해 보면 잘 되는 것을 확인할 수 있다

비밀번호 체크 차례다

 

지금 코드를 보면 밖에 있기 때문에 FirstPage에 있는 체크를 해줘야 하는데 체크를 못하고 있다.(넘겨줄 수가 없음)

signUpCardView 아래에 식을 넣어주고

위처럼 변경해 주고

 

onNext에도 아래처럼 변경해 주자

 

마음에 들지 않는 게 중복해서 검사를 하고 있는 것이다.(이건 구조상 어쩔 수 없음) 

다음에 만들 때는 제대로 만들자..

 

secondPage로 가서 숫자만 입력하도록 만들어주자

브라우저 가서 확인!

---

3. 개인정보 동의 체크박스가 없음(요구사항)

 

이건 그냥 만들기만 할 것이다. SecondPage 아래에

&gt가 >를 만들어주는 것임.

 

지금은 블록형태라서 세로형태가 되어있는데

inline형태로 가로 형태로 바꿀 것이다.

이렇게 바꾸고 확인해 보자

이제 중앙정렬을 해보자

그 이후 그냥 색만 넣어주면 완성이다.

---

메인 페이지

1. 주간 TOP3 게시물에 이미지가 없으면 내용이 안보임(UX)

배경이 흰색이라 보이지 않는다.

 

components -> PreviewCard로 가서 color만 좀 바꿔주자

---

2. 주간 TOP3 게시물리스트가 해당 주 데이터가 아님

자세히 보면 3-20일 것은 주간 TOP3가 될 수 없으니 이것도 좀 고쳐보자

이건 Back-end에서 반환을 해줘서

 

back-end -> board -> src -> main -> java -> service -> BoardServiceIm~을 가주자

ctrl + f로 Top3 List검색해서 찾고

 

조건을 덜 걸어줬으니 좀 더 걸어주자

 

 BoardRepository 가서 추가해 주고

브라우저로 가서 확인해 보자

원래는(캡처를 안 해놨었지만) 20일, 30일 것이 있었는데 이번엔 30일 것만 뜨는 것을 확인할 수 있다.

 

---

3. 검색 인풋에 enter 적용 안됨(UX)

 

front - board - src -> views -> NavigationBar 가서

여기에 뭘 치고 Enter를 누르면 제대로 동작을 한다.

---

검색 페이지

1. 검색 로그 2번 저장됨(Bug)

 

searchView에 들어가서 확인해 보면

content가 바뀌어야 위에 것들이 변경이 된다.

 

위에서 let 하나 생성 해주고 

 

위에 있는 useEffect로 가서

이렇게 하고 확인을 해보자

 

에러가 보인다. 안녕을 검색하고 123을 검색하니 ~에 대한 검색결과 입니다만 바뀌는 것을 확인할 수 있다.

 

이렇게 하면 바뀌게 된다.

---

2. 연관 검색어 처리 안됨(요구사항)

 

SearchView로 가서

 

api로 가서 아래 것에 추가

 

원래 연관검색어가 떠야 하는데 나는 왜인지 모르게 값이 안 들어가 있어서 뜨질 않는다.. ㅠ

---

마이페이지

1. 로그아웃이 정상처리가 안됨(Bug)

 

MyPageView -> MyPageHed -> index로 가서

 

각각 path를 지정해 주면 좀 더 안정적으로 할 수 있을 것이다.(한 번씩 /board로 될 때가 있었음)

---

상세페이지

1. 비회원 - 좋아요, 댓글 비활성화(UX)

 

board -> detailView -> index

onLikeHandler로 가서

이렇게 해주면 좋아요를 클릭하면 올라가지 않는다 

 

맨 아래로 내려와서

이렇게 해주면

댓글창이 없고 로그인을 하고 보면

댓글을 달 수 있게 만들 수 있다.