Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sohyun0 merged 4 commits into from
Sep 30, 2025
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
96d5594
✨ Feat
BaeZzi813 Sep 30, 2025
576d5ce
fix: global css 폰트 색상 수정 / 토스트 기능 useEffect 내부로 수정
BaeZzi813 Sep 30, 2025
d520bd0
fix: 테스트 시 사용한 test.tsx 페이지 삭제
BaeZzi813 Sep 30, 2025
7a834c3
Merge branch 'develop' of https://github.com/codeit-FE18-part3/Thejul…
BaeZzi813 Sep 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 0 additions & 5 deletions src/components/layout/footer.tsx
View file
Open in desktop

This file was deleted.

14 changes: 2 additions & 12 deletions src/components/ui/frame.tsx → src/components/layout/frame/frame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,16 @@
import { useRouter } from 'next/router';

interface FrameProps {
title: string;
content: string;
buttonText: string;
address: string;
}

const Frame = ({ title, content, buttonText, address }: FrameProps) => {
const router = useRouter();
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]'>
Copy link
Contributor

@sohyun0 sohyun0 Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

@BaeZzi813 BaeZzi813 Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

네 알겠습니다~!

<h1 className='text-xl font-bold text-black tablet:text-[28px]'>{title}</h1>
Copy link
Contributor

@sohyun0 sohyun0 Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

<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>
Copy link
Contributor

@sohyun0 sohyun0 Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

<button
onClick={() => router.push(`/${address}`)}
className='rounded-md bg-[#ea3c12] px-5 py-[10px] text-sm font-bold text-white tablet:px-[136px] tablet:py-[14px] tablet:text-base'
>
{buttonText}
</button>
{/* 버튼 컴포넌트 넣을 자리 */}
</div>
</section>
</>
Expand Down
Empty file added src/components/layout/frame/index.ts
View file
Open in desktop
Empty file.
Empty file added src/context/toastContext/index.ts
View file
Open in desktop
Empty file.
44 changes: 44 additions & 0 deletions src/context/toastContext/toastContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import { createContext, ReactNode, useContext, useState } from 'react';
import { createPortal } from 'react-dom';

interface ToastContextType {
showToast: (message: string) => void;
}

const ToastContext = createContext<ToastContextType | null>(null);

export const useToast = () => {
const ctx = useContext(ToastContext);
if (!ctx) throw new Error('useToast 는 Provider 안에서 사용해주세요');
return ctx;
};

const ToastProvider = ({ children }: { children: ReactNode }) => {
const [message, setMessage] = useState<string | null>(null);

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

@sohyun0 sohyun0 Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

Copy link
Contributor Author

@BaeZzi813 BaeZzi813 Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

};

const toastRoot = typeof window !== 'undefined' ? document.getElementById('toast-root') : null;

return (
<>
<ToastContext.Provider value={{ showToast }}>
{children}
{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'>
Copy link
Contributor

@sohyun0 sohyun0 Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

@sohyun0 sohyun0 Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

@BaeZzi813 BaeZzi813 Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

{message}
</div>
) : null,
toastRoot
)}
</ToastContext.Provider>
</>
);
};

export default ToastProvider;
3 changes: 2 additions & 1 deletion src/pages/_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Container, Header, Wrapper } from '@/components/layout';
import ToastProvider from '@/context/toastContext/toastContext';
import '@/styles/fonts.css';
import '@/styles/globals.css';
import type { NextPage } from 'next';
Expand Down Expand Up @@ -29,7 +30,7 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
<link rel='icon' href='/favicon.ico' sizes='any' />
<link rel='icon' href='/favicon.png' type='image/png' sizes='192x192' />
</Head>
{getLayout(<Component {...pageProps} />)}
<ToastProvider>{getLayout(<Component {...pageProps} />)}</ToastProvider>
</>
);
}
1 change: 1 addition & 0 deletions src/pages/_document.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export default function Document() {
<Head />
<body className='antialiased'>
<Main />
<div id='toast-root'></div>
<NextScript />
</body>
</Html>
Expand Down
Loading