공지사항 목록 페이지 이동 링크 추가 / 마이페이지에 공지사항, 관리자 페이지 추가 #754

Gilpop8663 · 2023-10-16T07:40:32Z

🔥 연관 이슈

close: #753

📝 작업 요약

공지사항 목록 페이지 이용가능하도록 링크 추가 / 마이페이지에 공지사항, 관리자 페이지 추가
userInfo에 role 추가
마이페이지에서 유저 권한에 따라 다르게 렌더링 되도록 하기
관리자 페이지에서 관리자가 아니면 접근이 불가능하도록 설정
카카오 버튼 이미지 고화질로 변경

⏰ 소요 시간

1시간

🔎 작업 상세 설명

path url

관리자 신고내역 페이지 : admin/reports/pending
관리자 공지사항 페이지 : admin/�notices

사진

비회원

회원

관리자

로그인 페이지 카카오 버튼 이미지 수정

약간 흐려서 완성도가 낮아보인다는 피드백을 들었어서 뚜렷하게 변경

변경 전

변경 후

🌟 논의 사항

�관리자 페이지로 url을 직접 입력했을 때 관리자 계정임에도 접근이 불가능하다고 나오는데요. 이러한 것은 useEffect에서 토큰을 통해 자동 로그인이 진행된 후 유저 정보를 가져오는데, 이러한 과정을 거치려면 렌더링이 끝나야 되기 때문에 PrivateRoute에서는 관리자가 url로 직접 들어오는 것을 허용할 수 없었습니다

그렇지만 관리지이기 때문에 마이페이지에서 직접 들어오는 것은 가능하므로 괜찮은 수준의 문제라고 생각하여 PR 올리게 되었어요

관리자더라도 url을 직접 입력하여 들어오면 접근이 안되는데 이는 관리자 페이지이기에 상관 없다고 생각함

github-actions · 2023-10-16T07:42:01Z

⚡️ Lighthouse report!

Category	Score
🟠 Performance	70
🟠 Accessibilty	89
🟢 SEO	100
🟠 PWA	89

Category	Score
🟢 First Contentful Paint	0.6 s
🟠 Largest Contentful Paint	3.0 s
🔴 Total Blocking Time	1,240 ms
🟢 Cumulative Layout Shift	0
🟢 Speed Index	2.7 s

inyeong-kang

우스~ 오늘 오전에 회의한 내용을 굉장히 빠르게 반영해주셨군요? (그저 ✨..)
제가 작업한 내용과 살짝 다른 부분이 있어 코멘트 남겼어요!
내일 이야기해보아요~~~

fe-리뷰완

inyeong-kang · 2023-10-16T12:14:26Z

frontend/__test__/api/user.test.ts

  });

-  test('클라이언트에서 사용하는 유저 정보 API 명세가 [nickname, gender, birthYear, postCount, voteCount]으로 존재해야한다', async () => {
+  test('클라이언트에서 사용하는 유저 정보 API 명세가 [nickname, gender, birthYear, postCount, voteCount, role]으로 존재해야한다', async () => {


혹시 hasLatestAlarm 도 추가해주실 수 있나요? (test fail 이 두려워져서..😅)

inyeong-kang · 2023-10-16T12:15:45Z

frontend/src/components/common/Dashboard/GuestProfile/index.tsx


 import * as S from './style';

-export default function GuestProfile() {
+interface GuestProfileProps {
+  isLargeKaKao?: boolean;


inyeong-kang · 2023-10-16T12:18:30Z

frontend/src/constants/path.ts

@@ -19,4 +20,6 @@ export const PATH = {
  USER_VOTE: `${BASE_PATH.USER}/votes`,
  USER_INFO: `${BASE_PATH.USER}/myPage`,
  USER_INFO_REGISTER: `${BASE_PATH.USER}/register`,
+  ADMIN_REPORT_LIST: `${BASE_PATH.ADMIN}/reports`,
+  ADMIN_CATEGORY_LIST: `${BASE_PATH.ADMIN}/categories`,


오 path 명을 이렇게 지으셨군요..🤔
혹시 카테고리 목록 관련된 라우터는 미리 만들어놓으신건가요??

저는 요런식으로 지었는데 한번 논의가 필요할거 같네요!!

inyeong-kang · 2023-10-16T12:18:59Z

frontend/src/mocks/mockData/user.ts

+  birthYear: 1989,
+  postCount: 4,
+  voteCount: 128,
+  role: 'ADMIN',


hasLatestAlarm 값도 미리 추가해주시면 감사하겠습니다..!!!!

inyeong-kang · 2023-10-16T12:23:38Z

frontend/src/routes/PrivateRoute.tsx

-  // const isAuthenticated = true;
-  if (!isGuestAllowed && !isLoggedIn) {
-    alert('해당 페이지에 접근하려면 로그인이 필요합니다.');
+  if (isAdminAllowed && userInfo?.role !== 'ADMIN') {


context-api 로 role 값을 저장하는 경우, 관리자 페이지에 진입하면서 role을 useContext로 꺼내오기 때문에, 의도대로 페이지 진입을 막기 어려워지지 않을까요?🤔

개인정보 등록 페이지도 같은 이슈가 있어서, hasEssentialInfo 라는 값을 userInfo (유저 정보 API response)가 아닌 로그인 API response에서 받아오도록 했어서.. 우스의 생각이 궁금합니다!!

inyeong-kang

오늘 2시 페어프로그래밍을 통해 충돌이 예상되는 부분을 해결하였습니다~~

chsua

우스 최강입니다!!

혹시 그 프라이빗 라우터에 isGuestAllowed={true}>이던데,
게시글 상세페이지와 랭킹페이지는 true처리가 안된 것 같아요!
필요할 것 같습니다!

그리고 pr에도 admin/category 로 되어있는데 해당 부분 나중에 다시 보면 헷갈릴 것 같아서 수정 가능할까요??
고생하셨습니다!

chsua · 2023-10-18T01:35:01Z

frontend/src/constants/path.ts

@@ -19,4 +21,6 @@ export const PATH = {
  USER_VOTE: `${BASE_PATH.USER}/votes`,
  USER_INFO: `${BASE_PATH.USER}/myPage`,
  USER_INFO_REGISTER: `${BASE_PATH.USER}/register`,
+  ADMIN_PENDING_REPORT: `${BASE_PATH.ADMIN}${BASE_PATH.REPORTS}/pending`,


pending이 되었군요 😆

chsua · 2023-10-18T01:39:52Z

frontend/src/routes/router.tsx

+        path: PATH.NOTICES,
+        element: (
+          <PrivateRoute isOnlyAdminAllowed={true} path={PATH.USER_INFO}>
+            <div>어드민 카테고리 목록 페이지</div>


여기 수정 안되었습니다!

chsua · 2023-10-18T01:42:13Z

fe-리뷰완

Gilpop8663 · 2023-10-18T05:55:44Z

대시보드에서 접근 가능하도록 했습니다

fe-리뷰요청

chsua

고생하셨습니다!!

작성하신 코드 롤백되어서 아쉽네요!
빠른 피드백, 수정 최고에요!

Gilpop8663 added 7 commits October 16, 2023 15:15

feat: (#753) User 타입에 role 추가

e5568f2

feat: (#753) 마이페이지에서 게스트, 유저, 어드민에 따라 다르게 보이도록 구현

4403487

feat: (#753) 어드민 페이지 비회원 접근 불가능하도록 설정

d4b60c8

feat: (#753) 관리자 페이지에 관리자만 접근 가능하도록 설정

bfb776c

관리자더라도 url을 직접 입력하여 들어오면 접근이 안되는데 이는 관리자 페이지이기에 상관 없다고 생각함

refactor: (#753) AdminRouter의 기능을 PrivateRoute로 이동하여 중복 코드 삭제

bb5f4d8

style: (#753) 카카오 로그인 버튼 이미지 크기를 조정할 수 있도록 수정

c3d7509

style: (#753) 로그인 페이지 카카오 이미지 흐릿한 것을 뚜렷하게 변경

28dd409

Gilpop8663 added FE 🐾 개발 labels Oct 16, 2023

Gilpop8663 requested review from inyeong-kang and chsua October 16, 2023 07:40

Gilpop8663 self-assigned this Oct 16, 2023

inyeong-kang requested changes Oct 16, 2023

View reviewed changes

refactor: (#753) PrivateRouter, path 통일

6a58d25

inyeong-kang approved these changes Oct 17, 2023

View reviewed changes

chsua requested changes Oct 18, 2023

View reviewed changes

Gilpop8663 added 5 commits October 18, 2023 12:27

feat: (#753) 잘못된 router Path 수정 및 PrivateRouter를 통일성을 위해 모두 추가

a7564e9

chore: (#753) dev 브런치와 충돌나는 코드 해결

e5b41b4

chore: (#753) 충돌나는 코드 병합

a4d2f09

chore: (#753) 마이페이지 비회원 접근 못하도록 다시 변경

ee47529

feat: (#753) 공지사항 보러가기 링크를 대시보드에 추가

88dcf51

style: (#753) 공지사항 보러가기 스타일 변경

a99543a

Gilpop8663 changed the title ~~마이페이지 비회원 이용가능하도록 하기 / 마이페이지에 공지사항, 관리자 페이지 추가~~ 공지사항 목록 페이지 이동 링크 추가 / 마이페이지에 공지사항, 관리자 페이지 추가 Oct 18, 2023

chsua approved these changes Oct 18, 2023

View reviewed changes

Gilpop8663 merged commit edbdb54 into dev Oct 18, 2023
1 check passed

woo-chang deleted the feat/#753 branch October 18, 2023 07:26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

공지사항 목록 페이지 이동 링크 추가 / 마이페이지에 공지사항, 관리자 페이지 추가 #754

공지사항 목록 페이지 이동 링크 추가 / 마이페이지에 공지사항, 관리자 페이지 추가 #754

Gilpop8663 commented Oct 16, 2023 •

edited

Loading

github-actions bot commented Oct 16, 2023 •

edited

Loading

inyeong-kang left a comment •

edited

Loading

inyeong-kang Oct 16, 2023

inyeong-kang Oct 16, 2023

inyeong-kang Oct 16, 2023

inyeong-kang Oct 16, 2023

inyeong-kang Oct 16, 2023

inyeong-kang Oct 16, 2023

inyeong-kang left a comment

chsua left a comment

chsua Oct 18, 2023

chsua Oct 18, 2023

chsua commented Oct 18, 2023

Gilpop8663 commented Oct 18, 2023

chsua left a comment

공지사항 목록 페이지 이동 링크 추가 / 마이페이지에 공지사항, 관리자 페이지 추가 #754

공지사항 목록 페이지 이동 링크 추가 / 마이페이지에 공지사항, 관리자 페이지 추가 #754

Conversation

Gilpop8663 commented Oct 16, 2023 • edited Loading

🔥 연관 이슈

📝 작업 요약

⏰ 소요 시간

🔎 작업 상세 설명

path url

사진

비회원

회원

관리자

로그인 페이지 카카오 버튼 이미지 수정

변경 전

변경 후

🌟 논의 사항

github-actions bot commented Oct 16, 2023 • edited Loading

inyeong-kang left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

inyeong-kang left a comment

Choose a reason for hiding this comment

chsua left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chsua commented Oct 18, 2023

Gilpop8663 commented Oct 18, 2023

chsua left a comment

Choose a reason for hiding this comment

Gilpop8663 commented Oct 16, 2023 •

edited

Loading

github-actions bot commented Oct 16, 2023 •

edited

Loading

inyeong-kang left a comment •

edited

Loading