refactor(SourceCode): 코드 폰트 사이즈 조정

woowacourse-teams · Oct 24, 2024 · 9d6a879 · 9d6a879
1 parent f27a134
commit 9d6a879
Showing 1 changed file with 4 additions and 7 deletions.
diff --git a/frontend/src/components/SourceCode/SourceCode.tsx b/frontend/src/components/SourceCode/SourceCode.tsx
@@ -4,6 +4,8 @@ import { quietlight } from '@uiw/codemirror-theme-quietlight';
 import ReactCodeMirror, { EditorView, ReactCodeMirrorRef } from '@uiw/react-codemirror';
 import { useRef } from 'react';
 
+import { useWindowWidth } from '@/hooks';
+
 import * as S from './SourceCode.style';
 
 export type SourceCodeMode = 'edit' | 'detailView' | 'thumbnailView';
@@ -17,6 +19,7 @@ interface Props {
 
 const SourceCode = ({ mode = 'detailView', language, content, handleContentChange }: Props) => {
   const codeMirrorRef = useRef<ReactCodeMirrorRef>(null);
+  const windowWidth = useWindowWidth();
 
   const focusCodeMirror = () => {
     if (!codeMirrorRef.current) {
@@ -41,13 +44,7 @@ const SourceCode = ({ mode = 'detailView', language, content, handleContentChang
       maxHeight={mode === 'edit' ? '40rem' : undefined}
       css={{
         width: '100%',
-        fontSize: '1rem',
-        '@media (max-width: 430px)': {
-          fontSize: '0.65rem',
-          '.cm-scroller': {
-            padding: '0px !important',
-          },
-        },
+        fontSize: `${mode === 'detailView' && windowWidth <= 400 ? '0.65rem' : '1rem'}`,
         minHeight: '160px',
         backgroundColor: `rgba(0, 0, 0, 0.1)`,
         '.cm-scroller': {