[Feature] #12 - 결과페이지 UI 구현 완료

src/Router.tsx

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

src/components/common/button/Button.tsx

@@ -1,13 +1,13 @@
-// Button.tsx
-
 import React from "react";
 import styled from "styled-components";
+import { useNavigate } from "react-router-dom";
 
 interface ButtonProps {
-  link: string; // 링크를 위한 prop
+  link?: string; // 링크를 위한 prop
   name: string; // 버튼의 텍스트를 위한 prop
   type?: "button" | "submit"; // 기본 버튼 타입
   $width?: string; // 버튼의 넓이
+  onClick?: () => void; // 클릭 핸들러
 }
 
 const Btn = styled.button<ButtonProps>`
@@ -36,17 +36,22 @@ const Button: React.FC<ButtonProps> = ({
   name,
   type = "button",
   $width,
+  onClick,
 }) => {
+  const navigate = useNavigate();
   const handleClick = () => {
+    if (onClick) {
+      onClick(); // onClick이 존재하면 호출
+    }
     if (link) {
-      window.location.href = link;
+      navigate(link);
     }
   };
 
   return (
     <Btn
-      name={name}
       link={link}
+      name={name}
       type={type}
       onClick={handleClick}
       $width={$width}

src/components/common/hintText/HintText2.tsx

@@ -18,16 +18,16 @@ const HintTextHeadline2 = styled.h2`
 `;
 
 const HintTextP1 = styled.p`
-  width: 300px;
+  /* width: 300px; */
   color: #868e96;
   font-family: "Pretendard";
   font-size: 14px;
   font-style: normal;
   font-weight: 500;
-
   @media (max-width: 360px) {
     width: 280px;
   }
+  white-space: pre-line;
 `;
 
 interface TextProps {

src/pages/result/Result.tsx

@@ -0,0 +1,39 @@
+import * as S from "./style";
+import HintText2 from "@components/common/hintText/HintText2";
+import { ResultCard } from "./_components/ResultCard";
+import Button from "@components/common/button/Button";
+
+const FIRST_MOCK_TEXT: string[] = [
+  "모든 인원이 커뮤니케이션을 좋아하는 팀이에요. 작업할 때 매우 소통을 중요하게 여기는 팀입니다. 실시간 커뮤 툴을 병행해서 사용하는 것이 좋을 것 같아요.",
+  "대부분이 빠른 피드백을 선호하는 애자일 방식을 선호해요.",
+];
+
+const SECOND_MOCK_TEXT: string[] = [
+  "정기적으로 학습한 내용을 공유하는 시간을 가지는 게 좋을 것 같아요. 특히 A와 B는 최신 기술을 도입하는 데에, C와 D는 기존 알던 기술을 활용하는 데에 가치를 두고 있으니, 토론해보는 게 좋을 듯 해요!",
+  "A, C는 온라인을 B, D는 오프라인 만남을 주로 선호하고 있어요. 프로젝트 기간동안 서로에게 무리가 없도록 일정을 잘 조율하는 것이 매우 중요해요.",
+];
+
+const Result: React.FC = () => {
+  return (
+    <S.Container>
+      <S.ContentWrapper>
+        <HintText2
+          headline="AI가 분석한 팀의 성향입니다."
+          paragraph="각 팀원들이 답변한 내용을 토대로 팀의 성향을 진단해줘요.
+        우리 팀 성향이 맞는지 확인해보고, 팀원들과 상의해볼까요?"
+        />
+        <S.ContentWrapper>
+          <ResultCard
+            title="AI가 진단한 F4 팀의 성향 요약"
+            contents={FIRST_MOCK_TEXT}
+          />
+          <ResultCard title="F4 팀 방향성 조언" contents={SECOND_MOCK_TEXT} />
+        </S.ContentWrapper>
+      </S.ContentWrapper>
+
+      <Button name="다음" link={`/next`} $width="100%" />
+    </S.Container>
+  );
+};
+
+export default Result;

src/pages/result/_components/ResultCard.tsx

@@ -0,0 +1,19 @@
+import * as S from "./style";
+
+interface ResultCardProps {
+  title: string;
+  contents: string[];
+}
+
+export const ResultCard = ({ title, contents }: ResultCardProps) => {
+  return (
+    <S.ResultCard>
+      <S.ResultTitle>{title}</S.ResultTitle>
+      <S.ResultContentWrapper>
+        {contents.map((content, index) => (
+          <S.ResultContent key={index}>{content}</S.ResultContent>
+        ))}
+      </S.ResultContentWrapper>
+    </S.ResultCard>
+  );
+};

src/pages/result/_components/style.ts

@@ -0,0 +1,32 @@
+import styled from "styled-components";
+
+export const ResultCard = styled.div`
+  border-radius: 20px;
+  background-color: #e9ecef;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  gap: 1rem;
+`;
+
+export const ResultTitle = styled.h1`
+  color: #99bc85;
+  font-family: Pretendard;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 16px;
+  letter-spacing: -0.1px;
+`;
+
+export const ResultContentWrapper = styled.ul`
+  width: 100%;
+  list-style: square;
+  display: flex;
+  flex-direction: column;
+  padding: 0 1rem;
+  gap: 0.5rem;
+`;
+
+export const ResultContent = styled.li``;

src/pages/result/style.ts

@@ -0,0 +1,20 @@
+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;
+`;
+
+export const ContentWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 2rem;
+  flex-direction: column;
+`;

src/pages/test/Test.tsx

@@ -5,32 +5,65 @@ import { useUserProfile } from "@hooks/useUserProfile";
 import { TEST_TEXT, TEST_BTN_TEXT } from "@constants/testText";
 import { TestButton } from "./_components/button/TestButton";
 import Button from "@components/common/button/Button";
+import { useState } from "react";
 
 const Test: React.FC = () => {
   const { page } = usePageNumber();
   const { error } = useUserProfile();
-  // console.log(response);
+
+  // 각 페이지에서 선택된 버튼 인덱스를 저장하는 배열
+  const [selectedContent, setSelectedContent] = useState<number[]>([
+    -1, -1, -1, -1, -1,
+  ]);
+
+  // 버튼 클릭 핸들러
+  const handleButtonClick = (index: number) => {
+    const newContent = [...selectedContent]; // 이전 상태 복사
+    newContent[page - 1] = index; // 현재 페이지에 해당하는 인덱스 업데이트
+    setSelectedContent(newContent); // 상태 업데이트
+  };
+
+  // 다음 버튼 클릭 시 선택된 내용 확인
+  const handleNext = () => {
+    console.log(selectedContent[page - 1]);
+    // 필요한 추가 로직을 여기에 작성
+  };
+
   return (
     <S.TestContainer>
-      <CircleInfo pageNumber={page} />
-      <S.TextContainer>
-        {error}
-        {TEST_TEXT}
-      </S.TextContainer>
-      {TEST_BTN_TEXT.map((text, index) => (
-        <TestButton text={text} key={index} />
-      ))}
+      <S.Wrapper>
+        <CircleInfo pageNumber={page} />
+        <S.TextContainer>
+          {error}
+          {TEST_TEXT}
+        </S.TextContainer>
+      </S.Wrapper>
+      <S.Wrapper>
+        {TEST_BTN_TEXT.map((text, index) => (
+          <TestButton
+            text={text}
+            key={index}
+            $isActive={selectedContent[page - 1] === index} // 현재 페이지에서 클릭된 버튼인지 여부
+            onClick={() => handleButtonClick(index)} // 클릭 핸들러
+          />
+        ))}
+      </S.Wrapper>
+
       {page !== 5 ? (
         <Button
           name="다음"
-          link={`http://localhost:5173/test/${page + 1}`}
+          link={`/test/${page + 1}`}
           $width="100%"
+          onClick={handleNext}
         />
       ) : (
         <Button
-          name="다음"
-          link={`http://localhost:5173/test/1`}
+          name="완료"
           $width="100%"
+          type="submit"
+          onClick={() => {
+            console.log("최종 선택된 내용:", selectedContent); // 최종 선택된 버튼의 인덱스 출력
+          }}
         />
       )}
     </S.TestContainer>

src/pages/test/_components/button/TestButton.tsx

@@ -1,12 +1,18 @@
 import * as S from "./style";
 
-interface TestButtonProps {
+export interface TestButtonProps {
   text: string;
+  $isActive?: boolean; // 클릭 상태에 따른 색상 적용을 위한 prop
+  onClick: () => void; // 클릭 핸들러
 }
 
-export const TestButton = ({ text }: TestButtonProps) => {
+export const TestButton = ({
+  text,
+  $isActive = false,
+  onClick,
+}: TestButtonProps) => {
   return (
-    <S.TestButton>
+    <S.TestButton text={text} $isActive={$isActive} onClick={onClick}>
       <S.ButtonText>{text}</S.ButtonText>
     </S.TestButton>
   );

src/pages/test/_components/button/style.ts

@@ -1,10 +1,17 @@
 import styled from "styled-components";
+import { TestButtonProps } from "./TestButton";
 
-export const TestButton = styled.button`
+export const TestButton = styled.button<TestButtonProps>`
   border-radius: 15px;
   border: 1px solid #ced4da;
   width: 100%;
-  padding: 3rem 0;
+  padding: 1.5rem 0;
+  background-color: ${({ $isActive }) =>
+    $isActive ? "#b2d1a1" : "transparent"};
+  cursor: pointer;
+  &:hover {
+    background-color: #d4e7c5; // hover 효과
+  }
 `;
 
 export const ButtonText = styled.h1`

src/pages/test/style.ts

@@ -4,9 +4,8 @@ export const TestContainer = styled.div`
   width: 90%;
   min-height: 100vh;
   display: flex;
-  justify-content: center;
-  /* align-items: center; */
-  /* margin-top: 10%; */
+  justify-content: space-around;
+  margin-top: 5%;
   gap: 1rem;
   flex-direction: column;
 `;
@@ -21,4 +20,12 @@ export const TextContainer = styled.div`
   font-weight: 600;
   line-height: 30px; /* 125% */
   letter-spacing: -0.5px;
+  margin-bottom: 1.5rem;
+`;
+
+export const Wrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  gap: 1rem;
 `;