login page 생성

This commit is contained in:
김창수 2025-04-28 17:44:42 +09:00
parent 6ce4759db6
commit f70807a0e2
12 changed files with 127 additions and 8 deletions

View File

@ -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" >

44
src/app/login/page.tsx Normal file
View File

@ -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>
)
}

View File

@ -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/>
</>
)
}

View File

@ -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>

View File

@ -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>
)
}

View File

@ -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)
}
}

View File

@ -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;

View File

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

View File

@ -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;
}
}
}

View File

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

View File

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

View File

@ -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 {