Merge branch 'feature/#79/Section_Part' of https://github.com/modern-…

…agile-team/8term-coko-Front into feature/#79/Section_Part

.github/workflows/ci-cd.yml

@@ -2,7 +2,7 @@ name: CI/CD Docker
 
 on:
   push:
-    branches: [feature/#79/Section_Part]
+    branches: [main, develop]
 
 env:
   DOCKER_IMAGE: ghcr.io/${{ github.actor }}/react-auto-deploy

src/features/learn/types.ts

@@ -1,11 +1,11 @@
-export interface Part {
+export interface Section {
   id: number;
-  sectionId: number;
   name: string;
+  part: Part[];
 }
 
-export interface Section {
+export interface Part {
   id: number;
   name: string;
-  part: Part[];
-}
+  sectionId: number;
+}

src/features/learn/ui/SectionNavigateContainer.tsx

@@ -1,20 +1,30 @@
-import { SectionButton } from '../../../common/ui/style';
+import { SectionButton } from '@common/ui/style';
+import { getImageUrl } from '@utils/getImageUrl';
+import sectionsQuery from '@features/learn/queries';
 
 export default function SectionNavigateContainer() {
-  const imgUrl = import.meta.env.VITE_IMG_BASE_URL;
+  const { data: sections, isLoading, error } = sectionsQuery.getAll();
 
-  const imgUrls = [
-    `${imgUrl}섬1.svg`,
-    `${imgUrl}섬2.svg`,
-    `${imgUrl}섬3.svg`,
-    `${imgUrl}섬4.svg`,
-    `${imgUrl}섬5.svg`,
-  ];
+  const scrollToSection = (sectionId: number) => {
+    const targetSection = document.getElementById(`section-${sectionId}`);
+    if (targetSection) {
+      targetSection.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
+
+  if (isLoading) return <div>로딩 중...</div>;
+  if (error) return <div>섹션 데이터를 가져오는데 실패했습니다.</div>;
 
   return (
     <>
-      {imgUrls.map((url, index) => (
-        <SectionButton key={index} $backgroundImage={url} />
+      {sections?.map((section, index) => (
+        <SectionButton
+          key={section.id}
+          $backgroundImage={getImageUrl(`섬${(index % 5) + 1}.svg`)}
+          onClick={() => scrollToSection(section.id)}
+        >
+          {section.name}
+        </SectionButton>
       ))}
     </>
   );

src/features/quiz/ui/PartNavContainer.tsx

@@ -36,7 +36,7 @@ export default function PartNavContainer({
     <>
       <UpperBackgroundImg />
       <EntireSectionContainer>
-        <SectionWrapper key={section.id}>
+        <SectionWrapper id={`section-${section.id}`} key={section.id}>
           <SectionTitle>{section.name}</SectionTitle>
           <ButtonGrid>
             {section.part.map((part, partIndex) => {
@@ -54,6 +54,7 @@ export default function PartNavContainer({
                     navigate('/quiz', { state: { partId: part.id } })
                   }
                 >
+                  {part.name}
                   <img src={buttonImage} alt={`키캡 ${part.name}`} />
                 </KeyboardButton>
               );