feat: 동아리 데이터 추가 및 결과페이지 연결

src/constants/results.ts

@@ -1,7 +1,7 @@
 export const results = [
     {
         resultType: "intenseSportsman",
-        clubs: ["센토", "맨투맨", "동그라미", "오렌지파이터스"],
+        clubs: ["센토", "맨투맨", "동그라미", "오렌지 파이터스"],
         typeName: "격한 운동을 좋아하는 스포츠맨형",
     },
     {
@@ -31,12 +31,12 @@ export const results = [
     },
     {
         resultType: "fightSportsman",
-        clubs: ["검보부", "에이밍"],
+        clubs: ["검도부", "에이밍"],
         typeName: "승부를 좋아하는 스포츠맨형",
     },
     {
         resultType: "uniqueSportsman",
-        clubs: ["수중탐사대", "싸울아비", "인질범"],
+        clubs: ["수중탐사대", "싸울아비", "IZB(인질범)"],
         typeName: "유니크한 체육을 즐기는 스포츠맨형",
     },
     {
@@ -81,7 +81,7 @@ export const results = [
     },
     {
         resultType: "leedongjin",
-        clubs: ["꼬모"],
+        clubs: ["KOMO"],
         typeName: "영화 감상을 좋아하는 이동진형",
     },
     {
@@ -106,7 +106,7 @@ export const results = [
     },
     {
         resultType: "winner",
-        clubs: ["국상무쌍", "트러블메이커", "복현기우회", "H.P"],
+        clubs: ["국사무쌍", "트러블메이커", "복현기우회", "H.P"],
         typeName: "지고는 못 사는 승부사형",
     },
     {

src/pages/ResultPage.styled.ts

@@ -3,7 +3,7 @@ import styled from "@emotion/styled";
 export const ResultWrapper = styled.div`
     display: flex;
     flex-direction: column;
-    height: calc(100% - 60px);
+    height: 100%;
 
     padding-top: 60px;
 `;
@@ -36,18 +36,34 @@ export const ClubItem = styled.div`
     position: relative;
     border-radius: 1rem;
     background-color: white;
-    padding: 0.75rem 0 0.75rem 3.2rem;
+    padding: 0.75rem 0.25rem 0.75rem 3.2rem;
     margin-left: 1.6rem;
+    word-break: keep-all;
 `;
 
-export const ClubImage = styled.img`
+export const ClubImageWrapper = styled.div`
     position: absolute;
     top: 50%;
     left: -32px;
     transform: translateY(-50%);
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
     width: 64px;
     height: 64px;
     border-radius: 50%;
+    overflow: hidden;
+    background-color: white;
+
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.09);
+`;
+
+export const ClubImage = styled.img`
+    width: 64px;
+    height: auto;
+    object-fit: cover;
 `;
 
 export const ClubTitle = styled.div`
@@ -60,7 +76,7 @@ export const ClubTitle = styled.div`
 export const ClubDescription = styled.div`
     display: flex;
     flex-direction: column;
-    line-height: 1.35;
+    line-height: 1.4;
 `;
 
 export const ButtonGroup = styled.div`

src/pages/ResultPage.tsx

@@ -4,12 +4,13 @@ import { Text } from "@/components/typography";
 
 import { useResult } from "@/hooks/useResult";
 
-import aaa from "@/assets/images/dongari.svg";
+import clubs from "@/constants/clubs";
 
 import {
     ButtonGroup,
     ClubDescription,
     ClubImage,
+    ClubImageWrapper,
     ClubItem,
     ClubItems,
     ClubTitle,
@@ -18,6 +19,7 @@ import {
     ResultWrapper,
     TitleContainer,
 } from "./ResultPage.styled";
+import { css } from "@emotion/react";
 
 export default function ResultPage() {
     const { name, mbti, result, navigate } = useResult();
@@ -42,16 +44,34 @@ export default function ResultPage() {
 
                     <ClubItems>
                         {result.clubs.map((club) => {
+                            let clubData = clubs.find((c) => c.name === club);
+
+                            if (!clubData) {
+                                return null;
+                            }
+
                             return (
                                 <ClubItem>
-                                    <ClubTitle>{club}</ClubTitle>
+                                    <ClubTitle>{clubData.name}</ClubTitle>
                                     <ClubDescription>
-                                        <Text size="xs">더 넓고, 더 깊은 바다로!</Text>
+                                        <Text
+                                            size="xs"
+                                            css={css`
+                                                padding-bottom: 0.25rem;
+                                            `}
+                                        >
+                                            {clubData.summary}
+                                        </Text>
                                         <Text size="xs" weight="bold">
-                                            경북대학교 유일무이 스킨스쿠버 동아리
+                                            {clubData.description}
                                         </Text>
                                     </ClubDescription>
-                                    <ClubImage src={aaa} alt="수중탐사대" />
+                                    <ClubImageWrapper>
+                                        <ClubImage
+                                            src={new URL(`../assets/clubs/${clubData.name}.jpg`, import.meta.url).href}
+                                            alt={clubData.name}
+                                        />
+                                    </ClubImageWrapper>
                                 </ClubItem>
                             );
                         })}