diff --git a/index.html b/index.html index 690972b..093f34b 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,9 @@ - + - Vite + React + TS + 동BTI diff --git a/package-lock.json b/package-lock.json index 3e1471c..01e94fa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "dongbti", - "version": "0.0.0", + "version": "1.0.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "dongbti", - "version": "0.0.0", + "version": "1.0.1", "dependencies": { "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", diff --git a/package.json b/package.json index de75985..00e822c 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "dongbti", "private": true, - "version": "0.0.0", + "version": "1.0.1", "type": "module", "scripts": { "dev": "vite", diff --git a/public/icon.svg b/public/icon.svg new file mode 100644 index 0000000..4899ec6 --- /dev/null +++ b/public/icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/form/DropDown.style.ts b/src/components/form/DropDown.style.ts index 975000f..d9260ab 100644 --- 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 index c60a2a5..4e8bbdc 100644 --- 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) => {option.label}} + panelStyle={{ + borderRadius: "16px", + overflow: "hidden", + }} /> ); diff --git a/src/components/form/Input.style.ts b/src/components/form/Input.style.ts index 4cc0416..35be4b8 100644 --- a/src/components/form/Input.style.ts +++ b/src/components/form/Input.style.ts @@ -14,7 +14,7 @@ export const InputElement = styled.input` 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 index 65f2643..5868bee 100644 --- 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 index 3832795..6003128 100644 --- 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(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 index 86bc3cd..2287efb 100644 --- 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 index 6846760..7df4e05 100644 --- 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 기준으로 이미지가 다운로드됩니다. */} - + - - - ) : ( - <> - {field.map((value, index) => ( - - ))} - - )} - - + + + + 동BTI + {root ? ( + {root?.getValue.question} + ) : ( + + 두근두근 설레는 가두모집!
동아리 부스가 엄청 많다!
어느 분야부터 설명을 + 들어볼까? +
+ )} + + {root ? ( + <> + + + + ) : ( + <> + {field.map((value, index) => ( + + ))} + + )} + +
+
+
); }