From e755f1ab168ede5563e8515cd9cdf7f778bab793 Mon Sep 17 00:00:00 2001
From: Jinwoo Lee <binaryWooo@gmail.com>
Date: Thu, 8 Feb 2024 04:03:07 +0900
Subject: [PATCH 1/8] =?UTF-8?q?feat:=20=EC=B8=A1=EB=A9=B4=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=83=89=EC=83=81=20=EC=A0=84=EC=97=AD?=
 =?UTF-8?q?=EC=83=81=ED=83=9C=20=EA=B5=AC=ED=98=84=20#23?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/context/color.ts | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 src/context/color.ts

diff --git a/src/context/color.ts b/src/context/color.ts
new file mode 100644
index 0000000..ea1889e
--- /dev/null
+++ b/src/context/color.ts
@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const selectedColorIdState = atom<number>({
+  key: 'selectedColorIdState',
+  default: 0,
+});

From 7929016d6b74c5e84c28a586f3ee2a7f846809ad Mon Sep 17 00:00:00 2001
From: Jinwoo Lee <binaryWooo@gmail.com>
Date: Thu, 8 Feb 2024 04:03:36 +0900
Subject: [PATCH 2/8] =?UTF-8?q?feat:=20=EC=B8=A1=EB=A9=B4=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EA=B8=80=EA=BC=B4=20=EC=A0=84=EC=97=AD?=
 =?UTF-8?q?=EC=83=81=ED=83=9C=20=EA=B5=AC=ED=98=84=20#23?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/context/font.ts | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 src/context/font.ts

diff --git a/src/context/font.ts b/src/context/font.ts
new file mode 100644
index 0000000..a3268a2
--- /dev/null
+++ b/src/context/font.ts
@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const selectedFontIdState = atom<number>({
+  key: 'selectedFontIdState',
+  default: 0,
+});

From 32df3ec8597997f49fa2ca0aecc3e3c81cbcfa69 Mon Sep 17 00:00:00 2001
From: Jinwoo Lee <binaryWooo@gmail.com>
Date: Thu, 8 Feb 2024 04:31:54 +0900
Subject: [PATCH 3/8] =?UTF-8?q?refactor:=20custom=20=EB=8D=B0=EC=9D=B4?=
 =?UTF-8?q?=ED=84=B0=20=ED=9B=85=20=EB=B6=84=EB=A6=AC=20#23?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useCustomData.ts | 41 ++++++++++++++++++++++++++++++++++++++
 tsconfig.json              |  3 ++-
 2 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 src/hooks/useCustomData.ts

diff --git a/src/hooks/useCustomData.ts b/src/hooks/useCustomData.ts
new file mode 100644
index 0000000..e595613
--- /dev/null
+++ b/src/hooks/useCustomData.ts
@@ -0,0 +1,41 @@
+import { Accessory } from '@api/accessory';
+import { AccessoryData } from '@api/accessory.types';
+import { Color } from '@api/color';
+import { ColorData } from '@api/color.types';
+import { Font } from '@api/font';
+import { FontData } from '@api/font.types';
+import { Pattern } from '@api/pattern';
+import { PatternData } from '@api/pattern.types';
+import { Wheel } from '@api/wheel';
+import { WheelData } from '@api/wheel.types';
+import { useEffect, useState } from 'react';
+
+function useCustomData() {
+  const [pattern, setPattern] = useState<PatternData[]>([]);
+  const [wheel, setWheel] = useState<WheelData[]>([]);
+  const [font, setFont] = useState<FontData[]>([]);
+  const [color, setColor] = useState<ColorData[]>([]);
+  const [accessory, setAccessory] = useState<AccessoryData[]>([]);
+
+  useEffect(() => {
+    const getData = async () => {
+      const [patterns, wheels, fonts, colors, accessories] = await Promise.all([
+        Pattern.list(),
+        Wheel.list(),
+        Font.list(),
+        Color.list(),
+        Accessory.list(),
+      ]);
+      setPattern(patterns);
+      setWheel(wheels);
+      setFont(fonts);
+      setColor(colors);
+      setAccessory(accessories);
+    };
+    getData();
+  }, []);
+
+  return { pattern, wheel, font, color, accessory };
+}
+
+export default useCustomData;
diff --git a/tsconfig.json b/tsconfig.json
index 0f41ca5..99efc36 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -25,7 +25,8 @@
       "@components/*": ["./components/*"],
       "@pages/*": ["./pages/*"],
       "@api/*": ["./api/*"],
-      "@context/*": ["./context/*"]
+      "@context/*": ["./context/*"],
+      "@hooks/*": ["./hooks/*"]
     }
   },
   "include": [

From 1e40d7921ee0381292c812e5f905a3ee0c709651 Mon Sep 17 00:00:00 2001
From: Jinwoo Lee <binaryWooo@gmail.com>
Date: Thu, 8 Feb 2024 05:14:43 +0900
Subject: [PATCH 4/8] =?UTF-8?q?refactor:=20=ED=8F=B0=ED=8A=B8=20=EB=B0=8F?=
 =?UTF-8?q?=20=EC=83=89=EC=83=81=20=ED=95=AD=EB=AA=A9=EC=B6=94=EA=B0=80?=
 =?UTF-8?q?=EC=97=90=20=EB=94=B0=EB=A5=B8=20=ED=95=AD=EB=AA=A9=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=20=EC=83=81=EC=9E=90=20=EB=A6=AC=ED=8C=A9=ED=86=A0?=
 =?UTF-8?q?=EB=A7=81=20#23?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/production/button-group/index.tsx   |  2 +-
 .../option-selector/index.style.tsx           | 26 +++++-
 .../production/option-selector/index.tsx      | 81 ++++++++++++-------
 .../option-selector/item/index.style.tsx      | 42 +++++++++-
 .../production/option-selector/item/index.tsx | 22 +++--
 5 files changed, 132 insertions(+), 41 deletions(-)

diff --git a/src/pages/production/button-group/index.tsx b/src/pages/production/button-group/index.tsx
index c0a0526..78eac67 100644
--- a/src/pages/production/button-group/index.tsx
+++ b/src/pages/production/button-group/index.tsx
@@ -19,7 +19,7 @@ function ButtonGroup(props: ButtonGroupProps) {
       <Button
         text={props.step < 3 ? '다음 단계로' : '결과 확인하기'}
         onClick={() => {
-          if (props.step < 1) navigate(`/production?step=${props.step + 1}`);
+          if (props.step < 2) navigate(`/production?step=${props.step + 1}`);
         }}
       />
     </Container>
diff --git a/src/pages/production/option-selector/index.style.tsx b/src/pages/production/option-selector/index.style.tsx
index e039c3e..0e75b49 100644
--- a/src/pages/production/option-selector/index.style.tsx
+++ b/src/pages/production/option-selector/index.style.tsx
@@ -5,11 +5,19 @@ interface ContainerProps {
 }
 
 export const Container = styled.div<ContainerProps>`
-  height: 230px;
-  background-color: #cdd1d9;
   display: flex;
+  justify-content: center;
+  flex-direction: column;
+  height: ${(props) => {
+    if (props.type === 'circle') {
+      return '300px';
+    } else {
+      return '230px';
+    }
+  }};
+  background-color: #cdd1d9;
   align-items: center;
-  gap: 50px;
+  gap: 20px;
   padding-left: 50px;
   border-radius: ${(props) => {
     if (props.type === 'circle') {
@@ -18,4 +26,16 @@ export const Container = styled.div<ContainerProps>`
       return 'none';
     }
   }};
+  .item_group {
+    display: flex;
+    flex-direction: row;
+    gap: 50px;
+  }
+`;
+
+export const Title = styled.div`
+  width: 100%;
+  text-align: left;
+  font-size: 30px;
+  font-weight: 600;
 `;
diff --git a/src/pages/production/option-selector/index.tsx b/src/pages/production/option-selector/index.tsx
index 4e51951..7763ac3 100644
--- a/src/pages/production/option-selector/index.tsx
+++ b/src/pages/production/option-selector/index.tsx
@@ -1,47 +1,72 @@
-import { AccessoryData } from '@api/accessory.types';
-import { ColorData } from '@api/color.types';
-import { FontData } from '@api/font.types';
-import { PatternData } from '@api/pattern.types';
-import { WheelData } from '@api/wheel.types';
-import { Container } from './index.style';
+import { Container, Title } from './index.style';
 import Item from './item';
 import { useRecoilState } from 'recoil';
 import { selectedPatternIdState } from '@context/pattern';
-import { useSearchParams } from 'react-router-dom';
 import { selectedWheelIdState } from '@context/wheel';
+import useCustomData from 'hooks/useCustomData';
+import { selectedFontIdState } from '@context/font';
+import { selectedColorIdState } from '@context/color';
 
 interface OptionSelectorProps {
-  type: 'square' | 'circle';
+  shape: 'square' | 'circle';
   name?: string;
-  data: PatternData[] | WheelData[] | FontData[] | AccessoryData[] | ColorData[];
+  data: 'pattern' | 'wheel' | 'font' | 'color' | 'accessory';
 }
 
 function OptionSelector(props: OptionSelectorProps) {
-  const [searchParams] = useSearchParams();
   const [, setSelectedPattern] = useRecoilState(selectedPatternIdState);
   const [, setSelectedWheel] = useRecoilState(selectedWheelIdState);
-  const step: number = Number(searchParams.get('step'));
+  const [, setSelectedFont] = useRecoilState(selectedFontIdState);
+  const [, setSelectedColor] = useRecoilState(selectedColorIdState);
+  const data = getData(props.data);
 
   return (
-    <Container className="option_selector" type={props.type}>
-      {props.data.map((item, index) => (
-        <Item
-          id={index}
-          key={index}
-          name={item.name}
-          imageSrc={item.imageUrl}
-          onClick={() => {
-            {
-              step === 0 && setSelectedPattern(index);
-            }
-            {
-              step === 1 && setSelectedWheel(index);
-            }
-          }}
-        />
-      ))}
+    <Container className="option_selector" type={props.shape}>
+      {props.data === 'font' ? <Title className="title">폰트</Title> : null}
+      {props.data === 'color' ? <Title className="title">색상</Title> : null}
+      <div className="item_group">
+        {data.map((item, index) => (
+          <Item
+            id={index}
+            data={props.data}
+            key={index}
+            name={item.name}
+            imageSrc={item.imageUrl}
+            onClick={() => {
+              {
+                props.data === 'pattern' && setSelectedPattern(index);
+              }
+              {
+                props.data === 'wheel' && setSelectedWheel(index);
+              }
+              {
+                props.data === 'font' && setSelectedFont(index);
+              }
+              {
+                props.data === 'color' && setSelectedColor(index);
+              }
+            }}
+          />
+        ))}
+      </div>
     </Container>
   );
 }
 
+function getData(type: 'pattern' | 'wheel' | 'font' | 'color' | 'accessory') {
+  const { pattern, wheel, font, color, accessory } = useCustomData();
+  switch (type) {
+    case 'pattern':
+      return pattern;
+    case 'wheel':
+      return wheel;
+    case 'font':
+      return font;
+    case 'color':
+      return color;
+    case 'accessory':
+      return accessory;
+  }
+}
+
 export default OptionSelector;
diff --git a/src/pages/production/option-selector/item/index.style.tsx b/src/pages/production/option-selector/item/index.style.tsx
index e3ab134..567d320 100644
--- a/src/pages/production/option-selector/item/index.style.tsx
+++ b/src/pages/production/option-selector/item/index.style.tsx
@@ -1,5 +1,9 @@
 import styled from 'styled-components';
 
+interface ItemImageProps {
+  type?: 'square' | 'circle';
+}
+
 export const Container = styled.div`
   background-color: rgba(255, 255, 255, 0);
   cursor: pointer;
@@ -8,10 +12,40 @@ export const Container = styled.div`
   }
 `;
 
-export const ItemImage = styled.img`
-  border: 1px solid #000000;
-  width: 120px;
-  height: 120px;
+export const ItemImage = styled.img<ItemImageProps>`
+  border: ${(props) => {
+    if (props.type === 'circle') {
+      return 'none';
+    } else {
+      return '1px solid #000000;';
+    }
+  }};
+  border-radius: ${(props) => {
+    if (props.type === 'circle') {
+      return '50%';
+    } else {
+      return 'none;';
+    }
+  }};
+  width: ${(props) => {
+    if (props.type === 'circle') {
+      return '80px';
+    } else {
+      return '120px;';
+    }
+  }};
+  height: ${(props) => {
+    if (props.type === 'circle') {
+      return '80px';
+    } else {
+      return '120px;';
+    }
+  }};
+  margin: ${(props) => {
+    if (props.type === 'circle') {
+      return '15px';
+    }
+  }};
 `;
 
 export const ItemName = styled.p`
diff --git a/src/pages/production/option-selector/item/index.tsx b/src/pages/production/option-selector/item/index.tsx
index 88001e6..8e22cd0 100644
--- a/src/pages/production/option-selector/item/index.tsx
+++ b/src/pages/production/option-selector/item/index.tsx
@@ -2,29 +2,41 @@ import { useRecoilState } from 'recoil';
 import { Container, ItemImage, ItemName } from './index.style';
 import { selectedPatternIdState } from '@context/pattern';
 import { selectedWheelIdState } from '@context/wheel';
-import { useSearchParams } from 'react-router-dom';
+import { selectedColorIdState } from '@context/color';
+import { selectedFontIdState } from '@context/font';
 
 interface ItemProps {
   id: number;
+  data: 'pattern' | 'wheel' | 'font' | 'color' | 'accessory';
   name: string;
   imageSrc: string;
   onClick?: React.MouseEventHandler<HTMLDivElement>;
 }
 
 function Item(props: ItemProps) {
-  const [searchParams] = useSearchParams();
   const [selectedPattern] = useRecoilState(selectedPatternIdState);
   const [selectedWheel] = useRecoilState(selectedWheelIdState);
-  const step: number = Number(searchParams.get('step'));
+  const [selectedFont] = useRecoilState(selectedFontIdState);
+  const [selectedColor] = useRecoilState(selectedColorIdState);
 
   return (
     <Container className="item_cntr" onClick={props.onClick}>
-      {step === 0 && (
+      {props.data === 'pattern' && (
         <ItemImage className={`item_image ${selectedPattern === props.id ? 'selected' : ''}`} src={props.imageSrc} />
       )}
-      {step === 1 && (
+      {props.data === 'wheel' && (
         <ItemImage className={`item_image ${selectedWheel === props.id ? 'selected' : ''}`} src={props.imageSrc} />
       )}
+      {props.data === 'font' && (
+        <ItemImage className={`item_image ${selectedFont === props.id ? 'selected' : ''}`} src={props.imageSrc} />
+      )}
+      {props.data === 'color' && (
+        <ItemImage
+          className={`item_image ${selectedColor === props.id ? 'selected' : ''}`}
+          src={props.imageSrc}
+          type="circle"
+        />
+      )}
       <ItemName className="item_name">{props.name}</ItemName>
     </Container>
   );

From c82b2c2f0983f28c5acd757f11d41117ea99d948 Mon Sep 17 00:00:00 2001
From: Jinwoo Lee <binaryWooo@gmail.com>
Date: Thu, 8 Feb 2024 06:24:44 +0900
Subject: [PATCH 5/8] =?UTF-8?q?fix:=20=EC=B8=A1=EB=A9=B4=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=84=A0=ED=83=9D=EC=97=90=20=EB=94=B0?=
 =?UTF-8?q?=EB=A5=B8=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20css=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20#23?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../production/button-group/index.style.tsx   |  10 +-
 src/pages/production/button-group/index.tsx   |   3 +-
 src/pages/production/content/index.style.tsx  |   7 +-
 src/pages/production/content/index.tsx        |  16 +--
 src/pages/production/index.style.tsx          |  26 ++++-
 src/pages/production/index.tsx                | 104 ++++++++++--------
 .../option-selector/index.style.tsx           |  17 ++-
 .../production/option-selector/index.tsx      |   1 +
 .../option-selector/item/index.style.tsx      |   2 +-
 9 files changed, 117 insertions(+), 69 deletions(-)

diff --git a/src/pages/production/button-group/index.style.tsx b/src/pages/production/button-group/index.style.tsx
index 27b8a66..6cafe4b 100644
--- a/src/pages/production/button-group/index.style.tsx
+++ b/src/pages/production/button-group/index.style.tsx
@@ -1,6 +1,10 @@
 import styled from 'styled-components';
 
-export const Container = styled.div`
+interface ContainerProps {
+  position?: 'default' | 'absolute';
+}
+
+export const Container = styled.div<ContainerProps>`
   background-color: #cdd1d9;
   width: 100%;
   height: 100%;
@@ -8,4 +12,8 @@ export const Container = styled.div`
   justify-content: center;
   align-items: center;
   gap: 5px;
+
+  ${({ position }) =>
+    position === 'absolute' &&
+    'position: absolute; bottom: 0; right: 0; height: 50px; background-color: #ffffff; width: 22%; margin: 30px;'}
 `;
diff --git a/src/pages/production/button-group/index.tsx b/src/pages/production/button-group/index.tsx
index 78eac67..209ee20 100644
--- a/src/pages/production/button-group/index.tsx
+++ b/src/pages/production/button-group/index.tsx
@@ -4,13 +4,14 @@ import { useNavigate } from 'react-router';
 
 interface ButtonGroupProps {
   step: number;
+  position?: 'default' | 'absolute';
 }
 
 function ButtonGroup(props: ButtonGroupProps) {
   const navigate = useNavigate();
 
   return (
-    <Container>
+    <Container className="button_group" position={props.position}>
       {props.step > 0 ? (
         <Button text="이전" inversion onClick={() => navigate(`/production?step=${props.step - 1}`)} />
       ) : (
diff --git a/src/pages/production/content/index.style.tsx b/src/pages/production/content/index.style.tsx
index b718999..8fef6b6 100644
--- a/src/pages/production/content/index.style.tsx
+++ b/src/pages/production/content/index.style.tsx
@@ -1,8 +1,13 @@
 import styled from 'styled-components';
 
-export const Container = styled.div`
+interface ContainerProps {
+  direction?: 'row' | 'column';
+}
+
+export const Container = styled.div<ContainerProps>`
   width: 100%;
   display: flex;
+  flex-direction: ${({ direction }) => direction || 'row'};
   justify-content: space-around;
   align-items: center;
   gap: 50px;
diff --git a/src/pages/production/content/index.tsx b/src/pages/production/content/index.tsx
index ec3fe2e..850d98e 100644
--- a/src/pages/production/content/index.tsx
+++ b/src/pages/production/content/index.tsx
@@ -1,23 +1,17 @@
 import Preview from '@pages/production/content/preview';
 import { Container } from './index.style';
-import Summary from '@pages/production/content/summary';
-import { PatternData } from '@api/pattern.types';
-import { WheelData } from '@api/wheel.types';
-import { AccessoryData } from '@api/accessory.types';
+// import Summary from '@pages/production/content/summary';
 
 interface ContentProps {
-  data: PatternData | WheelData | AccessoryData;
+  direction?: 'row' | 'column';
 }
 
 function Content(props: ContentProps) {
-  if (!props.data) {
-    return <div>Loading...</div>;
-  }
-
   return (
-    <Container className="content">
+    <Container className="content" direction={props.direction}>
       <Preview />
-      <Summary data={props.data} />
+      <div>Hi</div>
+      {/* <Summary data={props.data} /> */}
     </Container>
   );
 }
diff --git a/src/pages/production/index.style.tsx b/src/pages/production/index.style.tsx
index 70ee997..67363b3 100644
--- a/src/pages/production/index.style.tsx
+++ b/src/pages/production/index.style.tsx
@@ -4,12 +4,30 @@ export const Container = styled.div`
   height: 100vh;
   display: flex;
   flex-direction: column;
-  .content {
-    flex-grow: 1;
-  }
-  .footer {
+
+  .content_cntr {
+    height: 100vh;
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
+    .content {
+      flex-grow: 1;
+    }
+    .footer {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .side_cntr {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 50px;
+      }
+    }
+  }
+  .row {
+    flex-direction: row;
   }
 `;
diff --git a/src/pages/production/index.tsx b/src/pages/production/index.tsx
index 6490654..5322b8a 100644
--- a/src/pages/production/index.tsx
+++ b/src/pages/production/index.tsx
@@ -1,72 +1,82 @@
 import Header from '@components/header';
 import { Container } from './index.style';
-import { useEffect, useState } from 'react';
-import { PatternData } from '@api/pattern.types';
-import { Pattern } from '@api/pattern';
+// import { useEffect, useState } from 'react';
+// import { PatternData } from '@api/pattern.types';
+// import { Pattern } from '@api/pattern';
 import TabMenu from './tab-menu';
 import OptionSelector from './option-selector';
-import { selectedPatternIdState } from '@context/pattern';
+// import { selectedPatternIdState } from '@context/pattern';
 import Content from '@pages/production/content';
-import { useRecoilState } from 'recoil';
+// import { useRecoilState } from 'recoil';
 import ButtonGroup from './button-group';
 import { useSearchParams } from 'react-router-dom';
-import { WheelData } from '@api/wheel.types';
-import { FontData } from '@api/font.types';
-import { ColorData } from '@api/color.types';
-import { AccessoryData } from '@api/accessory.types';
-import { Wheel } from '@api/wheel';
-import { Font } from '@api/font';
-import { Color } from '@api/color';
-import { Accessory } from '@api/accessory';
-import { selectedWheelIdState } from '@context/wheel';
+// import { WheelData } from '@api/wheel.types';
+// import { FontData } from '@api/font.types';
+// import { ColorData } from '@api/color.types';
+// import { AccessoryData } from '@api/accessory.types';
+// import { Wheel } from '@api/wheel';
+// import { Font } from '@api/font';
+// import { Color } from '@api/color';
+// import { Accessory } from '@api/accessory';
+// import { selectedWheelIdState } from '@context/wheel';
+// import { selectedFontIdState } from '@context/font';
+// import { selectedColorIdState } from '@context/color';
 
 function CustomPattern() {
   const [searchParams] = useSearchParams();
-  const [patterns, setPatterns] = useState<PatternData[]>([]);
-  const [wheels, setWheels] = useState<WheelData[]>([]);
-  const [fonts, setFonts] = useState<FontData[]>([]);
-  const [colors, setColors] = useState<ColorData[]>([]);
-  const [accessories, setAccessories] = useState<AccessoryData[]>([]);
-  const [selectedPattern] = useRecoilState(selectedPatternIdState);
-  const [selectedWheel] = useRecoilState(selectedWheelIdState);
+  // const [patterns, setPatterns] = useState<PatternData[]>([]);
+  // const [wheels, setWheels] = useState<WheelData[]>([]);
+  // const [fonts, setFonts] = useState<FontData[]>([]);
+  // const [colors, setColors] = useState<ColorData[]>([]);
+  // const [accessories, setAccessories] = useState<AccessoryData[]>([]);
+  // const [selectedPattern] = useRecoilState(selectedPatternIdState);
+  // const [selectedWheel] = useRecoilState(selectedWheelIdState);
+  // const [selectedFont] = useRecoilState(selectedFontIdState);
+  // const [selectedColor] = useRecoilState(selectedColorIdState);
   const step: number = Number(searchParams.get('step'));
 
   if (step < 0 || step > 3) {
     return <div>올바르지 않은 접근입니다.</div>;
   }
 
-  useEffect(() => {
-    const getData = async () => {
-      const [patterns, wheels, fonts, colors, accessories] = await Promise.all([
-        Pattern.list(),
-        Wheel.list(),
-        Font.list(),
-        Color.list(),
-        Accessory.list(),
-      ]);
-      setPatterns(patterns);
-      setWheels(wheels);
-      setFonts(fonts);
-      setColors(colors);
-      setAccessories(accessories);
-    };
-    getData();
-  }, []);
+  // useEffect(() => {
+  //   const getData = async () => {
+  //     const [patterns, wheels, fonts, colors, accessories] = await Promise.all([
+  //       Pattern.list(),
+  //       Wheel.list(),
+  //       Font.list(),
+  //       Color.list(),
+  //       Accessory.list(),
+  //     ]);
+  //     setPatterns(patterns);
+  //     setWheels(wheels);
+  //     setFonts(fonts);
+  //     setColors(colors);
+  //     setAccessories(accessories);
+  //   };
+  //   getData();
+  // }, []);
 
   return (
     <>
       <Container>
         <Header />
         <TabMenu step={step} />
-        {step === 0 && <Content data={patterns[selectedPattern]} />}
-        {step === 1 && <Content data={wheels[selectedWheel]} />}
-        <div className="footer">
-          {step === 0 && <OptionSelector type="square" data={patterns} />}
-          {step === 1 && <OptionSelector type="square" data={wheels} />}
-          {step === 2 && <OptionSelector type="circle" data={fonts} />}
-          {step === 2 && <OptionSelector type="circle" data={colors} />}
-          {step === 3 && <OptionSelector type="square" data={accessories} />}
-          <ButtonGroup step={step} />
+        <div className={`content_cntr ${step === 2 && 'row'}`}>
+          {step !== 2 && <Content direction="row" />}
+          {step === 2 && <Content direction="column" />}
+          <div className="footer">
+            {step === 0 && <OptionSelector shape="square" data={'pattern'} />}
+            {step === 1 && <OptionSelector shape="square" data={'wheel'} />}
+            {step === 2 && (
+              <div className="side_cntr">
+                <OptionSelector shape="circle" data={'font'} />
+                <OptionSelector shape="circle" data={'color'} />
+              </div>
+            )}
+            {step === 3 && <OptionSelector shape="square" data={'accessory'} />}
+            {step === 2 ? <ButtonGroup step={step} position="absolute" /> : <ButtonGroup step={step} />}
+          </div>
         </div>
       </Container>
     </>
diff --git a/src/pages/production/option-selector/index.style.tsx b/src/pages/production/option-selector/index.style.tsx
index 0e75b49..c723c02 100644
--- a/src/pages/production/option-selector/index.style.tsx
+++ b/src/pages/production/option-selector/index.style.tsx
@@ -10,15 +10,18 @@ export const Container = styled.div<ContainerProps>`
   flex-direction: column;
   height: ${(props) => {
     if (props.type === 'circle') {
-      return '300px';
+      return '350px';
     } else {
       return '230px';
     }
   }};
   background-color: #cdd1d9;
   align-items: center;
-  gap: 20px;
-  padding-left: 50px;
+  gap: 10px;
+  padding: 0 50px;
+  margin-right: ${(props) => {
+    return props.type === 'circle' ? '50px' : '0px';
+  }};
   border-radius: ${(props) => {
     if (props.type === 'circle') {
       return '25px';
@@ -27,10 +30,18 @@ export const Container = styled.div<ContainerProps>`
     }
   }};
   .item_group {
+    text-align: left;
     display: flex;
     flex-direction: row;
     gap: 50px;
   }
+  .divider {
+    width: 100%;
+    height: 1px;
+    background-color: black;
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
 `;
 
 export const Title = styled.div`
diff --git a/src/pages/production/option-selector/index.tsx b/src/pages/production/option-selector/index.tsx
index 7763ac3..e15c5cc 100644
--- a/src/pages/production/option-selector/index.tsx
+++ b/src/pages/production/option-selector/index.tsx
@@ -24,6 +24,7 @@ function OptionSelector(props: OptionSelectorProps) {
     <Container className="option_selector" type={props.shape}>
       {props.data === 'font' ? <Title className="title">폰트</Title> : null}
       {props.data === 'color' ? <Title className="title">색상</Title> : null}
+      {(props.data === 'font' || props.data === 'color') && <div className="divider" />}
       <div className="item_group">
         {data.map((item, index) => (
           <Item
diff --git a/src/pages/production/option-selector/item/index.style.tsx b/src/pages/production/option-selector/item/index.style.tsx
index 567d320..a5df69d 100644
--- a/src/pages/production/option-selector/item/index.style.tsx
+++ b/src/pages/production/option-selector/item/index.style.tsx
@@ -43,7 +43,7 @@ export const ItemImage = styled.img<ItemImageProps>`
   }};
   margin: ${(props) => {
     if (props.type === 'circle') {
-      return '15px';
+      return '10px';
     }
   }};
 `;

From db8ffe126a05cea0137873c39068d1398c9e593c Mon Sep 17 00:00:00 2001
From: Jinwoo Lee <binaryWooo@gmail.com>
Date: Thu, 8 Feb 2024 06:59:40 +0900
Subject: [PATCH 6/8] =?UTF-8?q?refactor:=20=EC=B8=A1=EB=A9=B4=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=84=A0=ED=83=9D=EC=97=90=20=EB=94=B0?=
 =?UTF-8?q?=EB=A5=B8=20summary=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20cs?=
 =?UTF-8?q?s=20=EC=88=98=EC=A0=95=20#23?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/production/content/index.tsx        |  5 +-
 .../content/summary/index.style.tsx           |  6 ++
 .../production/content/summary/index.tsx      | 85 ++++++++++++++-----
 src/pages/production/index.tsx                |  1 +
 .../option-selector/item/index.style.tsx      |  2 +-
 5 files changed, 75 insertions(+), 24 deletions(-)

diff --git a/src/pages/production/content/index.tsx b/src/pages/production/content/index.tsx
index 850d98e..34125e4 100644
--- a/src/pages/production/content/index.tsx
+++ b/src/pages/production/content/index.tsx
@@ -1,6 +1,6 @@
 import Preview from '@pages/production/content/preview';
 import { Container } from './index.style';
-// import Summary from '@pages/production/content/summary';
+import Summary from '@pages/production/content/summary';
 
 interface ContentProps {
   direction?: 'row' | 'column';
@@ -10,8 +10,7 @@ function Content(props: ContentProps) {
   return (
     <Container className="content" direction={props.direction}>
       <Preview />
-      <div>Hi</div>
-      {/* <Summary data={props.data} /> */}
+      <Summary />
     </Container>
   );
 }
diff --git a/src/pages/production/content/summary/index.style.tsx b/src/pages/production/content/summary/index.style.tsx
index 7617d56..2ae1f5a 100644
--- a/src/pages/production/content/summary/index.style.tsx
+++ b/src/pages/production/content/summary/index.style.tsx
@@ -30,4 +30,10 @@ export const Container = styled.div`
   height: 450px;
   border-radius: 50px;
   background-color: #f1f6f9;
+  .font_example {
+    border: 1px solid #000000;
+    background-color: gray;
+    font-size: 90px;
+    font-weight: 600;
+  }
 `;
diff --git a/src/pages/production/content/summary/index.tsx b/src/pages/production/content/summary/index.tsx
index 3240fb1..577f8c7 100644
--- a/src/pages/production/content/summary/index.tsx
+++ b/src/pages/production/content/summary/index.tsx
@@ -1,29 +1,74 @@
+import useCustomData from '@hooks/useCustomData';
 import { Container, Explanation, Name, Price } from './index.style';
-import { PatternData } from '@api/pattern.types';
-import { WheelData } from '@api/wheel.types';
-import { AccessoryData } from '@api/accessory.types';
-
-interface SummaryProps {
-  data: PatternData | WheelData | AccessoryData;
-}
+import { useSearchParams } from 'react-router-dom';
+import { selectedPatternIdState } from '@context/pattern';
+import { useRecoilState } from 'recoil';
+import { selectedWheelIdState } from '@context/wheel';
+import { selectedFontIdState } from '@context/font';
+import { selectedColorIdState } from '@context/color';
 
 function formatCurrency(price: number) {
   return '+ ' + price.toLocaleString('ko-KR') + '원';
 }
 
-function Summary(props: SummaryProps) {
-  return (
-    <Container className="summary">
-      <div className="top">
-        <Name>{props.data.name}</Name>
-        <Price>{formatCurrency(props.data.price)}</Price>
-      </div>
-      <hr className="sep" />
-      <Explanation>
-        <p>{props.data.explanation}</p>
-      </Explanation>
-    </Container>
-  );
+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);
+
+  if (!pattern.length || !wheel.length || !font.length || !color.length || !accessory.length) {
+    return <div>Loading...</div>;
+  }
+
+  switch (step) {
+    case 0:
+      return (
+        <Container className="summary">
+          <div className="top">
+            <Name>{pattern[selectedPattern].name}</Name>
+            <Price>{formatCurrency(pattern[selectedPattern].price)}</Price>
+          </div>
+          <hr className="sep" />
+          <Explanation>
+            <p>{pattern[selectedPattern].explanation}</p>
+          </Explanation>
+        </Container>
+      );
+    case 1:
+      return (
+        <Container className="summary">
+          <div className="top">
+            <Name>{wheel[selectedWheel].name}</Name>
+            <Price>{formatCurrency(wheel[selectedWheel].price)}</Price>
+          </div>
+          <hr className="sep" />
+          <Explanation>
+            <p>{wheel[selectedWheel].explanation}</p>
+          </Explanation>
+        </Container>
+      );
+    case 2:
+      return (
+        <Container className="summary">
+          <div className="top">
+            <Name>{`${font[selectedFont].name}/${color[selectedColor].name}`}</Name>
+            <Price>{formatCurrency(font[selectedFont].price)}</Price>
+          </div>
+          <hr className="sep" />
+          <Explanation>
+            <p className="font_example" style={{ color: color[selectedColor].name }}>
+              Outfit Of Tire
+            </p>
+          </Explanation>
+        </Container>
+      );
+    default:
+      return <div>Error...</div>;
+  }
 }
 
 export default Summary;
diff --git a/src/pages/production/index.tsx b/src/pages/production/index.tsx
index 5322b8a..a9e21b7 100644
--- a/src/pages/production/index.tsx
+++ b/src/pages/production/index.tsx
@@ -72,6 +72,7 @@ function CustomPattern() {
               <div className="side_cntr">
                 <OptionSelector shape="circle" data={'font'} />
                 <OptionSelector shape="circle" data={'color'} />
+                <div>&nbsp;</div>
               </div>
             )}
             {step === 3 && <OptionSelector shape="square" data={'accessory'} />}
diff --git a/src/pages/production/option-selector/item/index.style.tsx b/src/pages/production/option-selector/item/index.style.tsx
index a5df69d..56a6e90 100644
--- a/src/pages/production/option-selector/item/index.style.tsx
+++ b/src/pages/production/option-selector/item/index.style.tsx
@@ -43,7 +43,7 @@ export const ItemImage = styled.img<ItemImageProps>`
   }};
   margin: ${(props) => {
     if (props.type === 'circle') {
-      return '10px';
+      return '10px 18px';
     }
   }};
 `;

From 4ec7a695ca6e654a57627e9383b705995117331b Mon Sep 17 00:00:00 2001
From: Jinwoo Lee <binaryWooo@gmail.com>
Date: Thu, 8 Feb 2024 07:05:08 +0900
Subject: [PATCH 7/8] =?UTF-8?q?fix:=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0=20=EB=B0=8F=20css=20=EC=88=98=EC=A0=95=20#23?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/production/index.tsx                | 43 -------------------
 .../option-selector/index.style.tsx           |  2 +-
 2 files changed, 1 insertion(+), 44 deletions(-)

diff --git a/src/pages/production/index.tsx b/src/pages/production/index.tsx
index a9e21b7..4b33303 100644
--- a/src/pages/production/index.tsx
+++ b/src/pages/production/index.tsx
@@ -1,62 +1,19 @@
 import Header from '@components/header';
 import { Container } from './index.style';
-// import { useEffect, useState } from 'react';
-// import { PatternData } from '@api/pattern.types';
-// import { Pattern } from '@api/pattern';
 import TabMenu from './tab-menu';
 import OptionSelector from './option-selector';
-// import { selectedPatternIdState } from '@context/pattern';
 import Content from '@pages/production/content';
-// import { useRecoilState } from 'recoil';
 import ButtonGroup from './button-group';
 import { useSearchParams } from 'react-router-dom';
-// import { WheelData } from '@api/wheel.types';
-// import { FontData } from '@api/font.types';
-// import { ColorData } from '@api/color.types';
-// import { AccessoryData } from '@api/accessory.types';
-// import { Wheel } from '@api/wheel';
-// import { Font } from '@api/font';
-// import { Color } from '@api/color';
-// import { Accessory } from '@api/accessory';
-// import { selectedWheelIdState } from '@context/wheel';
-// import { selectedFontIdState } from '@context/font';
-// import { selectedColorIdState } from '@context/color';
 
 function CustomPattern() {
   const [searchParams] = useSearchParams();
-  // const [patterns, setPatterns] = useState<PatternData[]>([]);
-  // const [wheels, setWheels] = useState<WheelData[]>([]);
-  // const [fonts, setFonts] = useState<FontData[]>([]);
-  // const [colors, setColors] = useState<ColorData[]>([]);
-  // const [accessories, setAccessories] = useState<AccessoryData[]>([]);
-  // const [selectedPattern] = useRecoilState(selectedPatternIdState);
-  // const [selectedWheel] = useRecoilState(selectedWheelIdState);
-  // const [selectedFont] = useRecoilState(selectedFontIdState);
-  // const [selectedColor] = useRecoilState(selectedColorIdState);
   const step: number = Number(searchParams.get('step'));
 
   if (step < 0 || step > 3) {
     return <div>올바르지 않은 접근입니다.</div>;
   }
 
-  // useEffect(() => {
-  //   const getData = async () => {
-  //     const [patterns, wheels, fonts, colors, accessories] = await Promise.all([
-  //       Pattern.list(),
-  //       Wheel.list(),
-  //       Font.list(),
-  //       Color.list(),
-  //       Accessory.list(),
-  //     ]);
-  //     setPatterns(patterns);
-  //     setWheels(wheels);
-  //     setFonts(fonts);
-  //     setColors(colors);
-  //     setAccessories(accessories);
-  //   };
-  //   getData();
-  // }, []);
-
   return (
     <>
       <Container>
diff --git a/src/pages/production/option-selector/index.style.tsx b/src/pages/production/option-selector/index.style.tsx
index c723c02..0ae787f 100644
--- a/src/pages/production/option-selector/index.style.tsx
+++ b/src/pages/production/option-selector/index.style.tsx
@@ -10,7 +10,7 @@ export const Container = styled.div<ContainerProps>`
   flex-direction: column;
   height: ${(props) => {
     if (props.type === 'circle') {
-      return '350px';
+      return '300px';
     } else {
       return '230px';
     }

From 31d992de5264b968de914d2b35860eb999840bbf Mon Sep 17 00:00:00 2001
From: Jinwoo Lee <binaryWooo@gmail.com>
Date: Thu, 8 Feb 2024 07:14:49 +0900
Subject: [PATCH 8/8] =?UTF-8?q?fix:=20=ED=8F=B0=ED=8A=B8=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=20=EC=8B=9C=20summary=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=EC=97=90=20=EB=B0=98=EC=98=81=EB=90=98=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EC=88=98=EC=A0=95=20#23?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/production/content/summary/index.style.tsx | 2 +-
 src/pages/production/content/summary/index.tsx       | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/pages/production/content/summary/index.style.tsx b/src/pages/production/content/summary/index.style.tsx
index 2ae1f5a..eac797a 100644
--- a/src/pages/production/content/summary/index.style.tsx
+++ b/src/pages/production/content/summary/index.style.tsx
@@ -33,7 +33,7 @@ export const Container = styled.div`
   .font_example {
     border: 1px solid #000000;
     background-color: gray;
-    font-size: 90px;
+    font-size: 70px;
     font-weight: 600;
   }
 `;
diff --git a/src/pages/production/content/summary/index.tsx b/src/pages/production/content/summary/index.tsx
index 577f8c7..b16f76e 100644
--- a/src/pages/production/content/summary/index.tsx
+++ b/src/pages/production/content/summary/index.tsx
@@ -60,7 +60,10 @@ function Summary() {
           </div>
           <hr className="sep" />
           <Explanation>
-            <p className="font_example" style={{ color: color[selectedColor].name }}>
+            <p
+              className="font_example"
+              style={{ color: color[selectedColor].name, fontFamily: font[selectedFont].name }}
+            >
               Outfit Of Tire
             </p>
           </Explanation>