2) Redux 실습문제

1. 기능 요구사항

1. 입력창에 할 일을 입력하고 Add 버튼을 누르면 목록에 추가된다.

2. 입력창이 비어있는데 Add 버튼을 누르면 → "값을 입력해주세요" 라는 경고창(alert)이 뜬다.

3. 각 Todo 항목 옆의 ❌ 버튼을 누르면 해당 항목이 삭제된다.

4. Todo 항목을 클릭하면 취소선(완료 처리)이 표시된다. (다시 클릭하면 취소선이 사라진다 → toggle 기능)

5. Todo와 관련된 모든 상태(리스트, 완료 여부)는 todoSlice.ts에서 관리한다.

6. Todo 추가, 삭제, 완료 상태 변경 로직은 전부 todoSlice 안의 reducer 함수에서 처리한다.

7. 프로젝트 전체 상태 관리는 store.ts에서 한다.

   • 여기서 todoSlice와 교육시 작성한 counterSlice를 함께 통합한다.

8. React 컴포넌트 파일은 .tsx, Redux 로직 파일은 .ts 확장자로 관리한다.

2. toDoList.tsx

function TodoList(){
    const inputRef = useRef<HTMLInputElement>(null);
    return(
       <div className={styles.wrapper}>
          <h2 className={styles.title}>Todo List</h2>
            <input ref={inputRef} type="text" className={styles.input}
              placeholder="할 일을 입력하세요…" />
            <button className={styles.addBtn}>Add</button>    
          <ul className={styles.list}>            
              <li className={styles.item}>
                <span                  
                  className={`${styles.text} ${styles.completed}`}>
                  맛있게 점심먹기!!
                </span>
                <button className={styles.deleteBtn}>
                  ❌
                </button>
               </li>
               <li>
                 <span                  
                  className={styles.text}>
                  열심히 운동하기~!!
                </span>
                <button className={styles.deleteBtn}>
                  ❌
                </button>       
              </li>
          </ul>
        </div>
    )
}

export default TodoList;

3. todo.ts

export type Todo = {
    id: number;
    text: string;
    completed: boolean;
  };
  
export type TodoState = {
todos: Todo[];
};

export const initialState: TodoState = {
todos: [],
};

4. css

.wrapper {
    max-width: 560px;
    margin: 48px auto;
    padding: 24px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  }
  
  .title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 16px;
  }
  
  .form {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
  }
  
  .input {
    flex: 1;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    outline: none;
    transition: box-shadow .2s, border-color .2s;
  }
  
  .input:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 4px rgba(96,165,250,.2);
  }
  
  .addBtn {
    padding: 12px 16px;
    border-radius: 10px;
    border: none;
    background: #2563eb;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: transform .06s ease, opacity .2s;
  }
  
  .addBtn:disabled {
    opacity: .6;
    cursor: not-allowed;
  }
  
  .addBtn:active {
    transform: translateY(1px);
  }
  
  .list {
    list-style: none;
    margin: 0;
    margin-top: 16px;
    padding: 0;
    display: grid;
    gap: 8px;
  }
  
  .item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    background: #f9fafb;
    transition: background .2s, box-shadow .2s, border-color .2s;
  }
  
  .item:hover {
    background: #ffffff;
    border-color: #e5e7eb;
    box-shadow: 0 6px 16px rgba(0,0,0,0.05);
  }
  
  .text {
    flex: 1;
    cursor: pointer;
    user-select: none;
    line-height: 1.4;
  }
  
  .completed {
    text-decoration: line-through;
    color: #9ca3af;
  }
  
  .deleteBtn {
    border: none;
    background: transparent;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    transition: background .2s, transform .06s ease;
  }
  
  .deleteBtn:hover {
    background: #fee2e2;
  }
  
  .deleteBtn:active {
    transform: translateY(1px);
  }