[feat] 회원가입, 로그인 모달 UI 구현 (#28)

* feat : 글로벌스타일로 TYPO 추가 * feat : 로그인 모달 제작 * feat : 회원가입 모달 제작 * feat : 로그인, 회원가입 모달 스토리북 추가 * fix : REGULAR -> LIGHT 로 변경
boostcampwm2023 · Nov 15, 2023 · f0f7421 · f0f7421
1 parent 0d87307
commit f0f7421
Show file tree

Hide file tree

Showing 9 changed files with 459 additions and 0 deletions.
diff --git a/client/src/components/Modal/LoginModal/LoginModal.stories.tsx b/client/src/components/Modal/LoginModal/LoginModal.stories.tsx
@@ -0,0 +1,19 @@
+import type { StoryObj } from '@storybook/react'
+import LoginModal from './LoginModal'
+
+const meta = {
+  title: 'Modal/Login',
+  component: LoginModal,
+  tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    onConfirm: () => {},
+    onCancle: () => {},
+  },
+}
diff --git a/client/src/components/Modal/LoginModal/LoginModal.styles.tsx b/client/src/components/Modal/LoginModal/LoginModal.styles.tsx
@@ -0,0 +1,77 @@
+import styled from 'styled-components'
+import TYPO from '../../../styles/typo/TYPO'
+
+export const Backdrop = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 10;
+`
+
+export const Container = styled.div`
+  padding: 0 30px;
+`
+
+export const Modal = styled(Backdrop)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+`
+
+export const ModalView = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: white;
+  border-radius: 10px;
+  width: 32rem;
+  height: 20rem;
+  transition: height 0.5s ease;
+`
+export const HeaderText = styled.div`
+  ${TYPO.BOLD_M}
+  padding-top: 15px;
+  padding-bottom: 15px;
+`
+export const BodyText = styled.div`
+  ${TYPO.MEDIUM_M}
+  display: flex;
+  justify-content: start;
+`
+
+export const InputBox = styled.div`
+  margin-bottom: 15px;
+  display: flex;
+  flex-direction: column;
+`
+
+export const Input = styled.input`
+  ${TYPO.LIGHT_M}
+  background-color: #e6e6e6;
+  border: none;
+  height: 36px;
+  border-radius: 10px;
+`
+
+export const ButtonContainer = styled.div`
+  bottom: 0px;
+  height: 75px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+
+export const Button = styled.div`
+  ${TYPO.MEDIUM_M}
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid black;
+`
diff --git a/client/src/components/Modal/LoginModal/LoginModal.tsx b/client/src/components/Modal/LoginModal/LoginModal.tsx
@@ -0,0 +1,62 @@
+import { useState } from 'react'
+import * as styles from './LoginModal.styles'
+
+interface LoginModalProps {
+  /**
+   * 취소 버튼 눌렀을 때 실행되는 함수
+   */
+  onCancle: () => void
+  /**
+   * 확인 버튼 눌렀을 때 실행되는 함수
+   */
+  onConfirm: () => void
+}
+
+const LoginModal = ({ onCancle, onConfirm }: LoginModalProps) => {
+  const [id, setId] = useState<string>('')
+  const [password, setPassword] = useState<string>('')
+
+  return (
+    <styles.Backdrop onClick={onCancle}>
+      <styles.Modal>
+        <styles.ModalView
+          onClick={(e) => {
+            e.stopPropagation()
+          }}
+        >
+          <styles.Container>
+            <styles.HeaderText>로그인</styles.HeaderText>
+            <styles.InputBox>
+              <styles.BodyText>ID</styles.BodyText>
+              <styles.Input
+                value={id}
+                onChange={(e) => {
+                  setId(e.target.value)
+                }}
+              />
+            </styles.InputBox>
+            <styles.InputBox>
+              <styles.BodyText>비밀번호</styles.BodyText>
+              <styles.Input
+                value={password}
+                type="password"
+                onChange={(e) => {
+                  setPassword(e.target.value)
+                }}
+              />
+            </styles.InputBox>
+          </styles.Container>
+          <styles.ButtonContainer>
+            <styles.Button onClick={onConfirm} style={{ borderBottomLeftRadius: '10px' }}>
+              확인
+            </styles.Button>
+            <styles.Button onClick={onCancle} style={{ borderBottomRightRadius: '10px' }}>
+              취소
+            </styles.Button>
+          </styles.ButtonContainer>
+        </styles.ModalView>
+      </styles.Modal>
+    </styles.Backdrop>
+  )
+}
+export default LoginModal
diff --git a/client/src/components/Modal/RegisterModal/Register.stories.tsx b/client/src/components/Modal/RegisterModal/Register.stories.tsx
@@ -0,0 +1,19 @@
+import type { StoryObj } from '@storybook/react'
+import RegisterModal from './RegisterModal'
+
+const meta = {
+  title: 'Modal/Register',
+  component: RegisterModal,
+  tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    onConfirm: () => {},
+    onCancle: () => {},
+  },
+}
diff --git a/client/src/components/Modal/RegisterModal/RegisterModal.styles.tsx b/client/src/components/Modal/RegisterModal/RegisterModal.styles.tsx
@@ -0,0 +1,76 @@
+import styled from 'styled-components'
+import TYPO from '../../../styles/typo/TYPO'
+
+export const Backdrop = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 10;
+`
+
+export const Container = styled.div`
+  padding: 0 30px;
+`
+
+export const Modal = styled(Backdrop)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+`
+
+export const ModalView = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: white;
+  border-radius: 10px;
+  width: 32rem;
+  height: 24rem;
+  transition: height 0.5s ease;
+`
+export const HeaderText = styled.div`
+  ${TYPO.BOLD_M}
+  padding-top: 15px;
+`
+export const BodyText = styled.div`
+  ${TYPO.MEDIUM_M}
+  display: flex;
+  justify-content: start;
+`
+
+export const InputBox = styled.div`
+  margin-bottom: 15px;
+  display: flex;
+  flex-direction: column;
+`
+
+export const Input = styled.input`
+  ${TYPO.REGULAR_M}
+  background-color: #e6e6e6;
+  border: none;
+  height: 36px;
+  border-radius: 10px;
+`
+
+export const ButtonContainer = styled.div`
+  bottom: 0px;
+  height: 75px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+
+export const Button = styled.div`
+  ${TYPO.MEDIUM_M}
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid black;
+`
diff --git a/client/src/components/Modal/RegisterModal/RegisterModal.tsx b/client/src/components/Modal/RegisterModal/RegisterModal.tsx
@@ -0,0 +1,73 @@
+import { useState } from 'react'
+import * as styles from './RegisterModal.styles'
+
+interface RegisterModalProps {
+  /**
+   * 취소 버튼 눌렀을 때 실행되는 함수
+   */
+  onCancle: () => void
+  /**
+   * 확인 버튼 눌렀을 때 실행되는 함수
+   */
+  onConfirm: () => void
+}
+
+const RegisterModal = ({ onCancle, onConfirm }: RegisterModalProps) => {
+  const [id, setId] = useState<string>('')
+  const [password, setPassword] = useState<string>('')
+  const [confirmPassword, setConfirmPassword] = useState<string>('')
+
+  return (
+    <styles.Backdrop onClick={onCancle}>
+      <styles.Modal>
+        <styles.ModalView
+          onClick={(e) => {
+            e.stopPropagation()
+          }}
+        >
+          <styles.Container>
+            <styles.HeaderText>회원가입</styles.HeaderText>
+            <styles.InputBox>
+              <styles.BodyText>ID</styles.BodyText>
+              <styles.Input
+                value={id}
+                onChange={(e) => {
+                  setId(e.target.value)
+                }}
+              />
+            </styles.InputBox>
+            <styles.InputBox>
+              <styles.BodyText>비밀번호</styles.BodyText>
+              <styles.Input
+                value={password}
+                type="password"
+                onChange={(e) => {
+                  setPassword(e.target.value)
+                }}
+              />
+            </styles.InputBox>
+            <styles.InputBox>
+              <styles.BodyText>비밀번호 확인</styles.BodyText>
+              <styles.Input
+                value={confirmPassword}
+                type="password"
+                onChange={(e) => {
+                  setConfirmPassword(e.target.value)
+                }}
+              />
+            </styles.InputBox>
+          </styles.Container>
+          <styles.ButtonContainer>
+            <styles.Button onClick={onConfirm} style={{ borderBottomLeftRadius: '10px' }}>
+              확인
+            </styles.Button>
+            <styles.Button onClick={onCancle} style={{ borderBottomRightRadius: '10px' }}>
+              취소
+            </styles.Button>
+          </styles.ButtonContainer>
+        </styles.ModalView>
+      </styles.Modal>
+    </styles.Backdrop>
+  )
+}
+export default RegisterModal
diff --git a/client/src/styles/typo/Pretendard.tsx b/client/src/styles/typo/Pretendard.tsx
@@ -0,0 +1,64 @@
+import localFont from 'next/font/local';
+
+const extrabold = localFont({
+  src: './PretendardVariable.woff2',
+  weight: '800',
+  display: 'fallback',
+  style: 'normal',
+  variable: '--pretendard-bold',
+  fallback: ['system-ui'],
+});
+
+const bold = localFont({
+  src: './PretendardVariable.woff2',
+  weight: '700',
+  display: 'fallback',
+  style: 'normal',
+  variable: '--pretendard-bold',
+  fallback: ['system-ui'],
+});
+
+const semibold = localFont({
+  src: './PretendardVariable.woff2',
+  weight: '600',
+  display: 'fallback',
+  style: 'normal',
+  variable: '--pretendard-bold',
+  fallback: ['system-ui'],
+});
+
+const medium = localFont({
+  src: './PretendardVariable.woff2',
+  weight: '500',
+  display: 'fallback',
+  style: 'normal',
+  variable: '--pretendard-bold',
+  fallback: ['system-ui'],
+});
+
+const regular = localFont({
+  src: './PretendardVariable.woff2',
+  weight: '400',
+  display: 'fallback',
+  style: 'normal',
+  variable: '--pretendard-bold',
+  fallback: ['system-ui'],
+});
+
+const light = localFont({
+  src: './PretendardVariable.woff2',
+  weight: '300',
+  display: 'fallback',
+  style: 'normal',
+  variable: '--pretendard-bold',
+  fallback: ['system-ui'],
+});
+
+export {
+  extrabold as pretendardExtrabold,
+  bold as pretendardBold,
+  semibold as pretendardSemibold,
+  medium as pretendardMedium,
+  regular as pretendardRegular,
+  light as pretendardLight,
+};
diff --git a/client/src/styles/typo/PretendardVariable.woff2 b/client/src/styles/typo/PretendardVariable.woff2