Refactor/hammond

package.json

@@ -5,8 +5,8 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "prebuild": "mkdir -p dist",
-    "build": "yarn build:css && tsc -b && vite build",
+    "build:tsc": "tsc -p tsconfig.app.json --emitDeclarationOnly",
+    "build": "yarn build:css && vite build && yarn build:tsc",
     "lint": "eslint .",
     "preview": "vite preview",
     "test": "vitest --watch",
@@ -63,5 +63,6 @@
     "src"
   ],
   "main": "dist/index.js",
-  "types": "dist/index.d.ts"
+  "types": "dist/index.d.ts",
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/ReactPayments.tsx

@@ -0,0 +1,35 @@
+import { ModalProvider } from './contexts/ModalContext.tsx';
+import App from './App.tsx';
+import { CardProvider } from './contexts/CardContext.tsx';
+import { PropsWithChildren } from 'react';
+import { CardType } from './storage/cardType.ts';
+import Modal from './components/Modal.tsx';
+import { ModalOpen } from './components/ModalOpen.tsx';
+
+const ReactPaymentsContent = () => {
+  return <App />;
+};
+
+const ReactPaymentsRoot = ({
+  children,
+  onChange,
+}: PropsWithChildren<{
+  onChange: (value: CardType[]) => void;
+}>) => {
+  return (
+    <CardProvider onChange={onChange}>
+      <ModalProvider>
+        {children}
+      </ModalProvider>
+    </CardProvider>
+  );
+};
+
+const ReactPayments = {
+  Content: ReactPaymentsContent,
+  Root: ReactPaymentsRoot,
+  Modal: Modal,
+  ModalOpen: ModalOpen,
+};
+
+export default ReactPayments;

src/components/ModalOpen.tsx

@@ -0,0 +1,10 @@
+import { useModal } from '../contexts/hooks/useModal.tsx';
+import PaymentMain from '../pages/PaymentMain.tsx';
+import { cloneElement, PropsWithChildren } from 'react';
+
+// children에 onClick을 하면 모달이 열리는 버튼을 만들어주세요.
+
+export const ModalOpen = ({ children }: PropsWithChildren) => {
+  const { setModal } = useModal();
+  return cloneElement(children, { onClick: () => setModal(<PaymentMain />) });
+};

src/constants/color.ts

@@ -1,3 +1,4 @@
 export const colors = {
   mint: '#2ac1bc',
+  blue: '#09f',
 };

src/contexts/CardContext.tsx

@@ -1,30 +1,26 @@
 import { createContext, PropsWithChildren, useContext, useState } from 'react';
-import { createStorage } from '../storage/createStorage.ts';
 import { CardType } from '../storage/cardType.ts';
 
 const CardContext = createContext({
   Cards: [] as CardType[],
-  initCards: (): void => undefined,
   addCard: (_: CardType): void => undefined,
   removeCard: (_: string): void => undefined,
   getCard: (_: string): CardType | undefined => undefined,
 });
 
-const cardStorage = createStorage<CardType[]>('cards');
+// const cardStorage = createStorage<CardType[]>('cards');
 
 export const useCardContext = () => useContext(CardContext);
 
-export const CardProvider = ({ children }: PropsWithChildren) => {
-  const [Cards, setCards] = useState(() => cardStorage.get());
-
-  const initCards = () => {
-    const cards = cardStorage.get();
-    setCards(cards);
-  };
+export const CardProvider = ({
+  children,
+  onChange,
+}: PropsWithChildren<{ onChange: (value: CardType[]) => void }>) => {
+  const [Cards, setCards] = useState<CardType[]>([]);
 
   const updateCards = (newCards: CardType[]) => {
-    cardStorage.set(newCards);
     setCards(newCards);
+    onChange(newCards);
   };
 
   const getCard = (cardNumber: string) => {
@@ -57,7 +53,6 @@ export const CardProvider = ({ children }: PropsWithChildren) => {
 
   const contextValue = {
     Cards,
-    initCards,
     addCard,
     getCard,
     removeCard,

src/contexts/ModalContext.tsx

@@ -1,5 +1,4 @@
-import { createContext, useState, ReactNode, FC } from 'react';
-import Modal from '../components/Modal';
+import { createContext, FC, ReactNode, useState } from 'react';
 
 // Modal Context 타입 정의
 export interface ModalContextType {
@@ -52,7 +51,6 @@ export const ModalProvider: FC<{ children: ReactNode }> = ({ children }) => {
         historyBack,
       }}
     >
-      <Modal />
       {children}
     </ModalContext.Provider>
   );

src/index.tsx

@@ -1,15 +1,2 @@
-import { ModalProvider } from './contexts/ModalContext.tsx';
-import App from './App.tsx';
-import { CardProvider } from './contexts/CardContext.tsx';
-
-export const ReactPayments = () => {
-  return (
-    <CardProvider>
-      <ModalProvider>
-        <App />
-      </ModalProvider>
-    </CardProvider>
-  );
-};
-
-export default ReactPayments;
+export { default as ReactPayments } from './ReactPayments';
+export type * from './storage/cardType';

src/pages/PaymentMain.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useState, useLayoutEffect } from 'react';
+import { ReactNode, useState } from 'react';
 import { useModal } from '../contexts/hooks/useModal.tsx';
 import Carousel from '../components/Carousel';
 import Card from '../components/Card';
@@ -9,11 +9,7 @@ import { useCardContext } from '../contexts/CardContext.tsx';
 const PaymentMain = () => {
   const { setModal, closeModal } = useModal();
   const [isAgree, setIsAgree] = useState(false);
-  const { Cards, initCards } = useCardContext();
-
-  useLayoutEffect(() => {
-    initCards();
-  }, []);
+  const { Cards } = useCardContext();
 
   const purchaseHandler = () => {
     alert('결제가 완료되었습니다.');

src/stories/ReactPayments.stories.tsx

@@ -1,14 +1,16 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import ReactPayments from '../index';
+import { CardType, ReactPayments } from '../index';
+import { useEffect, useState } from 'react';
+import { colors } from '../constants/color';
 
 const meta = {
   title: 'Components/ReactPayments',
-  component: ReactPayments,
+  component: ReactPayments.Root,
   parameters: {
     layout: 'fullscreen',
   },
   tags: ['autodocs'],
-} satisfies Meta<typeof ReactPayments>;
+} satisfies Meta<typeof ReactPayments.Root>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -19,14 +21,60 @@ export const Default: Story = {
   },
 };
 
-export const MultipleComponents: Story = {
-  render: () => (
+const TestComponent = () => {
+  const [cards, setCards] = useState<CardType[]>([]);
+
+  useEffect(() => {
+    console.log('카드 목록이 수정되었습니다.', cards);
+  }, [cards]);
+
+  return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
-      <ReactPayments />
-      <ReactPayments />
-      <ReactPayments />
+      <ReactPayments.Root onChange={setCards}>
+        <ReactPayments.ModalOpen>
+          <button
+            style={{
+              backgroundColor: colors.mint,
+              padding: '8px',
+              color: 'white',
+              marginTop: '20px',
+              border: 'none',
+              borderRadius: '10px',
+              cursor: 'pointer',
+              width: '100px'
+            }}
+          >
+            모달 열기
+          </button>
+        </ReactPayments.ModalOpen>
+
+        <ReactPayments.ModalOpen>
+          <button
+            style={{
+              backgroundColor: colors.blue,
+              fontSize: "12px",
+              padding: '10px',
+              color: 'white',
+              marginLeft: '10px',
+              border: 'none',
+              borderRadius: '10px',
+              cursor: 'pointer',
+              width: '100px'
+            }}
+          >
+            모달 열기2
+          </button>
+        </ReactPayments.ModalOpen>
+
+        이것은 콘텐츠입니다.
+        <ReactPayments.Modal />
+      </ReactPayments.Root>
     </div>
-  ),
+  );
+};
+
+export const MultipleComponents: Story = {
+  render: () => <TestComponent />,
   parameters: {
     docs: {
       description: {

tsconfig.app.json

@@ -1,22 +1,22 @@
 {
   "compilerOptions": {
-    "declaration": true,
-    "declarationDir": "./dist/types",
-
-    "incremental": true,
+    "incremental": false,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "target": "ES2020",
     "useDefineForClassFields": true,
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
+    "outDir": "./dist",
+    "declarationDir": "./dist",
+    "declaration": true,
+    "emitDeclarationOnly": false,
 
     /* Bundler mode */
     "moduleResolution": "Bundler",
     "allowImportingTsExtensions": true,
     "isolatedModules": true,
     "moduleDetection": "force",
-    "noEmit": true,
     "jsx": "react-jsx",
 
     /* Linting */
@@ -25,5 +25,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"]
+  "include": ["src"],
+  "exclude": ["src/**/*.test.tsx", "src/**/*.stories.tsx"]
 }