feat: login페이지 Wrapper 컴포넌트 title 컴포넌트 작업 #5

login페이지 Wrapper 컴포넌트 title 컴포넌트 작업

pages/login.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import LoginContainer from "../src/login/LoginContainer";
+
+const Login = () => {
+  return <LoginContainer></LoginContainer>;
+};
+
+export default Login;

src/login/LoginContainer.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import Wrapper from "./components/Wrapper";
+import LoginContents from "./components/LoginContents";
+
+function LoginContainer() {
+  return (
+    <Wrapper>
+      <LoginContents></LoginContents>
+
+    </Wrapper>
+  );
+}
+
+export default LoginContainer;

src/login/components/LoginContents.tsx

@@ -0,0 +1,20 @@
+import React, { ReactNode } from "react";
+import styled from "styled-components";
+import loginBackground from "../../../public/svg/loginPage/loginBackground.svg";
+import Title from "./Title";
+
+function LoginContents() {
+  return (
+    <ContentsWrapper>
+      <Title>LOGIN</Title>
+    </ContentsWrapper>
+  );
+}
+
+export default LoginContents;
+
+const ContentsWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+
+`;

src/login/components/Title.tsx

@@ -0,0 +1,15 @@
+import React, { ReactNode } from "react";
+import styled from "styled-components";
+
+function Title({ children }: { children: string }) {
+  return <TitleH2>{children}</TitleH2>;
+}
+
+export default Title;
+
+const TitleH2 = styled.h2`
+  font-size: 85px;
+  font-weight: bold;
+  color: #ff6f00;
+  text-shadow: 0 3px 6px #ff8d00;
+`;

src/login/components/Wrapper.tsx

@@ -0,0 +1,26 @@
+import React, { ReactNode } from "react";
+import styled from "styled-components";
+
+function Wrapper({ children }: { children: ReactNode }) {
+  return (
+    <WrapperComponent>
+      <ContentsWrapper>{children}</ContentsWrapper>
+    </WrapperComponent>
+  );
+}
+
+export default Wrapper;
+
+const WrapperComponent = styled.div`
+  display: flex;
+  height: 936px;
+  width: 1920px;
+  align-items: center;
+  background-color: #fcf0e1;
+`;
+
+const ContentsWrapper = styled.div`
+  height: 710px;
+  width: 100%;
+  background-color: #fffdf9;
+`;