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 기준으로 이미지가 다운로드됩니다. */}
-
+