refactor: 프론트 UX 개선 리팩토링

Frontend/luckeyseven/src/components/Tabs.js

@@ -1,21 +1,22 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
-import { useRecoilValue } from 'recoil';
-import { currentTeamIdState } from '../recoil/atoms/teamAtoms';
+import {useRecoilValue} from 'recoil';
+import {currentTeamIdState} from '../recoil/atoms/teamAtoms';
 import styles from '../styles/Tabs.module.css';
 
-const Tabs = ({ activeTab, setActiveTab }) => {
+const Tabs = ({activeTab, setActiveTab}) => {
   const teamId = useRecoilValue(currentTeamIdState);
   const tabs = ['Overview', 'Members', 'Expenses', 'Settlement'];
 
   const getTabPath = (tab) => {
-    if (!teamId) return '#'; // Or handle the case where teamId is not available
+    if (!teamId) {
+      return '#';
+    } // Or handle the case where teamId is not available
 
     switch (tab) {
       case 'Expenses':
         return `/teams/${teamId}/expenses`;
-      // case 'Settlement':
-      //   return `/teams/${teamId}/settlements`;
+        // case 'Settlement':
+        //   return `/teams/${teamId}/settlements`;
       default:
         return '#'; // Overview and Members will still use setActiveTab
     }
@@ -27,14 +28,16 @@ const Tabs = ({ activeTab, setActiveTab }) => {
           const isLink = tab === 'Expenses';
           const path = getTabPath(tab);
           return (
-            <Link
-              key={tab}
-              to={path}
-              className={`${styles.tabButton} ${activeTab === tab ? styles.tabButtonActive : ''}`}
-              onClick={() => setActiveTab(tab)} // Keep active tab state for styling
-            >
-              {tab}
-            </Link>
+              <button
+                  key={tab}
+                  to={path}
+                  className={`${styles.tabButton} ${activeTab === tab
+                      ? styles.tabButtonActive : ''}`}
+                  onClick={() => setActiveTab(
+                      tab)} // Keep active tab state for styling
+              >
+                {tab}
+              </button>
           );
         })}
       </div>

Frontend/luckeyseven/src/components/settlement/settlement-detail.jsx

@@ -24,7 +24,8 @@ export function SettlementDetail({settlement: initialSettlement}) {
       <div className="card">
         <div className="card-header">
           <div className="flex justify-between items-center">
-            <h3 className="card-title">정산 #{String(settlement.id).substring(0,
+            <h3 className="card-title">정산 #{String(settlement.id).substring(
+                0,
                 8)}</h3>
             <StatusBadge isSettled={settlement.isSettled}/>
           </div>

Frontend/luckeyseven/src/components/settlement/settlement-form.jsx

@@ -13,7 +13,9 @@ export function SettlementForm({
   settlement,
   users,
   expenses,
-  isEditing = false
+  isEditing = false,
+  onFormSubmit,
+  onCancel
 }) {
   const navigate = useNavigate()
   const {addToast} = useToast()
@@ -104,6 +106,12 @@ export function SettlementForm({
             : "새로운 정산 내역이 생성되었습니다.",
       })
 
+      // onFormSubmit이 있으면 호출 (모달에서 사용할 때)
+      if (onFormSubmit) {
+        onFormSubmit(result)
+        return
+      }
+
       // 수정 완료 후 상세 페이지로 이동
       navigate(`/settlements/${isEditing ? settlement.id : result.id}`)
     } catch (error) {
@@ -118,6 +126,14 @@ export function SettlementForm({
     }
   }
 
+  const handleCancel = () => {
+    if (onCancel) {
+      onCancel()
+    } else {
+      navigate(-1)
+    }
+  }
+
   // 선택된 지출 항목 정보
   const selectedExpense = formData.expenseId ? expenses.find(
       (expense) => expense.id === formData.expenseId) : null
@@ -238,7 +254,7 @@ export function SettlementForm({
 
           <div className="card-footer">
             <button type="button" className="btn btn-outline"
-                    onClick={() => navigate(-1)} disabled={isLoading}>
+                    onClick={handleCancel} disabled={isLoading}>
               취소
             </button>
             <button type="submit" className="btn btn-primary"
@@ -249,4 +265,4 @@ export function SettlementForm({
         </div>
       </form>
   )
-}
+}

Frontend/luckeyseven/src/components/settlement/settlement-list.jsx

@@ -1,12 +1,14 @@
 "use client"
 
 import {useState} from "react"
-import {Link} from "react-router-dom"
 import {formatCurrency, formatDate} from "../../lib/utils"
 import {StatusBadge} from "../common/StatusBadge"
 import {SettlementActions} from "../common/SettlementActions"
 
-export function SettlementList({settlements: initialSettlements}) {
+export function SettlementList({
+  settlements: initialSettlements,
+  onSettlementClick
+}) {
   const [settlements, setSettlements] = useState(initialSettlements)
 
   const handleUpdate = (updatedSettlement) => {
@@ -32,8 +34,11 @@ export function SettlementList({settlements: initialSettlements}) {
   return (
       <div className="space-y-4">
         {settlements.map((settlement) => (
-            <Link to={`/settlements/${settlement.id}`} key={settlement.id}
-                  className="block">
+            <div
+                key={settlement.id}
+                onClick={() => onSettlementClick(settlement.id)}
+                className="block"
+            >
               <div className="card hover:shadow-md transition cursor-pointer">
                 <div className="card-content p-6">
                   <div className="flex justify-between items-start">
@@ -75,15 +80,24 @@ export function SettlementList({settlements: initialSettlements}) {
                       <div className="flex space-x-2">
                         <SettlementActions settlement={settlement}
                                            onUpdate={handleUpdate}
-                                           inline={true}/>
-                        <button className="btn btn-sm">상세 보기</button>
+                                           inline={true}
+                                           onClick={(e) => e.stopPropagation()}/>
+                        <button
+                            className="btn btn-sm"
+                            onClick={(e) => {
+                              e.stopPropagation()
+                              onSettlementClick(settlement.id)
+                            }}
+                        >
+                          상세 보기
+                        </button>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
-            </Link>
+            </div>
         ))}
       </div>
   )
-}
+}