add home

package.json

@@ -21,6 +21,7 @@
     "@typescript-eslint/parser": "^6.15.0",
     "@vitejs/plugin-vue": "^4.5.2",
     "autoprefixer": "^10.4.16",
+    "class-variance-authority": "^0.7.0",
     "eslint": "^8.56.0",
     "eslint-plugin-vue": "^9.19.2",
     "postcss": "^8.4.32",

src/components/Layout.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative my-0 mx-auto w-full min-[500px]:w-[500px] " >
+  <div class="relative flex flex-col my-0 mx-auto w-full h-full min-[500px]:w-[500px] ">
     <slot/>
   </div>
 </template>

src/components/ZButton.vue

@@ -1,5 +1,34 @@
 <template>
-  <button class="w-full bg-[#FCBF31] rounded-[16px] border-2 border-black px-6 py-[12px] text-base">
+  <button :class="style({disabled, color})" :disabled="disabled">
     <slot/>
   </button>
 </template>
+<script setup lang="ts">
+import {cva} from 'class-variance-authority'
+import {PropType} from 'vue'
+
+defineProps({
+  disabled: {type: Boolean, default: false},
+  color: {type: String as PropType<ButtonColor>, default: 'primary'}
+})
+
+type ButtonColor = 'primary' | 'secondary'
+
+const style = cva(
+  [
+    'text-black text-subtitle',
+    'w-full rounded-[8px] px-[12px] py-[12px] border-2'
+  ]
+  , {
+    variants: {
+      disabled: {
+        true: 'border-dark-green text-dark-green bg-green',
+        false: 'border-black'
+      },
+      color: {
+        'primary': 'bg-[#FCBF31]',
+        'secondary': 'bg-green'
+      }
+    },
+  })
+</script>

src/components/ZHeader.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <slot name="left" />
+    <slot />
+    <slot name="right" />
+  </div>
+</template>
+<script setup lang="ts">
+</script>

src/components/ZInput.vue

@@ -0,0 +1,41 @@
+<template>
+  <input
+      :value="modelValue"
+      @input="onInupt"
+      placeholder="닉네임을 입력하세요"
+      :class="style({filled})"
+      :maxlength="max"
+  >
+</template>
+<script setup lang="ts">
+
+import {computed} from 'vue'
+import {cva} from 'class-variance-authority'
+
+const props = defineProps({
+  max: {type: Number, default: 8},
+  modelValue: {type: String, default: ''}
+})
+
+const emit = defineEmits(['update:model-value'])
+
+const filled = computed(() => props.modelValue.length > 0)
+
+const onInupt = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  target.value = target.value.slice(0, 8)
+  emit('update:model-value', target.value)
+}
+
+const style = cva([
+  'w-full text-subtitle text-center p-4',
+  'rounded-[8px] px-[12px] py-[12px] border-2'
+], {
+  variants: {
+    filled: {
+      true: '',
+      false: 'border-dark-green'
+    }
+  }
+})
+</script>

src/pages/home/HomePage.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="flex flex-col flex-1 justify-center items-center px-6">
+    <img :src="zzioGame" alt="zzio game"/>
+    <img :src="title" alt="황금 찌오를 찾아라 beta" class="my-8"/>
+    <img :src="illustration" alt="찌오 이미지" class="mb-6"/>
+    <div v-if="closedRef" class="flex flex-col items-center w-full">
+      <ZButton color="secondary" :disabled="true">3월 말 오픈 예정</ZButton>
+    </div>
+    <div v-else class="flex flex-col items-center w-full">
+      <ZInput v-model="nicknameRef"/>
+      <ZButton @click="onClickPlay" color="primary" :disabled="!nicknameRef" class="mt-2">게임 시작</ZButton>
+      <ZButton
+          @click="onClickRank"
+          color="secondary"
+          :disabled="false"
+          class="mt-6"
+      >
+        실시간 랭킹
+      </ZButton>
+    </div>
+    <Notice :closed="closedRef"/>
+  </div>
+  <Footer/>
+</template>
+<script setup lang="ts">
+import zzioGame from '../../assets/zzio-game.svg'
+import title from '../../assets/title-beta.svg'
+import illustration from '../../assets/illustration.svg'
+import ZButton from '../../components/ZButton.vue'
+import Footer from '../../components/Footer.vue'
+import {onBeforeUnmount, ref, watch} from 'vue'
+import Notice from './_components/Notice.vue'
+import ZInput from '../../components/ZInput.vue'
+import {useRouter} from 'vue-router'
+
+const router = useRouter()
+
+const nicknameRef = ref('')
+const closedRef = ref(false)
+const currentTime = ref(new Date())
+const targetTime = new Date('2024-03-17T19:00:00+09:00')
+const interval = setInterval(() => {
+  currentTime.value = new Date()
+}, 1000)
+
+watch(currentTime, () => {
+  if (currentTime.value > targetTime) {
+    closedRef.value = true
+  }
+})
+
+onBeforeUnmount(() => clearInterval(interval))
+
+const onClickPlay = () => {
+  router.push('/play')
+}
+
+const onClickRank = () => {
+  router.push('/rank')
+}
+
+</script>

src/pages/home/_components/Notice.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="text-dark-green mt-6 mb-2">
+    <img :src="beta" class="inline mr-1" alt="beta"/>
+    <h3 class="text-caption-b inline">{{ titleRef }}</h3>
+  </div>
+  <ul class="text-caption-r text-dark-green list-disc ml-4">
+    <li v-for="text in textRef" v-bind:key="text">{{ text }}</li>
+  </ul>
+</template>
+<script setup lang="ts">
+import beta from '@/assets/beta.svg'
+import {computed} from 'vue'
+
+defineProps({
+  closed: {type: Boolean, default: false},
+})
+
+const titleRef = computed(() => closed ? '운영 종료 안내' : '운영 안내')
+const textRef = computed(() => closed ?
+  ['현재 찌오 게임 베타 버전은 종료 되었으며, 정식 버전은 24.03.24(일) 이후 오픈 예정입니다.'] :
+  ['베타 버전은 24.03.17 (일) 19시 까지만 시범 운영 예정이며, 정식 버전은 24.03.24 (일) 이후 오픈 예정입니다.',
+    '베타 버전이 종료된 이후에는 모든 랭킹이 초기화 됩니다.'])
+</script>

src/pages/rank/RankPage.vue

@@ -0,0 +1,3 @@
+<template>
+  ranking
+</template>

src/router/index.ts

@@ -1,11 +1,21 @@
 import {createRouter, createWebHistory} from 'vue-router'
 import PlayPage from '../pages/play/PlayPage.vue'
+import HomePage from '../pages/home/HomePage.vue'
+import RankPage from '../pages/rank/RankPage.vue'
 
 const routes = [
   {
     path: '/',
+    component: HomePage,
+  },
+  {
+    path: '/play',
     component: PlayPage,
   },
+  {
+    path: '/rank',
+    component: RankPage,
+  },
 ]
 
 const router = createRouter({

src/style.css

@@ -5,38 +5,55 @@
 @tailwind utilities;
 
 @font-face {
-  font-family: 'GangwonEduHyeonokT_OTFMediumA';
-  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/GangwonEduHyeonokT_OTFMediumA.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
+    font-family: 'GangwonEduHyeonokT_OTFMediumA';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/GangwonEduHyeonokT_OTFMediumA.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
 }
 
 :root {
-  font-family: 'Noto Sans KR', Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    font-family: 'Noto Sans KR', Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 body {
-  display: flex;
-  position: fixed;
-  margin: 0;
-  width: 100%;
-  height: 100%;
-  min-width: 320px;
-  min-height: 100vh;
-  background-color: #8ACFA7;
+    display: flex;
+    position: fixed;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    min-width: 320px;
+    min-height: 100vh;
+    background-color: #8ACFA7;
 }
 
+textarea:focus, input:focus {
+    outline: none;
+}
+
+input::placeholder {
+    color: #ccc;
+}
+
+input::-webkit-input-placeholder {
+    color: #ccc;
+}
+
+input:-ms-input-placeholder {
+    color: #ccc;
+}
+
+
 #app {
-  width: 100%;
-  height: 100%;
+    width: 100%;
+    height: 100%;
 }
 
 img, canvas, span, div {
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
 }

tailwind.config.js

@@ -6,6 +6,12 @@ export default {
   ],
   theme: {
     fontSize: {
+      'subtitle': [
+        '1.125rem', {
+          lineHeight: '',
+          fontWeight: '700'
+        }
+      ],
       'caption-r': [
         '0.75rem', // 12px
         {