타이어 커스텀 페이지 구현 - 액세서리 선택 close #25

src/components/header/index.tsx

@@ -1,9 +1,5 @@
 import Logo from '@components/logo';
 import Container from './index.style';
-import { useRecoilState } from 'recoil';
-import { selectedPatternIdState } from '@context/pattern';
-import { selectedWheelIdState } from '@context/wheel';
-import { useEffect } from 'react';
 import { useNavigate } from 'react-router';
 
 interface HeaderProps {
@@ -12,13 +8,6 @@ interface HeaderProps {
 
 function Header(props: HeaderProps) {
   const navigate = useNavigate();
-  const [, setSelectedPattern] = useRecoilState(selectedPatternIdState);
-  const [, setSelectedWheel] = useRecoilState(selectedWheelIdState);
-
-  useEffect(() => {
-    setSelectedPattern(0);
-    setSelectedWheel(0);
-  }, []);
 
   return (
     <Container inversion={props.inversion ? 'true' : 'false'}>

src/context/accessory.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const selectedAccessoryState = atom<number>({
+  key: 'selectedAccessoryState',
+  default: 0,
+});

src/context/color.ts

@@ -1,6 +1,6 @@
 import { atom } from 'recoil';
 
-export const selectedColorIdState = atom<number>({
+export const selectedColorState = atom<number>({
   key: 'selectedColorIdState',
   default: 0,
 });

src/context/font.ts

@@ -1,6 +1,6 @@
 import { atom } from 'recoil';
 
-export const selectedFontIdState = atom<number>({
+export const selectedFontState = atom<number>({
   key: 'selectedFontIdState',
   default: 0,
 });

src/context/pattern.ts

@@ -1,6 +1,6 @@
 import { atom } from 'recoil';
 
-export const selectedPatternIdState = atom<number>({
+export const selectedPatternState = atom<number>({
   key: 'selectedPatternState',
   default: 0,
 });

src/context/wheel.ts

@@ -1,6 +1,6 @@
 import { atom } from 'recoil';
 
-export const selectedWheelIdState = atom<number>({
+export const selectedWheelState = atom<number>({
   key: 'selectedWheelIdState',
   default: 0,
 });

src/pages/production/button-group/index.tsx

@@ -20,7 +20,7 @@ function ButtonGroup(props: ButtonGroupProps) {
       <Button
         text={props.step < 3 ? '다음 단계로' : '결과 확인하기'}
         onClick={() => {
-          if (props.step < 2) navigate(`/production?step=${props.step + 1}`);
+          if (props.step < 3) navigate(`/production?step=${props.step + 1}`);
         }}
       />
     </Container>

src/pages/production/content/summary/index.tsx

@@ -1,11 +1,12 @@
 import useCustomData from '@hooks/useCustomData';
 import { Container, Explanation, Name, Price } from './index.style';
 import { useSearchParams } from 'react-router-dom';
-import { selectedPatternIdState } from '@context/pattern';
+import { selectedPatternState } from '@context/pattern';
 import { useRecoilState } from 'recoil';
-import { selectedWheelIdState } from '@context/wheel';
-import { selectedFontIdState } from '@context/font';
-import { selectedColorIdState } from '@context/color';
+import { selectedWheelState } from '@context/wheel';
+import { selectedFontState } from '@context/font';
+import { selectedColorState } from '@context/color';
+import { selectedAccessoryState } from '@context/accessory';
 
 function formatCurrency(price: number) {
   return '+ ' + price.toLocaleString('ko-KR') + '원';
@@ -15,10 +16,11 @@ function Summary() {
   const [searchParams] = useSearchParams();
   const step: number = Number(searchParams.get('step'));
   const { pattern, wheel, font, color, accessory } = useCustomData();
-  const [selectedPattern] = useRecoilState(selectedPatternIdState);
-  const [selectedWheel] = useRecoilState(selectedWheelIdState);
-  const [selectedFont] = useRecoilState(selectedFontIdState);
-  const [selectedColor] = useRecoilState(selectedColorIdState);
+  const [selectedPattern] = useRecoilState(selectedPatternState);
+  const [selectedWheel] = useRecoilState(selectedWheelState);
+  const [selectedFont] = useRecoilState(selectedFontState);
+  const [selectedColor] = useRecoilState(selectedColorState);
+  const [selectedAccessory] = useRecoilState(selectedAccessoryState);
 
   if (!pattern.length || !wheel.length || !font.length || !color.length || !accessory.length) {
     return <div>Loading...</div>;
@@ -69,6 +71,19 @@ function Summary() {
           </Explanation>
         </Container>
       );
+    case 3:
+      return (
+        <Container className="summary">
+          <div className="top">
+            <Name>{accessory[selectedAccessory].name}</Name>
+            <Price>{formatCurrency(accessory[selectedAccessory].price)}</Price>
+          </div>
+          <hr className="sep" />
+          <Explanation>
+            <p>{accessory[selectedAccessory].explanation}</p>
+          </Explanation>
+        </Container>
+      );
     default:
       return <div>Error...</div>;
   }

src/pages/production/option-selector/index.tsx

@@ -1,11 +1,12 @@
 import { Container, Title } from './index.style';
 import Item from './item';
 import { useRecoilState } from 'recoil';
-import { selectedPatternIdState } from '@context/pattern';
-import { selectedWheelIdState } from '@context/wheel';
 import useCustomData from 'hooks/useCustomData';
-import { selectedFontIdState } from '@context/font';
-import { selectedColorIdState } from '@context/color';
+import { selectedPatternState } from '@context/pattern';
+import { selectedWheelState } from '@context/wheel';
+import { selectedFontState } from '@context/font';
+import { selectedColorState } from '@context/color';
+import { selectedAccessoryState } from '@context/accessory';
 
 interface OptionSelectorProps {
   shape: 'square' | 'circle';
@@ -14,10 +15,11 @@ interface OptionSelectorProps {
 }
 
 function OptionSelector(props: OptionSelectorProps) {
-  const [, setSelectedPattern] = useRecoilState(selectedPatternIdState);
-  const [, setSelectedWheel] = useRecoilState(selectedWheelIdState);
-  const [, setSelectedFont] = useRecoilState(selectedFontIdState);
-  const [, setSelectedColor] = useRecoilState(selectedColorIdState);
+  const [, setSelectedPattern] = useRecoilState(selectedPatternState);
+  const [, setSelectedWheel] = useRecoilState(selectedWheelState);
+  const [, setSelectedFont] = useRecoilState(selectedFontState);
+  const [, setSelectedColor] = useRecoilState(selectedColorState);
+  const [, setSelectedAccessory] = useRecoilState(selectedAccessoryState);
   const data = getData(props.data);
 
   return (
@@ -46,6 +48,9 @@ function OptionSelector(props: OptionSelectorProps) {
               {
                 props.data === 'color' && setSelectedColor(index);
               }
+              {
+                props.data === 'accessory' && setSelectedAccessory(index);
+              }
             }}
           />
         ))}

src/pages/production/option-selector/item/index.tsx

@@ -1,9 +1,10 @@
 import { useRecoilState } from 'recoil';
 import { Container, ItemImage, ItemName } from './index.style';
-import { selectedPatternIdState } from '@context/pattern';
-import { selectedWheelIdState } from '@context/wheel';
-import { selectedColorIdState } from '@context/color';
-import { selectedFontIdState } from '@context/font';
+import { selectedPatternState } from '@context/pattern';
+import { selectedWheelState } from '@context/wheel';
+import { selectedFontState } from '@context/font';
+import { selectedColorState } from '@context/color';
+import { selectedAccessoryState } from '@context/accessory';
 
 interface ItemProps {
   id: number;
@@ -14,10 +15,11 @@ interface ItemProps {
 }
 
 function Item(props: ItemProps) {
-  const [selectedPattern] = useRecoilState(selectedPatternIdState);
-  const [selectedWheel] = useRecoilState(selectedWheelIdState);
-  const [selectedFont] = useRecoilState(selectedFontIdState);
-  const [selectedColor] = useRecoilState(selectedColorIdState);
+  const [selectedPattern] = useRecoilState(selectedPatternState);
+  const [selectedWheel] = useRecoilState(selectedWheelState);
+  const [selectedFont] = useRecoilState(selectedFontState);
+  const [selectedColor] = useRecoilState(selectedColorState);
+  const [selectedAccessory] = useRecoilState(selectedAccessoryState);
 
   return (
     <Container className="item_cntr" onClick={props.onClick}>
@@ -37,6 +39,9 @@ function Item(props: ItemProps) {
           type="circle"
         />
       )}
+      {props.data === 'accessory' && (
+        <ItemImage className={`item_image ${selectedAccessory === props.id ? 'selected' : ''}`} src={props.imageSrc} />
+      )}
       <ItemName className="item_name">{props.name}</ItemName>
     </Container>
   );