Merge pull request #9 from Dev-KNU/develop

[Release] Merge remote-tracking branch 'develop' into 'main'

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"
   }
 }

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,9 +12,8 @@ import Background from '@/components/Background.vue'
     <NavbarHeader />
     <div class="wrapper">
         <MainTitle />
-        <Information />
-        <Speaker />
         <Motive />
+        <Speaker />
     </div>
     <Footer />
 </template>

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;

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>

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)

src/components/Information.vue

@@ -1,20 +1,96 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import TicketButton from '@/components/TicketButton.vue'
+import { ref } from 'vue'
+
+const conferenceInfo = {
+    'date': new Date(2024, 3, 9, 13),
+    'location1': "강원특별자치도 춘천시 강원대학길 1 (강원대학교)",
+    'location2': "강원대학교 춘천캠퍼스",
+    'location3': '60주년기념관 국제회의실(1F)'
+}
+const reference = ref<HTMLDivElement | null>();
+
+defineExpose({
+    reference
+})
 </script>
 
 <template>
-    <div class="information">
+    <!-- <div class="information">
         <TicketButton />
         <span>2024년 3월 9일 토요일</span>
         <span class="highlighter">강원대학교 춘천캠퍼스<br />60주년기념관 국제회의실</span>
+    </div> -->
+    <div class='information' ref='reference'>
+        <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>
 
 <style lang="scss" scoped>
 @import '@/assets/color';
+@import "@/assets/variable";
 @import 'pretendard/dist/web/static/pretendard.css';
 
 div.information {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 64px;
+    z-index: 3;
+
+    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;
+
+        @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 {
+        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 +131,5 @@ div.information {
         color: $vt-c-white;
         font-size: 32px;
     }
-}
+} */
 </style>

src/components/MainTitle.vue

@@ -1,19 +1,97 @@
 <script lang="ts" setup>
 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>
-    <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" />
+                <AnimatedArrowScroll v-on:click="onArrowClicked" />
+            </div>
+            <Information ref="informationElement" />
+        </div>
     </div>
 </template>
 
 <style lang="scss" scoped>
 @import '@/assets/color';
+@import '@/assets/variable';
 @import 'pretendard/dist/web/static/pretendard.css';
 
-div.main {
+div.main-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    z-index: 5;
+
+    @media screen and (min-width: $breakpoint-mobile-to-pc) {
+        height: 100vh;
+    }
+
+    div.main {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 88px;
+
+        @media screen and (max-width: $breakpoint-mobile-to-pc) {
+            flex-direction: column;
+        }
+
+        div.logo {
+            @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;
+                }
+
+                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) {
+                height: 100vh;
+
+                img.logo-image {
+                    top: calc((100vh - $image-original-size-height) / 2);
+                    position: relative;
+                }
+            }
+        }
+    }
+}
+
+/* div.main {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -51,5 +129,5 @@ div.main {
         position: absolute;
         bottom: 0;
     }
-}
+} */
 </style>

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;
     }
 }

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>
@@ -25,6 +25,11 @@ $color-backgroun-navbar: rgba($color-white, 0.1);
     z-index: 10;
     width: 100%;
 
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+
     backdrop-filter: blur(10px);
     background: $color-backgroun-navbar;
 }

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 {