Merge branch 'main' into feature/ISSUE-40

# Conflicts: # src/components/Header.tsx
Gyeongdan · Jul 16, 2024 · 6ff73bd · 6ff73bd
2 parents 9b6078b + 6e3cf84
commit 6ff73bd
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 36 deletions.
diff --git a/public/images/kakao_login.png b/public/images/kakao_login.png
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -0,0 +1,66 @@
+import Image from 'next/image';
+
+import { Link, Stack, TextField, Typography } from '@mui/material';
+
+import GradientBox from '@/components/GradientBox';
+import color from '@/constants/color';
+
+const Page = () => {
+  return (
+    <GradientBox
+      sx={{ minHeight: 'calc(100vh - 100px)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+    >
+      <Stack alignItems="center" spacing={2}>
+        <Stack alignItems="center" bgcolor={color.transport_white} borderRadius={4} p={8} spacing={3} width="100%">
+          <Typography fontSize="24px" pb={4} variant="h3">
+            로그인 · 회원가입
+          </Typography>
+          <TextField
+            disabled
+            fullWidth
+            defaultValue="해당 로그인 폼은 장식입니다. (개발 예정)"
+            label="Email address"
+            sx={{ width: '90%' }}
+            variant="outlined"
+          />
+          <TextField
+            disabled
+            fullWidth
+            defaultValue="아래 카카오 로그인을 이용해주세요."
+            label="Password"
+            sx={{ width: '90%' }}
+            variant="outlined"
+          />
+          <Link height={50} href="/" position="relative" width="65%">
+            <Image
+              fill
+              priority
+              alt="카카오 로그인"
+              sizes="100%"
+              src="/images/kakao_login.png"
+              style={{ objectFit: 'contain' }}
+            />
+          </Link>
+        </Stack>
+        <Link
+          bgcolor={color.transport_white}
+          borderRadius={4}
+          color="black"
+          href="/test"
+          p={3}
+          underline="none"
+          width="100%"
+        >
+          <Typography textAlign="center" variant="h4">
+            나의 경단 유형 테스트해보면서 고민해보기
+          </Typography>
+        </Link>
+        <Typography fontSize="24px" p={2} py={6} textAlign="center" variant="h4" whiteSpace="pre-line">
+          {`경단을 100%를 경험해보세요!\n사용자 분석·추천 시스템으로 즐길 수 있다니 완전 럭키비키잖아~🍀`}
+        </Typography>
+      </Stack>
+    </GradientBox>
+  );
+};
+
+export default Page;
diff --git a/src/components/GradientBox.tsx b/src/components/GradientBox.tsx
@@ -7,10 +7,18 @@ interface GradientBoxProps extends BoxProps {
 }
 
 const StyledGradientBox = styled(Box)({
-  background: 'linear-gradient(rgba(29, 112, 241, 0), rgba(26, 197, 251, 1))',
-  opacity: 0.2,
-  height: '100%',
-  width: '100%',
+  position: 'relative',
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    background: 'linear-gradient(to bottom, rgba(29, 112, 241, 0), rgba(26, 197, 251, 1))',
+    opacity: 0.2,
+    zIndex: -1,
+  },
 });
 
 const GradientBox = ({ children, ...props }: GradientBoxProps) => {

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -39,47 +39,58 @@ const Header = () => {
           backgroundColor: 'white',
           zIndex: 1000,
         }}
+      >
+      <Stack
+        alignItems="center"
+        direction="row"
+        justifyContent="space-between"
+        height="100px"
+        maxWidth="100%"
+        p={3}
+        px={6}
       >
         <Stack
           alignItems="center"
-          direction="row"
-          height="100px"
-          justifyContent="space-between"
-          maxWidth="100%"
-          p={3}
-          px={6}
+         direction="row"
+         height="100px"
+         justifyContent="space-between"
+         maxWidth="100%"
+         p={3}
+         px={6}
         >
-          <Stack direction="row">
-            <Typography variant="h1">경단</Typography>
-            <Typography color={color.gray_dark} mt={2} variant="subtitle1">
-              경제를 단순하게
-            </Typography>
-          </Stack>
-          <Stack alignItems="center" direction="row" mt={2} spacing={6}>
-            {mainCategory.map((item) => (
-              <Link
-                key={item.id}
-                color={color.gray_dark}
-                href={item.path}
-                sx={{
-                  '&:hover': {
-                    backgroundColor: 'transparent',
-                  },
-                }}
-                underline="none"
-                variant="h4"
-              >
-                {item.label}
-              </Link>
-            ))}
+          <Typography variant="h1">경단</Typography>
+          <Typography color={color.gray_dark} mt={2} variant="subtitle1">
+            경제를 단순하게
+          </Typography>
+        </Stack>
+        <Stack alignItems="center" direction="row" mt={2} spacing={6}>
+          {mainCategory.map((item) => (
+            <Link
+              key={item.id}
+              color={color.gray_dark}
+              href={item.path}
+              sx={{
+                '&:hover': {
+                  backgroundColor: 'transparent',
+                },
+              }}
+              underline="none"
+              variant="h4"
+            >
+              {item.label}
+            </Link>
+          ))}
+
+          <Link href="/login" underline="none">
             <Button color="primary" sx={{ width: '100px' }} variant="outlined">
               LOGIN
             </Button>
-          </Stack>
+          </Link>
         </Stack>
+      </Stack>
       </Box>
-      <Box height="100px" />
-    </>
+    <Box height={"100px"}/>
+  </>
   );
 };
 

diff --git a/src/constants/color.ts b/src/constants/color.ts
@@ -5,6 +5,7 @@ const color = {
   gray_dark: '#3E3E3E',
   gradient_blue_dark: '#1D71F1',
   gradient_blue_light: '#1AC6FB',
+  transport_white: '#FFFFFF66',
 };
 
 export default color;