v0.0.5 - 출처, 카테고리 생성, 로그인 확인 기능 (#10)

* chore: v0.0.5 업데이트

* feat(background): 우클릭 저장 시, 해당 탭 URL 저장

* feat(popup): 템플릿 업로드 시, 출처를 description에 추가하는 기능

* feat(popup): 출처 첨부 체크박스 추가

* feat(popup): 카테고리 선택 없을 시, "카테고리 없음"으로  업로드

* feat(popup): 카테고리 생성 기능

* feat(popup): '/login/check' 요청으로 쿠키 없을 시, 로그인 해제

* refactor(LogoutButton): 로그아웃 버튼 스타일 변경

Author: Jaymyong66

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codezap-chrome-extension",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "코드잽 크롬 익스텐션입니다",
   "scripts": {
     "start": "webpack --watch --progress --config webpack.dev.js",

src/background/background.ts

@@ -1,4 +1,9 @@
-import { getStoredSourceCodes, setStoredSourceCodes } from '../utils/storage';
+import {
+  getStoredDescription,
+  getStoredSourceCodes,
+  setStoredDescription,
+  setStoredSourceCodes,
+} from '../utils/storage';
 
 chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
   if (message.action === 'pageLoaded') {
@@ -36,11 +41,16 @@ chrome.contextMenus.onClicked.addListener((info, tab) => {
       })
       .then((selectionArray) => {
         const selectedText = selectionArray[0]?.result || '';
+        const tabUrl = tab?.url;
 
         if (selectedText) {
-          getStoredSourceCodes().then((codes) => {
-            setStoredSourceCodes([...codes, selectedText]).then(() => {
-              chrome.action.openPopup();
+          getStoredDescription().then((descriptions) => {
+            setStoredDescription([...descriptions, tabUrl]).then(() => {
+              getStoredSourceCodes().then((codes) => {
+                setStoredSourceCodes([...codes, selectedText]).then(() => {
+                  chrome.action.openPopup();
+                });
+              });
             });
           });
         }

src/components/LogoutButton/LogoutButton.module.css

@@ -1,14 +1,16 @@
 .logoutButton {
-  background-color: #ff9500;
-  color: white;
-  border: none;
+  background-color: white;
+  color: #393e46;
+  border: 1px solid #393e46;
+  font-weight: 600;
+
   cursor: pointer;
 
-  padding: 8px;
+  padding: 5px 7px;
   border-radius: 4px;
   width: auto;
 
   &:hover {
-    background-color: #f6a739;
+    background-color: #e5ebf5;
   }
 }

src/popup/popup.module.css

@@ -21,9 +21,10 @@
 }
 
 .categorySelect {
+  height: 26px;
   border: 1px solid black;
   padding: 4px;
-  border-radius: 4px;
+  border-radius: 4px 0px 0px 4px;
 }
 
 .titleInput {
@@ -128,3 +129,43 @@
   justify-content: space-between;
   align-items: center;
 }
+
+.checkboxContainer {
+  display: flex;
+  align-items: center;
+}
+
+.checkboxLabel {
+  font-size: 12px;
+  color: #333;
+}
+
+.checkboxInput {
+  width: 16px;
+  height: 16px;
+  margin-right: 5px;
+  vertical-align: middle;
+}
+
+.checkboxText {
+  vertical-align: middle;
+}
+
+.categoryContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.addCategoryButton {
+  height: 26px;
+  font-size: 16px;
+  padding: 6px 8px;
+
+  border-top: 1px solid black;
+  border-right: 1px solid black;
+  border-bottom: 1px solid black;
+  border-radius: 0px 4px 4px 0px;
+
+  background-color: white;
+}

src/popup/popup.tsx

@@ -7,6 +7,7 @@ import {
   fetchCategories,
   Category,
   UserInfo,
+  getLoginState,
 } from '../utils/api';
 import {
   getStoredUserInfo,
@@ -19,12 +20,14 @@ import {
   setStoredTitle,
   setStoredCategory,
   setStoredFileNames,
+  getStoredDescription,
 } from '../utils/storage';
 import config from '../../config';
 
 import styles from './popup.module.css';
 import '../styles/reset.css';
 import VisibilityToggle from '../components/VisibilityToggle/VisibilityToggle';
+import { urlToDescription } from '../utils/urlToDescription';
 
 const Popup = () => {
   const [userInfo, setUserInfo] = useState<UserInfo>({
@@ -39,16 +42,32 @@ const Popup = () => {
   const [selectedCategoryId, setSelectedCategoryId] = useState<
     number | undefined
   >(undefined);
+  const [description, setDescription] = useState<string[]>([]);
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
 
+  const [attachUrl, setAttachUrl] = useState(true);
+
+  useEffect(() => {
+    const checkLogin = async () => {
+      try {
+        getLoginState();
+      } catch (error) {
+        await handleLogout();
+      }
+    };
+
+    checkLogin();
+  }, []);
+
   useEffect(() => {
     const initializePopup = async () => {
       const storedUserInfo = await getStoredUserInfo();
       const storedSourceCodes = await getStoredSourceCodes();
       const storedTitle = await getStoredTitle();
       const storedCategoryId = await getStoredCategory();
       const storedFileNames = await getStoredFileNames();
+      const storedDescription = await getStoredDescription();
 
       if (storedUserInfo && storedUserInfo.memberId) {
         setUserInfo(storedUserInfo);
@@ -66,6 +85,7 @@ const Popup = () => {
 
       setTitle(storedTitle);
       setSelectedCategoryId(storedCategoryId);
+      setDescription(storedDescription);
     };
 
     initializePopup();
@@ -119,7 +139,8 @@ const Popup = () => {
           memberId: undefined,
         });
         setCategories([]);
-        alert('로그아웃 성공!');
+        resetTemplateData();
+        alert('로그아웃 되었어요');
       });
     } catch (error) {
       console.error('로그아웃 에러: ', error);
@@ -153,20 +174,31 @@ const Popup = () => {
   const handleRemoveSourceCode = (index: number) => {
     const newSourceCodes = [...sourceCodes];
     const newFileNames = [...fileNames];
+    const newDescription = [...description];
     newSourceCodes.splice(index, 1);
     newFileNames.splice(index, 1);
+    newDescription.splice(index, 1);
     setSourceCodes(newSourceCodes);
     setFileNames(newFileNames);
     setStoredSourceCodes(newSourceCodes);
   };
 
+  const resetTemplateData = () => {
+    setTitle('');
+    setFileNames([]);
+    setSelectedCategoryId(undefined);
+    setSourceCodes([]);
+    setStoredTitle('');
+    setStoredCategory(categories[0].id);
+    setStoredFileNames([]);
+    setDescription([]);
+    chrome.storage.local.remove('sourceCodes');
+    chrome.storage.local.remove('description');
+  };
+
   const handleUpload = async () => {
-    if (
-      !title ||
-      fileNames.some((fileName) => !fileName) ||
-      !selectedCategoryId
-    ) {
-      alert('제목, 파일명 및 카테고리를 선택해주세요.');
+    if (!title || fileNames.some((fileName) => !fileName)) {
+      alert('제목 및 파일명을 입력해주세요.');
       return;
     }
 
@@ -177,14 +209,14 @@ const Popup = () => {
 
     const requestBody = {
       title,
-      description: '사용자가 생성한 코드 템플릿',
+      description: attachUrl ? urlToDescription(description) : '',
       sourceCodes: sourceCodes.map((code, index) => ({
         filename: fileNames[index],
         content: code,
         ordinal: index + 1,
       })),
       thumbnailOrdinal: 1,
-      categoryId: selectedCategoryId,
+      categoryId: selectedCategoryId ? selectedCategoryId : categories[0].id,
       tags: [],
       visibility: isPrivate ? 'PRIVATE' : 'PUBLIC',
     };
@@ -205,17 +237,12 @@ const Popup = () => {
             '소스코드가 성공적으로 업로드되었어요! 코드잽에서 확인해볼까요?'
           )
         ) {
-          chrome.tabs.create({ url: 'https://www.code-zap.com/my-templates' });
+          chrome.tabs.create({
+            url: `https://www.code-zap.com/members/${userInfo.memberId}/templates`,
+          });
         }
 
-        setTitle('');
-        setFileNames([]);
-        setSelectedCategoryId(undefined);
-        setSourceCodes([]);
-        setStoredTitle('');
-        setStoredCategory(categories[0].id);
-        setStoredFileNames([]);
-        chrome.storage.local.remove('sourceCodes');
+        resetTemplateData();
       } else {
         alert('소스코드 업로드에 실패했어요. 잠시 후 다시 시도해주세요.');
       }
@@ -225,6 +252,43 @@ const Popup = () => {
     }
   };
 
+  const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setAttachUrl(e.target.checked);
+  };
+
+  const handleAddCategory = async () => {
+    let newCategoryName = prompt('새로운 카테고리명을 입력해주세요:');
+    while (newCategoryName) {
+      try {
+        const response = await fetch(`${config.API_BASE_URL}/categories`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          credentials: 'include',
+          body: JSON.stringify({ name: newCategoryName }),
+        });
+
+        if (response.ok) {
+          alert('카테고리가 추가되었습니다!');
+          const body = await response.json();
+
+          await loadCategories(userInfo.memberId!);
+          setSelectedCategoryId(body.id);
+          break;
+        } else if (response.status === 409) {
+          newCategoryName = prompt('중복된 카테고리입니다. 다시 입력해주세요:');
+        } else {
+          alert('카테고리 추가에 실패했습니다. 다시 시도해주세요.');
+          break;
+        }
+      } catch (error) {
+        console.error('카테고리 추가 중 에러 발생:', error);
+        break;
+      }
+    }
+  };
+
   return (
     <>
       {userInfo.memberId !== undefined ? (
@@ -242,25 +306,44 @@ const Popup = () => {
             onChange={handleTitleChange}
           />
           <div className={styles.categoryVisibilityContainer}>
-            <select
-              className={styles.categorySelect}
-              value={selectedCategoryId || ''}
-              onChange={handleCategoryChange}
-            >
-              <option value='' disabled>
-                카테고리를 선택해주세요
-              </option>
-              {categories.map((category) => (
-                <option key={category.id} value={category.id}>
-                  {category.name}
+            <div className={styles.categoryContainer}>
+              <select
+                className={styles.categorySelect}
+                value={selectedCategoryId || ''}
+                onChange={handleCategoryChange}
+              >
+                <option value='' disabled>
+                  카테고리를 선택해주세요
                 </option>
-              ))}
-            </select>
+                {categories.map((category) => (
+                  <option key={category.id} value={category.id}>
+                    {category.name}
+                  </option>
+                ))}
+              </select>
+              <button
+                className={styles.addCategoryButton}
+                onClick={handleAddCategory}
+              >
+                +
+              </button>
+            </div>
             <VisibilityToggle
               isPrivate={isPrivate}
               toggleVisibility={toggleVisibility}
             />
           </div>
+          <div className={styles.checkboxContainer}>
+            <label className={styles.checkboxLabel}>
+              <input
+                type='checkbox'
+                className={styles.checkboxInput}
+                checked={attachUrl}
+                onChange={handleCheckboxChange}
+              />
+              <span className={styles.checkboxText}>출처 url 첨부</span>
+            </label>
+          </div>
           {sourceCodes.length === 0 && (
             <div>원하는 소스코드를 드래그 후 우클릭 하여 추가해보세요</div>
           )}

src/static/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "코드잽 익스텐션",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "코드잽 템플릿 업로드를 도와주는 익스텐션입니다.",
   "permissions": ["contextMenus", "storage", "scripting", "activeTab"],
   "host_permissions": ["https://code-zap.com/*", "https://www.code-zap.com/*"],