🔀 로그인 페이지 제작

src/app/(page)/signin/page.tsx

@@ -0,0 +1,17 @@
+'use client'
+
+import React from 'react'
+import * as S from './style'
+import SignInItem from '@/components/Signin/organisms/SignInItem'
+
+const Signin = () => {
+  return (
+    <S.Wrapper>
+      <S.FormContainer>
+        <SignInItem />
+      </S.FormContainer>
+    </S.Wrapper>
+  )
+}
+
+export default Signin

src/app/(page)/signin/style.ts

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled'
+
+export const Wrapper = styled.div`
+  padding: 70px 20px;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+`
+
+export const FormContainer = styled.div`
+  height: 100%;
+  width: 722px;
+`

src/components/Signin/atoms/FormItem/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import * as S from './style'
+import Input from '@/components/common/Input'
+
+interface Props {
+  text: string
+  type: string
+  placeholder: string
+}
+
+const FormItem = ({ text, type, placeholder }: Props) => {
+  return (
+    <S.Wrapper>
+      <S.Text>{text}</S.Text>
+      <Input type={type} placeholder={placeholder} />
+    </S.Wrapper>
+  )
+}
+
+export default FormItem

src/components/Signin/atoms/FormItem/style.tsx

@@ -0,0 +1,12 @@
+import styled from '@emotion/styled'
+import theme from '@/styles/theme'
+
+export const Wrapper = styled.div`
+  width: 100%;
+`
+
+export const Text = styled.p`
+  ${theme.text.title.smallB}
+  display: block;
+  margin-bottom: 24px;
+`

src/components/Signin/molecules/SignInForm/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import FormItem from '../../atoms/FormItem'
+import * as S from './style'
+import Button from '@/components/common/Button'
+
+const SignInForm = () => {
+  return (
+    <S.Wrapper>
+      <FormItem
+        text='학교 이메일 입력하기'
+        type='email '
+        placeholder='이메일를 입력해주세요'
+      />
+      <FormItem
+        text='비밀번호 입력하기'
+        type='password '
+        placeholder='비밀번호를 입력해주세요s'
+      />
+      <Button text='확인' />
+    </S.Wrapper>
+  )
+}
+
+export default SignInForm

src/components/Signin/molecules/SignInForm/style.ts

@@ -0,0 +1,8 @@
+import styled from '@emotion/styled'
+
+export const Wrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+`

src/components/Signin/molecules/SignInLogo/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import * as S from './style'
+import { Logo } from '@/assets/svg'
+
+const SignInLogo = () => {
+  return (
+    <S.Wrapper>
+      <S.LogoContainer>
+        <Logo />
+      </S.LogoContainer>
+      <S.Title>회원가입</S.Title>
+    </S.Wrapper>
+  )
+}
+
+export default SignInLogo

src/components/Signin/molecules/SignInLogo/style.ts

@@ -0,0 +1,28 @@
+import styled from '@emotion/styled'
+import theme from '@/styles/theme'
+
+export const Wrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 20px;
+  width: 100%;
+`
+
+export const LogoContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  svg {
+    @media (max-width: 460px) {
+      width: 80%;
+    }
+  }
+`
+
+export const Title = styled.p`
+  ${theme.text.title.largeM};
+  color: ${theme.color.main[800]};
+  text-align: center;
+`

src/components/Signin/organisms/SignInItem/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import SignInForm from '../../molecules/SignInForm'
+import SignInLogo from '../../molecules/SignInLogo'
+
+const SignInItem = () => {
+  return (
+    <div>
+      <SignInLogo />
+      <SignInForm />
+    </div>
+  )
+}
+
+export default SignInItem