Feat(extension): 익스텐션 ui 반영 및 바운더리 최적화 작업

apps/client/src/pages/onBoarding/components/funnel/step/FinalStep.tsx

@@ -4,7 +4,7 @@ import extImg from '/assets/onBoarding/icons/ext.svg';
 import pinImg from '/assets/onBoarding/icons/pin.svg';
 const FinalStep = () => {
   return (
-    <div className="flex h-full flex-col items-center">
+    <div className="flex h-full flex-col items-center px-[3.2rem]">
       <img src={dotori} className="mb-[1.2rem]" alt="dotori" />
       <p className="head2 text-font-black-1">Pinback에 오신 걸 환영해요</p>
       <p className="body2-m text-font-gray-3 mb-[1.4rem] mt-[0.8rem] text-center">

apps/extension/src/App.tsx

@@ -4,13 +4,20 @@ import MainPop from './pages/MainPop';
 import { useState, useEffect } from 'react';
 import { useGetArticleSaved } from '@apis/query/queries';
 import { usePageMeta } from './hooks/usePageMeta';
+import LogOutPop from './pages/LogOutPop';
 const App = () => {
   const { url } = usePageMeta();
   const { data: isSaved } = useGetArticleSaved(url);
 
   const [isDuplicatePop, setIsDuplicatePop] = useState(false);
   const [mainPopType, setMainPopType] = useState<'add' | 'edit'>('add');
+  const [isToken, setIsToken] = useState<boolean | null>(null);
 
+  useEffect(() => {
+    chrome.storage.local.get('token', (result) => {
+      setIsToken(!!result.token);
+    });
+  }, []);
   useEffect(() => {
     if (isSaved?.data) {
       setIsDuplicatePop(true);
@@ -28,13 +35,18 @@ const App = () => {
 
   return (
     <>
-      {isDuplicatePop ? (
-        <DuplicatePop
-          onLeftClick={handleDuplicateLeftClick}
-          onRightClick={handleDuplicateRightClick}
-        />
+      {/* <LogOutPop /> */}
+      {isToken ? (
+        isDuplicatePop ? (
+          <DuplicatePop
+            onLeftClick={handleDuplicateLeftClick}
+            onRightClick={handleDuplicateRightClick}
+          />
+        ) : (
+          <MainPop type={mainPopType} />
+        )
       ) : (
-        <MainPop type={mainPopType} savedData={isSaved?.data} />
+        <LogOutPop />
       )}
     </>
   );

apps/extension/src/hooks/usePageMeta.ts

@@ -47,7 +47,7 @@ export const usePageMeta = () => {
       //   // chrome-extension:// 은 내부 페이지로 취급하지 않음
 
       //   if (isInternalChromePage || !imageUrl?.title) {
-      //     window.close();
+      //
       //     return;
       //   }
       setMeta(newMeta);

apps/extension/src/pages/LogOutPop.tsx

@@ -0,0 +1,34 @@
+import { Icon } from '@pinback/design-system/icons';
+
+const LogOutPop = () => {
+  return (
+    <div className="bg-white-bg common-shadow flex h-[35.5rem] w-[31.2rem] flex-col items-center justify-center rounded-[1.2rem] px-[3.2rem] py-[2.4rem]">
+      <div className="mr-auto">
+        <Icon name="main_logo" width={72} height={20} />
+      </div>
+      <div className="flex items-center justify-center pb-[1rem] pt-[0.8rem] text-center">
+        <Icon name="logout_chippi.2512" width={132} height={132} />
+      </div>
+      <p className="sub2-sb mb-[0.4rem] text-black">
+        치삐를 만나려면 로그인이 필요해요!
+      </p>
+      <p className="body4-r text-font-gray-3 px-[4.15rem] text-center">
+        지금 로그인하고 북마크한 정보의
+        <br /> 리마인드 알람을 받아보세요
+      </p>
+      <button
+        className="sub4-sb mt-[1.6rem] flex h-[4.4rem] w-[25.15rem] items-center justify-between rounded-full border border-gray-100 bg-white px-[2rem]"
+        type="button"
+        onClick={() => {
+          chrome.tabs.create({
+            url: 'https://www.pinback.today/onboarding?step=SOCIAL_LOGIN',
+          });
+        }}
+      >
+        <Icon name="google" width={21} height={21} />
+        구글 계정으로 로그인/회원가입
+      </button>
+    </div>
+  );
+};
+export default LogOutPop;

apps/extension/src/pages/MainPop.tsx

@@ -14,8 +14,7 @@ import {
 import { useState, useEffect } from 'react';
 import { usePageMeta } from '@hooks/usePageMeta';
 import { useSaveBookmark } from '@hooks/useSaveBookmarks';
-import { Icon } from '@pinback/design-system/icons';
-
+import Header from '@shared/components/Header';
 import {
   usePostArticle,
   useGetCategoriesExtension,
@@ -221,7 +220,6 @@ const MainPop = ({ type, savedData }: MainPopProps) => {
               date: isRemindOn ? currentDate : date,
               time: isRemindOn ? currentTime : time,
             });
-            //window.close();
           },
         }
       );
@@ -284,18 +282,9 @@ const MainPop = ({ type, savedData }: MainPopProps) => {
             onRightClick={saveHandleCategory}
           />
         )}
-        <div className="flex flex-col justify-between gap-[1.6rem] rounded-[12px] bg-white px-[3.2rem] py-[2.4rem] text-black">
-          <div className="mr-auto">
-            <Icon
-              name="main_logo"
-              width={72}
-              height={20}
-              onClick={() => {
-                chrome.tabs.create({ url: 'https://www.pinback.today/' });
-              }}
-            />
-          </div>
 
+        <div className="flex flex-col justify-between gap-[1.6rem] rounded-[12px] bg-white px-[3.2rem] py-[2.4rem] text-black">
+          <Header />
           {loading ? (
             <div className="bg-gray100 h-[6.8rem] w-[full] animate-pulse rounded-[4px]" />
           ) : (

apps/extension/src/shared/components/Header.tsx

@@ -0,0 +1,23 @@
+import { Icon } from '@pinback/design-system/icons';
+import { useState } from 'react';
+const Header = () => {
+  const [isHover, setIsHover] = useState(false);
+  return (
+    <header className="flex items-center justify-between">
+      <Icon
+        name={isHover ? 'ext_home2' : 'ext_home1'}
+        width={28}
+        height={28}
+        className="cursor-pointer"
+        onMouseEnter={() => setIsHover(true)}
+        onMouseLeave={() => setIsHover(false)}
+        onClick={() => {
+          chrome.tabs.create({ url: 'https://www.pinback.today/' });
+        }}
+      />
+      <Icon name="main_logo" width={72} height={20} />
+    </header>
+  );
+};
+
+export default Header;

apps/extension/tsconfig.json

@@ -25,10 +25,11 @@
       "@components/*": ["src/components/*"],
       "@utils/*": ["src/utils/*"],
       "@apis/*": ["src/apis/*"],
-      "@hooks/*":["src/hooks/*"],
+      "@hooks/*": ["src/hooks/*"],
       "@constants/*": ["src/constants/*"],
       "@shared-types/*": ["src/types/*"],
       "@api/*": ["src/api/*"],
+      "@shared/*": ["src/shared/*"]
     }
   },
   "include": ["src/**/*", "manifest.json", "popup.html", "vite.config.ts"],

packages/design-system/src/icons/iconNames.ts

@@ -2,8 +2,11 @@
 export const iconNames = [
   'chippi_profile',
   'dotori',
+  'ext_home1',
+  'ext_home2',
   'extension_pop',
   'extension_thumb',
+  'google',
   'ic_arrow_down_active',
   'ic_arrow_down_disable',
   'ic_bookmark_active',
@@ -17,6 +20,7 @@ export const iconNames = [
   'ic_info',
   'ic_plus',
   'logo',
+  'logout_chippi.2512',
   'main_header_logo',
   'main_logo',
   'saved',