🧩 Vue 2로 배우는 프론트엔드 기초

🎯 학습 목표

• 다크모드 테마 토글 버튼 만들기
• localStorage를 활용해 다크모드 상태 저장/복원
• CSS 클래스를 전역으로 제어하는 방법 학습

🏗️ 1. App.vue에 토글 UI 추가

TodoApp 컴포넌트는 바로 다음에 설명이 나옵니다.

<template>
  <div :class="['app-container', { dark: isDark }]">
    <button class="theme-toggle" @click="toggleDark">
      {{ isDark ? '☀️ 밝은모드' : '🌙 다크모드' }}
    </button>

    <TodoApp />
  </div>
</template>

<script>
import TodoApp from './components/TodoApp.vue';

export default {
  components: { TodoApp },
  data() {
    return {
      isDark: false,
    };
  },
  created() {
    const saved = localStorage.getItem('theme');
    this.isDark = saved === 'dark';
  },
  methods: {
    toggleDark() {
      this.isDark = !this.isDark;
      localStorage.setItem('theme', this.isDark ? 'dark' : 'light');
    },
  },
};
</script>

<style scoped>
.app-container {
  min-height: 100vh;
  padding: 16px;
  background-color: #ffffff;
  color: #222;
  transition: all 0.3s;
}
.app-container.dark {
  background-color: #1e1e1e;
  color: #f1f1f1;
}

.theme-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: 1px solid #aaa;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
}
</style>

📁 2-1. TodoApp.vue 구조

<template>
  <div class="todo-container">
    <h2>🧾 할 일 관리 (수정 포함)</h2>
    <div class="form">
      <input v-model="newTodo" placeholder="할 일을 입력하세요" />
      <button @click="addTodo">추가</button>
    </div>
    <ul class="todo-list">
      <TodoItem
        v-for="todo in todos"
        :key="todo.id"
        :content="todo.title"
        :completed="todo.completed"
        :editing="editingId === todo.id"
        @delete="removeTodo(todo.id)"
        @edit="startEdit(todo.id)"
        @update="updateTodo(todo.id, $event)"
        @toggle="toggleComplete(todo.id)"
      />
    </ul>
  </div>
</template>

<script>
import axios from 'axios';
import TodoItem from './TodoItem.vue';

const API_URL = '/api/todos';

export default {
  components: { TodoItem },
  data() {
    return {
      newTodo: '',
      todos: [],
      editingId: null,
      userId: null, // userId를 상태로 관리
    };
  },
  mounted() {
    this.userId = this.getOrCreateUserId();
    this.fetchTodos();
  },
  methods: {
    getOrCreateUserId() {
      const KEY = 'todo-user-id';
      let id = localStorage.getItem(KEY);
      if (!id) {
        id = 'user-' + Date.now();
        localStorage.setItem(KEY, id);
      }
      return id;
    },
    async fetchTodos() {
      const res = await axios.get(`${API_URL}?user=${this.userId}`);
      this.todos = res.data;
    },
    async addTodo() {
      const title = this.newTodo.trim();
      if (!title) return;
      const res = await axios.post(API_URL, {
        title,
        completed: false,
        userId: this.userId,
      });
      this.todos.unshift(res.data);
      this.newTodo = '';
    },
    async removeTodo(id) {
      await axios.delete(`${API_URL}/${id}?user=${this.userId}`);
      this.todos = this.todos.filter((todo) => todo.id !== id);
    },
    startEdit(id) {
      this.editingId = id;
    },
    async updateTodo(id, newTitle) {
      if (newTitle === null) {
        this.editingId = null;
        return;
      }
      const title = newTitle.trim();
      if (!title) return;

      await axios.put(`${API_URL}/${id}`, { title, userId: this.userId });
      this.todos = this.todos.map((todo) =>
        todo.id === id ? { ...todo, title } : todo
      );
      this.editingId = null;
    },
    async toggleComplete(id) {
      const target = this.todos.find((todo) => todo.id === id);
      const updated = { ...target, completed: !target.completed };

      await axios.put(`${API_URL}/${id}`, {
        completed: updated.completed,
        userId: this.userId,
      });

      this.todos = this.todos.map((todo) => (todo.id === id ? updated : todo));
    },
  },
};
</script>

<!-- 스타일 생략 -->

📦 SCSS 지원 패키지 설치 (Vite 기준)

npm install -D sass sass-loader

1. .vue 파일 내 <style lang="scss" scoped>로 선언해야 SCSS가 적용됩니다.

📁 2-2. TodoApp.vue 스타일 작성

<style lang="scss" scoped>
.todo-container {
  max-width: 480px;
  margin: 40px auto;
  padding: 24px;
  border: 1px solid #ccc;
  border-radius: 12px;
  background: #f9f9f9;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: background-color 0.3s, color 0.3s;

  .form {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;

    input {
      flex: 1;
      padding: 8px;
      border: 1px solid #aaa;
      border-radius: 6px;
      font-size: 14px;
      background-color: #fff;
      color: #222;
      transition: background-color 0.3s, color 0.3s;
    }
  }

  button {
    padding: 8px 16px;
    background-color: #42b983;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s;

    &:hover {
      background-color: #36956d;
    }
  }

  ul {
    list-style: none;
    padding: 0;
  }
}

// 다크모드 대응
.dark {
  .todo-container {
    background: #1e1e1e;
    color: #f1f1f1;
    border-color: #444;
    .form {
      input {
        background-color: #2a2a2a;
        color: #f1f1f1;
        border-color: #666;
      }
    }
  }
}
</style>

🧠 핵심 포인트 요약

FE 저장소

GitHub - heroyooi/vue2-app at ch13