From d9e16e430cf3f1cac91fd7fa136f70a3b1aa9ff0 Mon Sep 17 00:00:00 2001
From: gunyu1019 <gunyu1019@gmail.com>
Date: Fri, 16 Feb 2024 16:27:19 +0900
Subject: [PATCH 01/10] [Feat] Add ticket icon at ticket button

---
 src/components/TicketButton.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/TicketButton.vue b/src/components/TicketButton.vue
index f1a007d..f610b19 100644
--- a/src/components/TicketButton.vue
+++ b/src/components/TicketButton.vue
@@ -1,6 +1,11 @@
+<script lang='ts' setup>
+import ticket_icon from '@/assets/image/ticket.svg'
+</script>
+
 <template>
     <a href="https://event-us.kr/gwdc24/event/77961" class="ticket-button">
-        <span class="ticket-button-text">티켓 구입하기</span>
+        <span class="ticket-button-text">입장 티켓 구매하기</span>
+        <img :src='ticket_icon' alt='ticket-icon' />
     </a>
 </template>
 

From a5188fba63bad04044d09ce9663ad22c12c80f9c Mon Sep 17 00:00:00 2001
From: gunyu1019 <gunyu1019@gmail.com>
Date: Fri, 16 Feb 2024 16:27:33 +0900
Subject: [PATCH 02/10] [Feat] Add 'position: fixed' at navbar

---
 src/components/NavbarHeader.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/NavbarHeader.vue b/src/components/NavbarHeader.vue
index dc5a6b1..65159bd 100644
--- a/src/components/NavbarHeader.vue
+++ b/src/components/NavbarHeader.vue
@@ -25,6 +25,9 @@ $color-backgroun-navbar: rgba($color-white, 0.1);
     z-index: 10;
     width: 100%;
 
+    position: fixed;
+    top: 0;
+
     backdrop-filter: blur(10px);
     background: $color-backgroun-navbar;
 }

From 3dfdfc884b647046438b443fe8ea32536b1b5840 Mon Sep 17 00:00:00 2001
From: gunyu1019 <gunyu1019@gmail.com>
Date: Fri, 16 Feb 2024 16:28:32 +0900
Subject: [PATCH 03/10] [Feat] In PC, integrate Information component into
 MainTitle component.

---
 src/App.vue                    |  2 -
 src/components/Information.vue | 70 ++++++++++++++++++++++++++++++++--
 src/components/MainTitle.vue   | 46 ++++++++++++++++++++--
 3 files changed, 110 insertions(+), 8 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 17b3a6f..e7e2e84 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import NavbarHeader from '@/components/NavbarHeader.vue'
 import MainTitle from '@/components/MainTitle.vue'
-import Information from '@/components/Information.vue'
 import Speaker from '@/components/Speaker.vue'
 import Motive from '@/components/Motive.vue'
 import Footer from '@/components/Footer.vue'
@@ -13,7 +12,6 @@ import Background from '@/components/Background.vue'
     <NavbarHeader />
     <div class="wrapper">
         <MainTitle />
-        <Information />
         <Speaker />
         <Motive />
     </div>
diff --git a/src/components/Information.vue b/src/components/Information.vue
index b763d1d..e898b9e 100644
--- a/src/components/Information.vue
+++ b/src/components/Information.vue
@@ -1,12 +1,36 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import TicketButton from '@/components/TicketButton.vue'
+
+const conferenceInfo = {
+    'date': new Date(2024, 3, 9, 13),
+    'location1': "강원특별자치도 춘천시 강원대학길 1 (강원대학교)",
+    'location2': "강원대학교 춘천캠퍼스",
+    'location3': '60주년기념관 국제회의실(1F)'
+}
 </script>
 
 <template>
-    <div class="information">
+    <!-- <div class="information">
         <TicketButton />
         <span>2024년 3월 9일 토요일</span>
         <span class="highlighter">강원대학교 춘천캠퍼스<br />60주년기념관 국제회의실</span>
+    </div> -->
+    <div class='information'>
+        <h2>강원도 유일의<br/>개발 컨퍼런스</h2>
+        <div>
+            <span>
+
+            {{ conferenceInfo.location2 }}<br/>
+            {{ conferenceInfo.location3 }}<br/>
+            </span>
+            <span>
+
+            {{ conferenceInfo.date.getFullYear() }}.
+            {{ conferenceInfo.date.getMonth() }}.
+            {{ conferenceInfo.date.getDate() }}<br/>
+            </span>
+        </div>
+        <ticket-button />
     </div>
 </template>
 
@@ -15,6 +39,46 @@ import TicketButton from '@/components/TicketButton.vue'
 @import 'pretendard/dist/web/static/pretendard.css';
 
 div.information {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 64px;
+
+    span, a, h2 {
+        color: $color-text-200;
+        font-family:
+            'Pretendard',
+            -apple-system,
+            BlinkMacSystemFont,
+            system-ui,
+            Roboto,
+            'Helvetica Neue',
+            'Segoe UI',
+            'Apple SD Gothic Neo',
+            'Noto Sans KR',
+            'Malgun Gothic',
+            sans-serif;
+        font-style: normal;
+        line-height: normal;
+        text-decoration: none;
+    }
+
+    h2 {
+        color: $color-text-100;
+        font-size: 48px;
+        font-weight: 700;
+    }
+
+    span {
+        display: block;
+        color: $color-text-200;
+        font-size: 24px;
+        font-weight: 500;
+        letter-spacing: 0.48px;
+    }
+}
+
+/* div.information {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -55,5 +119,5 @@ div.information {
         color: $vt-c-white;
         font-size: 32px;
     }
-}
+} */
 </style>
diff --git a/src/components/MainTitle.vue b/src/components/MainTitle.vue
index f1bf4d8..11731a8 100644
--- a/src/components/MainTitle.vue
+++ b/src/components/MainTitle.vue
@@ -1,11 +1,20 @@
 <script lang="ts" setup>
 import Logo from '@/assets/image/GWDC24.png'
+import Information from '@/components/Information.vue'
 </script>
 
 <template>
-    <div class="main">
+    <!-- <div class="main">
         <img :src="Logo" alt="logo" class="logo" />
         <span class="main-title">강원도 유일의 개발 컨퍼런스, GWDC24가 곧 찾아옵니다.</span>
+    </div> -->
+    <div class="main-container">
+        <div class="main">
+            <div class="logo">
+                <img :src="Logo" alt="logo" class="logo-image" />
+            </div>
+            <Information />
+        </div>
     </div>
 </template>
 
@@ -13,7 +22,38 @@ import Logo from '@/assets/image/GWDC24.png'
 @import '@/assets/color';
 @import 'pretendard/dist/web/static/pretendard.css';
 
-div.main {
+div.main-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    z-index: 5;
+    height: 100vh;
+
+    div.main {
+        @media screen and (min-width: 900px) {
+            display: flex;
+            justify-content: center;
+            align-items: end;
+            gap: 88px;
+        }
+
+        div.logo {
+            width: 400px;
+            height: 499px;
+
+            img.logo-image {
+                top: -219px;
+                left: -215px;
+                position: relative;
+                //transform: rotate(2.347deg);
+                //filter: drop-shadow(0.563px 0.563px 240px rgba(255, 255, 255, 0.32)) drop-shadow(18px 27px 128px rgba(136, 196, 240, 0.16)) drop-shadow(-24px -24px 128px rgba(255, 94, 94, 0.16));
+            }
+        }
+    }
+}
+
+/* div.main {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -51,5 +91,5 @@ div.main {
         position: absolute;
         bottom: 0;
     }
-}
+} */
 </style>

From efa135212f7686611792078ac3a8b5fc8d2e9074 Mon Sep 17 00:00:00 2001
From: gunyu1019 <gunyu1019@gmail.com>
Date: Fri, 16 Feb 2024 18:31:56 +0900
Subject: [PATCH 04/10] [Feat] Add relative website

---
 src/assets/variable.scss          |  6 ++++
 src/components/BackgroundIcon.vue |  2 +-
 src/components/Information.vue    |  6 ++++
 src/components/MainTitle.vue      | 52 +++++++++++++++++++++++--------
 4 files changed, 52 insertions(+), 14 deletions(-)
 create mode 100644 src/assets/variable.scss

diff --git a/src/assets/variable.scss b/src/assets/variable.scss
new file mode 100644
index 0000000..2dab88d
--- /dev/null
+++ b/src/assets/variable.scss
@@ -0,0 +1,6 @@
+$breakpoint-mobile-to-pc: 980px;
+
+$image-original-size-width: 829px;
+$image-original-size-height: 937px;
+$image-cut-in-size-width: 400px;
+$image-cut-in-size-height: 499px;
\ No newline at end of file
diff --git a/src/components/BackgroundIcon.vue b/src/components/BackgroundIcon.vue
index 378fe3e..25cf527 100644
--- a/src/components/BackgroundIcon.vue
+++ b/src/components/BackgroundIcon.vue
@@ -12,7 +12,7 @@ const props = defineProps<{
 const imageTarget: Ref<HTMLElement | null> = ref(null)
 const imageTargetCover: Ref<HTMLElement | null> = ref(null)
 const onResized = () => {
-    const pageWidth = window.innerWidth
+    const pageWidth = window.outerWidth
     const imageWidth: number | undefined = imageTarget.value?.clientWidth
     const finalWidth = props.left && imageWidth ? props.left + imageWidth - pageWidth : -1
     // console.log(props.icon)
diff --git a/src/components/Information.vue b/src/components/Information.vue
index e898b9e..5dee69d 100644
--- a/src/components/Information.vue
+++ b/src/components/Information.vue
@@ -36,6 +36,7 @@ const conferenceInfo = {
 
 <style lang="scss" scoped>
 @import '@/assets/color';
+@import "@/assets/variable";
 @import 'pretendard/dist/web/static/pretendard.css';
 
 div.information {
@@ -43,6 +44,7 @@ div.information {
     flex-direction: column;
     justify-content: center;
     gap: 64px;
+    z-index: 3;
 
     span, a, h2 {
         color: $color-text-200;
@@ -67,6 +69,10 @@ div.information {
         color: $color-text-100;
         font-size: 48px;
         font-weight: 700;
+
+        @media screen and (max-width: $breakpoint-mobile-to-pc) {
+            text-shadow: -1px 0px $color-background, 0px 1px $color-background, 1px 0px $color-background, 0px -1px $color-background;
+        }
     }
 
     span {
diff --git a/src/components/MainTitle.vue b/src/components/MainTitle.vue
index 11731a8..19dca2f 100644
--- a/src/components/MainTitle.vue
+++ b/src/components/MainTitle.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import Logo from '@/assets/image/GWDC24.png'
 import Information from '@/components/Information.vue'
+import AnimatedArrowScroll from '@/components/AnimatedArrowScroll.vue'
 </script>
 
 <template>
@@ -12,6 +13,7 @@ import Information from '@/components/Information.vue'
         <div class="main">
             <div class="logo">
                 <img :src="Logo" alt="logo" class="logo-image" />
+                <AnimatedArrowScroll />
             </div>
             <Information />
         </div>
@@ -20,6 +22,7 @@ import Information from '@/components/Information.vue'
 
 <style lang="scss" scoped>
 @import '@/assets/color';
+@import '@/assets/variable';
 @import 'pretendard/dist/web/static/pretendard.css';
 
 div.main-container {
@@ -28,26 +31,49 @@ div.main-container {
     align-items: center;
 
     z-index: 5;
-    height: 100vh;
+
+    @media screen and (min-width: $breakpoint-mobile-to-pc) {
+        height: 100vh;
+    }
 
     div.main {
-        @media screen and (min-width: 900px) {
-            display: flex;
+        display: flex;
+        gap: 88px;
+
+        @media screen and (min-width: $breakpoint-mobile-to-pc) {
             justify-content: center;
             align-items: end;
-            gap: 88px;
+        }
+
+        @media screen and (max-width: $breakpoint-mobile-to-pc) {
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
         }
 
         div.logo {
-            width: 400px;
-            height: 499px;
-
-            img.logo-image {
-                top: -219px;
-                left: -215px;
-                position: relative;
-                //transform: rotate(2.347deg);
-                //filter: drop-shadow(0.563px 0.563px 240px rgba(255, 255, 255, 0.32)) drop-shadow(18px 27px 128px rgba(136, 196, 240, 0.16)) drop-shadow(-24px -24px 128px rgba(255, 94, 94, 0.16));
+            @media screen and (min-width: $breakpoint-mobile-to-pc) {
+                width: $image-cut-in-size-width;
+                height: $image-cut-in-size-height;
+
+                img.logo-image {
+                    top: calc( -1 * ($image-original-size-height - $image-cut-in-size-height) / 2 );
+                    left: calc( -1 * ($image-original-size-width - $image-cut-in-size-width) / 2 );
+                    position: relative;
+                }
+            }
+
+            @media screen and (max-height: $image-original-size-height), (max-width: $image-original-size-width) {
+                height: 100vh;
+
+                img.logo-image {
+                    top: calc((100vh - $image-original-size-height) / 2 );
+                    position: relative;
+                }
+            }
+
+            @media screen and (max-width: $breakpoint-mobile-to-pc) {
+                align-items: center
             }
         }
     }

From 39a96fb907b7a94025e05693f5bb51b354bb3217 Mon Sep 17 00:00:00 2001
From: gunyu1019 <gunyu1019@gmail.com>
Date: Fri, 16 Feb 2024 18:32:09 +0900
Subject: [PATCH 05/10] [Feat] Add svg loader package

---
 package-lock.json               | 328 ++++++++++++++++++++++++++++++++
 package.json                    |   3 +-
 src/components/NavbarHeader.vue |   6 +-
 vite.config.ts                  |   2 +
 4 files changed, 336 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c8f996c..bf571dd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,6 +35,7 @@
         "sass-loader": "^14.0.0",
         "typescript": "~5.3.0",
         "vite": "^5.0.10",
+        "vite-svg-loader": "^5.1.0",
         "vue-tsc": "^1.8.27"
       }
     },
@@ -1441,6 +1442,15 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@trysound/sax": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/@tsconfig/node18": {
       "version": "18.2.2",
       "resolved": "https://registry.npmjs.org/@tsconfig/node18/-/node18-18.2.2.tgz",
@@ -3024,6 +3034,47 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-select": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+      "dev": true,
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "dev": true,
+      "dependencies": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -3036,6 +3087,39 @@
         "node": ">=4"
       }
     },
+    "node_modules/csso": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+      "dev": true,
+      "dependencies": {
+        "css-tree": "~2.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/css-tree": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+      "dev": true,
+      "dependencies": {
+        "mdn-data": "2.0.28",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/mdn-data": {
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+      "dev": true
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -3134,6 +3218,61 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+      "dev": true,
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.643",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.643.tgz",
@@ -4606,6 +4745,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "dev": true
+    },
     "node_modules/memorystream": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
@@ -6570,6 +6715,40 @@
       "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
       "dev": true
     },
+    "node_modules/svgo": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.2.0.tgz",
+      "integrity": "sha512-4PP6CMW/V7l/GmKRKzsLR8xxjdHTV4IMvhTnpuHwwBazSIlw5W/5SmPjN8Dwyt7lKbSJrRDgp4t9ph0HgChFBQ==",
+      "dev": true,
+      "dependencies": {
+        "@trysound/sax": "0.2.0",
+        "commander": "^7.2.0",
+        "css-select": "^5.1.0",
+        "css-tree": "^2.3.1",
+        "css-what": "^6.1.0",
+        "csso": "^5.0.5",
+        "picocolors": "^1.0.0"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/svgo"
+      }
+    },
+    "node_modules/svgo/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/synckit": {
       "version": "0.8.8",
       "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.8.tgz",
@@ -6919,6 +7098,18 @@
         }
       }
     },
+    "node_modules/vite-svg-loader": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/vite-svg-loader/-/vite-svg-loader-5.1.0.tgz",
+      "integrity": "sha512-M/wqwtOEjgb956/+m5ZrYT/Iq6Hax0OakWbokj8+9PXOnB7b/4AxESHieEtnNEy7ZpjsjYW1/5nK8fATQMmRxw==",
+      "dev": true,
+      "dependencies": {
+        "svgo": "^3.0.2"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.13"
+      }
+    },
     "node_modules/vue": {
       "version": "3.4.15",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.15.tgz",
@@ -8219,6 +8410,12 @@
       "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
       "dev": true
     },
+    "@trysound/sax": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+      "dev": true
+    },
     "@tsconfig/node18": {
       "version": "18.2.2",
       "resolved": "https://registry.npmjs.org/@tsconfig/node18/-/node18-18.2.2.tgz",
@@ -9429,12 +9626,68 @@
         "which": "^2.0.1"
       }
     },
+    "css-select": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+      "dev": true,
+      "requires": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      }
+    },
+    "css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "dev": true,
+      "requires": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      }
+    },
+    "css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+      "dev": true
+    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true
     },
+    "csso": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+      "dev": true,
+      "requires": {
+        "css-tree": "~2.2.0"
+      },
+      "dependencies": {
+        "css-tree": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+          "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+          "dev": true,
+          "requires": {
+            "mdn-data": "2.0.28",
+            "source-map-js": "^1.0.1"
+          }
+        },
+        "mdn-data": {
+          "version": "2.0.28",
+          "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+          "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+          "dev": true
+        }
+      }
+    },
     "csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -9509,6 +9762,43 @@
         "esutils": "^2.0.2"
       }
     },
+    "dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dev": true,
+      "requires": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      }
+    },
+    "domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "dev": true
+    },
+    "domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dev": true,
+      "requires": {
+        "domelementtype": "^2.3.0"
+      }
+    },
+    "domutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+      "dev": true,
+      "requires": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      }
+    },
     "electron-to-chromium": {
       "version": "1.4.643",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.643.tgz",
@@ -10631,6 +10921,12 @@
       "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
       "dev": true
     },
+    "mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "dev": true
+    },
     "memorystream": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
@@ -12066,6 +12362,29 @@
       "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
       "dev": true
     },
+    "svgo": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.2.0.tgz",
+      "integrity": "sha512-4PP6CMW/V7l/GmKRKzsLR8xxjdHTV4IMvhTnpuHwwBazSIlw5W/5SmPjN8Dwyt7lKbSJrRDgp4t9ph0HgChFBQ==",
+      "dev": true,
+      "requires": {
+        "@trysound/sax": "0.2.0",
+        "commander": "^7.2.0",
+        "css-select": "^5.1.0",
+        "css-tree": "^2.3.1",
+        "css-what": "^6.1.0",
+        "csso": "^5.0.5",
+        "picocolors": "^1.0.0"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+          "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+          "dev": true
+        }
+      }
+    },
     "synckit": {
       "version": "0.8.8",
       "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.8.tgz",
@@ -12276,6 +12595,15 @@
         "rollup": "^4.2.0"
       }
     },
+    "vite-svg-loader": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/vite-svg-loader/-/vite-svg-loader-5.1.0.tgz",
+      "integrity": "sha512-M/wqwtOEjgb956/+m5ZrYT/Iq6Hax0OakWbokj8+9PXOnB7b/4AxESHieEtnNEy7ZpjsjYW1/5nK8fATQMmRxw==",
+      "dev": true,
+      "requires": {
+        "svgo": "^3.0.2"
+      }
+    },
     "vue": {
       "version": "3.4.15",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.15.tgz",
diff --git a/package.json b/package.json
index 410c2ff..d670592 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",
     "build-only": "vite build",
@@ -40,6 +40,7 @@
     "sass-loader": "^14.0.0",
     "typescript": "~5.3.0",
     "vite": "^5.0.10",
+    "vite-svg-loader": "^5.1.0",
     "vue-tsc": "^1.8.27"
   }
 }
diff --git a/src/components/NavbarHeader.vue b/src/components/NavbarHeader.vue
index 65159bd..beb4cea 100644
--- a/src/components/NavbarHeader.vue
+++ b/src/components/NavbarHeader.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import logo from '@/assets/image/logo1.svg'
+import Logo from '@/assets/image/logo1.svg'
 </script>
 
 <template>
     <BNavbar toggleable="lg" container="true">
         <BNavbarBrand href="/">
-            <img :src="logo" alt="GWDC logo version1" />
+            <Logo />
         </BNavbarBrand>
     </BNavbar>
 </template>
@@ -27,6 +27,8 @@ $color-backgroun-navbar: rgba($color-white, 0.1);
 
     position: fixed;
     top: 0;
+    left: 0;
+    right: 0;
 
     backdrop-filter: blur(10px);
     background: $color-backgroun-navbar;
diff --git a/vite.config.ts b/vite.config.ts
index 36c6187..2dd973a 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,12 +3,14 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
+import svgLoader from 'vite-svg-loader'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
     vueJsx(),
+    svgLoader()
   ],
   resolve: {
     alias: {

From 9f5624f84f02948efd1f24f3573b7543f9af9ec8 Mon Sep 17 00:00:00 2001
From: gunyu1019 <gunyu1019@gmail.com>
Date: Fri, 16 Feb 2024 18:32:14 +0900
Subject: [PATCH 06/10] [Feat] Add svg loader package

---
 src/components/TicketButton.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/TicketButton.vue b/src/components/TicketButton.vue
index f610b19..434bbf2 100644
--- a/src/components/TicketButton.vue
+++ b/src/components/TicketButton.vue
@@ -1,11 +1,11 @@
 <script lang='ts' setup>
-import ticket_icon from '@/assets/image/ticket.svg'
+import TicketIcon from '@/assets/image/ticket.svg'
 </script>
 
 <template>
-    <a href="https://event-us.kr/gwdc24/event/77961" class="ticket-button">
+    <a href="https://event-us.kr/m/77961/14164" class="ticket-button">
         <span class="ticket-button-text">입장 티켓 구매하기</span>
-        <img :src='ticket_icon' alt='ticket-icon' />
+        <TicketIcon />
     </a>
 </template>
 
@@ -19,9 +19,14 @@ a.ticket-button {
     align-items: center;
     gap: 10px;
 
+    background: rgba(255, 255, 255, .1);
     border-radius: 50px;
     border: 2px solid $color-primary-100;
 
+    &:hover {
+        background: rgba(255, 255, 255, .05);
+    }
+
     span.ticket-button-text {
         color: $color-primary-100;
         text-align: center;

From 8d86781692873d2125fe14e013f9693b338aa002 Mon Sep 17 00:00:00 2001
From: gunyu1019 <gunyu1019@gmail.com>
Date: Fri, 16 Feb 2024 22:16:11 +0900
Subject: [PATCH 07/10] [Feat] Add animated arrow scroll

---
 src/assets/image/arrow.svg             |  3 ++
 src/components/AnimatedArrowScroll.vue | 39 ++++++++++++++++++++++++++
 2 files changed, 42 insertions(+)
 create mode 100644 src/assets/image/arrow.svg
 create mode 100644 src/components/AnimatedArrowScroll.vue

diff --git a/src/assets/image/arrow.svg b/src/assets/image/arrow.svg
new file mode 100644
index 0000000..484c0b2
--- /dev/null
+++ b/src/assets/image/arrow.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="arrow" x="0" y="0" version="1.1" viewBox="0 0 30 29" xml:space="preserve">
+    <path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="m20.5 11.5-6 6-6-6"/>
+</svg>
diff --git a/src/components/AnimatedArrowScroll.vue b/src/components/AnimatedArrowScroll.vue
new file mode 100644
index 0000000..d20ba73
--- /dev/null
+++ b/src/components/AnimatedArrowScroll.vue
@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import Arrow from '@/assets/image/arrow.svg'
+</script>
+
+<template>
+    <div class="animated_arrow_scroll">
+        <Arrow width='100px' height='100%' />
+    </div>
+</template>
+
+<style lang="scss" scoped>
+@import "@/assets/color";
+
+div.animated_arrow_scroll {
+    position: absolute;
+    bottom: 120px;
+    left: auto;
+    right: auto;
+    z-index: 100;
+
+    animation: animation_arrow_scroll 1.5s infinite;
+
+    svg {
+        fill: $color-white;
+    }
+}
+
+@keyframes animation_arrow_scroll {
+    0% {
+        bottom: 55px;
+    }
+    50% {
+        bottom: 5px;
+    }
+    100% {
+        bottom: 55px;
+    }
+}
+</style>

From e3016b4881853f6d11bd8cce63638023c1a43667 Mon Sep 17 00:00:00 2001
From: gunyu1019 <gunyu1019@gmail.com>
Date: Fri, 16 Feb 2024 22:16:44 +0900
Subject: [PATCH 08/10] [Feat] Add onClick event to AnimatedArrowScroll

---
 src/components/Information.vue |  8 +++++++-
 src/components/MainTitle.vue   | 37 +++++++++++++++++++++++++---------
 2 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/src/components/Information.vue b/src/components/Information.vue
index 5dee69d..f7611ad 100644
--- a/src/components/Information.vue
+++ b/src/components/Information.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import TicketButton from '@/components/TicketButton.vue'
+import { ref } from 'vue'
 
 const conferenceInfo = {
     'date': new Date(2024, 3, 9, 13),
@@ -7,6 +8,11 @@ const conferenceInfo = {
     'location2': "강원대학교 춘천캠퍼스",
     'location3': '60주년기념관 국제회의실(1F)'
 }
+const reference = ref<HTMLDivElement | null>();
+
+defineExpose({
+    reference
+})
 </script>
 
 <template>
@@ -15,7 +21,7 @@ const conferenceInfo = {
         <span>2024년 3월 9일 토요일</span>
         <span class="highlighter">강원대학교 춘천캠퍼스<br />60주년기념관 국제회의실</span>
     </div> -->
-    <div class='information'>
+    <div class='information' ref='reference'>
         <h2>강원도 유일의<br/>개발 컨퍼런스</h2>
         <div>
             <span>
diff --git a/src/components/MainTitle.vue b/src/components/MainTitle.vue
index 19dca2f..90354c7 100644
--- a/src/components/MainTitle.vue
+++ b/src/components/MainTitle.vue
@@ -2,6 +2,15 @@
 import Logo from '@/assets/image/GWDC24.png'
 import Information from '@/components/Information.vue'
 import AnimatedArrowScroll from '@/components/AnimatedArrowScroll.vue'
+import { ref } from 'vue'
+
+const informationElement = ref<InstanceType<typeof Information> | null>(null)
+const onArrowClicked = () => {
+    (
+        informationElement.value?.$refs.reference??
+        document.querySelector('.information')
+    )?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+}
 </script>
 
 <template>
@@ -13,9 +22,9 @@ import AnimatedArrowScroll from '@/components/AnimatedArrowScroll.vue'
         <div class="main">
             <div class="logo">
                 <img :src="Logo" alt="logo" class="logo-image" />
-                <AnimatedArrowScroll />
+                <AnimatedArrowScroll v-on:click="onArrowClicked" />
             </div>
-            <Information />
+            <Information ref="informationElement" />
         </div>
     </div>
 </template>
@@ -57,24 +66,32 @@ div.main-container {
                 height: $image-cut-in-size-height;
 
                 img.logo-image {
-                    top: calc( -1 * ($image-original-size-height - $image-cut-in-size-height) / 2 );
-                    left: calc( -1 * ($image-original-size-width - $image-cut-in-size-width) / 2 );
+                    top: calc(-1 * ($image-original-size-height - $image-cut-in-size-height) / 2);
+                    left: calc(-1 * ($image-original-size-width - $image-cut-in-size-width) / 2);
                     position: relative;
                 }
+
+                div.animated_arrow_scroll {
+                    display: none;
+                }
+            }
+
+            @media screen and (max-width: $breakpoint-mobile-to-pc) {
+                display: flex;
+                flex-direction: column;
+
+                align-items: center;
             }
 
-            @media screen and (max-height: $image-original-size-height), (max-width: $image-original-size-width) {
+            @media screen and (max-height: $image-original-size-height),
+                (max-width: $image-original-size-width) {
                 height: 100vh;
 
                 img.logo-image {
-                    top: calc((100vh - $image-original-size-height) / 2 );
+                    top: calc((100vh - $image-original-size-height) / 2);
                     position: relative;
                 }
             }
-
-            @media screen and (max-width: $breakpoint-mobile-to-pc) {
-                align-items: center
-            }
         }
     }
 }

From 5befdc647bad2012bf02bfd378edbf271fe9092b Mon Sep 17 00:00:00 2001
From: gunyu1019 <gunyu1019@gmail.com>
Date: Fri, 16 Feb 2024 22:25:23 +0900
Subject: [PATCH 09/10] [Fix] "align-item: center"

---
 src/assets/image/ticket.svg  | 13 +++++++++++++
 src/components/MainTitle.vue |  9 ++-------
 2 files changed, 15 insertions(+), 7 deletions(-)
 create mode 100644 src/assets/image/ticket.svg

diff --git a/src/assets/image/ticket.svg b/src/assets/image/ticket.svg
new file mode 100644
index 0000000..c723008
--- /dev/null
+++ b/src/assets/image/ticket.svg
@@ -0,0 +1,13 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="ticket.fill 1" style="mix-blend-mode:difference">
+<g id="Group">
+<path id="Vector" d="M0.755859 26.5471C0.755859 27.2096 1.01511 27.6272 1.59122 27.901C3.18993 28.6931 4.08291 29.6004 5.0767 31.5592C5.37916 32.0922 5.82564 32.3658 6.41616 32.3658H30.7137C31.2897 32.3658 31.7363 32.0922 32.0387 31.5592C33.0326 29.6004 33.9254 28.6931 35.5386 27.901C36.1147 27.6272 36.374 27.2096 36.374 26.5471V13.2677C36.374 12.5907 36.1147 12.173 35.5386 11.9138C33.9254 11.1216 33.0326 10.1999 32.0387 8.25548C31.7363 7.70818 31.2897 7.43452 30.7137 7.43452H6.41616C5.82564 7.43452 5.37916 7.70818 5.0767 8.25548C4.08291 10.1999 3.18993 11.1216 1.59122 11.9138C1.01511 12.173 0.755859 12.5907 0.755859 13.2677V26.5471ZM6.6754 26.4751V13.3397C6.6754 12.5619 7.20831 12.029 7.98606 12.029H29.1294C29.9215 12.029 30.4401 12.5619 30.4401 13.3397V26.4751C30.4401 27.2672 29.9215 27.7856 29.1294 27.7856H7.98606C7.20831 27.7856 6.6754 27.2672 6.6754 26.4751ZM8.50457 16.6955H10.4345V13.8294H8.82142C8.60539 13.8294 8.50457 13.959 8.50457 14.1606V16.6955ZM8.50457 21.3332H10.4345V18.4959H8.50457V21.3332ZM8.50457 25.654C8.50457 25.8701 8.60539 25.9853 8.82142 25.9853H10.4345V23.1335H8.50457V25.654ZM26.6953 16.6955H28.6253V14.1606C28.6253 13.959 28.5244 13.8294 28.3083 13.8294H26.6953V16.6955ZM26.6953 21.3332H28.6253V18.4959H26.6953V21.3332ZM26.6953 25.9853H28.3083C28.5244 25.9853 28.6253 25.8701 28.6253 25.654V23.1335H26.6953V25.9853ZM12.2493 25.9853H24.8805V13.8294H12.2493V25.9853Z" fill="url(#paint0_linear_781_153)" fill-opacity="0.85"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_781_153" x1="18.5649" y1="7.43452" x2="18.5649" y2="32.3658" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5BAEEA"/>
+<stop offset="1" stop-color="#4DD773"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/components/MainTitle.vue b/src/components/MainTitle.vue
index 90354c7..e890918 100644
--- a/src/components/MainTitle.vue
+++ b/src/components/MainTitle.vue
@@ -47,17 +47,12 @@ div.main-container {
 
     div.main {
         display: flex;
+        justify-content: center;
+        align-items: center;
         gap: 88px;
 
-        @media screen and (min-width: $breakpoint-mobile-to-pc) {
-            justify-content: center;
-            align-items: end;
-        }
-
         @media screen and (max-width: $breakpoint-mobile-to-pc) {
             flex-direction: column;
-            justify-content: center;
-            align-items: center;
         }
 
         div.logo {

From 27bdabc026587d935487cc41e1e22477a3e5836c Mon Sep 17 00:00:00 2001
From: gunyu1019 <gunyu1019@gmail.com>
Date: Fri, 16 Feb 2024 22:37:15 +0900
Subject: [PATCH 10/10] [Feat] Add Speaker title and Update Placement

---
 src/App.vue                      |  2 +-
 src/components/Motive.vue        |  4 ++--
 src/components/Speaker.vue       | 10 ++++++++++
 src/components/SpeakerMember.vue | 14 +++++++++-----
 4 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e7e2e84..cdb7d0e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,8 +12,8 @@ import Background from '@/components/Background.vue'
     <NavbarHeader />
     <div class="wrapper">
         <MainTitle />
-        <Speaker />
         <Motive />
+        <Speaker />
     </div>
     <Footer />
 </template>
diff --git a/src/components/Motive.vue b/src/components/Motive.vue
index 96cd93a..f9f32af 100644
--- a/src/components/Motive.vue
+++ b/src/components/Motive.vue
@@ -49,7 +49,7 @@ div.motive {
         font-size: 24px;
         font-style: normal;
         font-weight: 600;
-        line-height: normal;
+        line-height: 30px;
         letter-spacing: -0.36px;
     }
 
@@ -70,7 +70,7 @@ div.motive {
         font-size: 18px;
         font-style: normal;
         font-weight: 500;
-        line-height: 20px; /* 142.857% */
+        line-height: 24px; /* 142.857% */
         //letter-spacing: -0.28px;
     }
 }
diff --git a/src/components/Speaker.vue b/src/components/Speaker.vue
index fced34a..b107c55 100644
--- a/src/components/Speaker.vue
+++ b/src/components/Speaker.vue
@@ -49,6 +49,7 @@ const speakers: SpeakerItem[] = [
 
 <template>
     <div class="speakers">
+        <h2>Speakers</h2>
         <!-- <div class="speakers-blur">
             <div class="speakers-blur-container">
                 <img :src="speaker_blur_img" alt="speaker blur" />
@@ -81,6 +82,15 @@ $color-backgroun-speaker: $color-primary-100;
         'Noto Sans KR',
         'Malgun Gothic',
         sans-serif;
+
+    h2 {
+        text-align: center;
+        font-size: 48px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: normal;
+        padding: 0 0 30px 0;
+    }
 }
 
 .speakers-blur {
diff --git a/src/components/SpeakerMember.vue b/src/components/SpeakerMember.vue
index 668d907..c052c96 100644
--- a/src/components/SpeakerMember.vue
+++ b/src/components/SpeakerMember.vue
@@ -12,16 +12,18 @@ defineProps<{
             <img :src="speaker.image" alt="GWDC24 speaker" />
         </div>
         <div class="speaker-text">
+            <span class="speaker-text-title">{{ speaker.title }}</span>
             <div class="speaker-text-info">
                 <span class="speaker-text-name">{{ speaker.name }}</span>
                 <span class="speaker-text-affiliate">{{ speaker.affiliate }}</span>
             </div>
-            <span class="speaker-text-title">{{ speaker.title }}</span>
         </div>
     </div>
 </template>
 
 <style scoped lang="scss">
+@import "@/assets/color";
+
 .speaker-container {
     img {
         width: 120px;
@@ -36,9 +38,8 @@ defineProps<{
     .speaker-text {
         display: flex;
         flex-flow: column;
-        gap: 8px;
+        gap: 16px;
 
-        color: white;
         font-style: normal;
         line-height: normal;
 
@@ -50,16 +51,19 @@ defineProps<{
             .speaker-text-name {
                 font-size: 24px;
                 font-weight: 600;
+                color: $color-text-100;
             }
 
             .speaker-text-affiliate {
                 font-size: 18px;
-                font-weight: 500;
+                font-weight: 400;
+                color: $color-text-200;
             }
         }
 
         .speaker-text-title {
-            font-size: 20px;
+            color: $color-primary-100;
+            font-size: 24px;
             font-weight: 600;
         }
     }