chore: width, maxWidth 설정 추가

-반응형 최대 너비 680px
-기본 너비 100%

Author: clicelee

src/pages/HomePage/HomePage.tsx

@@ -1,21 +1,21 @@
-import React,{ useEffect, useState } from 'react';
-import Header from "./component/Header";
+import React, { useEffect, useState } from 'react';
+import Header from './component/Header';
 import { useNavigate } from 'react-router-dom';
-import SearchBar from "./component/SearchBar";
-import IntegratedRanking from "./component/IntegratedRanking";
-import LiveDiscussion from "./component/LiveDiscussion";
-import CommunityRanking from "./component/CommunityRanking";
-import GreetingMessage from "./component/GreetingMessage";
-import logo from "@images/etc/logo.png";
-import victory_banner from "@images/victory_banner.png";
+import SearchBar from './component/SearchBar';
+import IntegratedRanking from './component/IntegratedRanking';
+import LiveDiscussion from './component/LiveDiscussion';
+import CommunityRanking from './component/CommunityRanking';
+import GreetingMessage from './component/GreetingMessage';
+import logo from '@images/etc/logo.png';
+import victory_banner from '@images/victory_banner.png';
 
 const HomePage = () => {
   // 여기에 실제 로그인 상태를 확인하는 로직을 추가해야 함 -> 추가함
   const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
   const navigate = useNavigate();
 
   useEffect(() => {
-  const token = localStorage.getItem('accessToken');
+    const token = localStorage.getItem('accessToken');
     if (token) {
       setIsLoggedIn(true);
     } else {
@@ -28,7 +28,7 @@ const HomePage = () => {
   };
 
   return (
-    <div className="bg-background w-[390px] mx-auto scrollbar-hidden">
+    <div className="bg-background w-custom max-w-custom mx-auto scrollbar-hidden">
       <Header isLoggedIn={isLoggedIn} />
       <GreetingMessage isLoggedIn={isLoggedIn} />
       <div className="flex items-center ml-[24px] mr-[24px] mt-4">
@@ -37,10 +37,14 @@ const HomePage = () => {
       </div>
       <IntegratedRanking />
       <LiveDiscussion />
-      <img src={victory_banner} alt="victory_banner" className="w-[390px] mx-auto mt-[40px] px-[20px]" />
-      <CommunityRanking/>
+      <img
+        src={victory_banner}
+        alt="victory_banner"
+        className="w-[100%] mt-[40px] px-[20px]"
+      />
+      <CommunityRanking />
     </div>
   );
-}
+};
 
 export default HomePage;

tailwind.config.js

@@ -10,47 +10,50 @@
 /** @type {import('tailwindcss').Config} */
 // eslint-disable-next-line no-undef
 module.exports = {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {
       boxShadow: {
         'custom-purple': '0px 0px 10px 0px rgba(118, 32, 228, 0.40)',
       },
       fontFamily: {
-        'pretendard': ['Pretendard', 'sans-serif']
+        pretendard: ['Pretendard', 'sans-serif'],
       },
       colors: {
-        'point100': '#F1E6FF',
-        'point200': '#D6B8FB',
-        'point300': '#BA8CF5',
-        'point400': '#914CE9',
-        'point500': '#7620E4',
-        'errorpoint': '#FF4A4A',
-        'white': '#FFFFFF',
-        'background': '#F8F9FC',
-        'gray1': '#EDF0F3',
-        'gray2' : '#CED5DB',
-        'gray3': '#9EAAB5',
-        'gray4': '#797F85',
-        'gray5': '#464F59',
-        'black': '#1D2228',
+        point100: '#F1E6FF',
+        point200: '#D6B8FB',
+        point300: '#BA8CF5',
+        point400: '#914CE9',
+        point500: '#7620E4',
+        errorpoint: '#FF4A4A',
+        white: '#FFFFFF',
+        background: '#F8F9FC',
+        gray1: '#EDF0F3',
+        gray2: '#CED5DB',
+        gray3: '#9EAAB5',
+        gray4: '#797F85',
+        gray5: '#464F59',
+        black: '#1D2228',
+      },
+      maxWidth: {
+        custom: '680px', //반응형 최대 너비
+      },
+      width: {
+        custom: '100%', //항상 화면 꽉 채우기
       },
     },
   },
   plugins: [
     function ({ addUtilities }) {
       addUtilities({
         '.scrollbar-hide': {
-          '-ms-overflow-style': 'none', /* IE and Edge */
-          'scrollbar-width': 'none', /* Firefox */
+          '-ms-overflow-style': 'none' /* IE and Edge */,
+          'scrollbar-width': 'none' /* Firefox */,
           '&::-webkit-scrollbar': {
-            display: 'none', /* Chrome, Safari, Opera */
+            display: 'none' /* Chrome, Safari, Opera */,
           },
         },
       });
     },
   ],
-}
+};