@@ -2,6 +2,8 @@ import { useEffect } from 'react';
22import { useNavigate , useSearchParams } from 'react-router-dom' ;
33
44import {
5+ Doori ,
6+ DuriDog ,
57 Flex ,
68 MobileLayout ,
79 NaverLogo ,
@@ -33,14 +35,18 @@ const AuthPage = () => {
3335 } , [ data , error ] ) ;
3436
3537 return (
36- < MobileLayout >
38+ < RelativeMobileLayout >
3739 < Container direction = "column" >
3840 { /** 로고 */ }
39- < Logo src = "/images/logo.png" />
40- < Flex direction = "column" margin = "24px 0 0 0" >
41+ < DuriDog width = { 169 } height = { 143 } />
42+ < Flex direction = "column" >
4143 < Text typo = "Heading" > 두리묭실로</ Text >
4244 < Text typo = "Heading" > 쉽고 빠르게 예약해요!</ Text >
43- < Text typo = "Body3" colorCode = { theme . palette . Gray300 } >
45+ < Text
46+ typo = "Body3"
47+ colorCode = { theme . palette . Gray300 }
48+ margin = "8px 0 0 0"
49+ >
4450 최저가 예약부터 근처 미용샵까지
4551 </ Text >
4652 </ Flex >
@@ -63,27 +69,47 @@ const AuthPage = () => {
6369 </ Text >
6470 </ Contact >
6571 </ Container >
66- </ MobileLayout >
72+ < AuthWrapper >
73+ < Doori color = { theme . palette . White } height = { 40 } />
74+ < Text typo = "Body1" colorCode = { theme . palette . White } >
75+ 두리묭실 입장 중...
76+ </ Text >
77+ </ AuthWrapper >
78+ </ RelativeMobileLayout >
6779 ) ;
6880} ;
6981
82+ const RelativeMobileLayout = styled ( MobileLayout ) `
83+ position: relative;
84+ ` ;
85+
86+ const AuthWrapper = styled ( Flex ) `
87+ position: absolute;
88+ top: 0;
89+ left: 0;
90+ width: 100%;
91+ height: 100%;
92+ background-color: rgba(0, 0, 0, 0.5);
93+ flex-direction: column;
94+ gap: 16px;
95+ ` ;
96+
7097const Container = styled ( Flex ) `
7198 flex-grow: 1;
7299 position: relative;
73100` ;
74101
75- const Logo = styled . img `` ;
76-
77- const LoginButton = styled . button `
102+ const LoginButton = styled . div `
78103 width: 60px;
79104 height: 60px;
80105 margin-top: 20px;
81106` ;
82107
83- const Contact = styled ( Flex ) `
108+ const Contact = styled . div `
84109 position: absolute;
85110 bottom: 50px;
86111 height: fit-content;
112+ text-decoration: none;
87113` ;
88114
89115export default AuthPage ;
0 commit comments