-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
c27bb85
commit af92d3c
Showing
10 changed files
with
123 additions
and
139 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import { ChakraProvider } from '@chakra-ui/react' | ||
| import { createContext, useContext, useRef } from 'react' | ||
|
|
||
| import { ShadowRootWrapper } from './ShadowRootWrapper' | ||
| import { customTheme } from '@/constants/customTheme' | ||
|
|
||
| type Props = { | ||
| children: React.ReactNode | ||
| } | ||
|
|
||
| export function ShadowChakraProvider({ children }: Props) { | ||
| const rootRef = useRef<HTMLDivElement>(null) | ||
|
|
||
| return ( | ||
| <ShadowRootWrapper> | ||
| <ChakraProvider cssVarsRoot=":host,:root" theme={customTheme}> | ||
| <div ref={rootRef}> | ||
| <RootRefContext.Provider value={rootRef}>{children}</RootRefContext.Provider> | ||
| </div> | ||
| </ChakraProvider> | ||
| </ShadowRootWrapper> | ||
| ) | ||
| } | ||
|
|
||
| const RootRefContext = createContext<React.RefObject<HTMLElement>>(null) | ||
|
|
||
| export const useRootRefContext = () => { | ||
| return useContext(RootRefContext) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import createCache from '@emotion/cache' | ||
| import { CacheProvider, EmotionCache } from '@emotion/react' | ||
| import { useEffect, useRef, useState } from 'react' | ||
| import root from 'react-shadow/emotion' | ||
|
|
||
| type Props = { | ||
| children: React.ReactNode | ||
| } | ||
|
|
||
| export function ShadowRootWrapper({ children }: Props) { | ||
| const shadowRef = useRef<HTMLElement>(null) | ||
|
|
||
| const [emotionCache, setEmotionCache] = useState<EmotionCache | null>(null) | ||
|
|
||
| useEffect(() => { | ||
| if (!shadowRef.current?.shadowRoot) return | ||
|
|
||
| const cache = createCache({ | ||
| key: 'shadow', | ||
| container: shadowRef.current.shadowRoot, | ||
| }) | ||
|
|
||
| setEmotionCache(cache) | ||
| }, []) | ||
|
|
||
| return ( | ||
| <root.div ref={shadowRef}> | ||
| <CacheProvider value={emotionCache}>{emotionCache ? children : null}</CacheProvider> | ||
| </root.div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { ThemeConfig, extendTheme } from '@chakra-ui/react' | ||
| import { mode, type StyleFunctionProps } from '@chakra-ui/theme-tools' | ||
|
|
||
| const config: ThemeConfig = { | ||
| initialColorMode: 'light', | ||
| useSystemColorMode: true, | ||
| } | ||
|
|
||
| export const customTheme = extendTheme({ | ||
| config, | ||
| components: { | ||
| Text: { | ||
| baseStyle: (props: StyleFunctionProps) => ({ | ||
| color: mode('gray.700', 'gray.200')(props), | ||
| margin: 0, | ||
| padding: 0, | ||
| }), | ||
| }, | ||
| Divider: { | ||
| baseStyle: (props: StyleFunctionProps) => ({ | ||
| borderColor: mode('gray.200', 'gray.700')(props), | ||
| }), | ||
| }, | ||
| }, | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,56 +1,28 @@ | ||
| import { ThemeProvider, theme, CSSReset, Box } from '@chakra-ui/react' | ||
| import createCache from '@emotion/cache' | ||
| import { CacheProvider, EmotionCache } from '@emotion/react' | ||
| import { createContext, useContext, useEffect, useRef, useState } from 'react' | ||
| import root from 'react-shadow/emotion' | ||
| import { useColorMode } from '@chakra-ui/react' | ||
| import { useEffect } from 'react' | ||
|
|
||
| import { ShadowChakraProvider, useRootRefContext } from '@/components/ShadowChakraProvider' | ||
| import Trigger from '@/components/Trigger' | ||
|
|
||
| const ShadowContext = createContext<React.RefObject<HTMLElement>>(null) | ||
|
|
||
| export const useShadowContext = () => { | ||
| return useContext(ShadowContext) | ||
| } | ||
|
|
||
| export default function App() { | ||
| const shadowRef = useRef<HTMLElement>(null) | ||
| const rootRef = useRef<HTMLDivElement>(null) | ||
| const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null) | ||
| const [emotionCache, setEmotionCache] = useState<EmotionCache | null>(null) | ||
|
|
||
| useEffect(() => { | ||
| if (!shadowRoot) return | ||
|
|
||
| const cache = createCache({ | ||
| key: 'shadow', | ||
| container: shadowRoot, | ||
| }) | ||
| return ( | ||
| <ShadowChakraProvider> | ||
| <Trigger /> | ||
| <ColorSetting /> | ||
| </ShadowChakraProvider> | ||
| ) | ||
| } | ||
|
|
||
| setEmotionCache(cache) | ||
| }, [shadowRoot]) | ||
| const ColorSetting = () => { | ||
| const { colorMode } = useColorMode() | ||
| const rootRef = useRootRefContext() | ||
|
|
||
| useEffect(() => { | ||
| if (!shadowRef.current.shadowRoot) return | ||
| const root = rootRef.current | ||
|
|
||
| setShadowRoot(shadowRef.current.shadowRoot) | ||
| }, [shadowRef.current?.shadowRoot]) | ||
| root.dataset.theme = colorMode | ||
| root.style.colorScheme = colorMode | ||
| }, [colorMode]) | ||
|
|
||
| return ( | ||
| <root.div ref={shadowRef}> | ||
| <CacheProvider value={emotionCache}> | ||
| <div id="shadow-root" ref={rootRef}> | ||
| {emotionCache && ( | ||
| <ThemeProvider cssVarsRoot=":host,:root" theme={theme}> | ||
| <CSSReset /> | ||
| <ShadowContext.Provider value={rootRef}> | ||
| <Box pos="fixed" w="100vw" display="flex" bottom="25px" justifyContent="center" zIndex="9999"> | ||
| <Trigger /> | ||
| </Box> | ||
| </ShadowContext.Provider> | ||
| </ThemeProvider> | ||
| )} | ||
| </div> | ||
| </CacheProvider> | ||
| </root.div> | ||
| ) | ||
| return null | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,43 +1,9 @@ | ||
| import { ChakraProvider, extendTheme, type ThemeConfig } from '@chakra-ui/react' | ||
| import { mode, type StyleFunctionProps } from '@chakra-ui/theme-tools' | ||
| import { createRoot } from 'react-dom/client' | ||
| import root from 'react-shadow' | ||
|
|
||
| import App from '@/pages/content/App' | ||
|
|
||
| const crxRoot = document.createElement('div') | ||
| crxRoot.id = 'crx-root' | ||
| document.body.append(crxRoot) | ||
|
|
||
| const config: ThemeConfig = { | ||
| initialColorMode: 'light', | ||
| useSystemColorMode: true, | ||
| } | ||
|
|
||
| const theme = extendTheme({ | ||
| config, | ||
| styles: { | ||
| global: { | ||
| body: { | ||
| // 사이버캠퍼스 기본 설정 적용 | ||
| fontSize: '14px', | ||
| lineHeight: '1.42857143', | ||
| color: '#333', | ||
| }, | ||
| '#back-top': { | ||
| opacity: 0, | ||
| }, | ||
| }, | ||
| }, | ||
| components: { | ||
| Text: { | ||
| baseStyle: (props: StyleFunctionProps) => ({ | ||
| color: mode('gray.700', 'gray.200')(props), | ||
| margin: 0, | ||
| padding: 0, | ||
| }), | ||
| }, | ||
| }, | ||
| }) | ||
|
|
||
| createRoot(crxRoot).render(<App />) |