Merge pull request #278 from 2023-Winter-Bootcamp-Team-N/FE/feat/#218

[feat]스켈레톤 UI / 모든 오류 수정

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';
@@ -307,11 +306,9 @@ const Newtab: React.FC = () => {
 
         {currentPage === 'SubPage' && (
           <SubscribePage
-            user_id={1}
             selectedChannel={selectedChannel}
             setSelectedChannel={setSelectedChannel}
             setChannelData={setChannelData}
-            ChannelData={ChannelData}
             SearchChannel={SearchChannel}
             switchMainpage={switchToMainPage}
           />
@@ -387,9 +384,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}

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%);
+    }
+    }

frontend/src/pages/newtab/SubscribePage.tsx

@@ -1,20 +1,49 @@
+/* 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 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 = ({
-  user_id,
   selectedChannel,
   setSelectedChannel,
   setChannelData,
-  ChannelData,
   SearchChannel,
-  switchMainpage,
+  switchMainpage
 }) => {
   const [channels, setChannels] = useState([]);
+  const [loading, setLoading] = useState(true);
 
   const handleImageClick = channel => {
     if (channel === selectedChannel) {
@@ -31,7 +60,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 +69,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 +80,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 => (
@@ -91,41 +123,35 @@ 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" style={{ width: '50px', margin: '0 auto' }} />
             </div>
             <div style={{ position: 'relative', width: '800px', height: '480px' }}>
               <img src={channelBg} alt="Channel Background" style={{ width: '100%', height: '100%' }} />
               <div style={{ position: 'absolute', top: '15%', left: '12%', width: '100%', justifyContent: 'center' }}>
-                {dividedChannels.map((row, index) => (
+
+                {loading ? <SkeletonLoading /> : dividedChannels.map((row, index) => (
                   <div key={index}>{row}</div>
                 ))}
               </div>
             </div>
           </div>
         </div>
 
-            <button onClick={switchMainpage}>
-              <img
-                src={TeamN}
-                alt="logo box"
-                style={{
-                  // position: 'absolute',
-                  // width: selectedCategory ? '80px' : '200px', // 조건부로 크기 지정
-                  // //height: selectedCategory ? '40px' : '50px',
-                  // top: '-78px',
-                  // left: '-108px', // 오른쪽에서 왼쪽으로 변경
-                  position: 'absolute',
-                  width: '45%', // 조건부로 크기 지정
-                  top: '-3%',
-                  left: selectedChannel ? '0%' : '-17%',
-                }}
-              />
-            </button>
+        <button onClick={switchMainpage}>
+          <img
+            src={TeamN}
+            alt="logo box"
+            style={{
+              position: 'absolute',
+              width: '45%',
+              top: '-3%',
+              left: selectedChannel ? '0%' : '-17%',
+            }}
+          />
+        </button>
       </div>
     </div>
   );
 };
 
-export default SubscribePage;
+export default SubscribePage;

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);
   };

frontend/src/pages/sidepanel/Dropdown.css

@@ -0,0 +1,16 @@
+/* Dropdown.css */
+.dropdown-item {
+  padding: 10px 20px;
+  cursor: pointer; /* 마우스를 올렸을 때 커서 모양 변경 */
+  transition: background-color 0.3s; /* 부드러운 색상 전환 효과 */
+}
+
+.dropdown-item:hover {
+  background-color: #e0e0e0; /* 마우스를 올렸을 때 배경색 변경 */
+}
+.dropdown-menu {
+  position: absolute;
+  right: 0; /* 오른쪽 끝에 정렬 */
+  width: 200px; /* 적절한 너비 설정 */
+  /* 기타 스타일 */
+}