Merge pull request #87 from Nubblee/design/toast-84

[Design] 토스트 컴포넌트 구현

package.json

@@ -20,6 +20,7 @@
 		"react-markdown": "^9.0.1",
 		"react-router-dom": "^6.26.2",
 		"react-syntax-highlighter": "^15.5.0",
+		"react-toastify": "^10.0.6",
 		"rehype-raw": "^7.0.0",
 		"remark-breaks": "^4.0.0",
 		"remark-gfm": "^4.0.0",

src/components/Toast.tsx

@@ -0,0 +1,30 @@
+import 'react-toastify/dist/ReactToastify.css'
+import { toast, ToastContainer } from 'react-toastify'
+import styled from '@emotion/styled'
+
+export type toastType = 'success' | 'failed'
+
+export function ShowToast(message: string, toastType = 'success') {
+	if (toastType === 'success') {
+		toast.success(`${message}`, {
+			autoClose: 2000,
+			theme: 'dark',
+			draggable: true,
+		})
+	} else {
+		toast.error(`${message}`, {
+			autoClose: 2000,
+			draggable: true,
+		})
+	}
+}
+
+export default function Toast() {
+	return <StyledToastContainer />
+}
+
+export const StyledToastContainer = styled(ToastContainer)`
+	.Toastify__toast {
+		background-color: #3d3d3d;
+	}
+`

yarn.lock

@@ -1034,6 +1034,11 @@ character-reference-invalid@^2.0.0:
   resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz#85c66b041e43b47210faf401278abf808ac45cb9"
   integrity sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==
 
+clsx@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -2609,6 +2614,13 @@ react-syntax-highlighter@^15.5.0:
     prismjs "^1.27.0"
     refractor "^3.6.0"
 
+react-toastify@^10.0.6:
+  version "10.0.6"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-10.0.6.tgz#19c364b1150f495522c738d592d1dcc93879ade1"
+  integrity sha512-yYjp+omCDf9lhZcrZHKbSq7YMuK0zcYkDFTzfRFgTXkTFHZ1ToxwAonzA4JI5CxA91JpjFLmwEsZEgfYfOqI1A==
+  dependencies:
+    clsx "^2.1.0"
+
 react@^18.3.1:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"