From 67cbe8d5e5ce6201170e7e568588a982d645a212 Mon Sep 17 00:00:00 2001
From: Roy Lee <keymasroy@gmail.com>
Date: Mon, 2 May 2022 08:23:15 +0900
Subject: [PATCH] =?UTF-8?q?fredit=20=EA=B5=90=EC=9C=A1=20=EC=83=98?=
 =?UTF-8?q?=ED=94=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/fredit/fredit-sub-comp.vue     | 20 +++++
 front/fo/client/data/board-data.json          | 10 +++
 front/fo/client/layouts/fredit.vue            | 24 ++++++
 front/fo/client/pages/fredit/board.vue        | 36 +++++++++
 front/fo/client/pages/fredit/index.vue        | 74 +++++++++++++++++++
 front/fo/client/pages/fredit/index2.vue       | 22 ++++++
 front/fo/client/services/fredit-model.ts      | 27 +++++++
 front/fo/client/services/fredit-service.ts    | 16 ++++
 front/fo/client/store/index.ts                |  9 ++-
 front/fo/client/store/modules/fredit.ts       | 29 ++++++++
 front/fo/types/index.d.ts                     |  2 +
 11 files changed, 266 insertions(+), 3 deletions(-)
 create mode 100644 front/fo/client/components/fredit/fredit-sub-comp.vue
 create mode 100644 front/fo/client/data/board-data.json
 create mode 100644 front/fo/client/layouts/fredit.vue
 create mode 100644 front/fo/client/pages/fredit/board.vue
 create mode 100644 front/fo/client/pages/fredit/index.vue
 create mode 100644 front/fo/client/pages/fredit/index2.vue
 create mode 100644 front/fo/client/services/fredit-model.ts
 create mode 100644 front/fo/client/services/fredit-service.ts
 create mode 100644 front/fo/client/store/modules/fredit.ts

diff --git a/front/fo/client/components/fredit/fredit-sub-comp.vue b/front/fo/client/components/fredit/fredit-sub-comp.vue
new file mode 100644
index 0000000..ea85666
--- /dev/null
+++ b/front/fo/client/components/fredit/fredit-sub-comp.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>외부 서브 컴포넌트</div>
+</template>
+<script lang="ts">
+import { Component } from 'vue-property-decorator'
+import { CustomFoComponent } from '@/components/custom-fo-component'
+
+@Component
+export default class extends CustomFoComponent {
+  // #region variables
+  // #endregion
+  // #region hooks
+  // #endregion
+  // #region methods
+  // #endregion
+  // #region watches
+  // #endregion
+}
+</script>
+<style lang="scss"></style>
diff --git a/front/fo/client/data/board-data.json b/front/fo/client/data/board-data.json
new file mode 100644
index 0000000..8b24951
--- /dev/null
+++ b/front/fo/client/data/board-data.json
@@ -0,0 +1,10 @@
+[
+  {
+    "id": 1,
+    "title": "안녕하세요."
+  },
+  {
+    "id": 2,
+    "title": "게시판입니다."
+  }
+]
diff --git a/front/fo/client/layouts/fredit.vue b/front/fo/client/layouts/fredit.vue
new file mode 100644
index 0000000..d35ec9c
--- /dev/null
+++ b/front/fo/client/layouts/fredit.vue
@@ -0,0 +1,24 @@
+<template>
+  <section>
+    <header>header</header>
+    <nuxt />
+    <footer>footer</footer>
+  </section>
+</template>
+<script lang="ts">
+import { Component } from 'vue-property-decorator'
+import { CustomFoComponent } from '@/components/custom-fo-component'
+
+@Component
+export default class extends CustomFoComponent {
+  // #region variables
+  // #endregion
+  // #region hooks
+  // #endregion
+  // #region methods
+  // #endregion
+  // #region watches
+  // #endregion
+}
+</script>
+<style lang="scss"></style>
diff --git a/front/fo/client/pages/fredit/board.vue b/front/fo/client/pages/fredit/board.vue
new file mode 100644
index 0000000..1a5f056
--- /dev/null
+++ b/front/fo/client/pages/fredit/board.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <ul>
+      <li v-for="item in boardList" :key="item.id">
+        {{ item.title }}
+        <button @click="() => remove(item.id)">삭제</button>
+      </li>
+    </ul>
+  </div>
+</template>
+<script lang="ts">
+import { Vue, Component, Prop, Model, Ref, Watch, Inject, InjectReactive, Provide, ProvideReactive, PropSync, Emit } from 'vue-property-decorator'
+import { CustomFoComponent } from '@/components/custom-fo-component'
+
+@Component({
+  layout: 'fredit',
+})
+export default class extends CustomFoComponent {
+  // #region variables
+  get boardList() {
+    return this.$ustra.store.fredit().boardList
+  }
+  // #endregion
+  // #region hooks
+  created() {}
+  // #endregion
+  // #region methods
+  remove(id) {
+    this.$ustra.store.fredit().setBoardList(this.boardList.filter(board => board.id !== id))
+  }
+  // #endregion
+  // #region watches
+  // #endregion
+}
+</script>
+<style lang="scss"></style>
diff --git a/front/fo/client/pages/fredit/index.vue b/front/fo/client/pages/fredit/index.vue
new file mode 100644
index 0000000..ee10d08
--- /dev/null
+++ b/front/fo/client/pages/fredit/index.vue
@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <div>{{ titleText }}</div>
+    <button @click="$router.push('/fredit/index2')">index2로 이동</button>
+    <button @click="() => clickOnTitleText()">title text 변경</button>
+
+    <sub-component ref="subComponent" :text="subCompText" :value.sync="subCompValue" @text-changed="text => $logger().info('text', text)" />
+
+    <div>subCompValue : {{ subCompValue }}</div>
+    <fredit-sub-comp />
+  </div>
+</template>
+<script lang="ts">
+import { Component, Watch, Prop, PropSync, Ref } from 'vue-property-decorator'
+import { CustomFoComponent } from '@/components/custom-fo-component'
+import FreditSubComp from '@/components/fredit/fredit-sub-comp.vue'
+
+@Component({
+  template: `<div>
+    <button text="value변경" @click="innerValue='value 변경됨.'">value값 변경</button>
+    <div>{{ text }}</div>
+  </div>`,
+})
+class SubComponent extends CustomFoComponent {
+  @Prop({ default: '기본 텍스트 값' }) readonly text: string
+  @PropSync('value', { default: null }) innerValue: string
+
+  alert() {
+    this.$logger().warn('alert')
+  }
+
+  @Watch('text')
+  textChanged(v) {
+    console.log('text prop이 변경')
+    this.$emit('text-changed', v)
+  }
+}
+
+@Component({
+  layout: 'fredit',
+  components: { SubComponent, FreditSubComp },
+})
+export default class extends CustomFoComponent {
+  // #region variables
+  titleText: string = 'main'
+  subCompText: string = '상위 초기 값'
+
+  subCompValue: string = '초기 value'
+
+  @Ref() readonly subComponent: SubComponent
+
+  // #endregion
+  // #region hooks
+  created() {
+    console.log(this.$data)
+  }
+  // #endregion
+  // #region methods
+  clickOnTitleText() {
+    this.titleText = 'main2'
+    this.subCompText = '상위 컴포넌트에서 값 변경'
+
+    this.subComponent.alert()
+  }
+  // #endregion
+  // #region watches
+  @Watch('titleText', { immediate: true })
+  titleTextChanged(v) {
+    console.log('titleText가 변경되었음.')
+  }
+  // #endregion
+}
+</script>
+<style lang="scss"></style>
diff --git a/front/fo/client/pages/fredit/index2.vue b/front/fo/client/pages/fredit/index2.vue
new file mode 100644
index 0000000..07e5db1
--- /dev/null
+++ b/front/fo/client/pages/fredit/index2.vue
@@ -0,0 +1,22 @@
+<template>
+  <div>index2</div>
+</template>
+<script lang="ts">
+import { Component } from 'vue-property-decorator'
+import { CustomFoComponent } from '@/components/custom-fo-component'
+
+@Component({
+  layout: 'fredit',
+})
+export default class extends CustomFoComponent {
+  // #region variables
+  // #endregion
+  // #region hooks
+  // #endregion
+  // #region methods
+  // #endregion
+  // #region watches
+  // #endregion
+}
+</script>
+<style lang="scss"></style>
diff --git a/front/fo/client/services/fredit-model.ts b/front/fo/client/services/fredit-model.ts
new file mode 100644
index 0000000..bb9db42
--- /dev/null
+++ b/front/fo/client/services/fredit-model.ts
@@ -0,0 +1,27 @@
+import { BaseModel } from '@ustra/data/src/models/base-models'
+
+/**
+ * 게시판 모델
+ */
+export interface BoardModel extends BaseModel {
+  /**
+   * 인덱스 값
+   */
+  id: number
+  /**
+   * 제목
+   */
+  title: string
+  /**
+   * 내용
+   */
+  content: string
+  /**
+   * 작성자
+   */
+  author: string
+  /**
+   * 작성
+   */
+  date: Date
+}
diff --git a/front/fo/client/services/fredit-service.ts b/front/fo/client/services/fredit-service.ts
new file mode 100644
index 0000000..9927b94
--- /dev/null
+++ b/front/fo/client/services/fredit-service.ts
@@ -0,0 +1,16 @@
+import { UtraService } from '@ustra/nuxt/src/services/ustra-service'
+import boardData from '@/data/board-data.json'
+import { BoardModel } from './fredit-model'
+
+export class FreditService extends UtraService {
+  /**
+   * 게시판 목록 조회
+   * @returns
+   */
+  getBoardList() {
+    return boardData as BoardModel[]
+  }
+}
+
+export const freditService = new FreditService()
+export default freditService
diff --git a/front/fo/client/store/index.ts b/front/fo/client/store/index.ts
index ddf7e84..bb95feb 100644
--- a/front/fo/client/store/index.ts
+++ b/front/fo/client/store/index.ts
@@ -1,6 +1,9 @@
 import { createStore } from '@ustra/nuxt/src/vue/store'
 import { SampleModule } from './modules/sample'
+import { FreditModule } from './modules/fredit'
 
-export default () => createStore({
-  sample: SampleModule
-})
+export default () =>
+  createStore({
+    sample: SampleModule,
+    fredit: FreditModule,
+  })
diff --git a/front/fo/client/store/modules/fredit.ts b/front/fo/client/store/modules/fredit.ts
new file mode 100644
index 0000000..2d82748
--- /dev/null
+++ b/front/fo/client/store/modules/fredit.ts
@@ -0,0 +1,29 @@
+import { VuexModule, Module, Mutation, Action } from 'vuex-module-decorators'
+import { Storage } from '@ustra/nuxt/src/vue/store/decorators'
+import { CombinedContext } from '@ustra/nuxt/src/vue/store'
+import { BoardModel } from '@/services/fredit-model'
+import { freditService } from '@/services/fredit-service'
+
+@Module({
+  name: 'fredit',
+  namespaced: true,
+  stateFactory: true,
+})
+export class FreditModule extends VuexModule {
+  boardList: BoardModel[] = []
+
+  @Mutation
+  setBoardList(boardList: BoardModel[]) {
+    this.boardList = boardList
+  }
+
+  @Action
+  nuxtServerInit(ctx: CombinedContext) {
+    this.setBoardList(freditService.getBoardList())
+  }
+
+  // @Action
+  // nuxtClientInit(ctx: CombinedContext) {
+  //   console.log('nuxtClientInit')
+  // }
+}
diff --git a/front/fo/types/index.d.ts b/front/fo/types/index.d.ts
index a132ce6..43cf3be 100644
--- a/front/fo/types/index.d.ts
+++ b/front/fo/types/index.d.ts
@@ -1,9 +1,11 @@
 import { CorePlugin } from '../client/plugins/core'
 import { SampleModule } from '../client/store/modules/sample'
+import { FreditModule } from '../client/store/modules/fredit'
 
 declare module '@ustra/nuxt/src/vue/store/index' {
   interface StoreModules {
     sample?: () => SampleModule
+    fredit?: () => FreditModule
   }
 }