+>(({ className, ...props }, ref) => (
+ | [role=checkbox]]:translate-y-[2px]",
+ className
+ )}
+ {...props}
+ />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+ HTMLTableCaptionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+ Table,
+ TableHeader,
+ TableBody,
+ TableFooter,
+ TableHead,
+ TableRow,
+ TableCell,
+ TableCaption,
+}
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..e56b0af
--- /dev/null
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Textarea = React.forwardRef<
+ HTMLTextAreaElement,
+ React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+ return (
+
+ )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/src/components/ui/toast.tsx b/src/components/ui/toast.tsx
new file mode 100644
index 0000000..a72d324
--- /dev/null
+++ b/src/components/ui/toast.tsx
@@ -0,0 +1,126 @@
+import * as React from 'react';
+import * as ToastPrimitives from '@radix-ui/react-toast';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+import { Cross2Icon } from '@radix-ui/react-icons';
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+ 'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+ {
+ variants: {
+ variant: {
+ default: 'border bg-background text-foreground',
+ destructive:
+ 'destructive group border-destructive bg-destructive text-destructive-foreground',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ },
+ }
+);
+
+const Toast = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, variant, ...props }, ref) => {
+ return (
+
+ );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef;
+
+type ToastActionElement = React.ReactElement;
+
+export {
+ type ToastProps,
+ type ToastActionElement,
+ ToastProvider,
+ ToastViewport,
+ Toast,
+ ToastTitle,
+ ToastDescription,
+ ToastClose,
+ ToastAction,
+};
diff --git a/src/components/ui/toaster.tsx b/src/components/ui/toaster.tsx
new file mode 100644
index 0000000..6c67edf
--- /dev/null
+++ b/src/components/ui/toaster.tsx
@@ -0,0 +1,33 @@
+import { useToast } from "@/hooks/use-toast"
+import {
+ Toast,
+ ToastClose,
+ ToastDescription,
+ ToastProvider,
+ ToastTitle,
+ ToastViewport,
+} from "@/components/ui/toast"
+
+export function Toaster() {
+ const { toasts } = useToast()
+
+ return (
+
+ {toasts.map(function ({ id, title, description, action, ...props }) {
+ return (
+
+
+ {title && {title}}
+ {description && (
+ {description}
+ )}
+
+ {action}
+
+
+ )
+ })}
+
+
+ )
+}
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..a66b3f2
--- /dev/null
+++ b/src/components/ui/tooltip.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, sideOffset = 4, ...props }, ref) => (
+
+
+
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/src/components/vc/VcControls.tsx b/src/components/vc/VcControls.tsx
new file mode 100644
index 0000000..15c547a
--- /dev/null
+++ b/src/components/vc/VcControls.tsx
@@ -0,0 +1,67 @@
+import { CustomCheckbox } from '@/components/common/CustomCheckbox';
+import { Button } from '@/components/ui/button';
+import { OneVcState, useVcStore, VcState } from '@/stores/vcDataStore';
+
+interface VcControlsProps {
+ state: VcState;
+ toggleAllSelection: () => void;
+ addRemoveList: (seqList: number[]) => void;
+ selectedCount: number;
+ totalCount: number;
+}
+
+const VcControls = ({
+ state,
+ toggleAllSelection,
+ addRemoveList,
+ selectedCount,
+ totalCount,
+}: VcControlsProps) => {
+ const { setActivate } = useVcStore();
+
+ const anySelected = selectedCount > 0;
+
+ const handler = {
+ removeButton: () => {
+ const removeList = state.vcList
+ .filter((oneVc) => oneVc.isSelected)
+ .map((oneVc) => oneVc.vcSrcFile.seq);
+
+ addRemoveList(removeList);
+ removeList.map((removeSeq) => {
+ setActivate(removeSeq);
+ });
+ },
+ };
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+ {projectUpdateDate || projectDate || new Date().toLocaleDateString()}
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Layout;
diff --git a/src/layout/ProjectLayout.tsx b/src/layout/ProjectLayout.tsx
new file mode 100644
index 0000000..2f47676
--- /dev/null
+++ b/src/layout/ProjectLayout.tsx
@@ -0,0 +1,184 @@
+import ConcatSidebar from '@/components/sidebar/ConcatSidebar';
+import TTSSidebar from '@/components/sidebar/TTSSidebar';
+import VCSidebar from '@/components/sidebar/VCSidebar';
+import {
+ BookAIcon,
+ ChevronDown,
+ ChevronUp,
+ CombineIcon,
+ MicIcon,
+ Pause,
+ Play,
+ SkipBack,
+ SkipForward,
+ Square,
+} from 'lucide-react';
+import { useState } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { Link, useParams } from 'react-router-dom';
+import TTS from '@/pages/TTS';
+import VC from '@/pages/VC';
+import Concat from '@/pages/Concat';
+import Logo from '@/assets/logo.png';
+import { ROUTES } from '@/constants/route';
+import { Button } from '@/components/ui/button';
+import ProjectIconMenu from '@/components/sidebar/ProjectIconMenu';
+import Header from '@/components/header/Header';
+import ConcatLayout from '@/components/concat/ConcatLayout';
+import { Toaster } from '@/components/ui/toaster';
+
+const ProjectLayout = () => {
+ // Footer ์ํ ๊ด๋ฆฌ (์ด๋ฆผ/๋ซํ ์ฌ๋ถ)
+ const [isFooterExpanded, setIsFooterExpanded] = useState(false);
+ const { selectedMenu, projectId } = useParams();
+
+ // Footer ํ ๊ธ ํจ์
+ const toggleFooter = () => {
+ setIsFooterExpanded((prev) => !prev);
+ };
+
+ // ๋จ์ถํค ๊ธฐ๋ฅ ํ๋ก์ ํธ ๋ ์ด์์์์๋ง ๊ฐ๋ฅํ๋๋ก
+ // useHotkeys('ctrl+s', (event) => {
+ // event.preventDefault();
+ // alert('์ ์ฅ?');
+ // });
+
+ // ์ปดํฌ๋ํธ๋ฅผ ์กฐ๊ฑด๋ถ๋ก ๋ ๋๋ง
+ let ContentComponent;
+ let SidebarComponent;
+
+ switch (selectedMenu) {
+ case 'tts':
+ ContentComponent = ;
+ SidebarComponent = ;
+ break;
+ case 'vc':
+ ContentComponent = ;
+ SidebarComponent = ;
+ break;
+ case 'concat':
+ ContentComponent = ;
+ SidebarComponent = ;
+ break;
+ default:
+ ContentComponent = ํ๋ก์ ํธ ์์ฑํ์ธ์! ;
+ }
+
+ const [isPlay, setIsPlay] = useState(false);
+
+ return (
+
+
+ {/* ํค๋ */}
+
+
+
+ {/* ์ข์ธก ์ฌ์ด๋๋ฐ */}
+
+
+
+ {selectedMenu === 'concat' ? (
+
+ ) : (
+ <>
+ {/* ๋ฉ์ธ ์ฝํ
์ธ */}
+
+
+ {ContentComponent}
+
+
+
+ {/* ์ฐ์ธก ์ฌ์ด๋๋ฐ */}
+
+
+ )}
+
+
+
+ {/* ํธํฐ */}
+
+
+
+
+
+
+
+
+
+ isChecked ? selectAll(datas.map((data) => data.id)) : clearAll()
+ }
+ />
+
+
+
+
+
+
+
+ ์์ ๋ฌด์ 0.0์ด
+
+
+
+
+
+
+
+
+
+
+
+
+ ์ต๊ทผ ํ๋ก์ ํธ
+
+
+
+ data.projectActivate === 'Y'
+ ).slice(0, 3)}
+ />
+
+
+
+
+
+ data.projectActivate === 'Y')}
+ />
+
+
+ |