From 86531225c617cbde531dc28f4ecba71a67143395 Mon Sep 17 00:00:00 2001 From: Giwon Date: Mon, 9 Sep 2024 18:30:42 +0900 Subject: [PATCH 1/9] =?UTF-8?q?refacter:=20=EC=82=AC=EC=9D=B4=EB=93=9C?= =?UTF-8?q?=EB=B0=94=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=9E=90=EC=97=B0?= =?UTF-8?q?=EC=8A=A4=EB=9F=BD=EA=B2=8C=20=EC=88=98=EC=A0=95=20+=20?= =?UTF-8?q?=ED=97=A4=EB=8D=94=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/close.svg | 31 ++++++++------------- src/assets/images/sidabar_header.png | Bin 0 -> 9393 bytes src/components/layout/TopBar.styled.tsx | 3 +- src/components/navigation/SideBar.style.ts | 28 +++++++++++++++++-- src/components/navigation/SideBar.tsx | 27 ++++++++++-------- 5 files changed, 53 insertions(+), 36 deletions(-) create mode 100644 src/assets/images/sidabar_header.png 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 0000000000000000000000000000000000000000..07c3fef62814b1dc76778d4434966aa90600917c GIT binary patch literal 9393 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

xE&|(rnMP#VdC2b>StyA?QS&1#G;6?f$R+6%| yYo7-Kxc~jr$DedI;QikW-28u0vSa(-;k6O1PV@J1J=lxhWtOE 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 ( - - setIsOpen(false)} /> - -

    - handleNavigation("/")}>테스트 - handleNavigation("/analytics")}>통계 - handleNavigation("/credits")}>만든이들 -
- + <> + + setIsOpen(false)} /> + + +
    + handleNavigation("/")}>테스트 + handleNavigation("/analytics")}>통계 + handleNavigation("/credits")}>만든이들 +
+ + + ); }; From 5b251f8c2648f51ae96841bf7b0ef41e5682f034 Mon Sep 17 00:00:00 2001 From: Giwon Date: Mon, 9 Sep 2024 18:31:24 +0900 Subject: [PATCH 2/9] =?UTF-8?q?refacter:=20=EB=A7=8C=EB=93=A0=EC=9D=B4?= =?UTF-8?q?=EB=93=A4=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=9E=90=EC=97=B0?= =?UTF-8?q?=EC=8A=A4=EB=9F=BD=EA=B2=8C=20=EC=88=98=EC=A0=95=20(PC/?= =?UTF-8?q?=ED=83=9C=EB=B8=94=EB=A6=BF=20=EB=8C=80=EC=9D=91)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/display/DeveloperProfile.tsx | 15 +++++++++------ src/pages/CreditPage.styled.ts | 13 +++++++++++-- src/pages/CreditPage.tsx | 18 ++++++++++-------- 3 files changed, 30 insertions(+), 16 deletions(-) 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/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 - - - - - - + + + + + + + +

From 96a1e6a4674a769fd8c244cebaa3694f549dfe81 Mon Sep 17 00:00:00 2001 From: Giwon Date: Mon, 9 Sep 2024 18:31:44 +0900 Subject: [PATCH 3/9] =?UTF-8?q?refacter:=20=EC=84=A0=ED=83=9D=EC=A7=80=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=B5=9C=EB=8C=80=20800px=EB=A1=9C=20?= =?UTF-8?q?=EC=A0=9C=ED=95=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/form/Button.style.ts | 1 + 1 file changed, 1 insertion(+) 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; From 0a3234dbc8ba4298c0c5639765792afbe310e527 Mon Sep 17 00:00:00 2001 From: Giwon Date: Mon, 9 Sep 2024 18:32:12 +0900 Subject: [PATCH 4/9] =?UTF-8?q?refacter:=20=EC=9E=90=EC=97=B0=EC=8A=A4?= =?UTF-8?q?=EB=9F=BD=EA=B2=8C=20padding=20=EC=A1=B0=EC=A0=95=20+=20?= =?UTF-8?q?=EC=95=BD=ED=95=9C=20=EA=B7=B8=EB=A6=BC=EC=9E=90=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/form/DropDown.style.ts | 4 ++-- src/components/form/DropDown.tsx | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) 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", }} From e912658da9c722a709122ddde527a1cd6b1f7e05 Mon Sep 17 00:00:00 2001 From: Giwon Date: Mon, 9 Sep 2024 18:32:39 +0900 Subject: [PATCH 5/9] =?UTF-8?q?refacter:=20=EC=A0=95=EB=B3=B4=20=EC=9E=85?= =?UTF-8?q?=EB=A0=A5=EB=9E=80=20=ED=99=95=EC=9E=A5=20+=20padding=20?= =?UTF-8?q?=EC=9E=90=EC=97=B0=EC=8A=A4=EB=9F=BD=EA=B2=8C=20=EC=A1=B0?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/form/Input.style.ts | 13 ++++++++++--- src/pages/HomePage.tsx | 4 ++-- 2 files changed, 12 insertions(+), 5 deletions(-) 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/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)} /> From 2f4c5d3e9013d91c0798feb0402bdb1e7c865d65 Mon Sep 17 00:00:00 2001 From: Giwon Date: Mon, 9 Sep 2024 18:32:58 +0900 Subject: [PATCH 6/9] =?UTF-8?q?refacter:=20=EC=84=A0=EC=A7=80=20=EC=A0=84?= =?UTF-8?q?=ED=99=98=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20?= =?UTF-8?q?=EB=8D=94=20=EB=B6=80=EB=93=9C=EB=9F=BD=EA=B2=8C=20=EC=B5=9C?= =?UTF-8?q?=EC=A0=81=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/SelectPage.style.ts | 23 ++++++++++++----------- src/pages/SelectPage.tsx | 11 +++++------ 2 files changed, 17 insertions(+), 17 deletions(-) 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..370b9fe 100644 --- a/src/pages/SelectPage.tsx +++ b/src/pages/SelectPage.tsx @@ -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 ( - + - + 동BTI {root ? ( {root?.getValue.question} @@ -130,6 +129,6 @@ export default function SelectPage() { - + ); } From 96249b361bb23fe4c2b5632e549800491674b0e5 Mon Sep 17 00:00:00 2001 From: Giwon Date: Mon, 9 Sep 2024 18:33:09 +0900 Subject: [PATCH 7/9] =?UTF-8?q?refacter:=20=EC=8A=A4=ED=81=AC=EB=A1=A4?= =?UTF-8?q?=EB=B0=94=20=EC=88=A8=EA=B9=80=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/global.ts | 9 +++++++++ 1 file changed, 9 insertions(+) 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; From c3966e4be3a51ab473f2aed2e3475cd651caf1d3 Mon Sep 17 00:00:00 2001 From: Giwon Date: Mon, 9 Sep 2024 18:33:32 +0900 Subject: [PATCH 8/9] =?UTF-8?q?chore:=20absolute=20=EC=82=AC=EC=9A=A9=20X?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/transition/fade-slide.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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 { From ac8b61dec9c4cac312e2ae43e604c8b696f94508 Mon Sep 17 00:00:00 2001 From: Giwon Date: Mon, 9 Sep 2024 18:45:10 +0900 Subject: [PATCH 9/9] =?UTF-8?q?refacter:=20import=ED=95=98=EA=B3=A0=20?= =?UTF-8?q?=EC=82=AC=EC=9A=A9=ED=95=98=EC=A7=80=20=EC=95=8A=EA=B3=A0=20?= =?UTF-8?q?=EC=9E=88=EB=8D=98=20TransitionGroup=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/SelectPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/SelectPage.tsx b/src/pages/SelectPage.tsx index 370b9fe..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";