diff --git a/src/assets/icons/close.svg b/src/assets/icons/close.svg
index 1a3bccc..b4d0287 100644
--- a/src/assets/icons/close.svg
+++ b/src/assets/icons/close.svg
@@ -1,20 +1,11 @@
-
\ No newline at end of file
+
diff --git a/src/assets/images/sidabar_header.png b/src/assets/images/sidabar_header.png
new file mode 100644
index 0000000..07c3fef
Binary files /dev/null and b/src/assets/images/sidabar_header.png differ
diff --git a/src/components/display/DeveloperProfile.tsx b/src/components/display/DeveloperProfile.tsx
index 946c82c..163039b 100644
--- a/src/components/display/DeveloperProfile.tsx
+++ b/src/components/display/DeveloperProfile.tsx
@@ -27,8 +27,10 @@ const Container = styled.div`
background-color: white;
padding: 20px;
border-radius: 20px;
- box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
- margin-bottom: 20px;
+ box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.06);
+
+ flex-grow: 1;
+ flex-basis: 0;
$ > img {
border-radius: 10px;
@@ -37,14 +39,15 @@ const Container = styled.div`
`;
const Image = styled.img`
- width: 84px;
- height: 84px;
+ width: 73px;
+ height: 73px;
border-radius: 10px;
`;
const InfoContainer = styled.div`
display: flex;
gap: 16px;
+ align-items: center;
`;
const InfoDiv = styled.div`
@@ -99,10 +102,10 @@ export const DeveloperProfile: React.FC = ({ info }) => {
-
+
{info.name}
-
+
{info.worklist.join(" · ")}
diff --git a/src/components/form/Button.style.ts b/src/components/form/Button.style.ts
index 23bda5d..7ad8658 100644
--- a/src/components/form/Button.style.ts
+++ b/src/components/form/Button.style.ts
@@ -5,6 +5,7 @@ export const ButtonElement = styled.button`
font-family: NanumSquareNeo;
width: ${(props) => props.width};
+ max-width: 800px;
height: ${(props) => props.height};
border-radius: 12px;
diff --git a/src/components/form/DropDown.style.ts b/src/components/form/DropDown.style.ts
index d9260ab..2d9fe26 100644
--- a/src/components/form/DropDown.style.ts
+++ b/src/components/form/DropDown.style.ts
@@ -30,10 +30,10 @@ export const DropDownWrapper = styled.div`
export const DropDownContainer = styled(Dropdown)`
width: 100%;
- font-size: 15px;
+ font-size: 13px;
justify-content: center;
align-items: center;
- padding: 10px;
+ padding: 10px 16px;
`;
export const LabelContainer = styled.span`
diff --git a/src/components/form/DropDown.tsx b/src/components/form/DropDown.tsx
index 4e8bbdc..f369354 100644
--- a/src/components/form/DropDown.tsx
+++ b/src/components/form/DropDown.tsx
@@ -44,6 +44,7 @@ export default function DropDown({ color, width, height, selectedMajor, setSelec
placeholder="단과 대학을 선택하세용"
itemTemplate={(option) => {option.label}}
panelStyle={{
+ boxShadow: "2px 2px 30px #00000030",
borderRadius: "16px",
overflow: "hidden",
}}
diff --git a/src/components/form/Input.style.ts b/src/components/form/Input.style.ts
index 35be4b8..22a061b 100644
--- a/src/components/form/Input.style.ts
+++ b/src/components/form/Input.style.ts
@@ -2,14 +2,17 @@ import { InputProps } from "./Input";
import styled from "@emotion/styled";
export const InputElement = styled.input`
- font-size: 15px;
+ transition: border-color 0.25s ease-in-out;
+
+ font-size: 13px;
font-family: "NanumSquareNeo";
width: ${(props) => props.width};
height: ${(props) => props.height};
border-radius: 12px;
- border: none;
- padding: 10px;
+ outline: 1px solid transparent;
+ border: 1px solid transparent;
+ padding: 10px 16px;
background-color: ${(props) => {
switch (props.variants) {
@@ -19,4 +22,8 @@ export const InputElement = styled.input`
return "#fff";
}
}};
+
+ &:focus {
+ border: 1px solid var(--color-primary);
+ }
`;
diff --git a/src/components/layout/TopBar.styled.tsx b/src/components/layout/TopBar.styled.tsx
index 65a5630..661d584 100644
--- a/src/components/layout/TopBar.styled.tsx
+++ b/src/components/layout/TopBar.styled.tsx
@@ -12,7 +12,7 @@ export const TopBarWrapper = styled.div`
left: 50%;
transform: translateX(-50%);
- width: 100%;
+ background-color: #f6f9ff;
height: 60px;
// RootLayout의 max-width를 따라갑니다.
@@ -33,7 +33,6 @@ export const TopBarContainer = styled.div`
border-bottom: 1px solid #e0e0e0;
font-weight: 800;
- background-color: white;
& > img {
position: absolute;
diff --git a/src/components/navigation/SideBar.style.ts b/src/components/navigation/SideBar.style.ts
index 5868bee..3f5f2ae 100644
--- a/src/components/navigation/SideBar.style.ts
+++ b/src/components/navigation/SideBar.style.ts
@@ -8,19 +8,22 @@ export const SideBarWrapper = styled.div`
max-height: 100%;
overflow-y: auto;
width: 100%;
+ max-width: 800px;
top: -80%;
backdrop-filter: blur(10px);
- background-color: rgba(255, 255, 255, 0.7);
+ background-color: #ffffff;
position: fixed;
align-items: flex-end;
transition: 0.5s ease;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
+ opacity: 0;
&.open {
top: 0;
+ opacity: 1;
transition: 0.5s ease;
}
- img {
+ img.close {
display: block;
margin-left: auto;
cursor: pointer;
@@ -39,3 +42,22 @@ export const Menu = styled.li`
color: #37cdcd;
}
`;
+
+export const Backdrop = styled.div`
+ transition: backdrop-filter 0.4s ease-in-out;
+
+ position: fixed;
+ top: -20px;
+ left: -20px;
+ right: -20px;
+ bottom: -20px;
+ background-color: #ffffff10;
+ backdrop-filter: blur(0px);
+ pointer-events: none;
+
+ z-index: 1;
+
+ &.open {
+ backdrop-filter: blur(10px);
+ }
+`;
diff --git a/src/components/navigation/SideBar.tsx b/src/components/navigation/SideBar.tsx
index 6003128..d5daea9 100644
--- a/src/components/navigation/SideBar.tsx
+++ b/src/components/navigation/SideBar.tsx
@@ -2,8 +2,9 @@ import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import closeIcon from "@/assets/icons/close.svg";
+import headerImage from "@/assets/images/sidabar_header.png";
-import { SideBarWrapper, Menu } from "./SideBar.style";
+import { SideBarWrapper, Menu, Backdrop } from "./SideBar.style";
interface SideBarProps {
isOpen: boolean;
@@ -28,19 +29,23 @@ export const SideBar = ({ isOpen, setIsOpen }: SideBarProps) => {
};
const handleNavigation = (path: string) => {
- navigate(path);
setIsOpen(false);
+ navigate(path);
};
return (
-
+ <>
+
+
+
);
};
diff --git a/src/pages/CreditPage.styled.ts b/src/pages/CreditPage.styled.ts
index 836ffae..c4f7a7e 100644
--- a/src/pages/CreditPage.styled.ts
+++ b/src/pages/CreditPage.styled.ts
@@ -7,7 +7,9 @@ export const Content = styled.div`
export const FixedBackground = styled.div`
position: fixed;
top: 60px;
- left: 0;
+ left: 50%;
+ right: 0;
+ transform: translate(-50%);
background: linear-gradient(157deg, rgba(93, 238, 238, 1) 0%, rgba(255, 255, 255, 1) 100%);
width: 100vw;
height: 100vh;
@@ -36,7 +38,14 @@ export const MessageBox = styled.div`
border-radius: 20px;
background-color: white;
- box-shadow: 2px 2px 30px #00000030;
+ box-shadow: 2px 2px 30px #00000010;
margin-bottom: 50px;
`;
+
+export const ProfileWrapper = styled.div`
+ display: flex;
+ flex-wrap: wrap;
+ gap: 16px;
+ flex-shrink: 1;
+`;
diff --git a/src/pages/CreditPage.tsx b/src/pages/CreditPage.tsx
index 2d386b0..63c4eb7 100644
--- a/src/pages/CreditPage.tsx
+++ b/src/pages/CreditPage.tsx
@@ -7,7 +7,7 @@ import { Text } from "@/components/typography";
import BackIcon from "@/assets/back.svg";
-import { Content, FixedBackground, TitleHeader, MessageBox } from "./CreditPage.styled";
+import { Content, FixedBackground, TitleHeader, MessageBox, ProfileWrapper } from "./CreditPage.styled";
const KimDaegeon = {
name: "김대건",
@@ -20,7 +20,7 @@ const KimDaegeon = {
const NamSoeon = {
name: "남소은",
- worklist: ["메인페이지", "통계 페이지", "디자인/구현"],
+ worklist: ["메인페이지", "통계 페이지 디자인/구현"],
github_id: "2NNS-V",
instagram_id: "2nns.v",
grade_year: 21,
@@ -103,12 +103,14 @@ export default function CreditPage() {
Developers
-
-
-
-
-
-
+
+
+
+
+
+
+
+
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index fa9b36c..b6ae324 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -83,14 +83,14 @@ export default function HomePage() {
setName(e.currentTarget.value)}
/>
diff --git a/src/pages/SelectPage.style.ts b/src/pages/SelectPage.style.ts
index 098409d..e73a94c 100644
--- a/src/pages/SelectPage.style.ts
+++ b/src/pages/SelectPage.style.ts
@@ -1,27 +1,28 @@
+import { TransitionGroup } from "react-transition-group";
+
import styled from "@emotion/styled";
interface SelectPageWrapperProps {
variants?: "field" | "choice";
}
+export const TransitionWrapper = styled(TransitionGroup)`
+ position: relative;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+`;
+
export const SelectPageWrapper = styled.div`
+ position: absolute;
width: 100%;
+ height: 100%;
display: flex;
flex-direction: column;
align-items: center;
- justify-content: flex-start;
- margin-top: 15vh;
+ justify-content: center;
gap: 7vh;
overflow: hidden;
-
- margin-top: ${(props) => {
- switch (props.variants) {
- case "field":
- return "3vh";
- case "choice":
- return "15vh";
- }
- }};
`;
interface ButtonWrapperProps {
diff --git a/src/pages/SelectPage.tsx b/src/pages/SelectPage.tsx
index 67666de..d63e50c 100644
--- a/src/pages/SelectPage.tsx
+++ b/src/pages/SelectPage.tsx
@@ -1,6 +1,6 @@
import { useState } from "react";
import { useNavigate } from "react-router-dom";
-import { CSSTransition, TransitionGroup } from "react-transition-group";
+import { CSSTransition } from "react-transition-group";
import { Button } from "@/components/form/Button";
import { Text } from "@/components/typography";
@@ -14,7 +14,7 @@ import { TreeNode } from "@/services/TreeNode";
import dongari from "@/assets/images/dongari.svg";
-import { ButtonWrapper, SelectPageWrapper } from "./SelectPage.style";
+import { ButtonWrapper, SelectPageWrapper, TransitionWrapper } from "./SelectPage.style";
import "@/transition/fade-slide.css";
export default function SelectPage() {
@@ -55,7 +55,7 @@ export default function SelectPage() {
setSelectedButton(id); // 클릭된 버튼 상태 저장
setTimeout(() => {
- setKeyProp(keyProp + 1);
+ setKeyProp(keyProp + 1); // 다음 전환 효과를 위한 key 변경
if (id === "left") {
if (root?.left?.getValue.question === null) {
navigate(`/loading?type=${root?.left?.getValue.resultType}`);
@@ -71,15 +71,14 @@ export default function SelectPage() {
} else if (id.startsWith("root")) {
setRoot(chooseSection((e.target as HTMLButtonElement).innerText));
}
- // setKeyProp(false); // 0.7초 후 다음 전환을 위해 false로 되돌림
setSelectedButton(""); // 애니메이션 끝난 후 상태 초기화
}, 700); // 0.5초 후에 root 변경
}
return (
-
+
-
+
{root ? (
{root?.getValue.question}
@@ -130,6 +129,6 @@ export default function SelectPage() {
-
+
);
}
diff --git a/src/styles/global.ts b/src/styles/global.ts
index 8b66001..d0e8851 100644
--- a/src/styles/global.ts
+++ b/src/styles/global.ts
@@ -6,6 +6,10 @@ export const GlobalStyle = css`
padding: 0;
border: 0;
box-sizing: border-box;
+
+ // 스크롤바 숨김 처리
+ -ms-overflow-style: none; /* 인터넷 익스플로러 */
+ scrollbar-width: none; /* 파이어폭스 */
}
body {
@@ -27,6 +31,11 @@ export const GlobalStyle = css`
text-decoration: none;
}
+ // 스크롤바 숨김 처리 2
+ ::-webkit-scrollbar {
+ display: none;
+ }
+
:root {
--font-size-xl: 24px;
--font-size-l: 22px;
diff --git a/src/transition/fade-slide.css b/src/transition/fade-slide.css
index 63e6cb2..b4f42fe 100644
--- a/src/transition/fade-slide.css
+++ b/src/transition/fade-slide.css
@@ -5,7 +5,6 @@
}
.fade-slide-enter-active {
- position: absolute;
opacity: 1;
transform: translateX(0px);
transition: all 500ms cubic-bezier(0.27, 0.02, 0.26, 0.99) 100ms;
@@ -24,7 +23,7 @@
.fade-slide-exit-active {
opacity: 0;
transform: translateX(-70px);
- transition: all 400ms cubic-bezier(0.27, 0.02, 0.26, 0.99);
+ transition: all 500ms cubic-bezier(0.27, 0.02, 0.26, 0.99);
}
.fade-slide-exit-done {