공지사항 목록 관리자 페이지 구현 / 공지사항 생성, 수정, 삭제 기능 #780

Gilpop8663 · 2023-10-18T09:12:53Z

🔥 연관 이슈

close: #759

📝 작업 요약

공지사항 목록 관리자 페이지 구현
공지사항 생성 페이지 구현
공지사항 수정 페이지 구현
공지사항 삭제 기능 추가
페이지네이션 커스텀 훅 작성
merge 코드 충돌 해결하며 사라진 router 코드 재작성

⏰ 소요 시간

5시간

🔎 작업 상세 설명

공지사항 목록

삭제하기 버튼을 눌렀을 떄

공지사항 생성/ 수정 페이지

달력은 input으로 구현하였습니다 그리고 현재 시간 이전으로는 선택 불가능하도록 하였고, 모든 input에는 required 속성을 추가해주었습니다

그리고 현재 시간을 StringDate 형식으로 사용하기 위해서 utils/post 함수를 수정했습니다

…ether into feat/#759

코드 머지되며 일부 적용되지 않은 코드 다시 변경

github-actions · 2023-10-18T09:15:21Z

⚡️ Lighthouse report!

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

Category	Score
🟢 First Contentful Paint	0.7 s
🔴 Largest Contentful Paint	4.1 s
🔴 Total Blocking Time	2,020 ms
🟢 Cumulative Layout Shift	0
🟢 Speed Index	3.2 s

chsua

코멘트 달았습니다!!!
고생하셨어요!!

이제 시간이 얼마 남지 않았는데, 우스랑 함께 코드를 짤 수 있어서 너무 좋았습니다!
우리 조금 더 힘내봐요!!

chsua · 2023-10-18T13:02:58Z

frontend/src/components/notice/AdminNoticeWrite/index.tsx

+
+interface AdminNoticeWriteProps {
+ notice: Notice;
+ writeType: '수정' | '작성';


상수화해도 좋을 것 같아요!

아래와 같이 상수화하여 타입 지정했습니다

타입은 따로 파일을 만들지 않았는데요

다른 곳에서 사용하는 곳이 없고, export 했을 때 자동완성 목록에서 안 나오면 좋겠어서 컴포넌트 내부에 타입 선언해주었습니다

export const NOTICE_WRITE_TYPE = { CREATE: '작성', EDIT: '수정', } as const; --------------------- type NoticeWriteType = (typeof NOTICE_WRITE_TYPE)[keyof typeof NOTICE_WRITE_TYPE]; interface AdminNoticeWriteProps { notice: Notice; writeType: NoticeWriteType; writeNotice: (notice: NoticeRequest) => void; } export default function AdminNoticeWrite({ notice,

chsua · 2023-10-18T13:05:54Z

frontend/src/components/notice/AdminNoticeWrite/index.tsx

+ rows?: number;
+}
+
+function CustomTextarea({ label, handleTextChange, text, limit, rows = 10 }: CustomInputProps) {


따로 분리하지 않으셨군요!

공지사항 작성에서만 사용할 목적으로 Textarea를 만들었습니다 따로 export 하기에는 범용성이 적다고 생각했어요

스타일도 많이 적용을 해서 분리하기엔 애매하다고 생각이 드는데 어떻게 생각하시나여? 🌊

chsua · 2023-10-18T13:06:45Z

frontend/src/components/notice/AdminNoticeWrite/index.tsx

+ return (
+ <S.TextareaContainer>
+ <S.Label htmlFor={label}>
+ {label} ({text.length}/{limit})


👍👍👍

chsua · 2023-10-18T13:12:21Z

frontend/src/routes/router.tsx

 children: [
 {
- path: PATH.NOTICES.slice(1),
+ path: `${PATH.REPORT.slice(1)}/pending`,


이렇게 작성하니 어렵게 느껴지네요😢

다른 것들을 보니 children은 그냥 path로 작성햇네요..
이야기해서 통일이 필요할 것 같아요.

네 좋아요! 의논해서 리팩터링하게 되더라도 다른 이슈에서 하도록 통일성있게 해놓겠습니다 👍👍👍

chsua · 2023-10-18T13:17:05Z

frontend/src/utils/post/addTimeToDate.ts

- const newMonth = String(newTime.getMonth() + 1).padStart(2, '0');
- const newHour = String(newTime.getHours()).padStart(2, '0');
- const newMinute = String(newTime.getMinutes()).padStart(2, '0');
+ const newDay = +String(newTime.getDate()).padStart(2, '0');


이렇게 하면 잘 나오나요..?
이럼 숫자 9 > 문자 09 > 숫자 9 이렇게 되지 않아요??

동일하게 잘 나오지만, 코드 가독성이 나쁘다고 생각하여서 + 대신 Number로 감싸주었습니다 🌊🌊🌊

inyeong-kang

갓우스🚀
변수명 관련된 코멘트가 좀 있어요!

항상 테스트 주도 개발하시는 모습 넘 멋져요👍💯

inyeong-kang · 2023-10-18T10:03:02Z

frontend/__test__/hooks/usePagination.test.tsx

+ [23, 20, [21, 22, 23]],
+ [2, 0, [1, 2]],
+ [10, 3, [1, 2, 3, 4, 5]],
+ ])(


오 테스트 케이스들이 많아서 좋네요👍

frontend/src/components/notice/AdminNoticeTableFetcher/index.tsx

inyeong-kang · 2023-10-18T13:41:14Z

frontend/src/components/notice/AdminNoticeTableFetcher/index.tsx

+ editButton: (
+ <S.EditButtonWrapper to={`${PATH.ADMIN_NOTICE}/${id}`}>
+ <SquareButton theme="fill">수정하기</SquareButton>
+ </S.EditButtonWrapper>


수정하기 대신 수정
어떠신가요! 저장 버튼처럼..

너무 좋습니당

저번에 라이트하우스 하면서 보기=>보러가기 했던것이 너무 인상깊었나봐요 ㅋㅋㅋ

inyeong-kang · 2023-10-18T13:59:36Z

frontend/src/components/notice/AdminNoticeTableFetcher/index.tsx

+ columns={[
+ '제목',
+ '내용',
+ '배너 타이틀',


배너 제목 어떠세요

매의 눈으로 이렇게 찾아주는게 너무 좋아요

inyeong-kang · 2023-10-18T14:00:28Z

frontend/src/components/notice/AdminNoticeTableFetcher/index.tsx

+ setPage(item);
+ }}
+ >
+ <SquareButton theme={page === item - 1 ? 'fill' : 'blank'}>{item}</SquareButton>


오~~~ 기존 컴포넌트 활용한거 정말 좋은데요?👍💯

최애 common 컴포넌트입니다

inyeong-kang · 2023-10-18T14:02:10Z

frontend/src/components/notice/AdminNoticeWrite/index.tsx

+}
+
+export default function AdminNoticeWrite({
+ notice,


혹시 PostForm 처럼 어떤 컴포넌트인지 직관적으로 와닿게 NoticeForm 어떠신가요?

통일성 있어서 좋네요!

inyeong-kang · 2023-10-18T14:06:26Z

frontend/src/hooks/usePagination.ts

+ * @param size 페이지를 몇개씩 보여줄 것인지의 단위 default: 5
+ * @returns
+ */
+export const usePagination = (initialPageNumber: number = 0, size: number = 5) => {


오 hook으로 페이징 로직을 분리해주셨군요!
저는 url 값으로 페이징해서 다음 페이지 가면 페이지 전체를 렌더링하는데.. 우스처럼 hook 을 쓰면 목록 Table 상태만 갈아끼울 수 있다는 장점이 있네요! 저도 이 방식으로 리팩터링해봐야겠어요😃

사용자를 동료 개발자를 타겟으로 하여 페이지 기능을 만들 때 범용성 있게 사용되도록 할 목적으로 만들었습니다 🌊

url로 페이징하면 페이지 전체를 렌더링 하는 것은 처음 알게 되었네요 !

inyeong-kang · 2023-10-18T14:07:38Z

frontend/src/hooks/usePagination.ts

+ setPageNumber(value - 1);
+ };
+
+ const isCheckNextPage = (totalPage: number) => {


isNextPage 나 checkNextPage 어떠신가요?

boolean을 반환하는 함수 이름 명은 너무 어렵네요

isNextPage는 함수라는 생각이 안들어서요 checkNextPage가 적절해보여서 수정해보겠습니다

근데 다시 생각해보니 isCheck~~는 체크했나 확인하는 같은 느낌이 들어서 함수명이라는 생각이 확 들지 않네요

inyeong-kang · 2023-10-18T14:09:03Z

frontend/src/pages/notice/NoticeAdminPage/index.tsx

+
+import * as S from './style';
+
+export default function NoticeAdminPage() {


admin 경로로 옮기는거 어떠신가용
pages/admin/notices 이렇게요!

다른 폴더들은 notice와 같이 s를 안 붙혔는데 admin/notice/~~Page가 있을 것을 생각하니 s를 붙히는 것이 더 적절해보보여서 notices로 했습니당

inyeong-kang · 2023-10-18T14:12:52Z

fe-리뷰완

Gilpop8663 · 2023-10-18T22:16:36Z

코드 리뷰 주셨던 부분들을 코드 수정하여 개선해보았습니다 👍👍

fe-리뷰요청

Gilpop8663 added 13 commits October 17, 2023 14:14

chore: (#759) 디자인 시스템 설치 및 프로바이더 감쌌음

33c938e

Merge branch 'dev' of https://github.com/woowacourse-teams/2023-votog…

e73249d

…ether into feat/#759

feat: (#759) 페이지네이션 공지사항 훅 리팩터링

86e16a4

feat: (#759) 어드민 공지사항 화면 구현

2fbc71a

chore: (#759) dev 브런치와 충돌나는 코드 병합

d8b0681

feat: (#759): 페이지네이션 커스텀 훅 구현 및 테스트 코드 작성

9078bfa

Merge branch 'dev' of https://github.com/woowacourse-teams/2023-votog…

929eaca

…ether into feat/#759

feat: (#759) 공지사항 생성, 수정 페이지 라우터 설정

ac221d8

코드 머지되며 일부 적용되지 않은 코드 다시 변경

feat: (#759) 공지사항 생성 페이지 구현

094457d

feat: (#759) 공지사항 수정 페이지 구현

d5113f9

feat: (#759) 공지사항 삭제 기능 구현

955b95e

feat: (#759) 공지사항 생성, 수정 페이지를 router에 적용

ad2db1d

chore: (#759) package-lock.json이 예전 것으로 올라가서 재업로드

d92f33e

Gilpop8663 added FE 🐾 개발 labels Oct 18, 2023

Gilpop8663 requested review from inyeong-kang and chsua October 18, 2023 09:12

Gilpop8663 self-assigned this Oct 18, 2023

chsua approved these changes Oct 18, 2023

View reviewed changes

inyeong-kang approved these changes Oct 18, 2023

View reviewed changes

Gilpop8663 added 7 commits October 19, 2023 06:39

refactor: (#759) 수정하기 => 수정 , 배너 타이틀 => 베너 제목으로 수정

094ce76

refactor: (#759) 수정 삭제에 관한 상수 설정

e75a024

refactor: (#759) AdminNoticeWrite => NoticeForm 으로 이름 변경

2902b87

refactor: (#759) isCheckNextPage => checkNextPage로 변경

0210f8a

refactor: (#759) router 통일성 있게 코드 수정 및 admin/notices 폴더로 파일 이동

9f6beea

refactor: (#759) 관리자 접근 실패하면 내 정보 페이지로 라우팅 되도록 하는 코드 복구

8f17f1c

refactor: (#759) 숫자로 변환할 때 + 대신 Number을 통해 코드 가독성 개선

a7527c7

inyeong-kang merged commit cc2558f into dev Oct 19, 2023
1 check passed

inyeong-kang deleted the feat/#759 branch October 19, 2023 01:10

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

공지사항 목록 관리자 페이지 구현 / 공지사항 생성, 수정, 삭제 기능 #780

공지사항 목록 관리자 페이지 구현 / 공지사항 생성, 수정, 삭제 기능 #780

Gilpop8663 commented Oct 18, 2023

github-actions bot commented Oct 18, 2023 •

edited

Loading

chsua left a comment

chsua Oct 18, 2023

Gilpop8663 Oct 18, 2023

chsua Oct 18, 2023

Gilpop8663 Oct 18, 2023

chsua Oct 18, 2023

chsua Oct 18, 2023

chsua Oct 18, 2023

Gilpop8663 Oct 18, 2023

chsua Oct 18, 2023

Gilpop8663 Oct 18, 2023

inyeong-kang left a comment

inyeong-kang Oct 18, 2023

inyeong-kang Oct 18, 2023

Gilpop8663 Oct 18, 2023

inyeong-kang Oct 18, 2023

Gilpop8663 Oct 18, 2023

inyeong-kang Oct 18, 2023

Gilpop8663 Oct 18, 2023

inyeong-kang Oct 18, 2023

Gilpop8663 Oct 18, 2023

inyeong-kang Oct 18, 2023

Gilpop8663 Oct 18, 2023

inyeong-kang Oct 18, 2023

Gilpop8663 Oct 18, 2023

inyeong-kang Oct 18, 2023

Gilpop8663 Oct 18, 2023

Gilpop8663 Oct 18, 2023

inyeong-kang commented Oct 18, 2023

Gilpop8663 commented Oct 18, 2023


		import * as S from './style';

		export default function NoticeAdminPage() {

공지사항 목록 관리자 페이지 구현 / 공지사항 생성, 수정, 삭제 기능 #780

공지사항 목록 관리자 페이지 구현 / 공지사항 생성, 수정, 삭제 기능 #780

Conversation

Gilpop8663 commented Oct 18, 2023

🔥 연관 이슈

📝 작업 요약

⏰ 소요 시간

🔎 작업 상세 설명

공지사항 목록

삭제하기 버튼을 눌렀을 떄

공지사항 생성/ 수정 페이지

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

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

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

Choose a reason for hiding this comment

inyeong-kang left a 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

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

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 commented Oct 18, 2023

Gilpop8663 commented Oct 18, 2023

github-actions bot commented Oct 18, 2023 •

edited

Loading