✨ Feat: Toast UI 구현

src/components/Toast/Toast.style.ts

@@ -0,0 +1,67 @@
+import styled from '@emotion/styled';
+
+interface StyledToastProps {
+  width?: number;
+  height?: number;
+  toastType: string;
+}
+
+const ChildContainer = (backgroundColor: string, textColor: string) => {
+  return `
+  background-color: ${backgroundColor};
+  color: ${textColor};
+  border-left: 10px solid ${textColor};`;
+};
+
+const StyledToast = styled.div<StyledToastProps>`
+  width: ${({ width }) => (width ? `${width}px` : `100%`)};
+  max-width: 768px;
+  min-height: ${({ height }) => (height ? `${height}px` : `70px`)};
+  position: absolute;
+  top: 50px;
+  display: flex;
+  justify-content: space-between;
+  transition: 3s all ease-out;
+  animation: hide 3s ease-out forwards;
+  opacity: 1;
+  padding: 0px 30px;
+  ${({ theme }) => theme.style.flexAlignCenter};
+  ${({ toastType, theme }) =>
+    toastType === 'ERROR'
+      ? ChildContainer(theme.color.redPastel, theme.color.redVivid)
+      : ''}
+  ${({ toastType, theme }) =>
+    toastType === 'WARNING'
+      ? ChildContainer(theme.color.orangePastel, theme.color.orange)
+      : ''}
+  ${({ toastType, theme }) =>
+    toastType === 'SUCCESS'
+      ? ChildContainer(theme.color.greenDarkPastel, theme.color.greenDark)
+      : ''}
+  ${({ toastType, theme }) =>
+    toastType === 'CONFIRM'
+      ? ChildContainer(theme.color.bluePastel, theme.color.blue)
+      : ''}
+
+  @keyframes hide {
+    0% {
+      opacity: 1;
+    }
+    80% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+      display: none;
+    }
+  }
+`;
+
+const IconContainer = styled.div`
+  cursor: pointer;
+  width: 30px;
+  height: 30px;
+  ${({ theme }) => theme.style.flexCenter};
+`;
+
+export { StyledToast, IconContainer };

src/components/Toast/Toast.tsx

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+
+import { Icon } from '@components/Icon';
+import { StyledToast, IconContainer } from './Toast.style';
+
+interface ToastProps {
+  width?: number;
+  height?: number;
+  content: string;
+  type: 'WARNING' | 'ERROR' | 'ALERT' | 'SUCCESS';
+}
+
+const Toast = ({ width, height, content, type }: ToastProps) => {
+  const [toastShow, setToastShow] = useState(true);
+
+  const clickCancelIcon = () => {
+    setToastShow(false);
+  };
+
+  return (
+    toastShow && (
+      <StyledToast
+        width={width}
+        height={height}
+        toastType={type}>
+        {content}
+        <IconContainer onClick={clickCancelIcon}>
+          <Icon
+            name='close'
+            size={14}
+          />
+        </IconContainer>
+      </StyledToast>
+    )
+  );
+};
+
+export default Toast;

src/components/Toast/index.ts

@@ -0,0 +1,3 @@
+import Toast from './Toast';
+
+export { Toast };

src/pages/posting/Posting.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import { NewPost } from './components/NewPost';
@@ -7,34 +8,44 @@ import {
   StyledDescription,
   StyledPosting
 } from './Posting.style';
-import { useEffect } from 'react';
+import PostingHelper from './components/NewPost/PostingHelper';
+
+interface ReceiveState {
+  totalTime: number;
+  channelId: string;
+  channelLabel: string;
+}
 
 const Posting = () => {
   const location = useLocation();
-  const navigate = useNavigate();
-  const { channelId, validation, channelLabel, totalTime } = location.state;
   const { token } = JSON.parse(sessionStorage.getItem('userData'));
+  const [meditationInfo, setMeditationInfo] = useState<ReceiveState>({
+    totalTime: 0,
+    channelId: '',
+    channelLabel: ''
+  });
+  const { totalTime, channelLabel, channelId } = meditationInfo;
   const customToken = `bearer ${token}`;
 
   useEffect(() => {
-    if (!validation) {
+    if (location.state === null) {
       navigate('/404');
     }
-  });
+
+    setMeditationInfo(location.state);
+  }, []);
 
   return (
     <StyledPosting>
       <ContentContainer>
         <StyledDescription>
-          <p>
-            총 <b>{totalTime / 60}</b>분 동안 명상을 진행했어요!
-          </p>
-          <p>
-            <u>{channelLabel}</u>에 대해 어떤 생각을 하셨나요?
-          </p>
+          <PostingHelper
+            totalTime={totalTime}
+            channelLabel={channelLabel}
+          />
         </StyledDescription>
         <NewPost
-          meditationInfo={location.state}
+          meditationInfo={channelId}
           customToken={customToken}
         />
         <SkipPosting

src/pages/posting/components/NewPost/PostingHelper.tsx

@@ -0,0 +1,19 @@
+interface PostingHelperProps {
+  totalTime: number;
+  channelLabel: string;
+}
+
+const PostingHelper = ({ totalTime, channelLabel }: PostingHelperProps) => {
+  return (
+    <>
+      <p>
+        총 <b>{totalTime / 60}</b>분 동안 명상을 진행했어요!
+      </p>
+      <p>
+        <u>{channelLabel}</u>에 대해 어떤 생각을 하셨나요?
+      </p>
+    </>
+  );
+};
+
+export default PostingHelper;

src/styles/colors.ts

@@ -5,9 +5,15 @@ export const color = {
   purpleLighter: '#e8d6f8',
   purpleVivid: '#8f00ff',
   redVivid: '#bc0000',
+  redPastel: '#FFE0E0',
   greenVivid: '#39cb47',
+  greenDark: '#2D881F',
+  greenDarkPastel: '#E7FFE3',
   orange: '#ff9900',
+  orangePastel: '#FFF0DF',
   pastelBlueLight: '#c9d0e9',
+  blue: '#47B2FF',
+  bluePastel: '#ECF8FF',
   white: '#ffffff',
   white900: '#f9f9f9',
   white800: '#eeeeee',