Skip to content

허수빈 week3 과제 #43

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

Merged
bk-git-hub merged 2 commits into from
Apr 4, 2026
Merged

허수빈 week3 과제 #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bbdeb11
week3 허수빈 과제
sxxbxxny Apr 2, 2026
0fd53a4
허수빈 week3 과제 수정
sxxbxxny Apr 2, 2026
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
65 changes: 64 additions & 1 deletion src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,12 +64,60 @@ body {
align-self: stretch;
}

.todo-input-card {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
width: 100%;
}

.todo-input {
display: flex;
height: 46.6px;
padding: 12px 16px;
align-items: center;
flex: 1 0 0;
border-radius: 8px;
border: 0.8px solid #E5E7EB;
}

.todo-input:focus {
outline: none;
border-radius: 8px;
border: 2px solid #3B82F6;
background: rgba(255, 255, 255, 0.00);
box-shadow: 0 0 0 4px #3B82F6;
}

.add-button {
display: flex;
width: 72.2px;
height: 46.6px;
padding: 12.8px 23.2px 12.8px 24px;
justify-content: center;
align-items: center;
flex-shrink: 0;
border: none;
border-radius: 8px;
background: #3B82F6;
white-space: nowrap;
color: #FFF;
text-align: center;
font-family: Pretendard;
Copy link
Copy Markdown
Collaborator

@bk-git-hub bk-git-hub Apr 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CSS에서 Pretendard를 사용하고 있는데 현재 프로젝트에는 이 폰트를 실제로 불러오는 코드가 보이지 않아요. 의도한 폰트를 쓰고 싶다면 import까지 같이 넣어두면 더 좋겠습니다.

font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 21px; /* 150% */
}

.todo-card {
display: flex;
padding: 16px;
align-items: center;
gap: 10px;
align-self: stretch;
justify-content: space-between;
border-radius: 12px;
background: #FFF;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10);
Expand Down Expand Up @@ -115,6 +163,20 @@ body {
text-decoration-line: line-through;
}

.delete-button {
color: #0A0A0A;
text-align: center;
font-family: Pretendard;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 30px; /* 150% */
border: none;
background: none;
margin-left: auto;
gap: 12px;
}

.todo-empty {
display: flex;
width: 640px;
Expand Down Expand Up @@ -146,4 +208,5 @@ body {
font-style: normal;
font-weight: 400;
line-height: 72px; /* 150% */
}
}

65 changes: 53 additions & 12 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,67 @@
import { useState } from "react";
import TodoHeader from "./components/TodoHeader";
import TodoList from "./components/TodoList";
import "./App.css";

const headerIcon = "✅";
const headerTitle = "오늘의 할 일";
interface Todo {
id: number;
text: string;
done: boolean;
}

const todos = [
{id: 1, text:"리액트 공식문서 읽기", done: true},
{id: 2, text:"알고리즘 문제 풀기", done: true},
{id: 3, text:"운동 30분 하기", done: false},
{id: 4, text:"프로젝트 회의 준비", done: false},
];
export default function App() {
const [todos, setTodos] = useState<Todo[]>([
{ id: 1, text: "리액트 공식문서 읽기", done: true },
{ id: 2, text: "알고리즘 문제 풀기", done: true },
{ id: 3, text: "운동 30분 하기", done: false },
{ id: 4, text: "프로젝트 회의 준비", done: false },
{ id: 5, text: "장보기", done: false },
]);
const [inputValue, setInputValue] = useState<string>("");

const weekLabel = todos.length === 0 ? "Week 2 — 빈 상태" : "Week 2 — 체크박스 토글";
const [isFocused, setIsFocused] = useState<boolean>(false);

const weekLabel = isFocused
? "week3 - 입력 중(focus)"
: "week3 - 기본 상태";


const handleAdd = () => {
if (inputValue.trim() === "") return;
setTodos((prev) => [
...prev,
{ id: Date.now(), text: inputValue.trim(), done: false },
]);
setInputValue("");
};

const handleDelete = (id: number) => {
setTodos((prev) => prev.filter((todo) => todo.id !== id));
};

const handleToggle = (id: number) => {
setTodos((prev) =>
prev.map((todo) =>
todo.id === id ? { ...todo, done: !todo.done } : todo
)
);
};

export default function App() {
return (
<div className="app">
<div className="container">
<p className="week-label">{weekLabel}</p>
<TodoHeader icon={headerIcon} title={headerTitle} />
<TodoList items={todos} />
<TodoHeader icon="✅" title="오늘의 할 일" />
<TodoList
items={todos}
inputValue={inputValue}
onInputChange={setInputValue}
onAdd={handleAdd}
onDelete={handleDelete}
onToggle={handleToggle}
onFocus={() => setIsFocused(true)}
onBlur={() => setIsFocused(false)}
/>
</div>
</div>
);
Expand Down
14 changes: 11 additions & 3 deletions src/components/TodoCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,27 @@ import checkIcon from "../assets/check.svg";
type TodoCardProps = {
text: string;
done: boolean;
onDelete: () => void;
onToggle: () => void;
};

export default function TodoCard({ text, done }: TodoCardProps) {
export default function TodoCard({ text, done, onDelete, onToggle }: TodoCardProps) {
return (
<div className="todo-card">
<div className={`todo-card__check ${done ? "todo-card__check--done" : ""}`}>
<div
Copy link
Copy Markdown
Collaborator

@bk-git-hub bk-git-hub Apr 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

완료/미완료처럼 체크 상태를 바꾸는 기능이라면, 지금처럼 div에 클릭 이벤트를 다는 것보다는 input type=checkbox처럼 상태 의미가 드러나는 요소를 사용하는 편이 더 자연스럽습니다.

className={`todo-card__check ${done ? "todo-card__check--done" : ""}`}
onClick={onToggle}
>
{done && (
<img src={checkIcon} alt="완료" className="todo-card__check-icon" />
)}
</div>
<span className={`todo-card__text ${done ? "todo-card__text--done" : ""}`}>
{text}
</span>
<button className="delete-button" onClick={onDelete}>
Copy link
Copy Markdown
Collaborator

@bk-git-hub bk-git-hub Apr 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 삭제 버튼은 아이콘만 있어서 스크린리더 입장에서는 의미가 조금 모호할 수 있어요. aria-label 속성을 붙여두면 버튼의 의미가 더 분명해집니다.

🗑️
</button>
</div>
);
}
}
62 changes: 49 additions & 13 deletions src/components/TodoList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,59 @@ type Todo = {

type TodoListProps = {
items: Todo[];
inputValue: string;
onInputChange: (value: string) => void;
onAdd: () => void;
onDelete: (id: number) => void;
onToggle: (id: number) => void;
onFocus: () => void;
onBlur: () => void;
};

export default function TodoList({ items }: TodoListProps) {
if (items.length === 0) {
return (
<div className="todo-empty">
<span className="todo-empty__icon">{"📋"}</span>
<p className="todo-empty__text">{"아직 할 일이 없어요"}</p>
</div>
);
}

export default function TodoList({
items,
inputValue,
onInputChange,
onAdd,
onDelete,
onToggle,
onFocus,
onBlur,
}: TodoListProps) {
return (
<div className="todo-list">
Copy link
Copy Markdown
Collaborator

@bk-git-hub bk-git-hub Apr 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이전에도 말씀드렸던 부분인데, 리스트를 보여주는 영역이라면 div 나열보다 ul과 li 구조로 맞춰두면 의미가 더 자연스럽습니다. 지금은 TodoCard가 반복 렌더링되고 있어서 리스트 마크업으로 바꾸기에도 잘 맞는 구조예요.

{items.map((item) => (
<TodoCard key={item.id} text={item.text} done={item.done} />
))}
<div className="todo-input-card">
<input
type="text"
className="todo-input"
placeholder="새로운 할 일"
value={inputValue}
onChange={(e) => onInputChange(e.target.value)}
onKeyDown={(e) => e.key === "Enter" && onAdd()}
onFocus={onFocus}
onBlur={onBlur}
/>
<button className="add-button" onClick={onAdd}>
추가
</button>
</div>

{items.length === 0 ? (
<div className="todo-empty">
<span className="todo-empty__icon">{"📋"}</span>
<p className="todo-empty__text">{"아직 할 일이 없어요"}</p>
</div>
) : (
items.map((item) => (
<TodoCard
key={item.id}
text={item.text}
done={item.done}
onDelete={() => onDelete(item.id)}
onToggle={() => onToggle(item.id)}
/>
))
)}
</div>
);
}