feat:스켈레톤 ui 구현 / 모든 오류 수정

2023-Winter-Bootcamp-Team-N · Jan 29, 2024 · b969552 · b969552
1 parent 35b8a32
commit b969552
Show file tree

Hide file tree

Showing 6 changed files with 185 additions and 139 deletions.
diff --git a/frontend/src/assets/img/dropdownButton.svg b/frontend/src/assets/img/dropdownButton.svg
diff --git a/frontend/src/assets/img/dropdownButtonDark.svg b/frontend/src/assets/img/dropdownButtonDark.svg
diff --git a/frontend/src/pages/newtab/SubscribePage.css b/frontend/src/pages/newtab/SubscribePage.css
@@ -1,13 +1,15 @@
 .skeleton-loader {
     width: 130px;
-    height: 130px;
+    height:130px;
     border-radius: 50%;
-    margin: 0 10px;
+    margin: 10px;
     position: relative;
     overflow: hidden;
+    background: #f5f5f5;
+    box-shadow: 0px 10px 6px rgba(0, 0, 0, 0.1)
     }
 
-.skeleton-loader::before {
+    .skeleton-loader::before {
     content: "";
     position: absolute;
     top: 0;

diff --git a/frontend/src/pages/newtab/SubscribePage.tsx b/frontend/src/pages/newtab/SubscribePage.tsx
@@ -9,32 +9,24 @@ import '@pages/newtab/SubscribePage.css';
 
 
 
-const SkeletonStyle = {
-  width: '130px' ,
-  borderRadius:'100%' ,
-  backgroundColor:'#f5f5f5' , 
-  margin:'10px',
-  boxShadow: '0px 10px 6px rgba(0, 0, 0, 0.1)',
-}
-
 
 const SkeletonLoading = () => (
 
   <div>
   <div style={{ display: 'flex'  , width:'80%'}}>
     {/* 디자인에 맞게 스타일 조정 */}
-    <div className="skeleton-loader" style={{ ...SkeletonStyle }}></div>
-    <div className="skeleton-loader" style={{ ...SkeletonStyle }}></div>
-    <div className="skeleton-loader" style={{ ...SkeletonStyle }}></div>
-    <div className="skeleton-loader" style={{ ...SkeletonStyle }}></div> 
+    <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" style={{ ...SkeletonStyle }}></div>
-      <div className="skeleton-loader" style={{ ...SkeletonStyle }}></div>
-      <div className="skeleton-loader" style={{ ...SkeletonStyle }}></div>
-      <div className="skeleton-loader" style={{ ...SkeletonStyle }}></div> 
+      <div className="skeleton-loader" ></div>
+      <div className="skeleton-loader" ></div>
+      <div className="skeleton-loader" ></div>
+      <div className="skeleton-loader" ></div> 
     </div>
   </div>   
 
@@ -97,6 +89,7 @@ const SubscribePage = ({
 
   useEffect(() => {
     loadAndDisplaySubscriptions();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const ChannelComponents = channels.map(channel => (

diff --git a/frontend/src/pages/sidepanel/Dropdown.css b/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; /* 적절한 너비 설정 */
+  /* 기타 스타일 */
+}