feat-fe: 이메일 발송 내역 조회 #970

github-actions · 2024-12-19T12:42:47Z

목적

이메일 발송 내역을 조회하는 페이지를 추가합니다.

작업 세부사항

api 적용
디자인
이메일 발송 Form 컴포넌트 리팩토링 및 적용
이메일 발송 후 내역 조회 쿼리 무효화

작업 결과

리팩토링 참고

기존 MessageForm 컴포넌트를 재사용하기 위해 Compound Pattern을 사용해 리팩토링했습니다.
이에 따라 아래 요소로 분리되었습니다. 오랜만에 리팩토링하니까 개운하고 재밌네요^^

구성 요소는 아래와 같습니다.

MessageForm(Base)
MessageForm.FloatingBody
MessageForm.Header
MessageForm.Form

아래의 별표줄 밑에 요구사항 ID만 작성해주세요. Prefix 금지!

EMAIL_01

closes #969

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Jeongwoo Park <[email protected]>

Co-authored-by: Jeongwoo Park <[email protected]> Co-authored-by: Jeongwoo Park <[email protected]>

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Seongjin Hong <[email protected]>

github-actions · 2025-01-14T14:27:01Z

1736864820.768509

github-actions · 2025-01-14T14:27:03Z

1736864823.314289

Co-authored-by: Jeongwoo Park <[email protected]>

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Jeongwoo Park <[email protected]> Co-authored-by: Kim Da Eun <[email protected]>

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Seongjin Hong <[email protected]>

Co-authored-by: Jeongwoo Park <[email protected]>

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Kim Da Eun <[email protected]>

github-actions · 2025-02-06T09:27:04Z

1738834023.774879

lurgi

3주간 발효된 PR도 맛있네요. 김치처럼
코멘트 확인 부탁드립니🙇‍♂️

lurgi · 2025-02-06T09:33:17Z

frontend/src/components/ApplicantModal/style.ts

+  &:hover {
+    cursor: pointer;
+  }


해당 hover 이벤트가 잘못 적용되어있는 듯 해요.
메뉴 내부 각각의 요소에 들어가야 할 것 같습니다!

lurgi · 2025-02-06T09:46:50Z

frontend/src/hooks/useGetEmailHistory/index.tsx

+  const { data: { emailResponses: emailHistory } = { emailResponses: [] } } = useQuery({
+    queryKey: [QUERY_KEYS.EMAIL_HISTORY, clubId, applicantId],
+    queryFn: () => emailApis.history({ clubId, applicantId }),
+  });


초기값은 initalData 속성을 사용하는게 어떨까요?
조금 더 직관적으로 느껴지는데, 어떻게 생각하실까용

Suggested change

const { data: { emailResponses: emailHistory } = { emailResponses: [] } } = useQuery({

queryKey: [QUERY_KEYS.EMAIL_HISTORY, clubId, applicantId],

queryFn: () => emailApis.history({ clubId, applicantId }),

});

const {

data: { emailResponses: emailHistory },

} = useQuery({

queryKey: [QUERY_KEYS.EMAIL_HISTORY, clubId, applicantId],

initialData: { emailResponses: [] },

queryFn: () => emailApis.history({ clubId, applicantId }),

});

추가로 이메일 보냈을때 해당 응답에 대한 revalidate가 추가되면 좋겠어요!
혹은 refetch 요청 없이 캐싱값만 수정해도 되겠구용!

응답에 대한 revalidate가 어떤 건지 이해하지 못했어요. 어떤 케이스가 있는지 설명해주실 수 있을까용?

초기값은 initalData 속성을 사용하는게 어떨까요?

initialData 속성을 까먹고 있었네요. 반영하겠습니다~

lurgi · 2025-02-06T09:53:42Z

frontend/src/api/domain/email.ts

@@ -32,6 +33,9 @@ const emailApis = {
      path: '/verify-code',
      body: { email, verificationCode },
    }),
+
+  history: async (params: { clubId: string; applicantId: number }) =>
+    apiClient.get<{ emailResponses: Email[] }>({ path: `/${params.clubId}/${params.applicantId}` }),


응답값의 객체 이름은 emailHistoryResponses으로 변경되었나봐요!

lurgi · 2025-02-06T09:57:38Z

frontend/src/components/dashboard/SideFloatingMessageForm/MessageForm/index.tsx


  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (subject && content && !subjectError && !contentError) {
      onSubmit({ subject, content });
    }
    if (!subject) setSubjectError('제목을 입력해주세요.');
-
    if (!content) setContentError('내용을 입력해주세요.');
  };


이곳에 email history에 대한 refetch 혹은 Optimistic Update로직이 들어가면 좋겠습니다 ☺️

cache invalidation을 해서 refetch를 해주고 있는데 새로운 정보로 업데이트가 안되고 있었네요.
서버에서 이메일을 보내고 사용자 정보 DB에 이메일 전송 내역을 업데이트하기까지 갭이 있어 그런 것 같습니다.
이를 다음과 같이 대응했습니다.

새로운 이메일 전송 내역을 '전송중' 표시하여 낙관적 업데이트 적용.

5초 뒤 cache invalidation을 실행해 실제 refetch를 이룸.

lurgi · 2025-02-06T09:58:01Z

frontend/src/components/dashboard/SideFloatingMessageForm/MessageForm/index.tsx

스바라시하게 업그레이드 되었네요..👍

lurgi · 2025-02-06T09:58:30Z

frontend/src/components/_common/atoms/EmailHistoryItem/index.tsx

+  const formattedDate = new Date(createdDate).toLocaleDateString('ko-KR', { month: 'long', day: 'numeric' });
+  const formattedTime = new Date(createdDate).toLocaleTimeString('ko-KR', { hour: 'numeric', minute: 'numeric' });


로컬 설정까지 👍

llqqssttyy · 2025-02-12T10:50:18Z

@lurgi
작업할 땐 발견하지 못했던 문제가 많았네용! 스바라시한 리뷰 감사합니다~
변경된 내용은 아래와 같아요!

이메일 전송 후 낙관적 업데이트 적용
모달 메뉴의 마우스 오버 스타일 변경
emailResponses -> emailHistoryResponses로 변경
전송 실패 시 토스트 노출 추가

lurgi · 2025-02-12T11:36:33Z

frontend/src/hooks/useEmail/index.tsx

+      const FIVE_SECONDS = 5000;
+      setTimeout(() => {
+        queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.EMAIL_HISTORY, clubId, applicantIds[0]] });
+      }, FIVE_SECONDS);


백엔드 코드 수정 요청후 변경되어야 하겠네용

lurgi

아쌈

github-actions bot and others added 2 commits November 17, 2024 10:47

refactor-fe: Tanstack Query 데이터 캐싱 정책 변경 (#947)

6b4e55c

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Jeongwoo Park <[email protected]>

Create draft PR for #969

544f38b

github-actions bot added feature 새로운 기능 frontend 프론트엔드 labels Dec 19, 2024

github-actions bot assigned llqqssttyy Dec 19, 2024

github-actions bot added this to the 스프린트 7.0 milestone Dec 19, 2024

github-actions bot and others added 17 commits December 20, 2024 12:16

feat-fe: useLocalStorageState 구현 (#964)

1157cfe

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Jeongwoo Park <[email protected]>

feat-fe: 공고폼 임시 저장 기능 구현 (#954)

0e0fe44

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Jeongwoo Park <[email protected]>

feat: 지원자 상세 정보 모달 사이드 바 메뉴

5ae54dc

feat: 이메일 내역 컴포넌트

59fc079

feat: 이메일 전송 모달

2072beb

fix-fe: QuetionDto 타입 변경 (#978)

ae8286a

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Jeongwoo Park <[email protected]>

feat-fe: 지원서 입력 폼 임시 저장 기능 구현 (#976)

a02123c

Co-authored-by: Jeongwoo Park <[email protected]> Co-authored-by: Jeongwoo Park <[email protected]>

feat-fe: 지원자 평가 목록 및 작성 폼에 평가자 이름 필드 추가 (#966)

d7c73d3

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Seongjin Hong <[email protected]>

feat-fe: 지원자 평가 목록에서 개별 평가 삭제 기능 추가 (#968)

5bf229b

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Seongjin Hong <[email protected]>

feat: 이메일 내역 api

b169bbf

feat: 이메일 내역 msw 핸들러 추가

7e1a32f

chore: mock 데이터 수정

92106a7

chore: 이메일 섹션 스타일 변경

b3bbd99

chore: 목 데이터 변경

6ca11bd

feat: 이메일 전송, MessageForm 컴포넌트 리팩토링

ddfbb58

feat: 이메일 전송 후 이메일 내역 쿼리 새로 고침

dc5e2e9

feat: 전송 완료 후 이메일 컴포넌트 제거

7844f53

llqqssttyy requested review from seongjinme and lurgi January 14, 2025 14:26

Merge branch 'fe/develop' into 969-fe-EMAIL_01

674d027

llqqssttyy removed the request for review from seongjinme January 15, 2025 13:08

fix: 지원자 정보 임시저장 기능 버그 수정 (#994)

f4b479c

Co-authored-by: Jeongwoo Park <[email protected]>

github-actions bot and others added 6 commits January 22, 2025 14:15

fix-fe: 지원자 지원시 confirm 여러번 나타나는 버그 수정 (#996)

bcd23ba

Co-authored-by: Jeongwoo Park <[email protected]>

feat-fe: CSV 다운로드 기능 구현 (#999)

b8ae6ca

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Jeongwoo Park <[email protected]> Co-authored-by: Kim Da Eun <[email protected]>

feat-fe: 범용 Tooltip 컴포넌트 구현, 대시보드 사이드바 버그 수정 및 리팩토링 (#986)

8259f61

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Seongjin Hong <[email protected]>

chore-fe: Question 타입 Description 추가 및 이에 따른 생성 구현에 대한 로직 수정 (#1003)

574b0b4

Co-authored-by: Jeongwoo Park <[email protected]>

feat-fe: 지원서 페이지에 질문 상세 추가 (#1005)

bb4a7c4

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Kim Da Eun <[email protected]>

Merge branch 'fe/develop' into 969-fe-EMAIL_01

d792af8

lurgi marked this pull request as ready for review February 6, 2025 09:26

lurgi requested changes Feb 6, 2025

View reviewed changes

llqqssttyy added 2 commits February 10, 2025 16:21

chore: emailResponses -> emailHistoryResponses로 변경

6a4447b

chore: 모달 메뉴 마우스 오버 스타일 변경

93375d9

Base automatically changed from fe/develop to fe/main February 10, 2025 07:33

llqqssttyy added 4 commits February 12, 2025 19:19

feat: 이메일 히스토리 조회 낙관적 업데이트 적용

d4f1cb6

refactor: 쿼리키 생성 로직 모듈로 분리

f8c9da5

feat: 전송 실패 시 토스트 노출

28eeeab

refactor: tanstack query의 initialData 속성 사용

bca8c78

lurgi reviewed Feb 12, 2025

View reviewed changes

lurgi approved these changes Feb 12, 2025

View reviewed changes

Merge branch 'fe/develop' into 969-fe-EMAIL_01

1436812

llqqssttyy changed the base branch from fe/main to fe/develop February 13, 2025 05:00

llqqssttyy enabled auto-merge (squash) February 13, 2025 06:28

llqqssttyy self-requested a review February 13, 2025 06:35

llqqssttyy approved these changes Feb 13, 2025

View reviewed changes

llqqssttyy disabled auto-merge February 13, 2025 07:01

llqqssttyy merged commit 82b304d into fe/develop Feb 13, 2025
14 of 15 checks passed

llqqssttyy deleted the 969-fe-EMAIL_01 branch February 13, 2025 07:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat-fe: 이메일 발송 내역 조회 #970

feat-fe: 이메일 발송 내역 조회 #970

github-actions bot commented Dec 19, 2024 •

edited by llqqssttyy

Loading

github-actions bot commented Jan 14, 2025

github-actions bot commented Jan 14, 2025

github-actions bot commented Feb 6, 2025

lurgi left a comment

lurgi Feb 6, 2025

lurgi Feb 6, 2025

lurgi Feb 6, 2025

llqqssttyy Feb 12, 2025

llqqssttyy Feb 12, 2025

lurgi Feb 6, 2025

lurgi Feb 6, 2025

llqqssttyy Feb 12, 2025

lurgi Feb 6, 2025

lurgi Feb 6, 2025

llqqssttyy commented Feb 12, 2025 •

edited

Loading

lurgi Feb 12, 2025

lurgi left a comment

		const formattedDate = new Date(createdDate).toLocaleDateString('ko-KR', { month: 'long', day: 'numeric' });
		const formattedTime = new Date(createdDate).toLocaleTimeString('ko-KR', { hour: 'numeric', minute: 'numeric' });

feat-fe: 이메일 발송 내역 조회 #970

feat-fe: 이메일 발송 내역 조회 #970

Conversation

github-actions bot commented Dec 19, 2024 • edited by llqqssttyy Loading

목적

작업 세부사항

작업 결과

리팩토링 참고

github-actions bot commented Jan 14, 2025

github-actions bot commented Jan 14, 2025

github-actions bot commented Feb 6, 2025

lurgi 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

llqqssttyy commented Feb 12, 2025 • edited Loading

Choose a reason for hiding this comment

lurgi left a comment

Choose a reason for hiding this comment

github-actions bot commented Dec 19, 2024 •

edited by llqqssttyy

Loading

llqqssttyy commented Feb 12, 2025 •

edited

Loading