⚡ hoc 를 통한 휴대번호 체크 (#73)

src/components/hoc/withPassword.tsx

@@ -0,0 +1,75 @@
+import React, { ComponentType, useEffect, useState } from 'react'
+import useGetUser from '@/hooks/useGetUser'
+import { useNavigate } from 'react-router-dom'
+import { ModalProvider, useModal } from '@jaewoong2/modal'
+import withAuth from './withAuth'
+
+type MessageProps = {
+  setStatusCancled: () => void
+  setStatusLoading: () => void
+}
+
+const Message = ({ setStatusCancled, setStatusLoading }: MessageProps) => {
+  useEffect(() => {
+    setStatusLoading()
+    return () => {
+      setStatusCancled()
+    }
+  }, [])
+
+  return <p className="text-[1rem]">휴대전화 번호를 등록 하셔야 합니다.</p>
+}
+
+const withPassword = (Component: ComponentType) => {
+  const Wrapper = <P extends {}>(props: P) => {
+    const navigate = useNavigate()
+    const { data: user } = useGetUser()
+    const [status, setStatus] = useState<'loading' | 'clicked' | 'cancled' | null>(null)
+
+    const { show, hide } = useModal('text', {
+      description: null,
+      header: null,
+      message: (
+        <Message
+          setStatusCancled={() => setStatus('cancled')}
+          setStatusLoading={() => setStatus('loading')}
+        />
+      ),
+      modalWidth: '350px',
+      buttonText: '등록하기',
+      buttonType: 'warn',
+      onClickButton: () => {
+        setStatus('clicked')
+        navigate('/configuration')
+        hide()
+      },
+    })
+
+    /* 권한 분기 */
+    useEffect(() => {
+      if (!user?.userPhone) {
+        show()
+      }
+    }, [user])
+
+    useEffect(() => {
+      if (status === 'cancled') {
+        navigate(-1)
+      }
+    }, [status])
+
+    return <Component {...props} />
+  }
+
+  const HOC = <P extends {}>(props: P) => {
+    return (
+      <ModalProvider>
+        <Wrapper {...props} />
+      </ModalProvider>
+    )
+  }
+
+  return withAuth(HOC)
+}
+
+export default withPassword

src/pages/Edit/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import withPassword from '@/components/hoc/withPassword'
 import CompanyEditContextProvider from './context/CompanyEditContextProvider'
 import EditRoutes from './components/blocks/EditRoutes'
 
@@ -10,4 +11,4 @@ const EditRoute = () => {
   )
 }
 
-export default EditRoute
+export default withPassword(EditRoute)

src/pages/Order/index.tsx

@@ -1,3 +1,5 @@
+import withPassword from '@/components/hoc/withPassword'
+import { ModalProvider } from '@jaewoong2/modal'
 import React from 'react'
 
 import { Route, Routes } from 'react-router-dom'
@@ -9,14 +11,16 @@ const OrderInit = React.lazy(() => import('./components/blocks/OrderInit'))
 
 const OrderRoute = () => {
   return (
-    <OrderContextProvider>
-      <Routes>
-        <Route path="" element={<OrderInit />} />
-        <Route path="answer" element={<Order />} />
-        <Route path="pickup" element={<Pickup />} />
-      </Routes>
-    </OrderContextProvider>
+    <ModalProvider>
+      <OrderContextProvider>
+        <Routes>
+          <Route path="" element={<OrderInit />} />
+          <Route path="answer" element={<Order />} />
+          <Route path="pickup" element={<Pickup />} />
+        </Routes>
+      </OrderContextProvider>
+    </ModalProvider>
   )
 }
 
-export default OrderRoute
+export default withPassword(OrderRoute)

src/pages/Orders/index.tsx

@@ -1,3 +1,4 @@
+import withPassword from '@/components/hoc/withPassword'
 import React from 'react'
 import { Route, Routes } from 'react-router-dom'
 
@@ -22,4 +23,4 @@ const OrdersRoute = () => {
   )
 }
 
-export default OrdersRoute
+export default withPassword(OrdersRoute)