fix : 충돌병합

2023-Winter-Bootcamp-Team-N · Jan 29, 2024 · 1da6d51 · 1da6d51
2 parents 43498f0 + bc18158
commit 1da6d51
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 49 deletions.
diff --git a/backend/nTeamProject/settings.py b/backend/nTeamProject/settings.py
@@ -54,6 +54,8 @@
     'django.contrib.auth.middleware.AuthenticationMiddleware',
     'django.contrib.messages.middleware.MessageMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
+    'django_prometheus.middleware.PrometheusBeforeMiddleware',
+    'django_prometheus.middleware.PrometheusAfterMiddleware',
 ]
 ROOT_URLCONF = 'nTeamProject.urls'
 TEMPLATES = [

diff --git a/backend/nTeamProject/urls.py b/backend/nTeamProject/urls.py
@@ -36,7 +36,7 @@
     path('api/v1/subscribe/', include("subscribe.urls")),
     path('api/v1/chart/', include("chart.urls")),
     path('api/v1/search/', include("search.urls")),
-    path('', include("django_prometheus.urls"), name='metrics'),
+    path('', include("django_prometheus.urls")),
 ]
 
 urlpatterns += [

diff --git a/frontend/src/pages/newtab/Newtab.tsx b/frontend/src/pages/newtab/Newtab.tsx
@@ -19,7 +19,6 @@ import travel from '../../assets/img/travel.svg';
 import smile from '../../assets/img/smile.svg';
 import chart from '../../assets/img/chart.svg';
 import TeamN from '../../assets/img/TeamN.svg';
-import category from '../../assets/img/category.svg';
 import youtubeicon from '../../assets/img/youtubeicon.svg';
 import SubscribePage from './SubscribePage';
 import ChartComponent from './ChartComponent';
@@ -316,11 +315,9 @@ const Newtab: React.FC = () => {
 
         {currentPage === 'SubPage' && (
           <SubscribePage
-            user_id={1}
             selectedChannel={selectedChannel}
             setSelectedChannel={setSelectedChannel}
             setChannelData={setChannelData}
-            ChannelData={ChannelData}
             SearchChannel={SearchChannel}
             switchMainpage={switchToMainPage}
           />
@@ -399,9 +396,7 @@ const Newtab: React.FC = () => {
           summary={summary}
           onCloseButtonClick={handleCloseButtonClick}
           category={selectedCategoryName || ''}
-          //channel={selectedChannelName || ''}
           selectedChannel={selectedChannel}
-          //channel={selectedChannel} // selectedChannel을 channel prop으로 전달
           setSummary={setSummary}
           summaries={summaries}
           setSummaries={setSummaries}

diff --git a/frontend/src/pages/newtab/SubscribePage.css b/frontend/src/pages/newtab/SubscribePage.css
@@ -0,0 +1,30 @@
+.skeleton-loader {
+    width: 130px;
+    height:130px;
+    border-radius: 50%;
+    margin: 10px;
+    position: relative;
+    overflow: hidden;
+    background: #f5f5f5;
+    box-shadow: 0px 10px 6px rgba(0, 0, 0, 0.1)
+    }
+
+    .skeleton-loader::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 50%;
+    height: 100%;
+    background: linear-gradient(to left, transparent 0%, #ffffff 10%, transparent 100%);
+    animation: shimmer 1.1s infinite linear;
+    }
+
+@keyframes shimmer {
+    0% {
+        transform: translateX(-100%);
+    }
+    100% {
+        transform: translateX(500%);
+    }
+    }
diff --git a/frontend/src/pages/newtab/SubscribePage.tsx b/frontend/src/pages/newtab/SubscribePage.tsx
@@ -1,20 +1,35 @@
+/* eslint-disable react/prop-types */
 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 SubscribeText from '../../assets/img/SubscribeText.svg';
 import TeamN from '../../assets/img/TeamN.svg';
+import '@pages/newtab/SubscribePage.css';
 
-const SubscribePage = ({
-  user_id,
-  selectedChannel,
-  setSelectedChannel,
-  setChannelData,
-  ChannelData,
-  SearchChannel,
-  switchMainpage,
-}) => {
+const SkeletonLoading = () => (
+  <div>
+    <div style={{ display: 'flex', width: '80%' }}>
+      {/* 디자인에 맞게 스타일 조정 */}
+      <div className="skeleton-loader"></div>
+      <div className="skeleton-loader"></div>
+      <div className="skeleton-loader"></div>
+      <div className="skeleton-loader"></div>
+    </div>
+
+    <div style={{ display: 'flex', width: '80%' }}>
+      {/* 디자인에 맞게 스타일 조정 */}
+      <div className="skeleton-loader"></div>
+      <div className="skeleton-loader"></div>
+      <div className="skeleton-loader"></div>
+      <div className="skeleton-loader"></div>
+    </div>
+  </div>
+);
+
+const SubscribePage = ({ selectedChannel, setSelectedChannel, setChannelData, SearchChannel, switchMainpage }) => {
   const [channels, setChannels] = useState([]);
+  const [loading, setLoading] = useState(true);
 
   const handleImageClick = channel => {
     if (channel === selectedChannel) {
@@ -31,7 +46,7 @@ const SubscribePage = ({
       const response = await axios.get(url, { params: { user_id: '1' } });
       return response.data;
     } catch (error) {
-      console.error('Error fetching subscribe list:', error);
+      console.error('Subscribe 목록을 가져오는 동안 오류 발생:', error);
       throw error;
     }
   };
@@ -40,7 +55,7 @@ const SubscribePage = ({
     try {
       const response = await getSubscribeList();
       if (!Array.isArray(response.subscribe_channels)) {
-        console.error('Expected an array for subscribe channels, but received:', response.subscribe_channels);
+        console.error('Subscribe 채널에 대한 배열이 예상대로 제공되지 않았습니다:', response.subscribe_channels);
         return;
       }
 
@@ -51,13 +66,16 @@ const SubscribePage = ({
       }));
 
       setChannels(updatedChannels);
+      setLoading(false); // 채널이 로드되면 로딩 상태를 false로 설정
     } catch (error) {
-      console.error('Error in loadAndDisplaySubscriptions:', error);
+      console.error('loadAndDisplaySubscriptions에서 오류 발생:', error);
+      setLoading(false); // 오류 발생 시 로딩 상태를 false로 설정
     }
   };
 
   useEffect(() => {
     loadAndDisplaySubscriptions();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const ChannelComponents = channels.map(channel => (
@@ -92,8 +110,6 @@ const SubscribePage = ({
         <div className={`main-content`} style={{ position: 'relative' }}>
           <div style={{ display: 'flex', flexDirection: 'column' }}>
             <div style={{ textAlign: 'center', marginTop: '100px' }}>
-              {' '}
-              {/* Center the subscribeText */}
               <img
                 src={SubscribeText}
                 alt="SubscribeText"
@@ -109,9 +125,7 @@ const SubscribePage = ({
                 draggable="false"
               />
               <div style={{ position: 'absolute', top: '15%', left: '12%', width: '100%', justifyContent: 'center' }}>
-                {dividedChannels.map((row, index) => (
-                  <div key={index}>{row}</div>
-                ))}
+                {loading ? <SkeletonLoading /> : dividedChannels.map((row, index) => <div key={index}>{row}</div>)}
               </div>
             </div>
           </div>

diff --git a/frontend/src/pages/newtab/SummaryPage.tsx b/frontend/src/pages/newtab/SummaryPage.tsx
@@ -8,8 +8,7 @@ import Modal from './Modal';
 
 interface SummaryPageProps {
   selectedCategory: string | null;
-  selectedChannel: string | null; // 추가
-  channel: string | null; // 새로 추가된 prop
+  selectedChannel: string | null; // 추
   summary: SummaryItem[];
   onCloseButtonClick: () => void;
   setSummary;
@@ -56,6 +55,7 @@ const SummaryPage: React.FC<SummaryPageProps> = ({
     setIsModalOpen(true);
   };
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const closeModal = () => {
     setIsSummaryVisible(false);
   };

diff --git a/prometheus/config/prometheus.yml b/prometheus/config/prometheus.yml
@@ -7,16 +7,11 @@ global:
     monitor: 'codelab-monitor'
     query_log_file: query_log_file.log
 
-# rule_files:
-#   - "rule.yml"
-
 scrape_configs:
   - job_name: 'monitoring-item'
     scrape_interval: 10s
     scrape_timeout: 10s
     metrics_path: '/metrics'
-    honor_labels: false
-    honor_timestamps: false
     scheme: 'http'
 
     static_configs:

diff --git a/prometheus/config/rule.yml b/prometheus/config/rule.yml