21.03.22 lamplight서비스 프로젝트(리뷰작성, 지도사별 리뷰리스팅까지 DB연계 완료)

# NOTE

-리뷰[...]
 -작성, 리스팅까진 성공
 -리스팅시 갯수제한..진행중
-별점
-옵션방식 변경
   -옵션명__수량__

- template를 활용하면 v-for문 내 v-for문 즉, 이중v-for문 사용이 가능해진다.
- 또한, vue3.0부터는 동일 태그내에 v-for랑 v-if를 사용할 수 없는 것 같다.(권장하는 방법이 아닌듯..)
- template를 통해 v-for를 분리해주면 v-for와 v-if를 동시에 사용가능해진다.

---

# 주요소스코드

<ReviewAddPage.vue>

<template>

  <TitleBar>후기/평점 작성 페이지</TitleBar>

  <section class="section section-review-write-form-box px-2">
    <div class="container mx-auto">
      <div class="px-6 py-6 bg-white rounded-lg shadow-md">
        <form v-if="globalShare.isLogined" v-on:submit.prevent="checkAndAddReview">
          <FormRow title="리뷰내용">
            <textarea ref="newReviewBodyElRef" class="form-row-input" placeholder="내용을 입력해주세요."></textarea>
          </FormRow>
          <FormRow title="작성">
            <div class="btns">
              <input type="submit" value="작성" class="btn-primary" />
            </div>
          </FormRow>
        </form>
        <div v-else>
          <router-link class="btn-link" to="/member/login">로그인</router-link> 후 이용해주세요.
        </div>
      </div>
    </div>
  </section>


</template>

<script lang="ts">
import { defineComponent, reactive, ref, getCurrentInstance, onMounted } from 'vue'
import { MainApi } from '../apis'
import { Router } from 'vue-router'


export default defineComponent({
  name: 'ReviewAddPage',

  props: {
    globalShare: {
      type: Object,
      required: true
    },
    relId: {
      type: Number,
      required: true
    },
    relTypeCode: {
      type: String,
      required: true
    }
  },

  setup(props){
    const router:Router = getCurrentInstance()?.appContext.config.globalProperties.$router;
    const mainApi:MainApi = getCurrentInstance()?.appContext.config.globalProperties.$mainApi;

    const newReviewBodyElRef = ref<HTMLInputElement>();


    /* 공백 체크 */
    function checkAndAddReview(){

      //일반적으로 안해도 되지만 typescript에서는 해야됨
      //제목
      if(newReviewBodyElRef.value == null){
        return;
      }

      const newReviewBodyEl = newReviewBodyElRef.value;
      newReviewBodyEl.value = newReviewBodyEl.value.trim();

      if(newReviewBodyEl.value.length == 0){
        alert('내용을 입력해 주세요.')
        newReviewBodyEl.focus();
        return;
      }

    

      // 작성 함수로 보내기
      addReview(props.relTypeCode, props.relId, newReviewBodyEl.value, props.globalShare.loginedMember.id);

    }

    //typescript에서는 title:string, body:string 이런식으로 type을 적어주어야 한다
      function addReview(relTypeCode:string, relId:number, body:string, memberId:number){
       
        mainApi.review_doAdd(relTypeCode, relId, body, memberId)
        .then(axiosResponse => {
          alert(axiosResponse.data.msg);
          
          // 로그인이 fail 상태이면 리턴
          if ( axiosResponse.data.fail ) {
            return;
          }

          //authKey가 있는 상태에서 가능
          const newReviewId = axiosResponse.data.body.id;
          //alert(newArticleId + "번 게시물 등록 완료!!");

          router.replace("/director/list");
        });
      }

    return{
        newReviewBodyElRef,
        checkAndAddReview,
      
    }

  }
  
})
</script>

<style scoped>

</style>