From 45324155df6d38ba810ec49b7d0bcf33c60c9aaa Mon Sep 17 00:00:00 2001 From: yungblud Date: Tue, 16 Jan 2024 23:06:53 +0900 Subject: [PATCH] feat: implemented accounts-ui --- packages/accounts-ui/package.json | 8 +-- packages/accounts-ui/src/LoginModal.tsx | 43 +++-------- packages/store-client/components/Header.tsx | 2 +- .../store-client/components/LayoutWrapper.tsx | 15 ++-- .../store-client/components/LoginModal.tsx | 71 ------------------- packages/store-client/package.json | 3 +- .../store-client/stores/loginModalStore.ts | 13 ++++ yarn.lock | 61 +--------------- 8 files changed, 42 insertions(+), 174 deletions(-) delete mode 100644 packages/store-client/components/LoginModal.tsx create mode 100644 packages/store-client/stores/loginModalStore.ts diff --git a/packages/accounts-ui/package.json b/packages/accounts-ui/package.json index 832faaa..4655a48 100644 --- a/packages/accounts-ui/package.json +++ b/packages/accounts-ui/package.json @@ -22,10 +22,8 @@ }, "peerDependencies": { "@emotion/styled": "^11.11.0", - "next-auth": "^4.24.5", "react": "^18.2.0", - "react-dom": "^18.2.0", - "zustand": "^4.4.7" + "react-dom": "^18.2.0" }, "devDependencies": { "@emotion/styled": "^11.11.0", @@ -39,11 +37,9 @@ "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", - "next-auth": "^4.24.5", "prettier": "^2.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", - "typescript": "^5.3.3", - "zustand": "^4.4.7" + "typescript": "^5.3.3" } } diff --git a/packages/accounts-ui/src/LoginModal.tsx b/packages/accounts-ui/src/LoginModal.tsx index 58937be..bbabbcd 100644 --- a/packages/accounts-ui/src/LoginModal.tsx +++ b/packages/accounts-ui/src/LoginModal.tsx @@ -1,27 +1,11 @@ -/* eslint-disable no-undef */ - 'use client' import styled from '@emotion/styled' -import { create } from 'zustand' -import { MouseEventHandler, useCallback, useRef } from 'react' -import { signIn } from 'next-auth/react' +import { MouseEventHandler, useRef } from 'react' import Modal from './Modal' import ModalPortal from './ModalPortal' import Button from './Button' -type LoginModalStore = { - isOpen: boolean - open: () => void - close: () => void -} - -export const useLoginModalStore = create((set) => ({ - isOpen: false, - open: () => set(() => ({ isOpen: true })), - close: () => set(() => ({ isOpen: false })), -})) - const CustomModal = styled(Modal.Container)` width: 350px; display: flex; @@ -36,23 +20,18 @@ const ModalTitle = styled.h2` font-size: 18px; ` -export default function LoginModal() { - const { isOpen, close } = useLoginModalStore() +interface Props { + isOpen?: boolean + onClickGoogleLogin?: () => Promise + onClickBackground?: MouseEventHandler +} +export default function LoginModal({ + isOpen = false, + onClickGoogleLogin, + onClickBackground, +}: Props) { const modalBackgroundRef = useRef(null) - const onClickBackground = useCallback>( - (e) => { - if (modalBackgroundRef.current?.isEqualNode(e.target as Node)) { - close() - } - }, - [] - ) - - const onClickGoogleLogin = useCallback(async () => { - await signIn('google') - }, []) - return ( isOpen && ( diff --git a/packages/store-client/components/Header.tsx b/packages/store-client/components/Header.tsx index d09aa90..1f0ce65 100644 --- a/packages/store-client/components/Header.tsx +++ b/packages/store-client/components/Header.tsx @@ -5,7 +5,7 @@ import Link from 'next/link' import { signOut, useSession } from 'next-auth/react' import { useCallback } from 'react' import Button from './Button' -import { useLoginModalStore } from './LoginModal' +import { useLoginModalStore } from '@/stores/loginModalStore' const Container = styled.div` width: 100%; diff --git a/packages/store-client/components/LayoutWrapper.tsx b/packages/store-client/components/LayoutWrapper.tsx index 24a4b1a..51a99c3 100644 --- a/packages/store-client/components/LayoutWrapper.tsx +++ b/packages/store-client/components/LayoutWrapper.tsx @@ -3,11 +3,12 @@ import { PropsWithChildren } from 'react' import styled from '@emotion/styled' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' -import { SessionProvider } from 'next-auth/react' +import { SessionProvider, signIn } from 'next-auth/react' import { Session } from 'next-auth/types' +import { LoginModal } from '@coldsurfers/accounts-ui' import Header from './Header' import Footer from './Footer' -import LoginModal from './LoginModal' +import { useLoginModalStore } from '@/stores/loginModalStore' const Container = styled.div` display: flex; @@ -24,12 +25,13 @@ const ChildrenWrapper = styled.div` export const queryClient = new QueryClient({}) -export default async function LayoutWrapper({ +export default function LayoutWrapper({ children, session, }: PropsWithChildren<{ session?: Session | null }>) { + const { isOpen, close } = useLoginModalStore() return ( @@ -37,7 +39,12 @@ export default async function LayoutWrapper({
{children}