feat: 로컬 환경 변경 및 디바운스 적용

2023-Winter-Bootcamp-Team-N · May 13, 2024 · 2694b3d · 2694b3d
1 parent c46d3e1
commit 2694b3d
Show file tree

Hide file tree

Showing 12 changed files with 69 additions and 60 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -3,7 +3,7 @@ version: "3"
 services:
   db:
     image: postgres
-    container_name: db
+    container_name: db_n
     volumes:
       - ./data/db:/var/lib/postgresql/data/
     ports:
@@ -15,7 +15,7 @@ services:
       - t4y
 
   backend:
-    container_name: backend
+    container_name: backend_n
     build: ./backend
     command: sh -c "python manage.py makemigrations account && \
       python manage.py makemigrations subscribe && \
@@ -34,7 +34,7 @@ services:
       - t4y
 
   rabbit:
-    container_name: rabbit
+    container_name: rabbit_n
     image: rabbitmq:3-management
     hostname: rabbit
     environment:
@@ -47,7 +47,7 @@ services:
       - t4y
 
   celery:
-    container_name: celery
+    container_name: celery_n
     build: ./backend
     command: sh -c 'celery -A nTeamProject.celery worker --loglevel=info'
     depends_on:

diff --git a/frontend/manifest.js b/frontend/manifest.js
@@ -11,7 +11,7 @@ const manifest = {
   description: packageJson.description,
 
   permissions: ['storage', 'sidePanel'],
-  host_permissions: ['https://pre-view.store/*'],
+  host_permissions: ['http://localhost:8000/*'],
 
   side_panel: {
     default_path: 'src/pages/sidepanel/index.html',

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -22,6 +22,7 @@
     "lint:fix": "pnpm lint --fix",
     "prettier": "prettier . --write"
   },
+  "proxy": "http://localhost:8000",
   "type": "module",
   "dependencies": {
     "axios": "^1.6.5",

diff --git a/frontend/src/axios.js b/frontend/src/axios.js
@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+const axiosInstance = axios.create({
+  withCredentials: true,
+});
+
+export default axiosInstance;
diff --git a/frontend/src/pages/newtab/ChartComponent.tsx b/frontend/src/pages/newtab/ChartComponent.tsx
@@ -22,7 +22,7 @@ const ChartComponent = ({ user_id }) => {
         };
         console.log('Request parameters:', params);
 
-        const response = await axios.get(`https://pre-view.store/api/v1/chart/category`, { params });
+        const response = await axios.get(`http://localhost:8000/api/v1/chart/category`, { params });
         //API 응답에서 categories 배열을 가져와 각 항목을 막대 그래프에 필요한 형태로 변환
         const categoriesData = response.data.categories.map((category, index) => ({
           name: category.category,

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

diff --git a/frontend/src/pages/newtab/Newtab.tsx b/frontend/src/pages/newtab/Newtab.tsx
@@ -27,7 +27,7 @@ import rightVector from '../../assets/img/rightVector.svg';
 import leftVector from '../../assets/img/leftVector.svg';
 import SummaryPage from './SummaryPage';
 import All from '../../assets/img/All.svg';
-import axios from 'axios';
+import axios from '../../axios';
 
 const Newtab: React.FC = () => {
   const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
@@ -42,7 +42,7 @@ const Newtab: React.FC = () => {
 
   const SearchCategory = async (category: string) => {
     try {
-      const response = await axios.get(`https://pre-view.store/api/v1/search/category?user_id=1&category=${category}`);
+      const response = await axios.get(`http://localhost:8000/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(
-        `https://pre-view.store/api/v1/search/channel?user_id=1&channel=${selectedChannel}`,
+        `http://localhost:8000/api/v1/search/channel?user_id=1&channel=${selectedChannel}`,
       );
       console.log('채널 불러오기 성공', response.data.summaries);
       setChannelData(response.data.summaries);

diff --git a/frontend/src/pages/newtab/SubscribePage.tsx b/frontend/src/pages/newtab/SubscribePage.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 import React, { useState, useEffect } from 'react';
-import axios from 'axios';
+import axios from '../../axios';
 import channelBg from '../../assets/img/channelBg.svg';
 import channelprofile from '../../assets/img/channelprofile.svg';
 import SubscribeText from '../../assets/img/SubscribeText.svg';
@@ -42,7 +42,7 @@ const SubscribePage = ({ selectedChannel, setSelectedChannel, setChannelData, Se
 
   const getSubscribeList = async () => {
     try {
-      const url = `https://pre-view.store/api/v1/subscribe/list/`;
+      const url = `http://localhost:8000/api/v1/subscribe/list/`;
       const response = await axios.get(url, { params: { user_id: '1' } });
       return response.data;
     } catch (error) {

diff --git a/frontend/src/pages/newtab/SummaryPage.tsx b/frontend/src/pages/newtab/SummaryPage.tsx
@@ -1,13 +1,15 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import searchIcon from '../../assets/img/searchIcon.svg';
 import './SummaryPage.css';
-import axios from 'axios';
+import axios from '../../axios';
 import SummaryItem from './SummaryItem';
 import closeButton from '../../assets/img/closeButton.svg';
 import Modal from './Modal';
+import debounce from './debounce';
+
 interface SummaryPageProps {
   selectedCategory: string | null;
-  selectedChannel: string | null; // 추
+  selectedChannel: string | null;
   summary: SummaryItem[];
   onCloseButtonClick: () => void;
   setSummary;
@@ -30,7 +32,6 @@ const SummaryPage: React.FC<SummaryPageProps> = ({
   setSummaries,
   keyword,
   setKeyword,
-  //setChannelData,
   ChannelData,
 }) => {
   console.log('Summary prop:', summary);
@@ -85,25 +86,28 @@ const SummaryPage: React.FC<SummaryPageProps> = ({
     setSelectedSummary(selectedSummary);
   };
 
-  const handleSearch = async () => {
-    try {
-      const params = {
-        user_id: 1,
-        keyword: keyword,
-        category: category,
-      };
-      console.log('Request parameters:', 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);
-    } catch (error) {
-      if (error.response && error.response.status === 404) {
-        window.alert(`'${keyword}' 에 대한 검색 결과가 없습니다.`);
+  const debouncedSearch = useCallback(
+    debounce(async searchKeyword => {
+      try {
+        const params = { user_id: 1, keyword: searchKeyword, category };
+        const response = await axios.get('http://localhost:8000/api/v1/search/keyword', { params });
+        const SearchSummaries = response.data.summaries;
+        setSummaries(SearchSummaries);
+      } catch (error) {
+        if (error.response && error.response.status === 404) {
+          console.error('No results found for:', searchKeyword);
+        } else {
+          console.error('Failed to fetch summaries:', error);
+        }
       }
+    }, 500),
+    [category],
+  );
 
-      console.error('키워드 관련 요약본 불러오기 실패 : ', error);
-    }
+  const handleKeywordChange = e => {
+    const { value } = e.target;
+    setKeyword(value);
+    debouncedSearch(value);
   };
 
   const DeleteCategory = async (summary_id: string) => {
@@ -113,7 +117,7 @@ const SummaryPage: React.FC<SummaryPageProps> = ({
 
       // If the user clicks 'OK' in the confirmation alert
       if (shouldDelete) {
-        await axios.delete(`https://pre-view.store/api/v1/summary/${summary_id}?user_id=1`);
+        await axios.delete(`http://localhost:8000/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 +139,7 @@ const SummaryPage: React.FC<SummaryPageProps> = ({
 
       // If the user clicks 'OK' in the confirmation alert
       if (shouldDeletechannel) {
-        await axios.delete(`https://pre-view.store/api/v1/subscribe/${selectedChannel}?user_id=1`);
+        await axios.delete(`http://localhost:8000/api/v1/subscribe/${selectedChannel}?user_id=1`);
 
         window.alert('구독 취소가 완료되었습니다.');
       } else {
@@ -262,18 +266,11 @@ const SummaryPage: React.FC<SummaryPageProps> = ({
                     fontSize: '0.8rem',
                     boxShadow: '0px 4px 8px 0px rgba(0, 0, 0, 0.2)', // 그림자 효과 추가
                   }}
-                  placeholder="키워드를 입력하세요."
                   id="keywordInput"
                   name="keyword"
+                  placeholder="키워드를 입력하세요."
                   value={keyword}
-                  onChange={e => setKeyword(e.target.value)}
-                  onKeyDown={e => {
-                    if (e.key === 'Enter') {
-                      e.preventDefault();
-                      handleSearch();
-                      console.log(ChannelData);
-                    }
-                  }}
+                  onChange={handleKeywordChange}
                 />
               </div>
             </div>

diff --git a/frontend/src/pages/newtab/debounce.js b/frontend/src/pages/newtab/debounce.js
@@ -0,0 +1,15 @@
+function debounce(func, wait) {
+  let timeout;
+
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+}
+
+export default debounce;
diff --git a/frontend/src/pages/sidepanel/SidePanel.tsx b/frontend/src/pages/sidepanel/SidePanel.tsx
@@ -10,7 +10,7 @@ import './Dropdown.css';
 import './Modal.css';
 import dropdownButton from '@assets/img/dropdownButton.svg';
 import dropdownButtonDark from '@assets/img/dropdownButtonDark.svg';
-import axios from 'axios';
+import axios from '../../axios';
 import subscribebutton from '@assets/img/subscribebutton.svg';
 import copybutton from '@assets/img/copybutton.svg';
 import categorybutton from '@assets/img/categorybutton.svg';
@@ -38,8 +38,6 @@ const SidePanel = () => {
   //구독이 이미 돼있는지 자체 확인
   const [subscribedChannels, setSubscribedChannels] = useState(new Set());
 
-
-
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [modalMessage, setModalMessage] = useState('');
   const closeModal = () => setIsModalOpen(false);
@@ -55,7 +53,7 @@ const SidePanel = () => {
 
   //웹소켓
   useEffect(() => {
-    const ws = new WebSocket('wss://pre-view.store/ws/preview/');
+    const ws = new WebSocket('ws://localhost:8000/ws/preview/');
 
     ws.onopen = () => {
       console.log('웹소켓 연결 성공');
@@ -179,7 +177,7 @@ const SidePanel = () => {
 
       // 서버에 저장 요청
       try {
-        const response = await axios.post('https://pre-view.store/api/v1/summary/', savedData);
+        const response = await axios.post('http://localhost:8000/api/v1/summary/', savedData);
         console.log('저장 요청 성공:', response.data);
         // 저장 성공 메시지를 모달로 표시
         openModal('요약본이 저장되었습니다.');