Feat: Add home view

src/App.vue

@@ -1,16 +1,8 @@
 <script setup>
-import { RouterLink, RouterView } from 'vue-router';
+import { RouterView } from 'vue-router';
 </script>
 
 <template>
-  <header>
-    <div class="wrapper">
-      <nav>
-        <RouterLink to="/article">article</RouterLink>
-      </nav>
-    </div>
-  </header>
-
   <RouterView />
 </template>
 

src/assets/base.css

@@ -32,11 +32,18 @@
 
   --color-heading: var(--vt-c-text-light-1);
   --color-text: var(--vt-c-text-light-1);
+  --color-text-secondary: var(--vt-c-text-light-2);
 
   --section-gap: 160px;
+
+  --color-primary: #2b96ed;
+  --color-primary-soft: #1b65ba;
+  --color-border: rgba(0, 0, 0, 0.15);
+
+  --color-error: #ff3b30;
 }
 
-@media (prefers-color-scheme: dark) {
+/* @media (prefers-color-scheme: dark) {
   :root {
     --color-background: var(--vt-c-black);
     --color-background-soft: var(--vt-c-black-soft);
@@ -47,25 +54,16 @@
 
     --color-heading: var(--vt-c-text-dark-1);
     --color-text: var(--vt-c-text-dark-2);
+
+    --color-error: #ff453a;
   }
-}
+} */
 
 *,
 *::before,
 *::after {
   box-sizing: border-box;
   margin: 0;
-  font-weight: normal;
-}
-
-body {
-  min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
-  transition:
-    color 0.5s,
-    background-color 0.5s;
-  line-height: 1.6;
   font-family:
     'Noto Sans KR',
     'Noto Sans CJK KR',
@@ -81,8 +79,41 @@ body {
     'Droid Sans',
     'Helvetica Neue',
     sans-serif;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition:
+    color 0.5s,
+    background-color 0.5s;
+  line-height: 1.6;
   font-size: 15px;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+button {
+  cursor: pointer;
+}
+
+ul,
+ol,
+li {
+  margin: 0;
+  padding: 0;
+}
+
+li {
+  list-style: none;
+}
+
+input,
+textarea {
+  border: 2px solid var(--color-border);
+  border-radius: 8px;
+  padding: 8px 12px;
+  background-color: var(--color-background);
+}

src/assets/main.css

@@ -1,8 +1,6 @@
 @import './base.css';
 
 #app {
-  max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
   font-weight: normal;
 }

src/views/HomeView.vue

@@ -1,5 +1,203 @@
-<script setup></script>
+<script setup>
+import AppHeader from '@/components/AppHeader.vue';
+import { RouterLink } from 'vue-router';
+</script>
 
 <template>
-  <main>Hello</main>
+  <AppHeader />
+  <main>
+    <section>
+      <img src="/img/danang_big.jpg" alt="danang" />
+      <div class="title">
+        지금 EnjoyTrip과 함께 우리 지역의 관광지를 알아보고 나만의 여행 계획을 만들어 보세요!
+      </div>
+    </section>
+    <div class="wrapper">
+      <h1>여행지를 골라보세요</h1>
+      <ul class="card-list">
+        <li>
+          <RouterLink :to="{ name: 'home' }" class="card">
+            <img src="/img/Seoul.jpg" alt="seoul" class="bg" />
+            <div class="info">
+              <h2>서울</h2>
+            </div>
+          </RouterLink>
+        </li>
+        <li>
+          <RouterLink :to="{ name: 'home' }" class="card">
+            <img src="/img/Busan.jpg" alt="busan" class="bg" />
+            <div class="info">
+              <h2>부산</h2>
+            </div>
+          </RouterLink>
+        </li>
+        <li>
+          <RouterLink :to="{ name: 'home' }" class="card">
+            <img src="/img/Jeju.jpg" alt="jeju" class="bg" />
+            <div class="info">
+              <h2>제주</h2>
+            </div>
+          </RouterLink>
+        </li>
+        <li>
+          <RouterLink :to="{ name: 'home' }" class="card">
+            <img src="/img/Gyeongju.jpg" alt="seoul" class="bg" />
+            <div class="info">
+              <h2>경주</h2>
+            </div>
+          </RouterLink>
+        </li>
+      </ul>
+    </div>
+  </main>
 </template>
+
+<style scoped>
+section {
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  height: 400px;
+  color: #fff;
+  padding: 40px;
+  box-sizing: border-box;
+  background: linear-gradient(
+    transparent,
+    transparent 30%,
+    rgba(0, 0, 0, 0.2),
+    transparent 70%,
+    transparent
+  );
+}
+
+section img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  filter: brightness(90%);
+  z-index: -1;
+}
+
+@keyframes slideup {
+  0% {
+    opacity: 0;
+    transform: translateY(40px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+section .title {
+  display: inline-block;
+  height: unset;
+  margin: 0 auto;
+  font-size: 24px;
+  font-weight: bold;
+  word-break: keep-all;
+  text-wrap: balance;
+  text-shadow: 0 0 12px rgba(0, 0, 0, 0.9);
+  overflow: visible;
+  opacity: 0;
+  animation: slideup 1s ease forwards;
+}
+
+.wrapper {
+  max-width: 1200px;
+  padding: 20px 40px;
+  margin: 0 auto;
+}
+
+h1 {
+  font-size: 24px;
+  margin-bottom: 0;
+}
+
+/* card */
+
+.card-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  padding: 20px 0;
+}
+
+.card-list li {
+  display: flex;
+  position: relative;
+  width: calc((100% - 60px) / 4);
+  height: 300px;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  position: relative;
+  padding: 20px;
+  border-radius: 8px;
+  overflow: hidden;
+  text-decoration: none;
+  color: #fff;
+  aspect-ratio: 1;
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+  margin-bottom: 20px;
+  cursor: pointer;
+  transition:
+    transform 0.5s ease,
+    background-color 0.5s ease;
+  background-image: linear-gradient(142deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) 65%);
+  background-color: transparent;
+  box-sizing: border-box;
+}
+
+.card img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  filter: brightness(80%);
+  transition: all 0.5s ease;
+  object-fit: cover;
+  object-position: center;
+}
+
+.card:hover {
+  color: black;
+  background-image: none;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
+.card:hover img {
+  transform: scale(1.05);
+  filter: blur(2px);
+}
+
+@media screen and (max-width: 800px) {
+  .card-list li {
+    width: calc((100% - 40px) / 3);
+    height: 260px;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  section {
+    padding: 20px;
+  }
+  .card-list {
+    padding: 20px;
+  }
+  .card-list li {
+    width: calc((100% - 20px) / 2);
+    height: 200px;
+  }
+}
+</style>