feat: store 형태 변경

YAPP-Github · Jan 3, 2024 · 9c410d1 · 9c410d1
1 parent db7b4a9
commit 9c410d1
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 23 deletions.
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
@@ -1,9 +1,9 @@
-import { useModal } from '@/src/stores/modalStore';
+import { useModalStore } from '@/src/stores/modalStore';
 
 import DeleteArticle from './components/DeleteArticle';
 
 const Modal = () => {
-  const { type } = useModal();
+  const { type } = useModalStore();
 
   if (type === 'deleteArticle') return <DeleteArticle />;
 

diff --git a/src/components/Modal/ModalContainer.tsx b/src/components/Modal/ModalContainer.tsx
@@ -1,7 +1,7 @@
 import type { PropsWithChildren } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 
-import { useModal } from '@/src/stores/modalStore';
+import { useModalStore } from '@/src/stores/modalStore';
 import { COLORS } from '@/src/styles/tokens';
 
 import * as styles from './style.css';
@@ -25,7 +25,7 @@ const ModalContainer = ({
   firstButtonProps,
   secondButtonProps,
 }: PropsWithChildren<ModalContainerProps>) => {
-  const { closeModal } = useModal();
+  const { closeModal } = useModalStore();
 
   const {
     text: firstButtonText = '취소',

diff --git a/src/components/Toast/Toast.stories.tsx b/src/components/Toast/Toast.stories.tsx
@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { TOAST_DURATION_TIME } from '@/src/models/toastModel';
-import { useToast } from '@/src/stores/toastStore';
+import { useToastStore } from '@/src/stores/toastStore';
 
 import Toast from './Toast';
 
@@ -23,7 +23,7 @@ type Story = StoryObj<typeof Toast>;
 
 export const Basic: Story = {
   render: function Render() {
-    const { showToast } = useToast();
+    const { showToast } = useToastStore();
 
     useEffect(() => {
       showToast({ message: '테스트', type: TOAST_DURATION_TIME.SHOW });
@@ -42,7 +42,7 @@ export const Basic: Story = {
 
 export const WithAction: Story = {
   render: function Render() {
-    const { showToast } = useToast();
+    const { showToast } = useToastStore();
 
     useEffect(() => {
       showToast({ message: '테스트', type: TOAST_DURATION_TIME.ACTION });

diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
@@ -1,11 +1,11 @@
 import { useEffect } from 'react';
 
-import { useToast } from '@/src/stores/toastStore';
+import { useToastStore } from '@/src/stores/toastStore';
 
 import * as styles from './style.css';
 
 const Toast = () => {
-  const { toastData, hideToast } = useToast();
+  const { toastData, hideToast } = useToastStore();
 
   const { message, type, isToastVisible } = toastData;
 

diff --git a/src/stores/modalStore.ts b/src/stores/modalStore.ts
@@ -19,13 +19,9 @@ export const modalStore = createStore<State & Action>((set) => ({
   closeModal: () => set({ type: 'no' }),
 }));
 
-const useModalStore = <T>(
-  selector: (state: State & Action) => T,
-  equals?: (a: T, b: T) => boolean,
-) => useStore(modalStore, selector, equals);
-
-export const useModal = () =>
-  useModalStore(
+export const useModalStore = () =>
+  useStore(
+    modalStore,
     (state) => ({
       type: state.type,
       openModal: state.openModal,

diff --git a/src/stores/toastStore.ts b/src/stores/toastStore.ts
@@ -39,13 +39,9 @@ export const toastStore = createStore<State & Action>((set, get) => ({
   },
 }));
 
-const useToastStore = <T>(
-  selector: (state: State & Action) => T,
-  equals?: (a: T, b: T) => boolean,
-) => useStore(toastStore, selector, equals);
-
-export const useToast = () =>
-  useToastStore(
+export const useToastStore = () =>
+  useStore(
+    toastStore,
     (state) => ({
       toastData: state.toastData,
       showToast: state.showToast,