Skip to content

Commit ebaffea

Browse files
[FEAT] 최종 디자인, 기능 정리 및 수정 (#94)
* design: 메인화면 이중 스크롤 수정 * design: 버튼 디자인 통일 * feature: 로그인 화면 꽉차게 수정 (#92) * design: 디자인 통일화, footer 재생바 수정 * design: 로그인페이지 텍스트 슬라이드 수정, 배경 수정 * design: 텍스트 수정 * feat: tts 효과없음, 초기화 기능 * design: footer 재 적용 * feat: 토스트알림 기능 추가 --------- Co-authored-by: Haeun <haruyam15@gmail.com>
1 parent 3f59dd2 commit ebaffea

26 files changed

Lines changed: 891 additions & 172 deletions

package-lock.json

Lines changed: 35 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"@radix-ui/react-separator": "^1.1.0",
2525
"@radix-ui/react-slider": "^1.2.1",
2626
"@radix-ui/react-slot": "^1.1.0",
27+
"@radix-ui/react-toast": "^1.2.2",
2728
"@radix-ui/react-tooltip": "^1.1.3",
2829
"@tanstack/react-query": "^5.61.3",
2930
"@tanstack/react-table": "^8.20.5",

src/App.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import { RouterProvider } from 'react-router-dom';
22
import { router } from './routes/router';
33
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
4+
import { Toaster } from '@/components/ui/toaster';
45

56
const queryClient = new QueryClient();
67

78
function App() {
89
return (
9-
<div className='max-w-[1280px] mx-auto'>
10+
<div>
1011
<QueryClientProvider client={queryClient}>
1112
<RouterProvider router={router} />
13+
<Toaster />
1214
</QueryClientProvider>
1315
</div>
1416
);

src/components/common/FileUpload.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -117,13 +117,18 @@ const FileUpload: React.FC<IFileUploadProps> = ({
117117
>
118118
{file.name}
119119
</span>
120-
<Badge
120+
{/* <Badge
121121
className='w-1/4 px-2 text-center'
122122
variant={'outline'}
123123
>
124124
<CircleIcon size={8} fill='green' />
125-
&nbsp;완료
126-
</Badge>
125+
</Badge> */}
126+
<div>
127+
<span
128+
className={`mr-2 w-3 h-3 rounded-full bg-blue-500`}
129+
/>
130+
<span>완료</span>
131+
</div>
127132
</div>
128133
</li>
129134
))

src/components/common/ListView.tsx

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -183,21 +183,11 @@ const Tile = ({ data, navi }: IListViewProps) => {
183183
data.map((item, idx) => (
184184
<li
185185
key={item.projectName + idx}
186-
className='p-5 w-[30%] h-[150px] border hover:cursor-pointer hover:scale-95 duration-100 rounded-lg z-10 content-center '
186+
className='p-5 w-[30%] h-[200px] border hover:cursor-pointer hover:scale-95 duration-100 rounded-lg z-10 content-center '
187187
onClick={() => {
188188
navi(ROUTES.PROJECT + ROUTES.TTS + `/${item.projectSeq}`);
189189
}}
190190
>
191-
{/* <Checkbox
192-
className='relative z-0 hover:bg-neutral-100'
193-
onClick={(
194-
e: React.MouseEvent<HTMLInputElement, MouseEvent>
195-
) => {
196-
e.stopPropagation();
197-
onTest(e);
198-
}}
199-
/> */}
200-
201191
<div className='text-center'>{item.projectName}</div>
202192
<div className='flex justify-center gap-2 pt-2 text-center'>
203193
{item.tts ? <Badge variant={'outline'}>TTS</Badge> : <></>}

src/components/common/OneVc.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { CustomCheckbox } from '@/components/common/CustomCheckbox';
33
import { Button } from '@/components/ui/button';
44
import { Checkbox } from '@/components/ui/checkbox';
55
import { Input } from '@/components/ui/input';
6+
import { toast } from '@/hooks/use-toast';
67
import { OneVcState, useVcStore, VcState } from '@/stores/vcDataStore';
78
import { downloadFile } from '@/utils/file';
89
import { formatTime } from '@/utils/time';
@@ -38,9 +39,11 @@ const OneVc = ({ vcData }: IOneVcProps) => {
3839
},
3940
onDownload: async () => {
4041
try {
42+
toast({ title: '다운로드 시작' });
4143
downloadFile(vcData.vcSrcFile.fileUrl, vcData.vcSrcFile.name);
4244
} catch (err) {
43-
alert('파일 다운로드에 실패했습니다. 다시 시도해주세요.');
45+
// alert('파일 다운로드에 실패했습니다. 다시 시도해주세요.');
46+
toast({ title: '다운로드 실패', variant: 'destructive' });
4447
}
4548
},
4649
onCreateVc: (srcSeq: number, trgSeq: number) => {

src/components/common/VoiceSelectPopover.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
} from '@/components/ui/popover';
88
import { ChevronDown } from 'lucide-react';
99
import { ttsLanguage, ttsStyle, ttsVoiceName } from '@/apis/ttsVoice';
10+
import { toast } from '@/hooks/use-toast';
1011

1112
interface Language {
1213
languageCode: string;
@@ -138,7 +139,11 @@ export const VoiceSelectionPopover: React.FC<VoiceSelectionPopoverProps> = ({
138139

139140
const handlePopoverOpen = () => {
140141
if (hasError) {
141-
alert('언어 데이터를 가져오는 데 실패했습니다. 다시 시도해주세요.');
142+
toast({
143+
title: '언어 데이터를 가져오는 데 실패했습니다. 다시 시도해주세요.',
144+
variant: 'destructive',
145+
});
146+
142147
return;
143148
}
144149
setIsPopoverOpen(true);

src/components/login/TextSlide.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,20 @@ const TextSlide = () => {
44
return (
55
<>
66
<div
7-
className={`mt-[240px] h-[85px] overflow-hidden ${styles.textSlideAnimation}`}
7+
className={`mt-[240px] h-[70px] overflow-hidden ${styles.textSlideAnimation}`}
88
>
9-
<p className='text-[50px] font-bold text-blue-7'>내가 적은 시나리오</p>
10-
<p className='text-[50px] font-bold text-blue-7'>
9+
<p className='text-[40px] font-bold text-blue-7'>내가 적은 시나리오</p>
10+
<p className='text-[40px] font-bold text-blue-7'>
1111
10개의 보이스 파일로
1212
</p>
13-
<p className='text-[50px] font-bold text-blue-7'>로마 신화 대본으로</p>
14-
<p className='text-[50px] font-bold text-blue-7'>
13+
<p className='text-[40px] font-bold text-blue-7'>로마 신화 대본으로</p>
14+
<p className='text-[40px] font-bold text-blue-7'>
1515
내 목소리를 다른 보이스 톤으로
1616
</p>
17-
<p className='text-[50px] font-bold text-blue-7'>내가 적은 시나리오</p>
17+
<p className='text-[40px] font-bold text-blue-7'>내가 적은 시나리오</p>
1818
</div>
1919

20-
<p className='text-[50px] text-blue-7'>AI 오디오 생성해줘</p>
20+
<p className='text-[40px] text-blue-7'>AI 오디오 생성해줘</p>
2121
</>
2222
);
2323
};

src/components/sidebar/ConcatSidebar.tsx

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,12 @@ import { Button } from '@/components/ui/button';
33
import { Input } from '@/components/ui/input';
44
import { Separator } from '@/components/ui/separator';
55
import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
6+
import {
7+
AudioLines,
8+
AudioLinesIcon,
9+
Headphones,
10+
UploadIcon,
11+
} from 'lucide-react';
612

713
const ConcatSidebar = () => {
814
const [activeTab, setActiveTab] = useState<'file' | 'edit'>('file');
@@ -30,7 +36,8 @@ const ConcatSidebar = () => {
3036
<div>
3137
<div>
3238
<p className='mb-4'>편집 오디오</p>
33-
<Button className='w-full' size='sm'>
39+
<Button className='w-full' size='sm' variant={'outline'}>
40+
<Headphones />
3441
오디오 파일 추가
3542
</Button>
3643
<ScrollArea className='h-24 my-2'>
@@ -51,7 +58,8 @@ const ConcatSidebar = () => {
5158
<Separator className='my-3' />
5259
<div>
5360
<p className='mb-4 text-md'>텍스트</p>
54-
<Button className='w-full' size='sm'>
61+
<Button className='w-full' size='sm' variant={'outline'}>
62+
<UploadIcon />
5563
텍스트 파일 추가
5664
</Button>
5765
</div>
@@ -60,8 +68,8 @@ const ConcatSidebar = () => {
6068

6169
<div>
6270
<p className='mb-4 text-md'>배경 오디오</p>
63-
<Button className='w-full' size='sm'>
64-
배경 오디오 추가
71+
<Button className='w-full' size='sm' variant={'outline'}>
72+
<AudioLinesIcon /> 배경 오디오 추가
6573
</Button>
6674
<ul className='mt-3 text-sm'>
6775
<li>asdfsd.mp3</li>

src/components/sidebar/HomeSidebar.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import {
1919
DropdownMenuItem,
2020
DropdownMenuTrigger,
2121
} from '@/components/ui/dropdown-menu';
22-
import DividingLine from '@/components/common/DivideLine';
2322
import { ROUTES } from '@/constants/route';
2423
import { PROJECT_DATA } from '@/mocks/projectData';
2524
import { useState } from 'react';
@@ -28,6 +27,8 @@ import { Button } from '@/components/ui/button';
2827
import NewProjectButton from '@/components/common/NewProjectButton';
2928
import useLogout from '@/hooks/apis/useLogout';
3029
import useAuthStore from '@/stores/authStore';
30+
import { toast } from '@/hooks/use-toast';
31+
import DivideLine from '@/components/common/DivideLine';
3132

3233
// Menu items.
3334
const Menus = [
@@ -58,7 +59,7 @@ export function HomeSidebar() {
5859

5960
if (error) {
6061
console.error(error);
61-
alert('로그아웃에 실패했습니다.');
62+
toast({ title: '로그아웃에 실패했습니다', variant: 'destructive' });
6263
reset();
6364
}
6465

@@ -104,7 +105,7 @@ export function HomeSidebar() {
104105
</SidebarMenu>
105106
</SidebarGroupContent>
106107
</SidebarGroup>
107-
<DividingLine />
108+
<DivideLine />
108109
<SidebarGroup>
109110
<SidebarGroupContent>
110111
<SidebarMenu>
@@ -124,7 +125,7 @@ export function HomeSidebar() {
124125
</SidebarMenu>
125126
</SidebarGroupContent>
126127
</SidebarGroup>
127-
<DividingLine />
128+
<DivideLine />
128129
<SidebarGroup>
129130
<SidebarGroupLabel>최근 작업 프로젝트</SidebarGroupLabel>
130131
<SidebarGroupContent>

0 commit comments

Comments
 (0)