어드민 - Article 추가 화면 (마무리)

이제 front 에서 실제 API 를 호출해보자.

먼저 article 관련 api 를 호출하는 로직을 만들어야 하는데, 뭐 기존처럼 api.js 에 다 때려박아도 되지만, 그것보다는 menu, article 호출 로직들을 별도의 파일로 분리하자.

• api/api.js

  const address = 'http://132.226.16.67:8080';
  
  const getQueryString = query => {
      let str = '';
  
      try {
          for (let key in query) {
              if (str.length > 0) {
                  str += '&';
              }
  
              str += (key + '=' + query[key]);
          }
      } catch (e) {
          console.error(e);
          str = '';
      }
  
      return str;
  };
  
  export const fetchWrap = async (options) => {
      const { url, method, query, body, headers } = options;
  
      try {
          return (await fetch(`${address + url}?${getQueryString(query)}`, {
              method,
              headers: {
                  'Content-Type': 'application/json',
                  ...headers
              },
              body: JSON.stringify(body)
          })).json();
      } catch (e) {
          console.error(e);
      }
  };

• api/menu.js

  import { fetchWrap } from './api.js'
  
  export const getMenu = async query => {
      return await fetchWrap({
          url: '/menu',
          method: 'GET',
          query
      });
  };
  
  export const postMenu = async body => {
      return await fetchWrap({
          url: '/menu',
          method: 'POST',
          body
      });
  };
  
  export const patchMenu = async body => {
      return await fetchWrap({
          url: '/menu',
          method: 'PATCH',
          body
      });
  };
  
  export const deleteMenu = async body => {
      return await fetchWrap({
          url: '/menu',
          method: 'DELETE',
          body
      });
  }; 

• api/article.js

  import { fetchWrap } from './api.js'
  
  export const getArticle = async query => {
      return await fetchWrap({
          url: '/article',
          method: 'GET',
          query
      });
  };
  
  export const postArticle = async body => {
      return await fetchWrap({
          url: '/article',
          method: 'POST',
          body
      });
  };
  
  export const patchArticle = async body => {
      return await fetchWrap({
          url: '/article',
          method: 'PATCH',
          body
      });
  };
  
  export const deleteArticle = async body => {
      return await fetchWrap({
          url: '/article',
          method: 'DELETE',
          body
      });
  }; 

이제 AdminArticle.svelte 에서 api 를 호출해보자.

<script>
	import { postArticle } from '../../api/article.js';
	...
	const addArticle = async () => {
		if (!parent) {
			alert('메뉴를 선택해 주세요...');
			return;
		}

		if (!title) {
			alert('제목을 입력해주세요...');
			return;
		}

		const contents = editor.getHTML();

		if (!contents) {
			alert('본문을 입력해주세요...');
			return;
		}

		const response = await postArticle({
			title,
			contents,
			parent
		});

		if (response?.success) {
			alert(`${title} article 생성에 성공하였습니다.`);
			
			title = '';

			editor.reset();
			adminMenuSelectContainer.reset();
		} else {
			alert(`${title} article 생성에 실패하였습니다.`);
		}
	}
</script>

잘 동작한다.

admin menu 화면을 한번 만들어보니까 article 은 금방 하는 듯 ㅎㅎ

이제는 menu 선택했을때 우측 공간에서 article list 가 나오는 화면을 만들어야 한다.

velog 의 하단에 나오는 리스트 화면을 참조하려고 한다. (사실 똑같음......)

ex) 요런 화면