|
1 | 1 | 'use client'; |
2 | 2 |
|
3 | | -import { useState } from 'react'; |
4 | | - |
5 | | -import HeartIcon from '@/assets/icon-heart.svg'; |
6 | | -import { Filter } from '@/components/common/Filter'; |
7 | | -import { Header } from '@/components/common/Header'; |
8 | | -import { InputModalContent } from '@/components/ImageInput/InputModalContent'; |
9 | | -import { notify } from '@/store/useToastStore'; |
10 | | -import { useTodoDataStore } from '@/store/useTodoDataStore'; |
11 | | -import { useTodoModalStore } from '@/store/useTodoModalStore'; |
12 | | -import { convertImageToBase64 } from '@/apis/Todo/convertImageToBase64'; |
13 | | - |
14 | 3 | export default function Home() { |
15 | | - const [currentFilter, setCurrentFilter] = useState<string>('All'); |
16 | | - const { setTodoData } = useTodoDataStore(); |
17 | | - const { open } = useTodoModalStore(); |
18 | | - |
19 | | - const data = { |
20 | | - todoId: 1, |
21 | | - goalTitle: '테스트 목표 제목1', |
22 | | - todoTitle: '하이하이', |
23 | | - startDate: '2024-12-15', |
24 | | - endDate: '2024-12-17', |
25 | | - todoStatus: '진행', |
26 | | - todoLink: |
27 | | - 'https://slid-todo.s3.ap-northeast-2.amazonaws.com/a19c4793-d33b-4be6-9f65-097bed5a6709_testmouse1.png', |
28 | | - todoPic: '', |
29 | | - }; |
30 | | - |
31 | | - const handleFilterChange = (filter: string) => { |
32 | | - setCurrentFilter(filter); |
33 | | - console.log('Selected filter:', filter); |
34 | | - }; |
35 | | - |
36 | | - const handleSuccessClick = () => { |
37 | | - notify('success', '성공 메시지입니다!', 3000); |
38 | | - }; |
39 | | - |
40 | | - const handleErrorClick = () => { |
41 | | - notify('error', '에러 메시지입니다!', 3000); |
42 | | - }; |
43 | | - |
44 | | - const handleInfoClick = () => { |
45 | | - console.log(convertImageToBase64(data.todoPic)); |
46 | | - notify('info', '정보 메시지입니다!', 3000); |
47 | | - }; |
48 | | - |
49 | | - const [isGalleryModalOpen, setIsGalleryModalOpen] = useState(false); |
50 | | - |
51 | | - const handleOpenGalleryModal = () => { |
52 | | - setIsGalleryModalOpen(true); |
53 | | - }; |
54 | | - |
55 | | - const handleCloseGalleryModal = () => { |
56 | | - setIsGalleryModalOpen(false); |
57 | | - }; |
58 | | - |
59 | | - const handleOpenModify = async () => { |
60 | | - const base64Image = data.todoPic |
61 | | - ? await convertImageToBase64(data.todoPic) |
62 | | - : ''; |
63 | | - setTodoData({ |
64 | | - todoId: data.todoId, |
65 | | - goalTitle: data.goalTitle, |
66 | | - title: data.todoTitle, |
67 | | - startDate: data.startDate, |
68 | | - endDate: data.endDate, |
69 | | - todoStatus: data.todoStatus, |
70 | | - todoLink: data.todoLink, |
71 | | - imageEncodedBase64: base64Image, |
72 | | - }); |
73 | | - open('수정'); |
74 | | - }; |
75 | | - |
76 | | - return ( |
77 | | - <div className="px-16 pt-48 sm:pt-0"> |
78 | | - <Header /> |
79 | | - <button onClick={handleOpenModify}>할일 수정</button> |
80 | | - <button className="size-100">안녕asdfasfd</button> |
81 | | - <HeartIcon width="32" height="32" fill="#FF0000" /> |
82 | | - |
83 | | - <button |
84 | | - type="button" |
85 | | - className="bg-black text-white" |
86 | | - onClick={handleSuccessClick} |
87 | | - > |
88 | | - 성공 토스트 띄우기 |
89 | | - </button> |
90 | | - <button |
91 | | - type="button" |
92 | | - className="bg-red-500 text-white" |
93 | | - onClick={handleErrorClick} |
94 | | - > |
95 | | - 에러 토스트 띄우기 |
96 | | - </button> |
97 | | - <button |
98 | | - type="button" |
99 | | - className="bg-blue-500 text-white" |
100 | | - onClick={handleInfoClick} |
101 | | - > |
102 | | - 정보 토스트 띄우기 |
103 | | - </button> |
104 | | - |
105 | | - <div className="p-4"> |
106 | | - <h1 className="mb-4 text-xl font-bold">Todo List</h1> |
107 | | - <Filter |
108 | | - filters={['All', 'To Do', 'Completed', 'In Progress']} |
109 | | - onFilterChange={handleFilterChange} |
110 | | - /> |
111 | | - <div className="mt-4"> |
112 | | - <p>Currently selected filter: {currentFilter}</p> |
113 | | - </div> |
114 | | - </div> |
115 | | - |
116 | | - <button |
117 | | - type="button" |
118 | | - className="mt-4 bg-green-500 px-4 py-2 text-white" |
119 | | - onClick={handleOpenGalleryModal} |
120 | | - > |
121 | | - 갤러리/카메라 모달 열기 |
122 | | - </button> |
123 | | - |
124 | | - <InputModalContent |
125 | | - isOpen={isGalleryModalOpen} |
126 | | - onClose={handleCloseGalleryModal} |
127 | | - /> |
128 | | - </div> |
129 | | - ); |
| 4 | + return <div className="px-16 pt-48 sm:pt-0">asdf</div>; |
130 | 5 | } |
0 commit comments