From 8f99ba82059e0519d9fb8b50be210fb2644300ca Mon Sep 17 00:00:00 2001
From: stakbucks <dhassidu11@gmail.com>
Date: Sat, 6 Apr 2024 19:50:15 +0900
Subject: [PATCH] refactor: create-character

---
 src/components/create-character/index.tsx     | 25 ++++++-----------
 .../create-character/steps/guide-to-login.tsx |  4 +--
 .../create-character/steps/index.tsx          |  9 ++++++
 .../create-character/steps/select-color.tsx   |  4 +--
 .../create-character/steps/select-item.tsx    |  4 +--
 .../steps/select-keywords.tsx                 |  4 +--
 .../create-character/steps/select-shape.tsx   |  4 +--
 .../create-character/steps/set-name.tsx       |  2 +-
 .../create-character/steps/show-result.tsx    |  2 +-
 .../create-character/steps/story.tsx          | 28 +++++++++++++++++--
 src/components/create-character/story-box.tsx | 24 ----------------
 11 files changed, 55 insertions(+), 55 deletions(-)
 create mode 100644 src/components/create-character/steps/index.tsx
 delete mode 100644 src/components/create-character/story-box.tsx

diff --git a/src/components/create-character/index.tsx b/src/components/create-character/index.tsx
index 31fb62b..6179241 100644
--- a/src/components/create-character/index.tsx
+++ b/src/components/create-character/index.tsx
@@ -4,14 +4,7 @@ import CreateCharacterProvider from '@/context/create-character-provider';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { createContext, useCallback, useEffect, useMemo, useState } from 'react';
 import StepContainer from './step-container';
-import GuideToLogin from './steps/guide-to-login';
-import SelectColor from './steps/select-color';
-import SelectItem from './steps/select-item';
-import SelectKeywords from './steps/select-keywords';
-import SelectShape from './steps/select-shape';
-import SetName from './steps/set-name';
-import ShowResult from './steps/show-result';
-import Story from './steps/story';
+import * as CreateCharacterSteps from './steps';
 import { Steps } from './types/steps';
 import StepperHeader from './stepper-header';
 
@@ -23,14 +16,14 @@ interface CarouselDispatch {
 export const CarouselDispatchContext = createContext<null | CarouselDispatch>(null);
 
 const STEPS: readonly React.ReactNode[] = [
-    <Story key={Steps.Story} />,
-    <SetName key={Steps.SetName} />,
-    <SelectShape key={Steps.SelectShape} />,
-    <SelectColor key={Steps.SelectColor} />,
-    <SelectKeywords key={Steps.SelectKeywords} />,
-    <SelectItem key={Steps.SelectItem} />,
-    <ShowResult key={Steps.ShowResult} />,
-    <GuideToLogin key={Steps.GuideToLogin} />,
+    <CreateCharacterSteps.Story key={Steps.Story} />,
+    <CreateCharacterSteps.SetName key={Steps.SetName} />,
+    <CreateCharacterSteps.SelectShape key={Steps.SelectShape} />,
+    <CreateCharacterSteps.SelectColor key={Steps.SelectColor} />,
+    <CreateCharacterSteps.SelectKeywords key={Steps.SelectKeywords} />,
+    <CreateCharacterSteps.SelectItem key={Steps.SelectItem} />,
+    <CreateCharacterSteps.ShowResult key={Steps.ShowResult} />,
+    <CreateCharacterSteps.GuideToLogin key={Steps.GuideToLogin} />,
 ] as const;
 
 export default function CreateCharacter() {
diff --git a/src/components/create-character/steps/guide-to-login.tsx b/src/components/create-character/steps/guide-to-login.tsx
index bfbf100..99ecb83 100644
--- a/src/components/create-character/steps/guide-to-login.tsx
+++ b/src/components/create-character/steps/guide-to-login.tsx
@@ -7,7 +7,7 @@ import Header from '../header';
 import useCarousel from '../hooks/useCarousel';
 import Intro from '../intro';
 
-export default React.memo(function GuideToLogin() {
+export function GuideToLogin() {
     const { handlePrevClick } = useCarousel();
 
     return (
@@ -21,4 +21,4 @@ export default React.memo(function GuideToLogin() {
             </FixedBottomArea>
         </>
     );
-});
+}
diff --git a/src/components/create-character/steps/index.tsx b/src/components/create-character/steps/index.tsx
new file mode 100644
index 0000000..55333d0
--- /dev/null
+++ b/src/components/create-character/steps/index.tsx
@@ -0,0 +1,9 @@
+// export StepContainer from '../step-container';
+export { GuideToLogin } from './guide-to-login';
+export { SelectColor } from './select-color';
+export { SelectItem } from './select-item';
+export { SelectKeywords } from './select-keywords';
+export { SelectShape } from './select-shape';
+export { SetName } from './set-name';
+export { ShowResult } from './show-result';
+export { Story } from './story';
diff --git a/src/components/create-character/steps/select-color.tsx b/src/components/create-character/steps/select-color.tsx
index c4728d9..04981fa 100644
--- a/src/components/create-character/steps/select-color.tsx
+++ b/src/components/create-character/steps/select-color.tsx
@@ -9,7 +9,7 @@ import { Colors } from '@/constants/character-info';
 
 type ColorId = (typeof Colors)[number]['id'];
 
-export default React.memo(function SelectColor() {
+export function SelectColor() {
     const [selected, setSelected] = useState<null | ColorId>(null);
     const { setValue } = useCreateCharacterContext();
     const carouselDispatch = useContext(CarouselDispatchContext);
@@ -55,4 +55,4 @@ export default React.memo(function SelectColor() {
             </FixedBottomArea>
         </>
     );
-});
+}
diff --git a/src/components/create-character/steps/select-item.tsx b/src/components/create-character/steps/select-item.tsx
index 199aec7..18b2c36 100644
--- a/src/components/create-character/steps/select-item.tsx
+++ b/src/components/create-character/steps/select-item.tsx
@@ -9,7 +9,7 @@ import { useCreateCharacterContext } from '@/context/create-character-provider';
 
 type ItemId = (typeof Items)[number]['id'];
 
-export default React.memo(function SelectItem() {
+export function SelectItem() {
     const [selected, setSelected] = useState<null | ItemId>(null);
     const { setValue } = useCreateCharacterContext();
     const { handleNextClick } = useCarousel();
@@ -51,4 +51,4 @@ export default React.memo(function SelectItem() {
             </FixedBottomArea>
         </>
     );
-});
+}
diff --git a/src/components/create-character/steps/select-keywords.tsx b/src/components/create-character/steps/select-keywords.tsx
index 3f732a8..27a6cfc 100644
--- a/src/components/create-character/steps/select-keywords.tsx
+++ b/src/components/create-character/steps/select-keywords.tsx
@@ -9,7 +9,7 @@ import { useCreateCharacterContext } from '@/context/create-character-provider';
 
 type KeywordId = (typeof Keywords)[number]['id'];
 
-export default React.memo(function SelectKeywords() {
+export function SelectKeywords() {
     const { handleNextClick } = useCarousel();
 
     const { setValue } = useCreateCharacterContext();
@@ -63,4 +63,4 @@ export default React.memo(function SelectKeywords() {
             </FixedBottomArea>
         </>
     );
-});
+}
diff --git a/src/components/create-character/steps/select-shape.tsx b/src/components/create-character/steps/select-shape.tsx
index 2c0d76f..62ef747 100644
--- a/src/components/create-character/steps/select-shape.tsx
+++ b/src/components/create-character/steps/select-shape.tsx
@@ -11,7 +11,7 @@ import { useCreateCharacterContext } from '@/context/create-character-provider';
 
 type ShapeId = (typeof Shapes)[number]['id'];
 
-export default React.memo(function SelectShape() {
+export function SelectShape() {
     const [selected, setSelected] = useState<null | ShapeId>(null);
 
     const { setValue } = useCreateCharacterContext();
@@ -59,4 +59,4 @@ export default React.memo(function SelectShape() {
             </FixedBottomArea>
         </>
     );
-});
+}
diff --git a/src/components/create-character/steps/set-name.tsx b/src/components/create-character/steps/set-name.tsx
index b1c20a3..b26fcb1 100644
--- a/src/components/create-character/steps/set-name.tsx
+++ b/src/components/create-character/steps/set-name.tsx
@@ -7,7 +7,7 @@ import { useCreateCharacterContext } from '@/context/create-character-provider';
 
 const NAME_REGEX = /^[ㄱ-ㅎ|ㅏ-ㅣ|가-힣a-zA-Z\s]{1,8}$/;
 
-export default function SetName() {
+export function SetName() {
     console.log('name rerender');
     const { setValue } = useCreateCharacterContext();
     const { handleNextClick } = useCarousel();
diff --git a/src/components/create-character/steps/show-result.tsx b/src/components/create-character/steps/show-result.tsx
index 8533535..908909f 100644
--- a/src/components/create-character/steps/show-result.tsx
+++ b/src/components/create-character/steps/show-result.tsx
@@ -34,7 +34,7 @@ export const createCharacter = async (createCharacterValues: CreateCharacterValu
         .then((res) => res.json())
         .then((body) => body.data);
 
-export default function ShowResult() {
+export function ShowResult() {
     const router = useRouter();
     const searchParams = useSearchParams();
     const step = searchParams.get('step');
diff --git a/src/components/create-character/steps/story.tsx b/src/components/create-character/steps/story.tsx
index c999314..6b9dbf3 100644
--- a/src/components/create-character/steps/story.tsx
+++ b/src/components/create-character/steps/story.tsx
@@ -7,12 +7,12 @@ import { useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 import FixedBottomArea from '../fixed-bottom-area';
 import Header from '../header';
-import StoryBox from '../story-box';
+import Badge from '@/assets/images/badgeSm.png';
 import Story1 from '@/assets/images/story-1.webp';
 import Story2 from '@/assets/images/story-2.webp';
 import Story3 from '@/assets/images/story-3.webp';
 
-export default React.memo(function Story() {
+export function Story() {
     const router = useRouter();
 
     const [storyNum, setStoryNum] = useState<1 | 2 | 3>(1);
@@ -66,4 +66,26 @@ export default React.memo(function Story() {
             )}
         </>
     );
-});
+}
+
+type Props = {
+    text: string;
+};
+
+export default function StoryBox({ text }: Props) {
+    return (
+        <div className="relative">
+            <div className="h-auto w-[343px] whitespace-pre-line rounded-[16px] bg-[#3C3A43] p-[24px] text-regular16 text-gray-100 opacity-80">
+                {text}
+            </div>
+            <Image
+                quality={100}
+                alt="배지"
+                src={Badge}
+                width={66.5}
+                height={66.5}
+                className="absolute right-0 top-[-49px]"
+            />
+        </div>
+    );
+}
diff --git a/src/components/create-character/story-box.tsx b/src/components/create-character/story-box.tsx
deleted file mode 100644
index 775e9f6..0000000
--- a/src/components/create-character/story-box.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import Badge from '@/assets/images/badgeSm.png';
-import Image from 'next/image';
-
-type Props = {
-    text: string;
-};
-
-export default function StoryBox({ text }: Props) {
-    return (
-        <div className="relative">
-            <div className="h-auto w-[343px] whitespace-pre-line rounded-[16px] bg-[#3C3A43] p-[24px] text-regular16 text-gray-100 opacity-80">
-                {text}
-            </div>
-            <Image
-                quality={100}
-                alt="배지"
-                src={Badge}
-                width={66.5}
-                height={66.5}
-                className="absolute right-0 top-[-49px]"
-            />
-        </div>
-    );
-}