refactor: create-character

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() {

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>
         </>
     );
-});
+}

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';

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>
         </>
     );
-});
+}

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>
         </>
     );
-});
+}

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>
         </>
     );
-});
+}

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>
         </>
     );
-});
+}

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();

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');

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>
+    );
+}