Feat(재림): QA 반영 | 대시보드 랜딩 및 익스텐션 팝업 추가 수정

apps/client/src/pages/onBoarding/components/funnel/AlarmBox.tsx

@@ -24,18 +24,26 @@ const boxStyle = cva(
 
 const AlarmBox = ({ select, isDisabled, onClick }: AlarmBoxProps) => {
   const [showPicker, setShowPicker] = useState(false);
-  const getTimePicker = ({ hour, minute, meridiem }: { hour: string; minute: string; meridiem: string }) => {
-        const formatted = `${meridiem} ${hour}:${minute}`;
-        AlarmsType[2].time = formatted;
-        setShowPicker(false);
-        // 이거 나중에 api 연결때 쓸려고 표시한거.. 그떄 지우겠듬여 console.log('저장된 사용자 알람:', AlarmsType[2].time);
-  }
+  const getTimePicker = ({
+    hour,
+    minute,
+    meridiem,
+  }: {
+    hour: string;
+    minute: string;
+    meridiem: string;
+  }) => {
+    const formatted = `${meridiem} ${hour}:${minute}`;
+    AlarmsType[2].time = formatted;
+    setShowPicker(false);
+    // 이거 나중에 api 연결때 쓸려고 표시한거.. 그떄 지우겠듬여 console.log('저장된 사용자 알람:', AlarmsType[2].time);
+  };
   return (
     <div
       className={boxStyle({ disabled: isDisabled })}
       onClick={() => {
         if (select === 3) {
-          setShowPicker(true); 
+          setShowPicker(true);
         } else {
           setShowPicker(false);
         }
@@ -60,18 +68,20 @@ const AlarmBox = ({ select, isDisabled, onClick }: AlarmBoxProps) => {
       {select === 3 && isDisabled && (
         <>
           {AlarmsType[2].time && (
-            <p className="caption2-m text-font-gray-3">{normalizeTime(AlarmsType[2].time)}</p>
+            <p className="caption2-m text-font-gray-3">
+              {normalizeTime(AlarmsType[2].time)}
+            </p>
           )}
 
-         {showPicker && ( <TimePicker
+          {showPicker && (
+            <TimePicker
               onSave={getTimePicker}
               onCancel={() => {
                 setShowPicker(false);
               }}
               onClick={(e) => e.stopPropagation()}
-            />)}
-
-
+            />
+          )}
         </>
       )}
     </div>

apps/client/src/shared/components/cardEditModal/CardEditModal.tsx

@@ -55,9 +55,9 @@ export default function CardEditModal({
   const [errorTxt, setErrorTxt] = useState('');
 
   const saveCategory = () => {
-    if (categoryTitle.length > 20) {
+    if (categoryTitle.length > 10) {
       setIsPopError(true);
-      setErrorTxt('20자 이내로 작성해주세요');
+      setErrorTxt('10자 이내로 작성해주세요');
     } else {
       setIsPopupOpen(false);
     }

apps/extension/src/App.tsx

@@ -24,7 +24,7 @@ const App = () => {
   };
 
   const handleDuplicateRightClick = () => {
-    chrome.tabs.create({ url: 'https://pinback.today' });
+    chrome.tabs.create({ url: 'https://www.pinback.today/' });
   };
 
   return (

apps/extension/src/hooks/useCategoryManager.ts

@@ -1,19 +1,22 @@
-import { useState,useEffect } from "react";
-import { usePostCategories, useGetCategoriesExtension } from "@apis/query/queries";
-import type { Category } from "@shared-types/types";
-import { AxiosError } from "axios";
+import { useState, useEffect } from 'react';
+import {
+  usePostCategories,
+  useGetCategoriesExtension,
+} from '@apis/query/queries';
+import type { Category } from '@shared-types/types';
+import { AxiosError } from 'axios';
 
 export const useCategoryManager = () => {
   const { data: categoryData } = useGetCategoriesExtension();
   const { mutate: postCategories } = usePostCategories();
 
-  const [categoryTitle, setCategoryTitle] = useState("");
+  const [categoryTitle, setCategoryTitle] = useState('');
   const [isPopError, setIsPopError] = useState(false);
-  const [errorTxt, setErrorTxt] = useState("");
+  const [errorTxt, setErrorTxt] = useState('');
 
   const [options, setOptions] = useState<string[]>(
-  categoryData?.data?.categories?.map((c: Category) => c.categoryName) ?? []
-);
+    categoryData?.data?.categories?.map((c: Category) => c.categoryName) ?? []
+  );
 
   useEffect(() => {
     if (categoryData?.data?.categories) {
@@ -22,9 +25,9 @@ export const useCategoryManager = () => {
   }, [categoryData]);
 
   const saveCategory = (onSuccess?: (category: Category) => void) => {
-    if (categoryTitle.length > 20) {
+    if (categoryTitle.length > 10) {
       setIsPopError(true);
-      setErrorTxt("20자 이내로 작성해주세요");
+      setErrorTxt('10자 이내로 작성해주세요');
       return;
     }
 
@@ -35,24 +38,27 @@ export const useCategoryManager = () => {
           const newCategory: Category = {
             categoryId: res.data.categoryId,
             categoryName: categoryTitle,
-            categoryColor: res.data.categoryColor ?? "#000000",
+            categoryColor: res.data.categoryColor ?? '#000000',
           };
           setOptions((prev) => [...prev, newCategory.categoryName]);
 
           onSuccess?.(newCategory);
           resetPopup();
         },
         onError: (err: AxiosError<{ code: string; message: string }>) => {
-          alert(err.response?.data?.message ?? "카테고리 추가 중 오류가 발생했어요 😢");
+          alert(
+            err.response?.data?.message ??
+              '카테고리 추가 중 오류가 발생했어요 😢'
+          );
         },
       }
     );
   };
 
   const resetPopup = () => {
-    setCategoryTitle("");
+    setCategoryTitle('');
     setIsPopError(false);
-    setErrorTxt("");
+    setErrorTxt('');
   };
 
   return {

apps/extension/src/pages/MainPop.tsx

@@ -8,11 +8,14 @@
   Dropdown,
   validateDate,
   validateTime,
+  Toast,
+  AutoDismissToast,
 } from '@pinback/design-system/ui';
 import { useState, useEffect } from 'react';
 import { usePageMeta } from '@hooks/usePageMeta';
 import { useSaveBookmark } from '@hooks/useSaveBookmarks';
 import { Icon } from '@pinback/design-system/icons';
+
 import {
   usePostArticle,
   useGetCategoriesExtension,
@@ -80,10 +83,11 @@
     } else {
       setImgUrl(initialImgUrl);
     }
   }, [initialImgUrl]);
 
   // 아티클 팝업 정보들 상태
-  const [isRemindOn, setIsRemindOn] = useState(false);
+  const [toastIsOpen, setToastIsOpen] = useState(false);
+  const [isRemindOn, setIsRemindOn] = useState(true);
   const [memo, setMemo] = useState('');
   const [isPopupOpen, setIsPopupOpen] = useState(false);
   const [isArticleId, setIsArticleId] = useState(0);
@@ -186,7 +190,6 @@
       time: isRemindOn ? currentTime : time,
       createdAt: new Date().toISOString(),
     };
-    console.log(combineDateTime(saveData.date ?? '', saveData.time ?? ''));
     if (type === 'add') {
       save({
         url,
@@ -210,6 +213,7 @@
           : null,
       });
     } else {
+      setToastIsOpen(true);
       putArticle({
         articleId: isArticleId,
         data: {
@@ -223,12 +227,26 @@
             : null,
         },
       });
+      setTimeout(() => {
+        window.close();
+      }, 1000);
     }
   };
 
   return (
     <div className="App">
       <div className="relative flex h-[56.8rem] w-[31.2rem] items-center justify-center">
+        {toastIsOpen && (
+          <div className="absolute bottom-[5rem] left-1/2 -translate-x-1/2">
+            <AutoDismissToast
+              duration={1000}
+              fadeMs={1000}
+              onClose={() => setToastIsOpen(false)}
+            >
+              <Toast text={`수정내용을 저장했어요`} />
+            </AutoDismissToast>
+          </div>
+        )}
         {isPopupOpen && (
           <PopupContainer
             isOpen={isPopupOpen}
@@ -256,7 +274,7 @@
               width={72}
               height={20}
               onClick={() => {
-                chrome.tabs.create({ url: 'https://pinback.today' });
+                chrome.tabs.create({ url: 'https://www.pinback.today/' });
               }}
             />
           </div>
@@ -288,7 +306,7 @@
           <div>
             <p className="caption1-sb mb-[0.4rem]">메모</p>
             <Textarea
-              maxLength={100}
+              maxLength={500}
               placeholder="나중에 내가 꺼내줄 수 있게 살짝 적어줘!"
               value={memo}
               onChange={(e) => setMemo(e.target.value)}

apps/landing/src/components/FinalCTASection.tsx

@@ -19,10 +19,11 @@ const FinalCTASection = () => {
           도토리를 모아볼까요?
         </p>
         <div>
+          {/* TODO : 랜딩페이디 크롬스토어 설치페이지로 링크 추후 수정 필요! */}
           <Button
             variant="primary"
             onClick={() => {
-              window.location.href = 'https://pinback.today/onboarding';
+              window.location.href = 'https://www.pinback.today/onboarding';
             }}
           >
             지금 시작하기