Conversation
- UI 라우트(/, /posts 등)와 정적 리소스 경로는 비로그인 허용임을 명확히 설명 - /api/v1/posts/** 의 메서드별 권한(조회만 익명, 쓰기/수정/삭제는 인증) 의도를 주석으로 정리
기존 구현이 noneMatch를 사용해 "권한이 없을 때 true"가 되는 역동작을 유발. anyMatch로 교체하여 "해당 Role을 보유하면 true"가 반환되도록 수정하고, 메서드 주석으로 의도를 명확화. 영향 - PostService의 권한 검증이 의도대로 동작: 작성자 본인 또는 ADMIN만 게시글 수정/삭제 가능 - 타 계정으로 다른 사용자의 게시글 수정/삭제 시 403 반환 검증 방법 1) 사용자 A로 글 작성 2) 사용자 B로 해당 글 수정/삭제 시도 → 403 확인 3) ADMIN 계정으로는 수정/삭제 가능 확인 호환성 - API/DB 스키마 변경 없음 - 부작용 없음(권한 체크 로직만 수정)
- 아이디 중복확인에 AbortController/요청 토큰을 도입해 경쟁 요청 및 응답 순서 뒤집힘 방지
- 서버 규약(200/409) 우선 처리 + 404/JSON {available} 등 호환 케이스 보강
- 회원가입 폼의 기본 검증 강화(이메일/전화/비밀번호 길이 및 일치)
- 아이디 입력 변경 시 중복확인 상태 초기화
- 전화번호 입력 시 숫자만 허용 및 최대 11자리 제한
- 실패 응답 시 서버 본문(message/text) 우선 노출로 오류 원인 가시성 향상
테스트
1) 존재하는/없는 아이디로 중복확인 → 상태/메시지 확인
2) 입력값 누락/형식 오류/비밀번호 불일치 → 클라이언트 검증 메시지 확인
3) 회원가입 성공 시 /sign-in 리다이렉션 확인
4) 중복확인 도중 입력 변경 → 이전 요청 무시되는지 확인
- getPost 반환타입을 PostWithUserNameResponse로 변경하여 상세 화면에 작성자 이름 제공 - getAllPosts / searchPosts도 동일 DTO로 매핑해 목록/검색 결과에 작성자 이름 노출 - create/update/delete: 로그인 사용자(Student) 조회 후 소유자 또는 관리자만 허용하도록 검증 유지
- GET /api/v1/posts/{id} 반환 타입을 PostWithUserNameResponse로 변경해 작성자 이름 제공
- 목록/검색도 동일 DTO로 반환하여 UI에서 일관된 작성자 표시 가능
- POST/PUT/DELETE 엔드포인트에 PreAuthorize 유지(ROLE_USER/ADMIN)로 2차 보호
- 서비스 계층에서 소유자 또는 관리자 권한 검증(403) 연계
- 모바일 우선 ui
- auth
- 회원가입 페이지(HTML/CSS/JS) 추가
- 필수값 검증, 이메일/비밀번호/전화번호 형식 체크
- 아이디 중복확인(경쟁요청 취소/상태코드 200=가능, 409=중복) 및 실시간 메시지
- 서버 DTO 규격에 맞춘 필드 전송(userId 등)
- 로그인 페이지(HTML/CSS/JS) 추가
- 필수값 검증, 비밀번호 마스킹, 성공 시 redirect 지원
- 응답 헤더 Authorization: Bearer <token> 추출 → localStorage.accessToken 저장
- posts UI
- post-create.js: 비로그인 접근 시 로그인으로 안내(+redirect=/posts/new), 제출 전 토큰 재확인
- post-update.js: 비로그인 차단, 초기 로드에서 소유자 판별 후 타인 글 수정 차단, PUT 상태코드별 안내
- post-details.js: 수정/삭제 클릭 시 로그인/소유자 여부에 따른 안내 및 차단, DELETE 상태코드별 안내
- post-list.js:
- 목록/검색/페이징 동작
- 최초 진입/검색 시 최신 페이지 자동 점프
- “내 글만” 수정/삭제 버튼 노출(상세 응답으로 소유자 판별)
- UTC/무타임존 문자열 파싱 보강 → locale 표시 일관성 향상
- “관리” 열 제거 및 버튼은 조건부로만 표시
nav
- mainpage-1.0.js: 토큰 유무/만료에 따라 네비게이션 동적 토글
- 로그인 전: “로그인”, “회원가입”
- 로그인 후: “로그아웃”(클릭 시 토큰 삭제 및 현재 페이지 새로고침)
- style
- 각 페이지 전용 CSS 정리(폼 레이아웃/버튼/간격), 큰 화면에서 작성 영역 가독성 개선
Duskafka
reviewed
Aug 15, 2025
Contributor
Duskafka
left a comment
Duskafka
left a comment
There was a problem hiding this comment.
- 액세스 토큰은
localStorage에Authorization으로 저장되고 사용되어야 합니다. 현재localStorage에는accessToken으로 저장되고 사용은Authorization으로 사용되는 것 같습니다. - 그 외에 CSS나 HTML 코드는 깔끔하고 가독성이 좋았습니다.
- Java 코드를 수정한 부분 검토했고, 문제 없음을 확인했습니다.
| const TOKEN_STORAGE_KEY = 'accessToken'; | ||
|
|
||
| // ----- 토큰 저장소 ----- | ||
| function getToken() { return localStorage.getItem(TOKEN_STORAGE_KEY); } |
Contributor
There was a problem hiding this comment.
localStorage에 accessToken으로 저장된 토큰을 가져오는 것 같은데 JWT의 액세스 토큰은 localStorage에 저장될 때도 Authorization으로 저장됩니다.
Comment on lines
+34
to
+38
| // 나머지 페이지들과 통일: accessToken 키 사용 | ||
| localStorage.setItem('accessToken', token); | ||
| alert('로그인 성공!'); | ||
| window.location.href = '/dashboard.html'; // 로그인 후 이동 | ||
| // CRUD 흐름으로 이동 | ||
| window.location.replace('/posts'); |
Contributor
There was a problem hiding this comment.
localStorage에 저장할 때 Authorization으로 저장해야합니다.
- localStorage에 'accessToken'으로 저장되던 값을 'Authorization'으로 저장하도록 변경 - API 요청 시 'Authorization' 키를 사용하도록 로직 통일 - 토큰 저장/사용 불일치 문제 해결
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
#️⃣ Issue Number
#10
📝 요약(Summary)
POST API를 기반으로 사용자가 브라우저에서 작성/조회/수정/삭제를 모두 수행할 수 있는 게시판 UI/UX를 구현했습니다.
JWT 토큰을 LocalStorage에 저장·관리하고, 쓰기/수정/삭제 요청에는 자동으로
Authorization: Bearer <token>헤더를 첨부합니다.또한 내 글만 수정/삭제할 수 있도록 프론트 가드를 추가하고, 상태코드별로 사용자 친화적 안내를 제공합니다.
🛠️ PR 유형
✨ 주요 변경사항
페이지 구성
/posts: 페이지당 20개 페이징, 제목 검색(titleSearch), 최신 페이지 자동 이동(최초 진입 시),“내 글”이 아닌 경우 수정/삭제 버튼 비노출(프론트 가드).
UI 단순화를 위해 ‘관리’ 컬럼 제거.
/posts/{id}: 제목/본문/작성자/작성일 표시.수정/삭제는 내 글일 때만 노출(불명확 시 클릭 시 차단).
/posts/new: 제목·내용 빈칸 차단, 성공 시 상세(또는 목록)로 이동.비로그인 접근 시 로그인으로 리다이렉트(
redirect=/posts/new)./posts/{id}/edit: 기존 내용 로딩 후 편집, 내 글이 아니면 즉시 차단 후 상세로 복귀.JWT & 인증 흐름
localStorage.accessToken저장.apiClient.js가 모든 API 요청에 토큰 자동 첨부, 401 → 토큰 삭제 및 /sign-in 이동.상태코드별 안내 문구(상세/수정/목록 공통)
401: 로그인이 필요합니다 → 로그인 이동403: 본인이 작성한 글만 {수정·삭제}할 수 있습니다.404: 이미 삭제되었거나 존재하지 않는 게시글입니다.500: 다른 사용자의 글은 {수정·삭제}할 수 없습니다.네비게이션(공통 헤더)
메뉴에 로그인/회원가입/로그아웃 동적 노출
스타일 개선
🔍 테스트 시나리오
비로그인
/posts/new진입 시 로그인 페이지로 이동(redirect 유지).로그인 A
로그인 B
토큰 만료
📸 스크린샷 (선택)
<아이디 중복체크>
<로그인 없이 글 작성 버튼 클릭, url 강제 접속 >
< 목록 화면 20개까지 출력>
< 상세 페이지>
<다른계정으로 수정, 삭제 시도>
<로그인전 목록화면 및 햄버거 버튼>
<로그인 후 버튼 변화>
💬 공유사항 to 리뷰어
✅ PR Checklist