배너 공지사항 조회 / 공지사항 목록 조회 / 공지사항 상세 조회 / 공지사항 수정 / 공지사항 삭제 / 공지사항 생성 api 구현 및 query hook 구현 #739

Gilpop8663 · 2023-10-12T08:55:52Z

🔥 연관 이슈

close: #737

📝 작업 요약

배너 공지사항 조회 / 공지사항 목록 조회 / 공지사항 상세 조회 / 공지사항 수정 / 공지사항 삭제 / 공지사항 생성 api 구현 및 query hook 구현

⏰ 소요 시간

2시간 45분 api가 많아서 단순 코드 작성만 하는데 생각보다 시간이 더 걸렸어요

🔎 작업 상세 설명

공지사항 목록 조회를 할 때 useInfinitedQuery를 사용하였는데요. 그 이유는 더보기를 눌렀을 때 useState로 데이터를 한곳에 모아서 관리해야하는데 useInfinifyQuery에 이미 편하게 구현이 되어있어서 사용했습니다. 그래서 더보기를 사용해도 되고, 무한 스크롤을 사용해도 되는 코드로 구현해놓았습니다

캐시타임, 스테일타임을 건드렸습니다

배너 공지 사항 : 30분 / 이유 : 배너 공지사항이 바뀌는 일이 적다고 생각하였지만 혹시 공지사항이 바뀌었을 때 캐싱되어 있어서 공지사항을 못보는 상황까지 고려해서 1시간은 길다고 생각했고, 30분으로 하였습니다. 기본값으로 하기엔 너무 안변하는 데이터라서요
공지 상세 정보 : 1시간 / 이유 : 공지사항 상세 정보는 더더욱 바뀔 일이 적다고 생각하여 1시간으로 설정했습니다
공지 목록 : 30분 / 이유 : 공지 사항 목록이 바뀌는 일이 적다고 생각했지만, 목록이다 보니 배너 공지사항이 바뀐다면 목록도 바뀌어야 하기에 배너 공지 사항 시간과 일치시켰습니다.

에러

현재 토스트 PR이 올라와있는 상태여서 우선 콘솔에러로 하였는데요. 추후 토스트 코드를 통해 에러나 성공을 보여주면 좋겠다고 생각했습니다

api 감싸기

api가 변하진 않았지만 한번 감싸주었는데요. 이렇게 하는 편이 나중에 쉽게 코드를 고칠 수 있을거라고 생각해서 감싸줘보았습니다

…-votogether into feat/#713

github-actions · 2023-10-12T08:57:11Z

⚡️ Lighthouse report!

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

Category	Score
🟢 First Contentful Paint	0.7 s
🟠 Largest Contentful Paint	3.2 s
🔴 Total Blocking Time	1,590 ms
🟢 Cumulative Layout Shift	0
🟢 Speed Index	2.7 s

…-votogether into feat/#713

상세 게시글에서 이미지를 눌렀을 때 이미지가 확대되어져 보이는 모달이 보이도록 구현

Cmd(Ctrl) + Enter를 입력했을 때 댓글이 작성되도록 구현

inyeong-kang

타입 관련 코멘트 남겼습니다!!
공지사항 관련 API가 많은데 빠르고 꼼꼼한 구현 대단합니다👍👍

inyeong-kang · 2023-10-13T08:43:43Z

frontend/src/hooks/query/notice/useBannerNotice.tsx

+ getBannerNotice,
+ {
+ suspense: true,
+ cacheTime: 30 * 60 * 1000,


inyeong-kang · 2023-10-13T08:53:20Z

frontend/src/types/notice.ts

+export interface NoticeList {
+ totalPageNumber: number;
+ currentPageNumber: number;
+ noticeList: Notice[];


export interface NoticeListResponse { totalPageNumber: number; currentPageNumber: number; notices: NoticeResponse[]; }

api/notice 에 이런 타입이 있던데
export type NoticeList = Omit<Notice, 'notices'> & { noticeList: Notice[] };
처럼 유틸리티 타입으로 기존 타입인 Notice를 활용해보는 것도 좋겠네요!

제로 타입의 마술사이신가요? 🌊

그렇지만 바꾸지 않는 것이 더 유지 보수에 좋다고 생각이 들었습니다 그 이유는 아래와 같습니당

totalPageNumber와 currentPageNumber와 같은 명세가 백엔드에서 고쳐도 프론트에서는 고정이라고 생각을 하는데요. 유틸리티 타입으로 했을 때 오히려 수정하는 코드가 더 많아진다고 생각이 드는데 어떻게 생각하세요?

아래와 같이 api의 NoticeListResponse만 변경되어도 되는 코드가 제안해주신 코드로 한다면 프론트 코드에게 영향을 준다고 생각이 들어요

currentPageNumber가 pageNumber로 바뀌었을 경우 예시

export type NoticeList = Omit<Notice, 'notices' | 'pageNumber'> & { noticeList: Notice[] ; currentPageNumbre : number; };

음 우스의 의견도 어느정도 공감이 되는군요!!

저는 Omit으로 제외하는 타입이 3개까지는 괜찮다고 스스로 합의하고.... 현재 신고 목록 조회 API 관련 타입을 이미 선언한 상태인데요,
key 이름이 바뀌는게 3개 이내라면 앞으로도 Omit으로 처리할거 같아요!

그렇지만 만약 백엔드 측에서 대규모 리팩터링을 해버려서 키값들이 다 바뀐다면..?? 우스의 방식대로 하는 것이 합리적이라고 생각합니다😀

이건 수아의 의견도 궁금하군요 @chsua

inyeong-kang · 2023-10-13T09:00:23Z

frontend/src/hooks/query/notice/useStackedNoticeList.tsx

+ return data;
+ },
+ onError: () => {
+ console.error('공지 사항을 리스트를 불러오는데 실패했습니다');


공지 사항의 리스트 어떠신가유

알려주셔서 감사합니다 👍👍👍

inyeong-kang · 2023-10-13T09:02:10Z

frontend/src/api/notice.ts

+ notices: NoticeResponse[];
+}
+
+export type NoticeRequest = Omit<NoticeResponse, 'createdAt' | 'id'>;


id 제외하시는 이유가 궁금해요!!

공지사항 생성 시 id는 받지 않기 때문에 제외시켰습니당

{ title: string, (100자) content: string, (3000자) deadline: datetime (DHM 형태이다, yyyy-mm-dd HH:MM) : string bannerTitle : string, (100자) bannerSubtitle: string (100자) }

아하 공지사항 생성과 달리 공지사항 수정할 때는 noticeId 를 url의 params로 넣어서 보내야 하는군요.. 공지사항 수정할 때 noticeId 값을 쿼리에 따로 전달하는 이유가 궁금했는데 궁금증이 해소되었습니다😄👍

fe-리뷰완

…-votogether into feat/#737

Gilpop8663

fe-리뷰요청

Gilpop8663 · 2023-10-13T19:11:46Z

frontend/src/api/notice.ts

+ notices: NoticeResponse[];
+}
+
+export type NoticeRequest = Omit<NoticeResponse, 'createdAt' | 'id'>;


공지사항 생성 시 id는 받지 않기 때문에 제외시켰습니당

{ title: string, (100자) content: string, (3000자) deadline: datetime (DHM 형태이다, yyyy-mm-dd HH:MM) : string bannerTitle : string, (100자) bannerSubtitle: string (100자) }

Gilpop8663 · 2023-10-13T19:14:15Z

frontend/src/hooks/query/notice/useStackedNoticeList.tsx

+ return data;
+ },
+ onError: () => {
+ console.error('공지 사항을 리스트를 불러오는데 실패했습니다');


알려주셔서 감사합니다 👍👍👍

Gilpop8663 · 2023-10-13T19:21:25Z

frontend/src/types/notice.ts

+export interface NoticeList {
+ totalPageNumber: number;
+ currentPageNumber: number;
+ noticeList: Notice[];


제로 타입의 마술사이신가요? 🌊

그렇지만 바꾸지 않는 것이 더 유지 보수에 좋다고 생각이 들었습니다 그 이유는 아래와 같습니당

totalPageNumber와 currentPageNumber와 같은 명세가 백엔드에서 고쳐도 프론트에서는 고정이라고 생각을 하는데요. 유틸리티 타입으로 했을 때 오히려 수정하는 코드가 더 많아진다고 생각이 드는데 어떻게 생각하세요?

아래와 같이 api의 NoticeListResponse만 변경되어도 되는 코드가 제안해주신 코드로 한다면 프론트 코드에게 영향을 준다고 생각이 들어요

currentPageNumber가 pageNumber로 바뀌었을 경우 예시

export type NoticeList = Omit<Notice, 'notices' | 'pageNumber'> & { noticeList: Notice[] ; currentPageNumbre : number; };

Gilpop8663 · 2023-10-13T19:27:44Z

제로! 제안해주신 코드에 대해 코멘트 달았읍니당

fe-리뷰요청

chsua

우스! 정말 많은 테스트 코드를 작성하셨군요!
쿼리 훅이 많이 제작되었네요!

혹시 읽으면서 이미 머지된 imageZoomModal의 코드가 있는데,
이전 브랜치로 계속 작업하셔서 그런건가요..?

그 외에는 css 글로벌스타일에 대한 코멘트가 몇가지 있습니다만, approve 하겠습니다!

chsua · 2023-10-15T18:31:27Z

frontend/src/components/comment/CommentList/CommentTextForm/index.tsx

@@ -61,6 +61,14 @@ export default function CommentTextForm({
 createComment({ content: deleteOverlappingNewLine(content) });
 };

+ const handleKeyboardCommentSubmit = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+ const isPressCtrlAndEnterKey = (event.metaKey || event.ctrlKey) && event.key === 'Enter';


😆😆😆

chsua · 2023-10-15T18:38:38Z

frontend/src/components/comment/CommentList/CommentTextForm/style.ts

@@ -20,12 +20,12 @@ export const TextArea = styled.textarea`
 resize: none;

 &::placeholder {
- font-size: 14px;
+ font-size: 1.4rem;


저희 얼른 1.4rem 글로벌 스타일 만들어야겠어요

chsua · 2023-10-15T18:39:04Z

frontend/src/components/comment/CommentList/CommentTextForm/style.ts

 }

 @media (max-width: ${theme.breakpoint.sm}) {
 &::placeholder {
- font-size: 12px;
+ font-size: 1.2rem;


요건 var(--text-small)있는데 따로 처리 안하신 이유가 있나요?

알려주셔서 감사합니다 ~ 👍

chsua · 2023-10-15T18:43:55Z

frontend/src/components/common/ImageZoomModal/ImageZoomModal.stories.tsx

+ render: () => <ImageZoomModalStory />,
+};
+
+function ImageZoomModalStory() {


요거 이전에 머지된 기능아닌가요..? 데자뷰..?

chsua · 2023-10-15T18:46:37Z

frontend/src/hooks/query/notice/usePagedNoticeList.tsx

+
+export const usePagedNoticeList = (initialPageNumber: number = 0) => {
+ const [pageNumber, setPageNumber] = useState(initialPageNumber);
+ const { data, isError, isLoading, error } = useQuery<NoticeList>(


오 이전에 이야기하실때 useInfiniteQuery 사용한다고 하셨던 것 같은데 useQuery를 사용하신 이유가 있으신가요??

아 이게 페이지네이션으로 보이는 공지사항이군요

네 맞습니당~!

inyeong-kang

타입 관련 컨벤션을 페어프로그래밍을 통해 일치하였습니다!! 화이팅~~

Gilpop8663 added 19 commits October 5, 2023 15:19

feat: (#713) 이미지 모달 초기 셋팅

823bf6f

Merge branch 'feat/#713' of https://github.com/woowacourse-teams/2023…

a174960

…-votogether into feat/#713

feat: (#713) 이미지 확대 모달 훅 구현 및 적용

b8bf29b

fix: (#723) Drawer 내부가 탭 기능이 안되던 버그 수정

be2314d

style: (#713) 이미지 확대 모달 CSS 속성 적용

4472e32

style: (#713) 이미지 반응형 되도록 CSS 설정

0b634e7

feat: (#713) Post 컴포넌트에서 이미지 확대 모달 기능 적용

2497e6d

fix: (#710) 선택지 사진이 정중앙 배치가 되도록 수정

f6e43ea

feat: (#732) 키보드 ctrl + enter을 눌렀을 때 댓글을 달 수 있도록 구현

eef1725

chore: (#732) 변수명 변경 및 개행 추가

73154a1

feat: (#732) Command 키 지원되도록 수정 및 댓글 저장 밑의 설명글 추가

f9df3ba

style: (#732) 글자 크기 줄임

e227674

feat: (#737) 공지사항 모킹 데이터 생성

a773c2d

feat: (#737) 공지사항 관련된 api 구현 및 테스트 코드 작성

38b5e3c

feat: (#737) 공지사항 관련 탄스텍 쿼리 훅 구현 및 테스트 코드 작성

518a59a

feat: (#737) 공지사항 목록 페이지네이션 구현 및 테스트 코드 작성

fdf06a2

feat: (#737) 공지사항 목록 페이지네이션 구현 및 테스트 코드 작성

05fcb1b

chore: (#737) 중복되어 만든 훅 삭제

662c7fb

chore: (#737) 중복된 코드 삭제로 인한 테스트 코드 변경

844a937

Gilpop8663 added FE 🐾 개발 labels Oct 12, 2023

Gilpop8663 requested review from inyeong-kang and chsua October 12, 2023 08:55

Gilpop8663 self-assigned this Oct 12, 2023

Gilpop8663 and others added 4 commits October 13, 2023 14:58

Merge branch 'feat/#713' of https://github.com/woowacourse-teams/2023…

a231c61

…-votogether into feat/#713

chore: (#713) 스타일드 컴포넌트 코드 순서 변경

fd0177f

상세 게시글에서 이미지를 눌렀을 때 이미지가 확대되어져 보이는 모달이 보이도록 구현 (#713)

7b0230e

상세 게시글에서 이미지를 눌렀을 때 이미지가 확대되어져 보이는 모달이 보이도록 구현

style: (#732) 컨트롤 키 안내 문구 버튼 위로 이동

33f593f

Gilpop8663 and others added 4 commits October 13, 2023 15:30

Cmd(Ctrl) + Enter를 입력했을 때 댓글이 작성되도록 구현 (#732)

e6661b4

Cmd(Ctrl) + Enter를 입력했을 때 댓글이 작성되도록 구현

feat: (#737) api에 현재 페이지, 전체 페이지 정보를 받도록 코드 업데이트

2f051f9

feat: (#737) 페이지네이션 방식의 공지사항 리스트 api 훅 구현

a714fc1

feat: (#737) 사용자가 보게 될 데이터가 쌓이는 형태의 공지사항 목록 훅 구현 및 테스트 코드 추가 작성

4f0dda5

inyeong-kang requested changes Oct 13, 2023

View reviewed changes

Gilpop8663 added 3 commits October 14, 2023 04:10

Merge branch 'feat/#737' of https://github.com/woowacourse-teams/2023…

814e3a2

…-votogether into feat/#737

chore: (#737) 어색한 한글 수정 및 사용하지 않는 코드 삭제

02364f6

chore: (#737) 어색하거나 불필요한 테스트 코드 문구 삭제

ccfda7f

Gilpop8663 commented Oct 13, 2023

View reviewed changes

chsua approved these changes Oct 15, 2023

View reviewed changes

style: (#737) 1.2rem을 이미 존재하는 글로벌 스타일로 변경

c016505

inyeong-kang approved these changes Oct 17, 2023

View reviewed changes

refactor: (#737) 유연한 타입 재사용을 위한 Omit 활용

1796d47

Gilpop8663 merged commit 6560ea4 into dev Oct 17, 2023
1 check passed

woo-chang deleted the feat/#737 branch October 17, 2023 09:12

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

배너 공지사항 조회 / 공지사항 목록 조회 / 공지사항 상세 조회 / 공지사항 수정 / 공지사항 삭제 / 공지사항 생성 api 구현 및 query hook 구현 #739

배너 공지사항 조회 / 공지사항 목록 조회 / 공지사항 상세 조회 / 공지사항 수정 / 공지사항 삭제 / 공지사항 생성 api 구현 및 query hook 구현 #739

Gilpop8663 commented Oct 12, 2023 •

edited

Loading

github-actions bot commented Oct 12, 2023 •

edited

Loading

inyeong-kang left a comment

inyeong-kang Oct 13, 2023

inyeong-kang Oct 13, 2023

Gilpop8663 Oct 13, 2023

inyeong-kang Oct 16, 2023 •

edited

Loading

inyeong-kang Oct 13, 2023

Gilpop8663 Oct 13, 2023

inyeong-kang Oct 13, 2023

Gilpop8663 Oct 13, 2023

inyeong-kang Oct 16, 2023 •

edited

Loading

Gilpop8663 left a comment

Gilpop8663 Oct 13, 2023

Gilpop8663 Oct 13, 2023

Gilpop8663 Oct 13, 2023

Gilpop8663 commented Oct 13, 2023

chsua left a comment

chsua Oct 15, 2023

chsua Oct 15, 2023

chsua Oct 15, 2023

Gilpop8663 Oct 16, 2023

chsua Oct 15, 2023

chsua Oct 15, 2023

chsua Oct 15, 2023

Gilpop8663 Oct 16, 2023

inyeong-kang left a comment

배너 공지사항 조회 / 공지사항 목록 조회 / 공지사항 상세 조회 / 공지사항 수정 / 공지사항 삭제 / 공지사항 생성 api 구현 및 query hook 구현 #739

배너 공지사항 조회 / 공지사항 목록 조회 / 공지사항 상세 조회 / 공지사항 수정 / 공지사항 삭제 / 공지사항 생성 api 구현 및 query hook 구현 #739

Conversation

Gilpop8663 commented Oct 12, 2023 • edited Loading

🔥 연관 이슈

📝 작업 요약

⏰ 소요 시간

🔎 작업 상세 설명

캐시타임, 스테일타임을 건드렸습니다

에러

api 감싸기

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

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

inyeong-kang Oct 16, 2023 • 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

inyeong-kang Oct 16, 2023 • edited Loading

Choose a reason for hiding this comment

Gilpop8663 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

Gilpop8663 commented Oct 13, 2023

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

inyeong-kang left a comment

Choose a reason for hiding this comment

Gilpop8663 commented Oct 12, 2023 •

edited

Loading

github-actions bot commented Oct 12, 2023 •

edited

Loading

inyeong-kang Oct 16, 2023 •

edited

Loading

inyeong-kang Oct 16, 2023 •

edited

Loading