diff --git a/react-page/src/component/Register.tsx b/react-page/src/component/Register.tsx index adc0fe0..31e9eed 100644 --- a/react-page/src/component/Register.tsx +++ b/react-page/src/component/Register.tsx @@ -12,25 +12,37 @@ export default function Register() {

회원가입

{/* 이메일 👉🏻 이메일 형식 유효성 검사*/} - -
- - +
+ +
+ + +
{/* 이름*/} - - +
+ + +
{/* 닉네임 👉🏻 중복검사*/} - - +
+ + +
{/* 비밀번호 👉🏻 중복검사 & 유효성 검사*/} - - - +
+ + + +
diff --git a/react-page/src/style/_font.scss b/react-page/src/style/_font.scss new file mode 100644 index 0000000..5ca6b8a --- /dev/null +++ b/react-page/src/style/_font.scss @@ -0,0 +1,7 @@ +@font-face { + font-family: "EASTARJET-Medium"; + src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/EASTARJET-Medium.woff2") + format("woff2"); + font-weight: 500; + font-style: normal; +} diff --git a/react-page/src/style/_util.scss b/react-page/src/style/_util.scss index 556d64d..8fc62be 100644 --- a/react-page/src/style/_util.scss +++ b/react-page/src/style/_util.scss @@ -1,3 +1,5 @@ +@import "_font.scss"; + $color-main: #a8bbff; $color-sub: #d0dbff; $color-register: #7995f9; @@ -6,13 +8,32 @@ $color-register: #7995f9; color: $color-main; width: $width; height: $height; + cursor: pointer; } @mixin register($size) { color: $color-register; text-align: center; font-size: $size; - font-weight: 800; line-height: normal; letter-spacing: 3px; } + +@mixin btn($width, $height, $font) { + // 버튼 글자 + color: #fff; + text-align: center; + font-family: "EASTARJET-Medium"; + font-weight: 700; + font-size: $font; + line-height: normal; + letter-spacing: 2px; + // 버튼 윤곽(?) + width: $width; + height: $height; + flex-shrink: 0; + background-color: $color-main; + border: none; + border-radius: 10px; + cursor: pointer; +} diff --git a/react-page/src/style/register.scss b/react-page/src/style/register.scss index 1872188..aaf1d6b 100644 --- a/react-page/src/style/register.scss +++ b/react-page/src/style/register.scss @@ -1,7 +1,11 @@ @import "_util.scss"; +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;800&display=swap"); + #container { width: 100%; height: 100%; + font-family: "EASTARJET-Medium"; + font-weight: 600; } #x-div { text-align: right; @@ -16,66 +20,62 @@ hr { flex-direction: column; align-items: center; } + form { display: flex; flex-direction: column; - width: 250px; + width: 65vw; + height: 65vh; + justify-content: space-evenly; + align-items: center; - label { - color: $color-sub; - text-align: center; - font-family: Inter; - font-size: 15px; - font-style: normal; - font-weight: 800; - line-height: normal; - letter-spacing: -0.333px; + div { + display: flex; + flex-direction: column; + width: 100%; } -} -#btn_verify { - // 글자 - color: #fff; + #div_email { + display: flex; + div { + display: flex; + flex-direction: row; + justify-content: space-between; + input { + width: calc(100% - 65px); + } + } + } +} - text-align: center; - font-family: Inter; - font-size: 16px; - font-style: normal; - font-weight: 800; +label { + color: $color-main; + text-align: left; + font-size: 15px; line-height: normal; - letter-spacing: 2px; - - // 버튼 - width: 53px; - height: 38px; - flex-shrink: 0; - background-color: $color-main; - border: none; - border-radius: 10px; + letter-spacing: -0.333px; + margin-bottom: 5px; } -#btn_register { - // 글자 - color: #fff; - - text-align: center; - font-family: Inter; - font-size: 16px; - font-style: normal; - font-weight: 800; - line-height: normal; - letter-spacing: 2px; +input { + font-family: "EASTARJET-Medium"; + font-weight: 100; + border: 1px solid $color-main; + border-radius: 5px; + height: 30px; + background-color: #f0f0f0; + margin-bottom: 5px; - // 버튼 - width: 147px; - height: 35px; - flex-shrink: 0; - background-color: $color-main; - border: none; - border-radius: 10px; - filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); + &::placeholder { + color: #ababaa; + } + //TODO 작성 다 되면 (값 생기면) 하얀색으로 바뀌는 디자인 필요 + &:focus { + background-color: #fff; + } } +// 모바일 @media only screen and (min-width: 320px) and (max-width: 768px) { #x-div { padding: 10px 10px 0px 0px; @@ -83,25 +83,21 @@ form { #x { @include x-icon(18px, 18px); // 가로, 세로 } - p { - @include register(24px); + @include register(24px); // 폰트 사이즈 } - //TODO 작성 다 되면 (값 생기면) 하얀색으로 바뀌는 디자인 필요 - form { - input { - border: 1px solid $color-main; - border-radius: 5px; - height: 20px; - background-color: #f0f0f0; - } - & :focus { - background-color: #fff; - } + #btn_verify { + @include btn(53px, 35px, 15px); // 가로, 세로, 폰트 사이즈 + } + + #btn_register { + @include btn(147px, 35px, 15px); // 가로, 세로, 폰트 사이즈 + filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); } } +// 태블릿 ~ 데스크탑 @media only screen and (min-width: 768px) and (max-width: 1024px) { #x-div { padding: 10px 10px 0px 0px; @@ -110,10 +106,22 @@ form { @include x-icon(26px, 26px); // 가로, 세로 } p { - @include register(30px); + @include register(30px); // 폰트 사이즈 + } + form { + width: 30vw; + } + #btn_verify { + @include btn(53px, 35px, 15px); // 가로, 세로, 폰트 사이즈 + } + + #btn_register { + @include btn(147px, 35px, 15px); // 가로, 세로, 폰트 사이즈 + filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); } } +// 데스크탑 ~ @media only screen and (min-width: 1024px) { #x-div { padding-top: 10px; @@ -122,6 +130,17 @@ form { @include x-icon(30px, 30px); // 가로, 세로 } p { - @include register(36px); + @include register(36px); // 폰트 사이즈 + } + form { + width: 30vw; + } + #btn_verify { + @include btn(53px, 35px, 15px); // 가로, 세로, 폰트 사이즈 + } + + #btn_register { + @include btn(147px, 35px, 15px); // 가로, 세로, 폰트 사이즈 + filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); } }