Refacter/조금 더 자연스러운 UI/UX

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<DeveloperCardProps> = ({ info }) => {
                 <Image src={`https://github.com/${info.github_id}.png`} />
                 <InfoDiv>
                     <NameWorkDiv>
-                        <Text size="l" weight="extrabold">
+                        <Text size="m" weight="extrabold">
                             {info.name}
                         </Text>
-                        <Text size="xs" color="#818181">
+                        <Text size="12px" color="#818181">
                             {info.worklist.join(" · ")}
                         </Text>
                     </NameWorkDiv>

src/components/form/Button.style.ts

@@ -5,6 +5,7 @@ export const ButtonElement = styled.button<ButtonProps>`
     font-family: NanumSquareNeo;
 
     width: ${(props) => props.width};
+    max-width: 800px;
     height: ${(props) => props.height};
 
     border-radius: 12px;

src/components/form/DropDown.style.ts

@@ -30,10 +30,10 @@ export const DropDownWrapper = styled.div<DropDownProps>`
 
 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<LabelProps>`

src/components/form/DropDown.tsx

@@ -44,6 +44,7 @@ export default function DropDown({ color, width, height, selectedMajor, setSelec
                 placeholder="단과 대학을 선택하세용"
                 itemTemplate={(option) => <LabelContainer color={color}>{option.label}</LabelContainer>}
                 panelStyle={{
+                    boxShadow: "2px 2px 30px #00000030",
                     borderRadius: "16px",
                     overflow: "hidden",
                 }}

src/components/form/Input.style.ts

@@ -2,14 +2,17 @@ import { InputProps } from "./Input";
 import styled from "@emotion/styled";
 
 export const InputElement = styled.input<InputProps>`
-    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<InputProps>`
                 return "#fff";
         }
     }};
+
+    &:focus {
+        border: 1px solid var(--color-primary);
+    }
 `;

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;

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);
+    }
+`;

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 (
-        <SideBarWrapper id="sidebar" ref={outside} className={isOpen ? "open" : ""}>
-            <img src={closeIcon} onClick={() => setIsOpen(false)} />
-
-            <ul>
-                <Menu onClick={() => handleNavigation("/")}>테스트</Menu>
-                <Menu onClick={() => handleNavigation("/analytics")}>통계</Menu>
-                <Menu onClick={() => handleNavigation("/credits")}>만든이들</Menu>
-            </ul>
-        </SideBarWrapper>
+        <>
+            <SideBarWrapper id="sidebar" ref={outside} className={isOpen ? "open" : ""}>
+                <img src={closeIcon} className="close" onClick={() => setIsOpen(false)} />
+                <img src={headerImage} />
+
+                <ul>
+                    <Menu onClick={() => handleNavigation("/")}>테스트</Menu>
+                    <Menu onClick={() => handleNavigation("/analytics")}>통계</Menu>
+                    <Menu onClick={() => handleNavigation("/credits")}>만든이들</Menu>
+                </ul>
+            </SideBarWrapper>
+            <Backdrop className={isOpen ? "open" : ""} />
+        </>
     );
 };

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;
+`;

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
                     </Text>
                 </TitleHeader>
-                <DeveloperProfile info={KimDaegeon} />
-                <DeveloperProfile info={NamSoeon} />
-                <DeveloperProfile info={ParkSinyoung} />
-                <DeveloperProfile info={JangGiwon} />
-                <DeveloperProfile info={JoJaeyong} />
-                <DeveloperProfile info={HwangBuyeon} />
+                <ProfileWrapper>
+                    <DeveloperProfile info={KimDaegeon} />
+                    <DeveloperProfile info={NamSoeon} />
+                    <DeveloperProfile info={ParkSinyoung} />
+                    <DeveloperProfile info={JangGiwon} />
+                    <DeveloperProfile info={JoJaeyong} />
+                    <DeveloperProfile info={HwangBuyeon} />
+                </ProfileWrapper>
                 <br />
                 <br />
                 <Credit />

src/pages/HomePage.tsx

@@ -83,14 +83,14 @@ export default function HomePage() {
                     <Input
                         variants="primary"
                         width="242px"
-                        height="30px"
+                        height="40px"
                         placeholder="이름을 입력하세용"
                         onChange={(e) => setName(e.currentTarget.value)}
                     />
                     <DropDown
                         color="primary"
                         width="242px"
-                        height="30px"
+                        height="40px"
                         selectedMajor={selectedMajor}
                         setSelectedMajor={setSelectedMajor}
                     />

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)<SelectPageWrapperProps>`
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+`;
+
 export const SelectPageWrapper = styled.div<SelectPageWrapperProps>`
+    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 {