Merge pull request #86 from boostcampwm-2024/fe/chore/update_UI_Error

[FE/design] UI/UX 수정
boostcampwm-2024 · Nov 21, 2024 · a9131c3 · a9131c3
2 parents e3842ef + a3e72bf
commit a9131c3
Showing 9 changed files with 81 additions and 30 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 md:text-xs lg:text-xs xl:text-sm">
+    <div className="w-full h-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="md:max-h-20 lg:max-h-24 xl:max-h-28 overflow-y-auto">
+      <div className="md:max-h-16 lg:max-h-26 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/OwnCrop.tsx b/apps/frontend/src/components/OwnCrop.tsx
@@ -39,7 +39,7 @@ const currentCrops = [
 const OwnCrop: React.FC = () => {
   return (
     <>
-      <table className="md:text-xs lg:text-xs xl:text-sm w-full text-center">
+      <table className="h-full w-full md:text-xs lg:text-xs xl:text-sm w-full text-center">
         <thead>
           <tr>
             <th>작물명</th>

diff --git a/apps/frontend/src/components/Pagination.tsx b/apps/frontend/src/components/Pagination.tsx
@@ -9,7 +9,7 @@ const Pagination: React.FC<PaginationProps> = ({ currentPage, totalPages, onPage
     <div className="flex justify-center mt-2">
       <button
         onClick={() => onPageChange(currentPage - 1)}
-        className="px-2 py-0.5 border rounded-l text-sm disabled:opacity-50 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:shadow-none shadow-md"
+        className="px-2 py-0.5 border border-gray rounded-l text-sm disabled:opacity-50 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:shadow-none shadow-md"
         disabled={currentPage === 1}
       >
         ❮
@@ -18,14 +18,14 @@ const Pagination: React.FC<PaginationProps> = ({ currentPage, totalPages, onPage
         <button
           key={index + 1}
           onClick={() => onPageChange(index + 1)}
-          className={`px-2 py-0.5 border mx-0.5 text-sm ${currentPage === index + 1 ? 'bg-light-pink' : ''}`}
+          className={`px-2 py-0.5 border border-gray mx-0.5 text-sm ${currentPage === index + 1 ? 'bg-light-pink' : ''}`}
         >
           {index + 1}
         </button>
       ))}
       <button
         onClick={() => onPageChange(currentPage + 1)}
-        className="px-2 py-0.5 border rounded-r text-sm disabled:opacity-50 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:shadow-none shadow-md"
+        className="px-2 py-0.5 border border-gray rounded-r text-sm disabled:opacity-50 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:shadow-none shadow-md"
         disabled={currentPage === totalPages}
       >
         ❯

diff --git a/apps/frontend/src/components/Profile.tsx b/apps/frontend/src/components/Profile.tsx
@@ -1,5 +1,6 @@
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import EditIcon from '@/components/EditIcon';
+import SaveIcon from './SaveIcon';
 
 interface ProfileProps {
   id: string;
@@ -9,13 +10,17 @@ interface ProfileProps {
 const Profile: React.FC<ProfileProps> = ({ id, modalOpen }) => {
   const [introduce, setIntroduce] = useState<string>('안녕하세요! 농부왕의 농장입니다!');
   const [isEditable, setIsEditable] = useState<boolean>(false);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
 
-  const handleDoubleClick = () => {
-    setIsEditable(true);
-  };
-
-  const handleBlur = () => {
-    setIsEditable(false);
+  const editIntroduce = () => {
+    if (!isEditable) {
+      setIsEditable(true);
+      if (textareaRef.current) {
+        textareaRef.current.focus();
+      }
+    } else {
+      setIsEditable(false);
+    }
   };
 
   return (
@@ -30,14 +35,21 @@ const Profile: React.FC<ProfileProps> = ({ id, modalOpen }) => {
       </div>
       <div className="flex w-full bg-light-red mt-2 flex-grow rounded-md text-center justify-center p-2">
         <textarea
-          className={`bg-light-red text-red-soft font-bold px-2 py-1 w-full cursor-pointer resize-none rounded
-          ${isEditable ? 'focus:outline' : 'focus:outline-none'}`}
+          ref={textareaRef}
+          className={`bg-light-red text-red-soft font-bold p-1 mt-2 mx-2 w-full resize-none rounded ${isEditable ? 'border-2 border-blue-500' : 'border-none'}`}
           value={introduce}
           onChange={e => setIntroduce(e.target.value)}
           readOnly={!isEditable}
-          onDoubleClick={handleDoubleClick}
-          onBlur={handleBlur}
         />
+        {isEditable ? (
+          <>
+            <SaveIcon onClick={editIntroduce} />
+          </>
+        ) : (
+          <>
+            <EditIcon onClick={editIntroduce} />
+          </>
+        )}
       </div>
     </div>
   );

diff --git a/apps/frontend/src/components/SaveIcon.tsx b/apps/frontend/src/components/SaveIcon.tsx
@@ -0,0 +1,39 @@
+interface SaveIconProps {
+  onClick: () => void;
+}
+
+const SaveIcon: React.FC<SaveIconProps> = ({ onClick }) => (
+  <svg
+    className="cursor-pointer"
+    onClick={onClick}
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H16L21 8V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21Z"
+      stroke="black"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M17 21V13H7V21"
+      stroke="black"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M7 3V8H15"
+      stroke="black"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default SaveIcon;
diff --git a/apps/frontend/src/components/TransactionTable.tsx b/apps/frontend/src/components/TransactionTable.tsx
@@ -9,12 +9,12 @@ const TransactionTable: React.FC<TransactionTableProps> = ({ displayedTransactio
     <table className="w-full text-xs border-collapse min-h-[194px]">
       <thead>
         <tr className="bg-light-pink text-center">
-          <th className="p-2 border-b-2">시간</th>
-          <th className="p-2 border-b-2">작물명</th>
-          <th className="p-2 border-b-2">거래유형</th>
-          <th className="p-2 border-b-2">수량</th>
-          <th className="p-2 border-b-2">거래 가격</th>
-          <th className="p-2 border-b-2">거래 총액</th>
+          <th className="p-2 border-b-2 border-gray">시간</th>
+          <th className="p-2 border-b-2 border-gray">작물명</th>
+          <th className="p-2 border-b-2 border-gray">거래유형</th>
+          <th className="p-2 border-b-2 border-gray">수량</th>
+          <th className="p-2 border-b-2 border-gray">거래 가격</th>
+          <th className="p-2 border-b-2 border-gray">거래 총액</th>
         </tr>
       </thead>
       <tbody>

diff --git a/apps/frontend/src/components/WoodBoard.tsx b/apps/frontend/src/components/WoodBoard.tsx
@@ -7,7 +7,7 @@ interface WoodBoardProps {
 const WoodBoard: React.FC<WoodBoardProps> = ({ children }) => {
   return (
     <>
-      <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="flex h-full w-[45%] max-w-[580px] bg-board1 bg-no-repeat bg-[length:100%_100%] 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
@@ -33,7 +33,7 @@ const CropMarket: React.FC = () => {
 
   return (
     <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="flex flex-col items-start z-[10] gap-4 w-full lg:w-[60%] max-w-[1300px]">
         <div className="w-full flex flex-col justify-start gap-2">
           <CropSelector
             currentCrop={crop}
@@ -48,7 +48,7 @@ const CropMarket: React.FC = () => {
             <Chart timeData={timeData} />
           </div>
         </section>
-        <section className="w-full flex flex-row items-start gap-4 lg:gap-8">
+        <section className="w-full flex flex-row items-start gap-4 lg:gap-8 xl:gap-10 2xl:gap-24">
           <WoodBoard>
             <h3 className="flex justify-center lg:text-sm xl:text-base font-bold mb-2">
               오늘의 {crop} 가격

diff --git a/apps/frontend/src/services/AuthApi.tsx b/apps/frontend/src/services/AuthApi.tsx
@@ -39,9 +39,9 @@ export const login = async (data: LoginRequest) => {
     return { success: false, message: '알 수 없는 오류가 발생했습니다.' };
   } catch (error) {
     if (error instanceof Error) {
-      return { success: false, message: '로그아웃 중 오류가 발생했습니다.' };
+      return { success: false, message: '로그인 중 오류가 발생했습니다.' };
     }
-    return { success: false, message: '로그아웃 중 오류가 발생했습니다.' };
+    return { success: false, message: '로그인 중 오류가 발생했습니다.' };
   }
 };
 
@@ -56,9 +56,9 @@ export const signUp = async (data: SignUpRequest) => {
     }
   } catch (error) {
     if (error instanceof Error) {
-      return { success: false, message: '로그아웃 중 오류가 발생했습니다.' };
+      return { success: false, message: '회원가입 중 오류가 발생했습니다.' };
     }
-    return { success: false, message: '로그아웃 중 오류가 발생했습니다.' };
+    return { success: false, message: '회원가입 중 오류가 발생했습니다.' };
   }
 };