From eaa9caa2a8a26ce910b4c9e9d7462ba5bce89fcc Mon Sep 17 00:00:00 2001
From: sunjh96 <sunjh96@gmail.com>
Date: Fri, 10 Feb 2023 19:30:27 +0900
Subject: [PATCH] =?UTF-8?q?refactor(FE)=20:=20=EB=A9=94=EC=9D=B8=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=20?=
 =?UTF-8?q?=ED=81=AC=EA=B8=B0=20=20=EC=88=98=EC=A0=95=20(#88)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/auth/register.js        | 14 ++++++++------
 client/src/main.js                            |  4 ++--
 client/src/pages/HomePage.js                  |  2 +-
 client/src/styles/{style.scss => global.scss} |  0
 client/src/styles/main.scss                   | 14 ++++++--------
 client/src/utils/slider.js                    |  2 +-
 6 files changed, 18 insertions(+), 18 deletions(-)
 rename client/src/styles/{style.scss => global.scss} (100%)

diff --git a/client/src/components/auth/register.js b/client/src/components/auth/register.js
index 7cb7e37..f2667c9 100644
--- a/client/src/components/auth/register.js
+++ b/client/src/components/auth/register.js
@@ -26,25 +26,27 @@ const register = () => {
   `;
 
   const setUserData = ({ target }, targets) => {
+    if (!target.validity.valid) return;
+
     const dataType = _.getDataset(target, 'data-input');
     const newUserData = { ...userData };
 
-    if (!target.validity.valid) return;
-
     newUserData[dataType] = target.value;
     userData = newUserData;
+
     checkValidateAll(targets);
 
     return userData;
   };
 
   const checkValidateAll = (targets) => {
-    const $target = $.qs('.auth-button').classList;
+    const $targetClass = $.qs('.auth-button').classList;
 
-    if (![...targets].every((target) => target.validity.valid)) return $target.remove('active');
-    if (userData.password !== userData.passwordCheck) return $target.remove('active');
+    if (![...targets].every((target) => target.validity.valid))
+      return $targetClass.remove('active');
+    if (userData.password !== userData.passwordCheck) return $targetClass.remove('active');
 
-    $target.add('active');
+    $targetClass.add('active');
   };
 
   const closeCodeForm = (target) => () => target.classList.remove('visible');
diff --git a/client/src/main.js b/client/src/main.js
index f2c90dc..b09247c 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -1,11 +1,11 @@
-import '@/styles/style.scss';
+import '@/styles/global.scss';
 import { setScreenSize } from '@/utils';
 import { navigateHome, navigateAuth, navigateMain, navigatePost } from '@/pages';
 import { routes, navigate } from '@/core/router';
 
 routes.push(
   { path: '/', component: navigateHome },
-  { path: '/register', component: navigateAuth },
+  { path: '/auth:register', component: navigateAuth },
   { path: '/card', component: navigateMain },
   { path: '/post', component: navigatePost },
 );
diff --git a/client/src/pages/HomePage.js b/client/src/pages/HomePage.js
index 71625c0..4d287a9 100644
--- a/client/src/pages/HomePage.js
+++ b/client/src/pages/HomePage.js
@@ -12,7 +12,7 @@ HomePage.temp = `
       <img class="logo-white" src="${logoUrl}" alt="amatta-logo" />
       <section class="home-button-section">
         <button class="login-button" data-link='/'>로그인</button>
-        <button class="signup-button" data-link='/register'>회원가입</button>
+        <button class="signup-button" data-link='/auth:register'>회원가입</button>
       </section>
     </section>
   </main>
diff --git a/client/src/styles/style.scss b/client/src/styles/global.scss
similarity index 100%
rename from client/src/styles/style.scss
rename to client/src/styles/global.scss
diff --git a/client/src/styles/main.scss b/client/src/styles/main.scss
index 5b750e7..7f0e5fd 100644
--- a/client/src/styles/main.scss
+++ b/client/src/styles/main.scss
@@ -15,7 +15,7 @@
       .one-card-button,
       .list-card-button {
         height: 100%;
-        margin-right: 0.5rem;
+        // margin-right: 0.5rem;
       }
     }
 
@@ -43,19 +43,17 @@
     display: flex;
     transition: 0.3s ease-out;
     height: 80%;
-    margin-left: 5%;
-    // width: 500%;
 
     .one-card-section {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      margin-right: 6%;
-      // margin-left: 5%;
 
       .card-image {
+        object-fit: cover;
         margin-bottom: 5%;
+        width: 100vw;
       }
 
       .card-text {
@@ -101,12 +99,12 @@
     bottom: 2rem;
     background-color: $pink-color;
     border: none;
-    width: 5rem;
-    height: 5rem;
+    width: 4rem;
+    height: 4rem;
     border-radius: 50%;
 
     .plus-button-image {
-      width: 2.5rem;
+      width: 2rem;
       filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(113deg) brightness(104%) contrast(101%);
     }
   }
diff --git a/client/src/utils/slider.js b/client/src/utils/slider.js
index 32693b5..1065d0a 100644
--- a/client/src/utils/slider.js
+++ b/client/src/utils/slider.js
@@ -13,7 +13,7 @@ const slider = () => {
   const getInterval = setInterval(() => {
     currentIndex += 1;
     currentIndex = currentIndex >= oneCardSection.length ? 0 : currentIndex;
-    cardsSection.style.marginLeft = `-${mainArticle.clientWidth * currentIndex + 39}px`;
+    cardsSection.style.marginLeft = `-${mainArticle.clientWidth * currentIndex}px`;
   }, 2000);
 
   return getInterval;