Merge pull request #81 from boostcampwm-2024/fe/fix/ui_update

[FE/fix] UI 수정 및 설정 수정
boostcampwm-2024 · Nov 21, 2024 · 0948242 · 0948242
2 parents d36221a + 2f12d75
commit 0948242
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 15 deletions.
diff --git a/apps/frontend/src/components/AskingPrice.tsx b/apps/frontend/src/components/AskingPrice.tsx
@@ -36,13 +36,13 @@ interface AskingPriceProps {
 
 const AskingPrice: React.FC<AskingPriceProps> = ({ crop }) => {
   return (
-    <div className="w-full">
-      <div className="grid grid-cols-[1fr_1fr_1fr] gap-1 font-semibold bg-gray-800 py-1 px-1">
+    <div className="w-full md:text-xs lg:text-xs xl:text-sm">
+      <div className="grid grid-cols-[1fr_1fr_1fr] gap-1 font-semibold bg-gray-800 px-1">
         <div className="text-center">구분</div>
         <div className="text-center">가격</div>
         <div className="text-center">수량</div>
       </div>
-      <div className="max-h-32 overflow-y-auto">
+      <div className="md:max-h-20 lg:max-h-24 xl:max-h-28 overflow-y-auto">
         {cropPrices[crop].map(([type, price, qty], idx) => (
           <div key={idx} className="grid grid-cols-[1fr_1fr_1fr] gap-1 py-1 px-1 items-center">
             <div className="text-center">{type}</div>

diff --git a/apps/frontend/src/components/CropSelector.tsx b/apps/frontend/src/components/CropSelector.tsx
@@ -22,7 +22,7 @@ const CropSelector: React.FC<CropSelectorProps> = ({
   handleIntervalChange
 }) => {
   return (
-    <div className="w-full flex flex-row flex-wrap gap-4 sm:gap-8">
+    <div className="w-full flex flex-row flex-wrap md:gap-1 lg:gap-4 xl:gap-8 2xl:gap-10">
       {crops.map(crop => (
         <button
           key={crop}
@@ -33,7 +33,9 @@ const CropSelector: React.FC<CropSelectorProps> = ({
               : 'border-transparent hover:border-orange-500'
           }`}
         >
-          <span className={`text-sm font-medium ${crop === currentCrop ? 'text-orange-500' : ''}`}>
+          <span
+            className={`md:text-xs lg:text-sm text-sm font-medium ${crop === currentCrop ? 'text-orange-500' : ''}`}
+          >
             {crop}
           </span>
           <img src={`${cropImages[crop]}`} alt={crop} className="w-8 h-8" />

diff --git a/apps/frontend/src/components/OwnCrop.tsx b/apps/frontend/src/components/OwnCrop.tsx
@@ -39,7 +39,7 @@ const currentCrops = [
 const OwnCrop: React.FC = () => {
   return (
     <>
-      <table className="w-full text-center">
+      <table className="md:text-xs lg:text-xs xl:text-sm w-full text-center">
         <thead>
           <tr>
             <th>작물명</th>

diff --git a/apps/frontend/src/components/WoodBoard.tsx b/apps/frontend/src/components/WoodBoard.tsx
@@ -7,8 +7,8 @@ interface WoodBoardProps {
 const WoodBoard: React.FC<WoodBoardProps> = ({ children }) => {
   return (
     <>
-      <div className="flex h-60 w-full sm:w-[424px] bg-board1 bg-no-repeat bg-contain border-none rounded-lg">
-        <div className="h-full w-full p-8">{children}</div>
+      <div className="flex md:h-48 lg:h-56 xl:h-56 w-full lg:w-[520px] xl:w-[400px] bg-board1 bg-no-repeat bg-contain border-none rounded-lg">
+        <div className="h-full w-full p-4 xl:p-8 2xl:p-10">{children}</div>
       </div>
     </>
   );

diff --git a/apps/frontend/src/pages/CropMarket.tsx b/apps/frontend/src/pages/CropMarket.tsx
@@ -32,7 +32,7 @@ const CropMarket: React.FC = () => {
   };
 
   return (
-    <main className="flex flex-col lg:flex-row justify-center items-center min-h-screen select-none pt-16 gap-4">
+    <main className="flex flex-row justify-center items-center min-h-screen select-none pt-16 gap-4">
       <div className="flex flex-col items-center z-[10] gap-4 w-full lg:w-[60%]">
         <div className="w-full flex flex-col justify-start gap-2">
           <CropSelector
@@ -44,17 +44,21 @@ const CropMarket: React.FC = () => {
           <hr className="w-full bg-black h-[1px]" />
         </div>
         <section className="w-full items-center bg-light-gray border-4 border-light-pink rounded-2xl p-4">
-          <div className="h-56 flex justify-center items-center w-full">
+          <div className="h-56 flex justify-center items-center w-full sm:h-64 md:h-36 lg:h-64 xl:h-64 2xl:h-72">
             <Chart timeData={timeData} />
           </div>
         </section>
-        <section className="w-full flex flex-col lg:flex-row justify-between items-start gap-4 lg:gap-8">
+        <section className="w-full flex flex-row items-start gap-4 lg:gap-8">
           <WoodBoard>
-            <h3 className="flex justify-center text-xl font-bold mb-2">오늘의 {crop} 가격</h3>
+            <h3 className="flex justify-center lg:text-sm xl:text-base font-bold mb-2">
+              오늘의 {crop} 가격
+            </h3>
             <AskingPrice crop={crop} />
           </WoodBoard>
           <WoodBoard>
-            <h3 className="flex justify-center text-xl font-bold mb-2">보유 작물</h3>
+            <h3 className="flex justify-center lg:text-sm xl:text-base font-bold mb-2">
+              보유 작물
+            </h3>
             <OwnCrop />
           </WoodBoard>
         </section>

diff --git a/apps/frontend/vite.config.ts b/apps/frontend/vite.config.ts
@@ -6,8 +6,12 @@ import tailwindcss from 'tailwindcss';
 export default defineConfig({
   plugins: [react()],
   server: {
-    host: true,
-    port: 3000
+    hmr: {
+      protocol: 'wss',
+      host: 'yeokjeonnongbu.shop',
+      port: 3000
+    },
+    cors: true
   },
   resolve: {
     alias: {