fredit 교육 샘플

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>

front/fo/client/data/board-data.json

@@ -0,0 +1,10 @@
+[
+  {
+    "id": 1,
+    "title": "안녕하세요."
+  },
+  {
+    "id": 2,
+    "title": "게시판입니다."
+  }
+]

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>

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>

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>

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>

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

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

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,
+  })

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')
+  // }
+}

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