Merge pull request #49 from yeonjulee1005/stage

🚎 [version: 1.13.0] push to master
yeonjulee1005 · Dec 16, 2023 · 2ad2944 · 2ad2944
2 parents a9ca4ea + c5a5d51
commit 2ad2944
Show file tree

Hide file tree

Showing 12 changed files with 207 additions and 119 deletions.
diff --git a/components/molecules/main/MainPortfolio.vue b/components/molecules/main/MainPortfolio.vue
@@ -38,7 +38,11 @@
         </div>
       </div>
     </div>
-    <div class="portfolio-background" />
+    <div
+      v-for="item in 2"
+      :key="item"
+      class="portfolio-background"
+    />
     <PortfolioDialog
       :dialog-trigger="portfolioDialogTrigger"
       :select-portfolio="selectPortfolio"

diff --git a/composables/fetch/loadData.ts b/composables/fetch/loadData.ts
@@ -2,122 +2,55 @@ export const useLoadComposable = () => {
   /**
    * ! Load Data !
    */
-  const client = useSupabaseClient()
 
   const { mainIntroTitle, mainIntroText, mainIntroScrollText, mainResumeTitle, mainEducatedText, mainCareerText, mainSkillTitle, mainSkillFirstText, mainSkillSecondText, mainSkillThirdText, mainPortfolioTitle, mainPortfolioText, mainPortfolioBackground } = storeToRefs(useMainStore())
   const { mainMenuData, subMenuData, socialMenuData } = storeToRefs(useMenuStore())
 
   const { stackLogoData } = storeToRefs(useStackStore())
   const { portfolioData } = storeToRefs(usePortfolioStore())
 
-  const loadMenuData = (menuType:string) => {
-    const { data } = useAsyncData(`menuData${menuType}`, async () => {
-      const { data, error } = await client
-        .from('pageMenu')
-        .select('orderIndex!inner(index), title, icon, menu_type, url, image_url, deleted')
-        .eq('menu_type', menuType)
-        .eq('deleted', false)
-        .order('orderIndex(index)', { ascending: true })
-
-      if (error) {
-        throw createError({ statusMessage: error.message })
-      }
-
-      return data
+  const loadMenuData = async (menuType:string) => {
+    const { data }: SerializeObject = await useFetch('/api/menu', {
+      headers: useRequestHeaders(['cookie']),
+      params: {
+        menuType
+      },
+      immediate: true
     })
 
     replaceMenuData(data.value, menuType)
   }
 
-  const loadMainData = () => {
-    const { data } = useAsyncData('mainData', async () => {
-      const { data, error } = await client
-        .from('main')
-        .select('orderIndex!inner(index), text_type, category, textTitle(ko, en), textDescription(ko, en)), deleted')
-        .eq('deleted', false)
-        .order('orderIndex(index)', { ascending: true })
-
-      if (error) {
-        throw createError({ statusMessage: error.message })
-      }
-
-      return data
-    }, { immediate: true })
-
-    if (!data.value) { return }
-
-    const introData = data.value.filter((item: SerializeObject) => item.category === 'intro')
-    const resumeData = data.value.filter((item: SerializeObject) => item.category === 'resume')
-    const skillData = data.value.filter((item: SerializeObject) => item.category === 'skills')
-    const referenceData = data.value.filter((item: SerializeObject) => item.category === 'reference')
-
-    mainIntroTitle.value = introData.filter((item: SerializeObject) => item.text_type === 'title')[0]
-    mainIntroText.value = introData.filter((item: SerializeObject) => item.text_type === 'main')
-    mainIntroScrollText.value = introData.filter((item: SerializeObject) => item.text_type === 'scroll')[0]
-
-    mainResumeTitle.value = resumeData.filter((item: SerializeObject) => item.text_type === 'title')[0]
-    mainEducatedText.value = resumeData.filter((item: SerializeObject) => item.text_type === 'educate')[0]
-    mainCareerText.value = resumeData.filter((item: SerializeObject) => item.text_type === 'career')
-
-    mainSkillTitle.value = skillData.filter((item: SerializeObject) => item.text_type === 'title')
-    mainSkillFirstText.value = skillData.filter((item: SerializeObject) => item.text_type === 'first')
-    mainSkillSecondText.value = skillData.filter((item: SerializeObject) => item.text_type === 'second')
-    mainSkillThirdText.value = skillData.filter((item: SerializeObject) => item.text_type === 'third')
-
-    mainPortfolioTitle.value = referenceData.filter((item: SerializeObject) => item.text_type === 'title')[0]
-    mainPortfolioText.value = referenceData.filter((item: SerializeObject) => item.text_type === 'desc')[0]
-    mainPortfolioBackground.value = referenceData.filter((item: SerializeObject) => item.text_type === 'background')[0]
-  }
-
-  const loadTechBlogCommentData = (techBlogId:string) => {
-    const { data, refresh }:SerializeObject = useAsyncData('blogCommentData', async () => {
-      const { data, error } = await client
-        .from('techComment')
-        .select('id, tech_id, message, name, password, deleted, created_at, updated_at')
-        .eq('tech_id', techBlogId)
-        .eq('deleted', false)
-        .order('created_at', { ascending: false })
-
-      if (error) {
-        throw createError({ statusMessage: error.message })
-      }
-
-      return data
+  const loadMainData = async () => {
+    const { data }: SerializeObject = await useFetch('/api/main', {
+      headers: useRequestHeaders(['cookie']),
+      immediate: true
     })
-    return { data, refresh }
-  }
 
-  const loadStackData = () => {
-    const { data } = useAsyncData('loadStackData', async () => {
-      const { data, error } = await client
-        .from('stackLogo')
-        .select('orderIndex!inner(index), title, url, deleted')
-        .eq('deleted', false)
-        .order('orderIndex(index)', { ascending: true })
+    const introData = mainResponse(data.value, 'intro')
+    const resumeData = mainResponse(data.value, 'resume')
+    const skillData = mainResponse(data.value, 'skills')
+    const referenceData = mainResponse(data.value, 'reference')
 
-      if (error) {
-        throw createError({ statusMessage: error.message })
-      }
+    mainIntro(introData)
+    mainResume(resumeData)
+    mainSkill(skillData)
+    mainPortfolio(referenceData)
+  }
 
-      return data
+  const loadStackData = async () => {
+    const { data }: SerializeObject = await useFetch('/api/stack', {
+      headers: useRequestHeaders(['cookie']),
+      immediate: true
     })
 
     stackLogoData.value = data.value
   }
 
-  const loadPortfolioData = () => {
-    const { data } = useAsyncData('loadPortfolioData', async () => {
-      const { data, error } = await client
-        .from('portfolio')
-        .select('orderIndex!inner(index), title, desc, url, image, thumbnail, alt, deleted')
-        .eq('deleted', false)
-        .order('orderIndex(index)', { ascending: true })
-
-      if (error) {
-        throw createError({ statusMessage: error.message })
-      }
-
-      return data
+  const loadPortfolioData = async () => {
+    const { data }: SerializeObject = await useFetch('/api/portfolio', {
+      headers: useRequestHeaders(['cookie']),
+      immediate: true
     })
 
     portfolioData.value = data.value
@@ -137,10 +70,44 @@ export const useLoadComposable = () => {
     }
   }
 
+  const mainResponse = (rawData: SerializeObject, category: string) => {
+    return rawData.filter((item: SerializeObject) => item.category === category)
+  }
+
+  const mainSubResponse = (rawData: SerializeObject, subCategory: string, single: boolean) => {
+    return single
+      ? rawData.filter((item: SerializeObject) => item.text_type === subCategory)[0]
+      : rawData.filter((item: SerializeObject) => item.text_type === subCategory)
+  }
+
+  const mainIntro = (introData: SerializeObject) => {
+    mainIntroTitle.value = mainSubResponse(introData, 'title', true)
+    mainIntroText.value = mainSubResponse(introData, 'main', false)
+    mainIntroScrollText.value = mainSubResponse(introData, 'scroll', true)
+  }
+
+  const mainResume = (resumeData: SerializeObject) => {
+    mainResumeTitle.value = mainSubResponse(resumeData, 'title', true)
+    mainEducatedText.value = mainSubResponse(resumeData, 'educate', true)
+    mainCareerText.value = mainSubResponse(resumeData, 'career', false)
+  }
+
+  const mainSkill = (skillData: SerializeObject) => {
+    mainSkillTitle.value = mainSubResponse(skillData, 'title', false)
+    mainSkillFirstText.value = mainSubResponse(skillData, 'first', false)
+    mainSkillSecondText.value = mainSubResponse(skillData, 'second', false)
+    mainSkillThirdText.value = mainSubResponse(skillData, 'third', false)
+  }
+
+  const mainPortfolio = (referenceData: SerializeObject) => {
+    mainPortfolioTitle.value = mainSubResponse(referenceData, 'title', true)
+    mainPortfolioText.value = mainSubResponse(referenceData, 'desc', true)
+    mainPortfolioBackground.value = mainSubResponse(referenceData, 'background', true)
+  }
+
   return {
     loadMenuData,
     loadMainData,
-    loadTechBlogCommentData,
     loadStackData,
     loadPortfolioData
   }

diff --git a/package.json b/package.json
@@ -4,14 +4,15 @@
     "name": "Dewdew",
     "email": "yeonju.lee1005@gmail.com"
   },
-  "version": "1.12.0",
+  "version": "1.13.0",
   "private": true,
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port 4500",
     "dev:host": "nuxt dev --port 4500 --host",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
+    "analyze": "nuxt analyze",
     "postinstall": "nuxt prepare",
     "cleanup": "nuxt cleanup",
     "lint": "eslint --ext .ts,.js,.vue",

diff --git a/pages/archives/[year].vue b/pages/archives/[year].vue
@@ -41,7 +41,6 @@ useHead({
 })
 
 definePageMeta({
-  pageTransition: false,
   layout: 'default'
 })
 

diff --git a/pages/tech/[id].vue b/pages/tech/[id].vue
@@ -47,7 +47,7 @@ const { y } = useWindowScroll()
 
 const { t } = useLocale()
 
-const { loadTechBlogCommentData } = useLoadComposable()
+// const { loadTechBlogCommentData } = useLoadComposable()
 
 const { clickedTechArticle, adminAccess } = storeToRefs(useTechStore())
 
@@ -58,8 +58,6 @@ const techId = computed(() => {
   return params.id as string
 })
 
-const { data: techCommentData, refresh: techCommentRefresh }:SerializeObject = loadTechBlogCommentData(techId.value)
-
 const techBlogLikeTrigger = ref(false)
 const displayFloatButtonTrigger = ref(false)
 const editTrigger = ref(false)
@@ -81,6 +79,14 @@ const { data: techDetailData, refresh: techRefresh } = useAsyncData('blogDetailD
   immediate: true
 })
 
+const { data: techCommentData, refresh: techCommentRefresh }: SerializeObject = await useFetch('/api/tech/comment', {
+  headers: useRequestHeaders(['cookie']),
+  query: {
+    techBlogId: techId.value
+  },
+  immediate: true
+})
+
 const updateData = ref<SerializeObject>({
   ...techDetailData.value
 })

diff --git a/pages/tech/index.vue b/pages/tech/index.vue
@@ -77,23 +77,16 @@ const currentPageSize = ref(2)
 
 const createArticleTrigger = ref(false)
 
-const supabasePageCalc = (page:number, pageCount:number, firstRange:boolean): number => {
-  return firstRange
-    ? (page - 1) * pageCount
-    : (page * pageCount) - 1
-}
-
 const { data: techData, refresh: techRefresh } = useAsyncData('techData', async () => {
-  const { data, error } = await client
-    .from('tech')
-    .select('id, title, desc, raw_article, like, update_user_id, created_at, updated_at, deleted')
-    .eq('deleted', false)
-    .order('created_at', { ascending: false })
-    .range(supabasePageCalc(currentPage.value, currentPageSize.value, true), supabasePageCalc(currentPage.value, currentPageSize.value, false))
-
-  if (error) {
-    throw createError({ statusMessage: error.message })
-  }
+  const { data }: SerializeObject = await useFetch('/api/tech', {
+    headers: useRequestHeaders(['cookie']),
+    query: {
+      page: currentPage.value,
+      pageCount: currentPageSize.value
+    },
+    immediate: true,
+    watch: [currentPage, currentPageSize]
+  })
 
   const { count, error: countError } = await client
     .from('tech')
@@ -103,7 +96,7 @@ const { data: techData, refresh: techRefresh } = useAsyncData('techData', async
     throw createError({ statusMessage: countError.message })
   }
 
-  return { article: data, count }
+  return { article: data.value, count }
 }, {
   watch: [currentPage, currentPageSize]
 })

diff --git a/server/api/main/index.ts b/server/api/main/index.ts
@@ -0,0 +1,17 @@
+import { serverSupabaseClient } from '#supabase/server'
+
+export default defineEventHandler(async (event) => {
+  const client = await serverSupabaseClient<SupabaseDataBase>(event)
+
+  const { data, error } = await client
+    .from('main')
+    .select('orderIndex!inner(index), text_type, category, textTitle(ko, en), textDescription(ko, en)), deleted')
+    .eq('deleted', false)
+    .order('orderIndex(index)', { ascending: true })
+
+  if (error) {
+    throw createError({ statusMessage: error.message })
+  }
+
+  return data
+})
diff --git a/server/api/menu/index.ts b/server/api/menu/index.ts
@@ -0,0 +1,20 @@
+import { serverSupabaseClient } from '#supabase/server'
+
+export default defineEventHandler(async (event) => {
+  const client = await serverSupabaseClient<SupabaseDataBase>(event)
+
+  const query = getQuery(event)
+
+  const { data, error } = await client
+    .from('pageMenu')
+    .select('orderIndex!inner(index), title, icon, menu_type, url, image_url, deleted')
+    .eq('menu_type', query.menuType)
+    .eq('deleted', false)
+    .order('orderIndex(index)', { ascending: true })
+
+  if (error) {
+    throw createError({ statusMessage: error.message })
+  }
+
+  return data
+})
diff --git a/server/api/portfolio/index.ts b/server/api/portfolio/index.ts
@@ -0,0 +1,17 @@
+import { serverSupabaseClient } from '#supabase/server'
+
+export default defineEventHandler(async (event) => {
+  const client = await serverSupabaseClient<SupabaseDataBase>(event)
+
+  const { data, error } = await client
+    .from('portfolio')
+    .select('orderIndex!inner(index), title, desc, url, image, thumbnail, alt, deleted')
+    .eq('deleted', false)
+    .order('orderIndex(index)', { ascending: true })
+
+  if (error) {
+    throw createError({ statusMessage: error.message })
+  }
+
+  return data
+})
diff --git a/server/api/stack/index.ts b/server/api/stack/index.ts
@@ -0,0 +1,17 @@
+import { serverSupabaseClient } from '#supabase/server'
+
+export default defineEventHandler(async (event) => {
+  const client = await serverSupabaseClient<SupabaseDataBase>(event)
+
+  const { data, error } = await client
+    .from('stackLogo')
+    .select('orderIndex!inner(index), title, url, deleted')
+    .eq('deleted', false)
+    .order('orderIndex(index)', { ascending: true })
+
+  if (error) {
+    throw createError({ statusMessage: error.message })
+  }
+
+  return data
+})