feat: 액세서리 선택 항목 기능 구현 #25

endless-horses · Feb 10, 2024 · c223d2a · c223d2a
1 parent 9538836
commit c223d2a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/src/pages/production/option-selector/index.tsx b/src/pages/production/option-selector/index.tsx
@@ -6,6 +6,7 @@ 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';
@@ -18,6 +19,7 @@ function OptionSelector(props: OptionSelectorProps) {
   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);
+              }
             }}
           />
         ))}

diff --git a/src/pages/production/option-selector/item/index.tsx b/src/pages/production/option-selector/item/index.tsx
@@ -4,6 +4,7 @@ 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;
@@ -18,6 +19,7 @@ function Item(props: ItemProps) {
   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>
   );