Skip to content

Setting importance #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
guddnboy wants to merge 14 commits into
base: master
Choose a base branch
from
Open

Setting importance #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
5c72b02
feat: 중요도 표시 버튼 추가
guddnboy Dec 18, 2024
568ecb9
feat: 디테일 페이지에도 중요도 표시 버튼 추가
guddnboy Dec 18, 2024
169f77c
feat: 중요도 설정 함수 추가
guddnboy Dec 30, 2024
befac38
feat: 데이터 타입에 중요도 속성 추가
guddnboy Dec 30, 2024
26c277d
feat: 리스트 페이지에서 중요도 설정 함수 연결
guddnboy Dec 30, 2024
6f35c09
feat: 중요도 버튼 디자인 수정
guddnboy Dec 31, 2024
86c559f
feat: 디테일 페이지에서도 중요도 설정
guddnboy Jan 3, 2025
06933f8
refact: 중요도 설정 버튼 중복 코드 삼항연산자로 처리
guddnboy Jan 9, 2025
645839c
refact: updateImportance 함수 제거
guddnboy Jan 9, 2025
3a24c21
fix: 의존성 배열 id값으로 수정
guddnboy Jan 9, 2025
706d68e
refact: updateTodo함수로 중요도 업데이트하도록 수정
guddnboy Jan 9, 2025
eac129c
refact: 중요도 설정 버튼에서 중복되지 않는 코드만 삼항연산자로 처리
guddnboy Jan 9, 2025
3e4b01a
refact: 중요도 설정 함수 updateTodo 함수를 이용하도록 수정
guddnboy Jan 9, 2025
3f3ca38
refact: 역할이 중복된 코드 수정
guddnboy Jan 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/db/todoSchemas.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,5 @@ interface Todo {

interface TodoDetail {
description: string;
importance: boolean;
}
95 changes: 67 additions & 28 deletions src/todomanager/Detail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,25 +22,11 @@ function Detail({ id, onBack }: { id: string; onBack: () => void }) {
const { name, value, checked } = e.target;

if (selectedTodo) {
setSelectedTodo(prevTodo => {
if (!prevTodo) return prevTodo;
switch (name) {
case 'isComplete':
return {
...prevTodo,
isComplete: checked,
};
case 'dueDate':
return {
...prevTodo,
dueDate: new Date(value),
};
default:
return {
...prevTodo,
[name]: value,
};
}
setSelectedTodo({
...selectedTodo,
[name]: value,
[name]: name === 'isComplete' ? checked : value,
[name]: name === 'dueDate' ? new Date(value) : value,
});
updateTodo({
...selectedTodo,
Expand All @@ -53,15 +39,12 @@ function Detail({ id, onBack }: { id: string; onBack: () => void }) {
const { name, value } = e.target;

if (selectedTodo) {
setSelectedTodo(prevTodo => {
if (!prevTodo) return prevTodo;
return {
...prevTodo,
todoDetail: {
...prevTodo.todoDetail,
[name]: value,
},
};
setSelectedTodo({
...selectedTodo,
todoDetail: {
...selectedTodo.todoDetail,
[name]: value,
},
});
updateTodo({
...selectedTodo,
Expand All @@ -73,6 +56,25 @@ function Detail({ id, onBack }: { id: string; onBack: () => void }) {
}
};

const handleImportance = () => {
if (selectedTodo) {
const newImportance = !selectedTodo.todoDetail.importance;

setSelectedTodo({
...selectedTodo,
todoDetail: { ...selectedTodo.todoDetail, importance: newImportance },
});

updateTodo({
...selectedTodo,
todoDetail: {
...selectedTodo.todoDetail,
importance: newImportance,
},
});
}
};

useEffect(() => {
fetchTodo();
}, [id]);
Expand All @@ -91,6 +93,25 @@ function Detail({ id, onBack }: { id: string; onBack: () => void }) {
{!isModify ? (
<div className="flex justify-around items-center space-x-2 w-full">
<div className="text-lg">{selectedTodo?.title}</div>
<div className="flex items-center gap-2 h-transparent">
<button
type="button"
aria-label="importance"
className="border-none outline-none bg-transparent text-center"
onClick={() => handleImportance()}
>
{!selectedTodo?.todoDetail.importance ? (
<div className="relative w-6 h-8 bg-gray-300 text-white rounded-md shadow-md">
<div className="absolute -bottom-2 left-0 right-0 mx-auto w-0 h-0 border-t-[12px] border-t-gray-300 border-l-[12px] border-l-transparent border-r-[12px] border-r-transparent" />
</div>
) : (
<div className="relative w-6 h-8 bg-orange-500 text-white rounded-md shadow-md">
<div className="absolute -bottom-2 left-0 right-0 mx-auto w-0 h-0 border-t-[12px] border-t-orange-500 border-l-[12px] border-l-transparent border-r-[12px] border-r-transparent" />
</div>
)}
</button>
</div>

<div className="text-sm text-gray-600">
{selectedTodo?.dueDate && (
<div>{calculateDday(selectedTodo?.dueDate)}</div>
Expand All @@ -114,6 +135,24 @@ function Detail({ id, onBack }: { id: string; onBack: () => void }) {
onChange={handleInputChange}
className="border border-gray-300 focus:ring-2 focus:ring-brown-400 focus:outline-none rounded p-2 text-sm w-40"
/>
<div className="flex items-center gap-2 h-transparent">
<button
type="button"
aria-label="importance"
className="border-none outline-none bg-transparent text-center"
onClick={() => handleImportance()}
>
{!selectedTodo?.todoDetail.importance ? (
<div className="relative w-6 h-8 bg-gray-300 text-white rounded-md shadow-md">
<div className="absolute -bottom-2 left-0 right-0 mx-auto w-0 h-0 border-t-[12px] border-t-gray-300 border-l-[12px] border-l-transparent border-r-[12px] border-r-transparent" />
</div>
) : (
<div className="relative w-6 h-8 bg-orange-500 text-white rounded-md shadow-md">
<div className="absolute -bottom-2 left-0 right-0 mx-auto w-0 h-0 border-t-[12px] border-t-orange-500 border-l-[12px] border-l-transparent border-r-[12px] border-r-transparent" />
</div>
)}
</button>
</div>
<input
type="checkbox"
name="isComplete"
Expand Down
33 changes: 32 additions & 1 deletion src/todomanager/TodoList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ function TodoList({ onSelectTodo }: TodoListProps) {
title: newTodo,
dueDate: undefined,
isComplete: false,
todoDetail: { description: '' },
todoDetail: { description: '', importance: false },
};
addTodo(newTodoItem);
setNewTodo('');
Expand Down Expand Up @@ -83,6 +83,19 @@ function TodoList({ onSelectTodo }: TodoListProps) {
}
};

const handleImportance = (id: string) => {
const selectedTodo = todoFromDB.find(todo => todo.id === id);
if (selectedTodo) {
updateTodo({
...selectedTodo,
todoDetail: {
...selectedTodo.todoDetail,
importance: !selectedTodo.todoDetail.importance,
},
});
}
};

useEffect(() => {
getTodosFromDB();
}, [todoFromDB]);
Expand Down Expand Up @@ -119,6 +132,24 @@ function TodoList({ onSelectTodo }: TodoListProps) {
</button>
)}

<div className="flex items-center gap-2 h-transparent">
<button
type="button"
aria-label="importance"
className="border-none outline-none bg-transparent text-center"
onClick={() => handleImportance(todo.id)}
>
{!todo.todoDetail.importance ? (
<div className="relative w-6 h-8 bg-gray-300 text-white rounded-md shadow-md">
<div className="absolute -bottom-2 left-0 right-0 mx-auto w-0 h-0 border-t-[12px] border-t-gray-300 border-l-[12px] border-l-transparent border-r-[12px] border-r-transparent" />
</div>
) : (
<div className="relative w-6 h-8 bg-orange-500 text-white rounded-md shadow-md">
<div className="absolute -bottom-2 left-0 right-0 mx-auto w-0 h-0 border-t-[12px] border-t-orange-500 border-l-[12px] border-l-transparent border-r-[12px] border-r-transparent" />
</div>
)}
</button>
</div>
<div className="flex items-center gap-2">
{editTodo?.id === todo.id ? (
<button
Expand Down