From a8e5ef2b2d912f73b3d5f4727dca6d1f954abe19 Mon Sep 17 00:00:00 2001
From: JitHoon <imessi0336@gmail.com>
Date: Thu, 18 Jan 2024 16:30:08 +0900
Subject: [PATCH 01/14] =?UTF-8?q?remove:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20=ED=8C=8C=EC=9D=BC=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/fonts/.gitkeep  | 0
 public/images/.gitkeep | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 public/fonts/.gitkeep
 delete mode 100644 public/images/.gitkeep

diff --git a/public/fonts/.gitkeep b/public/fonts/.gitkeep
deleted file mode 100644
index e69de29b..00000000
diff --git a/public/images/.gitkeep b/public/images/.gitkeep
deleted file mode 100644
index e69de29b..00000000

From 1c383e173e0e74e62dd8f330473baa8bbdd25d26 Mon Sep 17 00:00:00 2001
From: JitHoon <imessi0336@gmail.com>
Date: Thu, 18 Jan 2024 16:31:11 +0900
Subject: [PATCH 02/14] =?UTF-8?q?design:=20=EB=8C=80=EC=8B=9C=EB=B3=B4?=
 =?UTF-8?q?=EB=93=9C=20=ED=97=A4=EB=8D=94=20=EB=93=B1=EB=A1=9D=ED=95=98?=
 =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20hover=20=ED=9A=A8=EA=B3=BC=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/DashboardHeader/index.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/common/DashboardHeader/index.tsx b/src/components/common/DashboardHeader/index.tsx
index bdc21a4e..db7692ca 100644
--- a/src/components/common/DashboardHeader/index.tsx
+++ b/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,14 @@ 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;
-
   cursor: pointer;
+  transition: all 0.5s;
+
+  &:hover {
+    color: black;
+    background: #e9eef6;
+  }
 `;

From d1b93c22a1c9e43e940924dea203744cd8a4bcd5 Mon Sep 17 00:00:00 2001
From: JitHoon <imessi0336@gmail.com>
Date: Thu, 18 Jan 2024 16:32:11 +0900
Subject: [PATCH 03/14] =?UTF-8?q?design:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?=
 =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20Layout=20=EC=84=B8=ED=8C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Layout/index.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/common/Layout/index.tsx b/src/components/common/Layout/index.tsx
index 89cb5926..834e64db 100644
--- a/src/components/common/Layout/index.tsx
+++ b/src/components/common/Layout/index.tsx
@@ -41,6 +41,7 @@ const Container = styled.div`
 
 const Section = styled.section`
   width: 100%;
+  min-width: calc(100vh - 100px);
   height: 100vh;
 
   margin-left: 100px;
@@ -48,9 +49,15 @@ const Section = styled.section`
 
   display: flex;
   flex-direction: column;
+
+  @media screen and (max-width: 1200px) {
+    min-width: 0;
+
+    margin-left: 0;
+    padding: 0;
+  }
 `;
 
-//HACK: 타입 분리 예정!
 const OutletLayout = styled.div<LayoutStyleProps>`
   width: 100%;
   height: 100vh;
@@ -70,4 +77,14 @@ const OutletLayout = styled.div<LayoutStyleProps>`
   }};
 
   overflow: scroll;
+
+  @media screen and (max-width: 1200px) {
+    width: 100vw;
+
+    margin-top: 0;
+    border-radius: 0;
+
+    overflow-x: hidden;
+    overflow-y: scroll;
+  }
 `;

From 6737d22aa940ae4d8be8abb7246ebc351bca26b6 Mon Sep 17 00:00:00 2001
From: JitHoon <imessi0336@gmail.com>
Date: Thu, 18 Jan 2024 16:34:41 +0900
Subject: [PATCH 04/14] =?UTF-8?q?design:=20=ED=97=A4=EB=8D=94=20=EB=AA=A8?=
 =?UTF-8?q?=EB=B0=94=EC=9D=BC=20=EB=B0=98=EC=9D=91=ED=98=95=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/common/Layout/Header/index.tsx | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/components/common/Layout/Header/index.tsx b/src/components/common/Layout/Header/index.tsx
index 22ef7b1c..241258a7 100644
--- a/src/components/common/Layout/Header/index.tsx
+++ b/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};
+
+  @media screen and (max-width: 1200px) {
+    height: 65px;
+
+    border-bottom: 1px solid #e6e6e6;
+    border-radius: 0;
+  }
 `;
 
 const LogoLink = styled(NavLink)`
   width: 140px;
   height: 30px;
+
+  @media screen and (max-width: 1200px) {
+    display: none;
+  }
 `;
 
 const LogoIcon = styled.img`
   width: 100%;
   height: 100%;
+
+  @media screen and (max-width: 1200px) {
+    display: none;
+  }
 `;
 
 const Buttons = styled.div`
   display: flex;
+  align-items: center;
+
+  @media screen and (max-width: 1200px) {
+    width: 100%;
+
+    justify-content: space-between;
+  }
 `;

From 99cfa695b7d2869b4d88d6f0ecc5f926b5a450c1 Mon Sep 17 00:00:00 2001
From: JitHoon <imessi0336@gmail.com>
Date: Thu, 18 Jan 2024 16:38:23 +0900
Subject: [PATCH 05/14] =?UTF-8?q?design:=20=EC=9C=A0=EC=A0=80=20=EC=95=84?=
 =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EB=B0=8F=20=EB=AA=A8=EB=8B=AC=20=EB=AA=A8?=
 =?UTF-8?q?=EB=B0=94=EC=9D=BC=20=EB=B0=98=EC=9D=91=ED=98=95=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

---
 .../common/Layout/Header/User/UserModal/index.tsx          | 7 +++++++
 src/components/common/Layout/Header/User/index.tsx         | 5 +++++
 2 files changed, 12 insertions(+)

diff --git a/src/components/common/Layout/Header/User/UserModal/index.tsx b/src/components/common/Layout/Header/User/UserModal/index.tsx
index f4a1d540..3036a3ac 100644
--- a/src/components/common/Layout/Header/User/UserModal/index.tsx
+++ b/src/components/common/Layout/Header/User/UserModal/index.tsx
@@ -33,6 +33,13 @@ const Modal = styled.div<UserModalStyleProps>`
 
   background-color: #e3e5e5;
   transition: all 0.5s;
+
+  @media screen and (max-width: 1200px) {
+    right: 35px;
+    top: 45px;
+
+    width: ${props => (props.$isOpen ? '300px' : 0)};
+  }
 `;
 
 const UserInformation = styled.div`
diff --git a/src/components/common/Layout/Header/User/index.tsx b/src/components/common/Layout/Header/User/index.tsx
index 11a55bfe..438ff866 100644
--- a/src/components/common/Layout/Header/User/index.tsx
+++ b/src/components/common/Layout/Header/User/index.tsx
@@ -29,4 +29,9 @@ const UserIcon = styled.img`
   border-radius: 50%;
 
   cursor: pointer;
+
+  @media screen and (max-width: 1200px) {
+    width: 24px;
+    height: 24px;
+  }
 `;

From 1503f3938acc5bd3159a348753eff386df8468c5 Mon Sep 17 00:00:00 2001
From: JitHoon <imessi0336@gmail.com>
Date: Thu, 18 Jan 2024 16:39:17 +0900
Subject: [PATCH 06/14] =?UTF-8?q?design:=20=EC=82=AC=EC=9D=B4=EB=93=9C?=
 =?UTF-8?q?=EB=B0=94=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EB=B0=98=EC=9D=91?=
 =?UTF-8?q?=ED=98=95=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/Layout/Sidebar/Header/index.tsx    | 27 +++++++++++++++----
 .../Navigation/Coupon/CouponNav/index.tsx     |  4 +++
 .../Layout/Sidebar/Navigation/index.tsx       |  5 ++++
 .../common/Layout/Sidebar/index.tsx           | 16 ++++++++---
 4 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/src/components/common/Layout/Sidebar/Header/index.tsx b/src/components/common/Layout/Sidebar/Header/index.tsx
index 61c56c44..72ad354a 100644
--- a/src/components/common/Layout/Sidebar/Header/index.tsx
+++ b/src/components/common/Layout/Sidebar/Header/index.tsx
@@ -2,11 +2,11 @@ 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';
 
 const Header = ({ isSidebarOpen, setIsSidebarOpen }: SidebarHeader) => {
   return (
-    <Container>
+    <Container $isSidebarOpen={isSidebarOpen}>
       <Hamburger onClick={() => setIsSidebarOpen(prev => !prev)}>
         <HamburgerIcon
           src={hamburger}
@@ -25,13 +25,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;
+
+  @media screen and (max-width: 1200px) {
+    margin-left: 5px;
+  }
 `;
 
 const Hamburger = styled.button`
@@ -43,19 +49,30 @@ const Hamburger = styled.button`
   border-radius: 11px;
 
   background-color: transparent;
-
   cursor: pointer;
-
   transition: all 0.3s;
 
   &:hover {
     background-color: #e9eef6;
   }
+
+  @media screen and (max-width: 1200px) {
+    width: 50px;
+    height: 50px;
+
+    margin: 8px 10px;
+    padding: 0 6px;
+  }
 `;
 
 const HamburgerIcon = styled.img`
   width: 30px;
   height: 20px;
+
+  @media screen and (max-width: 1200px) {
+    width: 21px;
+    height: 14px;
+  }
 `;
 
 const LogoIcon = styled.img`
diff --git a/src/components/common/Layout/Sidebar/Navigation/Coupon/CouponNav/index.tsx b/src/components/common/Layout/Sidebar/Navigation/Coupon/CouponNav/index.tsx
index b1a359af..dba638d8 100644
--- a/src/components/common/Layout/Sidebar/Navigation/Coupon/CouponNav/index.tsx
+++ b/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);
   }
+
+  @media screen and (max-width: 1200px) {
+    width: 85%;
+  }
 `;
 
 const Icon = styled.img`
diff --git a/src/components/common/Layout/Sidebar/Navigation/index.tsx b/src/components/common/Layout/Sidebar/Navigation/index.tsx
index da273059..dc6df1fb 100644
--- a/src/components/common/Layout/Sidebar/Navigation/index.tsx
+++ b/src/components/common/Layout/Sidebar/Navigation/index.tsx
@@ -22,4 +22,9 @@ const Container = styled.nav<SidebarOpen>`
   flex-direction: column;
 
   font-size: ${props => (props.$isSidebarOpen ? '14px' : '12px')};
+
+  @media screen and (max-width: 1200px) {
+    margin-top: ${props => (props.$isSidebarOpen ? '0' : '30px')};
+    padding: 10px;
+  }
 `;
diff --git a/src/components/common/Layout/Sidebar/index.tsx b/src/components/common/Layout/Sidebar/index.tsx
index d23504a5..de9b0b30 100644
--- a/src/components/common/Layout/Sidebar/index.tsx
+++ b/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;
+
+  @media screen and (max-width: 1200px) {
+    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;
 `;

From 338744ae5162b43421210cdb09734ce0abb67ce1 Mon Sep 17 00:00:00 2001
From: JitHoon <imessi0336@gmail.com>
Date: Thu, 18 Jan 2024 16:39:41 +0900
Subject: [PATCH 07/14] =?UTF-8?q?design:=20=EC=88=99=EC=86=8C=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EB=B0=98=EC=9D=91?=
 =?UTF-8?q?=ED=98=95=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Layout/Header/Select/index.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/common/Layout/Header/Select/index.tsx b/src/components/common/Layout/Header/Select/index.tsx
index 757ca45e..1518289f 100644
--- a/src/components/common/Layout/Header/Select/index.tsx
+++ b/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;
   }
+
+  @media screen and (max-width: 1200px) {
+    width: 150px;
+    height: 30px;
+
+    margin-right: 0;
+    padding: 0 20px;
+
+    font-size: 12px;
+  }
 `;
 
 const Accommodation = styled.option`

From 881336c5df5ab7728e294b5f674b6694c0e95077 Mon Sep 17 00:00:00 2001
From: JitHoon <imessi0336@gmail.com>
Date: Thu, 18 Jan 2024 16:40:13 +0900
Subject: [PATCH 08/14] =?UTF-8?q?design:=20=EB=88=84=EC=A0=81=20=EB=A6=AC?=
 =?UTF-8?q?=ED=8F=AC=ED=8A=B8=20=EA=B7=B8=EB=9E=98=ED=94=84=20=EC=83=89?=
 =?UTF-8?q?=EC=83=81=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Report/LeftSection/Graph/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Report/LeftSection/Graph/index.tsx b/src/components/Report/LeftSection/Graph/index.tsx
index f1815232..af6a9998 100644
--- a/src/components/Report/LeftSection/Graph/index.tsx
+++ b/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

From 7c444776eae8bb0472f7f6bfe511591d610807cb Mon Sep 17 00:00:00 2001
From: JitHoon <imessi0336@gmail.com>
Date: Thu, 18 Jan 2024 18:24:49 +0900
Subject: [PATCH 09/14] =?UTF-8?q?design:=20=EB=88=84=EC=A0=81=20=EB=A6=AC?=
 =?UTF-8?q?=ED=8F=AC=ED=8A=B8=20=EC=97=90=EB=8B=88=EB=A9=94=EC=97=90?=
 =?UTF-8?q?=EC=85=98=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Report/RightSection/Catchphrase/index.tsx | 25 ++++++++++++++++---
 .../Report/RightSection/TotalReport/index.tsx |  7 ++++++
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/components/Report/RightSection/Catchphrase/index.tsx b/src/components/Report/RightSection/Catchphrase/index.tsx
index 6aad6d99..1d0edc3c 100644
--- a/src/components/Report/RightSection/Catchphrase/index.tsx
+++ b/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,16 @@ const Catchphrase = () => {
 
 export default Catchphrase;
 
+const rising = keyframes`
+  0%{ opacity: 0; transform: translateY(50px);}
+  100%{opacity: 1; transform: translateY(0);}
+`;
+
+const rocketRising = keyframes`
+  0%{ opacity: 0; transform: translate(-100px, 50px);}
+  100%{opacity: 1; transform: translate(0, 0);}
+`;
+
 const Container = styled.div`
   position: relative;
 
@@ -49,7 +61,7 @@ const Content = styled.div`
   gap: 16px;
 `;
 
-const Title = styled.span`
+const Title = styled.p`
   font-size: 17px;
   font-weight: 700;
 
@@ -60,8 +72,13 @@ const Text = styled.span`
   color: #415574;
   font-size: 13px;
   font-weight: 700;
-
   line-height: 145%;
+  animation: ${rising} 1s;
+
+  & > 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;
 `;
diff --git a/src/components/Report/RightSection/TotalReport/index.tsx b/src/components/Report/RightSection/TotalReport/index.tsx
index 9a487816..234ee056 100644
--- a/src/components/Report/RightSection/TotalReport/index.tsx
+++ b/src/components/Report/RightSection/TotalReport/index.tsx
@@ -1,3 +1,4 @@
+import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { renderTotalAmount, renderTotalText } from '@utils/index';
@@ -54,6 +55,11 @@ const TotalReport = () => {
 
 export default TotalReport;
 
+const rising = keyframes`
+  0%{ opacity: 0; transform: translateY(50px);}
+  100%{opacity: 1; transform: translateY(0);}
+`;
+
 const Container = styled.div`
   width: 100%;
   height: 100%;
@@ -65,6 +71,7 @@ const Container = styled.div`
   flex-direction: column;
 
   background-color: white;
+  animation: ${rising} 1s;
 `;
 
 const Title = styled.span`

From e33096ca00950b8adf6d9e71539471ba9c2bbfad Mon Sep 17 00:00:00 2001
From: JitHoon <imessi0336@gmail.com>
Date: Thu, 18 Jan 2024 18:38:40 +0900
Subject: [PATCH 10/14] =?UTF-8?q?modify:=20calc()=20sidebar-width=20?=
 =?UTF-8?q?=EC=83=81=EC=88=98=20=EB=B3=80=EC=88=98=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Layout/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/common/Layout/index.tsx b/src/components/common/Layout/index.tsx
index 834e64db..9abbe2b2 100644
--- a/src/components/common/Layout/index.tsx
+++ b/src/components/common/Layout/index.tsx
@@ -40,8 +40,10 @@ const Container = styled.div`
 `;
 
 const Section = styled.section`
+  --sidebar-width: 100px;
+
   width: 100%;
-  min-width: calc(100vh - 100px);
+  min-width: calc(100vh - var(--sidebar-width));
   height: 100vh;
 
   margin-left: 100px;

From 7e3da2ec92d65452ad2e6230d1b63461cdc396d7 Mon Sep 17 00:00:00 2001
From: JitHoon <imessi0336@gmail.com>
Date: Thu, 18 Jan 2024 22:31:25 +0900
Subject: [PATCH 11/14] =?UTF-8?q?modify:=20=EB=88=84=EC=A0=81=20=EB=A6=AC?=
 =?UTF-8?q?=ED=8F=AC=ED=8A=B8=20=EC=9D=B8=ED=84=B0=EB=A0=89=EC=85=98=20?=
 =?UTF-8?q?=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Report/RightSection/Catchphrase/index.tsx    | 16 ++++++++--------
 .../Report/RightSection/TotalReport/index.tsx    |  7 -------
 src/components/common/DashboardHeader/index.tsx  |  5 ++---
 3 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/src/components/Report/RightSection/Catchphrase/index.tsx b/src/components/Report/RightSection/Catchphrase/index.tsx
index 1d0edc3c..304922d1 100644
--- a/src/components/Report/RightSection/Catchphrase/index.tsx
+++ b/src/components/Report/RightSection/Catchphrase/index.tsx
@@ -29,14 +29,15 @@ const Catchphrase = () => {
 
 export default Catchphrase;
 
-const rising = keyframes`
-  0%{ opacity: 0; transform: translateY(50px);}
-  100%{opacity: 1; transform: translateY(0);}
-`;
-
 const rocketRising = keyframes`
-  0%{ opacity: 0; transform: translate(-100px, 50px);}
-  100%{opacity: 1; transform: translate(0, 0);}
+  0% {
+    opacity: 0;
+    transform: translateX(-300px) translateY(50px) rotate(90deg);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0) translateY(0) rotate(0deg);
+  }
 `;
 
 const Container = styled.div`
@@ -73,7 +74,6 @@ const Text = styled.span`
   font-size: 13px;
   font-weight: 700;
   line-height: 145%;
-  animation: ${rising} 1s;
 
   & > span {
     display: inline;
diff --git a/src/components/Report/RightSection/TotalReport/index.tsx b/src/components/Report/RightSection/TotalReport/index.tsx
index 234ee056..9a487816 100644
--- a/src/components/Report/RightSection/TotalReport/index.tsx
+++ b/src/components/Report/RightSection/TotalReport/index.tsx
@@ -1,4 +1,3 @@
-import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { renderTotalAmount, renderTotalText } from '@utils/index';
@@ -55,11 +54,6 @@ const TotalReport = () => {
 
 export default TotalReport;
 
-const rising = keyframes`
-  0%{ opacity: 0; transform: translateY(50px);}
-  100%{opacity: 1; transform: translateY(0);}
-`;
-
 const Container = styled.div`
   width: 100%;
   height: 100%;
@@ -71,7 +65,6 @@ const Container = styled.div`
   flex-direction: column;
 
   background-color: white;
-  animation: ${rising} 1s;
 `;
 
 const Title = styled.span`
diff --git a/src/components/common/DashboardHeader/index.tsx b/src/components/common/DashboardHeader/index.tsx
index db7692ca..9a582bed 100644
--- a/src/components/common/DashboardHeader/index.tsx
+++ b/src/components/common/DashboardHeader/index.tsx
@@ -85,11 +85,10 @@ const Button = styled.button`
   background: linear-gradient(91deg, #ff3478 1.39%, #ff83ad 98.63%);
   color: white;
   font-size: 17px;
+  font-weight: 700;
   cursor: pointer;
-  transition: all 0.5s;
 
   &:hover {
-    color: black;
-    background: #e9eef6;
+    background: #b22655;
   }
 `;

From 6c441eb0c6b21ce8e84e157e61e9a8beac28e012 Mon Sep 17 00:00:00 2001
From: JitHoon <imessi0336@gmail.com>
Date: Thu, 18 Jan 2024 22:59:10 +0900
Subject: [PATCH 12/14] =?UTF-8?q?design:=20@media=20900px,=20345px=20?=
 =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A6=B0=20=EB=84=88=EB=B9=84=20theme?=
 =?UTF-8?q?=EC=97=90=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/theme.ts  | 13 +++++++++++++
 src/types/theme.d.ts |  6 ++++++
 2 files changed, 19 insertions(+)

diff --git a/src/styles/theme.ts b/src/styles/theme.ts
index 53dcdfca..b317a7e7 100644
--- a/src/styles/theme.ts
+++ b/src/styles/theme.ts
@@ -1,4 +1,17 @@
 const theme = {
+  // theme 컨벤션 : 페이지 별 변수 지정 사용
+  login: {},
+  dashboard: {},
+  report: {},
+  coupons: {},
+  register: {},
+  settlements: {},
+
+  response: {
+    tablet: '@media screen and (max-width: 900px)',
+    mobile: '@media screen and (max-width: 345px)'
+  },
+
   colors: {
     background: '#F2F3F5',
     hover: '#1A2849',
diff --git a/src/types/theme.d.ts b/src/types/theme.d.ts
index 622d4835..1dcc61e9 100644
--- a/src/types/theme.d.ts
+++ b/src/types/theme.d.ts
@@ -9,6 +9,12 @@ declare module '@emotion/react' {
     coupons: {};
     register: {};
     settlements: {};
+
+    response: {
+      tablet: '@media screen and (max-width: 900px)';
+      mobile: '@media screen and (max-width: 345px)';
+    };
+
     colors: {
       background: string;
       hover: string;

From c28aaf18a195557a6a85b7e5f3a53d8dfa1af7cc Mon Sep 17 00:00:00 2001
From: JitHoon <imessi0336@gmail.com>
Date: Thu, 18 Jan 2024 23:00:49 +0900
Subject: [PATCH 13/14] =?UTF-8?q?design:=20=ED=97=A4=EB=8D=94,=20=EC=82=AC?=
 =?UTF-8?q?=EC=9D=B4=EB=93=9C=EB=B0=94,=20=EC=A0=84=EC=B2=B4=20=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83@media=20theme=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Layout/Header/Select/index.tsx      | 2 +-
 .../common/Layout/Header/User/UserModal/index.tsx         | 3 ++-
 src/components/common/Layout/Header/User/index.tsx        | 3 ++-
 src/components/common/Layout/Header/index.tsx             | 8 ++++----
 src/components/common/Layout/Sidebar/Header/index.tsx     | 7 ++++---
 .../Layout/Sidebar/Navigation/Coupon/CouponNav/index.tsx  | 2 +-
 src/components/common/Layout/Sidebar/Navigation/index.tsx | 3 ++-
 src/components/common/Layout/Sidebar/index.tsx            | 2 +-
 src/components/common/Layout/index.tsx                    | 4 ++--
 9 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/components/common/Layout/Header/Select/index.tsx b/src/components/common/Layout/Header/Select/index.tsx
index 1518289f..8572d2b7 100644
--- a/src/components/common/Layout/Header/Select/index.tsx
+++ b/src/components/common/Layout/Header/Select/index.tsx
@@ -93,7 +93,7 @@ const Accommodations = styled.select`
     display: none;
   }
 
-  @media screen and (max-width: 1200px) {
+  ${theme.response.tablet} {
     width: 150px;
     height: 30px;
 
diff --git a/src/components/common/Layout/Header/User/UserModal/index.tsx b/src/components/common/Layout/Header/User/UserModal/index.tsx
index 3036a3ac..42e53a22 100644
--- a/src/components/common/Layout/Header/User/UserModal/index.tsx
+++ b/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에서 사용자 정보 가져오기
@@ -34,7 +35,7 @@ const Modal = styled.div<UserModalStyleProps>`
   background-color: #e3e5e5;
   transition: all 0.5s;
 
-  @media screen and (max-width: 1200px) {
+  ${theme.response.tablet} {
     right: 35px;
     top: 45px;
 
diff --git a/src/components/common/Layout/Header/User/index.tsx b/src/components/common/Layout/Header/User/index.tsx
index 438ff866..2b565f74 100644
--- a/src/components/common/Layout/Header/User/index.tsx
+++ b/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);
@@ -30,7 +31,7 @@ const UserIcon = styled.img`
 
   cursor: pointer;
 
-  @media screen and (max-width: 1200px) {
+  ${theme.response.tablet} {
     width: 24px;
     height: 24px;
   }
diff --git a/src/components/common/Layout/Header/index.tsx b/src/components/common/Layout/Header/index.tsx
index 241258a7..8df75d97 100644
--- a/src/components/common/Layout/Header/index.tsx
+++ b/src/components/common/Layout/Header/index.tsx
@@ -46,7 +46,7 @@ const Container = styled.header`
 
   background-color: ${theme.colors.white};
 
-  @media screen and (max-width: 1200px) {
+  ${theme.response.tablet} {
     height: 65px;
 
     border-bottom: 1px solid #e6e6e6;
@@ -58,7 +58,7 @@ const LogoLink = styled(NavLink)`
   width: 140px;
   height: 30px;
 
-  @media screen and (max-width: 1200px) {
+  ${theme.response.tablet} {
     display: none;
   }
 `;
@@ -67,7 +67,7 @@ const LogoIcon = styled.img`
   width: 100%;
   height: 100%;
 
-  @media screen and (max-width: 1200px) {
+  ${theme.response.tablet} {
     display: none;
   }
 `;
@@ -76,7 +76,7 @@ const Buttons = styled.div`
   display: flex;
   align-items: center;
 
-  @media screen and (max-width: 1200px) {
+  ${theme.response.tablet} {
     width: 100%;
 
     justify-content: space-between;
diff --git a/src/components/common/Layout/Sidebar/Header/index.tsx b/src/components/common/Layout/Sidebar/Header/index.tsx
index 72ad354a..5fdb6122 100644
--- a/src/components/common/Layout/Sidebar/Header/index.tsx
+++ b/src/components/common/Layout/Sidebar/Header/index.tsx
@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import hamburger from '@assets/icons/ic-sidebar-hamburger.svg';
 import logo from '@assets/icons/ic-logo.svg';
 import { SidebarHeader, SidebarOpen } from '@/types/layout';
+import theme from '@styles/theme';
 
 const Header = ({ isSidebarOpen, setIsSidebarOpen }: SidebarHeader) => {
   return (
@@ -35,7 +36,7 @@ const Container = styled.div<SidebarOpen>`
   justify-content: space-between;
   align-items: center;
 
-  @media screen and (max-width: 1200px) {
+  ${theme.response.tablet} {
     margin-left: 5px;
   }
 `;
@@ -56,7 +57,7 @@ const Hamburger = styled.button`
     background-color: #e9eef6;
   }
 
-  @media screen and (max-width: 1200px) {
+  ${theme.response.tablet} {
     width: 50px;
     height: 50px;
 
@@ -69,7 +70,7 @@ const HamburgerIcon = styled.img`
   width: 30px;
   height: 20px;
 
-  @media screen and (max-width: 1200px) {
+  ${theme.response.tablet} {
     width: 21px;
     height: 14px;
   }
diff --git a/src/components/common/Layout/Sidebar/Navigation/Coupon/CouponNav/index.tsx b/src/components/common/Layout/Sidebar/Navigation/Coupon/CouponNav/index.tsx
index dba638d8..2396d0fb 100644
--- a/src/components/common/Layout/Sidebar/Navigation/Coupon/CouponNav/index.tsx
+++ b/src/components/common/Layout/Sidebar/Navigation/Coupon/CouponNav/index.tsx
@@ -92,7 +92,7 @@ const Link = styled(NavLink)`
     background-color: rgba(255, 255, 255, 0.3);
   }
 
-  @media screen and (max-width: 1200px) {
+  ${theme.response.tablet} {
     width: 85%;
   }
 `;
diff --git a/src/components/common/Layout/Sidebar/Navigation/index.tsx b/src/components/common/Layout/Sidebar/Navigation/index.tsx
index dc6df1fb..d367a867 100644
--- a/src/components/common/Layout/Sidebar/Navigation/index.tsx
+++ b/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 (
@@ -23,7 +24,7 @@ const Container = styled.nav<SidebarOpen>`
 
   font-size: ${props => (props.$isSidebarOpen ? '14px' : '12px')};
 
-  @media screen and (max-width: 1200px) {
+  ${theme.response.tablet} {
     margin-top: ${props => (props.$isSidebarOpen ? '0' : '30px')};
     padding: 10px;
   }
diff --git a/src/components/common/Layout/Sidebar/index.tsx b/src/components/common/Layout/Sidebar/index.tsx
index de9b0b30..a732171d 100644
--- a/src/components/common/Layout/Sidebar/index.tsx
+++ b/src/components/common/Layout/Sidebar/index.tsx
@@ -43,7 +43,7 @@ const Container = styled.div<SidebarOpen>`
   z-index: 100;
   transition: all 0.3s;
 
-  @media screen and (max-width: 1200px) {
+  ${theme.response.tablet} {
     width: ${props => (props.$isSidebarOpen ? '100%' : 'auto')};
     height: ${props => (props.$isSidebarOpen ? 'fit-content' : '93px')};
     min-height: ${props => (props.$isSidebarOpen ? 'fit-content' : '93px')};
diff --git a/src/components/common/Layout/index.tsx b/src/components/common/Layout/index.tsx
index 9abbe2b2..72d0d978 100644
--- a/src/components/common/Layout/index.tsx
+++ b/src/components/common/Layout/index.tsx
@@ -52,7 +52,7 @@ const Section = styled.section`
   display: flex;
   flex-direction: column;
 
-  @media screen and (max-width: 1200px) {
+  ${theme.response.tablet} {
     min-width: 0;
 
     margin-left: 0;
@@ -80,7 +80,7 @@ const OutletLayout = styled.div<LayoutStyleProps>`
 
   overflow: scroll;
 
-  @media screen and (max-width: 1200px) {
+  ${theme.response.tablet} {
     width: 100vw;
 
     margin-top: 0;

From b8e1923a2fbc30c5cb418e40104ca1bffb01e3bb Mon Sep 17 00:00:00 2001
From: JitHoon <imessi0336@gmail.com>
Date: Thu, 18 Jan 2024 23:04:24 +0900
Subject: [PATCH 14/14] =?UTF-8?q?fix:=20theme=20response=20type=20?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/theme.d.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/types/theme.d.ts b/src/types/theme.d.ts
index 1dcc61e9..436fb2fd 100644
--- a/src/types/theme.d.ts
+++ b/src/types/theme.d.ts
@@ -11,8 +11,8 @@ declare module '@emotion/react' {
     settlements: {};
 
     response: {
-      tablet: '@media screen and (max-width: 900px)';
-      mobile: '@media screen and (max-width: 345px)';
+      tablet: string;
+      mobile: string;
     };
 
     colors: {