chore: 코드 리뷰 반영

app/on-boarding/page.tsx

@@ -12,9 +12,9 @@ import {
   ProgressIndicator,
   SkipButton,
   Steps,
+  stepsIntroduce,
   useProgressIndicator,
 } from '@/features/on-boarding';
-import { OnBoardingImages } from '@/public/images/on-boarding';
 import { css } from '@/styled-system/css';
 
 export default function OnBoarding() {
@@ -57,7 +57,7 @@ export default function OnBoarding() {
         </CSSTransition>
       </TransitionGroup>
       <div className={layoutStyles.button}>
-        {step < OnBoardingImages.length - 1 ? (
+        {step < stepsIntroduce.length - 1 ? (
           <Button
             buttonType="secondary"
             variant="outlined"

features/on-boarding/components/molecules/progress-indicator.tsx

@@ -1,15 +1,16 @@
-import { OnBoardingImages } from '@/public/images/on-boarding';
 import { css, cva } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 
+import { stepsIntroduce } from '../../constants';
+
 interface ProgressIndicatorProps {
   step: number;
 }
 
 export function ProgressIndicator({ step }: ProgressIndicatorProps) {
   return (
     <div className={progressIndicatorStyles}>
-      {Array.from({ length: OnBoardingImages.length }, (_, i) => (
+      {Array.from({ length: stepsIntroduce.length }, (_, i) => (
         <IndicatorDot key={i} selected={step === i} />
       ))}
     </div>

features/on-boarding/components/molecules/steps.tsx

@@ -1,7 +1,6 @@
 import { Fragment } from 'react';
 
 import { Image } from '@/components/atoms';
-import { OnBoardingImages } from '@/public/images/on-boarding';
 import { css } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 
@@ -12,7 +11,7 @@ interface StepsProps {
 }
 
 export function Steps({ current }: StepsProps) {
-  const highlightText = (text: string, highlightTexts: string[]) => {
+  const getHighlightedText = (text: string, highlightTexts: string[]) => {
     const regex = new RegExp(`(${highlightTexts.join('|')})`, 'g');
     const parts = text.split(regex);
 
@@ -30,15 +29,15 @@ export function Steps({ current }: StepsProps) {
   return (
     <div className={layout.total}>
       <p className={textStyles.total}>
-        {highlightText(
+        {getHighlightedText(
           stepsIntroduce[current].total,
           stepsIntroduce[current].highlight,
         )}
       </p>
       <div className={layout.image}>
         <Image
           key={current}
-          src={OnBoardingImages[current]}
+          src={stepsIntroduce[current].image}
           alt="온보딩 이미지"
           fill
           style={{ objectFit: 'contain' }}

features/on-boarding/constants/steps-introduce.ts

@@ -1,26 +1,39 @@
+import OnBoardingImage0 from '@/public/images/on-boarding/on-boarding-image0.png';
+import OnBoardingImage1 from '@/public/images/on-boarding/on-boarding-image1.png';
+import OnBoardingImage2 from '@/public/images/on-boarding/on-boarding-image2.png';
+import OnBoardingImage3 from '@/public/images/on-boarding/on-boarding-image3.png';
+import OnBoardingImage4 from '@/public/images/on-boarding/on-boarding-image4.png';
+import OnBoardingImage5 from '@/public/images/on-boarding/on-boarding-image5.png';
+
 export const stepsIntroduce = [
   {
     total: '캘린더에서 날짜를 클릭하면 수영을 기록할 수 있어요',
     highlight: ['날짜를 클릭'],
+    image: OnBoardingImage0,
   },
   {
     total: '스마트 워치가 없어도 바퀴 수로 거리 기록이 가능해요',
     highlight: ['바퀴 수'],
+    image: OnBoardingImage1,
   },
   {
     total: '기록한 수영 거리에 따라 물결 높이가 달라져요',
     highlight: ['물결 높이'],
+    image: OnBoardingImage2,
   },
   {
     total: '영법별로 기록하면 색으로 구분되어 보여요',
     highlight: ['영법별', '색'],
+    image: OnBoardingImage3,
   },
   {
     total: '캘린더와 타임라인으로 나의 실력 성장을 확인해요',
     highlight: ['캘린더', '타임라인'],
+    image: OnBoardingImage4,
   },
   {
     total: '수영 친구를 팔로우하고 응원을 주고받아요',
     highlight: ['수영 친구를 팔로우'],
+    image: OnBoardingImage5,
   },
 ];