[FE] feat: 토스트 구현 #608

hae-on · 2023-09-13T01:30:22Z

Issue

close [FE] 토스트 구현 #587

✨ 구현한 기능

토스트를 구현하였습니다.

📢 논의하고 싶은 내용

에러 버전과 기본 버전만 만들었습니다.
추후 상황에 따라 더 추가하거나 리팩터링 하도록 하겠습니다.

🎸 기타

특이 사항이 있으면 작성합니다.

⏰ 일정

추정 시간 : 주말
걸린 시간 : 약 3일

github-actions · 2023-09-13T01:31:33Z

Unit Test Results

5 tests 5 ✔️ 5s ⏱️
2 suites 0 💤
1 files 0 ❌

Results for commit 76ed54a.

Leejin-Yang

해온의 장인정신 토스트.. 정말 매우 고생했습니다!
알림 메시지가 한결 더 깔끔하게 보이겠네요 👍
코멘트 확인해주세요~

Leejin-Yang · 2023-09-13T15:56:56Z

frontend/src/components/Common/Toast/Toast.tsx

+type ToastStyleProps = Pick<ToastProps, 'isError'>;
+
+const ToastContainer = styled.div<ToastStyleProps & { isAnimating?: boolean }>`


Suggested change

type ToastStyleProps = Pick<ToastProps, 'isError'>;

const ToastContainer = styled.div<ToastStyleProps & { isAnimating?: boolean }>`

type ToastStyleProps = Pick<ToastProps, 'isError'> & { isAnimating?: boolean };

const ToastContainer = styled.div<ToastStyleProps>`

스타일 프롭스에 isAnimating 타입을 추가하는건 어떤가요?

죠습니다

Leejin-Yang · 2023-09-13T15:57:48Z

frontend/src/components/Common/Toast/Toast.tsx

+  message: string;
+}
+
+const Toast = ({ isError, message }: ToastProps) => {


isError에 디폴트 값을 넣어주면 더 좋겠네요!

Leejin-Yang · 2023-09-13T15:59:28Z

frontend/src/hooks/common/useToast.ts

+  useEffect(() => {
+    setTimeout(() => setIsAnimating(false), 2000);
+    if (!isAnimating) {
+      setTimeout(() => clearTimeout(toastTimer.current), 500);
+    }
+  }, [isAnimating]);


클린업 함수도 추가해보죠!

Leejin-Yang · 2023-09-13T15:59:49Z

frontend/src/index.tsx

@@ -8,7 +8,7 @@ import { RouterProvider } from 'react-router-dom';

 import { SvgSprite } from './components/Common';
 import router from './router';
-import GlobalStyle from './styles';
+import GlobalStyle from './styles/globalStyle';


파일 이름을 globalStyle로 바꾼 이유가 있을까요?

animation이라는 파일을 추가했는데 index.ts가 있더라구요. 당연히 다른 파일처럼 경로 모아두는 파일이라고 생각했는데 아니여서 헷갈렸습니다. 지금은 global이랑 animation밖에 없는데 하나 더 추가되면 index.ts에 경로를 모아두어야 할 거 같아서 수정했습니다.

Leejin-Yang · 2023-09-13T16:00:13Z

frontend/src/styles/animations.ts

+
+export const slideIn = keyframes`
+  0% {
+    transform: translateY(-100px);


transform 👍

Leejin-Yang · 2023-09-13T16:02:27Z

frontend/src/hooks/common/useToast.ts

+const useToast = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isAnimating, setIsAnimating] = useState(true);
+  const toastTimer = useRef<NodeJS.Timeout>();


Suggested change

const toastTimer = useRef<NodeJS.Timeout>();

const toastTimer = useRef<number | null>(null);

브라우저 환경에서 동작하니 number로 가고
undefined보다 null로 없다는걸 명시적으로 하는 건 어떤가요??

아래 setTimeout -> window.setTimeout이 되겠네요

얍 수정하였습니다

xodms0309

해온~~ 토스트 컴포넌트 만드느라 정말 수고 많았습니다.
이 컴포넌트에 제가 제안하고 싶은 방법이 있는데요! 저도 장바구니 미션을 할 때 받았던 피드백입니다.
현재 토스트 컴포넌트는 조건부 렌더링을 하고 있는데요, 이 부분을 호출하는 방법으로 써보면 어떨까 싶습니다

if (success) toast.success("토스트 메시지")

이런식으로 쓸 수 있게요!

저희 서비스에서 토스트 메시지는 리뷰 작성 완료했을 때의 성공/실패 여부에 대해 보여지게 될 것 같은데 위와 같이 호출 방법으로 작성하면 query의 onSuccess에서 간단하게 작성이 가능할 것 같습니다!

onSuccess: () => toast.success("리뷰 작성 완료");

이런식으로요! 나머지는 다 굿굿입니다~~👍

xodms0309 · 2023-09-14T01:40:56Z

frontend/src/components/Common/Toast/Toast.stories.tsx

+      <>
+        <div style={{ width: '375px' }}>
+          <button onClick={handleClick}>토스트 테스트</button>
+          {isOpen && <Toast message="토스트 메세지" />}
+        </div>
+      </>


Suggested change

<>

<div style={{ width: '375px' }}>

<button onClick={handleClick}>토스트 테스트</button>

{isOpen && <Toast message="토스트 메세지" />}

</div>

</>

<div style={{ width: '375px' }}>

<button onClick={handleClick}>토스트 테스트</button>

{isOpen && <Toast message="토스트 메세지" />}

</div>

xodms0309 · 2023-09-14T01:41:23Z

frontend/src/components/Common/Toast/Toast.stories.tsx

+      <>
+        <div style={{ width: '375px' }}>
+          <button onClick={handleClick}>토스트 테스트</button>
+          {isOpen && <Toast isError message="토스트 메세지" />}
+        </div>
+      </>


Suggested change

<>

<div style={{ width: '375px' }}>

<button onClick={handleClick}>토스트 테스트</button>

{isOpen && <Toast isError message="토스트 메세지" />}

</div>

</>

<div style={{ width: '375px' }}>

<button onClick={handleClick}>토스트 테스트</button>

{isOpen && <Toast isError message="토스트 메세지" />}

</div>

요것들은 fragment로 안감싸도 되겠네용

github-actions · 2023-09-30T08:58:54Z

Test Results

2 tests 2 ✔️ 0s ⏱️
1 suites 0 💤
1 files 0 ❌

Results for commit bd50ecb.

♻️ This comment has been updated with latest results.

hae-on · 2023-10-06T00:56:58Z

@xodms0309 @Leejin-Yang

2023-10-06.9.48.39.mov

context를 활용해 토스트를 구현하였습니다.
하나의 토스트를 두고 교체하는 방식으로 하려고 했는데 isAnimating이라는 함수가 제대로 동작하지 않아 하지 못했습니다.
대신 토스트를 배열에 넣고 id로 삭제하는 방식으로 구현하였습니다.

물론 이 방식도 토스트 호출을 마구 갈기면 토스트가 사라질 때 엉망진창으로 사라지는 오류가 있습니다....ㅠ
우리 서비스에서는 그럴일이 없을 거 같아 아직은 나둘 생각입니다!

오랜만에 context를 사용해서 제대로 사용한게 맞나 모르겠네요 확인 부탁드려요!
특히 Toast.tsx를 보면

  const [isShown, setIsShown] = useState(true);

  useEffect(() => {
    setTimeout(() => setIsShown(false), 2000);
    if (!isShown) {
      setTimeout(() => deleteToast(id), 500);
    }
  }, [isShown]);

이 부분을 Context에 옮기고 싶었는데 id를 못받아와서 저기에 뒀습니다...
deleteToast의 Id를 context에서 처리할 수 있으면 context에서 setIsShown랑 deleteToast는 내보내지 않아도 될 거 같은데 방법을 모르겠네요.

toast provider를 어디에 둘 지 몰라서 Index.tsx에 RouterProvider 상위에 감쌌습니다.
이것도 다른 곳을 원하신다면 어디에 둘 지 말해주세요.
끗-

xodms0309

해옹 토스트 굽느라 고생했어요 코멘트 몇 개만 확인해주세요!
그리고 저만 뭔가 토스트 빨리 사라지는 것 같나요?🤔

xodms0309 · 2023-10-06T01:33:43Z

frontend/src/components/Common/Toast/Toast.stories.tsx

+        <>
+          <button onClick={handleClick}>토스트 성공</button>
+        </>


Fragment 지워도 될 것 같네용

xodms0309 · 2023-10-06T01:33:51Z

frontend/src/components/Common/Toast/Toast.stories.tsx

+        <>
+          <button onClick={handleClick}>토스트 에러</button>
+        </>


여기도요

xodms0309 · 2023-10-06T01:39:21Z

frontend/src/pages/HomePage.tsx

@@ -19,6 +19,7 @@ export const HomePage = () => {

  return (
    <>
+      <button>하이</button>


xodms0309 · 2023-10-06T01:40:36Z

frontend/src/contexts/ToastContext.tsx

+            {toasts.map((toast) => (
+              <Toast key={toast.id} id={toast.id} message={toast.message} isError={toast.isError} />
+            ))}


Suggested change

{toasts.map((toast) => (

<Toast key={toast.id} id={toast.id} message={toast.message} isError={toast.isError} />

))}

{toasts.map(({id, message, isError}) => (

<Toast key={id} id={id} message={message} isError={isError} />

))}

destructing 해서 쓰는게 어떤가요?!

xodms0309 · 2023-10-06T01:45:15Z

frontend/src/components/Common/Toast/Toast.tsx

+
+  return (
+    <ToastWrapper isError={isError} isAnimating={isShown}>
+      <MessageWrapper color={theme.colors.white}>{message}</MessageWrapper>


Text 컴포넌트라서 MessageWrapper보다 Message라고 네이밍 하는게 더 좋을 것 같아요!

xodms0309 · 2023-10-06T02:04:45Z

frontend/src/contexts/ToastContext.tsx

+
+  const toastAction = {
+    toast,
+    setToasts,


얘는 내보냈는데 안 쓰는 것 같아요 맞나요?

Leejin-Yang

토스트 대장정 수고했어요 해온
이제 진정한 토스트 장인이네요!

Leejin-Yang · 2023-10-06T02:06:29Z

frontend/src/index.tsx

+        <ToastProvider>
+          <RouterProvider router={router} fallbackElement={<p>...loading</p>} />
+        </ToastProvider>


Leejin-Yang · 2023-10-06T02:09:03Z

frontend/src/components/Common/Toast/Toast.tsx

+  useEffect(() => {
+    setTimeout(() => setIsShown(false), 2000);
+    if (!isShown) {
+      setTimeout(() => deleteToast(id), 500);
+    }
+  }, [isShown]);


클린업 함수 작성해주세요~

Co-authored-by: Leejin Yang <[email protected]>

hae-on · 2023-10-06T06:26:38Z

@xodms0309 @Leejin-Yang

2023-10-06.3.20.38.mov

속도 조절했습니다! 대신 저번처럼 위치 바뀌고 삭제되는게 아니라 그 자리에서 삭제 되네요! 참고해주세요~

hae-on added 7 commits September 12, 2023 19:49

feat: 토스트 구현

b2b8c53

feat: portal 구현

c38931d

chore: 파일 이름 변경

2e0aa11

chore: 변경된 파일 이름에 따라 import명 변경

08e3f3e

refactor: animation 분리

98f9cb9

feat: 에러일 때 스타일 추가

4bf3f8e

refactor: 기본, 에러 버전 구현

76ed54a

hae-on added 🔑 FE ✨ Feature labels Sep 13, 2023

hae-on requested review from xodms0309 and Leejin-Yang September 13, 2023 01:30

hae-on self-assigned this Sep 13, 2023

Leejin-Yang reviewed Sep 13, 2023

View reviewed changes

xodms0309 reviewed Sep 14, 2023

View reviewed changes

hae-on added 2 commits September 14, 2023 16:18

chore: develop merge

51d2840

chore: develop merge

304b8b8

hae-on added 6 commits October 4, 2023 01:09

refactor: 리뷰 반영

d72aa38

refactor: toast context로 변경

ceddf94

refactor: context action과 value로 분리

a57b243

refactor: toast context에서 portal 실행되도록 변경

a261eff

refactor: portal 위치 변경

2cbd5c7

refactor: context를 사용해 스토리북 변경

ebfbf27

xodms0309 reviewed Oct 6, 2023

View reviewed changes

Leejin-Yang approved these changes Oct 6, 2023

View reviewed changes

hae-on added 3 commits October 6, 2023 11:12

chore: 필요없는 fragment 삭제

2ca6b92

refactor: 구조 분해 할당으로 변경

89c19db

refactor: style 이름 변경

fd7c43b

hae-on and others added 3 commits October 6, 2023 11:18

refactor: 사용하지 않는 action 삭제

33f1da3

refactor: useToast로 분리

a82ab57

Co-authored-by: Leejin Yang <[email protected]>

chore: 사용하지 않는 테스트 버튼 삭제

033cc9d

Merge branch 'develop' into feat/issue-587

bd50ecb

xodms0309 approved these changes Oct 6, 2023

View reviewed changes

hae-on merged commit a1a27dc into develop Oct 6, 2023
3 checks passed

hae-on deleted the feat/issue-587 branch October 6, 2023 06:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] feat: 토스트 구현 #608

[FE] feat: 토스트 구현 #608

hae-on commented Sep 13, 2023

github-actions bot commented Sep 13, 2023

Leejin-Yang left a comment

Leejin-Yang Sep 13, 2023

hae-on Sep 14, 2023

Leejin-Yang Sep 13, 2023

Leejin-Yang Sep 13, 2023

hae-on Sep 14, 2023

Leejin-Yang Sep 13, 2023

hae-on Sep 14, 2023

Leejin-Yang Sep 13, 2023

Leejin-Yang Sep 13, 2023

hae-on Sep 14, 2023

xodms0309 left a comment

xodms0309 Sep 14, 2023

xodms0309 Sep 14, 2023

github-actions bot commented Sep 30, 2023 •

edited

Loading

hae-on commented Oct 6, 2023

xodms0309 left a comment

xodms0309 Oct 6, 2023

xodms0309 Oct 6, 2023

xodms0309 Oct 6, 2023

hae-on Oct 6, 2023

xodms0309 Oct 6, 2023

xodms0309 Oct 6, 2023

xodms0309 Oct 6, 2023

Leejin-Yang left a comment

Leejin-Yang Oct 6, 2023

Leejin-Yang Oct 6, 2023

hae-on commented Oct 6, 2023

		type ToastStyleProps = Pick<ToastProps, 'isError'>;

		const ToastContainer = styled.div<ToastStyleProps & { isAnimating?: boolean }>`

	const toastTimer = useRef<NodeJS.Timeout>();
	const toastTimer = useRef<number \| null>(null);

[FE] feat: 토스트 구현 #608

[FE] feat: 토스트 구현 #608

Conversation

hae-on commented Sep 13, 2023

Issue

✨ 구현한 기능

📢 논의하고 싶은 내용

🎸 기타

⏰ 일정

github-actions bot commented Sep 13, 2023

Unit Test Results

Leejin-Yang 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

xodms0309 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Sep 30, 2023 • edited Loading

Test Results

hae-on commented Oct 6, 2023

xodms0309 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

Leejin-Yang left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hae-on commented Oct 6, 2023

github-actions bot commented Sep 30, 2023 •

edited

Loading