[Fix]좌측 주식 목록 창 레이아웃 수정

주식 목록의 높이를 반응형으로 수정 스크롤이 어느 해상도에서든 프레임을 초과 하지 않도록 수정 Issues #19
codestates-seb · Sep 16, 2023 · caaa8f6 · caaa8f6
1 parent cdf417f
commit caaa8f6
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/client/src/components/EntireList/EntireList.tsx b/client/src/components/EntireList/EntireList.tsx
@@ -82,8 +82,8 @@ const Divider2 = styled.div`
 `;
 
 const StockList = styled.div`
-  width: 100%;
   height: 100%;
+  width: 100%;
   overflow-y: auto; /* 세로 스크롤을 활성화합니다 */
 
   &::-webkit-scrollbar {

diff --git a/client/src/components/HoldingList/HoldingList.tsx b/client/src/components/HoldingList/HoldingList.tsx
@@ -63,6 +63,7 @@ type WatchListProps = {
 };
 
 const WatchListContainer = styled.div`
+  height: calc(100vh - 53px); 
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -97,7 +98,11 @@ const Divider2 = styled.div`
 
 
 const StockList = styled.div`
-  width: 90%;
-  max-height: 800px;
-  overflow-y: auto;
+  height: 100%;
+  width: 100%;
+  overflow-y: auto; /* 세로 스크롤을 활성화합니다 */
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `;
diff --git a/client/src/components/watchlist/WatchList.tsx b/client/src/components/watchlist/WatchList.tsx
@@ -79,6 +79,7 @@ type WatchListProps = {
 
 // WatchList 컴포넌트에 대한 스타일드 컴포넌트 정의
 const WatchListContainer = styled.div`
+  height: calc(100vh - 53px); 
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -105,9 +106,13 @@ const Divider2 = styled.div`
 `;
 
 const StockList = styled.div`
-  width: 90%;
-  max-height: 800px; /* 스크롤이 발생할 최대 높이를 지정하세요 */
+  height: 100%;
+  width: 100%;
   overflow-y: auto; /* 세로 스크롤을 활성화합니다 */
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `;
 
 export default WatchList;