From 0083fd8b78f8a429db69c6174b0eee7c24f91cb5 Mon Sep 17 00:00:00 2001
From: gracekim527 <lemonherb0323@naver.com>
Date: Fri, 1 Nov 2024 21:41:12 +0900
Subject: [PATCH] =?UTF-8?q?:sparkles:=20Feat:=20=ED=8C=80=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84=20?=
 =?UTF-8?q?(#4)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Router.tsx                                |  2 +
 src/components/create/TeamButton.tsx          | 19 +++++++++
 src/components/create/style.ts                | 31 +++++++++++++++
 .../HintText.tsx => hintText/HintText1.tsx}   | 24 ++++++++----
 src/pages/create/Create.tsx                   | 39 +++++++++++++++++++
 src/pages/login/Login.tsx                     |  8 +++-
 6 files changed, 114 insertions(+), 9 deletions(-)
 create mode 100644 src/components/create/TeamButton.tsx
 create mode 100644 src/components/create/style.ts
 rename src/components/{login/HintText.tsx => hintText/HintText1.tsx} (53%)
 create mode 100644 src/pages/create/Create.tsx

diff --git a/src/Router.tsx b/src/Router.tsx
index 40e8ca2..41ca73c 100644
--- a/src/Router.tsx
+++ b/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>
   );
diff --git a/src/components/create/TeamButton.tsx b/src/components/create/TeamButton.tsx
new file mode 100644
index 0000000..e17ca77
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/create/style.ts b/src/components/create/style.ts
new file mode 100644
index 0000000..3411e67
--- /dev/null
+++ b/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;
+`;
diff --git a/src/components/login/HintText.tsx b/src/components/hintText/HintText1.tsx
similarity index 53%
rename from src/components/login/HintText.tsx
rename to src/components/hintText/HintText1.tsx
index ff73c49..8b3342b 100644
--- a/src/components/login/HintText.tsx
+++ b/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,7 +23,7 @@ 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;
@@ -29,11 +31,19 @@ const HintTextP1 = styled.p`
   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;
diff --git a/src/pages/create/Create.tsx b/src/pages/create/Create.tsx
new file mode 100644
index 0000000..c825bd6
--- /dev/null
+++ b/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;
diff --git a/src/pages/login/Login.tsx b/src/pages/login/Login.tsx
index 926e161..7b778f2 100644
--- a/src/pages/login/Login.tsx
+++ b/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 />