feat: (#258) 토스트 위치 props 추가

- top/bottom 설정 가능
- 맨 위 화면에 노출
- vw/vh를 사용하여 화면의 가로 중앙에 위치

frontend/src/components/common/Toast/index.tsx

@@ -5,8 +5,13 @@ import * as S from './style';
 interface ToastProps {
  children: string;
  size: Size | 'free';
+ position: 'top' | 'bottom';
 }
 
-export default function Toast({ children, size }: ToastProps) {
- return <S.Wrapper $size={size}>{children}</S.Wrapper>;
+export default function Toast({ children, size, position }: ToastProps) {
+ return (
+ <S.Wrapper $position={position}>
+ <S.Content $size={size}>{children}</S.Content>
+ </S.Wrapper>
+ );
 }

frontend/src/components/common/Toast/style.ts

@@ -4,6 +4,13 @@ import { Size } from '@type/style';
 
 import { toastTime } from '@constants/animation';
 
+import { theme } from '@styles/theme';
+
+const position = {
+ top: '25%',
+ bottom: '85%',
+};
+
 const squareSize = {
  sm: { width: '250px', height: '30px' },
  md: { width: '400px', height: '35px' },
@@ -20,7 +27,22 @@ export const fadeInOutAnimation = keyframes`
  }
 `;
 
-export const Wrapper = styled.div<{ $size: Size | 'free' }>`
+export const Wrapper = styled.div<{ $position: 'top' | 'bottom' }>`
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-rows: ${props => position[props.$position]};
+ align-items: end;
+ justify-items: center;
+
+ width: 100vw;
+ height: 100vh;
+
+ position: fixed;
+ top: 0;
+ left: 0;
+`;
+
+export const Content = styled.div<{ $size: Size | 'free' }>`
  display: flex;
  align-items: center;
  justify-content: center;
@@ -29,13 +51,13 @@ export const Wrapper = styled.div<{ $size: Size | 'free' }>`
  height: ${props => squareSize[props.$size].height};
  border-radius: 4px;
 
- position: fixed;
-
  background-color: rgba(0, 0, 0, 0.5);
  color: var(--white);
 
  font: var(--text-caption);
  letter-spacing: 1px;
 
  animation: ${fadeInOutAnimation} ${toastTime}s linear infinite;
+
+ z-index: ${theme.zIndex.modal};
 `;