Merge pull request #49 from Fashion-Cloud/refact/i47

refact: 로그인, 회원가입 페이지 퍼블리싱 수정

pages/login/index.tsx

@@ -1,28 +1,25 @@
-import { Box, Grid } from '@mui/material';
+import Image from 'next/image';
+import cloudImage from 'src/assets/images/cloud.png';
 import LoginBox from 'src/components/User/LoginBox';
 
 export default function LoginPage() {
   return (
-    <Box
-      sx={{
-        width: '100%',
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
         height: '100vh',
-        backgroundColor: '#F5F8FC',
-        paddingTop: '100px',
       }}
     >
-      <Grid container alignItems="center">
-        <Grid item xs={9}>
-          <div
-            style={{
-              display: 'flex',
-              justifyContent: 'center',
-            }}
-          >
-            <LoginBox />
-          </div>
-        </Grid>
-      </Grid>
-    </Box>
+      <Image
+        src={cloudImage}
+        alt="background"
+        fill
+        objectFit="cover"
+        objectPosition="center"
+      />
+      <LoginBox />
+    </div>
   );
 }

pages/register/index.tsx

@@ -1,17 +1,25 @@
-import { Box } from '@mui/material';
-import TemperatureBox from 'src/components/MainLayout/InfoBox/Temperature';
+import Image from 'next/image';
+import cloudImage from 'src/assets/images/cloud.png';
 import RegisterBox from 'src/components/User/RegisterBox';
 
 export default function RegisterPage() {
   return (
-    <Box
-      display="flex"
-      justifyContent="center"
-      alignItems="center"
-      sx={{ width: '100%', height: '100vh', backgroundColor: '#F5F8FC' }}
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100vh',
+      }}
     >
-      <TemperatureBox />
+      <Image
+        src={cloudImage}
+        alt="background"
+        fill
+        objectFit="cover"
+        objectPosition="center"
+      />
       <RegisterBox />
-    </Box>
+    </div>
   );
 }

src/components/User/InputBox.tsx

@@ -14,8 +14,8 @@ export default function InputBox({ type, value, onChange, onKeyPress }: Props) {
       sx={{
         border: '1px solid #ccc',
         borderRadius: '0.4rem',
-        width: '73%',
-        height: '2.5rem',
+        width: '65%',
+        height: '0.4rem',
         display: 'flex',
         alignItems: 'center',
         padding: '1rem', // 내부 여백

src/components/User/LoginBox.tsx

@@ -1,11 +1,11 @@
-import { Box, Card } from '@mui/material';
+import { Card } from '@mui/material';
 import Image from 'next/image';
 import router from 'next/router';
 import { useState } from 'react';
 import useCheckAuth from 'src/api/hook/CheckAuthHook';
 import { useLogin } from 'src/api/hook/UserHook';
 
-import logo from '../../assets/images/bang.png';
+import logoUrl from '../../../public/title-logo.png';
 import InputBox from './InputBox';
 import QuestionLink from './QuestionLink';
 import SubmitButton from './SubmitButton';
@@ -56,19 +56,20 @@ export default function LoginBox() {
         alignItems: 'center',
         display: 'flex',
         flexDirection: 'column',
+        zIndex: 1,
+        backgroundColor: 'rgba(255, 255, 255, 0.8)',
       }}
     >
-      <Box sx={{ px: 1.5 }}>
-        <Image height={50} src={logo} alt="logo" />
-      </Box>
-      <div
+      <Image
+        src={logoUrl}
+        alt="logo"
         style={{
-          fontSize: '2rem',
-          marginBottom: '3.5rem',
+          width: '19rem',
+          height: '4rem',
+          marginBottom: '5rem',
+          marginTop: '1rem',
         }}
-      >
-        Fashion Cloud
-      </div>
+      />
       <UserLabel label="이메일*" />
       <InputBox
         value={email}

src/components/User/RegisterBox.tsx

@@ -4,6 +4,7 @@ import router from 'next/router';
 import { useState } from 'react';
 import { useSignup } from 'src/api/hook/UserHook';
 
+import logoUrl from '../../../public/title-logo.png';
 import userImage from '../../assets/images/user.png';
 import InputBox from './InputBox';
 import QuestionLink from './QuestionLink';
@@ -45,21 +46,30 @@ export default function RegisterBox() {
         alignItems: 'center',
         display: 'flex',
         flexDirection: 'column',
+        zIndex: 1,
+        backgroundColor: 'rgba(255, 255, 255, 0.8)',
       }}
     >
+      <Image
+        style={{
+          width: '19rem',
+          height: '4rem',
+          marginBottom: '1rem',
+          marginTop: '1rem',
+        }}
+        src={logoUrl}
+        alt="logo"
+      />
       <div
         style={{
-          fontSize: '2rem',
+          position: 'relative',
         }}
       >
-        Fashion Cloud
-      </div>
-      <div style={{ position: 'relative' }}>
         <Image
           alt="사용자 프로필 사진"
           src={userImage}
-          width={120}
-          height={120}
+          width={115}
+          height={110}
         />
         <button
           style={{
@@ -68,7 +78,7 @@ export default function RegisterBox() {
             cursor: 'pointer',
             width: '28px',
             height: '28px',
-            bottom: '18px',
+            bottom: '9px',
             right: '18px',
             border: 'none',
             color: 'white',

src/components/common/MainDrawer.tsx

@@ -55,6 +55,10 @@ const MiniDrawer = styled(Drawer, {
 export default function MainDrawer() {
   const { pathname } = useRouter();
 
+  if (pathname === '/login' || pathname === '/register') {
+    return null;
+  }
+
   const Menus = [
     { title: 'Home', src: '/', icon: <HomeIcon style={{ fontSize: 30 }} /> },
     {