Merge pull request #5 from GraceKim527/feat/#4-CreateTeam

[Feat/#4] 팀 생성 페이지 구현

src/Router.tsx

@@ -1,12 +1,14 @@
 // Router.tsx
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import Login from "./pages/login/Login";
+import Create from "@pages/create/Create";
 
 const Router: React.FC = () => {
   return (
     <BrowserRouter>
       <Routes>
         <Route path="/login" element={<Login />} />
+        <Route path="/create" element={<Create />} />
       </Routes>
     </BrowserRouter>
   );

src/components/create/TeamButton.tsx

@@ -0,0 +1,19 @@
+import React, { useState } from "react";
+import * as S from "./style";
+
+export default function TeamButton() {
+  const [count, setCount] = useState(0);
+
+  const increment = () => setCount(count + 1);
+  const decrement = () => setCount(count > 0 ? count - 1 : 0);
+
+  return (
+    <S.Container>
+      <S.Button onClick={decrement} disabled={count === 0}>
+        -
+      </S.Button>
+      <S.PersonNum>{count} 명</S.PersonNum>
+      <S.Button onClick={increment}>+</S.Button>
+    </S.Container>
+  );
+}

src/components/create/style.ts

@@ -0,0 +1,31 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 36px;
+`;
+
+export const Button = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 65px;
+  height: 65px;
+  border-radius: 50%;
+  background: #ced4da;
+  color: #343a40;
+  text-align: center;
+  font-family: Pretendard;
+  font-size: 36px;
+  font-weight: 600;
+`;
+
+export const PersonNum = styled.span`
+  color: #343a40;
+  text-align: center;
+  font-family: Pretendard;
+  font-size: 36px;
+  font-weight: 600;
+`;

src/components/login/HintText.tsx → src/components/hintText/HintText1.tsx

@@ -7,10 +7,12 @@ const HintTextWrapper = styled.div`
   gap: 10px;
 `;
 
-const HintTextHeadline2 = styled.h2`
+const HintTextHeadline2 = styled.h2<{ width?: string }>`
+  width: ${({ width }) => width || "240px"};
+  margin: 0 auto;
   color: #343a40;
   text-align: center;
-  font-family: Pretendard;
+  font-family: "Pretendard";
   font-size: 28px;
   font-style: normal;
   font-weight: 600;
@@ -21,19 +23,27 @@ const HintTextHeadline2 = styled.h2`
 const HintTextP1 = styled.p`
   color: #868e96;
   text-align: center;
-  font-family: Pretendard;
+  font-family: "Pretendard";
   font-size: 14px;
   font-style: normal;
   font-weight: 500;
   line-height: 22px; /* 157.143% */
   letter-spacing: -0.1px;
 `;
 
-export default function HintText() {
+interface TextProps {
+  headline: string;
+  paragraph: string;
+  width?: string;
+}
+
+const HintText1: React.FC<TextProps> = ({ headline, paragraph, width }) => {
   return (
     <HintTextWrapper>
-      <HintTextHeadline2>당신의 정보를 입력해주세요.</HintTextHeadline2>
-      <HintTextP1>팀을 참가할 때 간단한 정보를 입력받아요.</HintTextP1>
+      <HintTextHeadline2 width={width}>{headline}</HintTextHeadline2>
+      <HintTextP1>{paragraph}</HintTextP1>
     </HintTextWrapper>
   );
-}
+};
+
+export default HintText1;

src/pages/create/Create.tsx

@@ -0,0 +1,39 @@
+import styled from "styled-components";
+import Button from "@components/button/Button";
+import HintText from "@components/hintText/HintText1";
+import TeamButton from "@components/create/TeamButton";
+
+const Container = styled.div`
+  height: calc(100vh - 80px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 120px;
+`;
+
+const ButtonLayout = styled.div`
+  position: relative;
+  bottom: 10px;
+`;
+
+const Create: React.FC = () => {
+  return (
+    <>
+      <Container>
+        <HintText
+          width="240px"
+          headline="동기화 할 팀원의 수를 선택해주세요. "
+          paragraph="팀을 생성하신 분에게 자동으로 '팀장'역할이 부여돼요."
+        />
+        <TeamButton />
+      </Container>
+
+      <ButtonLayout>
+        <Button type="submit" link="" name="팀 동기화 시작하기" />
+      </ButtonLayout>
+    </>
+  );
+};
+
+export default Create;

src/pages/login/Login.tsx

@@ -1,7 +1,7 @@
 // Login.tsx
 import Input from "@components/input/Input";
 import DateInput from "@components/input/DateInput";
-import HintText from "@components/login/HintText";
+import HintText from "@components/hintText/HintText1";
 import React from "react";
 import styled from "styled-components";
 import Button from "@components/button/Button";
@@ -30,7 +30,11 @@ const Login: React.FC = () => {
   return (
     <>
       <Container>
-        <HintText />
+        <HintText
+          width="320px"
+          headline="당신의 정보를 입력해주세요."
+          paragraph="팀을 참가할 때 간단한 정보를 입력받아요."
+        />
         <InputForm>
           <Input label="이름" essential hint="" />
           <DateInput />