Merge pull request #76 from yeonjulee1005/develop

🚗 [version: 1.24.0] push to stage

.vscode/settings.json

@@ -60,6 +60,7 @@
     "slider",
     "slides",
     "social",
+    "splinetool",
     "stylelint",
     "subtitle",
     "successfully",

README.md

@@ -4,7 +4,7 @@
 
 ## 안녕하세요. FE 개발자 이연주 입니다.
 
-## Current Version: 1.23.0
+## Current Version: 1.24.0
 
 ## 🖥️ 사용한 스킬은 아래와 같습니다.
 
@@ -21,6 +21,7 @@
 9. TypeIt
 10. Vercel
 11. Day.js
+12. Spline
 
 ## Package manager
 

assets/scss/shared/pages/hhkb.scss

@@ -0,0 +1,29 @@
+@use '../../variables' as *;
+
+/**
+* ! HHKB Page Style !
+*a
+* ? Shared ?
+*/
+.hhkb {
+  position: relative;
+  max-width: $space-1000;
+  width: $space-80vw;
+  margin: 0 auto;
+  overflow: clip;
+  .hhkb-title {
+    padding: $space-160 $space-20 $space-20;
+    @include headline2;
+  }
+  .hhkb-input {
+    padding: 0 $space-20;
+  }
+  .hhkb-canvas {
+    width: calc($space-percent-100 - 40px) !important;
+    height: $space-50vh !important;
+    margin: $space-20 auto $space-100;
+    overflow: clip;
+    border: $space-2 solid var(--d-yellow-color);
+    border-radius: $space-8;
+  }
+}

assets/scss/shared/pages/tech_list.scss

@@ -8,15 +8,17 @@
 .tech-lists {
   position: relative;
   width: $space-100vw;
-  overflow-x: hidden;
+  overflow: clip;
   .write-button-container {
     width: $space-80vw;
+    max-width: $space-1000;
     margin-top: $space-100;
-    overflow-y: auto;
+    overflow-y: clip;
   }
   .tech-card {
     max-height: $space-60vh;
     width: $space-80vw;
+    max-width: $space-1000;
     cursor: pointer;
     .title {
       @include headline4;

assets/scss/shared/share_combine.scss

@@ -27,6 +27,7 @@
 @forward './pages/main';
 @forward './pages/portfolio';
 @forward './pages/projects';
+@forward './pages/hhkb';
 @forward './pages/color_translate';
 @forward './pages/tech_list';
 @forward './pages/tech_detail';

package.json

@@ -4,7 +4,7 @@
     "name": "Dewdew",
     "email": "yeonju.lee1005@gmail.com"
   },
-  "version": "1.23.0",
+  "version": "1.24.0",
   "private": true,
   "scripts": {
     "build": "nuxt build",
@@ -41,6 +41,7 @@
     "@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",

pages/projects/hhkb.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="hhkb h-full">
+    <p class="hhkb-title">
+      HHKB Keyboard
+    </p>
+    <div class="hhkb-input">
+      <DDTextarea
+        padded
+        color="violet"
+        size="lg"
+        placeholder="영어로 작성하거나 마우스로 키보드를 클릭하면, 아래의 3D 모델링된 hhkb 키보드가 동작합니다."
+        :rows="5"
+      />
+    </div>
+    <canvas
+      ref="hhkbRef"
+      class="hhkb-canvas"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+// @ts-ignore
+import { Application } from '@splinetool/runtime'
+
+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)
+  }
+})
+
+</script>

tsconfig.json

@@ -2,7 +2,9 @@
   // https://nuxt.com/docs/guide/concepts/typescript
   "extends": "./.nuxt/tsconfig.json",
   "compilerOptions": {
+    "moduleResolution": "node",
     "types": [
+      "@splinetool/runtime"
     ]
   }
 }