[feat] Toast 컴포넌트 구현 #44

ghdtnals · 2025-04-28T08:56:44Z

#️⃣연관된 이슈

ex) #이슈번호, #이슈번호
Closes #42

📝 PR 유형

해당하는 유형에 'x'로 체크해주세요.

📝작업 내용

이번 PR에서 작업한 내용을 간략히 설명해주세요(이미지 첨부 가능)

Toast 공통 컴포넌트 구현
Wiki Toast 컴포넌트 페이지 작성

스크린샷 (선택)

💬리뷰 요구사항(선택)

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?

netlify · 2025-04-28T08:57:04Z

✅ Deploy Preview for thejulge1 ready!

Name	Link
🔨 Latest commit	`e48acab`
🔍 Latest deploy log	https://app.netlify.com/sites/thejulge1/deploys/681089ab52dd020008c5ddc2
😎 Deploy Preview	https://deploy-preview-44--thejulge1.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

cozy-ito · 2025-04-28T12:48:59Z

src/components/Toast.tsx

Toast라고 하는 UI가 할 수 있어야 할 동작들이 있을 것 같아요! 🤔
사용자가 어떤 행동(ex: 버튼 클릭 등)을 했을 때,
해당 행동이 정상적으로 잘 이뤄졌는지 피드백을 하기 위해서
브라우저 어딘가에 작은 창으로 메시지를 안내하는 것처럼요!
그래서 UI뿐만 아니라 전역적으로 해당 메시지를 바로 나타나게 할 수 있는 훅 등도 같이 구현되면 좋을 것 같아요 😅

UI는 다르지만, 참고할 만한 링크도 같이 첨부해봅니다.
참고1
참고2

혹시 어려우신 부분이 있으시다면, 알려주시면 같이 구현해봐도 좋을 것 같습니다! 👍

아 넵 링크 참고해서 코드 다시 수정해보도록 하겠습니다!👍👍

cozy-ito

고생하셨습니다! 👍

cozy-ito · 2025-04-29T03:50:30Z

src/components/Toast.tsx

연속적으로 토스트 메시지를 나타내면 메시지간의 간격이 너무 붙어 있는 것 같습니다 하핳
조금 간격을 띄우면 더 좋을 것 같아요! 👍

cozy-ito · 2025-04-29T03:56:18Z

src/components/Toast/ToastContainer.tsx

+          <div
+            key={toast.id}
+            className={`transition-opacity duration-500 ${
+              toast.isVisible ? "opacity-100" : "opacity-0"
+            }`}
+          >
+            <Toast label={toast.label} />
+          </div>


Toast 컴포넌트에 className prop을 하나 추가해서 아래처럼 적용하면
불필요한 div 태그를 제거할 수 있을 것 같아요!

Suggested change

<div

key={toast.id}

className={`transition-opacity duration-500 ${

toast.isVisible ? "opacity-100" : "opacity-0"

}`}

>

<Toast label={toast.label} />

</div>

<Toast

key={toast.id}

label={toast.label}

className={cn(

"transition-opacity duration-500",

toast.isVisible ? "opacity-100" : "opacity-0",

)}

/>

넵! 말씀해주신 부분들 반영하여 코드 수정해보겠습니다!!😊

cozy-ito · 2025-04-29T04:06:50Z

src/components/Toast/Toast.tsx

src/comopnents/Toast/Toast.tsx가 있고
src/components/Toast.tsx 두 가지 파일이 존재해보입니다!
필요하지 않은 하나는 제거 해주세요! 👍

헉 넵 수정하겠습니다!

almighty55555

수고하셨습니다~!!

almighty55555 · 2025-04-29T05:25:31Z

src/components/Toast/Toast.tsx

+  return (
+    <div className="relative inline-block rounded-md bg-red-30 px-4 py-[10px] text-white body1-regular">
+      {label}
+      {onClose && (


피그마 상으로 닫는 버튼을 쓸 일이 없는 것 같은데 구현하신 이유가 궁금합니당

어차피 아래 ToastContainer 코드에서 핸들러로 onClose를 누락시키는 것 같기도 하구요!!

혹시 나중에 필요할까 싶어 남겨두긴 했는데 없어도 괜찮을 것 같네요ㅎㅎ😊 해당 부분 수정하겠습니다!

almighty55555 · 2025-04-29T05:34:01Z

src/hooks/useToast.tsx

+  showToast: (label) => {
+    const id = Date.now();
+    set((state) => ({
+      toasts: [...state.toasts, { id, label, isVisible: true }],
+    }));
+
+    setTimeout(() => {
+      set((state) => ({
+        toasts: state.toasts.map((toast) =>
+          toast.id === id ? { ...toast, isVisible: false } : toast,
+        ),
+      }));
+
+      setTimeout(() => {
+        set((state) => ({
+          toasts: state.toasts.filter((toast) => toast.id !== id),
+        }));
+      }, 500);
+    }, 1000);
+  },


제 생각이지만 .. 중첩 setTimeout은 async/await으로 개선이 가능해보여요. 아래처럼 작성하면 구조가 간결화되어서 가독성이 좋아지지 않을까 합니당. Just 제안입니다!!

Suggested change

showToast: (label) => {

const id = Date.now();

set((state) => ({

toasts: [...state.toasts, { id, label, isVisible: true }],

}));

setTimeout(() => {

set((state) => ({

toasts: state.toasts.map((toast) =>

toast.id === id ? { ...toast, isVisible: false } : toast,

),

}));

setTimeout(() => {

set((state) => ({

toasts: state.toasts.filter((toast) => toast.id !== id),

}));

}, 500);

}, 1000);

},

showToast: async (label) => {

const id = Date.now();

set((state) => ({

toasts: [...state.toasts, { id, label, isVisible: true }],

}));

await new Promise((r) => setTimeout(r, 1000));

set((state) => ({

toasts: state.toasts.map((t) =>

t.id === id ? { ...t, isVisible: false } : t

),

}));

await new Promise((r) => setTimeout(r, 500));

set((state) => ({

toasts: state.toasts.filter((t) => t.id !== id),

}));

};

말씀해주신 부분들 반영하여 코드 수정하도록 하겠습니다!!😊

…MPONENT-42-HONG

feat: Toast 컴폰넌트 구현

91914cb

ghdtnals requested review from almighty55555 and cozy-ito April 28, 2025 08:56

ghdtnals self-assigned this Apr 28, 2025

ghdtnals added the Feature (기능 추가) 기능을 추가합니다. label Apr 28, 2025

github-actions bot requested a review from jeonghwanJay April 28, 2025 08:57

cozy-ito reviewed Apr 28, 2025

View reviewed changes

ghdtnals removed the request for review from jeonghwanJay April 28, 2025 15:56

feat: Toast 훅 추가

504aea1

cozy-ito self-requested a review April 29, 2025 03:52

cozy-ito approved these changes Apr 29, 2025

View reviewed changes

almighty55555 approved these changes Apr 29, 2025

View reviewed changes

ghdtnals added 3 commits April 29, 2025 16:45

chore: 사용하지 않는 파일 삭제

2f68450

refactor: Toast 관련 컴포넌트 코드 개선

f141276

Merge branch 'dev' of https://github.com/CodeitPart3/thejulge into CO…

e48acab

…MPONENT-42-HONG

ghdtnals merged commit eccdd2e into dev Apr 30, 2025
6 checks passed

[feat] Toast 컴포넌트 구현 #44

[feat] Toast 컴포넌트 구현 #44

Uh oh!

Conversation

ghdtnals commented Apr 28, 2025

#️⃣연관된 이슈

📝 PR 유형

📝작업 내용

스크린샷 (선택)

💬리뷰 요구사항(선택)

Uh oh!

netlify bot commented Apr 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for thejulge1 ready!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cozy-ito left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cozy-ito Apr 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

almighty55555 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

netlify bot commented Apr 28, 2025 •

edited

Loading

cozy-ito Apr 29, 2025 •

edited

Loading