<script setup> 사용하기 (#53)

* ♻️ <script setup>을 사용하도록 일괄 수정 * 🐛 날짜 형식 YYYY-MM-DD로 나오도록 수정
padosum · Feb 20, 2023 · 797a2e4 · 797a2e4
1 parent d7ae9e0
commit 797a2e4
Show file tree

Hide file tree

Showing 11 changed files with 163 additions and 264 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -11,48 +11,30 @@
   </div>
 </template>
 
-<script lang="ts">
-import {
-  defineComponent,
-  computed,
-  onMounted,
-  onBeforeUnmount,
-  ref,
-} from "vue";
+<script setup lang="ts">
+import { computed, onMounted, onBeforeUnmount, ref } from "vue";
 import { useStore } from "vuex";
+
 import NavBar from "@/components/NavBar.vue";
 import AppFooter from "@/components/AppFooter.vue";
 
-export default defineComponent({
-  components: {
-    NavBar,
-    AppFooter,
-  },
-  setup() {
-    const store = useStore();
-    const sections = computed(() => store.getters.getSections);
-    const scrollTopBtn = ref();
-
-    const topClick = () => {
-      window.scrollTo({ top: 0, behavior: "smooth" });
-    };
-
-    const themeClass = computed(() =>
-      store.state.darkTheme ? "dark-theme" : ""
-    );
-
-    const scrollTop = () => {
-      if (window.scrollY >= 560) scrollTopBtn.value.classList.add("scroll-top");
-      else scrollTopBtn.value.classList.remove("scroll-top");
-    };
-
-    onMounted(() => window.addEventListener("scroll", scrollTop));
-    onBeforeUnmount(() => window.removeEventListener("scroll", scrollTop));
-
-    return { sections, topClick, scrollTopBtn, themeClass };
-  },
-  mounted() {},
-});
+const scrollTopBtn = ref();
+const store = useStore();
+const sections = computed(() => store.getters.getSections);
+
+const topClick = () => {
+  window.scrollTo({ top: 0, behavior: "smooth" });
+};
+
+const themeClass = computed(() => (store.state.darkTheme ? "dark-theme" : ""));
+
+const scrollTop = () => {
+  if (window.scrollY >= 560) scrollTopBtn.value.classList.add("scroll-top");
+  else scrollTopBtn.value.classList.remove("scroll-top");
+};
+
+onMounted(() => window.addEventListener("scroll", scrollTop));
+onBeforeUnmount(() => window.removeEventListener("scroll", scrollTop));
 </script>
 
 <style>

diff --git a/src/components/DailyLog.vue b/src/components/DailyLog.vue
@@ -16,45 +16,31 @@
   </section>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed } from "vue";
+<script setup lang="ts">
+import { computed } from "vue";
 import { useStore } from "vuex";
 import { MutationTypes } from "@/store/mutations";
 import { getFormatDate } from "@/utils/date";
 import SelectedPostList from "@/components/SelectedPostList.vue";
 import { CalendarHeatmap } from "vue3-calendar-heatmap";
 import { HEATMAP_DARK_COLORS, HEATMAP_LIGHT_COLORS } from "@/constants";
 
-export default defineComponent({
-  components: {
-    SelectedPostList,
-    CalendarHeatmap,
-  },
-  setup() {
-    const store = useStore();
+const store = useStore();
 
-    const today = computed(() => {
-      return getFormatDate(new Date());
-    });
-    const heatmapRangeColor = computed(() => {
-      return store.state.darkTheme ? HEATMAP_DARK_COLORS : HEATMAP_LIGHT_COLORS;
-    });
-
-    const handleDayClick = (day: any) => {
-      const date = getFormatDate(day.date);
-      store.commit(MutationTypes.SET_DATE, date);
-    };
-
-    return {
-      today,
-      heatmapRangeColor,
-      heatmapData: computed(() => store.getters.getHeatmapData),
-      selectedDate: computed(() => store.state.selectedDate),
-      postItemsByDate: computed(() => store.getters.getPostItemsByDate),
-      handleDayClick,
-    };
-  },
+const today = computed(() => {
+  return getFormatDate(new Date());
 });
+const heatmapRangeColor = computed(() => {
+  return store.state.darkTheme ? HEATMAP_DARK_COLORS : HEATMAP_LIGHT_COLORS;
+});
+
+const handleDayClick = (day: any) => {
+  const date = getFormatDate(day.date);
+  store.commit(MutationTypes.SET_DATE, date);
+};
+const heatmapData = computed(() => store.getters.getHeatmapData);
+const selectedDate = computed(() => store.state.selectedDate);
+const postItemsByDate = computed(() => store.getters.getPostItemsByDate);
 </script>
 
 <style scoped></style>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
@@ -43,82 +43,72 @@
   </header>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed, onMounted, onUnmounted, ref } from "vue";
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from "vue";
 import { useRouter } from "vue-router";
-import type { PostIndex } from "@/types/PostIndex";
-import type { PropType } from "vue";
 import { MutationTypes } from "@/store/mutations";
 import { setTheme } from "@/utils/theme";
 import { useStore } from "vuex";
-export default defineComponent({
-  props: {
-    sections: {
-      type: Array as PropType<PostIndex[]>,
-    },
+import type { PostIndex } from "@/types/PostIndex";
+import type { PropType } from "vue";
+
+defineProps({
+  sections: {
+    type: Array as PropType<PostIndex[]>,
   },
-  setup() {
-    const store = useStore();
-    const router = useRouter();
-    const showMenu = ref(false);
-    const header = ref();
-    const navMenuClass = computed(() => (showMenu.value ? "show-menu" : ""));
+});
 
-    const theme = computed(() => (store.state.darkTheme ? "dark" : "light"));
+const store = useStore();
+const router = useRouter();
+const showMenu = ref(false);
+const header = ref();
+const navMenuClass = computed(() => (showMenu.value ? "show-menu" : ""));
 
-    const randomPage = () => {
-      const {
-        state: { postItems },
-      } = store;
+const theme = computed(() => (store.state.darkTheme ? "dark" : "light"));
 
-      const { section, id } =
-        postItems[Math.floor(Math.random() * postItems.length)];
-      router.push(`/${section}/${id}`);
-    };
+const randomPage = () => {
+  const {
+    state: { postItems },
+  } = store;
 
-    const routeTagsPage = () => {
-      router.push(`/tags`);
-    };
+  const { section, id } =
+    postItems[Math.floor(Math.random() * postItems.length)];
+  router.push(`/${section}/${id}`);
+};
 
-    const changeTheme = () => {
-      store.commit(MutationTypes.TOGGLE_THEME);
-      setTheme(theme.value);
-    };
+const routeTagsPage = () => {
+  router.push(`/tags`);
+};
 
-    const linkAction = () => {
-      showMenu.value = false;
-    };
+const changeTheme = () => {
+  store.commit(MutationTypes.TOGGLE_THEME);
+  setTheme(theme.value);
+};
 
-    const toggleMenu = () => {
-      showMenu.value = !showMenu.value;
-    };
+const linkAction = () => {
+  showMenu.value = false;
+};
 
-    const scrollHeader = () => {
-      if (window.scrollY >= 200) header.value.classList.add("scroll-header");
-      else header.value.classList.remove("scroll-header");
-    };
+const toggleMenu = () => {
+  showMenu.value = !showMenu.value;
+};
 
-    onMounted(() => {
-      window.addEventListener("scroll", scrollHeader);
-    });
+const scrollHeader = () => {
+  if (window.scrollY >= 200) header.value.classList.add("scroll-header");
+  else header.value.classList.remove("scroll-header");
+};
 
-    onUnmounted(() => {
-      window.addEventListener("scroll", scrollHeader);
-    });
+onMounted(() => {
+  window.addEventListener("scroll", scrollHeader);
+});
 
-    return {
-      randomPage,
-      routeTagsPage,
-      changeTheme,
-      themeIcon: computed(() => (store.state.darkTheme ? "bx-sun" : "bx-moon")),
-      linkAction,
-      showMenu,
-      navMenuClass,
-      toggleMenu,
-      header,
-    };
-  },
+onUnmounted(() => {
+  window.addEventListener("scroll", scrollHeader);
 });
+
+const themeIcon = computed(() =>
+  store.state.darkTheme ? "bx-sun" : "bx-moon"
+);
 </script>
 
 <style></style>
diff --git a/src/components/PaginationList.vue b/src/components/PaginationList.vue
@@ -18,48 +18,40 @@
   </nav>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { MAX_PAGES, POSTS_PER_PAGE } from "@/constants";
 import { MutationTypes } from "@/store/mutations";
 import type { PostIndex } from "@/types/PostIndex";
-import { defineComponent, computed, ref, type PropType } from "vue";
+import { computed, ref, type PropType } from "vue";
 import { useStore } from "vuex";
 import paginate from "@/utils/paginate";
 
-export default defineComponent({
-  props: {
-    postItems: {
-      type: Object as PropType<PostIndex[]>,
-      required: true,
-    },
+const props = defineProps({
+  postItems: {
+    type: Object as PropType<PostIndex[]>,
+    required: true,
   },
-  setup(props) {
-    const store = useStore();
-    const currentPage = ref(1);
+});
 
-    const pageStatus = computed(() => {
-      const { startIndex, endIndex, pages } = paginate(
-        props.postItems.length,
-        currentPage.value,
-        POSTS_PER_PAGE,
-        MAX_PAGES
-      );
+const store = useStore();
+const currentPage = ref(1);
 
-      store.commit(
-        MutationTypes.SET_VISIBLE_POSTS,
-        props.postItems.slice(startIndex, endIndex + 1)
-      );
+const pageStatus = computed(() => {
+  const { startIndex, endIndex, pages } = paginate(
+    props.postItems.length,
+    currentPage.value,
+    POSTS_PER_PAGE,
+    MAX_PAGES
+  );
 
-      return {
-        pages,
-      };
-    });
+  store.commit(
+    MutationTypes.SET_VISIBLE_POSTS,
+    props.postItems.slice(startIndex, endIndex + 1)
+  );
 
-    return {
-      currentPage,
-      pageStatus,
-    };
-  },
+  return {
+    pages,
+  };
 });
 </script>
 

diff --git a/src/components/PostView.vue b/src/components/PostView.vue
@@ -24,17 +24,14 @@
   </article>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
+<script setup lang="ts">
 import type { PropType } from "vue";
 import type { PostItem } from "@/types/PostItem";
 
-export default defineComponent({
-  props: {
-    postItem: {
-      type: Object as PropType<PostItem>,
-      required: true,
-    },
+defineProps({
+  postItem: {
+    type: Object as PropType<PostItem>,
+    required: true,
   },
 });
 </script>