login page 생성

src/app/inputcommon/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 import { useState } from "react"
 
-export default function InputCommon() {
+export default function InputCommonPage() {
   const [fileName, setFileName] = useState<File | null>(null); //file name value
 
   return (
@@ -111,6 +111,13 @@ export default function InputCommon() {
                 <span className="slider"></span>
             </label>
           </div>
+          <div className="toggle-form">
+            <label className="toggle-btn">
+                <input type="checkbox"/>
+                <span className="slider"></span>
+            </label>
+            <div className="toggle-name">Q.PARTNERS</div>
+          </div>
         </div>
       </div>
       <div className="design-box" >

src/app/login/page.tsx

@@ -0,0 +1,44 @@
+import Footer from "@/components/layouts/Footer";
+
+export default function LoginPage(){
+  return(
+    <div className="wrap">
+      <div className="container">
+        <div className="login-contents">
+          <h1 className="login-logo">Hanasys 現地調査</h1>
+          <div className="login-form-wrap">
+            <div className="login-form mb15">
+              <div className="login-input id">
+                <input type="text" className="login-frame" placeholder="Input Frame ID"/>
+                <button className="login-icon"><i className="del-icon"></i></button>
+              </div>
+            </div>
+            <div className="login-form">
+              <div className="login-input pw">
+                <input type="password" className="login-frame" placeholder="Input Frame PW"/>
+                <button className="login-icon act"><i className="show-icon"></i></button>
+              </div>
+            </div>
+            <div className="login-check-warp">
+              <div className="check-form-box">
+                <input type="checkbox" id="ch01"/>
+                <label htmlFor="ch01">ID Save</label>
+              </div>
+              <div className="toggle-form">
+                <label className="toggle-btn">
+                    <input type="checkbox"/>
+                    <span className="slider"></span>
+                </label>
+                <div className="toggle-name">Q.PARTNERS</div>
+              </div>
+            </div>
+            <div className="login-btn-wrap">
+              <button className="btn-frame icon login">お問い合わせ  <i className="btn-arr"></i></button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <Footer/>
+    </div>
+  )
+}

src/app/main/page.tsx

@@ -1,9 +1,11 @@
 import Footer from "@/components/layouts/Footer";
 import Header from "@/components/layouts/Header";
 import MainContents from "@/components/main/MainContents";
+import MemberInformationPop from "@/components/main/MemberInformationPop";
 
-export default function Layout(){
+export default function MainPage(){
   return(
+    <>
     <div className="wrap">
       <Header name={"Hanasys 現地調査"} backBtn={false}/>
       <div className="container">
@@ -11,5 +13,7 @@ export default function Layout(){
       </div>
       <Footer/>
     </div>
+      <MemberInformationPop/>
+    </>
   )
 }

src/components/PublishList/PublishList.tsx

@@ -45,6 +45,18 @@ export default function PublishList (){
                   </tr>
                 </thead>
                 <tbody>
+                  <tr>
+                    <td>Login</td>
+                    <td>Login Page</td>
+                    <td>
+                      <Link href={'login'}>Login.tsx</Link>
+                    </td>
+                    <td></td>
+                    <td className='c'>
+                      
+                    </td>
+                    <td className='c red'></td>
+                  </tr>
                   <tr>
                     <td>Main</td>
                     <td>Main Page</td>

src/components/main/MemberInformationPop.tsx

@@ -0,0 +1,19 @@
+export default function MemberInformationPop(){
+  return(
+    <div className="modal-popup">
+      <div className="modal-dialog">
+        <div className="modal-content">
+          <div className="modal-header">
+            sdasd
+          </div>
+          <div className="modal-body">
+            asdasdasd
+          </div>
+          <div className="modal-footer">
+            sdsd
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/styles/base/_check-radio.scss

@@ -15,7 +15,7 @@
   position: relative;
   display: inline-block;
   margin-bottom:0;
-  line-height:1.4;
+  line-height:1.5;
   font-size: $font-s-13;
   color: $font-c;
   vertical-align: top;
@@ -38,7 +38,7 @@
       position: absolute;
       width: 22px;
       height: 22px;
-      top: -2px;
+      top: -1px;
       left: 0;
       margin-left: 0px;
       border: 1px solid #A8B6C7;
@@ -53,7 +53,7 @@
       position: absolute;
       width: 22px;
       height: 22px;
-      top: -2px;
+      top: -1px;
       left: 0;
       margin-left: 0;
       border-color: #fff;
@@ -68,7 +68,7 @@
     content: "";
     display: inline-block;
     position: absolute;
-    top: -2px;
+    top: -1px;
     left: 0%;
     width: 7px;
     height: 9px;
@@ -203,3 +203,11 @@
     }
   }
 }
+
+.toggle-form{
+  @include flex(8px);
+  align-items: center;
+  .toggle-name{
+    @include defaultFont($font-s-13, $font-w-400, $font-c)
+  }
+}

src/styles/base/_inputs.scss

@@ -134,6 +134,8 @@ input::-webkit-inner-spin-button {
   position: relative;
   padding-left: 34px;
   padding-right: 0;
+  height: 50px;
+  line-height: 50px;
   &:before{
     content: '';
     position: absolute;

src/styles/components/_index.scss

@@ -1 +1,2 @@
-@forward 'main';
+@forward 'main';
+@forward 'login';

src/styles/components/_login.scss

@@ -0,0 +1,19 @@
+@use "../abstracts" as *;
+
+.login-contents{
+  padding: 94px 34px 0;
+  .login-logo{
+    @include defaultFont($font-s-24, $font-w-600, $black-1010);
+    text-align: center;
+  }
+  .login-form-wrap{
+    margin-top: 42px;
+    .login-check-warp{
+      margin-top: 24px;
+      @include flex(14px);
+    }
+    .login-btn-wrap{
+      margin-top: 24px;
+    }
+  }
+}

src/styles/components/_main.scss

@@ -2,7 +2,9 @@
 
 .main-contens{
   width: 100%;
+  height: auto;
   padding: 0 20px;
+  background-color: $white-fff;
 }
 .main-head-block{
   padding: 33px 30px;

src/styles/layout/_layout.scss

@@ -15,7 +15,7 @@
 // header
 .header-warp{
   height: 66px;
-  z-index: 900000;
+  z-index: 100000;
 }
 header{
   position: fixed;

src/styles/layout/_pop-common.scss

@@ -26,6 +26,7 @@
       margin: 0 16px;
       background-clip: padding-box;
       background-color: $white-fff;
+      border-radius: 16px;
       outline: 0 none;
       pointer-events: auto;
       .modal-header {