✨ Feat: 토스트 컴포넌트 구현 #15

BaeZzi813 · 2025-09-30T13:29:38Z

토스트 컴포넌트 구현 #13

📝 작업 개요 (필수)

토스트 기능을 전역적으로 Context 설정하여 전체 페이지에서 쓸 수 있도록 설계

✨ 작업 내용 (필수)

📸 스크린샷

🧐 해결해야 하는 문제

🤔 리뷰어 확인 필요 사항

직접 테스트 페이지를 만들어서 테스트 해보았는데

사용시에는

import { useToast } from '@/context/toastContext';

export default function Test() {
  const { showToast } = useToast();
  return (
    <>
      <button onClick={() => showToast('테스트 성공!')}>테스트 버튼</button>
    </>
  );
}

위와 같이 사용하시면 될 것 같습니다.

🔗 관련 이슈

🛠️ 후속 작업

✅ 체크리스트 (필수)

작업한 내용과 커밋 메시지 컨벤션을 통일했는지 확인
내가 작성한 코드를 테스트까지 완료했는지 잘 작동했는지 확인
ESLint 검사 통과
Prettier 포맷팅 적용
TypeScript 에러 없음
빌드 에러 없음

토스트 컴포넌트 구현 codeit-FE18-part3#13

vercel · 2025-09-30T13:29:43Z

@BaeZzi813 is attempting to deploy a commit to the projects Team on Vercel.

A member of the Team first needs to authorize it.

sohyun0

고생 많으셨습니다 ! 코멘트 확인부탁드립니다 ☺️

sohyun0 · 2025-09-30T13:48:24Z

src/components/layout/frame/frame.tsx

  return (
    <>
      <section className='flex flex-col gap-4 px-3 py-10 tablet:px-8 tablet:py-[60px] desktop:px-[237px] desktop:py-[60px]'>
        <h1 className='text-xl font-bold text-black tablet:text-[28px]'>{title}</h1>


text-black 의 경우에는 global.css 에서 선언하고 있어서 이부분은 제외해도 좋을것 같습니다 :)

sohyun0 · 2025-09-30T13:55:05Z

src/components/layout/frame/frame.tsx

+const Frame = ({ title, content }: FrameProps) => {
  return (
    <>
      <section className='flex flex-col gap-4 px-3 py-10 tablet:px-8 tablet:py-[60px] desktop:px-[237px] desktop:py-[60px]'>


desktop:px-[237px] 이부분은 container로 만들면 될것같습니다 !
container 아예 유동적으로 사용할 수 있도록 조금 변경해둘게요!

네 알겠습니다~!

sohyun0 · 2025-09-30T13:55:42Z

src/components/layout/frame/frame.tsx

      <section className='flex flex-col gap-4 px-3 py-10 tablet:px-8 tablet:py-[60px] desktop:px-[237px] desktop:py-[60px]'>
        <h1 className='text-xl font-bold text-black tablet:text-[28px]'>{title}</h1>
        <div className='flex flex-col items-center justify-center gap-4 rounded-xl border border-solid border-gray-200 px-6 py-[60px]'>
          <h2 className='text-sm font-normal text-black tablet:text-base'>{content}</h2>


여기 텍스트도 동일하게 기본 컬러는 선언안해주셔도 됩니다 :)

sohyun0 · 2025-09-30T13:59:13Z

src/context/toastContext/toastContext.tsx

+        {toastRoot &&
+          createPortal(
+            message ? (
+              <div className='fixed bottom-28 right-[38%] rounded-[5px] bg-red-300 px-4 py-[10px] text-white tablet:right-2/4'>


토스트는 하단 중앙이라고 알고있는데 혹시 38% 로 설정하신 이유가 있으실까요!?

또한 접근성을 고려한다면 role="alert" 를 넣을수도 있을것 같아요 (추천)

left-1/2 -translate-x-1/2 으로 설정해서 모바일에서도 바로 적용되게 수정했습니다! role 도 넣어놨어요!

sohyun0 · 2025-09-30T14:03:20Z

src/context/toastContext/toastContext.tsx

+
+  const showToast = (msg: string) => {
+    setMessage(msg);
+    setTimeout(() => setMessage(null), 3000);


setTimeout 사용후 unmount 될때 메모리 누수 발생할 수 있을것 같아요!
만약 토스트가 연속적으로 (현재는 그럴일은 없겠지만) 호출된다면 타임아웃이 꼬일 수도 있구요!

useEffect 에 clearTimeout 넣어두면 조금더 안전하게 작동될것 같습니다!

useEffect 안으로 마운트시에만 작동하게 하고, 정리함수로 clearTimeout 적용했습니다~!

… into jaeyeong :wq q! :q! c

sohyun0

고생하셨습니다 :)

sohyun0 · 2025-09-30T14:59:00Z

src/components/layout/frame/frame.tsx

+        <h1 className='text-xl font-bold tablet:text-[28px]'>{title}</h1>
+        <div className='flex flex-col items-center justify-center gap-4 rounded-xl border border-solid border-gray-200 px-6 py-[60px]'>
+          <h2 className='text-sm font-normal tablet:text-base'>{content}</h2>


이부분 제가 미쳐 못봤었는데 font-size 관련 tailwind config 에 전부 등록되어있습니다 !
스토리북에서도 확인가능합니다 :)

text-heading-l = 28px 이런식으로 작성하시면 됩니다!

vercel · 2025-09-30T14:59:36Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
thejulge	Ready	Preview	Comment	Sep 30, 2025 3:00pm

✨ Feat

96d5594

토스트 컴포넌트 구현 codeit-FE18-part3#13

BaeZzi813 requested review from gummmmmy0v0 and jeschun September 30, 2025 13:29

BaeZzi813 added the ✨ feat 새로운 기능 추가 label Sep 30, 2025

sohyun0 assigned BaeZzi813 Sep 30, 2025

sohyun0 reviewed Sep 30, 2025

View reviewed changes

BaeZzi813 added 3 commits September 30, 2025 23:32

fix: global css 폰트 색상 수정 / 토스트 기능 useEffect 내부로 수정

576d5ce

fix: 테스트 시 사용한 test.tsx 페이지 삭제

d520bd0

Merge branch 'develop' of https://github.com/codeit-FE18-part3/Thejulge…

7a834c3

… into jaeyeong :wq q! :q! c

sohyun0 approved these changes Sep 30, 2025

View reviewed changes

vercel bot deployed to Preview September 30, 2025 15:00 View deployment

sohyun0 merged commit 7846290 into codeit-FE18-part3:develop Sep 30, 2025
2 checks passed

✨ Feat: 토스트 컴포넌트 구현 #15

✨ Feat: 토스트 컴포넌트 구현 #15

Uh oh!

Conversation

BaeZzi813 commented Sep 30, 2025

📝 작업 개요 (필수)

✨ 작업 내용 (필수)

📸 스크린샷

🧐 해결해야 하는 문제

🤔 리뷰어 확인 필요 사항

🔗 관련 이슈

🛠️ 후속 작업

✅ 체크리스트 (필수)

Uh oh!

vercel bot commented Sep 30, 2025

Uh oh!

sohyun0 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!

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!

sohyun0 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vercel bot commented Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel bot commented Sep 30, 2025 •

edited

Loading