Merge pull request #80 from yeonjulee1005/develop

🚗 [version: 1.26.0] push to stage
yeonjulee1005 · Jan 3, 2024 · c57c833 · c57c833
2 parents 5939f43 + 9fe01b7
commit c57c833
Show file tree

Hide file tree

Showing 10 changed files with 237 additions and 700 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 
 ## 안녕하세요. FE 개발자 이연주 입니다.
 
-## Current Version: 1.25.0
+## Current Version: 1.26.0
 
 ## 🖥️ 사용한 스킬은 아래와 같습니다.
 
@@ -21,7 +21,7 @@
 9. TypeIt
 10. Vercel
 11. Day.js
-12. Spline
+12. Three.js (Spline)
 
 ## Package manager
 

diff --git a/components/Main/Portfolio.vue b/components/Main/Portfolio.vue
@@ -34,7 +34,13 @@
         class="portfolio-item flex flex-column flex-justify-center flex-align-center"
         @click="navigatePortfolio(item)"
       >
+        <spline-viewer
+          v-if="item.dynamic_thumbnail"
+          class="portfolio-thumb"
+          :url="item.dynamic_thumbnail"
+        />
         <nuxt-img
+          v-else
           class="portfolio-thumb"
           :src="item.image"
           width="200"
@@ -68,7 +74,7 @@ const { selectedPortfolioData } = storeToRefs(usePortfolioStore())
 
 withDefaults(
   defineProps<{
-    portfolioImageData: { orderIndex: {index: number }, title: { ko: string, en: string }, description: { ko: string, en: string }, url: string, image: string, thumbnail: string, alt: string, deleted: boolean }[] | null | undefined,
+    portfolioImageData: { orderIndex: {index: number }, title: { ko: string, en: string }, description: { ko: string, en: string }, url: string, image: string, dynamic_thumbnail:string, thumbnail: string, alt: string, deleted: boolean }[] | null | undefined,
     portfolioTrigger?: boolean
   }>(),
   {

diff --git a/composables/data/skills.ts b/composables/data/skills.ts
@@ -13,9 +13,11 @@ export const useSkillData = () => {
     { title: 'Next.js', percent: 10, emoji: '📖' },
     { title: 'TypeScript', percent: 65, emoji: '💻' },
     { title: 'JavaScript', percent: 80, emoji: '🚀' },
-    { title: 'SASS/SCSS', percent: 80, emoji: '🚀' },
-    { title: 'element-plus', percent: 90, emoji: '🚀' },
-    { title: 'Tailwind CSS', percent: 60, emoji: '🚀' },
+    { title: 'Sass/Scss', percent: 80, emoji: '🚀' },
+    { title: 'Three.js', percent: 60, emoji: '💻' },
+    { title: 'elementPlus', percent: 90, emoji: '🚀' },
+    { title: 'Nuxt-ui', percent: 70, emoji: '🚀' },
+    { title: 'Tailwind', percent: 60, emoji: '🚀' },
     { title: 'HTML5', percent: 90, emoji: '🚀' },
     { title: 'CSS3', percent: 80, emoji: '🚀' },
     { title: 'Swift', percent: 10, emoji: '📖' },

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -18,6 +18,13 @@ export default defineNuxtConfig({
         { property: 'Imagetoolbar', content: 'no' },
         { name: 'naver-site-verification', content: '7c406de71b03c1e444a4fe2630a29bd7a8e17559' }
       ],
+      script: [
+        {
+          hid: 'spline-viewer',
+          src: 'https://unpkg.com/@splinetool/viewer@1.0.17/build/spline-viewer.js',
+          type: 'module'
+        }
+      ],
       link: [
         { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
         { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#5bbad5' },
@@ -159,6 +166,15 @@ export default defineNuxtConfig({
     defaultLocale: 'ko',
     strategy: 'no_prefix'
   },
+  vite: {
+    vue: {
+      template: {
+        compilerOptions: {
+          isCustomElement: tag => tag === 'spline-viewer'
+        }
+      }
+    }
+  },
   pinia: {
     storesDirs: [
       './stores/**'

diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
     "name": "Dewdew",
     "email": "yeonju.lee1005@gmail.com"
   },
-  "version": "1.25.0",
+  "version": "1.26.0",
   "private": true,
   "scripts": {
     "build": "nuxt build",
@@ -19,7 +19,7 @@
     "test": "vitest",
     "upgrade:force": "nuxt upgrade --force",
     "supabase:login": "supabase login",
-    "supabase:type": "supabase gen types typescript --project-id yybbiabxysjnmjpjgvql --schema public > types/supabase.ts"
+    "supabase:type": "supabase gen types typescript --project-id tgtlrqqasaiavynmlxkc --schema public > types/supabase.ts"
   },
   "devDependencies": {
     "@egjs/flicking-plugins": "^4.7.1",
@@ -41,7 +41,6 @@
     "@nuxtjs/supabase": "1.1.4",
     "@pinia-plugin-persistedstate/nuxt": "1.2.0",
     "@pinia/nuxt": "^0.5.1",
-    "@splinetool/runtime": "^1.0.17",
     "@tiptap/core": "^2.1.12",
     "@tiptap/extension-character-count": "^2.1.12",
     "@tiptap/extension-code-block": "^2.1.13",

diff --git a/pages/projects/hhkb.vue b/pages/projects/hhkb.vue
@@ -12,16 +12,16 @@
         :rows="5"
       />
     </div>
-    <canvas
-      ref="hhkbRef"
-      class="hhkb-canvas"
-    />
+    <ClientOnly>
+      <spline-viewer
+        class="hhkb-canvas"
+        :url="splineUrl"
+      />
+    </ClientOnly>
   </div>
 </template>
 
 <script setup lang="ts">
-// @ts-ignore
-import { Application } from '@splinetool/runtime'
 
 const { t } = useLocale()
 
@@ -35,27 +35,6 @@ useHead({
   ]
 })
 
-const hhkbRef = ref(null)
-
-const state = reactive({
-  spline: {
-    scene: 'https://prod.spline.design/drAMoZbfLXDCLqRs/scene.splinecode',
-    app: null,
-    isLoaded: false
-  }
-})
-
-onMounted(async () => {
-  try {
-    const app = new Application(hhkbRef.value, {
-      preload: true
-    })
-    await app.load(state.spline.scene)
-    state.spline.app = app
-    state.spline.isLoaded = true
-  } catch (error) {
-    console.error(error)
-  }
-})
+const splineUrl = 'https://prod.spline.design/piJPNSilaNlBFqN6/scene.splinecode'
 
 </script>
diff --git a/pages/tech/index.vue b/pages/tech/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="tech-lists flex flex-column flex-justify-center flex-align-center">
     <div class="write-button-container flex flex-justify-end">
-      <client-only>
+      <ClientOnly>
         <AButton
           v-if="adminAccess"
           custom-class="write-tech-blog"
@@ -10,7 +10,7 @@
           :button-text="$t('texts.write')"
           @click:button="openCreateArticleDialog"
         />
-      </client-only>
+      </ClientOnly>
     </div>
     <LazyTechCardComponent
       v-for="(item, index) in techData"

diff --git a/server/api/portfolio/index.ts b/server/api/portfolio/index.ts
@@ -5,7 +5,7 @@ export default defineEventHandler(async (event) => {
 
   const { data, error } = await client
     .from('portfolio')
-    .select('orderIndex!inner(index), title(ko, en), description(ko, en), url, image, thumbnail, alt, deleted')
+    .select('orderIndex!inner(index), title(ko, en), description(ko, en), url, image, dynamic_thumbnail, thumbnail, alt, deleted')
     .eq('deleted', false)
     .order('orderIndex(index)', { ascending: true })
 

diff --git a/stores/portfolioData.ts b/stores/portfolioData.ts
@@ -9,8 +9,8 @@ export const usePortfolioStore = defineStore('portfolioData', () => {
    *
    */
 
-  const portfolioData = ref<{ orderIndex: {index: number }, title: { ko: string, en: string}, description: { ko: string, en: string}, url: string, image: string, thumbnail: string, alt: string, deleted: boolean }[] | null>()
-  const selectedPortfolioData = ref<{ orderIndex: {index: number }, title: { ko: string, en: string}, description: { ko: string, en: string}, url: string, image: string, thumbnail: string, alt: string, deleted: boolean } | null>()
+  const portfolioData = ref<{ orderIndex: {index: number }, title: { ko: string, en: string}, description: { ko: string, en: string}, url: string, image: string, dynamic_thumbnail: string, thumbnail: string, alt: string, deleted: boolean }[] | null>()
+  const selectedPortfolioData = ref<{ orderIndex: {index: number }, title: { ko: string, en: string}, description: { ko: string, en: string}, url: string, image: string, dynamic_thumbnail: string, thumbnail: string, alt: string, deleted: boolean } | null>()
 
   return {
     portfolioData,