diff --git a/frontend/src/components/SelectList/SelectList.style.ts b/frontend/src/components/SelectList/SelectList.style.ts
index 5ce32eb8b..5cc4fb1f1 100644
--- a/frontend/src/components/SelectList/SelectList.style.ts
+++ b/frontend/src/components/SelectList/SelectList.style.ts
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 
 import { theme } from '@/style/theme';
+
 import type { OptionProps } from './SelectList';
 
 export const SelectListContainer = styled.div`
diff --git a/frontend/src/components/SelectList/SelectList.tsx b/frontend/src/components/SelectList/SelectList.tsx
index 5c4c23568..19af20f64 100644
--- a/frontend/src/components/SelectList/SelectList.tsx
+++ b/frontend/src/components/SelectList/SelectList.tsx
@@ -1,7 +1,7 @@
-import { useTheme } from '@emotion/react';
 import { PropsWithChildren } from 'react';
 
 import { Text } from '@/components';
+import { theme } from '@/style/theme';
 
 import * as S from './SelectList.style';
 
@@ -12,19 +12,15 @@ export interface OptionProps {
 
 const SelectListBase = ({ children }: PropsWithChildren) => <S.SelectListContainer>{children}</S.SelectListContainer>;
 
-const SelectListOption = ({ children, isSelected, onClick }: PropsWithChildren<OptionProps>) => {
-  const theme = useTheme();
-
-  return (
-    <S.SelectListOption href={`#${children}`} onClick={onClick} isSelected={isSelected}>
-      <S.SelectListText className='select-list-text'>
-        <Text.Medium color={isSelected ? theme.color.light.white : theme.color.light.secondary_600}>
-          {children}
-        </Text.Medium>
-      </S.SelectListText>
-    </S.SelectListOption>
-  );
-};
+const SelectListOption = ({ children, isSelected, onClick }: PropsWithChildren<OptionProps>) => (
+  <S.SelectListOption href={`#${children}`} onClick={onClick} isSelected={isSelected}>
+    <S.SelectListText className='select-list-text'>
+      <Text.Medium color={isSelected ? theme.color.light.white : theme.color.light.secondary_600}>
+        {children}
+      </Text.Medium>
+    </S.SelectListText>
+  </S.SelectListOption>
+);
 
 const SelectList = Object.assign(SelectListBase, {
   Option: SelectListOption,
diff --git a/frontend/src/components/SourceCode/SourceCode.tsx b/frontend/src/components/SourceCode/SourceCode.tsx
index b00b75fe4..b6d7b8ae4 100644
--- a/frontend/src/components/SourceCode/SourceCode.tsx
+++ b/frontend/src/components/SourceCode/SourceCode.tsx
@@ -1,7 +1,6 @@
-import { ViewUpdate } from '@codemirror/view';
 import { type LanguageName, loadLanguage } from '@uiw/codemirror-extensions-langs';
 import { quietlight } from '@uiw/codemirror-theme-quietlight';
-import ReactCodeMirror, { EditorView, ReactCodeMirrorRef } from '@uiw/react-codemirror';
+import ReactCodeMirror, { EditorView, ReactCodeMirrorRef, type ViewUpdate } from '@uiw/react-codemirror';
 import { useRef } from 'react';
 
 import { useWindowWidth } from '@/hooks';
diff --git a/frontend/src/components/SourceCodeEditor/SourceCodeEditor.tsx b/frontend/src/components/SourceCodeEditor/SourceCodeEditor.tsx
index 0f0e61348..d192f325b 100644
--- a/frontend/src/components/SourceCodeEditor/SourceCodeEditor.tsx
+++ b/frontend/src/components/SourceCodeEditor/SourceCodeEditor.tsx
@@ -1,4 +1,4 @@
-import { ViewUpdate } from '@codemirror/view';
+import { type ViewUpdate } from '@uiw/react-codemirror';
 import { useRef } from 'react';
 
 import { TrashcanIcon } from '@/assets/images';
diff --git a/frontend/src/components/SourceCodeViewer/SourceCodeViewer.style.ts b/frontend/src/components/SourceCodeViewer/SourceCodeViewer.style.ts
index ec3ecb365..a1d2a55c5 100644
--- a/frontend/src/components/SourceCodeViewer/SourceCodeViewer.style.ts
+++ b/frontend/src/components/SourceCodeViewer/SourceCodeViewer.style.ts
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 
 import { Button } from '@/components';
+import { theme } from '@/style/theme';
 
 export const SourceCodeViewerContainer = styled.div`
   overflow: hidden;
@@ -17,7 +18,7 @@ export const FilenameContainer = styled.div`
   height: 3rem;
   padding: 1rem 1.5rem;
 
-  background: ${({ theme }) => theme.color.light.tertiary_600};
+  background: ${theme.color.light.tertiary_600};
 `;
 
 export const ToggleButton = styled.button`
diff --git a/frontend/src/components/Toast/Toast.style.ts b/frontend/src/components/Toast/Toast.style.ts
index 9d8bef67c..3818a73ea 100644
--- a/frontend/src/components/Toast/Toast.style.ts
+++ b/frontend/src/components/Toast/Toast.style.ts
@@ -1,6 +1,8 @@
 import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 
+import { theme } from '@/style/theme';
+
 const slideIn = keyframes`
   from {
     transform: translateY(20px) translateX(-50%);
@@ -37,7 +39,7 @@ export const BaseToast = styled.div<{ visible: boolean; type: 'success' | 'fail'
   font-size: 16px;
   color: white;
 
-  background-color: ${({ theme, type }) => {
+  background-color: ${({ type }) => {
     switch (type) {
       case 'success':
         return theme.color.light.complementary_300;
diff --git a/frontend/src/pages/TemplatePage/TemplatePage.tsx b/frontend/src/pages/TemplatePage/TemplatePage.tsx
index cb60809c6..b4c6d7c21 100644
--- a/frontend/src/pages/TemplatePage/TemplatePage.tsx
+++ b/frontend/src/pages/TemplatePage/TemplatePage.tsx
@@ -1,4 +1,3 @@
-import { useTheme } from '@emotion/react';
 import { Link, useParams } from 'react-router-dom';
 
 import { ClockIcon, PrivateIcon, ShareIcon } from '@/assets/images';
@@ -25,6 +24,7 @@ import { useTrackPageViewed } from '@/service/amplitude';
 import { trackClickTemplateShare, trackLikeButton } from '@/service/amplitude/track';
 import { VISIBILITY_PRIVATE } from '@/service/constants';
 import { ICON_SIZE } from '@/style/styleConstants';
+import { theme } from '@/style/theme';
 import { formatRelativeTime } from '@/utils';
 
 import { useTemplate, useLike } from './hooks';
@@ -37,7 +37,6 @@ const TemplatePage = () => {
 
   const { infoAlert } = useToast();
 
-  const theme = useTheme();
   const [isNonmemberAlerterOpen, toggleNonmemberAlerter] = useToggle();
 
   const {
diff --git a/frontend/src/routes/router.tsx b/frontend/src/routes/router.tsx
index bebdb7e37..93df1b6b5 100644
--- a/frontend/src/routes/router.tsx
+++ b/frontend/src/routes/router.tsx
@@ -53,11 +53,9 @@ const router = createBrowserRouter([
       {
         path: ROUTE_END_POINT.MEMBERS_TEMPLATES,
         element: (
-          <RouteGuard isLoginRequired redirectTo={ROUTE_END_POINT.LOGIN}>
-            <ErrorBoundary fallback={<NotFoundPage />}>
-              <MyTemplatePage />
-            </ErrorBoundary>
-          </RouteGuard>
+          <ErrorBoundary fallback={<NotFoundPage />}>
+            <MyTemplatePage />
+          </ErrorBoundary>
         ),
       },
       {