[공통] useMediaQuery 추가 및 공통 페이지 모바일 뷰 추가

src/layout/SideBar/style.ts

@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import { colors } from 'const/colors/style';
+import { mobile } from 'util/hooks/useMediaQuery';
 
 export const sideBar = css`
   display: flex;
@@ -8,6 +9,10 @@ export const sideBar = css`
   background-color: ${colors.gray};
   border-right: 1px solid ${colors.borderGray};
   box-sizing: border-box;
+
+  ${mobile} {
+    width: 175px;
+  }
 `;
 
 export const topBar = css`

src/layout/TopBar/style.ts

@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import { colors } from 'const/colors/style';
+import { mobile } from 'util/hooks/useMediaQuery';
 
 export const top = css`
   width: 100%;
@@ -10,6 +11,13 @@ export const top = css`
   padding-right: 30px;
   border-bottom: 1px solid ${colors.borderGray};
   box-sizing: border-box;
+
+  ${mobile} {
+    h1 {
+      font-size: 18px;
+    }
+    padding-right: 10px;
+  }
 `;
 
 export const flex = css`
@@ -22,6 +30,15 @@ export const buttonContainer = css`
   display: flex;
   justify-content: flex-end;
   gap: 20px;
+
+  ${mobile} {
+    button {
+      font-size: 12px;
+      width: 65px;
+      height: 35px;
+      padding: 0;
+    }
+  }
 `;
 
 export const syncButton = css`

src/util/hooks/useMediaQuery.ts

@@ -0,0 +1,27 @@
+import { useEffect, useRef, useState } from 'react';
+
+const MOBILE_MEDIA_QUERY = '(max-width: 576px)';
+
+export const mobile = `@media ${MOBILE_MEDIA_QUERY}`;
+
+const useMediaQuery = () => {
+  const [matches, setMatches] = useState(() => window.matchMedia(MOBILE_MEDIA_QUERY).matches);
+  const matchMediaRef = useRef<MediaQueryList | null>(null);
+
+  useEffect(() => {
+    const matchMedia = window.matchMedia(MOBILE_MEDIA_QUERY);
+    matchMediaRef.current = matchMedia;
+    function handleChange() {
+      setMatches(window.matchMedia(MOBILE_MEDIA_QUERY).matches);
+    }
+    matchMediaRef.current.addEventListener('change', handleChange);
+
+    return () => {
+      matchMediaRef.current?.removeEventListener('change', handleChange);
+    };
+  }, []);
+
+  return { isMobile: matches };
+};
+
+export default useMediaQuery;