+
+
+
+
+ {label && }
+
+ );
+};
\ No newline at end of file
diff --git a/src/components/common/DivideLine.tsx b/src/components/common/DivideLine.tsx
new file mode 100644
index 0000000..d70c6d8
--- /dev/null
+++ b/src/components/common/DivideLine.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface IDivideProps {
+ className?: string;
+}
+
+const DivideLine = (props: IDivideProps) => {
+ return (
+
+ );
+};
+
+export default DivideLine;
diff --git a/src/components/common/EditableLabel.tsx b/src/components/common/EditableLabel.tsx
new file mode 100644
index 0000000..9815653
--- /dev/null
+++ b/src/components/common/EditableLabel.tsx
@@ -0,0 +1,89 @@
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import React, {
+ useState,
+ useRef,
+ useEffect,
+ forwardRef,
+ LabelHTMLAttributes,
+ InputHTMLAttributes,
+} from 'react';
+
+type EditableLabelAttributes = Pick<
+ LabelHTMLAttributes
+ {isEditing ? (
+ <>
+
+
+ ) : (
+
+ )}
+
+ );
+};
+
+export default EditableLabel;
diff --git a/src/components/common/FileUpload.tsx b/src/components/common/FileUpload.tsx
new file mode 100644
index 0000000..5610058
--- /dev/null
+++ b/src/components/common/FileUpload.tsx
@@ -0,0 +1,171 @@
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { useVcStore } from '@/stores/vcDataStore';
+import { CircleIcon, LucideProps, UploadIcon } from 'lucide-react';
+import React, { useEffect, useRef, useState } from 'react';
+
+type FileUploadStatus = '대기' | '업로드 중' | '완료' | '오류';
+export interface IFileUploadProps {
+ title?: string;
+ buttonName?: string;
+ emptyText?: string | null;
+ buttonIcon?: React.ComponentType
+ {title && (
+
+ );
+};
+
+export default FileUpload;
diff --git a/src/components/common/ListView.tsx b/src/components/common/ListView.tsx
new file mode 100644
index 0000000..39e5d06
--- /dev/null
+++ b/src/components/common/ListView.tsx
@@ -0,0 +1,213 @@
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from '@/components/ui/table';
+import { ROUTES } from '@/constants/route';
+import useChecked from '@/hooks/useChecked';
+import { useCheckedStore } from '@/stores/checkedStore';
+import { IProjectProps } from '@/types/project';
+import { convertDateFormat } from '@/utils/date';
+import {
+ BookAIcon,
+ CombineIcon,
+ LucideProportions,
+ MicIcon,
+ SquareArrowOutUpRightIcon,
+} from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { NavigateFunction, useNavigate } from 'react-router-dom';
+
+export type ViewOptionType = 'tile' | 'list';
+
+export interface IListViewProps {
+ option?: ViewOptionType;
+ data?: IProjectProps[];
+ navi: NavigateFunction;
+ viewRemoveData?: boolean;
+}
+
+const thumbnail = [BookAIcon, MicIcon, CombineIcon];
+
+const ListView = ({
+ option = 'list',
+ data,
+ viewRemoveData,
+}: Omit{title}
+ )}
+
+
+ {addFiles && addFiles.length > 0 ? (
+
+
+ ) : (
+ emptyText &&
+ emptyText.trim() !== '' && (
+ -
+ {type === 'src'
+ ? addFiles.map((file, index) => (
+
-
+ + + {file.name} + + {/*+
+ */} ++ + + 완료 ++
+ ))
+ : files.map((file, index) => (
+ -
+ + + {file.name} + ++
+ ++ 완료 +
+ ))}
+
+ {emptyText}
+
+ )
+ )}
+
+ {option === 'list' ? (
+
+ );
+};
+
+const List = ({ data, navi }: IListViewProps) => {
+ const { addChecked, removeChecked, removeAll } = useCheckedStore();
+
+ const [items, setItems] = useState
+
+
+
+ );
+};
+
+const Tile = ({ data, navi }: IListViewProps) => {
+ const onTest = (e: React.MouseEvent
+
+ );
+};
+
+export default ListView;
diff --git a/src/components/common/NewProjectButton.tsx b/src/components/common/NewProjectButton.tsx
new file mode 100644
index 0000000..1f7d1a0
--- /dev/null
+++ b/src/components/common/NewProjectButton.tsx
@@ -0,0 +1,75 @@
+import { createProject } from '@/apis/project';
+import Tile from '@/components/common/Tile';
+import { Button } from '@/components/ui/button';
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from '@/components/ui/dialog';
+import { ROUTES } from '@/constants/route';
+import { PROJECT_TYPE, ProjectType } from '@/pages/Home';
+import { BookAIcon, CombineIcon, FilePlusIcon, MicIcon } from 'lucide-react';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const NewProjectButton = () => {
+ const navigate = useNavigate();
+ const handleClick = {
+ createNewProject: (type: ProjectType) => {
+ // 프로젝트 생성 api 호출
+ // alert(`${type} 프로젝트 생성`);
+ navigate(`${ROUTES.PROJECT}${ROUTES[type as keyof typeof ROUTES]}/0`);
+ },
+ };
+ return (
+ -
+ {data ? (
+ data.map((item, idx) => (
+
- {
+ navi(ROUTES.PROJECT + ROUTES.TTS + `/${item.projectSeq}`);
+ }}
+ >
+ {item.projectName}++ {item.tts ?+
TTS : <>} + {item.vc ?VC : <>} + {item.concat ? ( +Concat + ) : ( + <> + )} +
+ ))
+ ) : (
+
+
+ )}
+ 데이터를 불러오는 중입니다...
+
+
+
+ );
+};
+
+export default NewProjectButton;
diff --git a/src/components/common/OneVc.tsx b/src/components/common/OneVc.tsx
new file mode 100644
index 0000000..1ed8708
--- /dev/null
+++ b/src/components/common/OneVc.tsx
@@ -0,0 +1,193 @@
+import { createVc } from '@/apis/vc';
+import { CustomCheckbox } from '@/components/common/CustomCheckbox';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Input } from '@/components/ui/input';
+import { toast } from '@/hooks/use-toast';
+import { OneVcState, useVcStore, VcState } from '@/stores/vcDataStore';
+import { downloadFile } from '@/utils/file';
+import { formatTime } from '@/utils/time';
+import {
+ DownloadIcon,
+ PauseIcon,
+ Pencil,
+ PlayIcon,
+ RefreshCcwDotIcon,
+} from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+
+type TStatus = 'play' | 'pause' | 'stop';
+interface IOneVcProps {
+ vcData: OneVcState;
+}
+
+const OneVc = ({ vcData }: IOneVcProps) => {
+ const audioRef = useRef
+
+ );
+};
+
+export default OneVc;
diff --git a/src/components/common/Tile.tsx b/src/components/common/Tile.tsx
new file mode 100644
index 0000000..9f44f05
--- /dev/null
+++ b/src/components/common/Tile.tsx
@@ -0,0 +1,37 @@
+import { Button } from '@/components/ui/button';
+import { LucideProps } from 'lucide-react';
+import React from 'react';
+
+interface ITileProps {
+ title: string;
+ icon?: React.ComponentType
+
+
+
+
+
+
+
+ {!!vcData.vcSrcFile.fileUrl && (
+ <>
+
+ {`${currentPlayTime} / ${duration}`}
+
+ )}
+
+
+
+
+
+ toggleSelection(vcData.vcSrcFile.seq)}
+ />
+
+ handleTextChange(vcData.vcSrcFile.seq, e.target.value)
+ }
+ placeholder='내용을 입력해주세요.(최대 2,000자)'
+ onFocus={() => {
+ handleInputFocus(vcData.vcSrcFile.seq, true);
+ if (vcData.vcText === '') {
+ cancelEdit();
+ }
+ }}
+ onBlur={() => {
+ handleInputFocus(vcData.vcSrcFile.seq, false);
+ cancelEdit();
+ }}
+ />
+ {inputEditingStates[vcData.vcSrcFile.seq] && (
+
+
+
+
+
+ )}
+
+
+ );
+};
+
+export default Tile;
diff --git a/src/components/common/VoiceSelectPopover.tsx b/src/components/common/VoiceSelectPopover.tsx
new file mode 100644
index 0000000..1bba649
--- /dev/null
+++ b/src/components/common/VoiceSelectPopover.tsx
@@ -0,0 +1,219 @@
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from '@/components/ui/popover';
+import { ChevronDown } from 'lucide-react';
+import { ttsLanguage, ttsStyle, ttsVoiceName } from '@/apis/ttsVoice';
+import { toast } from '@/hooks/use-toast';
+
+interface Language {
+ languageCode: string;
+ languageName: string;
+ regionCode: string;
+ regionName: string;
+}
+
+interface Style {
+ name: string;
+ mood: string | null;
+ contents: string;
+ desc: string;
+}
+
+interface Voice {
+ voiceSeq: number;
+ name: string;
+ gender: string;
+ age: number | null;
+ useCnt: number;
+ isRecommend: string;
+}
+
+interface VoiceSelectionPopoverProps {
+ selectedLanguage: string | null;
+ setSelectedLanguage: (language: string) => void;
+ selectedStyle: string | null;
+ setSelectedStyle: (style: string) => void;
+ selectedVoice: string | null;
+ setSelectedVoice: (voice: string) => void;
+}
+
+const getDefaultMood = (styleName: string): string => {
+ switch (styleName) {
+ case 'Standard':
+ return '기본';
+ case 'Neural':
+ return '부드러운';
+ case 'Journey':
+ return '다양한';
+ case 'Casual':
+ return '따뜻한';
+ case 'Studio':
+ return '전문적인';
+ case 'WaveNet':
+ return '자연스러운';
+ case 'News':
+ return '뉴스 스타일';
+ case 'Polyglot':
+ return '다언어';
+ default:
+ return '일반';
+ }
+};
+
+export const VoiceSelectionPopover: React.FC
+ {props.icon && (
+
+ {props.desc && (
+ {props.title}
+
+ {props.desc}
+
+ )}
+
+
+
+ {languages.map((lang) => (
+
+ {isLanguageSelected && styles.length > 0 && (
+ {
+ setSelectedLanguage(lang.languageCode);
+ setIsLanguageSelected(true);
+ }}
+ >
+ {lang.languageName}
+
+ ))}
+
+ {styles.map((style) => (
+
+ )}
+ {isStyleSelected && voices.length > 0 && (
+ {
+ setSelectedStyle(style.name);
+ setIsStyleSelected(true);
+ }}
+ >
+ {style.mood}
+
+ ))}
+
+ {voices.map((voice) => (
+
+ )}
+ handleVoiceSelect(voice.name)}
+ >
+ {voice.name}
+
+ ))}
+
+
+ );
+};
diff --git a/src/components/concat/ConcatLayout.tsx b/src/components/concat/ConcatLayout.tsx
new file mode 100644
index 0000000..b0ea7a3
--- /dev/null
+++ b/src/components/concat/ConcatLayout.tsx
@@ -0,0 +1,36 @@
+import ConcatSidebar from '@/components/sidebar/ConcatSidebar';
+import Concat from '@/pages/Concat';
+import { useForm, FormProvider, SubmitHandler } from 'react-hook-form';
+import { IFormValues } from '@/types/concat';
+
+const ConcatLayout = () => {
+ const methods = useForm
+
+
+
+ {new Date().toLocaleDateString()}
+
+
+
+
+
+
+
+
+
+ {
+ toggleItem(item.id);
+ }}
+ className='data-[state=checked]:bg-green-6 data-[state=checked]:border-green-6 border-gray-300 w-5 h-5'
+ />
+
+
+
+
+
+
+
+
+
+ 무음 추가 : 0.0초
+
+ -
+
+
+ );
+};
+
+export default ErrorBoundary;
diff --git a/src/components/errorPageComponent/notFound.tsx b/src/components/errorPageComponent/notFound.tsx
new file mode 100644
index 0000000..a329877
--- /dev/null
+++ b/src/components/errorPageComponent/notFound.tsx
@@ -0,0 +1,11 @@
+const NotFound: React.FC = () => {
+ return (
+ 에러가 발생했습니다!
+잠시 후 다시 시도해주세요.
+
+
+ );
+};
+
+export default NotFound;
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
new file mode 100644
index 0000000..6307a50
--- /dev/null
+++ b/src/components/header/Header.tsx
@@ -0,0 +1,50 @@
+import { Link } from 'react-router-dom';
+import Logo from '@/assets/logo.png';
+
+interface IHeaderProps {
+ projectTab?: boolean;
+}
+const Header = ({ projectTab = false }: IHeaderProps) => {
+ return (
+ 404 - 페이지를 찾을 수 없습니다
+요청하신 페이지가 존재하지 않습니다. URL을 확인해주세요.
+aws배포 테스트
+
+
+ 
+
+
+
+ {projectTab && (
+
+ )}
+
+ {(projects && projects.length > 0) ?? (
+
+
+
+
+ )}
+
+ );
+};
+
+export default HomeHeader;
diff --git a/src/components/login/TextSlide.tsx b/src/components/login/TextSlide.tsx
new file mode 100644
index 0000000..2bed0d0
--- /dev/null
+++ b/src/components/login/TextSlide.tsx
@@ -0,0 +1,25 @@
+import styles from './textSlide.module.css';
+
+const TextSlide = () => {
+ return (
+ <>
+
+
+
+ 내가 적은 시나리오
++ 10개의 보이스 파일로 +
+로마 신화 대본으로
++ 내 목소리를 다른 보이스 톤으로 +
+내가 적은 시나리오
+AI 오디오 생성해줘
+ + ); +}; + +export default TextSlide; diff --git a/src/components/login/textSlide.module.css b/src/components/login/textSlide.module.css new file mode 100644 index 0000000..85cfd6f --- /dev/null +++ b/src/components/login/textSlide.module.css @@ -0,0 +1,30 @@ +.textSlideAnimation > p { + animation: textSlide 7s infinite; +} + +@keyframes textSlide { + 10% { + transform: translateY(-102%); + } + 25% { + transform: translateY(-100%); + } + 35% { + transform: translateY(-202%); + } + 50% { + transform: translateY(-200%); + } + 60% { + transform: translateY(-302%); + } + 75% { + transform: translateY(-300%); + } + 85% { + transform: translateY(-402%); + } + 100% { + transform: translateY(-400%); + } +} diff --git a/src/components/sidebar/ConcatSidebar.tsx b/src/components/sidebar/ConcatSidebar.tsx new file mode 100644 index 0000000..9ff8ee7 --- /dev/null +++ b/src/components/sidebar/ConcatSidebar.tsx @@ -0,0 +1,97 @@ +import { useState } from 'react'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { Separator } from '@/components/ui/separator'; +import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'; +import { + AudioLines, + AudioLinesIcon, + Headphones, + UploadIcon, +} from 'lucide-react'; + +const ConcatSidebar = () => { + const [activeTab, setActiveTab] = useState<'file' | 'edit'>('file'); + + return ( + <> +
+
+
+
+ {activeTab === 'file' ? (
+
+
+ ) : (
+ <>
+
+
+
+
+
+
+
+
+ 편집 오디오
+ +-
+
- test.wav +
- asdfdf.wav +
- test.wav +
- asdfdf.wav +
- test.wav +
- asdfdf.wav +
- asdfdf.wav +
- test.wav +
+
+
+ 텍스트
+ +
+
+ 배경 오디오
+ +-
+
- asdfsd.mp3 +
무음 추가
+ +
+
+
+
+
+ )}
+
+ );
+};
+
+export default ConcatSidebar;
diff --git a/src/components/sidebar/HomeSidebar.tsx b/src/components/sidebar/HomeSidebar.tsx
new file mode 100644
index 0000000..89d5f61
--- /dev/null
+++ b/src/components/sidebar/HomeSidebar.tsx
@@ -0,0 +1,151 @@
+import { ChevronDown, Home, Bell, FolderOpen, Files } from 'lucide-react';
+
+import {
+ Sidebar,
+ SidebarContent,
+ SidebarGroup,
+ SidebarGroupContent,
+ SidebarGroupLabel,
+ SidebarHeader,
+ SidebarInset,
+ SidebarMenu,
+ SidebarMenuButton,
+ SidebarMenuItem,
+} from '@/components/ui/sidebar';
+import { Link, useNavigate } from 'react-router-dom';
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { ROUTES } from '@/constants/route';
+import { PROJECT_DATA } from '@/mocks/projectData';
+import { useState } from 'react';
+import { IProjectProps } from '@/types/project';
+import { Button } from '@/components/ui/button';
+import NewProjectButton from '@/components/common/NewProjectButton';
+import useLogout from '@/hooks/apis/useLogout';
+import useAuthStore from '@/stores/authStore';
+import { toast } from '@/hooks/use-toast';
+import DivideLine from '@/components/common/DivideLine';
+
+// Menu items.
+const Menus = [
+ {
+ title: '홈',
+ url: ROUTES.HOME,
+ icon: Home,
+ },
+ {
+ title: '내 프로젝트',
+ url: ROUTES.MYPROJECT,
+ icon: FolderOpen,
+ },
+];
+
+const quickStartItem = [
+ {
+ title: 'Project1',
+ url: ROUTES.PROJECT + ROUTES.TTS + '/1',
+ icon: Files,
+ },
+];
+
+export function HomeSidebar() {
+ const userData = useAuthStore((state) => state.userData);
+ const isLogin = useAuthStore((state) => state.isLogin);
+ const { mutate, error, reset } = useLogout();
+
+ if (error) {
+ console.error(error);
+ toast({ title: '로그아웃에 실패했습니다', variant: 'destructive' });
+ reset();
+ }
+
+ const items = PROJECT_DATA.slice(0, 3);
+ const [recents, setRecents] = useState
+ {props.icon && (
+
+
+ );
+};
+
+export default ProjectIconMenu;
diff --git a/src/components/sidebar/TTSSidebar.tsx b/src/components/sidebar/TTSSidebar.tsx
new file mode 100644
index 0000000..f391a40
--- /dev/null
+++ b/src/components/sidebar/TTSSidebar.tsx
@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import EditContent from '@/components/sidebar/sidebarContent/EditContent';
+import { FileContent } from '@/components/sidebar/sidebarContent/FileContent';
+
+interface IFileStatus {
+ name: string;
+ status: '완료' | '오류';
+}
+
+const TTSSidebar = () => {
+ const [activeTab, setActiveTab] = useState<'file' | 'edit'>('file');
+ const [allFiles, setAllFiles] = useState{props.name}
+
+
+
+
+ {/* 탭별 콘텐츠 */}
+ {activeTab === 'file' ? (
+
+
+ );
+};
+
+export default VCSidebar;
diff --git a/src/components/sidebar/sidebarContent/EditContent.tsx b/src/components/sidebar/sidebarContent/EditContent.tsx
new file mode 100644
index 0000000..5b653bb
--- /dev/null
+++ b/src/components/sidebar/sidebarContent/EditContent.tsx
@@ -0,0 +1,246 @@
+import { useEffect, useState } from 'react';
+import { DropdownSelector } from '@/components/ui/dropDownSelector';
+import { SliderControl } from '@/components/ui/sliderControl';
+import { Button } from '@/components/ui/button';
+import { VoiceSelectionPopover } from '@/components/common/VoiceSelectPopover';
+import { useAudioSettingsStore } from '@/stores/useAudioSettingsStore';
+import { useTextInputs } from '@/stores/textInputStore';
+import { ttsStyle } from '@/apis/ttsVoice';
+import { toast } from '@/hooks/use-toast';
+
+const EditContent = () => {
+ //로컬 상태
+ const [localSpeed, setLocalSpeed] = useState(1);
+ const [localSliders, setLocalSliders] = useState([
+ { id: 'pitch', value: 0.0, min: -10.0, max: 10.0, label: '음높이' },
+ { id: 'volume', value: 0.0, min: -10.0, max: 10.0, label: '음량' },
+ ]);
+ const [localVoices, setLocalVoices] = useState
+
+
+
+
+
+ {
+ toast({ title: '생성 보이스 추가' });
+ }}
+ fileType='audio/*'
+ />
+
+
+
+
+
+ {/* 컨텐츠 영역 */}
+
+ );
+};
+
+export default EditContent;
diff --git a/src/components/sidebar/sidebarContent/FileContent.tsx b/src/components/sidebar/sidebarContent/FileContent.tsx
new file mode 100644
index 0000000..bbf63db
--- /dev/null
+++ b/src/components/sidebar/sidebarContent/FileContent.tsx
@@ -0,0 +1,188 @@
+import { Button } from '@/components/ui/button';
+import { CircularProgress } from '@/components/ui/CircularProgress';
+import { toast } from '@/hooks/use-toast';
+import { useTextInputs } from '@/stores/textInputStore';
+import { UploadIcon } from 'lucide-react';
+
+interface IFileStatus {
+ name: string;
+ status: '완료' | '오류';
+}
+
+interface IFileContentProps {
+ allFiles: IFileStatus[];
+ setAllFiles: React.Dispatch
+ {/* 즐겨찾기 Dropdown */}
+ {/* handleSliderChange(slider.id, v[0])}
+ min={slider.min}
+ max={slider.max}
+ />
+ ))}
+
+
+ {/* 하단 버튼 */}
+
+
+
+
+ {/* 음높이 및 음량 슬라이더 */}
+ {localSliders.map((slider) => (
+
+ {speedValues.map((value) => (
+
+ ))}
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/signup/AddressSearch.tsx b/src/components/signup/AddressSearch.tsx
new file mode 100644
index 0000000..01b0cf3
--- /dev/null
+++ b/src/components/signup/AddressSearch.tsx
@@ -0,0 +1,70 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@radix-ui/react-label";
+import DaumPostcode from 'react-daum-postcode';
+
+interface AddressSearchProps {
+ address: string;
+ isOpen: boolean;
+ onComplete: (data: { address: string }) => void;
+ onClose: () => void;
+ setIsOpen: React.Dispatch
+
+
+
+
+
+
+
+ {allFiles.length === 0 ? (
+
+ + 텍스트 파일을 추가해주세요. +
+ ) : ( +
+
+ )}
+ -
+ {allFiles.map((file, index) => (
+
-
+ + {file.name} +++ + {file.status} ++
+ ))}
+
+
+
+
+
+
+
+ {isOpen && (
+
+
+
+
+
+
+ )}
+
+ );
+};
\ No newline at end of file
diff --git a/src/components/signup/FormField.tsx b/src/components/signup/FormField.tsx
new file mode 100644
index 0000000..ddb3e43
--- /dev/null
+++ b/src/components/signup/FormField.tsx
@@ -0,0 +1,40 @@
+import { Label } from "@radix-ui/react-label";
+import { Input } from "../ui/input";
+
+interface FormFieldProps {
+ label: string;
+ id: string;
+ type: string;
+ value: string;
+ onChange: (value: string) => void;
+ error?: string;
+ placeholder?: string;
+ maxLength?: number;
+ readOnly?: boolean;
+}
+
+export const FormField: React.FC
+
+
+
+ onChange(e.target.value)}
+ placeholder={placeholder}
+ maxLength={maxLength}
+ readOnly={readOnly}
+ />
+ {error &&
+);
\ No newline at end of file
diff --git a/src/components/signup/TermsSection.tsx b/src/components/signup/TermsSection.tsx
new file mode 100644
index 0000000..d02c4c8
--- /dev/null
+++ b/src/components/signup/TermsSection.tsx
@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from 'react';
+import { CustomCheckbox } from '@/components/common/CustomCheckbox';
+import { Term } from '@/types/signup';
+
+interface Props {
+ terms: Term[];
+ error?: string;
+ onChange: (termCode: string, checked: boolean) => void;
+ onAllChange: (checked: boolean) => void;
+}
+
+const TermsSection: React.FC{error}
} +
+
+ );
+};
+
+export default TermsSection;
\ No newline at end of file
diff --git a/src/components/tts/TTSControls.tsx b/src/components/tts/TTSControls.tsx
new file mode 100644
index 0000000..5a5fdcb
--- /dev/null
+++ b/src/components/tts/TTSControls.tsx
@@ -0,0 +1,54 @@
+import { TTSState } from "@/types/tts";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Repeat2 } from "lucide-react";
+import { CustomCheckbox } from "@/components/common/CustomCheckbox";
+
+interface TTSControlsProps {
+ state: TTSState;
+ toggleAllSelection: () => void;
+ deleteSelectedInputs: () => void;
+ addTextInput: (hoveredId: number) => void;
+ saveInput: () => void;
+ cancelEdit: () => void;
+ selectedCount: number;
+ totalCount: number;
+}
+
+export const TTSControls: React.FC약관 동의
+
+
+ {terms.map((term) => (
+
+ handleTermChange(term.termCode, checked)}
+ label="동의합니다."
+ />
+ {error &&
+ ))}
+ + {term.chkTerm ? '[필수]' : '[선택]'} + {term.termName} +
+ {/*{term.shortCont}
*/} +{term.longCont}
+{error}
} +
+
+
+ );
+};
+
diff --git a/src/components/tts/TTSHeader.tsx b/src/components/tts/TTSHeader.tsx
new file mode 100644
index 0000000..5fde1ae
--- /dev/null
+++ b/src/components/tts/TTSHeader.tsx
@@ -0,0 +1,66 @@
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Pencil } from 'lucide-react';
+import { useState } from 'react';
+
+interface TTSHeaderProps {
+ projectName: string;
+ onProjectNameChange: (e: React.ChangeEvent
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/tts/TextInputList.tsx b/src/components/tts/TextInputList.tsx
new file mode 100644
index 0000000..11020d1
--- /dev/null
+++ b/src/components/tts/TextInputList.tsx
@@ -0,0 +1,191 @@
+import { useState } from 'react';
+import { CustomCheckbox } from '@/components/common/CustomCheckbox';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Repeat2, Play, Download } from 'lucide-react';
+import { TextInput } from '@/types/tts';
+
+interface TextInputListProps {
+ textInputs: TextInput[];
+ toggleSelection: (id: number) => void;
+ handleTextChange: (id: number, newText: string) => void;
+ cancelEdit: () => void;
+ addTextInput: (hoveredId: number) => void;
+ saveInput: () => void;
+ isAllSelected: boolean;
+ editingId: number | null;
+ onSelectionChange: (selectedCount: number, totalCount: number) => void;
+ resetInputSettings: (id: number) => void;
+}
+
+export const TextInputList: React.FC
+
+
+
+ {new Date().toLocaleDateString()}
+
+
+
+
+
+
+
+ ))}
+
+ );
+};
diff --git a/src/components/ui/CircularProgress.tsx b/src/components/ui/CircularProgress.tsx
new file mode 100644
index 0000000..470d247
--- /dev/null
+++ b/src/components/ui/CircularProgress.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+
+interface CircularProgressProps {
+ current: number; // 현재 진행 값
+ total: number; // 총 진행 값
+ size?: number; // 원 크기 (기본값: 40)
+ strokeWidth?: number; // 선 두께 (기본값: 4)
+ trackColor?: string; // 배경 트랙 색상 (기본값: 회색)
+ progressColor?: string; // 진행 상태 색상 (기본값: 초록색)
+}
+
+export const CircularProgress: React.FC handleInputHover(input.id, true)}
+ onMouseLeave={() => handleInputHover(input.id, false)}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ handleToggleSelection(input.id)}
+ />
+ handleTextChange(input.id, e.target.value)}
+ placeholder='내용을 입력해주세요.(최대 2,000자)'
+ onFocus={() => {
+ handleInputFocus(input.id, true);
+ if (input.text === '') {
+ cancelEdit();
+ }
+ }}
+ onBlur={() => handleInputFocus(input.id, false)}
+ />
+ {input.isEditing && (
+
+ {inputHoverStates[input.id] && !inputEditingStates[input.id] && (
+
+
+
+
+ )}
+
+ <>
+
+
+
+
+
+ )}
+
+
+
+ {current === total
+ ? `${current}/${total} 완료`
+ : `${current}/${total} 올리는 중`}
+
+
+ );
+};
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
new file mode 100644
index 0000000..e87d62b
--- /dev/null
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+ "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+ {
+ variants: {
+ variant: {
+ default:
+ "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+ secondary:
+ "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ destructive:
+ "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+ outline: "text-foreground",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+export interface BadgeProps
+ extends React.HTMLAttributes
+
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+ React.ElementRef
+
+
+
+
+
+
+ {label}
+
+ {options.map((option) => (
+
+ {option}
+
+ ))}
+
+
+
+
+ );
+};
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..e5ee3b7
--- /dev/null
+++ b/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,202 @@
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { cn } from '@/lib/utils';
+import {
+ CheckIcon,
+ ChevronRightIcon,
+ DotFilledIcon,
+} from '@radix-ui/react-icons';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+ React.ElementRef
+ {children}
+
+
+ {children}
+
+ );
+ }
+
+ if (isMobile) {
+ return (
+ {children}
+
+ {/* This is what handles the sidebar gap on desktop */}
+
+
+ );
+ }
+);
+Sidebar.displayName = 'Sidebar';
+
+const SidebarTrigger = React.forwardRef<
+ React.ElementRef
+
+
+ {children}
+
+
+ {showIcon && (
+
+ );
+});
+SidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton';
+
+const SidebarMenuSub = React.forwardRef<
+ HTMLUListElement,
+ React.ComponentProps<'ul'>
+>(({ className, ...props }, ref) => (
+
+ {/* 라벨과 값 */}
+
+ );
+};
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
new file mode 100644
index 0000000..c0df655
--- /dev/null
+++ b/src/components/ui/table.tsx
@@ -0,0 +1,120 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+ HTMLTableElement,
+ React.HTMLAttributes
+
+ {isEditing ? (
+
+ ) : (
+ setIsEditing(true)}
+ >
+ {value ? parseFloat(value.toFixed(1)) : '기본'}
+
+ )}
+
+ {/* 슬라이더 */}
+
+ onChange(v)}
+ max={max}
+ min={min}
+ step={0.1}
+ className='w-full'
+ />
+
+
+
+
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
+ {title && {title} }
+ {description && (
+ {description}
+ )}
+
+ {action}
+
+
+
+ );
+};
+
+export default VcControls;
diff --git a/src/components/vc/VcHeader.tsx b/src/components/vc/VcHeader.tsx
new file mode 100644
index 0000000..ce4afd1
--- /dev/null
+++ b/src/components/vc/VcHeader.tsx
@@ -0,0 +1,74 @@
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Pencil } from 'lucide-react';
+import { useRef, useState } from 'react';
+
+interface IProjectDataProps {
+ projectSeq?: number;
+ projectDate?: string;
+ projectUpdateDate?: string;
+}
+interface VcHeaderProps extends IProjectDataProps {
+ projectName: string;
+ onProjectNameChange: (e: React.ChangeEvent
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/vc/VcList.tsx b/src/components/vc/VcList.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/constants/errorMsg.ts b/src/constants/errorMsg.ts
new file mode 100644
index 0000000..dbe6323
--- /dev/null
+++ b/src/constants/errorMsg.ts
@@ -0,0 +1,11 @@
+export const ERROR_MESSAGES = {
+ userId: '아이디는 6~20자의 영문 및 숫자만 허용됩니다.',
+ password: '비밀번호는 8~20자, 영문 소문자, 숫자, 특수문자를 포함해야 합니다.',
+ consecutivePassword: '비밀번호에 동일 문자를 3회 이상 연속 사용할 수 없습니다.',
+ confirmPassword: '비밀번호가 일치하지 않습니다.',
+ name: '이름은 실명을 입력해야 하며 특수문자를 포함할 수 없습니다.',
+ email: '유효한 이메일 주소를 입력해주세요.',
+ phoneNumber: '휴대폰 번호는 10~11자의 숫자만 입력 가능합니다.',
+ detailAddress: '상세주소를 입력해주세요.',
+ terms: '필수 약관에 모두 동의해주세요.'
+};
\ No newline at end of file
diff --git a/src/constants/route.ts b/src/constants/route.ts
new file mode 100644
index 0000000..f5e9c8d
--- /dev/null
+++ b/src/constants/route.ts
@@ -0,0 +1,12 @@
+export const ROUTES = {
+ HOME: '/',
+ SIGNIN: '/signin',
+ RESET_PASSWORD: '/reset-password',
+ SIGNUP: '/signup',
+ PROJECT: '/project',
+ TTS: '/tts',
+ VC: '/vc',
+ CONCAT: '/concat',
+ MYPROJECT: '/my-project',
+ PROFILE: '/profile',
+};
diff --git a/src/constants/validation.ts b/src/constants/validation.ts
new file mode 100644
index 0000000..cf86bad
--- /dev/null
+++ b/src/constants/validation.ts
@@ -0,0 +1,8 @@
+export const VALIDATION_PATTERNS = {
+ userId: /^[a-zA-Z0-9]{6,20}$/,
+ password: /^(?=.*[a-z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,20}$/,
+ consecutiveChars: /(.)\1\1/,
+ name: /^[가-힣a-zA-Z]+$/,
+ email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+ phoneNumber: /^010\d{8}$/
+};
\ No newline at end of file
diff --git a/src/hooks/apis/useLogin.ts b/src/hooks/apis/useLogin.ts
new file mode 100644
index 0000000..3c56996
--- /dev/null
+++ b/src/hooks/apis/useLogin.ts
@@ -0,0 +1,36 @@
+import { useMutation } from '@tanstack/react-query';
+import { loginRequest } from '@/apis/auth';
+import {
+ ExtendedAxiosErrorForLogin,
+ ILoginProps,
+ IUserData,
+} from '@/types/login';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import useAuthStore from '@/stores/authStore';
+
+const useLogin = (resetForm: () => void) => {
+ const navigate = useNavigate();
+ const [rememberChecked, setrememberChecked] = useState(false);
+ const authStore = useAuthStore();
+ const mutation = useMutation<
+ IUserData,
+ ExtendedAxiosErrorForLogin,
+ ILoginProps
+ >({
+ mutationFn: loginRequest,
+ onSuccess: (data: IUserData) => {
+ authStore.login(data, rememberChecked);
+ navigate('/');
+ },
+ onSettled: () => {
+ resetForm();
+ },
+ });
+ return {
+ ...mutation,
+ setrememberChecked,
+ };
+};
+
+export default useLogin;
diff --git a/src/hooks/apis/useLogout.ts b/src/hooks/apis/useLogout.ts
new file mode 100644
index 0000000..e5f1601
--- /dev/null
+++ b/src/hooks/apis/useLogout.ts
@@ -0,0 +1,19 @@
+import { useMutation } from '@tanstack/react-query';
+import { logoutRequest } from '@/apis/auth';
+import { useNavigate } from 'react-router-dom';
+import useAuthStore from '@/stores/authStore';
+
+const useLogout = () => {
+ const navigate = useNavigate();
+ const logout = useAuthStore((state) => state.logout);
+
+ return useMutation({
+ mutationFn: logoutRequest,
+ onSuccess: () => {
+ logout();
+ navigate('/signin');
+ },
+ });
+};
+
+export default useLogout;
diff --git a/src/hooks/use-mobile.tsx b/src/hooks/use-mobile.tsx
new file mode 100644
index 0000000..2b0fe1d
--- /dev/null
+++ b/src/hooks/use-mobile.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+ const [isMobile, setIsMobile] = React.useState
+
+ {
+ inputRef.current?.focus();
+ }}
+ />
+
+
+
+ {projectUpdateDate || projectDate || new Date().toLocaleDateString()}
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/layout/Layout.tsx b/src/layout/Layout.tsx
new file mode 100644
index 0000000..b0adc44
--- /dev/null
+++ b/src/layout/Layout.tsx
@@ -0,0 +1,30 @@
+import { Toaster } from '@/components/ui/toaster';
+import { useEffect, useState } from 'react';
+import { Outlet, useLocation } from 'react-router-dom';
+
+const Layout = () => {
+ const path = useLocation().pathname;
+ const isSignin = path.toLocaleLowerCase() === '/signin';
+ const [style, setStyle] = useState
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+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 = 프로젝트 생성하세요!
;
+ }
+
+ const [isPlay, setIsPlay] = useState
+
+ );
+};
+
+export default ProjectLayout;
diff --git a/src/main.tsx b/src/main.tsx
index df655ea..f303183 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3,8 +3,30 @@ import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.tsx';
-createRoot(document.getElementById('root')!).render(
-
+ {/* 헤더 */}
+
+
+ {/* 좌측 사이드바 */}
+
+
+
+
+ {/* 푸터 */}
+
+
+ {selectedMenu === 'concat' ? (
+
+
+
+ {ContentComponent}
+
+
+
+ {/* 우측 사이드바 */}
+
+
+ )}
+
+
+ );
+};
+
+export default Concat;
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
new file mode 100644
index 0000000..ec01fd2
--- /dev/null
+++ b/src/pages/Home.tsx
@@ -0,0 +1,62 @@
+import { getProjectList } from '@/apis/project';
+import DivideLine from '@/components/common/DivideLine';
+import ListView from '@/components/common/ListView';
+import { PROJECT_DATA } from '@/mocks/projectData';
+import MyProject from '@/pages/MyProject';
+import { useEffect } from 'react';
+
+export type ProjectType = 'TTS' | 'VC' | 'CONCAT';
+export const PROJECT_TYPE: Record
+
+
+
+
+
+
+ isChecked ? selectAll(datas.map((data) => data.id)) : clearAll()
+ }
+ />
+
+
+
+
+
+
+ 시작 무음 0.0초
+
+
+
+
+
+
+
+ );
+};
+
+export default Home;
diff --git a/src/pages/MyProject.tsx b/src/pages/MyProject.tsx
new file mode 100644
index 0000000..a0ff6aa
--- /dev/null
+++ b/src/pages/MyProject.tsx
@@ -0,0 +1,131 @@
+import ListView, { IListViewProps } from '@/components/common/ListView';
+import { Button } from '@/components/ui/button';
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '@/components/ui/select';
+import { PROJECT_DATA } from '@/mocks/projectData';
+import { useCheckedStore } from '@/stores/checkedStore';
+import { useEffect, useState } from 'react';
+import { IProjectProps } from '@/types/project';
+import DivideLine from '@/components/common/DivideLine';
+import { removeProject } from '@/apis/project';
+import { toast } from '@/hooks/use-toast';
+
+const MyProject = ({
+ option = 'list',
+ data = PROJECT_DATA,
+}: Omit
+ 홈
+
+
+
+
+
+
+ 최근 프로젝트
+
+
+ data.projectActivate === 'Y'
+ ).slice(0, 3)}
+ />
+
+
+
+
+
+
+ 내 프로젝트
+
+
+ data.projectActivate === 'Y')}
+ />
+
+
+
+ );
+};
+
+export default MyProject;
diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
new file mode 100644
index 0000000..ec63916
--- /dev/null
+++ b/src/pages/Profile.tsx
@@ -0,0 +1,5 @@
+const Profile = () => {
+ return ;
+};
+
+export default Profile;
diff --git a/src/pages/ResetPassword.tsx b/src/pages/ResetPassword.tsx
new file mode 100644
index 0000000..b99899d
--- /dev/null
+++ b/src/pages/ResetPassword.tsx
@@ -0,0 +1,5 @@
+const ResetPassword = () => {
+ return
+
+
+
+
+ 내 프로젝트
+
+
+
+
+
+
+
+
+ {checkedList && checkedList.length > 0 ? (
+
+
+
+ ) : (
+ <>
+ )}
+
+ {viewData ? (
+
+
+
+ )}
+ 데이터를 불러오는 중입니다...
+비밀번호 재설정 페이지
;
+};
+
+export default ResetPassword;
diff --git a/src/pages/SignIn.tsx b/src/pages/SignIn.tsx
new file mode 100644
index 0000000..e7f0f33
--- /dev/null
+++ b/src/pages/SignIn.tsx
@@ -0,0 +1,196 @@
+import { Link } from 'react-router-dom';
+import { useForm, SubmitHandler, Controller } from 'react-hook-form';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Checkbox } from '@/components/ui/checkbox';
+import useLogin from '@/hooks/apis/useLogin';
+import { LoaderCircle } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import TextSlide from '@/components/login/TextSlide';
+import { validateLoginForm } from '@/utils/auth';
+import Logo from '@/assets/logo.png';
+import { toast } from '@/hooks/use-toast';
+
+interface ILoginForm {
+ username: string;
+ password: string;
+ keepLogin: boolean;
+}
+
+const SignIn = () => {
+ const {
+ register,
+ handleSubmit,
+ formState: { errors },
+ reset: resetForm,
+ control,
+ } = useForm
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
시작하기
+
+