diff --git a/frontend/src/assets/images/topic_algorithm.jpg b/frontend/src/assets/images/topic_algorithm.jpg
new file mode 100644
index 00000000..0cfbb2fb
Binary files /dev/null and b/frontend/src/assets/images/topic_algorithm.jpg differ
diff --git a/frontend/src/assets/images/topic_android.jpg b/frontend/src/assets/images/topic_android.jpg
new file mode 100644
index 00000000..d8d95b5e
Binary files /dev/null and b/frontend/src/assets/images/topic_android.jpg differ
diff --git a/frontend/src/assets/images/topic_java.jpg b/frontend/src/assets/images/topic_java.jpg
new file mode 100644
index 00000000..614e54ec
Binary files /dev/null and b/frontend/src/assets/images/topic_java.jpg differ
diff --git a/frontend/src/assets/images/topic_js.jpg b/frontend/src/assets/images/topic_js.jpg
new file mode 100644
index 00000000..f65bca6b
Binary files /dev/null and b/frontend/src/assets/images/topic_js.jpg differ
diff --git a/frontend/src/assets/images/topic_kt.jpg b/frontend/src/assets/images/topic_kt.jpg
new file mode 100644
index 00000000..a0b552e5
Binary files /dev/null and b/frontend/src/assets/images/topic_kt.jpg differ
diff --git a/frontend/src/assets/images/topic_precourse.jpg b/frontend/src/assets/images/topic_precourse.jpg
new file mode 100644
index 00000000..3473bd9c
Binary files /dev/null and b/frontend/src/assets/images/topic_precourse.jpg differ
diff --git a/frontend/src/assets/images/topic_react.jpg b/frontend/src/assets/images/topic_react.jpg
new file mode 100644
index 00000000..fb2452f4
Binary files /dev/null and b/frontend/src/assets/images/topic_react.jpg differ
diff --git a/frontend/src/assets/images/topic_spring.jpg b/frontend/src/assets/images/topic_spring.jpg
new file mode 100644
index 00000000..f80316d8
Binary files /dev/null and b/frontend/src/assets/images/topic_spring.jpg differ
diff --git a/frontend/src/assets/images/topic_wooteco.jpg b/frontend/src/assets/images/topic_wooteco.jpg
new file mode 100644
index 00000000..3b6933a2
Binary files /dev/null and b/frontend/src/assets/images/topic_wooteco.jpg differ
diff --git a/frontend/src/components/SourceCodeViewer/SourceCodeViewer.style.ts b/frontend/src/components/SourceCodeViewer/SourceCodeViewer.style.ts
index 877ee188..ec3ecb36 100644
--- a/frontend/src/components/SourceCodeViewer/SourceCodeViewer.style.ts
+++ b/frontend/src/components/SourceCodeViewer/SourceCodeViewer.style.ts
@@ -62,7 +62,7 @@ export const CopyButton = styled(Button)`
 `;
 
 export const SourceCodeWrapper = styled.div<{ isOpen: boolean }>`
-  overflow: hidden;
+  overflow: scroll;
   max-height: ${({ isOpen }) => (isOpen ? '1000rem' : '0')};
   animation: ${({ isOpen }) => (!isOpen ? 'collapse' : 'expand')} 0.7s ease-in-out forwards;
 `;
diff --git a/frontend/src/pages/MyTemplatesPage/hooks/useFilteredTemplateList.ts b/frontend/src/pages/MyTemplatesPage/hooks/useFilteredTemplateList.ts
index 746fe199..628948d2 100644
--- a/frontend/src/pages/MyTemplatesPage/hooks/useFilteredTemplateList.ts
+++ b/frontend/src/pages/MyTemplatesPage/hooks/useFilteredTemplateList.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect } from 'react';
 
 import { useDropdown, useQueryParams } from '@/hooks';
 import { useAuth } from '@/hooks/authentication';
@@ -16,11 +16,11 @@ interface Props {
 export const useFilteredTemplateList = ({ memberId: passedMemberId }: Props) => {
   const { queryParams, updateQueryParams } = useQueryParams();
 
-  const [selectedCategoryId, setSelectedCategoryId] = useState<number>(queryParams.category);
-  const [selectedTagIds, setSelectedTagIds] = useState<number[]>(queryParams.tags);
-  const { keyword, debouncedKeyword, handleKeywordChange } = useSearchKeyword(queryParams.keyword);
+  const selectedCategoryId = queryParams.category;
+  const selectedTagIds = queryParams.tags;
+  const page = queryParams.page;
   const { currentValue: sortingOption, ...dropdownProps } = useDropdown(getSortingOptionByValue(queryParams.sort));
-  const [page, setPage] = useState<number>(queryParams.page);
+  const { keyword, debouncedKeyword, handleKeywordChange } = useSearchKeyword(queryParams.keyword);
 
   const { memberInfo } = useAuth();
   const memberId = passedMemberId ?? memberInfo.memberId;
@@ -42,39 +42,44 @@ export const useFilteredTemplateList = ({ memberId: passedMemberId }: Props) =>
   const totalPages = templateData?.totalPages || 0;
 
   useEffect(() => {
-    updateQueryParams({ keyword: debouncedKeyword, sort: sortingOption.value, page });
-  }, [debouncedKeyword, sortingOption, page, updateQueryParams]);
+    if (queryParams.sort === sortingOption.value) {
+      return;
+    }
+
+    updateQueryParams({ sort: sortingOption.value, page: FIRST_PAGE });
+  }, [queryParams.sort, sortingOption, updateQueryParams]);
+
+  useEffect(() => {
+    if (queryParams.keyword === debouncedKeyword) {
+      return;
+    }
+
+    updateQueryParams({ keyword: debouncedKeyword, page: FIRST_PAGE });
+  }, [queryParams.keyword, debouncedKeyword, updateQueryParams]);
 
   const handlePageChange = (page: number) => {
     scroll.top('smooth');
 
-    setPage(page);
+    updateQueryParams({ page });
   };
 
   const handleCategoryMenuClick = useCallback(
     (selectedCategoryId: number) => {
-      updateQueryParams({ category: selectedCategoryId });
-
-      setSelectedCategoryId(selectedCategoryId);
-
-      handlePageChange(FIRST_PAGE);
+      updateQueryParams({ category: selectedCategoryId, page: FIRST_PAGE });
     },
     [updateQueryParams],
   );
 
   const handleTagMenuClick = useCallback(
     (selectedTagIds: number[]) => {
-      updateQueryParams({ tags: selectedTagIds });
-
-      setSelectedTagIds(selectedTagIds);
-      handlePageChange(FIRST_PAGE);
+      updateQueryParams({ tags: selectedTagIds, page: FIRST_PAGE });
     },
     [updateQueryParams],
   );
 
   const handleSearchSubmit = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
-      handlePageChange(FIRST_PAGE);
+      updateQueryParams({ page: FIRST_PAGE });
     }
   };
 
diff --git a/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.tsx b/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.tsx
index 09fdb06d..9c23b34d 100644
--- a/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.tsx
+++ b/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.tsx
@@ -1,5 +1,5 @@
 import { QueryErrorResetBoundary } from '@tanstack/react-query';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { Link } from 'react-router-dom';
 
@@ -28,6 +28,8 @@ import { useHotTopic } from './hooks';
 import { TemplateListSectionLoading } from '../MyTemplatesPage/components';
 import * as S from './TemplateExplorePage.style';
 
+const FIRST_PAGE = 1;
+
 const getGridCols = (windowWidth: number) => (windowWidth <= 1024 ? 1 : 2);
 
 const TemplateExplorePage = () => {
@@ -35,7 +37,12 @@ const TemplateExplorePage = () => {
 
   const { queryParams, updateQueryParams } = useQueryParams();
 
-  const [page, setPage] = useState<number>(queryParams.page);
+  const page = queryParams.page;
+
+  const handlePage = (page: number) => {
+    updateQueryParams({ page });
+  };
+
   const [keyword, handleKeywordChange] = useInput(queryParams.keyword);
 
   const debouncedKeyword = useDebounce(keyword, 300);
@@ -45,12 +52,24 @@ const TemplateExplorePage = () => {
   const { selectedTagIds, selectedHotTopic, selectTopic } = useHotTopic();
 
   useEffect(() => {
-    updateQueryParams({ keyword: debouncedKeyword, sort: sortingOption.value, page });
-  }, [debouncedKeyword, sortingOption, page, updateQueryParams]);
+    if (queryParams.sort === sortingOption.value) {
+      return;
+    }
+
+    updateQueryParams({ sort: sortingOption.value, page: FIRST_PAGE });
+  }, [queryParams.sort, sortingOption, updateQueryParams]);
+
+  useEffect(() => {
+    if (queryParams.keyword === debouncedKeyword) {
+      return;
+    }
+
+    updateQueryParams({ keyword: debouncedKeyword, page: FIRST_PAGE });
+  }, [queryParams.keyword, debouncedKeyword, updateQueryParams]);
 
   const handleSearchSubmit = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
-      setPage(1);
+      handlePage(FIRST_PAGE);
     }
   };
 
@@ -58,7 +77,7 @@ const TemplateExplorePage = () => {
     <Flex direction='column' gap='4rem' align='flex-start' css={{ paddingTop: '5rem' }}>
       <Flex direction='column' justify='flex-start' gap='1rem' width='100%'>
         <Heading.Medium color='black'>
-          🔥 지금 인기있는 토픽 {selectedHotTopic && `- ${selectedHotTopic} 보는 중`}
+          {selectedHotTopic ? `🔥 [ ${selectedHotTopic} ] 보는 중` : '🔥 지금 인기있는 토픽'}
         </Heading.Medium>
         <HotTopicCarousel selectTopic={selectTopic} selectedHotTopic={selectedHotTopic} />
       </Flex>
@@ -91,7 +110,7 @@ const TemplateExplorePage = () => {
           >
             <TemplateList
               page={page}
-              setPage={setPage}
+              handlePage={handlePage}
               sortingOption={sortingOption}
               keyword={debouncedKeyword}
               tagIds={selectedTagIds}
@@ -115,13 +134,13 @@ export default TemplateExplorePage;
 
 const TemplateList = ({
   page,
-  setPage,
+  handlePage,
   sortingOption,
   keyword,
   tagIds,
 }: {
   page: number;
-  setPage: (page: number) => void;
+  handlePage: (page: number) => void;
   sortingOption: SortingOption;
   keyword: string;
   tagIds: number[];
@@ -144,7 +163,7 @@ const TemplateList = ({
 
   const handlePageChange = (page: number) => {
     scroll.top();
-    setPage(page);
+    handlePage(page);
   };
 
   return (
diff --git a/frontend/src/pages/TemplateExplorePage/components/Carousel/Carousel.style.ts b/frontend/src/pages/TemplateExplorePage/components/Carousel/Carousel.style.ts
index bc708b1d..cfaccd2c 100644
--- a/frontend/src/pages/TemplateExplorePage/components/Carousel/Carousel.style.ts
+++ b/frontend/src/pages/TemplateExplorePage/components/Carousel/Carousel.style.ts
@@ -33,6 +33,7 @@ export const CarouselItem = styled.li`
 
   width: 18rem;
   height: 9rem;
+  margin: 0.25rem 0;
 
   @media (max-width: 768px) {
     width: 9rem;
diff --git a/frontend/src/pages/TemplateExplorePage/components/Carousel/Carousel.tsx b/frontend/src/pages/TemplateExplorePage/components/Carousel/Carousel.tsx
index e0990f5d..626d257f 100644
--- a/frontend/src/pages/TemplateExplorePage/components/Carousel/Carousel.tsx
+++ b/frontend/src/pages/TemplateExplorePage/components/Carousel/Carousel.tsx
@@ -6,7 +6,7 @@ import { BREAKING_POINT } from '@/style/styleConstants';
 import * as S from './Carousel.style';
 
 interface CarouselItem {
-  id: number;
+  id: string;
   content: React.ReactNode;
 }
 
@@ -86,8 +86,8 @@ const Carousel = ({ items }: Props) => {
       </S.CarouselButton>
       <S.CarouselViewport>
         <S.CarouselList translateX={translateX} transitioning={isTransitioning}>
-          {displayItems.map((item) => (
-            <S.CarouselItem key={item.id}>{item.content}</S.CarouselItem>
+          {displayItems.map((item, idx) => (
+            <S.CarouselItem key={item.id + idx}>{item.content}</S.CarouselItem>
           ))}
         </S.CarouselList>
       </S.CarouselViewport>
diff --git a/frontend/src/pages/TemplateExplorePage/components/HotTopicCarousel/HotTopicCarousel.style.ts b/frontend/src/pages/TemplateExplorePage/components/HotTopicCarousel/HotTopicCarousel.style.ts
index 8f79fde5..017952a4 100644
--- a/frontend/src/pages/TemplateExplorePage/components/HotTopicCarousel/HotTopicCarousel.style.ts
+++ b/frontend/src/pages/TemplateExplorePage/components/HotTopicCarousel/HotTopicCarousel.style.ts
@@ -1,16 +1,67 @@
 import styled from '@emotion/styled';
 
+import { theme } from '@/style/theme';
+
 export const Topic = styled.button<{ background: string; border: string; isSelected: boolean }>`
-  cursor: pointer; /* 커서 스타일 추가 */
+  cursor: pointer;
+
+  position: relative;
+
+  display: flex;
+  align-items: flex-end;
 
   width: 100%;
   height: 100%;
+  padding: 1rem;
 
-  background-color: ${({ background }) => background};
-  border: ${({ isSelected, border }) => (isSelected ? `2px solid ${border}` : 'none')};
+  background-image: url(${({ background }) => background});
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
   border-radius: 12px;
+  box-shadow: ${({ isSelected, border }) => (isSelected ? `0 0 0 2px ${border}` : 'none')};
+
+  transition: box-shadow 0.2s ease-in-out;
 
-  &:hover {
-    border: 2px solid ${({ border }) => border};
+  &::after {
+    pointer-events: none;
+    content: '';
+
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    background-color: rgba(0, 0, 0, 0);
+    border-radius: 12px;
+
+    transition: background-color 0.3s;
   }
+
+  &:hover::after {
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+`;
+
+export const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  justify-content: flex-start;
+`;
+
+export const Title = styled.div`
+  width: fit-content;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid ${theme.color.light.secondary_800};
+  border-radius: 8px;
+`;
+
+export const Description = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  align-items: flex-start;
+  justify-content: flex-start;
 `;
diff --git a/frontend/src/pages/TemplateExplorePage/components/HotTopicCarousel/HotTopicCarousel.tsx b/frontend/src/pages/TemplateExplorePage/components/HotTopicCarousel/HotTopicCarousel.tsx
index bb29a578..fce031c0 100644
--- a/frontend/src/pages/TemplateExplorePage/components/HotTopicCarousel/HotTopicCarousel.tsx
+++ b/frontend/src/pages/TemplateExplorePage/components/HotTopicCarousel/HotTopicCarousel.tsx
@@ -1,47 +1,54 @@
 import { Text } from '@/components';
-import { TAG_COLORS } from '@/style/tagColors';
+import { useWindowWidth } from '@/hooks';
+import { HOT_TOPIC } from '@/service/hotTopic';
+import { BREAKING_POINT } from '@/style/styleConstants';
 import { theme } from '@/style/theme';
 
 import { Carousel } from '../';
 import * as S from './HotTopicCarousel.style';
 
-const HOT_TOPIC = [
-  { key: 1, content: '우테코', tagIds: [359], color: TAG_COLORS[3] },
-  { key: 2, content: '프리코스', tagIds: [364], color: TAG_COLORS[4] },
-  { key: 4, content: '자바스크립트', tagIds: [41, 211, 329, 351, 249, 360], color: TAG_COLORS[0] },
-  { key: 3, content: '자바', tagIds: [73, 358, 197], color: TAG_COLORS[1] },
-  { key: 5, content: '코틀린', tagIds: [361, 363], color: TAG_COLORS[2] },
-  { key: 8, content: '스프링', tagIds: [14, 198], color: TAG_COLORS[7] },
-  { key: 7, content: '리액트', tagIds: [50, 289, 318], color: TAG_COLORS[6] },
-  { key: 8, content: '안드로이드', tagIds: [362], color: TAG_COLORS[8] },
-  { key: 9, content: '알고리즘', tagIds: [261, 316, 253, 144, 143], color: TAG_COLORS[5] },
-];
-
 interface Props {
-  selectTopic: ({ tagIds, content }: { tagIds: number[]; content: string }) => void;
+  selectTopic: ({ tagIds, topic }: { tagIds: number[]; topic: string }) => void;
   selectedHotTopic: string;
 }
 
-const HotTopicCarousel = ({ selectTopic, selectedHotTopic }: Props) => (
-  <Carousel
-    items={HOT_TOPIC.map(({ key, content, tagIds, color }) => ({
-      id: key,
-      content: (
-        <S.Topic
-          isSelected={selectedHotTopic === content}
-          background={color.background}
-          border={color.border}
-          onClick={() => {
-            selectTopic({ tagIds, content });
-          }}
-        >
-          <Text.Large color={theme.color.light.secondary_800} weight='bold'>
-            {content}
-          </Text.Large>
-        </S.Topic>
-      ),
-    }))}
-  />
-);
+const HotTopicCarousel = ({ selectTopic, selectedHotTopic }: Props) => {
+  const windowWidth = useWindowWidth();
+  const isMobile = windowWidth <= BREAKING_POINT.MOBILE;
+
+  return (
+    <Carousel
+      items={HOT_TOPIC.map(({ topic, description, subDescription, tagIds, color, bg }) => ({
+        id: topic,
+        content: (
+          <S.Topic
+            isSelected={selectedHotTopic === topic}
+            background={bg}
+            border={color}
+            onClick={() => {
+              selectTopic({ tagIds, topic });
+            }}
+          >
+            <S.Content>
+              <S.Title>
+                <Text.Large color={theme.color.light.secondary_800} weight='bold'>
+                  {topic}
+                </Text.Large>
+              </S.Title>
+              {!isMobile && (
+                <S.Description>
+                  <Text.Small color={theme.color.light.secondary_800} weight='bold'>
+                    {description}
+                  </Text.Small>
+                  <Text.Small color={theme.color.light.secondary_800}>{subDescription}</Text.Small>
+                </S.Description>
+              )}
+            </S.Content>
+          </S.Topic>
+        ),
+      }))}
+    />
+  );
+};
 
 export default HotTopicCarousel;
diff --git a/frontend/src/pages/TemplateExplorePage/hooks/useHotTopic.ts b/frontend/src/pages/TemplateExplorePage/hooks/useHotTopic.ts
index 05405c67..9a6e7c6c 100644
--- a/frontend/src/pages/TemplateExplorePage/hooks/useHotTopic.ts
+++ b/frontend/src/pages/TemplateExplorePage/hooks/useHotTopic.ts
@@ -1,23 +1,23 @@
-import { useState } from 'react';
+import { useQueryParams } from '@/hooks';
+import { getHotTopicContent } from '@/service/hotTopic';
 
 export const useHotTopic = () => {
-  const [selectedTagIds, setSelectedTagIds] = useState<number[]>([]);
-  const [selectedHotTopic, setSelectedHotTopic] = useState('');
+  const { queryParams, updateQueryParams } = useQueryParams();
+  const selectedTagIds = queryParams.tags;
+  const selectedHotTopic = getHotTopicContent(selectedTagIds);
 
-  const selectTopic = ({ tagIds, content }: { tagIds: number[]; content: string }) => {
-    if (content === selectedHotTopic) {
+  const selectTopic = ({ tagIds, topic }: { tagIds: number[]; topic: string }) => {
+    if (topic === selectedHotTopic) {
       resetSelectedTopic();
 
       return;
     }
 
-    setSelectedTagIds([...tagIds]);
-    setSelectedHotTopic(content);
+    updateQueryParams({ tags: [...tagIds] });
   };
 
   const resetSelectedTopic = () => {
-    setSelectedTagIds([]);
-    setSelectedHotTopic('');
+    updateQueryParams({ tags: [] });
   };
 
   return { selectedTagIds, selectedHotTopic, selectTopic };
diff --git a/frontend/src/pages/TemplatePage/TemplatePage.style.ts b/frontend/src/pages/TemplatePage/TemplatePage.style.ts
index 043507ec..b5719130 100644
--- a/frontend/src/pages/TemplatePage/TemplatePage.style.ts
+++ b/frontend/src/pages/TemplatePage/TemplatePage.style.ts
@@ -1,26 +1,7 @@
-import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { Button } from '@/components';
 
-const expand = keyframes`
-  from {
-    max-height: 0;
-  }
-  to {
-    max-height: 1000rem;
-  }
-`;
-
-const collapse = keyframes`
-  from {
-    max-height: 1000rem;
-  }
-  to {
-    max-height: 0;
-  }
-`;
-
 export const MainContainer = styled.main`
   display: flex;
   flex-direction: column;
@@ -46,12 +27,6 @@ export const SidebarContainer = styled.aside`
   }
 `;
 
-export const SyntaxHighlighterWrapper = styled.div<{ isOpen: boolean }>`
-  overflow: hidden;
-  max-height: ${({ isOpen }) => (isOpen ? '1000rem' : '0')};
-  animation: ${({ isOpen }) => (!isOpen ? collapse : expand)} 0.7s ease-in-out forwards;
-`;
-
 export const NoScrollbarContainer = styled.div`
   scrollbar-width: none;
   overflow: auto;
diff --git a/frontend/src/service/hotTopic.ts b/frontend/src/service/hotTopic.ts
new file mode 100644
index 00000000..210d674a
--- /dev/null
+++ b/frontend/src/service/hotTopic.ts
@@ -0,0 +1,95 @@
+import topicAlgorithm from '@/assets/images/topic_algorithm.jpg';
+import topicAndroid from '@/assets/images/topic_android.jpg';
+import topicJava from '@/assets/images/topic_java.jpg';
+import topicJs from '@/assets/images/topic_js.jpg';
+import topicKt from '@/assets/images/topic_kt.jpg';
+import topicPrecourse from '@/assets/images/topic_precourse.jpg';
+import topicReact from '@/assets/images/topic_react.jpg';
+import topicSpring from '@/assets/images/topic_spring.jpg';
+import topicWooteco from '@/assets/images/topic_wooteco.jpg';
+
+export const HOT_TOPIC = [
+  {
+    topic: '우테코',
+    description: '현장 경험과 체계적인 교육의 만남,',
+    subDescription: '혼자가 아닌 함께 성장하는 즐거움',
+    tagIds: [359],
+    bg: topicWooteco,
+    color: '#FFD269',
+  },
+  {
+    topic: '프리코스',
+    description: '우테코를 향한 첫걸음, ',
+    subDescription: '4주간의 성장 여정',
+    tagIds: [364],
+    bg: topicPrecourse,
+    color: '#F6836C',
+  },
+  {
+    topic: '자바스크립트',
+    description: '웹의 심장, ',
+    subDescription: '브라우저를 넘어 전 영역을 아우르는 통합 언어',
+    tagIds: [41, 211, 329, 351, 249, 360],
+    bg: topicJs,
+    color: '#C2B12E',
+  },
+  {
+    topic: '자바',
+    description: '엔터프라이즈의 강자, ',
+    subDescription: '20년 이상 신뢰받아온 안정성의 상징',
+    tagIds: [73, 358, 197],
+    bg: topicJava,
+    color: '#68B7DF',
+  },
+  {
+    topic: '코틀린',
+    description: '모던 JVM 언어의 결정체,',
+    subDescription: '생산성과 안정성의 완벽한 조화',
+    tagIds: [237, 361, 363],
+    bg: topicKt,
+    color: '#F08852',
+  },
+  {
+    topic: '스프링',
+    description: '자바 프레임워크의 절대 강자,',
+    subDescription: '우아한 서버 아키텍처',
+    tagIds: [14, 198],
+    bg: topicSpring,
+    color: '#90C470',
+  },
+  {
+    topic: '리액트',
+    description: '재사용성과 생태계의 힘,',
+    subDescription: '현대 웹 개발의 중심',
+    tagIds: [50, 289, 318],
+    bg: topicReact,
+    color: '#4DC6D9',
+  },
+  {
+    topic: '안드로이드',
+    description: '모바일 혁명의 주역,',
+    subDescription: '전세계 70억 기기의 선택',
+    tagIds: [236, 287, 362],
+    bg: topicAndroid,
+    color: '#6BB449',
+  },
+  {
+    topic: '알고리즘',
+    description: '개발자의 필수 교양,',
+    subDescription: '효율적 사고의 기초',
+    tagIds: [261, 316, 253, 144, 143],
+    bg: topicAlgorithm,
+    color: '#D0BB48',
+  },
+];
+
+export const getHotTopicContent = (tagIds: number[]) => {
+  if (!tagIds.length) {
+    return '';
+  }
+
+  const tagId = tagIds[0];
+  const selected = HOT_TOPIC.find((el) => el.tagIds.includes(tagId));
+
+  return selected?.topic || '';
+};
diff --git a/frontend/src/types/images.d.ts b/frontend/src/types/images.d.ts
index a0168e6c..e1254978 100644
--- a/frontend/src/types/images.d.ts
+++ b/frontend/src/types/images.d.ts
@@ -3,6 +3,11 @@ declare module '*.png' {
   export default value;
 }
 
+declare module '*.jpg' {
+  const value: string;
+  export default value;
+}
+
 declare module '*.svg' {
   import React = require('react');
 
diff --git a/frontend/webpack.common.js b/frontend/webpack.common.js
index 6f442963..2b900766 100644
--- a/frontend/webpack.common.js
+++ b/frontend/webpack.common.js
@@ -29,9 +29,9 @@ module.exports = {
             maxSize: 4 * 1024, // 4kb
           },
         },
-        generator: {
-          filename: `images/[name].[contenthash][ext]`,
-        },
+        // generator: {
+        //   filename: `images/[name].[contenthash][ext]`,
+        // },
       },
       {
         test: /\.svg$/i,