From 93a684b4a04034862b9268559cd2dec8bd7894b4 Mon Sep 17 00:00:00 2001 From: Jinwoo Lee Date: Sat, 10 Feb 2024 10:34:11 +0900 Subject: [PATCH 1/6] =?UTF-8?q?refactor:=20recoil=20=EC=83=81=ED=83=9C?= =?UTF-8?q?=EB=AA=85=20=EB=B3=80=EA=B2=BD=20#25?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/header/index.tsx | 11 ----------- src/context/color.ts | 2 +- src/context/font.ts | 2 +- src/context/pattern.ts | 2 +- src/context/wheel.ts | 2 +- src/pages/production/content/summary/index.tsx | 16 ++++++++-------- src/pages/production/option-selector/index.tsx | 16 ++++++++-------- .../production/option-selector/item/index.tsx | 16 ++++++++-------- 8 files changed, 28 insertions(+), 39 deletions(-) diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx index 278c925..0e35247 100644 --- a/src/components/header/index.tsx +++ b/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 ( diff --git a/src/context/color.ts b/src/context/color.ts index ea1889e..f92e155 100644 --- a/src/context/color.ts +++ b/src/context/color.ts @@ -1,6 +1,6 @@ import { atom } from 'recoil'; -export const selectedColorIdState = atom({ +export const selectedColorState = atom({ key: 'selectedColorIdState', default: 0, }); diff --git a/src/context/font.ts b/src/context/font.ts index a3268a2..8bb8e40 100644 --- a/src/context/font.ts +++ b/src/context/font.ts @@ -1,6 +1,6 @@ import { atom } from 'recoil'; -export const selectedFontIdState = atom({ +export const selectedFontState = atom({ key: 'selectedFontIdState', default: 0, }); diff --git a/src/context/pattern.ts b/src/context/pattern.ts index 010d9d9..6acb9a4 100644 --- a/src/context/pattern.ts +++ b/src/context/pattern.ts @@ -1,6 +1,6 @@ import { atom } from 'recoil'; -export const selectedPatternIdState = atom({ +export const selectedPatternState = atom({ key: 'selectedPatternState', default: 0, }); diff --git a/src/context/wheel.ts b/src/context/wheel.ts index 2c29169..6965894 100644 --- a/src/context/wheel.ts +++ b/src/context/wheel.ts @@ -1,6 +1,6 @@ import { atom } from 'recoil'; -export const selectedWheelIdState = atom({ +export const selectedWheelState = atom({ key: 'selectedWheelIdState', default: 0, }); diff --git a/src/pages/production/content/summary/index.tsx b/src/pages/production/content/summary/index.tsx index b16f76e..e64f65d 100644 --- a/src/pages/production/content/summary/index.tsx +++ b/src/pages/production/content/summary/index.tsx @@ -1,11 +1,11 @@ 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'; function formatCurrency(price: number) { return '+ ' + price.toLocaleString('ko-KR') + '원'; @@ -15,10 +15,10 @@ 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); if (!pattern.length || !wheel.length || !font.length || !color.length || !accessory.length) { return
Loading...
; diff --git a/src/pages/production/option-selector/index.tsx b/src/pages/production/option-selector/index.tsx index e15c5cc..ebca40e 100644 --- a/src/pages/production/option-selector/index.tsx +++ b/src/pages/production/option-selector/index.tsx @@ -1,11 +1,11 @@ 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'; interface OptionSelectorProps { shape: 'square' | 'circle'; @@ -14,10 +14,10 @@ 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 data = getData(props.data); return ( diff --git a/src/pages/production/option-selector/item/index.tsx b/src/pages/production/option-selector/item/index.tsx index 8e22cd0..517ac37 100644 --- a/src/pages/production/option-selector/item/index.tsx +++ b/src/pages/production/option-selector/item/index.tsx @@ -1,9 +1,9 @@ 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'; interface ItemProps { id: number; @@ -14,10 +14,10 @@ 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); return ( From dbfaea56a4cdbc5c47a44fe35571e0a45c009a70 Mon Sep 17 00:00:00 2001 From: Jinwoo Lee Date: Sat, 10 Feb 2024 10:36:06 +0900 Subject: [PATCH 2/6] =?UTF-8?q?feat:=20=EC=95=A1=EC=84=B8=EC=84=9C?= =?UTF-8?q?=EB=A6=AC=20=EC=84=A0=ED=83=9D=20recoil=20=EC=A0=84=EC=97=AD?= =?UTF-8?q?=EC=83=81=ED=83=9C=20=EC=A0=95=EC=9D=98=20#25?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/context/accessory.ts | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 src/context/accessory.ts diff --git a/src/context/accessory.ts b/src/context/accessory.ts new file mode 100644 index 0000000..80c005f --- /dev/null +++ b/src/context/accessory.ts @@ -0,0 +1,6 @@ +import { atom } from 'recoil'; + +export const selectedAccessoryState = atom({ + key: 'selectedAccessoryState', + default: [], +}); From 953883663b591491fd539b9fdfb5404a52dabf95 Mon Sep 17 00:00:00 2001 From: Jinwoo Lee Date: Sat, 10 Feb 2024 10:44:15 +0900 Subject: [PATCH 3/6] =?UTF-8?q?fix:=20=EC=95=A1=EC=84=B8=EC=84=9C=EB=A6=AC?= =?UTF-8?q?=20=EC=83=81=ED=83=9C=20=EB=8B=A8=EC=9D=BC=20=EC=84=A0=ED=83=9D?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD=20#25?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/context/accessory.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/context/accessory.ts b/src/context/accessory.ts index 80c005f..07488fe 100644 --- a/src/context/accessory.ts +++ b/src/context/accessory.ts @@ -1,6 +1,6 @@ import { atom } from 'recoil'; -export const selectedAccessoryState = atom({ +export const selectedAccessoryState = atom({ key: 'selectedAccessoryState', - default: [], + default: 0, }); From c223d2a9723b4d72c88a972b52d4dff22eeeb5d7 Mon Sep 17 00:00:00 2001 From: Jinwoo Lee Date: Sat, 10 Feb 2024 10:44:52 +0900 Subject: [PATCH 4/6] =?UTF-8?q?feat:=20=EC=95=A1=EC=84=B8=EC=84=9C?= =?UTF-8?q?=EB=A6=AC=20=EC=84=A0=ED=83=9D=20=ED=95=AD=EB=AA=A9=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84=20#25?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/production/option-selector/index.tsx | 5 +++++ src/pages/production/option-selector/item/index.tsx | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/src/pages/production/option-selector/index.tsx b/src/pages/production/option-selector/index.tsx index ebca40e..0f857ac 100644 --- 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 index 517ac37..7a91de3 100644 --- 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 ( @@ -37,6 +39,9 @@ function Item(props: ItemProps) { type="circle" /> )} + {props.data === 'accessory' && ( + + )} {props.name} ); From 502b6ae16605064f4da11e34bdcadfdf1f6d1564 Mon Sep 17 00:00:00 2001 From: Jinwoo Lee Date: Sat, 10 Feb 2024 10:45:27 +0900 Subject: [PATCH 5/6] =?UTF-8?q?feat:=20=EC=95=A1=EC=84=B8=EC=84=9C?= =?UTF-8?q?=EB=A6=AC=20=EC=84=A0=ED=83=9D=20=ED=95=AD=EB=AA=A9=20=EC=84=A4?= =?UTF-8?q?=EB=AA=85=EB=9E=80=20=EC=B6=9C=EB=A0=A5=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=20#25?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/production/content/summary/index.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/pages/production/content/summary/index.tsx b/src/pages/production/content/summary/index.tsx index e64f65d..143aae8 100644 --- a/src/pages/production/content/summary/index.tsx +++ b/src/pages/production/content/summary/index.tsx @@ -6,6 +6,7 @@ import { useRecoilState } from 'recoil'; 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') + '원'; @@ -19,6 +20,7 @@ function Summary() { 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
Loading...
; @@ -69,6 +71,19 @@ function Summary() { ); + case 3: + return ( + +
+ {accessory[selectedAccessory].name} + {formatCurrency(accessory[selectedAccessory].price)} +
+
+ +

{accessory[selectedAccessory].explanation}

+ + + ); default: return
Error...
; } From 719268ae9de63643eead10eae0dd58ad5de5e952 Mon Sep 17 00:00:00 2001 From: Jinwoo Lee Date: Sat, 10 Feb 2024 10:45:57 +0900 Subject: [PATCH 6/6] =?UTF-8?q?feat:=20=EC=95=A1=EC=84=B8=EC=84=9C?= =?UTF-8?q?=EB=A6=AC=20=EC=84=A0=ED=83=9D=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EB=9D=BC=EC=9A=B0=ED=8C=85=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84=20#25?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/production/button-group/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/production/button-group/index.tsx b/src/pages/production/button-group/index.tsx index 209ee20..737e00a 100644 --- a/src/pages/production/button-group/index.tsx +++ b/src/pages/production/button-group/index.tsx @@ -20,7 +20,7 @@ function ButtonGroup(props: ButtonGroupProps) {