From 2b7df3f6e05e08796a24b832a1ffaadfb41e7e23 Mon Sep 17 00:00:00 2001 From: Doyun Lee Date: Wed, 10 Jan 2024 06:37:00 +0900 Subject: [PATCH 1/8] =?UTF-8?q?feat:=20=EB=9D=BC=EC=9A=B0=ED=84=B0=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Router.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Router.tsx b/src/Router.tsx index 16e4af3a..0a8f9d2a 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -1,12 +1,14 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom'; import HomePage from './Home/page/HomePage'; +import Register from './Register/page'; function Router() { return ( } /> + } /> ); From 3b2f05b06b7d2dceb2a5d4d16849ed97cda9df5a Mon Sep 17 00:00:00 2001 From: Doyun Lee Date: Wed, 10 Jan 2024 15:56:54 +0900 Subject: [PATCH 2/8] =?UTF-8?q?feat:=20Register=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Register/page/Register.style.ts | 12 ++++++++++++ src/Register/page/index.tsx | 14 ++++++++++++++ 2 files changed, 26 insertions(+) create mode 100644 src/Register/page/Register.style.ts create mode 100644 src/Register/page/index.tsx diff --git a/src/Register/page/Register.style.ts b/src/Register/page/Register.style.ts new file mode 100644 index 00000000..db704f77 --- /dev/null +++ b/src/Register/page/Register.style.ts @@ -0,0 +1,12 @@ +import styled from '@emotion/styled'; + +export const Wrapper = styled.article` + display: flex; + align-items: center; + flex-direction: column; + + width: 100vw; + height: 100dvh; + + background-color: ${({ theme }) => theme.colors.background}; +`; diff --git a/src/Register/page/index.tsx b/src/Register/page/index.tsx new file mode 100644 index 00000000..d70268d9 --- /dev/null +++ b/src/Register/page/index.tsx @@ -0,0 +1,14 @@ +import NicknameInput from '../components/NicknameInput'; +import RegisterLogo from '../components/RegisterLogo'; +import * as S from './Register.style'; + +function Register() { + return ( + + + + + ); +} + +export default Register; From e288eac3f12e027dd21243622c2fddac1f9afc78 Mon Sep 17 00:00:00 2001 From: Doyun Lee Date: Wed, 10 Jan 2024 15:57:19 +0900 Subject: [PATCH 3/8] =?UTF-8?q?chore:=20Register=20=ED=8F=B4=EB=8D=94?= =?UTF-8?q?=EA=B5=AC=EC=A1=B0=20=EA=B5=AC=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Register/constants/.gitkeep | 0 src/Register/hooks/.gitkeep | 0 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/Register/constants/.gitkeep create mode 100644 src/Register/hooks/.gitkeep diff --git a/src/Register/constants/.gitkeep b/src/Register/constants/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/src/Register/hooks/.gitkeep b/src/Register/hooks/.gitkeep new file mode 100644 index 00000000..e69de29b From a169a772dfbd922e311f55c083721933b8788676 Mon Sep 17 00:00:00 2001 From: Doyun Lee Date: Wed, 10 Jan 2024 15:58:05 +0900 Subject: [PATCH 4/8] =?UTF-8?q?feat:=20RegisterLogo=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/RegisterLogo/RegisterLogo.style.ts | 6 ++++++ src/Register/components/RegisterLogo/index.tsx | 12 ++++++++++++ 2 files changed, 18 insertions(+) create mode 100644 src/Register/components/RegisterLogo/RegisterLogo.style.ts create mode 100644 src/Register/components/RegisterLogo/index.tsx diff --git a/src/Register/components/RegisterLogo/RegisterLogo.style.ts b/src/Register/components/RegisterLogo/RegisterLogo.style.ts new file mode 100644 index 00000000..387bb5b1 --- /dev/null +++ b/src/Register/components/RegisterLogo/RegisterLogo.style.ts @@ -0,0 +1,6 @@ +import styled from '@emotion/styled'; + +export const LogoWrapper = styled.section` + width: 100%; + padding: 6rem 18.6rem 6rem 1.6rem; +`; diff --git a/src/Register/components/RegisterLogo/index.tsx b/src/Register/components/RegisterLogo/index.tsx new file mode 100644 index 00000000..7c0d2444 --- /dev/null +++ b/src/Register/components/RegisterLogo/index.tsx @@ -0,0 +1,12 @@ +import { ImgLogoLecue } from '../../../assets'; +import * as S from './RegisterLogo.style'; + +function RegisterLogo() { + return ( + + + + ); +} + +export default RegisterLogo; From 899642fa22d87b9077b97fd1fa76337917fd82e8 Mon Sep 17 00:00:00 2001 From: Doyun Lee Date: Thu, 11 Jan 2024 02:50:31 +0900 Subject: [PATCH 5/8] =?UTF-8?q?feat:=20NicknameInput=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../NicknameInput/NicknameInput.style.ts | 47 +++++++++++++++ .../components/NicknameInput/index.tsx | 57 +++++++++++++++++++ 2 files changed, 104 insertions(+) create mode 100644 src/Register/components/NicknameInput/NicknameInput.style.ts create mode 100644 src/Register/components/NicknameInput/index.tsx diff --git a/src/Register/components/NicknameInput/NicknameInput.style.ts b/src/Register/components/NicknameInput/NicknameInput.style.ts new file mode 100644 index 00000000..1acceffc --- /dev/null +++ b/src/Register/components/NicknameInput/NicknameInput.style.ts @@ -0,0 +1,47 @@ +import styled from '@emotion/styled'; + +export const NicknameWrapper = styled.section` + display: flex; + align-items: center; + flex-direction: column; + + width: 100%; + gap: 1.7rem; +`; + +export const Question = styled.p` + width: 100%; + + color: ${({ theme }) => theme.colors.BG}; + + ${({ theme }) => theme.fonts.Head2_SB_18}; +`; + +export const InputContainer = styled.div<{ isEmpty: boolean }>` + display: flex; + justify-content: space-between; + align-items: center; + + width: 100%; + padding: 1.9rem 2rem; + gap: 1.6rem; + + ${({ theme }) => theme.fonts.Body3_R_14}; + + border: 0.1rem solid + ${({ theme, isEmpty }) => (isEmpty ? theme.colors.LG : theme.colors.BG)}; + border-radius: 0.8rem; + background-color: ${({ theme }) => theme.colors.white}; +`; + +export const Input = styled.input` + width: 100%; + + color: ${({ theme }) => theme.colors.BG}; + ${({ theme }) => theme.fonts.Body2_M_14}; +`; + +export const WordCount = styled.p` + color: ${({ theme }) => theme.colors.WG}; + ${({ theme }) => theme.fonts.E_Body2_R_14}; +`; diff --git a/src/Register/components/NicknameInput/index.tsx b/src/Register/components/NicknameInput/index.tsx new file mode 100644 index 00000000..d524dc1b --- /dev/null +++ b/src/Register/components/NicknameInput/index.tsx @@ -0,0 +1,57 @@ +import React, { useEffect, useState } from 'react'; + +import * as S from './NicknameInput.style'; + +type setIsActiveProps = { + setIsActive: React.Dispatch>; +}; + +function NicknameInput({ setIsActive }: setIsActiveProps) { + const [wordCnt, setWordCnt] = useState(0); + const [nickname, setNickname] = useState(''); + + /** 영어, 숫자, 문자, 공백인지 체크하는 정규식 함수 */ + const checkInputRange = (str: string) => { + const regExp = /[ㄱ-ㅎㅏ-ㅣ가-힣0-9a-zA-Z\s]/g; + return regExp.test(str) || str.length === 0; + }; + + /** 8자 이하 & 한글, 영어, 숫자만 입력 가능하도록 & 첫번째 글자는 공백 불가능 체크 함수*/ + const handleChangeInput = (e: React.ChangeEvent) => { + const input = e.target.value; + + if ( + e.target.value.length <= 8 && + checkInputRange(input[input.length - 1]) + ) { + if (e.target.value === ' ') { + setNickname(''); + setWordCnt(0); + } else { + setNickname(e.target.value); + setWordCnt(e.target.value.length); + } + } + }; + + useEffect(() => { + wordCnt >= 2 ? setIsActive(true) : setIsActive(false); + }, [wordCnt]); + + return ( + + 레큐에서 사용할 닉네임 + + + ({wordCnt}/8) + + + ); +} + +export default NicknameInput; From 5aff8177018b12a5eb3c527ba254ba24ba90a5ff Mon Sep 17 00:00:00 2001 From: Doyun Lee Date: Thu, 11 Jan 2024 02:51:22 +0900 Subject: [PATCH 6/8] =?UTF-8?q?chore:=20RegisterLogo=20padding=EA=B0=92=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Register/components/RegisterLogo/RegisterLogo.style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Register/components/RegisterLogo/RegisterLogo.style.ts b/src/Register/components/RegisterLogo/RegisterLogo.style.ts index 387bb5b1..ca6b51e9 100644 --- a/src/Register/components/RegisterLogo/RegisterLogo.style.ts +++ b/src/Register/components/RegisterLogo/RegisterLogo.style.ts @@ -2,5 +2,5 @@ import styled from '@emotion/styled'; export const LogoWrapper = styled.section` width: 100%; - padding: 6rem 18.6rem 6rem 1.6rem; + padding: 6rem 17rem 6rem 0; `; From 9e52afc3825e1e04b8a014ff820a2cdb08ac479e Mon Sep 17 00:00:00 2001 From: Doyun Lee Date: Thu, 11 Jan 2024 02:51:39 +0900 Subject: [PATCH 7/8] =?UTF-8?q?feat:=20SubmitButton=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SubmitButton/SubmitButton.style.ts | 11 +++++++++++ src/Register/components/SubmitButton/index.tsx | 18 ++++++++++++++++++ 2 files changed, 29 insertions(+) create mode 100644 src/Register/components/SubmitButton/SubmitButton.style.ts create mode 100644 src/Register/components/SubmitButton/index.tsx diff --git a/src/Register/components/SubmitButton/SubmitButton.style.ts b/src/Register/components/SubmitButton/SubmitButton.style.ts new file mode 100644 index 00000000..0690699d --- /dev/null +++ b/src/Register/components/SubmitButton/SubmitButton.style.ts @@ -0,0 +1,11 @@ +import styled from '@emotion/styled'; + +export const ButtonWrapper = styled.section` + display: flex; + justify-content: center; + align-items: end; + + width: 100%; + height: calc(100dvh - 26.7rem); + margin-bottom: 2rem; +`; diff --git a/src/Register/components/SubmitButton/index.tsx b/src/Register/components/SubmitButton/index.tsx new file mode 100644 index 00000000..92b3c112 --- /dev/null +++ b/src/Register/components/SubmitButton/index.tsx @@ -0,0 +1,18 @@ +import Button from '../../../components/common/Button'; +import * as S from './SubmitButton.style'; + +type SubmitButtonProps = { + isActive: boolean; +}; + +function SubmitButton({ isActive }: SubmitButtonProps) { + return ( + + + + ); +} + +export default SubmitButton; From c12cdc8f527763f1f854376c002f5d4a641d8354 Mon Sep 17 00:00:00 2001 From: Doyun Lee Date: Thu, 11 Jan 2024 02:52:02 +0900 Subject: [PATCH 8/8] =?UTF-8?q?feat:=20Register=20=EC=A0=84=EC=B2=B4=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Register/page/Register.style.ts | 1 + src/Register/page/index.tsx | 8 +++++++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/Register/page/Register.style.ts b/src/Register/page/Register.style.ts index db704f77..a7fdcd64 100644 --- a/src/Register/page/Register.style.ts +++ b/src/Register/page/Register.style.ts @@ -7,6 +7,7 @@ export const Wrapper = styled.article` width: 100vw; height: 100dvh; + padding: 0 1.6rem; background-color: ${({ theme }) => theme.colors.background}; `; diff --git a/src/Register/page/index.tsx b/src/Register/page/index.tsx index d70268d9..a12ec37e 100644 --- a/src/Register/page/index.tsx +++ b/src/Register/page/index.tsx @@ -1,12 +1,18 @@ +import { useState } from 'react'; + import NicknameInput from '../components/NicknameInput'; import RegisterLogo from '../components/RegisterLogo'; +import SubmitButton from '../components/SubmitButton'; import * as S from './Register.style'; function Register() { + const [isActive, setIsActive] = useState(false); + return ( - + + ); }