Merge pull request #275 from 2023-Winter-Bootcamp-Team-N/FE/design/#268

design: 드롭다운 형식 적용 및 불필요한 요소 제거

frontend/manifest.js

@@ -10,8 +10,8 @@ const manifest = {
   version: packageJson.version,
   description: packageJson.description,
 
-  permissions: ['storage', 'sidePanel', 'activeTab', 'tabs'],
-  host_permissions: ['http://localhost:8000/*'],
+  permissions: ['storage', 'sidePanel'],
+  host_permissions: ['https://pre-view.store/*'],
 
   side_panel: {
     default_path: 'src/pages/sidepanel/index.html',

frontend/package.json

@@ -5,7 +5,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite.git"
+    "url": "https://github.com/2023-Winter-Bootcamp-Team-N/2023WB-Team-N"
   },
   "scripts": {
     "build": "tsc --noEmit && vite build",

frontend/src/pages/newtab/ChartComponent.tsx

@@ -22,7 +22,7 @@ const ChartComponent = ({ user_id }) => {
         };
         console.log('Request parameters:', params);
 
-        const response = await axios.get(`http://localhost:8000/api/v1/chart/category`, { params });
+        const response = await axios.get(`https://pre-view.store/api/v1/chart/category`, { params });
         //API 응답에서 categories 배열을 가져와 각 항목을 막대 그래프에 필요한 형태로 변환
         const categoriesData = response.data.categories.map((category, index) => ({
           name: category.category,

frontend/src/pages/newtab/ChartComponent2.tsx

@@ -18,7 +18,7 @@ const ChartComponent2 = ({ user_id }) => {
         };
         console.log('Request parameters:', params);
 
-        const response = await axios.get(`http://localhost:8000/api/v1/chart/channel`, { params });
+        const response = await axios.get(`https://pre-view.store/api/v1/chart/channel`, { params });
 
         const formattedData = response.data.subscribes.map(item => ({
           name: item.youtube_channel,

frontend/src/pages/newtab/Newtab.tsx

@@ -42,7 +42,7 @@ const Newtab: React.FC = () => {
 
   const SearchCategory = async (category: string) => {
     try {
-      const response = await axios.get(`http://localhost:8000/api/v1/search/category?user_id=1&category=${category}`);
+      const response = await axios.get(`https://pre-view.store/api/v1/search/category?user_id=1&category=${category}`);
 
       console.log('카테고리 불러오기 성공', response.data);
       console.log('현재 선택된 카테고리:', `${category}`);
@@ -58,7 +58,7 @@ const Newtab: React.FC = () => {
   const SearchChannel = async (selectedChannel: string) => {
     try {
       const response = await axios.get(
-        `http://localhost:8000/api/v1/search/channel?user_id=1&channel=${selectedChannel}`,
+        `https://pre-view.store/api/v1/search/channel?user_id=1&channel=${selectedChannel}`,
       );
       console.log('채널 불러오기 성공', response.data.summaries);
       setChannelData(response.data.summaries);

frontend/src/pages/newtab/SubscribePage.tsx

@@ -2,7 +2,7 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import channelBg from '../../assets/img/channelBg.svg';
-import channelBox from '../../assets/img/channelBox.svg';
+import channelprofile from '../../assets/img/channelprofile.svg';
 import SubscribeText from '../../assets/img/SubscribeText.svg';
 import TeamN from '../../assets/img/TeamN.svg';
 import '@pages/newtab/SubscribePage.css';
@@ -42,7 +42,7 @@ const SubscribePage = ({ selectedChannel, setSelectedChannel, setChannelData, Se
 
   const getSubscribeList = async () => {
     try {
-      const url = `http://localhost:8000/api/v1/subscribe/list/`;
+      const url = `https://pre-view.store/api/v1/subscribe/list/`;
       const response = await axios.get(url, { params: { user_id: '1' } });
       return response.data;
     } catch (error) {
@@ -60,7 +60,7 @@ const SubscribePage = ({ selectedChannel, setSelectedChannel, setChannelData, Se
       }
 
       const updatedChannels = response.subscribe_channels.map(sub => ({
-        src: sub.channel_image_url || channelBox,
+        src: sub.channel_image_url || channelprofile,
         alt: sub.subscribe_channel_name,
         id: sub.subscribe_channel_id,
       }));

frontend/src/pages/newtab/SummaryPage.tsx

@@ -93,7 +93,7 @@ const SummaryPage: React.FC<SummaryPageProps> = ({
         category: category,
       };
       console.log('Request parameters:', params);
-      const response = await axios.get('http://localhost:8000/api/v1/search/keyword', { params });
+      const response = await axios.get('https://pre-view.store/api/v1/search/keyword', { params });
       const SearchSummaries = response.data.summaries;
       setSummaries(SearchSummaries);
       console.log('내가 입력한 키워드:', keyword);
@@ -113,7 +113,7 @@ const SummaryPage: React.FC<SummaryPageProps> = ({
 
       // If the user clicks 'OK' in the confirmation alert
       if (shouldDelete) {
-        await axios.delete(`http://localhost:8000/api/v1/summary/${summary_id}?user_id=1`);
+        await axios.delete(`https://pre-view.store/api/v1/summary/${summary_id}?user_id=1`);
         const updatedSummary = summary.filter(item => item.summary.summary_id !== summary_id);
         setSummary(updatedSummary);
         console.log('카테고리 삭제:', summary_id);
@@ -135,7 +135,7 @@ const SummaryPage: React.FC<SummaryPageProps> = ({
 
       // If the user clicks 'OK' in the confirmation alert
       if (shouldDeletechannel) {
-        await axios.delete(`http://localhost:8000/api/v1/subscribe/${selectedChannel}?user_id=1`);
+        await axios.delete(`https://pre-view.store/api/v1/subscribe/${selectedChannel}?user_id=1`);
 
         window.alert('구독 취소가 완료되었습니다.');
       } else {

frontend/src/pages/popup/Popup.css

@@ -7,20 +7,14 @@
   text-align: center;
   height: 100%;
   padding: 10px;
-  background-color: #282c34;
+  background-color: #ffffff;
 }
 
 .App-logo {
   height: 30vmin;
   pointer-events: none;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
 .App-header {
   height: 100%;
   display: flex;

frontend/src/pages/popup/Popup.tsx

@@ -8,9 +8,8 @@ const Popup = () => {
   return (
     <div className="App">
       <img src={logo} className="App-logo" alt="logo" />
-      <p>
-        Edit <code>src/pages/popup/Popup.tsx</code> and save to reload.
-      </p>
+      <p>유튜브 영상 요약 서비스 Preview입니다.</p>
+      <p></p>
     </div>
   );
 };

frontend/src/pages/sidepanel/SidePanel.tsx

@@ -55,7 +55,7 @@ const SidePanel = () => {
 
   //웹소켓
   useEffect(() => {
-    const ws = new WebSocket('ws://localhost:8000/ws/preview/');
+    const ws = new WebSocket('wss://pre-view.store/ws/preview/');
 
     ws.onopen = () => {
       console.log('웹소켓 연결 성공');
@@ -136,7 +136,8 @@ const SidePanel = () => {
   const summaryParts = summary.split('*****');
   const summaryByTimesText = summaryParts[0].trim();
   const summaryContent = summaryParts.length > 1 ? summaryParts[1].trim() : '';
-  const category = summaryParts.length > 2 ? summaryParts[2].trim() : '';
+  let category = summaryParts.length > 2 ? summaryParts[2].trim() : '';
+  category = category.replace(/모든 요약이 끝났습니다\.$/, '').trim();
 
   //...저장기능...//
   const toggleSave = async () => {
@@ -178,7 +179,7 @@ const SidePanel = () => {
 
       // 서버에 저장 요청
       try {
-        const response = await axios.post('http://localhost:8000/api/v1/summary/', savedData);
+        const response = await axios.post('https://pre-view.store/api/v1/summary/', savedData);
         console.log('저장 요청 성공:', response.data);
         // 저장 성공 메시지를 모달로 표시
         openModal('요약본이 저장되었습니다.');
@@ -188,7 +189,7 @@ const SidePanel = () => {
     }
   };
 
-  //...복사기능...//////////////////////////////////////////////////////////////////////
+  // 복사
   const copyText = () => {
     const text = document.querySelector('.side-panel p').textContent;
     navigator.clipboard
@@ -210,11 +211,11 @@ const SidePanel = () => {
 
   const isSubscribeButtonEnabled = currentUrl.includes('@');
 
-  //...구독기능...//////////////////////////////////////////////////////////////////////
+  // 구독
   const toggleSubscription = async () => {
     if (!isSubscribed) {
       try {
-        await axios.post('http://localhost:8000/api/v1/subscribe/', {
+        await axios.post('https://pre-view.store/api/v1/subscribe/', {
           user_id: 1,
           channel_url: currentUrl,
         });
@@ -228,10 +229,9 @@ const SidePanel = () => {
         console.error('구독 처리 실패:', error);
       }
     }
-    // Removed the logic to handle unsubscription
   };
 
-  //...새탭열기...//////////////////////////////////////////////////////////////////////
+  // 새 탭
   const openNewTab = () => {
     chrome.tabs.create({ url: 'chrome://newtab' });
   };