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); const STEPS: readonly React.ReactNode[] = [ - , - , - , - , - , - , - , - , + , + , + , + , + , + , + , + , ] 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() { ); -}); +} 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); const { setValue } = useCreateCharacterContext(); const carouselDispatch = useContext(CarouselDispatchContext); @@ -55,4 +55,4 @@ export default React.memo(function SelectColor() { ); -}); +} 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); const { setValue } = useCreateCharacterContext(); const { handleNextClick } = useCarousel(); @@ -51,4 +51,4 @@ export default React.memo(function SelectItem() { ); -}); +} 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() { ); -}); +} 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); const { setValue } = useCreateCharacterContext(); @@ -59,4 +59,4 @@ export default React.memo(function SelectShape() { ); -}); +} 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 ( +
+
+ {text} +
+ 배지 +
+ ); +} 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 ( -
-
- {text} -
- 배지 -
- ); -}