[FEAT] 최종 디자인, 기능 정리 및 수정 (#94)

* design: 메인화면 이중 스크롤 수정

* design: 버튼 디자인 통일

* feature: 로그인 화면 꽉차게 수정 (#92)

* design: 디자인 통일화, footer 재생바 수정

* design: 로그인페이지 텍스트 슬라이드 수정, 배경 수정

* design: 텍스트 수정

* feat: tts 효과없음, 초기화 기능

* design: footer 재 적용

* feat: 토스트알림 기능 추가

---------

Co-authored-by: Haeun <haruyam15@gmail.com>

Author: kimisadev27

package-lock.json

@@ -24,6 +24,7 @@
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slider": "^1.2.1",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-toast": "^1.2.2",
     "@radix-ui/react-tooltip": "^1.1.3",
     "@tanstack/react-query": "^5.61.3",
     "@tanstack/react-table": "^8.20.5",

package.json

@@ -1,14 +1,16 @@
 import { RouterProvider } from 'react-router-dom';
 import { router } from './routes/router';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Toaster } from '@/components/ui/toaster';
 
 const queryClient = new QueryClient();
 
 function App() {
   return (
-    <div className='max-w-[1280px] mx-auto'>
+    <div>
       <QueryClientProvider client={queryClient}>
         <RouterProvider router={router} />
+        <Toaster />
       </QueryClientProvider>
     </div>
   );

src/App.tsx

@@ -117,13 +117,18 @@ const FileUpload: React.FC<IFileUploadProps> = ({
                       >
                         {file.name}
                       </span>
-                      <Badge
+                      {/* <Badge
                         className='w-1/4 px-2 text-center'
                         variant={'outline'}
                       >
                         <CircleIcon size={8} fill='green' />
-                        &nbsp;완료
-                      </Badge>
+                      </Badge> */}
+                      <div>
+                        <span
+                          className={`mr-2 w-3 h-3 rounded-full bg-blue-500`}
+                        />
+                        <span>완료</span>
+                      </div>
                     </div>
                   </li>
                 ))

src/components/common/FileUpload.tsx

@@ -183,21 +183,11 @@ const Tile = ({ data, navi }: IListViewProps) => {
           data.map((item, idx) => (
             <li
               key={item.projectName + idx}
-              className='p-5 w-[30%] h-[150px] border hover:cursor-pointer hover:scale-95 duration-100 rounded-lg z-10 content-center '
+              className='p-5 w-[30%] h-[200px] border hover:cursor-pointer hover:scale-95 duration-100 rounded-lg z-10 content-center '
               onClick={() => {
                 navi(ROUTES.PROJECT + ROUTES.TTS + `/${item.projectSeq}`);
               }}
             >
-              {/* <Checkbox
-                className='relative z-0 hover:bg-neutral-100'
-                onClick={(
-                  e: React.MouseEvent<HTMLInputElement, MouseEvent>
-                ) => {
-                  e.stopPropagation();
-                  onTest(e);
-                }}
-              /> */}
-
               <div className='text-center'>{item.projectName}</div>
               <div className='flex justify-center gap-2 pt-2 text-center'>
                 {item.tts ? <Badge variant={'outline'}>TTS</Badge> : <></>}

src/components/common/ListView.tsx

@@ -3,6 +3,7 @@ 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';
@@ -38,9 +39,11 @@ const OneVc = ({ vcData }: IOneVcProps) => {
     },
     onDownload: async () => {
       try {
+        toast({ title: '다운로드 시작' });
         downloadFile(vcData.vcSrcFile.fileUrl, vcData.vcSrcFile.name);
       } catch (err) {
-        alert('파일 다운로드에 실패했습니다. 다시 시도해주세요.');
+        // alert('파일 다운로드에 실패했습니다. 다시 시도해주세요.');
+        toast({ title: '다운로드 실패', variant: 'destructive' });
       }
     },
     onCreateVc: (srcSeq: number, trgSeq: number) => {

src/components/common/OneVc.tsx

@@ -7,6 +7,7 @@ import {
 } 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;
@@ -138,7 +139,11 @@ export const VoiceSelectionPopover: React.FC<VoiceSelectionPopoverProps> = ({
 
   const handlePopoverOpen = () => {
     if (hasError) {
-      alert('언어 데이터를 가져오는 데 실패했습니다. 다시 시도해주세요.');
+      toast({
+        title: '언어 데이터를 가져오는 데 실패했습니다. 다시 시도해주세요.',
+        variant: 'destructive',
+      });
+
       return;
     }
     setIsPopoverOpen(true);

src/components/common/VoiceSelectPopover.tsx

@@ -4,20 +4,20 @@ const TextSlide = () => {
   return (
     <>
       <div
-        className={`mt-[240px] h-[85px] overflow-hidden ${styles.textSlideAnimation}`}
+        className={`mt-[240px] h-[70px] overflow-hidden ${styles.textSlideAnimation}`}
       >
-        <p className='text-[50px] font-bold text-blue-7'>내가 적은 시나리오</p>
-        <p className='text-[50px] font-bold text-blue-7'>
+        <p className='text-[40px] font-bold text-blue-7'>내가 적은 시나리오</p>
+        <p className='text-[40px] font-bold text-blue-7'>
           10개의 보이스 파일로
         </p>
-        <p className='text-[50px] font-bold text-blue-7'>로마 신화 대본으로</p>
-        <p className='text-[50px] font-bold text-blue-7'>
+        <p className='text-[40px] font-bold text-blue-7'>로마 신화 대본으로</p>
+        <p className='text-[40px] font-bold text-blue-7'>
           내 목소리를 다른 보이스 톤으로
         </p>
-        <p className='text-[50px] font-bold text-blue-7'>내가 적은 시나리오</p>
+        <p className='text-[40px] font-bold text-blue-7'>내가 적은 시나리오</p>
       </div>
 
-      <p className='text-[50px] text-blue-7'>AI 오디오 생성해줘</p>
+      <p className='text-[40px] text-blue-7'>AI 오디오 생성해줘</p>
     </>
   );
 };

src/components/login/TextSlide.tsx

@@ -3,6 +3,12 @@ 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');
@@ -30,7 +36,8 @@ const ConcatSidebar = () => {
           <div>
             <div>
               <p className='mb-4'>편집 오디오</p>
-              <Button className='w-full' size='sm'>
+              <Button className='w-full' size='sm' variant={'outline'}>
+                <Headphones />
                 오디오 파일 추가
               </Button>
               <ScrollArea className='h-24 my-2'>
@@ -51,7 +58,8 @@ const ConcatSidebar = () => {
             <Separator className='my-3' />
             <div>
               <p className='mb-4 text-md'>텍스트</p>
-              <Button className='w-full' size='sm'>
+              <Button className='w-full' size='sm' variant={'outline'}>
+                <UploadIcon />
                 텍스트 파일 추가
               </Button>
             </div>
@@ -60,8 +68,8 @@ const ConcatSidebar = () => {
 
             <div>
               <p className='mb-4 text-md'>배경 오디오</p>
-              <Button className='w-full' size='sm'>
-                배경 오디오 추가
+              <Button className='w-full' size='sm' variant={'outline'}>
+                <AudioLinesIcon /> 배경 오디오 추가
               </Button>
               <ul className='mt-3 text-sm'>
                 <li>asdfsd.mp3</li>

src/components/sidebar/ConcatSidebar.tsx

@@ -19,7 +19,6 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import DividingLine from '@/components/common/DivideLine';
 import { ROUTES } from '@/constants/route';
 import { PROJECT_DATA } from '@/mocks/projectData';
 import { useState } from 'react';
@@ -28,6 +27,8 @@ 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 = [
@@ -58,7 +59,7 @@ export function HomeSidebar() {
 
   if (error) {
     console.error(error);
-    alert('로그아웃에 실패했습니다.');
+    toast({ title: '로그아웃에 실패했습니다', variant: 'destructive' });
     reset();
   }
 
@@ -104,7 +105,7 @@ export function HomeSidebar() {
             </SidebarMenu>
           </SidebarGroupContent>
         </SidebarGroup>
-        <DividingLine />
+        <DivideLine />
         <SidebarGroup>
           <SidebarGroupContent>
             <SidebarMenu>
@@ -124,7 +125,7 @@ export function HomeSidebar() {
             </SidebarMenu>
           </SidebarGroupContent>
         </SidebarGroup>
-        <DividingLine />
+        <DivideLine />
         <SidebarGroup>
           <SidebarGroupLabel>최근 작업 프로젝트</SidebarGroupLabel>
           <SidebarGroupContent>