on/off 토글 추가

manifest.ts

@@ -34,6 +34,7 @@ const manifest: chrome.runtime.ManifestV3 = {
       resources: [
         "assets/js/*.js",
         "assets/css/*.css",
+        "logo-dark.png",
         "icon-128.png",
         "icon-34.png",
       ],

package.json

@@ -19,8 +19,8 @@
   },
   "type": "module",
   "dependencies": {
-    "@chakra-ui/icons": "^2.0.17",
-    "@chakra-ui/react": "2.5.1",
+    "@chakra-ui/icons": "2.2.4",
+    "@chakra-ui/react": "2.10.4",
     "@emotion/cache": "11.10.5",
     "@emotion/react": "11.10.6",
     "@emotion/styled": "11.10.6",

src/pages/background/lib/storage/onOffStorage.ts

@@ -0,0 +1,21 @@
+import { ILocalStorage, LocalStorage } from "@src/chrome/localStorage";
+
+export class OnOffStorage {
+  private static KEY = "ON_OFF";
+  static storage: ILocalStorage = new LocalStorage();
+
+  static async getOnOff(): Promise<boolean> {
+    try {
+      const onOff = await this.storage.load(this.KEY);
+      return Boolean(onOff);
+    } catch {
+      await this.storage.save(this.KEY, false);
+      return false;
+    }
+  }
+
+  static async toggle() {
+    const onOff = await this.storage.load(this.KEY);
+    await this.storage.save(this.KEY, !onOff);
+  }
+}

src/pages/content/src/ContentScriptApp/DragGPT.tsx

@@ -17,6 +17,7 @@ import ChatText from "@src/shared/component/ChatText";
 import AssistantChat from "@src/shared/component/AssistantChat";
 import MessageBox from "@pages/content/src/ContentScriptApp/components/messageBox/MessageBox";
 import { t } from "@src/chrome/i18n";
+import { OnOffStorage } from "@pages/background/lib/storage/onOffStorage";
 
 const Container = styled.div`
   * {
@@ -74,6 +75,12 @@ export default function DragGPT() {
           onDelta: (chunk) => send("RECEIVE_ING", { data: chunk }),
           onFinish: () => send("RECEIVE_END"),
         }),
+      checkOnOffState: async () => {
+        const isOn = await OnOffStorage.getOnOff();
+        if (!isOn) {
+          throw new Error("Off");
+        }
+      },
     },
   });
 

src/pages/content/src/ContentScriptApp/xState/dragStateMachine.ts

@@ -37,6 +37,9 @@ type Services = {
   getGPTResponse: {
     data: { firstChunk: string };
   };
+  checkOnOffState: {
+    data: void;
+  };
 };
 
 const initialContext: Context = {
@@ -74,6 +77,12 @@ const dragStateMachine = createMachine(
       },
       request_button: {
         tags: "showRequestButton",
+        invoke: {
+          src: "checkOnOffState",
+          onError: {
+            target: "idle",
+          },
+        },
         on: {
           TEXT_SELECTED: [
             {

src/pages/content/src/ContentScriptApp/xState/dragStateMachine.typegen.ts

@@ -12,17 +12,22 @@ export interface Typegen0 {
       type: "error.platform.drag-state.loading:invocation[0]";
       data: unknown;
     };
+    "error.platform.drag-state.request_button:invocation[0]": {
+      type: "error.platform.drag-state.request_button:invocation[0]";
+      data: unknown;
+    };
     "xstate.init": { type: "xstate.init" };
     "xstate.stop": { type: "xstate.stop" };
   };
   invokeSrcNameMap: {
+    checkOnOffState: "done.invoke.drag-state.request_button:invocation[0]";
     getGPTResponse: "done.invoke.drag-state.loading:invocation[0]";
   };
   missingImplementations: {
     actions: "setPositionOnScreen";
     delays: never;
     guards: never;
-    services: "getGPTResponse";
+    services: "checkOnOffState" | "getGPTResponse";
   };
   eventsCausingActions: {
     addInitialResponseChat: "done.invoke.drag-state.loading:invocation[0]";
@@ -33,6 +38,7 @@ export interface Typegen0 {
       | "CLOSE_MESSAGE_BOX"
       | "RECEIVE_CANCEL"
       | "TEXT_SELECTED"
+      | "error.platform.drag-state.request_button:invocation[0]"
       | "xstate.init";
     setAnchorNodePosition: "REQUEST";
     setPositionOnScreen:
@@ -46,6 +52,7 @@ export interface Typegen0 {
     isValidTextSelectedEvent: "TEXT_SELECTED";
   };
   eventsCausingServices: {
+    checkOnOffState: "TEXT_SELECTED";
     getGPTResponse: "REQUEST";
   };
   matchesStates:

src/pages/options/src/App.tsx

@@ -7,7 +7,7 @@ import StyleProvider from "@src/shared/component/StyleProvider";
 const App: FC = () => {
   return (
     <FontProvider>
-      <StyleProvider isDark={true}>
+      <StyleProvider>
         {/*  TODO router */}
         <Suspense fallback={<Spinner size="lg" m={8} />}>
           <OptionMainPage />

src/pages/popup/App.tsx

@@ -3,7 +3,7 @@ import StyleProvider from "@src/shared/component/StyleProvider";
 
 export default function App() {
   return (
-    <StyleProvider isDark={false}>
+    <StyleProvider>
       <Popup />
     </StyleProvider>
   );

src/pages/popup/components/StyledButton.tsx

@@ -1,57 +1,4 @@
-import styled from "@emotion/styled";
 import { Button, ButtonProps } from "@chakra-ui/react";
-import { css } from "@emotion/react";
-
-const _StyledButton = styled(Button)`
-  position: relative;
-  cursor: pointer;
-  outline: none;
-  border: none;
-  border-radius: 4px;
-  padding: 4px 8px;
-  font-size: 12px;
-  line-height: 14px;
-  font-weight: bold;
-
-  ${(p) => {
-    return (
-      p.isDisabled &&
-      css`
-        cursor: not-allowed;
-
-        &:after {
-          content: "";
-          position: absolute;
-          top: 0;
-          left: 0;
-          bottom: 0;
-          right: 0;
-          background-color: rgba(255, 255, 255, 0.5);
-          width: 100%;
-          height: 100%;
-          border-radius: 4px;
-        }
-      `
-    );
-  }};
-  ${(p) => {
-    return (
-      p.isDisabled ||
-      css`
-        &:active {
-          transition: all ease-in-out 100ms;
-          transform: scale(0.95);
-        }
-        &:hover {
-          outline: solid 1px white;
-        }
-        &:focus {
-          outline: solid 1px white;
-        }
-      `
-    );
-  }}
-` as typeof Button;
 
 type StyledButtonProps = ButtonProps;
 

src/pages/popup/components/layout/MainLayout.tsx

@@ -1,8 +1,6 @@
 import React, { ReactNode } from "react";
-import { Heading } from "@chakra-ui/react";
 import styled from "@emotion/styled";
 import { COLORS } from "@src/constant/style";
-import { t } from "@src/chrome/i18n";
 
 const Container = styled.div`
   position: relative;
@@ -12,6 +10,7 @@ const Container = styled.div`
   min-height: 300px;
 
   display: flex;
+  gap: 8px;
   flex-direction: column;
   align-items: center;
 
@@ -31,9 +30,11 @@ type MainLayoutProps = {
 export default function MainLayout({ children }: MainLayoutProps) {
   return (
     <Container>
-      <Heading color="gray.50" pb={3} fontSize={18} fontWeight="bold">
-        {t("dragGPT")}
-      </Heading>
+      <img
+        width={160}
+        src={chrome.runtime.getURL("./logo-dark.png")}
+        alt="logo"
+      />
       {children}
     </Container>
   );

src/pages/popup/index.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
-import "@pages/popup/index.css";
 import App from "@pages/popup/App";
 import refreshOnUpdate from "virtual:reload-on-update-in-view";
 

src/pages/popup/pages/SlotListPage.tsx

@@ -1,4 +1,4 @@
-import { Button, HStack, Link, Text, VStack } from "@chakra-ui/react";
+import { Button, HStack, Link, Switch, Text, VStack } from "@chakra-ui/react";
 import { useMachine } from "@xstate/react";
 import slotListPageStateMachine from "@pages/popup/xState/slotListPageStateMachine";
 import SlotDetail from "@pages/popup/components/SlotDetail";
@@ -11,6 +11,8 @@ import SlotListItem from "@pages/popup/components/SlotListItem";
 import { COLORS } from "@src/constant/style";
 import { createNewChatGPTSlot } from "@src/shared/slot/createNewChatGPTSlot";
 import { t } from "@src/chrome/i18n";
+import { useEffect, useState } from "react";
+import { OnOffStorage } from "@pages/background/lib/storage/onOffStorage";
 
 const getAllSlotsFromBackground = async () => {
   return await sendMessageToBackgroundAsync({
@@ -133,6 +135,7 @@ export default function SlotListPage({
             >
               {t("slogListPage_showChatHistoryButtonText")}
             </Button>
+            <OnOffSwitch />
           </HStack>
           <HStack justifyContent="space-between" w="100%">
             <Text color={COLORS.WHITE} fontWeight="bold">
@@ -162,3 +165,28 @@ export default function SlotListPage({
     </>
   );
 }
+
+const OnOffSwitch = () => {
+  const [isOn, setIsOn] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    OnOffStorage.getOnOff().then((onOff) => {
+      setIsOn(onOff);
+    });
+  }, []);
+
+  if (isOn === null) {
+    return null;
+  }
+
+  return (
+    <Switch
+      isChecked={isOn}
+      onChange={() => {
+        OnOffStorage.toggle().then(() => {
+          setIsOn(!isOn);
+        });
+      }}
+    />
+  );
+};

src/shared/component/StyleProvider.tsx

@@ -1,34 +1,6 @@
 import { ReactNode } from "react";
-import {
-  ColorModeProvider,
-  CSSReset,
-  GlobalStyle,
-  theme,
-  ThemeProvider,
-} from "@chakra-ui/react";
+import { ChakraProvider } from "@chakra-ui/react";
 
-export default function StyleProvider({
-  children,
-  isDark,
-}: {
-  children: ReactNode;
-  isDark: boolean;
-}) {
-  return (
-    <ColorModeProvider
-      colorModeManager={{
-        type: "localStorage" as const,
-        get: () => (isDark ? "dark" : ("light" as const)),
-        set() {
-          return;
-        },
-      }}
-    >
-      <ThemeProvider theme={theme}>
-        <CSSReset />
-        <GlobalStyle />
-        {children}
-      </ThemeProvider>
-    </ColorModeProvider>
-  );
+export default function StyleProvider({ children }: { children: ReactNode }) {
+  return <ChakraProvider>{children}</ChakraProvider>;
 }