Merge pull request #48 from CoolPeace-yanolza/feature/#40

[#40] 사이드바, 헤더 및 대시보드 모바일 반응형 레이아웃

src/components/Report/LeftSection/Graph/index.tsx

@@ -13,15 +13,15 @@ const Graph = ({ graphData }: { graphData: ReportGraphProps }) => {
       {
         label: '전체 매출',
         data: graphData.map(data => parseInt(data.total_sales)),
-        backgroundColor: '#022c79e0',
-        borderColor: '#022c79',
+        backgroundColor: '#3182F6',
+        borderColor: '#3182F6',
         borderWidth: 1,
         borderRadius: 5
       },
       {
         label: '쿠폰 적용 매출',
         data: graphData.map(data => parseInt(data.coupon_total_sales)),
-        backgroundColor: '#ff3478e0',
+        backgroundColor: '#FF3478',
         borderColor: '#FF3478',
         borderWidth: 1,
         borderRadius: 5

src/components/Report/RightSection/Catchphrase/index.tsx

@@ -1,3 +1,4 @@
+import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import rocket from '@assets/icons/ic-catchphrase-rocket.svg';
@@ -14,7 +15,8 @@ const Catchphrase = () => {
         <Text>
           {'연도별 쿠폰 사용 현황을'}
           <br />
-          {'빠르게 확인해보세요!'}
+          <span>빠르게</span>
+          {' 확인해보세요!'}
         </Text>
         <RocketIcon
           src={rocket}
@@ -27,6 +29,17 @@ const Catchphrase = () => {
 
 export default Catchphrase;
 
+const rocketRising = keyframes`
+  0% {
+    opacity: 0;
+    transform: translateX(-300px) translateY(50px) rotate(90deg);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0) translateY(0) rotate(0deg);
+  }
+`;
+
 const Container = styled.div`
   position: relative;
 
@@ -49,7 +62,7 @@ const Content = styled.div`
   gap: 16px;
 `;
 
-const Title = styled.span`
+const Title = styled.p`
   font-size: 17px;
   font-weight: 700;
 
@@ -60,8 +73,12 @@ const Text = styled.span`
   color: #415574;
   font-size: 13px;
   font-weight: 700;
-
   line-height: 145%;
+
+  & > span {
+    display: inline;
+    box-shadow: inset 0 -7px 0 #ffddf9;
+  }
 `;
 
 const RocketIcon = styled.img`
@@ -72,4 +89,6 @@ const RocketIcon = styled.img`
 
   width: 120px;
   max-height: 120px;
+
+  animation: ${rocketRising} 1s;
 `;

src/components/common/DashboardHeader/index.tsx

@@ -41,6 +41,7 @@ const Container = styled.div`
 
   display: flex;
   justify-content: space-between;
+  align-items: flex-end;
 `;
 
 const MenuContainer = styled.div`
@@ -49,7 +50,7 @@ const MenuContainer = styled.div`
 
 const DashboardNavigation = styled.div<NavigationPath>`
   margin-right: 45px;
-  padding: 16px 0;
+  padding: 10px 0;
   border-bottom: ${props =>
     props.$pathname === '/' ? '3px solid #001d6c' : 'none'};
 
@@ -81,9 +82,13 @@ const Button = styled.button`
   justify-content: center;
   align-items: center;
 
-  background: linear-gradient(273deg, #ff0a5c 43.78%, #ff4281 99.72%);
+  background: linear-gradient(91deg, #ff3478 1.39%, #ff83ad 98.63%);
   color: white;
   font-size: 17px;
-
+  font-weight: 700;
   cursor: pointer;
+
+  &:hover {
+    background: #b22655;
+  }
 `;

src/components/common/Layout/Header/Select/index.tsx

@@ -81,8 +81,6 @@ const Accommodations = styled.select`
   border-radius: 12px;
   padding: 10px 20px;
 
-  display: inline-block;
-
   font-weight: 500;
 
   color: rgba(60, 60, 67, 0.6);
@@ -94,6 +92,16 @@ const Accommodations = styled.select`
   &::-ms-expand {
     display: none;
   }
+
+  ${theme.response.tablet} {
+    width: 150px;
+    height: 30px;
+
+    margin-right: 0;
+    padding: 0 20px;
+
+    font-size: 12px;
+  }
 `;
 
 const Accommodation = styled.option`

src/components/common/Layout/Header/User/UserModal/index.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 
 import { UserModal, UserModalStyleProps } from '@/types/layout';
+import theme from '@styles/theme';
 
 const UserModal = ({ isOpen }: UserModal) => {
   // HACK: cookie에서 사용자 정보 가져오기
@@ -33,6 +34,13 @@ const Modal = styled.div<UserModalStyleProps>`
 
   background-color: #e3e5e5;
   transition: all 0.5s;
+
+  ${theme.response.tablet} {
+    right: 35px;
+    top: 45px;
+
+    width: ${props => (props.$isOpen ? '300px' : 0)};
+  }
 `;
 
 const UserInformation = styled.div`

src/components/common/Layout/Header/User/index.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 
 import user from '@assets/icons/ic-header-user.svg';
 import UserModal from './UserModal';
+import theme from '@styles/theme';
 
 const User = () => {
   const [isUserModalOpen, setIsUserModalOpen] = useState(false);
@@ -29,4 +30,9 @@ const UserIcon = styled.img`
   border-radius: 50%;
 
   cursor: pointer;
+
+  ${theme.response.tablet} {
+    width: 24px;
+    height: 24px;
+  }
 `;

src/components/common/Layout/Header/index.tsx

@@ -3,8 +3,8 @@ import styled from '@emotion/styled';
 
 import logo from '@assets/icons/ic-logo.svg';
 import Select from './Select';
-import theme from '@styles/theme';
 import User from './User';
+import theme from '@styles/theme';
 
 const Header = () => {
   return (
@@ -19,6 +19,7 @@ const Header = () => {
         />
       </LogoLink>
       <Buttons>
+        <div></div>
         <Select />
         <User />
       </Buttons>
@@ -38,25 +39,46 @@ const Container = styled.header`
 
   border-radius: 20px;
   padding: 20px;
-  padding-left: 30px;
 
   display: flex;
-  align-items: center;
   justify-content: space-between;
+  align-items: center;
 
   background-color: ${theme.colors.white};
+
+  ${theme.response.tablet} {
+    height: 65px;
+
+    border-bottom: 1px solid #e6e6e6;
+    border-radius: 0;
+  }
 `;
 
 const LogoLink = styled(NavLink)`
   width: 140px;
   height: 30px;
+
+  ${theme.response.tablet} {
+    display: none;
+  }
 `;
 
 const LogoIcon = styled.img`
   width: 100%;
   height: 100%;
+
+  ${theme.response.tablet} {
+    display: none;
+  }
 `;
 
 const Buttons = styled.div`
   display: flex;
+  align-items: center;
+
+  ${theme.response.tablet} {
+    width: 100%;
+
+    justify-content: space-between;
+  }
 `;

src/components/common/Layout/Sidebar/Header/index.tsx

@@ -2,11 +2,12 @@ import styled from '@emotion/styled';
 
 import hamburger from '@assets/icons/ic-sidebar-hamburger.svg';
 import logo from '@assets/icons/ic-logo.svg';
-import { SidebarHeader } from '@/types/layout';
+import { SidebarHeader, SidebarOpen } from '@/types/layout';
+import theme from '@styles/theme';
 
 const Header = ({ isSidebarOpen, setIsSidebarOpen }: SidebarHeader) => {
   return (
-    <Container>
+    <Container $isSidebarOpen={isSidebarOpen}>
       <Hamburger onClick={() => setIsSidebarOpen(prev => !prev)}>
         <HamburgerIcon
           src={hamburger}
@@ -25,13 +26,19 @@ const Header = ({ isSidebarOpen, setIsSidebarOpen }: SidebarHeader) => {
 
 export default Header;
 
-const Container = styled.div`
+const Container = styled.div<SidebarOpen>`
   width: 100%;
   height: 100%;
 
+  margin-left: 0;
+
   display: flex;
   justify-content: space-between;
   align-items: center;
+
+  ${theme.response.tablet} {
+    margin-left: 5px;
+  }
 `;
 
 const Hamburger = styled.button`
@@ -43,19 +50,30 @@ const Hamburger = styled.button`
   border-radius: 11px;
 
   background-color: transparent;
-
   cursor: pointer;
-
   transition: all 0.3s;
 
   &:hover {
     background-color: #e9eef6;
   }
+
+  ${theme.response.tablet} {
+    width: 50px;
+    height: 50px;
+
+    margin: 8px 10px;
+    padding: 0 6px;
+  }
 `;
 
 const HamburgerIcon = styled.img`
   width: 30px;
   height: 20px;
+
+  ${theme.response.tablet} {
+    width: 21px;
+    height: 14px;
+  }
 `;
 
 const LogoIcon = styled.img`

src/components/common/Layout/Sidebar/Navigation/Coupon/CouponNav/index.tsx

@@ -91,6 +91,10 @@ const Link = styled(NavLink)`
     color: ${theme.colors.white};
     background-color: rgba(255, 255, 255, 0.3);
   }
+
+  ${theme.response.tablet} {
+    width: 85%;
+  }
 `;
 
 const Icon = styled.img`

src/components/common/Layout/Sidebar/Navigation/index.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import Coupon from './Coupon';
 import Settlements from './Settlements';
 import { SidebarOpen } from '@/types/layout';
+import theme from '@styles/theme';
 
 const Navigation = ({ isSidebarOpen }: { isSidebarOpen: boolean }) => {
   return (
@@ -22,4 +23,9 @@ const Container = styled.nav<SidebarOpen>`
   flex-direction: column;
 
   font-size: ${props => (props.$isSidebarOpen ? '14px' : '12px')};
+
+  ${theme.response.tablet} {
+    margin-top: ${props => (props.$isSidebarOpen ? '0' : '30px')};
+    padding: 10px;
+  }
 `;

src/components/common/Layout/Sidebar/index.tsx

@@ -38,16 +38,25 @@ const Container = styled.div<SidebarOpen>`
   padding: 20px 10px;
 
   background-color: ${theme.colors.white};
-
   overflow: hidden;
   // HACK: z-index 상수화 (const enum, as const 학습 후 적용)
   z-index: 100;
-
   transition: all 0.3s;
+
+  ${theme.response.tablet} {
+    width: ${props => (props.$isSidebarOpen ? '100%' : 'auto')};
+    height: ${props => (props.$isSidebarOpen ? 'fit-content' : '93px')};
+    min-height: ${props => (props.$isSidebarOpen ? 'fit-content' : '93px')};
+
+    padding: 0;
+
+    background-color: ${props =>
+      props.$isSidebarOpen ? 'white' : 'transparent'};
+  }
 `;
 
 const Menu = styled.div`
-  width: 230px;
+  width: 100%;
   height: 100%;
 
   display: flex;
@@ -63,6 +72,5 @@ const LeftoverScreen = styled.div`
   position: fixed;
 
   background-color: #4242427c;
-
   z-index: 90;
 `;