refactor(FE) : 메인 페이지 이미지 크기 수정 (#88)

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');

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

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>

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%);
     }
   }

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;