feat: 완성된 만다라트 보여주기

src/app/create/complete/page.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { MandalartCarousel } from '@/components/mandalart';
+import useDidMount from '@/hooks/use-did-mount';
+import { MandalartPartType } from '@/types/mandalart';
+import { BranchesType, CreateStorageType, getCreateStorage } from '@/utils/storage';
+import { useState } from 'react';
+
+function CreateCompletePage() {
+  const [contents, setContents] = useState<MandalartPartType[]>([]);
+
+  const initSetting = () => {
+    const data = getCreateStorage() as CreateStorageType;
+
+    if (data) {
+      const mainContent = {
+        mainContent: data['full-goal'],
+        subContents: data.branches.map(({ title }: BranchesType) => title),
+      };
+      const subContents = data.branches.map(({ title, details }: BranchesType) => ({
+        mainContent: title,
+        subContents: details,
+      }));
+      setContents([mainContent, ...subContents]);
+    }
+  };
+
+  useDidMount(initSetting);
+
+  return (
+    <div>
+      <MandalartCarousel contents={contents} theme='primary' isFullMandalart />
+    </div>
+  );
+}
+
+export default CreateCompletePage;

src/app/create/detailed-goals/page.tsx

@@ -49,7 +49,7 @@ export default function DetailedGoalsPage() {
   };
 
   const init_setting = () => {
-    const keyGoals = getCreateStorage('key-goal');
+    const keyGoals = getCreateStorage('key-goal') as string[];
 
     const newContents = keyGoals.map((content: string) => ({
       mainContent: content,

src/app/create/key-goals/page.tsx

@@ -50,7 +50,7 @@ export default function KeyGoalsPage() {
   };
 
   useEffect(() => {
-    const mainContent = getCreateStorage(FULL_GOAL);
+    const mainContent = getCreateStorage(FULL_GOAL) as string;
     if (mainContent) {
       setMainContent(mainContent);
     }

src/components/mandalart/mandalart-carousel.tsx

@@ -10,10 +10,12 @@ import { useEffect } from 'react';
 interface MandalartCarouselProps {
   contents: MandalartPartType[];
   theme: MandalartThemeType;
-  handleCurrentPart: (partIndex: number) => void;
+
+  isFullMandalart?: boolean;
 
   onClick?: (id: number) => void;
   handleTileClick?: (partIndex: number, tileIndex: number) => void;
+  handleCurrentPart?: (partIndex: number) => void;
 }
 
 export function MandalartCarousel({
@@ -22,6 +24,7 @@ export function MandalartCarousel({
   onClick,
   handleTileClick,
   handleCurrentPart,
+  isFullMandalart,
 }: MandalartCarouselProps) {
   const [emblaRef, emblaApi] = useEmblaCarousel();
   const isMounted = useMount();
@@ -30,20 +33,27 @@ export function MandalartCarousel({
     if (emblaApi) {
       emblaApi.on('select', () => {
         const index = emblaApi.selectedScrollSnap();
-        handleCurrentPart(index);
+        handleCurrentPart && handleCurrentPart(index);
       });
     }
   }, [emblaApi, handleCurrentPart]);
 
+  useEffect(() => {
+    if (emblaApi) {
+      emblaApi.reInit();
+    }
+  }, [emblaApi, contents]);
+
   return (
     <Carousel isMounted={isMounted.current}>
       <CarouselViewport ref={emblaRef}>
         <CarouselContainer gap={10}>
           {contents.map((subContent, idx) => {
+            const isMainPart = idx === 0 && isFullMandalart;
             return (
               <div key={'sub' + idx} onClick={() => onClick && onClick(idx)}>
                 <MandalartPart
-                  theme={MANDALART_FULL_THEME[theme].sub}
+                  theme={isMainPart ? MANDALART_FULL_THEME[theme].main : MANDALART_FULL_THEME[theme].sub}
                   contents={subContent}
                   onTileClick={(tileIndex) => handleTileClick && handleTileClick(idx, tileIndex)}
                 />

src/utils/storage.ts

@@ -8,12 +8,17 @@ export const DETAILED_GOAL = 'detailed-goals';
 
 type CreateKeyType = typeof KEY_GOAL | typeof FULL_GOAL | typeof DETAILED_GOAL;
 
-interface BranchesType {
+export interface BranchesType {
   title: string;
   details: string[];
 }
 
-const INIT_CREATE_STORAGE = {
+export interface CreateStorageType {
+  'full-goal': string;
+  'branches': BranchesType[];
+}
+
+const INIT_CREATE_STORAGE: CreateStorageType = {
   'full-goal': '',
   'branches': [],
 };
@@ -48,19 +53,21 @@ export const setCreateStorage = (key: CreateKeyType, value: string | any) => {
   }
 };
 
-export const getCreateStorage = (key?: string) => {
+export const getCreateStorage = (key?: string): CreateStorageType | string | string[] | null => {
   if (typeof window !== undefined) {
     const item = window.sessionStorage.getItem(CREATE_STORAGE_KEY);
     const obj = item ? JSON.parse(item) : INIT_CREATE_STORAGE;
     if (!key) return obj;
 
     if (key === FULL_GOAL) {
-      console.log('   ', obj['full-goal']);
       return obj['full-goal'];
     }
     if (key === KEY_GOAL) {
       return obj['branches'].map((item: BranchesType) => item.title);
     }
+
     return obj[key];
   }
+
+  return null;
 };