Merge pull request #6 from Dev-KNU/develop

Develop

.eslintrc.cjs

@@ -11,5 +11,8 @@ module.exports = {
   ],
   parserOptions: {
     ecmaVersion: 'latest'
+  },
+  "rules": {
+    "vue/multi-word-component-names": "off"
   }
 }

.github/workflows/eslint.yml

@@ -0,0 +1,29 @@
+name: eslint
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+  lint:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x, 20.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          ref: ${{ github.head_ref }}
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - run: npm ci
+      - run: npm run lint

.github/workflows/formatting.yml

@@ -0,0 +1,23 @@
+name: Formatting
+on:
+  pull_request:
+    branches: [main]
+jobs:
+  format:
+    permissions:
+      contents: write
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "20.x"
+      - run: npm ci
+      - run: npm run format
+      - name: Commit changes
+        uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+          commit_message: Apply formatting changes
+          branch: ${{ github.head_ref }}

package.json

@@ -17,7 +17,9 @@
     "bootstrap": "^5.3.2",
     "bootstrap-vue-next": "^0.15.5",
     "pretendard": "^1.3.9",
-    "vue": "^3.3.11"
+    "vue": "^3.3.11",
+    "vue-gtag": "^2.0.1",
+    "vue-gtag-next": "^1.14.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
@@ -38,6 +40,6 @@
     "sass-loader": "^14.0.0",
     "typescript": "~5.3.0",
     "vite": "^5.0.10",
-    "vue-tsc": "^1.8.25"
+    "vue-tsc": "^1.8.27"
   }
 }

src/App.vue

@@ -11,7 +11,7 @@ import Background from '@/components/Background.vue'
 <template>
     <Background />
     <NavbarHeader />
-    <div class='wrapper'>
+    <div class="wrapper">
         <MainTitle />
         <Information />
         <Speaker />

src/assets/base.scss

@@ -1,4 +1,4 @@
-@import "color";
+@import 'color';
 
 *,
 *::before,
@@ -12,21 +12,23 @@ body {
     min-height: 100vh;
     color: $color-text-100;
     background: $color-background;
-    transition: color 0.5s,
-    background-color 0.5s;
+    transition:
+        color 0.5s,
+        background-color 0.5s;
     line-height: 1.6;
-    font-family: Inter,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    'Fira Sans',
-    'Droid Sans',
-    'Helvetica Neue',
-    sans-serif;
+    font-family:
+        Inter,
+        -apple-system,
+        BlinkMacSystemFont,
+        'Segoe UI',
+        Roboto,
+        Oxygen,
+        Ubuntu,
+        Cantarell,
+        'Fira Sans',
+        'Droid Sans',
+        'Helvetica Neue',
+        sans-serif;
     font-size: 15px;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;

src/assets/color.scss

@@ -20,12 +20,12 @@ $vt-c-text-dark-1: var(--vt-c-white);
 $vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
 
 /* semantic color variables for this project */
-$color-primary-100: #5BAEEA;
-$color-secondary-100: #4DD773;
-$color-black: #3A3D3F;
-$color-gray-100: #DBDFE2;
-$color-white: #FFFFFF;
+$color-primary-100: #5baeea;
+$color-secondary-100: #4dd773;
+$color-black: #3a3d3f;
+$color-gray-100: #dbdfe2;
+$color-white: #ffffff;
 
 $color-background: $color-black;
 $color-text-100: $color-white;
-$color-text-200: $color-gray-100;
+$color-text-200: $color-gray-100;

src/components/Background.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import Python from '@/assets/image/python_logo.png'
 import Figma from '@/assets/image/figma_logo.png'
 import Github from '@/assets/image/github_logo.png'
@@ -21,41 +21,57 @@ import { BackgroundIconItem } from '@/types/BackgroundIconItem'
 
 const backgroundIconItems = [
     // Opacity = True
-    (new BackgroundIconItem(Python, true)).setPositionLeft(20.85, 221.67),
-    (new BackgroundIconItem(Figma, true)).setPositionRight(6, 223.64),
-    (new BackgroundIconItem(Github, true)).setPositionLeft(135.25, -62.75),
-    (new BackgroundIconItem(Npm, true)).setPositionRight(142.35, 0),
-    (new BackgroundIconItem(Swift, true)).setPositionLeft(496, -40),
-    (new BackgroundIconItem(Android, true)).setPositionRight(397, 0),
+    new BackgroundIconItem(Python, true).setPositionLeft(20.85, 221.67),
+    new BackgroundIconItem(Figma, true).setPositionRight(6, 223.64),
+    new BackgroundIconItem(Github, true).setPositionLeft(135.25, -62.75),
+    new BackgroundIconItem(Npm, true).setPositionRight(142.35, 0),
+    new BackgroundIconItem(Swift, true).setPositionLeft(496, -40),
+    new BackgroundIconItem(Android, true).setPositionRight(397, 0),
 
-    (new BackgroundIconItem(Jabascript, true)).setPositionRight(599.44, 154.77),
-    (new BackgroundIconItem(InteliJ, true)).setPositionLeft(332.42, 222.42),
-    (new BackgroundIconItem(Unity, true)).setPositionRight(278.62, 133.04),
+    new BackgroundIconItem(Jabascript, true).setPositionRight(599.44, 154.77),
+    new BackgroundIconItem(InteliJ, true).setPositionLeft(332.42, 222.42),
+    new BackgroundIconItem(Unity, true).setPositionRight(278.62, 133.04),
 
     // Opacity = False
-    (new BackgroundIconItem(Discord, false)).setPositionRight(868, 217),
-    (new BackgroundIconItem(Gpt, false)).setPositionLeft(1201, 35),
-    (new BackgroundIconItem(Terminal, false)).setPositionRight(1151, 0),
-    (new BackgroundIconItem(Notepad, false)).setPositionRight(1680.36, 151.47),
-    (new BackgroundIconItem(Xcode, false)).setPositionLeft(2092, 211),
-    (new BackgroundIconItem(Apple, false)).setPositionRight(2200, 203.16),
-
+    new BackgroundIconItem(Discord, false).setPositionRight(868, 217),
+    new BackgroundIconItem(Gpt, false).setPositionLeft(1201, 35),
+    new BackgroundIconItem(Terminal, false).setPositionRight(1151, 0),
+    new BackgroundIconItem(Notepad, false).setPositionRight(1680.36, 151.47),
+    new BackgroundIconItem(Xcode, false).setPositionLeft(2092, 211),
+    new BackgroundIconItem(Apple, false).setPositionRight(2200, 203.16)
 ]
-
 </script>
 
 <template>
     <div class="backgrounds">
-        <div class='background-main' v-for='(item, index) in backgroundIconItems.filter(i => i.opacity)'>
-            <BackgroundIcon v-bind:key='index' :icon='item.icon' :left='item.left' :right='item.right' :top='item.top' />
+        <div
+            v-for="(item, index) in backgroundIconItems.filter((i) => i.opacity)"
+            :key="index"
+            class="background-main"
+        >
+            <BackgroundIcon
+                :icon="item.icon"
+                :left="item.left"
+                :right="item.right"
+                :top="item.top"
+            />
         </div>
-        <div class='other' v-for='(item, index) in backgroundIconItems.filter(i => !i.opacity)'>
-            <BackgroundIcon v-bind:key='index' :icon='item.icon' :left='item.left' :right='item.right' :top='item.top' />
+        <div
+            v-for="(item, index) in backgroundIconItems.filter((i) => !i.opacity)"
+            :key="index"
+            class="other"
+        >
+            <BackgroundIcon
+                :icon="item.icon"
+                :left="item.left"
+                :right="item.right"
+                :top="item.top"
+            />
         </div>
     </div>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .backgrounds {
     .background-main {
         opacity: 0.5;
@@ -66,4 +82,4 @@ const backgroundIconItems = [
         position: absolute;
     }
 }
-</style>
+</style>