Merge pull request #30 from LikeLion-KNU/feature/clubs

feat: 동아리 데이터 추가 및 결과페이지 연결
LikeLion-KNU · Sep 8, 2024 · 0bd114e · 0bd114e
2 parents 950e206 + d4437a2
commit 0bd114e
Show file tree

Hide file tree

Showing 75 changed files with 488 additions and 14 deletions.
diff --git a/src/assets/clubs/DFC.jpg b/src/assets/clubs/DFC.jpg
diff --git a/src/assets/clubs/H.P.jpg b/src/assets/clubs/H.P.jpg
diff --git a/src/assets/clubs/H.Q.jpg b/src/assets/clubs/H.Q.jpg
diff --git a/src/assets/clubs/IVF.jpg b/src/assets/clubs/IVF.jpg
diff --git a/src/assets/clubs/IZB(인질범).jpg b/src/assets/clubs/IZB(인질범).jpg
diff --git a/src/assets/clubs/KGA.jpg b/src/assets/clubs/KGA.jpg
diff --git a/src/assets/clubs/KNU UNSA.jpg b/src/assets/clubs/KNU UNSA.jpg
diff --git a/src/assets/clubs/KNUBC.jpg b/src/assets/clubs/KNUBC.jpg
diff --git a/src/assets/clubs/KOMO.jpg b/src/assets/clubs/KOMO.jpg
diff --git a/src/assets/clubs/KUTC.jpg b/src/assets/clubs/KUTC.jpg
diff --git a/src/assets/clubs/Now&Here.jpg b/src/assets/clubs/Now&Here.jpg
diff --git a/src/assets/clubs/POW.jpg b/src/assets/clubs/POW.jpg
diff --git a/src/assets/clubs/RCY.jpg b/src/assets/clubs/RCY.jpg
diff --git a/src/assets/clubs/SFC.jpg b/src/assets/clubs/SFC.jpg
diff --git a/src/assets/clubs/SLANG.jpg b/src/assets/clubs/SLANG.jpg
diff --git a/src/assets/clubs/VINE.jpg b/src/assets/clubs/VINE.jpg
diff --git a/src/assets/clubs/검도부.jpg b/src/assets/clubs/검도부.jpg
diff --git a/src/assets/clubs/경묵회.jpg b/src/assets/clubs/경묵회.jpg
diff --git a/src/assets/clubs/경불회.jpg b/src/assets/clubs/경불회.jpg
diff --git a/src/assets/clubs/관현악반.jpg b/src/assets/clubs/관현악반.jpg
diff --git a/src/assets/clubs/국사무쌍.jpg b/src/assets/clubs/국사무쌍.jpg
diff --git a/src/assets/clubs/그랜드챕스.jpg b/src/assets/clubs/그랜드챕스.jpg
diff --git a/src/assets/clubs/기파랑.jpg b/src/assets/clubs/기파랑.jpg
diff --git a/src/assets/clubs/꿈틀.jpg b/src/assets/clubs/꿈틀.jpg
diff --git a/src/assets/clubs/농악반.jpg b/src/assets/clubs/농악반.jpg
diff --git a/src/assets/clubs/돌구름.jpg b/src/assets/clubs/돌구름.jpg
diff --git a/src/assets/clubs/동그라미.jpg b/src/assets/clubs/동그라미.jpg
diff --git a/src/assets/clubs/뜨람.jpg b/src/assets/clubs/뜨람.jpg
diff --git a/src/assets/clubs/맨투맨.jpg b/src/assets/clubs/맨투맨.jpg
diff --git a/src/assets/clubs/미담장학회.jpg b/src/assets/clubs/미담장학회.jpg
diff --git a/src/assets/clubs/복현기우회.jpg b/src/assets/clubs/복현기우회.jpg
diff --git a/src/assets/clubs/빨마.jpg b/src/assets/clubs/빨마.jpg
diff --git a/src/assets/clubs/사우회.jpg b/src/assets/clubs/사우회.jpg
diff --git a/src/assets/clubs/산악부.jpg b/src/assets/clubs/산악부.jpg
diff --git a/src/assets/clubs/상투스.jpg b/src/assets/clubs/상투스.jpg
diff --git a/src/assets/clubs/서브미션.jpg b/src/assets/clubs/서브미션.jpg
diff --git a/src/assets/clubs/센토.jpg b/src/assets/clubs/센토.jpg
diff --git a/src/assets/clubs/솔라이브.jpg b/src/assets/clubs/솔라이브.jpg
diff --git a/src/assets/clubs/솔토론회.jpg b/src/assets/clubs/솔토론회.jpg
diff --git a/src/assets/clubs/수리영역.jpg b/src/assets/clubs/수리영역.jpg
diff --git a/src/assets/clubs/수중탐사대.jpg b/src/assets/clubs/수중탐사대.jpg
diff --git a/src/assets/clubs/스매싱.jpg b/src/assets/clubs/스매싱.jpg
diff --git a/src/assets/clubs/스윙스.jpg b/src/assets/clubs/스윙스.jpg
diff --git a/src/assets/clubs/스트라이크.jpg b/src/assets/clubs/스트라이크.jpg
diff --git a/src/assets/clubs/스파이크.jpg b/src/assets/clubs/스파이크.jpg
diff --git a/src/assets/clubs/신망애.jpg b/src/assets/clubs/신망애.jpg
diff --git a/src/assets/clubs/싸울아비.jpg b/src/assets/clubs/싸울아비.jpg
diff --git a/src/assets/clubs/쌩목.jpg b/src/assets/clubs/쌩목.jpg
diff --git a/src/assets/clubs/앱동.jpg b/src/assets/clubs/앱동.jpg
diff --git a/src/assets/clubs/업어치기.jpg b/src/assets/clubs/업어치기.jpg
diff --git a/src/assets/clubs/에이밍.jpg b/src/assets/clubs/에이밍.jpg
diff --git a/src/assets/clubs/에이스.jpg b/src/assets/clubs/에이스.jpg
diff --git a/src/assets/clubs/연극반.jpg b/src/assets/clubs/연극반.jpg
diff --git a/src/assets/clubs/오렌지 파이터스.jpg b/src/assets/clubs/오렌지 파이터스.jpg
diff --git a/src/assets/clubs/요리조리.jpg b/src/assets/clubs/요리조리.jpg
diff --git a/src/assets/clubs/우리노래반.jpg b/src/assets/clubs/우리노래반.jpg
diff --git a/src/assets/clubs/익스프레션.jpg b/src/assets/clubs/익스프레션.jpg
diff --git a/src/assets/clubs/일렉스.jpg b/src/assets/clubs/일렉스.jpg
diff --git a/src/assets/clubs/청음반.jpg b/src/assets/clubs/청음반.jpg
diff --git a/src/assets/clubs/코스모스.jpg b/src/assets/clubs/코스모스.jpg
diff --git a/src/assets/clubs/크누 모빌리티.jpg b/src/assets/clubs/크누 모빌리티.jpg
diff --git a/src/assets/clubs/크누피.jpg b/src/assets/clubs/크누피.jpg
diff --git a/src/assets/clubs/터프시커리.jpg b/src/assets/clubs/터프시커리.jpg
diff --git a/src/assets/clubs/토레스.jpg b/src/assets/clubs/토레스.jpg
diff --git a/src/assets/clubs/트러블메이커.jpg b/src/assets/clubs/트러블메이커.jpg
diff --git a/src/assets/clubs/파란.jpg b/src/assets/clubs/파란.jpg
diff --git a/src/assets/clubs/팔레트.jpg b/src/assets/clubs/팔레트.jpg
diff --git a/src/assets/clubs/플레이아데스.jpg b/src/assets/clubs/플레이아데스.jpg
diff --git a/src/assets/clubs/한울회.jpg b/src/assets/clubs/한울회.jpg
diff --git a/src/assets/clubs/합창단.jpg b/src/assets/clubs/합창단.jpg
diff --git a/src/assets/clubs/현시연.jpg b/src/assets/clubs/현시연.jpg
diff --git a/src/constants/clubs.ts b/src/constants/clubs.ts
diff --git a/src/constants/results.ts b/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: "지고는 못 사는 승부사형",
     },
     {

diff --git a/src/pages/ResultPage.styled.ts b/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`

diff --git a/src/pages/ResultPage.tsx b/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>
                             );
                         })}