Merge branch 'develop' of https://github.com/LikeLion-KNU/dongBTI int…

…o develop
LikeLion-KNU · Sep 9, 2024 · d8737ba · d8737ba
2 parents 97ddfe1 + 0246408
commit d8737ba
Show file tree

Hide file tree

Showing 10 changed files with 137 additions and 88 deletions.
diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
-        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+        <link rel="icon" type="image/svg+xml" href="/icon.svg" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Vite + React + TS</title>
+        <title>동BTI</title>
     </head>
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-LLMBJD2PDC"></script>

diff --git a/public/icon.svg b/public/icon.svg
diff --git a/src/components/form/DropDown.style.ts b/src/components/form/DropDown.style.ts
@@ -9,7 +9,7 @@ interface LabelProps {
 const getBackgroundColor = (color: string) => {
     switch (color) {
         case "primary":
-            return "#ECECEC";
+            return "#EDF1F7";
         case "secondary":
             return "#fff";
         default:

diff --git a/src/components/form/DropDown.tsx b/src/components/form/DropDown.tsx
@@ -43,6 +43,10 @@ export default function DropDown({ color, width, height, selectedMajor, setSelec
                 optionLabel="label"
                 placeholder="단과 대학을 선택하세용"
                 itemTemplate={(option) => <LabelContainer color={color}>{option.label}</LabelContainer>}
+                panelStyle={{
+                    borderRadius: "16px",
+                    overflow: "hidden",
+                }}
             />
         </DropDownWrapper>
     );

diff --git a/src/components/form/Input.style.ts b/src/components/form/Input.style.ts
@@ -14,7 +14,7 @@ export const InputElement = styled.input<InputProps>`
     background-color: ${(props) => {
         switch (props.variants) {
             case "primary":
-                return "#ECECEC";
+                return "#EDF1F7";
             case "secondary":
                 return "#fff";
         }

diff --git a/src/components/navigation/SideBar.style.ts b/src/components/navigation/SideBar.style.ts
@@ -10,10 +10,12 @@ export const SideBarWrapper = styled.div`
     width: 100%;
     top: -80%;
     backdrop-filter: blur(10px);
+    background-color: rgba(255, 255, 255, 0.7);
     position: fixed;
     align-items: flex-end;
     transition: 0.5s ease;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
     &.open {
         top: 0;
         transition: 0.5s ease;
@@ -29,6 +31,7 @@ export const Menu = styled.li`
     margin: 20px 8px;
     list-style-type: none;
     cursor: pointer;
+
     &:hover {
         color: #37cdcd;
     }

diff --git a/src/components/navigation/SideBar.tsx b/src/components/navigation/SideBar.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 
 import closeIcon from "@/assets/icons/close.svg";
@@ -14,7 +14,7 @@ export const SideBar = ({ isOpen, setIsOpen }: SideBarProps) => {
     const outside = React.useRef<HTMLDivElement>(null);
     const navigate = useNavigate();
 
-    React.useEffect(() => {
+    useEffect(() => {
         document.addEventListener("mousedown", handlerOutside);
         return () => {
             document.removeEventListener("mousedown", handlerOutside);

diff --git a/src/constants/results.ts b/src/constants/results.ts
@@ -3,174 +3,203 @@ export const results = [
         resultType: "intenseSportsman",
         clubs: ["센토", "맨투맨", "동그라미", "오렌지 파이터스"],
         typeName: "격한 운동을 좋아하는 스포츠맨형",
-        department: "sports",
+        iconName: "sports",
+        department: "피지컬",
     },
     {
         resultType: "coatSportsman",
         clubs: ["스트라이크", "파란", "스파이크"],
         typeName: "코트 안에서 무적인 스포츠맨형",
-        department: "sports",
+        iconName: "sports",
+        department: "피지컬",
     },
     {
         resultType: "compatitionSportsman",
         clubs: ["KUTC", "스매싱", "스윙스"],
         typeName: "경쟁을 사랑하는 스포츠맨형",
-        department: "sports",
+        iconName: "sports",
+        department: "피지컬",
     },
     {
         resultType: "fontSportsman",
         clubs: ["KGA", "KNUBC"],
         typeName: "앞만보는 스포츠맨형",
-        department: "sports",
+        iconName: "sports",
+        department: "피지컬",
     },
     {
         resultType: "natureSportsman",
         clubs: ["산악부"],
         typeName: "자연을 즐기는 스포츠맨형",
-        department: "sports",
+        iconName: "sports",
+        department: "피지컬",
     },
     {
         resultType: "matSportsman",
         clubs: ["서브미션", "기파랑", "업어치기"],
         typeName: "매트 위를 즐기는 스포츠맨형",
-        department: "sports",
+        iconName: "sports",
+        department: "피지컬",
     },
     {
         resultType: "fightSportsman",
         clubs: ["검도부", "에이밍"],
         typeName: "승부를 좋아하는 스포츠맨형",
-        department: "sports",
+        iconName: "sports",
+        department: "피지컬",
     },
     {
         resultType: "uniqueSportsman",
         clubs: ["수중탐사대", "싸울아비", "IZB(인질범)"],
         typeName: "유니크한 체육을 즐기는 스포츠맨형",
-        department: "sports",
+        iconName: "sports",
+        department: "피지컬",
     },
     {
         resultType: "10cm",
         clubs: ["청음반", "우리노래반"],
         typeName: "어쿠스틱 감성을 즐기는 10cm형",
-        department: "art",
+        iconName: "art",
+        department: "예술",
     },
     {
         resultType: "tchaikovsky",
         clubs: ["익스프레션", "POW"],
         typeName: "작곡을 사랑하는 차이코프스키형",
-        department: "art",
+        iconName: "art",
+        department: "예술",
     },
     {
         resultType: "stageMusician",
         clubs: ["그랜드챕스", "일렉스", "플레이아데스"],
         typeName: "무대를 즐기는 연주가형",
-        department: "art",
+        iconName: "art",
+        department: "예술",
     },
     {
         resultType: "mozart",
         clubs: ["관현악반", "크누피", "토레스"],
         typeName: "클래식한 감성을 즐기는 모짜르트형",
-        department: "art",
+        iconName: "art",
+        department: "예술",
     },
     {
         resultType: "parkHyoShin",
         clubs: ["합창단", "쌩목"],
         typeName: "노래부르는 걸 즐기는 박효신형",
-        department: "art",
+        iconName: "art",
+        department: "예술",
     },
     {
         resultType: "newJeans",
         clubs: ["터프시커리", "연극반"],
         typeName: "주목받는 걸 즐기는 뉴진스형",
-        department: "art",
+        iconName: "art",
+        department: "예술",
     },
     {
         resultType: "macGyver",
         clubs: ["사우회", "꿈틀"],
         typeName: "기술을 사랑하는 맥가이버형",
-        department: "art",
+        iconName: "art",
+        department: "예술",
     },
     {
         resultType: "cutieArtist",
         clubs: ["사우회", "요리조리"],
         typeName: "뽀짝뽀짝 뚝딱뚝딱 예술가형",
-        department: "art",
+        iconName: "art",
+        department: "예술",
     },
     {
         resultType: "leedongjin",
         clubs: ["KOMO"],
         typeName: "영화 감상을 좋아하는 이동진형",
-        department: "art",
+        iconName: "art",
+        department: "예술",
     },
     {
         resultType: "multiArtist",
         clubs: ["경묵회", "팔레트", "뜨람"],
         typeName: "다재다능 예술가형",
-        department: "art",
+        iconName: "art",
+        department: "예술",
     },
     {
         resultType: "heatDebater",
         clubs: ["H.Q", "VINE", "솔토론회", "Now&Here", "KNU UNSA", "에이스"],
         typeName: "열띤 토론을 즐기는 토론가형",
-        department: "academic",
+        iconName: "art",
+        department: "뇌지컬",
     },
     {
         resultType: "siliconValley",
         clubs: ["앱동", "크누 모빌리티"],
         typeName: "It를 사랑하는 실리콘밸리 인재형",
-        department: "academic",
+        iconName: "art",
+        department: "뇌지컬",
     },
     {
         resultType: "creator",
         clubs: ["돌구름", "솔라이브"],
         typeName: "무에서 유를! 창조가형",
-        department: "academic",
+        iconName: "academic",
+        department: "뇌지컬",
     },
     {
         resultType: "winner",
         clubs: ["국사무쌍", "트러블메이커", "복현기우회", "H.P"],
         typeName: "지고는 못 사는 승부사형",
-        department: "academic",
+        iconName: "academic",
+        department: "뇌지컬",
     },
     {
         resultType: "scholar",
         clubs: ["현시연", "코스모스"],
         typeName: "지식에 대한 열망이 끝없는 학술가형",
-        department: "academic",
+        iconName: "academic",
+        department: "뇌지컬",
     },
     {
         resultType: "god",
         clubs: ["SFC", "DFC", "IVF", "빨마"],
         typeName: "신앙심 가득한 신도형",
-        department: "religion",
+        iconName: "religion",
+        department: "종교",
     },
     {
         resultType: "budda",
         clubs: ["경불회"],
         typeName: "극락왕생을 원하는 부처님형",
-        department: "religion",
+        iconName: "religion",
+        department: "종교",
     },
     {
         resultType: "hyunwoojin",
         clubs: ["신망애", "미담장학회"],
         typeName: "티칭의 대가 현우진형",
-        department: "social",
+        iconName: "social",
+        department: "사회",
     },
     {
         resultType: "philanthropist",
         clubs: ["상투스", "수리영역"],
         typeName: "환경을 사랑하는 자선사업가형",
-        department: "social",
+        iconName: "social",
+        department: "사회",
     },
     {
         resultType: "teresa",
         clubs: ["RCY", "한울회"],
         typeName: "세상을 사랑하는 마더테레사형",
-        department: "social",
+        iconName: "social",
+        department: "사회",
     },
     {
         resultType: "american",
         clubs: ["SLANG"],
         typeName: "아메리칸 마인드 미국인형",
-        department: "social",
+        iconName: "social",
+        department: "사회",
     },
 ];
diff --git a/src/pages/ResultShare.tsx b/src/pages/ResultShare.tsx
@@ -69,8 +69,8 @@ export default function ResultShare() {
         dbti_type: `${result.department.charAt(0).toUpperCase() + result.department.slice(1)} 타입`,
         dbti_name: result.typeName,
         cardOrder: cardOrder,
-        color: `var(--card-color-${result.department})`,
-        emoji: result.department,
+        color: `var(--card-color-${result.iconName})`,
+        emoji: result.iconName,
     };
 
     return (
@@ -89,7 +89,7 @@ export default function ResultShare() {
                 {/* ResultCardDiv 기준으로 이미지가 다운로드됩니다. */}
                 <ResultCardDiv ref={cardRef}>
                     <ResultCard props={props} />
-                    <ShareLink link={link} color={`var(--card-color-${result.department})`} />
+                    <ShareLink link={link} color={`var(--card-color-${result.iconName})`} />
                 </ResultCardDiv>
                 <Button onClick={cardDownload} width="100%" height="60px" variants="primary">
                     <Text size="s" weight="extrabold">