Merge pull request #83 from Team-Lecue/feature/Register

[ Register ] dev 머지 PR입니다!

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};
+`;

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<React.SetStateAction<boolean>>;
+};
+
+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<HTMLInputElement>) => {
+    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 (
+    <S.NicknameWrapper>
+      <S.Question>레큐에서 사용할 닉네임</S.Question>
+      <S.InputContainer isEmpty={nickname.length === 0}>
+        <S.Input
+          type="text"
+          value={nickname}
+          placeholder="닉네임을 입력해주세요."
+          onChange={handleChangeInput}
+        />
+        <S.WordCount>({wordCnt}/8)</S.WordCount>
+      </S.InputContainer>
+    </S.NicknameWrapper>
+  );
+}
+
+export default NicknameInput;

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 17rem 6rem 0;
+`;

src/Register/components/RegisterLogo/index.tsx

@@ -0,0 +1,12 @@
+import { ImgLogoLecue } from '../../../assets';
+import * as S from './RegisterLogo.style';
+
+function RegisterLogo() {
+  return (
+    <S.LogoWrapper>
+      <ImgLogoLecue />
+    </S.LogoWrapper>
+  );
+}
+
+export default RegisterLogo;

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;
+`;

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 (
+    <S.ButtonWrapper>
+      <Button variant="complete" disabled={!isActive}>
+        완료
+      </Button>
+    </S.ButtonWrapper>
+  );
+}
+
+export default SubmitButton;

src/Register/page/Register.style.ts

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.article`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  width: 100vw;
+  height: 100dvh;
+  padding: 0 1.6rem;
+
+  background-color: ${({ theme }) => theme.colors.background};
+`;

src/Register/page/index.tsx

@@ -0,0 +1,20 @@
+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 (
+    <S.Wrapper>
+      <RegisterLogo />
+      <NicknameInput setIsActive={setIsActive} />
+      <SubmitButton isActive={isActive} />
+    </S.Wrapper>
+  );
+}
+
+export default Register;

src/Router.tsx

@@ -1,5 +1,7 @@
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
+import HomePage from './Home/page/HomePage';
+import Register from './Register/page';
 import DetailPage from './Detail/page/DetailPage';
 import HealthTest from './HealthTest';
 import LecueNotePage from './LecueNote/page/LeceuNotePage';
@@ -11,6 +13,8 @@ function Router() {
   return (
     <BrowserRouter>
       <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/register" element={<Register />} />
         <Route path="/" element={<SplashPage />} />
         <Route path="/login" element={<Login />} />
         <Route path="create-note" element={<LecueNotePage />} />