feat(project-detail): project 선택 시 상세보기 화면 구현

components/footer.vue

@@ -56,6 +56,10 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import "~/assets/css/_device.scss";
 
+* {
+  font-family: Spoqa Han Sans Neo;
+}
+
 footer {
   margin-top: auto;
 }

components/header.vue

@@ -64,6 +64,9 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import "~/assets/css/_device.scss";
+* {
+  font-family: Spoqa Han Sans Neo;
+}
 
 nav {
   display: flex;

components/project/card.vue

@@ -1,8 +1,10 @@
 <template>
   <div>
-    <img class="thumbnail" :src="project.thumbnail" />
-    <p class="name">{{ project.app_name }}</p>
-    <p class="time">{{ project.th }} | {{ project.year }}</p>
+    <nuxt-link :to="`project/${project.idx}`">
+      <img class="thumbnail" :src="project.thumbnail" />
+      <p class="name">{{ project.app_name }}</p>
+      <p class="time">{{ project.th }} | {{ project.year }}</p>
+    </nuxt-link>
     <div class="links">
       <a
         v-for="(link, platform) in project.link"
@@ -32,14 +34,19 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import "~/assets/css/_device.scss";
-
+* {
+  font-family: Spoqa Han Sans Neo;
+}
+.name {
+  cursor: pointer;
+}
+a {
+  text-decoration: none;
+}
 .links {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  a {
-    text-decoration: none;
-  }
 }
 .link-item {
   font-weight: bold;

components/toolbar.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="container" @click="$router.go(-1)">
+    <img class="leading" src="~/assets/img/ic_back.png" />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@vue/composition-api";
+export default defineComponent({
+  name: "Toolbar",
+});
+</script>
+
+<style lang="scss" scoped>
+* {
+  font-family: Spoqa Han Sans Neo;
+}
+.container {
+  height: 56px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  .leading {
+    margin: 16px;
+    height: 24px;
+    width: 24px;
+    cursor: pointer;
+  }
+}
+</style>

content/_projects/5.json

@@ -0,0 +1,21 @@
+{
+  "idx": "5",
+  "app_name": "",
+  "thumbnail": "https://drive.google.com/uc?export=view&id=",
+  "th": "th",
+  "year": "",
+  "team_name": "이끼",
+  "members": [
+    "허지인",
+    "안경문",
+    "유채은",
+    "성송현",
+    "인정민",
+    "김소연",
+    "김준희",
+    "김성재"
+  ],
+  "description": "",
+  "ppt": "",
+  "link": {}
+}

content/_projects/6.json

@@ -0,0 +1,12 @@
+{
+  "idx": "6",
+  "app_name": "",
+  "thumbnail": "https://drive.google.com/uc?export=view&id=",
+  "th": "12th",
+  "year": "",
+  "team_name": "뭐 있겄지",
+  "members": ["아무개", "아무개"],
+  "description": "",
+  "ppt": "",
+  "link": {}
+}

content/_projects/habitkery.json

@@ -0,0 +1,23 @@
+{
+  "idx": "1",
+  "app_name": "Habitkery",
+  "thumbnail": "https://drive.google.com/uc?export=view&id=1XyPcA3KsEO04sZ5pbdWVep3D6MmASEf7",
+  "th": "19th",
+  "year": "2021",
+  "team_name": "이끼",
+  "members": [
+    "허지인",
+    "안경문",
+    "유채은",
+    "성송현",
+    "인정민",
+    "김소연",
+    "김준희",
+    "김성재"
+  ],
+  "description": "좋은 습관은 나와의 약속을 하나씩 지켜갈 때 만들어져요. 거창한 목표가 아니더라도 작은 것부터 하나씩 시작해나가면 어느새 좋은 습관이 형성되어 있을 거예요.\n\n3일을 목표로 생활 속 습관을 하나씩 만들어보세요. 3일 연속으로 습관 완료 시 누군가의 달콤한 응원과 함께 조각 케익이 도착합니다. 같은 종류의 케익을 8조각 모으면 홀케익을 완성할 수 있어요.\n\n습관을 함께하는 다른 사람들과 서로 응원을 주고받으며 즐겁게 습관을 실천하세요!",
+  "ppt": "https://www.naver.com",
+  "link": {
+    "android": "https://www.naver.com"
+  }
+}

content/_projects/네번째 앱 이름.json

@@ -0,0 +1,23 @@
+{
+  "idx": "4",
+  "app_name": "네번째 앱 이름",
+  "thumbnail": "https://drive.google.com/uc?export=view&id=",
+  "th": "17th",
+  "year": "2020",
+  "team_name": "이끼",
+  "members": [
+    "허지인",
+    "안경문",
+    "유채은",
+    "성송현",
+    "인정민",
+    "김소연",
+    "김준희",
+    "김성재"
+  ],
+  "description": "좋은 습관은 나와의 약속을 하나씩 지켜갈 때 만들어져요. 거창한 목표가 아니더라도 작은 것부터 하나씩 시작해나가면 어느새 좋은 습관이 형성되어 있을 거예요.\n\n3일을 목표로 생활 속 습관을 하나씩 만들어보세요. 3일 연속으로 습관 완료 시 누군가의 달콤한 응원과 함께 조각 케익이 도착합니다. 같은 종류의 케익을 8조각 모으면 홀케익을 완성할 수 있어요.\n\n습관을 함께하는 다른 사람들과 서로 응원을 주고받으며 즐겁게 습관을 실천하세요!",
+  "ppt": "https://www.naver.com",
+  "link": {
+    "web": "https://www.naver.com"
+  }
+}

content/_projects/두번째 앱 이름.json

@@ -0,0 +1,14 @@
+{
+  "idx": "2",
+  "app_name": "두번째 앱 이름",
+  "thumbnail": "https://drive.google.com/uc?export=view&id=",
+  "th": "20th",
+  "year": "2021",
+  "team_name": "뭐 있겄지",
+  "members": ["아무개", "아무개"],
+  "description": "좋은 습관은 나와의 약속을 하나씩 지켜갈 때 만들어져요. 거창한 목표가 아니더라도 작은 것부터 하나씩 시작해나가면 어느새 좋은 습관이 형성되어 있을 거예요.\n\n3일을 목표로 생활 속 습관을 하나씩 만들어보세요. 3일 연속으로 습관 완료 시 누군가의 달콤한 응원과 함께 조각 케익이 도착합니다. 같은 종류의 케익을 8조각 모으면 홀케익을 완성할 수 있어요.\n\n습관을 함께하는 다른 사람들과 서로 응원을 주고받으며 즐겁게 습관을 실천하세요!",
+  "ppt": "https://www.naver.com",
+  "link": {
+    "ios": "https://www.naver.com"
+  }
+}

content/_projects/세번째 앱 이름.json

@@ -0,0 +1,15 @@
+{
+  "idx": "3",
+  "app_name": "세번째 앱 이름",
+  "thumbnail": "https://drive.google.com/uc?export=view&id=",
+  "th": "19th",
+  "year": "2021",
+  "team_name": "뭐 있겄지",
+  "members": ["아무개", "아무개"],
+  "description": "좋은 습관은 나와의 약속을 하나씩 지켜갈 때 만들어져요. 거창한 목표가 아니더라도 작은 것부터 하나씩 시작해나가면 어느새 좋은 습관이 형성되어 있을 거예요.\n\n3일을 목표로 생활 속 습관을 하나씩 만들어보세요. 3일 연속으로 습관 완료 시 누군가의 달콤한 응원과 함께 조각 케익이 도착합니다. 같은 종류의 케익을 8조각 모으면 홀케익을 완성할 수 있어요.\n\n습관을 함께하는 다른 사람들과 서로 응원을 주고받으며 즐겁게 습관을 실천하세요!",
+  "ppt": "https://www.naver.com",
+  "link": {
+    "android": "https://www.naver.com",
+    "ios": "https://www.naver.com"
+  }
+}

layouts/detail.vue

@@ -12,4 +12,8 @@ export default defineComponent({
 });
 </script>
 
-<style></style>
+<style class="scss" scoped>
+.background {
+  height: 100vh;
+}
+</style>

models/project.js

@@ -1,9 +1,10 @@
 import { Model } from "@vuex-orm/core";
 export default class Project extends Model {
   static entity = "projects";
+  static primaryKey = "idx";
   static fields() {
     return {
-      idx: this.uid(),
+      idx: this.attr(null),
       app_name: this.string(),
       thumbnail: this.string(),
       th: this.string(),

nuxt.config.ts

@@ -2,13 +2,17 @@ import type { NuxtConfig } from "@nuxt/types";
 
 const config: NuxtConfig = {
   target: "static",
-  head:{
-    meta:[{charset: 'utf-8'}, {name: 'viewport', content: 'width=device-width, initial-scale=1'}]
+  // ssr: false,
+  head: {
+    meta: [
+      { charset: "utf-8" },
+      { name: "viewport", content: "width=device-width, initial-scale=1" },
+    ],
   },
   modules: ["@nuxt/content"],
   components: true,
   content: {
-    nestedProperties: ["a.b"],
+    nestedProperties: ["projects.idx"],
     extendParser: {
       ".custom": (file) => ({
         body: file.split("\n").map((line) => line.trim()),
@@ -17,12 +21,11 @@ const config: NuxtConfig = {
   },
   buildModules: ["@nuxt/typescript-build"],
   plugins: ["~/plugins/composition-api"],
-  css:["~/assets/css/reset.css", "~/assets/css/webfont.css", "~/assets/css/_device.scss"],
-  // image:{
-  //   facebook: "~/assets/img/facebook.png",
-  //   github: "~/assets/img/github.png",
-  //   instagram: "~/assets/img/instagram.png",
-  // },
+  css: [
+    "~/assets/css/reset.css",
+    "~/assets/css/webfont.css",
+    "~/assets/css/_device.scss",
+  ],
 };
 
 export default config;

pages/index.vue

@@ -26,6 +26,9 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import "~/assets/css/_device.scss";
+* {
+  font-family: Spoqa Han Sans Neo;
+}
 
 .container {
   width: 100%;