refactor(FE) : POST 페이지 Input 수정 (#88)

client/src/apis/auth.js

@@ -3,7 +3,7 @@ import client from './client';
 export const regiseterUser = async (data) => {
   const response = await client.post('user/join', data);
 
-  return response;
+  return response.data;
 };
 
 export const login = async () => {};

client/src/components/auth/register.js

@@ -53,6 +53,7 @@ const register = () => {
     const formTarget = $.qs('#verification-code-input-section');
     const buttonTarget = $.qs('.confirm-button');
 
+    e.target.innerHTML = '재인증';
     formTarget.classList.add('visible');
     timer(180, '#verification-code-input-section', closeCodeForm(formTarget));
 
@@ -91,14 +92,15 @@ const register = () => {
     changeButtonStatus(type, isValidate);
   };
 
-  const handleClickSubmitButton = (e) => {
+  const handleClickSubmitButton = async (e) => {
     e.stopPropagation();
     e.preventDefault();
 
     const { name, email, password, phoneNumber } = userData;
     const data = { name, email, password, phoneNumber };
 
-    regiseterUser(data);
+    navigate('/card');
+    await regiseterUser(data);
   };
 
   // prettier-ignore
@@ -165,7 +167,7 @@ const register = () => {
           () => registerTemp,
           $.el,
           $.prepend($.qs('.auth-form-section'))),
-          resolve));
+        resolve));
 
   // prettier-ignore
   const appendRegister = () =>

client/src/constants/constant.js

@@ -9,6 +9,24 @@ const PHONE_REG = '^(\\d{3})-(\\d{4})-(\\d{4})$';
 const NAME_REG = '^[ㄱ-ㅎ|가-힣|a-z|A-Z|]+$';
 
 const INPUT = [
+  {
+    type: 'price',
+    name: 'price-input',
+    label: '상품 가격',
+    required: true,
+  },
+  {
+    type: 'shop',
+    name: 'shop-input',
+    label: '가게 이름',
+    required: true,
+  },
+  {
+    type: 'menu',
+    name: 'menu-input',
+    label: '상품 이름',
+    required: true,
+  },
   {
     type: 'password',
     name: 'password-check-input',

client/src/pages/MainPage.js

@@ -2,6 +2,7 @@ import { SERVER_URL } from '@/constants/constant';
 import { cardDetail } from '@/components/common';
 import { $, slider } from '@/utils';
 import { _ } from '@/utils/customFx';
+import { navigate } from '@/core/router';
 
 const oneCardIconUrl = `${SERVER_URL.IMG}icon/image.svg`;
 const listIconUrl = `${SERVER_URL.IMG}icon/list.svg`;
@@ -53,6 +54,12 @@ MainPage.temp = `
     </article>
   `;
 
+// prettier-ignore
+MainPage.handleClickaddCard = (target) =>
+  _.pipe(
+    $.find('#plus-button'),
+    $.on('click', () => navigate('/post')))(target);
+
 // prettier-ignore
 MainPage.render = () =>
     _.go(
@@ -64,6 +71,7 @@ MainPage.render = () =>
 const navigateMain = () => 
     _.go(
       MainPage.render(),
-      slider);
+      slider,
+      () => MainPage.handleClickaddCard());
 
 export default navigateMain;

client/src/pages/PostPage.js

@@ -1,30 +1,11 @@
-import { SERVER_URL } from '@/constants/constant';
+import { SERVER_URL, INPUT } from '@/constants/constant';
 import { inputForm, header } from '@/components/common';
 import { $, drag } from '@/utils';
 import { _ } from '@/utils/customFx';
 
+const POST_INPUT_TYPE = ['menu', 'shop', 'price'];
 const PostPage = {};
 const iconURL = `${SERVER_URL.IMG}icon/camera.svg`;
-const inputs = [
-  {
-    type: 'text',
-    name: 'menu-input',
-    label: '상품 이름',
-    required: true,
-  },
-  {
-    type: 'text',
-    name: 'shop-input',
-    label: '가게 이름',
-    required: true,
-  },
-  {
-    type: 'text',
-    name: 'price-input',
-    label: '상품 가격',
-    required: true,
-  },
-];
 
 PostPage.temp = `
   <main class="post-main">
@@ -68,6 +49,12 @@ PostPage.render = () =>
       PostPage.temp,
       $.el,
       $.replace($.qs('#root')),
+      _.tap(
+        () => INPUT,
+        _.filter((input) => POST_INPUT_TYPE.includes(input.type)),
+        _.map((input) => inputForm({ ...input, target: '.input-info-section' })),
+        _.map(f => f()),
+        ([f]) => f),
       header({ color: 'mint', label: 'bb', target: '#root' }));
 
 // prettier-ignore

client/src/styles/post.scss

@@ -78,7 +78,8 @@
           z-index: -1;
           width: 30%;
           object-fit: scale-down;
-          filter: invert(74%) sepia(31%) saturate(201%) hue-rotate(119deg) brightness(90%) contrast(88%);
+          filter: invert(74%) sepia(31%) saturate(201%) hue-rotate(119deg) brightness(90%)
+            contrast(88%);
         }
 
         input {
@@ -91,6 +92,11 @@
         flex-direction: column;
         width: 100%;
 
+        .input-section {
+          display: flex;
+          flex-direction: column-reverse;
+        }
+
         input {
           border: 1px solid $gray400;
           border-radius: 0.5rem;

client/src/utils/slider.js

@@ -10,8 +10,6 @@ const slider = () => {
 
   cardsSection.style.width = `${mainArticle.clientWidth * oneCardSection.length}px`; // innerList의 width를 inner의 width * inner의 개수로 만들기
 
-  console.log(mainArticle.clientWidth);
-
   const getInterval = setInterval(() => {
     currentIndex += 1;
     currentIndex = currentIndex >= oneCardSection.length ? 0 : currentIndex;