Merge pull request #158 from 100-hours-a-week/feature/elle

Style : 미디어쿼리 적용
100-hours-a-week · Aug 28, 2024 · bf86546 · bf86546
2 parents 61d76a7 + faa6102
commit bf86546
Show file tree

Hide file tree

Showing 11 changed files with 93 additions and 15 deletions.
diff --git a/.env b/.env
@@ -0,0 +1 @@
+REACT_APP_API_URL=http://localhost:8080
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "hypertext": "^1.0.9",
     "react": "^18.3.1",
     "react-apexcharts": "^1.4.1",
+    "react-device-detect": "^2.2.3",
     "react-dom": "^18.3.1",
     "react-ga": "^3.3.1",
     "react-gtm-module": "^2.0.11",

diff --git a/src/Component/Chart/chart.tsx b/src/Component/Chart/chart.tsx
@@ -38,6 +38,9 @@ const Chart = ({ data }: CandleData) => {
         chart: {
           type: "candlestick",
           height: 350,
+          toolbar: {
+            show: true,
+          },
           events: {
             // Apply click event only to candlestick data points
             dataPointSelection: function (
@@ -49,7 +52,6 @@ const Chart = ({ data }: CandleData) => {
               setIsOpen(true);
             },
           },
-          zoom: function () {},
         },
         plotOptions: {
           candlestick: {
@@ -72,8 +74,17 @@ const Chart = ({ data }: CandleData) => {
           min: initialZoomMin,
           max: latestDate,
         },
-
         tooltip: {
+          x: {
+            formatter: function (val: any) {
+              return "";
+            },
+          },
+          y: {
+            formatter: function (val: any) {
+              return `${val}`;
+            },
+          },
           custom: function ({ seriesIndex, dataPointIndex, w }: any) {
             const close = w.globals.seriesCandleC[seriesIndex][dataPointIndex];
             const low = w.globals.seriesCandleL[seriesIndex][dataPointIndex];
@@ -101,7 +112,9 @@ const Chart = ({ data }: CandleData) => {
             const color = close > open ? "#FF5759" : "#615EFC";
 
             return `
-            <div style="padding: 5px; font-size: 12px; width: 200px; height: 200px;text-align : center">
+            <div style="margin-top : 1rem; text-align: center; margin-bottom: 1rem; font-size: 12px; color: #ADA9BB"><p>👀 캔들을 클릭해서 </p><p>그날의 뉴스를 확인해보세요!</p></div>
+            </div>
+            <div style="padding: 5px; font-size: 12px; width: 200px; height: 130px;text-align : center">
             <p style="font-family: 'SCDream7';">${xLabel}</p>
             <hr style="margin-bottom : 0.5rem;margin-top : 0.2rem;"/>
             <div style="display: flex; flex-direction: column; gap: 5px;">
@@ -116,8 +129,7 @@ const Chart = ({ data }: CandleData) => {
             )}</span></p>
             <p>종가: <span style="padding-left : 1rem; color : ${color}">${formatPrice(
               close
-            )}</span></p>
-            </div>`;
+            )}</span></p>`;
           },
         },
       };

diff --git a/src/Component/Layout/Header/Header.tsx b/src/Component/Layout/Header/Header.tsx
@@ -11,6 +11,11 @@ const HeaderStyle = styled.header`
   align-items: center;
   margin: 10px 0px;
   padding: 0px 20px;
+  @media (max-width: 768px) {
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+  }
 `;
 
 const Header = () => {

diff --git a/src/Component/Layout/Layout.tsx b/src/Component/Layout/Layout.tsx
@@ -8,13 +8,23 @@ const Main = styled.main`
   width: 500px;
   padding-top: 20px;
   padding-bottom: 60px;
+  @media (max-width: 768px) {
+    width: 100%;
+    padding: 10px;
+    padding-bottom: 60px;
+  }
 `;
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  @media (max-width: 768px) {
+    width: 100%;
+    padding: 10px;
+    padding-left: 0;
+  }
 `;
 
 const Layout = (props: { children: React.ReactNode }) => {

diff --git a/src/Component/Layout/NavBar/NavBar.tsx b/src/Component/Layout/NavBar/NavBar.tsx
@@ -13,10 +13,16 @@ const NavContainer = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: space-around;
-  box-shadow: 0px -2px 5px -2px #ada9bb;
+  border-top: 1px solid rgba(200, 200, 200, 0.5);
   padding: 12px;
   background-color: white;
   z-index: 2;
+  @media (max-width: 768px) {
+    width: 100%;
+    padding: 10px;
+    display: flex;
+    justify-content: space-evenly;
+  }
 `;
 
 const NavBoxStyle = styled.div`

diff --git a/src/Component/List/Data/stockDataList.tsx b/src/Component/List/Data/stockDataList.tsx
@@ -8,10 +8,10 @@ const ListWrapper = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 20px;
+  padding: 5px;
   gap: 10px;
-  max-height: 70vh; /* 원하는 최대 높이로 설정하세요 */
-  overflow-y: auto; /* 스크롤바를 활성화 */
+  max-height: 70vh;
+  overflow-y: auto;
   scrollbar-width: none;
 `;
 

diff --git a/src/Component/SearchBar/SearchBarStyle.ts b/src/Component/SearchBar/SearchBarStyle.ts
@@ -11,6 +11,10 @@ export const SearchBarStyle = styled.div`
   gap: 20px;
   margin-bottom: 1rem;
   position: relative;
+  @media (max-width: 768px) {
+    width: 100%;
+    padding: 10px;
+  }
 `;
 
 export const SearchImg = styled.img`

diff --git a/src/Pages/home.tsx b/src/Pages/home.tsx
@@ -11,12 +11,11 @@ import { GoTriangleDown, GoTriangleUp } from "react-icons/go";
 const Container = styled.div`
   display: flex;
   flex-direction: column;
-  align-items: center;
   padding: 25px;
 `;
 
 const MarketContainer = styled.div`
-  width: 95%;
+  width: 100%;
   height: 80px;
   box-shadow: 0px 4px 7px -2px #ada9bb;
   border-radius: 10px;
@@ -26,6 +25,10 @@ const MarketContainer = styled.div`
   justify-content: center;
   gap: 12px;
   margin: 20px 0px 25px;
+  @media (max-width: 768px) {
+    width: 100%;
+    font-size: 12px;
+  }
 `;
 
 const Kospi = styled.div`
@@ -53,7 +56,7 @@ const ListContainer = styled.div`
   width: 100%;
   display: flex;
   flex-direction: column;
-  margin-right: auto;
+  /* margin-right: auto; */
 `;
 
 const Title = styled.div`
@@ -115,7 +118,6 @@ const Home: React.FC = () => {
       })
       .then((res) => {
         if (res.status === 200) {
-          // console.log("인기종목리스트API" + JSON.stringify(res.data.stock));
           const stockData = res.data.stock;
           setList(stockData);
         } else if (res.status === 401) {
@@ -169,8 +171,8 @@ const Home: React.FC = () => {
           )}
         </Kosdaq>
       </MarketContainer>
+      <Title>오늘의 인기 종목</Title>
       <ListContainer>
-        <Title>오늘의 인기 종목</Title>
         <StockWrapper>
           {list ? <StockDataList data={list} /> : <div>로딩중</div>}
         </StockWrapper>

diff --git a/src/Styles/GlobalStyles.ts b/src/Styles/GlobalStyles.ts
@@ -7,6 +7,8 @@ export const GlobalStyle = createGlobalStyle`
     font-family: "SCDream5", "Noto Sans";
     box-sizing: border-box;
 }
+
+
 body{
 }
-`;
+`;
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,6 +7,8 @@ export const GlobalStyle = createGlobalStyle` @@
         font-family: "SCDream5", "Noto Sans";
         box-sizing: border-box;
     }
     body{
     }
-    `;
+    `;