[Feature] #13 - 확정 페이지 구현

src/Router.tsx

@@ -5,16 +5,18 @@ import Create from "@pages/create/Create";
 import Test from "@pages/test/Test";
 import Invite from "@pages/invite/Invite";
 import Result from "@pages/result/Result";
+import Confirm from "@pages/confirm/Confirm";
 
 const Router: React.FC = () => {
   return (
     <BrowserRouter>
       <Routes>
         <Route path="/login" element={<Login />} />
         <Route path="/create" element={<Create />} />
-        <Route path="test/:page" element={<Test />} />
+        <Route path="/test/:page" element={<Test />} />
         <Route path="/invite" element={<Invite />} />
         <Route path="/result" element={<Result />} />
+        <Route path="/confirm" element={<Confirm />} />
       </Routes>
     </BrowserRouter>
   );

src/components/common/container/style.ts

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  margin-top: 5%;
+  width: 90%;
+  min-height: 100vh;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  flex-direction: column;
+  gap: 2rem;
+`;

src/components/common/wrapper/style.ts

@@ -0,0 +1,10 @@
+import styled from "styled-components";
+
+export const Wrapper = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  gap: 2rem;
+  flex-direction: column;
+`;

src/components/create/TeamButton.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import * as S from "./style";
 
 export default function TeamButton() {

src/hooks/useUserProfile.ts

@@ -14,7 +14,7 @@ export const useUserProfile = () => {
       );
       setResponse(response);
     } catch (err) {
-      // console.log(error);
+      setError("박세호");
     }
   };
   useEffect(() => {

src/pages/confirm/Confirm.tsx

@@ -0,0 +1,38 @@
+import { Container } from "@components/common/container/style";
+import { Wrapper } from "@components/common/wrapper/style";
+import HintText2 from "@components/common/hintText/HintText2";
+import { InputContainer } from "./_components/inputContainer/InputContainer";
+import Button from "@components/common/button/Button";
+
+const Confirm: React.FC = () => {
+  return (
+    <Container>
+      <Wrapper>
+        <Wrapper>
+          <HintText2
+            headline="이제 직접 소통해봐요."
+            paragraph="이제부터는 ‘팀장’만 작성할 수 있어요.
+팀원들과 상의해서 우리 팀은 어떤 팀인지 정해봐요."
+          />
+        </Wrapper>
+        <Wrapper>
+          <InputContainer label="팀명" defaultText="팀명을 적어주세요!" />
+          <InputContainer
+            label="우리팀만의 규칙"
+            defaultText="1. 매일 데일리 스크럼 진행하기
+2. 본인의 의견 확실하게 밝히기
+3. 시간 나면 온라인 모각코 같이 진행하기"
+            isTextArea={true}
+          />
+          <InputContainer
+            label="우리팀의 목표"
+            defaultText="팀 목표를 적어주세요!"
+          />
+        </Wrapper>
+      </Wrapper>
+      <Button name="동기화 끝내기" link={`/next`} $width="100%" />
+    </Container>
+  );
+};
+
+export default Confirm;

src/pages/confirm/_components/inputContainer/InputContainer.tsx

@@ -0,0 +1,24 @@
+import * as S from "./style";
+
+interface InputContainerProps {
+  label: string;
+  defaultText: string;
+  isTextArea?: boolean;
+}
+
+export const InputContainer = ({
+  label,
+  defaultText,
+  isTextArea,
+}: InputContainerProps) => {
+  return (
+    <S.InputWrapper>
+      <S.Label>{label}</S.Label>
+      {isTextArea ? (
+        <S.TextArea placeholder={defaultText} />
+      ) : (
+        <S.Input placeholder={defaultText} />
+      )}
+    </S.InputWrapper>
+  );
+};

src/pages/confirm/_components/inputContainer/style.ts

@@ -0,0 +1,33 @@
+import styled from "styled-components";
+
+export const InputWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+
+export const Label = styled.label`
+  font-family: Pretendard;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: -0.1px;
+  padding: 0.2rem;
+`;
+
+export const Input = styled.input`
+  width: 100%;
+  height: 3rem;
+  border-radius: 8px;
+  border: 1px solid #ced4da;
+  padding: 0 0.5rem;
+`;
+
+export const TextArea = styled.textarea`
+  width: 100%;
+  height: 10rem;
+  border-radius: 8px;
+  border: 1px solid #ced4da;
+  padding: 0.5rem;
+`;

src/pages/result/Result.tsx

@@ -1,4 +1,5 @@
-import * as S from "./style";
+import { Container } from "@components/common/container/style";
+import { Wrapper } from "@components/common/wrapper/style";
 import HintText2 from "@components/common/hintText/HintText2";
 import { ResultCard } from "./_components/ResultCard";
 import Button from "@components/common/button/Button";
@@ -15,24 +16,24 @@ const SECOND_MOCK_TEXT: string[] = [
 
 const Result: React.FC = () => {
   return (
-    <S.Container>
-      <S.ContentWrapper>
+    <Container>
+      <Wrapper>
         <HintText2
           headline="AI가 분석한 팀의 성향입니다."
           paragraph="각 팀원들이 답변한 내용을 토대로 팀의 성향을 진단해줘요.
         우리 팀 성향이 맞는지 확인해보고, 팀원들과 상의해볼까요?"
         />
-        <S.ContentWrapper>
+        <Wrapper>
           <ResultCard
-            title="AI가 진단한 F4 팀의 성향 요약"
+            title="AI가 진단한 팀의 성향 요약"
             contents={FIRST_MOCK_TEXT}
           />
-          <ResultCard title="F4 팀 방향성 조언" contents={SECOND_MOCK_TEXT} />
-        </S.ContentWrapper>
-      </S.ContentWrapper>
+          <ResultCard title="팀 방향성 조언" contents={SECOND_MOCK_TEXT} />
+        </Wrapper>
+      </Wrapper>
 
       <Button name="다음" link={`/next`} $width="100%" />
-    </S.Container>
+    </Container>
   );
 };
 

vercel.config

@@ -0,0 +1,9 @@
+{
+  "version": 2,
+  "rewrites": [
+    {
+      "source": "/api/(.*)",
+      "destination": "test/$1"
+    }
+  ]
+}

vercel.json

@@ -0,0 +1,3 @@
+{
+  "routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }]
+}