Add responsive styles

src/components/page/Menu.tsx

@@ -58,6 +58,11 @@ const TopNavigation = styled.div`
   display: flex;
   color: ${Colors.White};
   padding: 24px;
+
+  @media (max-width: 769px) {
+    flex-direction: column;
+    padding: 24px 16px;
+  }
 `
 
 const TopLink = styled(Link)`
@@ -68,6 +73,10 @@ const TopLink = styled(Link)`
   @media (max-width: 1024px) {
     margin-right: 2vw;
   }
+
+  @media (max-width: 769px) {
+    margin-bottom: 2vw;
+  }
 `
 
 const Navigation = styled.nav`

src/components/page/Select.tsx

@@ -35,6 +35,10 @@ const SelectWrapper = styled.div`
   position: relative;
   width: 120px;
   color: ${Colors.White};
+
+  @media (max-width: 769px) {
+    width: 80px;
+  }
 `
 
 const SelectButton = styled.button`
@@ -46,6 +50,11 @@ const SelectButton = styled.button`
   text-decoration: underline;
   padding-right: 30px;
 
+  @media (max-width: 769px) {
+    padding-right: 16px;
+    text-align: start;
+  }
+
   &::after {
     content: '';
     position: absolute;
@@ -56,6 +65,11 @@ const SelectButton = styled.button`
     transform: translateY(-50%);
     background: url(${arrowDown}) center no-repeat;
     background-size: contain;
+
+    @media (max-width: 769px) {
+      width: 20px;
+    height: 10px;
+  }
   }
 
   &.open::after {
@@ -65,7 +79,7 @@ const SelectButton = styled.button`
 
 const SelectContent = styled.ul`
   position: absolute;
-  left: 10px;
+  left: 25px;
   bottom: -12px;
   width: 100%;
   transform: translateY(100%);
@@ -73,6 +87,10 @@ const SelectContent = styled.ul`
   background: ${Colors.Black};
   color: ${Colors.White};
   z-index: 1;
+
+  @media (max-width: 769px) {
+    left: 0;
+  }
 `
 
 const SelectItem = styled.li`

src/constants/styles.ts

@@ -2,7 +2,6 @@ export const Colors = {
   White: '#FFFFFF',
   Black: '#000000',
   Gray: '#9e9e9d',
-  Shadow: '0 2px 5px 0 rgba(0, 0, 0, 0.3)',
 }
 
 export const Fonts = {