feat: traQ チャンネルの導線を通す

Author: kitsne241

.env.example

@@ -0,0 +1,3 @@
+# 必要に応じてコピーして使用
+# https://q.trap.jp/channels/ の後ろに続くパスを指定してください
+VITE_CHANNEL_PATH=event/gasshuku/staff

.env.production

@@ -0,0 +1,3 @@
+# 本番環境の設定（vite build 時に読み込まれる）
+# https://q.trap.jp/channels/ の後ろに続くパスを指定してください
+VITE_CHANNEL_PATH=event/gasshuku/staff

.env.staging

@@ -0,0 +1,3 @@
+# ステージング環境の設定（`npm run dev:staging` で読み込まれる）
+# https://q.trap.jp/channels/ の後ろに続くパスを指定してください
+VITE_CHANNEL_PATH=event/gasshuku/staff

.gitignore

@@ -30,6 +30,6 @@ coverage
 
 *.tsbuildinfo
 
-# .env
+.env
 
 dev-dist/

env.d.ts

@@ -1 +1,9 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_CHANNEL_PATH: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

src/views/RollCallView.vue

@@ -48,6 +48,9 @@ onMounted(async () => {
 onBeforeUnmount(() => {
   stop()
 })
+
+// traQ チャンネルの URL（環境変数からパスを参照）
+const channelUrl = computed(() => `https://q.trap.jp/channels/${import.meta.env.VITE_CHANNEL_PATH}`)
 </script>
 
 <template>
@@ -68,7 +71,13 @@ onBeforeUnmount(() => {
         />
       </div>
       <div class="d-flex justify-center mt-2">
-        <v-btn variant="flat" :class="$style.shadow">
+        <v-btn
+          variant="flat"
+          :class="$style.shadow"
+          :href="channelUrl"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           <div class="d-flex align-center">
             <img src="/src/assets/traq.svg" alt="traQ" height="20" class="mr-1" />
             <div :class="$style.buttonText">traQ で連絡する</div>