feat: 웹캠이 없을 경우 toast 창을 띄움

src/features/slop/ui/slop-camera.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
+import { toast } from 'sonner';
 import type { Position, Webcam } from '@/entities/slop/model/model';
+import NeutralFace from '@/shared/icons/neutral-face';
 import { cn } from '@/shared/lib';
 import CameraButton from '@/shared/ui/cam-button';
 import { Tooltip } from '@/shared/ui/tooltip';
@@ -36,6 +38,14 @@ const SlopCamera = ({
 
   const toggleVideo = () => {
     setIsVideoOpen((pre) => !pre);
+
+    if (!src) {
+      toast(
+        <>
+          <NeutralFace /> 선택한 웹캠은 아직 준비중 이에요
+        </>
+      );
+    }
   };
 
   const { setSelectedSlop } = useSlopStore();

src/features/slop/ui/slop-video.tsx

@@ -32,13 +32,13 @@ const SlopVideo = ({ src, closeVideo }: SlopVideoProps) => {
   return (
     <>
       <ReactHlsPlayer
-        className={cn('absolute top-0 z-30 h-full w-full')}
+        className={cn('absolute top-0 z-50 h-full w-full')}
         playerRef={playerRef}
         src={src}
         autoPlay={true}
         controls={false}
       />
-      <CloseButton className="video-close absolute right-4 top-4 z-[33]" onClick={closeVideo} />
+      <CloseButton className="video-close absolute right-4 top-4 z-[51]" onClick={closeVideo} />
     </>
   );
 };

src/shared/icons/neutral-face.tsx

@@ -0,0 +1,27 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+
+interface NeutralFaceProps extends SVGProps<SVGSVGElement> {
+  className?: string;
+}
+
+const NeutralFace = ({ className, ...args }: NeutralFaceProps) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...args}
+    >
+      <path
+        d="M9.12039 9.1199V8.1199C8.5681 8.1199 8.12039 8.56762 8.12039 9.1199H9.12039ZM9.21601 9.1199H10.216C10.216 8.56762 9.7683 8.1199 9.21601 8.1199V9.1199ZM14.8804 9.1199V8.1199C14.3281 8.1199 13.8804 8.56762 13.8804 9.1199H14.8804ZM14.9654 9.1199H15.9654C15.9654 8.56762 15.5177 8.1199 14.9654 8.1199V9.1199ZM9.21601 9.19678V10.1968C9.7683 10.1968 10.216 9.74906 10.216 9.19678H9.21601ZM9.12039 9.19678H8.12039C8.12039 9.74906 8.5681 10.1968 9.12039 10.1968V9.19678ZM14.9654 9.19678V10.1968C15.5177 10.1968 15.9654 9.74906 15.9654 9.19678H14.9654ZM14.8804 9.19678H13.8804C13.8804 9.74906 14.3281 10.1968 14.8804 10.1968V9.19678ZM8.67234 13.9191C8.12006 13.9191 7.67234 14.3668 7.67234 14.9191C7.67234 15.4713 8.12006 15.9191 8.67234 15.9191V13.9191ZM15.3284 15.9191C15.8807 15.9191 16.3284 15.4713 16.3284 14.9191C16.3284 14.3668 15.8807 13.9191 15.3284 13.9191V15.9191ZM20.6004 11.9999C20.6004 16.7495 16.75 20.5999 12.0004 20.5999V22.5999C17.8546 22.5999 22.6004 17.8541 22.6004 11.9999H20.6004ZM12.0004 20.5999C7.25074 20.5999 3.40039 16.7495 3.40039 11.9999H1.40039C1.40039 17.8541 6.14617 22.5999 12.0004 22.5999V20.5999ZM3.40039 11.9999C3.40039 7.25025 7.25074 3.3999 12.0004 3.3999V1.3999C6.14617 1.3999 1.40039 6.14568 1.40039 11.9999H3.40039ZM12.0004 3.3999C16.75 3.3999 20.6004 7.25025 20.6004 11.9999H22.6004C22.6004 6.14568 17.8546 1.3999 12.0004 1.3999V3.3999ZM9.12039 10.1199H9.21601V8.1199H9.12039V10.1199ZM14.8804 10.1199H14.9654V8.1199H14.8804V10.1199ZM8.21601 9.1199V9.19678H10.216V9.1199H8.21601ZM9.21601 8.19678H9.12039V10.1968H9.21601V8.19678ZM10.1204 9.19678V9.1199H8.12039V9.19678H10.1204ZM13.9654 9.1199V9.19678H15.9654V9.1199H13.9654ZM14.9654 8.19678H14.8804V10.1968H14.9654V8.19678ZM15.8804 9.19678V9.1199H13.8804V9.19678H15.8804ZM15.3284 13.9191H8.67234V15.9191H15.3284V13.9191Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default NeutralFace;

src/shared/ui/toaster.tsx

@@ -15,8 +15,8 @@ const Toaster = ({ ...props }: ToasterProps) => {
       toastOptions={{
         classNames: {
           toast:
-            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
-          description: 'group-[.toast]:text-muted-foreground',
+            'group toast group-[.toaster]:bg-[rgba(23,29,35,0.8)] group-[.toaster]:text-white group-[.toaster]:border-border group-[.toaster]:shadow-lg rounded-[16px]',
+          description: 'group-[.toast]:text-foreground',
           actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
           cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
         },