🎨Design: make FilterBar and Banner components fully responsive

.github/workflows/netlify.yml

@@ -19,6 +19,7 @@ jobs:
 
       - name: Build project
         run: npm run build
+        env: VITE_API_BASE_URL: ${{secrets.VITE_API_BASE_URL}}
 
       - name: Upload build artifact
         uses: actions/upload-artifact@v4

src/apis/axios/instance.ts

@@ -0,0 +1,10 @@
+import axios from 'axios';
+
+const instance = axios.create({
+  baseURL: `${import.meta.env.VITE_API_BASE_URL}`,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+export default instance;

src/pages/home/components/Banner/Banner.tsx

@@ -11,9 +11,11 @@ const stocks = [
 
 function Banner() {
   return (
-    <div className="flex justify-center items-center gap-[5.7rem] w-full min-h-[11.8rem] border border-main rounded-4xl bg-white">
+    <div className="flex justify-center items-center gap-[5.7rem] pl-[2.9rem] pr-[1.7rem] w-full min-h-[11.8rem] border border-main rounded-4xl bg-white">
       <div className="flex flex-col">
-        <p className="text-[2.6rem] font-bold text-main">Emotional index</p>
+        <p className="text-[2.6rem] max-[400px]:text-[2.0rem] font-bold text-main">
+          Emotional index
+        </p>
         <div className="flex flex-row gap-[0.8rem]">
           {stocks.map((stock, index) => (
             <motion.div
@@ -29,7 +31,7 @@ function Banner() {
               className="flex items-center gap-[0.4rem]"
             >
               <span
-                className={`text-[1.2rem] sm:text-[1.4rem] font-semibold ${stock.status === 'up' ? 'text-green' : 'text-red'}`}
+                className={`text-[1.2rem] max-[400px]:text-[1rem] sm:text-[1.4rem] font-semibold ${stock.status === 'up' ? 'text-green' : 'text-red'}`}
               >
                 {stock.value}
               </span>
@@ -45,7 +47,7 @@ function Banner() {
       <img
         src={bannerLogo}
         alt="banner-logo"
-        className="w-[8.4rem] h-[8.4rem]"
+        className="w-[8.4rem] h-[8.4rem] max-[400px]:w-28 max-[400px]:h-28"
       />
     </div>
   );

src/pages/home/components/Chart/ChartItem.tsx

@@ -38,12 +38,13 @@ function ChartItem() {
 
   return (
     <div className="flex items-center justify-center min-h-[16.8rem] bg-white rounded-xl">
-      <div className="w-full h-50 relative">
+      <div className="w-full h-50 relative focus:outline-none">
         <ResponsiveContainer width="100%" height="100%">
           <ChartSInfo />
           <AreaChart
             data={data}
             margin={{ top: 25, right: 20, left: -30, bottom: -5 }}
+            accessibilityLayer={false}
           >
             <ChartGradients />
 
@@ -76,6 +77,7 @@ function ChartItem() {
               contentStyle={{
                 borderRadius: '0.5rem',
                 border: 'none',
+                outline: 'none',
               }}
             />
 

src/pages/home/components/Filter/ItemFilter.tsx

@@ -21,7 +21,7 @@ const ItemFilter = ({ item }: ItemFilterProps) => {
     <button
       onClick={() => setFilter(item.value)}
       className={clsx(
-        'px-[1.6rem] py-[0.6rem] rounded-[11.7rem] cursor-pointer text-[1.4rem] transition-colors',
+        'px-[1.6rem] py-[0.6rem] rounded-[11.7rem] cursor-pointer text-[1.4rem] max-[400px]:text-[1rem] transition-colors font-semibold',
         active ? 'bg-main text-white' : 'bg-white text-font',
       )}
     >

src/styles/base.css

@@ -15,6 +15,14 @@
     background-size: cover;
     background-repeat: no-repeat;
 
+    .recharts-wrapper *,
+    .recharts-surface *,
+    .recharts-wrapper:focus,
+    .recharts-surface:focus {
+      outline: none !important;
+      -webkit-tap-highlight-color: transparent;
+    }
+
     @apply bg-white overflow-auto text-font;
   }