+
+ )}
+
+ );
+}
diff --git a/src/libs/fcm/firebase.ts b/src/libs/fcm/firebase.ts
new file mode 100644
index 0000000..60e8d35
--- /dev/null
+++ b/src/libs/fcm/firebase.ts
@@ -0,0 +1,15 @@
+// src/libs/fcm/firebase.ts
+import { initializeApp } from "firebase/app";
+
+const firebaseConfig = {
+ apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
+ authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
+ projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
+ storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
+ messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
+ appId: import.meta.env.VITE_FIREBASE_APP_ID,
+ measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID,
+};
+
+const firebaseApp = initializeApp(firebaseConfig);
+export { firebaseApp };
diff --git a/src/libs/fcm/messaging.tsx b/src/libs/fcm/messaging.tsx
new file mode 100644
index 0000000..4287856
--- /dev/null
+++ b/src/libs/fcm/messaging.tsx
@@ -0,0 +1,41 @@
+// src/libs/fcm/messaging.ts
+import { getMessaging, onMessage } from "firebase/messaging";
+import { firebaseApp } from "./firebase";
+import { toast } from "react-toastify";
+
+const messaging = getMessaging(firebaseApp);
+
+let hasInitialized = false;
+
+export const initForegroundFCM = () => {
+ if (hasInitialized) return;
+ hasInitialized = true;
+
+ onMessage(messaging, (payload) => {
+ console.log("[FCM] Foreground message received:", payload);
+
+ const { title, body } = payload.notification || {};
+
+ if (title || body) {
+ toast.info(
+
+ 
+
+
+ + 앱 설치하고 푸시 알림 받기 +
+
+ 홈 화면에 설치하고
+
더 빠르게 이벤트 소식을 받아보세요.
+
+
,
+ {
+ icon: 🔔,
+ position: "top-center",
+ autoClose: 5000,
+ hideProgressBar: false,
+ closeOnClick: true,
+ pauseOnHover: true,
+ draggable: true,
+ },
+ );
+ } else {
+ console.warn("[FCM] 알림 payload가 비어있습니다.");
+ }
+ });
+};
+
+export { messaging };
diff --git a/src/libs/fcm/requestPermission.ts b/src/libs/fcm/requestPermission.ts
new file mode 100644
index 0000000..6d864c5
--- /dev/null
+++ b/src/libs/fcm/requestPermission.ts
@@ -0,0 +1,56 @@
+// src/libs/fcm/requestPermission.ts
+import { getToken } from "firebase/messaging";
+import { messaging } from "./messaging.tsx";
+import { toast } from "react-toastify";
+import { showConfirm } from "../showConfirm.ts";
+
+export const requestUserPermission = async (
+ setIsLoading?: (val: boolean) => void,
+) => {
+ try {
+ if (!("Notification" in window)) {
+ toast.error("이 브라우저는 알림을 지원하지 않습니다.");
+ return;
+ }
+
+ const shouldProceed = await showConfirm({
+ title: "알림 권한 요청",
+ text: `근무 스케줄 변경, 특이사항 보고 등
+ 실시간 알림을 받기 위해 알림 권한을 허용해주세요.`,
+ icon: "info",
+ confirmText: "허용하기",
+ cancelText: "다음에",
+ });
+
+ if (!shouldProceed) return;
+
+ const permission: NotificationPermission = await new Promise((resolve) =>
+ Notification.requestPermission(resolve),
+ );
+
+ if (permission !== "granted") {
+ toast.info("알림 권한이 허용되지 않았습니다.");
+ return;
+ }
+
+ setIsLoading?.(true);
+
+ const token = await getToken(messaging, {
+ vapidKey: import.meta.env.VITE_FIREBASE_VAPID_KEY,
+ });
+
+ if (token) {
+ localStorage.setItem("fcmToken", token);
+ toast.success("알림 기능이 활성화되었습니다.");
+ } else {
+ toast.error("알림기능 설정에 실패했습니다. 관리자에게 문의하세요.");
+ }
+ } catch (err) {
+ console.error("[FCM] 알림 토큰 발급 실패:", err);
+ toast.error(
+ "알림 기능이 활성화 중 오류가 발생했습니다. 관리자에게 문의하세요.",
+ );
+ } finally {
+ setIsLoading?.(false);
+ }
+};
diff --git a/src/routes/AppInitializer.tsx b/src/routes/AppInitializer.tsx
index 93d4443..3d9a6a8 100644
--- a/src/routes/AppInitializer.tsx
+++ b/src/routes/AppInitializer.tsx
@@ -3,6 +3,8 @@ import { useNavigate } from "react-router-dom";
import { useAuthStore } from "../stores/authStore";
import { useUserStore } from "../stores/userStore";
import { fetchUserProfile } from "../api/common/user.ts";
+import { initForegroundFCM } from "../libs/fcm/messaging.tsx";
+import { requestUserPermission } from "../libs/fcm/requestPermission.ts";
const AppInitializer = () => {
const navigate = useNavigate();
@@ -16,6 +18,11 @@ const AppInitializer = () => {
try {
const user = await fetchUserProfile();
setUser(user);
+ const hasToken = localStorage.getItem("fcmToken");
+ if (!hasToken && Notification.permission !== "granted") {
+ requestUserPermission();
+ }
+ initForegroundFCM();
} catch (err) {
logout();
navigate("/login", { replace: true });
From 90710d57806e70c4c15f14967c8b40e81d8bc106 Mon Sep 17 00:00:00 2001
From: Yoon seokchan <72729277+PaleBlueNote@users.noreply.github.com>
Date: Mon, 2 Jun 2025 18:41:51 +0900
Subject: [PATCH 02/23] =?UTF-8?q?[#41]=20=EA=B8=89=EC=97=AC=ED=8E=98?=
=?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EA=B0=9C=EB=B0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* feat: 급여 관리 탭 UI 및 기능 추가 (#41)
- 급여명세서 미리보기 탭(BossPaystubPage) 구현
- 자동송금 내역 탭(BossAutoTransferTab) 및 BossPayrollCard 컴포넌트 개선
- 공제항목 설정 탭(BossTaxTab) 및 StaffWithholdingCard 컴포넌트 구현
- 시급 설정 탭(BossWageTab) 및 StaffWageCard 컴포넌트 구현
- 급여명세서 다운로드 및 상세보기 navigate 처리 개선
- withholdingType 및 month 파라미터 처리 로직 보완
* feat: 급여 설정 페이지 구현 및 계좌 삭제 기능 추가 (#41)
- fetchPayrollSettings 로직 loadAndApplySettings 함수로 리팩토링
- 급여 설정 항목(자동송금 여부, 지급일, 차감 단위, 추가근무 허용시간) 폼 구성
- react-hook-form + zod 기반 유효성 검증 및 상태관리 적용
- 계좌 삭제 시 DELETE API 연동 및 상태 갱신 처리
* feat: 급여 내역 탭에서 과거의 일자만 조회할 수 있도록 월별 조회 로직 안정성 개선 (#41)
- getMaxMonth 함수에 settings null 검사 로직 추가
- useCallback으로 getMaxMonth 안정성 및 의존성 명확화
- settings, selectedYearMonth 상태 선언 순서 변경
- useEffect 내 비동기 호출 순서 및 예외 처리 정리
* feat: 계좌 등록 페이지 구현 및 계좌 본인 인증 연동 (#41)
- 계좌 등록 폼(AccountRegisterPage) 생성
- 은행명, 계좌번호, 생년월일, 비밀번호 입력 필드 구성
- 출금 동의 체크박스 추가
- 유저 정보(userStore) 기반 예금주명, 생년월일 자동 입력 처리
- 계좌 본인 인증 API(verifyAccountInfo) 연동
- 등록 성공 시 급여설정 페이지로 리디렉션
* feat: 알바생 급여 뷰 및 근태 조회 기능 구현 (#41)
- 알바생 본인의 월별 급여 조회 API 연동 (getStaffPayroll)
- 급여명세서 다운로드 링크 연동 및 페이지 구성
- 급여 카드 UI 구현 (그래프 + 상세 breakdown)
- 공제/실수령/기본급/주휴수당/교통비 시각화 반영
- 급여지급일 안내 메시지 조건 분기 처리
- 급여명세서 없을 경우 에러 아이콘 + 말풍선 안내 추가 (자동 닫힘, 외부 클릭 닫힘 포함)
- 근태기록 조회 및 바텀시트 연동 (AttendanceRecordContainer)
* feat: 알바생 홈페이지 급여 정보 조회 및 계좌 등록 삭제 기능 개발 (#41)
---
.env.production | 2 +-
dev-dist/sw.js | 2 +-
src/App.tsx | 54 +++-
src/api/boss/payroll.ts | 214 ++++++++++++---
src/api/staff/attendance.ts | 19 ++
src/api/staff/payroll.ts | 105 ++++++++
src/assets/NHBankIcon.png | Bin 0 -> 3768 bytes
src/components/common/Modal.tsx | 4 +-
src/components/common/SelectField.tsx | 4 +-
src/components/icons/DeleteIcon.tsx | 22 ++
src/pages/mypage/boss/AccountRegisterPage.tsx | 155 +++++++++++
.../boss/AttendanceSettingPage.tsx | 0
.../boss/BossStorePage.tsx} | 33 ++-
.../boss/NotificationSettingPage.tsx | 0
src/pages/mypage/boss/PayrollSettingPage.tsx | 248 ++++++++++++++++++
src/pages/mypage/staff/MyPageStaff.tsx | 152 -----------
.../mypage/staff/StaffAccountRegisterPage.tsx | 155 +++++++++++
.../mypage/staff/StaffDocumentContainer.tsx | 4 +-
src/pages/mypage/staff/StaffMyPage.tsx | 27 +-
.../staff/StaffPayrollSettingContainer.tsx | 163 ++++++++++++
src/pages/payroll/boss/BossPayrollCard.tsx | 206 +++++++++++----
src/pages/payroll/boss/BossPayrollPage.tsx | 23 +-
.../BossAutoTransferCheckCard.tsx | 77 ++++++
.../BossAutoTransferEditPage.tsx} | 78 +++---
.../BossAutoTransferTab.tsx} | 87 +++---
.../boss/history/BossPayrollHistoryTab.tsx | 99 +++++++
.../payroll/boss/history/BossPayslipPage.tsx | 207 +++++++++++++++
src/pages/payroll/boss/wage/BossWageTab.tsx | 75 ++++++
src/pages/payroll/boss/wage/StaffWageCard.tsx | 93 +++++++
.../boss/withholding/BossWithhodingTab.tsx | 77 ++++++
.../boss/withholding/StaffWithholdingCard.tsx | 100 +++++++
.../staff/StaffAttendanceRecordContainer.tsx | 118 +++++++++
src/pages/payroll/staff/StaffPayrollCard.tsx | 105 ++++++++
src/pages/payroll/staff/StaffPayrollPage.tsx | 174 ++++++++++++
src/pages/payroll/staff/StaffPayslipPage.tsx | 228 ++++++++++++++++
src/pages/store/boss/SalarySettingPage.tsx | 17 --
src/pages/store/boss/StoreModalContent.tsx | 54 ----
src/schemas/accountRegisterSchema.ts | 14 +
src/schemas/payrollSettingsSchema.ts | 10 +
src/types/payroll.ts | 214 +++++++++++++--
tailwind.config.ts | 12 +
41 files changed, 2988 insertions(+), 443 deletions(-)
create mode 100644 src/assets/NHBankIcon.png
create mode 100644 src/components/icons/DeleteIcon.tsx
create mode 100644 src/pages/mypage/boss/AccountRegisterPage.tsx
rename src/pages/{store => mypage}/boss/AttendanceSettingPage.tsx (100%)
rename src/pages/{store/boss/Store.tsx => mypage/boss/BossStorePage.tsx} (61%)
rename src/pages/{store => mypage}/boss/NotificationSettingPage.tsx (100%)
create mode 100644 src/pages/mypage/boss/PayrollSettingPage.tsx
delete mode 100644 src/pages/mypage/staff/MyPageStaff.tsx
create mode 100644 src/pages/mypage/staff/StaffAccountRegisterPage.tsx
create mode 100644 src/pages/mypage/staff/StaffPayrollSettingContainer.tsx
create mode 100644 src/pages/payroll/boss/autoTransfer/BossAutoTransferCheckCard.tsx
rename src/pages/payroll/boss/{BossPayrollEditPage.tsx => autoTransfer/BossAutoTransferEditPage.tsx} (58%)
rename src/pages/payroll/boss/{BossPayrollTab.tsx => autoTransfer/BossAutoTransferTab.tsx} (58%)
create mode 100644 src/pages/payroll/boss/history/BossPayrollHistoryTab.tsx
create mode 100644 src/pages/payroll/boss/history/BossPayslipPage.tsx
create mode 100644 src/pages/payroll/boss/wage/BossWageTab.tsx
create mode 100644 src/pages/payroll/boss/wage/StaffWageCard.tsx
create mode 100644 src/pages/payroll/boss/withholding/BossWithhodingTab.tsx
create mode 100644 src/pages/payroll/boss/withholding/StaffWithholdingCard.tsx
create mode 100644 src/pages/payroll/staff/StaffAttendanceRecordContainer.tsx
create mode 100644 src/pages/payroll/staff/StaffPayrollCard.tsx
create mode 100644 src/pages/payroll/staff/StaffPayrollPage.tsx
create mode 100644 src/pages/payroll/staff/StaffPayslipPage.tsx
delete mode 100644 src/pages/store/boss/SalarySettingPage.tsx
delete mode 100644 src/pages/store/boss/StoreModalContent.tsx
create mode 100644 src/schemas/accountRegisterSchema.ts
create mode 100644 src/schemas/payrollSettingsSchema.ts
diff --git a/.env.production b/.env.production
index d657c94..d430a89 100644
--- a/.env.production
+++ b/.env.production
@@ -1 +1 @@
-VITE_KAKAO_REDIRECT_URI=https://d3741u3vzg4n3d.cloudfront.net/loginSuccess
\ No newline at end of file
+VITE_KAKAO_REDIRECT_URI=https://dx44qcj8tqeon.cloudfront.net/loginSuccess
\ No newline at end of file
diff --git a/dev-dist/sw.js b/dev-dist/sw.js
index 16742e3..49ad534 100644
--- a/dev-dist/sw.js
+++ b/dev-dist/sw.js
@@ -82,7 +82,7 @@ define(['./workbox-86c9b217'], (function (workbox) { 'use strict';
"revision": "3ca0b8505b4bec776b69afdba2768812"
}, {
"url": "index.html",
- "revision": "0.ffffr9p1org"
+ "revision": "0.3s5ufdgacm"
}], {});
workbox.cleanupOutdatedCaches();
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
diff --git a/src/App.tsx b/src/App.tsx
index ce86435..4aac8a8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -23,7 +23,7 @@ const Landing = lazy(() => import("./pages/landing/Landing.tsx"));
const Schedule = lazy(() => import("./pages/schedule/boss/Schedule.tsx"));
const Employees = lazy(() => import("./pages/employee/boss/Employees.tsx"));
const Task = lazy(() => import("./pages/Task"));
-const Store = lazy(() => import("./pages/store/boss/Store.tsx"));
+const Store = lazy(() => import("./pages/mypage/boss/BossStorePage.tsx"));
const StoreRegisterBossPage = lazy(
() => import("./pages/store/boss/StoreRegisterBossPage.tsx"),
);
@@ -34,13 +34,13 @@ const StoreInfoEditPage = lazy(
() => import("./pages/store/boss/StoreInfoEditPage.tsx"),
);
const AttendanceSettingPage = lazy(
- () => import("./pages/store/boss/AttendanceSettingPage.tsx"),
+ () => import("./pages/mypage/boss/AttendanceSettingPage.tsx"),
);
-const SalarySettingPage = lazy(
- () => import("./pages/store/boss/SalarySettingPage.tsx"),
+const PayrollSettingPage = lazy(
+ () => import("./pages/mypage/boss/PayrollSettingPage.tsx"),
);
const NotificationSettingPage = lazy(
- () => import("./pages/store/boss/NotificationSettingPage.tsx"),
+ () => import("./pages/mypage/boss/NotificationSettingPage.tsx"),
);
const ContractViewPage = lazy(
() => import("./pages/contract/boss/ContractViewPage.tsx"),
@@ -66,8 +66,15 @@ const ContractTemplateEditPage = lazy(
const BossPayrollPage = lazy(
() => import("./pages/payroll/boss/BossPayrollPage.tsx"),
);
-const BossPayrollEditPage = lazy(
- () => import("./pages/payroll/boss/BossPayrollEditPage.tsx"),
+const BossAutoTransferEditPage = lazy(
+ () =>
+ import("./pages/payroll/boss/autoTransfer/BossAutoTransferEditPage.tsx"),
+);
+const BossPayslipPage = lazy(
+ () => import("./pages/payroll/boss/history/BossPayslipPage.tsx"),
+);
+const AccountRegisterPage = lazy(
+ () => import("./pages/mypage/boss/AccountRegisterPage.tsx"),
);
// Lazy-loaded components (staff)
@@ -90,6 +97,15 @@ const StaffMyPage = lazy(() => import("./pages/mypage/staff/StaffMyPage.tsx"));
const StaffDocumentPage = lazy(
() => import("./pages/document/staff/StaffDocumentPage.tsx"),
);
+const StaffPayslipPage = lazy(
+ () => import("./pages/payroll/staff/StaffPayslipPage.tsx"),
+);
+const StaffPayrollPage = lazy(
+ () => import("./pages/payroll/staff/StaffPayrollPage.tsx"),
+);
+const StaffAccountRegisterPage = lazy(
+ () => import("./pages/mypage/staff/StaffAccountRegisterPage.tsx"),
+);
function App() {
return (
@@ -145,8 +161,12 @@ function App() {
element={{title}
+{body}
+
+
{title ? (
- handleSelect(opt.value)}
- className="body-2 cursor-pointer px-4 py-3 hover:bg-grayscale-100"
+ className="body-3 cursor-pointer px-4 py-3 hover:bg-grayscale-100"
>
{opt.label}
diff --git a/src/components/icons/DeleteIcon.tsx b/src/components/icons/DeleteIcon.tsx
new file mode 100644
index 0000000..060082d
--- /dev/null
+++ b/src/components/icons/DeleteIcon.tsx
@@ -0,0 +1,22 @@
+export default function DeleteIcon({
+ className,
+ fill = "#939393",
+ ...props
+}: React.ComponentProps<"svg">) {
+ return (
+
+ );
+}
diff --git a/src/pages/mypage/boss/AccountRegisterPage.tsx b/src/pages/mypage/boss/AccountRegisterPage.tsx
new file mode 100644
index 0000000..c0cfa6b
--- /dev/null
+++ b/src/pages/mypage/boss/AccountRegisterPage.tsx
@@ -0,0 +1,155 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useLayout } from "../../../hooks/useLayout.ts";
+import { verifyAccountInfo } from "../../../api/boss/payroll.ts";
+import useStoreStore from "../../../stores/storeStore.ts";
+import { useUserStore } from "../../../stores/userStore.ts";
+import { toast } from "react-toastify";
+import { useNavigate } from "react-router-dom";
+import TextField from "../../../components/common/TextField.tsx";
+import SelectField from "../../../components/common/SelectField.tsx";
+import Checkbox from "../../../components/common/Checkbox.tsx";
+import Button from "../../../components/common/Button.tsx";
+import {
+ accountRegisterSchema,
+ AccountRegisterForm,
+} from "../../../schemas/accountRegisterSchema";
+
+const bankNameOptions = [{ label: "농협은행", value: "농협은행" }];
+
+const AccountRegisterPage = () => {
+ const { selectedStore } = useStoreStore();
+ const { user } = useUserStore();
+ const navigate = useNavigate();
+
+ const {
+ control,
+ handleSubmit,
+ formState: { isDirty, isValid },
+ } = useForm({
+ resolver: zodResolver(accountRegisterSchema),
+ mode: "onChange",
+ defaultValues: {
+ bankName: "농협은행",
+ accountNumber: "",
+ birthdate: user?.birth?.replace(/-/g, "") ?? "",
+ password: "",
+ agreeWithdraw: false,
+ },
+ });
+
+ useLayout({
+ title: "계좌 등록하기",
+ theme: "plain",
+ bottomNavVisible: false,
+ });
+
+ const onSubmit = async (data: AccountRegisterForm) => {
+ if (!selectedStore) return;
+
+ try {
+ await verifyAccountInfo(selectedStore.storeId, data);
+ toast.success("계좌가 등록되었습니다.");
+ navigate("/boss/store/payroll-setting", { replace: true });
+ } catch (e) {
+ console.error(e);
+ }
+ };
+
+ return (
+
+ );
+};
+
+export default AccountRegisterPage;
diff --git a/src/pages/store/boss/AttendanceSettingPage.tsx b/src/pages/mypage/boss/AttendanceSettingPage.tsx
similarity index 100%
rename from src/pages/store/boss/AttendanceSettingPage.tsx
rename to src/pages/mypage/boss/AttendanceSettingPage.tsx
diff --git a/src/pages/store/boss/Store.tsx b/src/pages/mypage/boss/BossStorePage.tsx
similarity index 61%
rename from src/pages/store/boss/Store.tsx
rename to src/pages/mypage/boss/BossStorePage.tsx
index fc12223..640c890 100644
--- a/src/pages/store/boss/Store.tsx
+++ b/src/pages/mypage/boss/BossStorePage.tsx
@@ -1,11 +1,34 @@
import { useNavigate } from "react-router-dom";
-import BossStoreCard from "./BossStoreCard.tsx";
+import BossStoreCard from "../../store/boss/BossStoreCard.tsx";
+import { useUserStore } from "../../../stores/userStore.ts";
+
+const BossStorePage = () => {
+ const { user } = useUserStore();
-const Store = () => {
const navigate = useNavigate();
return (
-
{title}
+{title}
) : (
+
+
+ 
+
+
+ {user?.name}
+
+
+
+ 전화번호
+ {user?.phone}
+
+
+ 이메일
+ {user?.email}
+
+
@@ -30,7 +53,7 @@ const Store = () => {
navigate("/boss/store/salary")}
+ onClick={() => navigate("/boss/store/payroll-setting")}
className="cursor-pointer flex py-3 px-4 border border-grayscale-300 bg-white shadow-basic rounded-xl flex-col justify-center items-start gap-2 self-stretch"
>
급여 설정
@@ -53,4 +76,4 @@ const Store = () => {
);
};
-export default Store;
+export default BossStorePage;
diff --git a/src/pages/store/boss/NotificationSettingPage.tsx b/src/pages/mypage/boss/NotificationSettingPage.tsx
similarity index 100%
rename from src/pages/store/boss/NotificationSettingPage.tsx
rename to src/pages/mypage/boss/NotificationSettingPage.tsx
diff --git a/src/pages/mypage/boss/PayrollSettingPage.tsx b/src/pages/mypage/boss/PayrollSettingPage.tsx
new file mode 100644
index 0000000..8b7cb4c
--- /dev/null
+++ b/src/pages/mypage/boss/PayrollSettingPage.tsx
@@ -0,0 +1,248 @@
+import { useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+ payrollSettingsSchema,
+ PayrollSettingsForm,
+} from "../../../schemas/payrollSettingsSchema";
+import useStoreStore from "../../../stores/storeStore.ts";
+import {
+ deleteAccountInfo,
+ fetchPayrollSettings,
+ updatePayrollSettings,
+} from "../../../api/boss/payroll.ts";
+import SelectField from "../../../components/common/SelectField.tsx";
+import Button from "../../../components/common/Button.tsx";
+import ErrorIcon from "../../../components/icons/ErrorIcon.tsx";
+import DeleteIcon from "../../../components/icons/DeleteIcon.tsx";
+import { useLayout } from "../../../hooks/useLayout.ts";
+import { toast } from "react-toastify";
+import { PayrollSettingsResponse } from "../../../types/payroll.ts";
+import NHBankIcon from "../../../assets/NHBankIcon.png";
+import { useNavigate } from "react-router-dom";
+import { showConfirm } from "../../../libs/showConfirm.ts";
+
+const deductionOptions = [
+ { label: "0분 단위", value: "ZERO_MIN" },
+ { label: "5분 단위", value: "FIVE_MIN" },
+ { label: "10분 단위", value: "TEN_MIN" },
+ { label: "30분 단위", value: "THIRTY_MIN" },
+];
+
+const transferOptions = [
+ { label: "자동송금 사용", value: "true" },
+ { label: "수동 송금", value: "false" },
+];
+
+const extraWorkOptions = [
+ { label: "0분", value: "0" },
+ { label: "30분", value: "30" },
+ { label: "60분", value: "60" },
+ { label: "90분", value: "90" },
+];
+
+const PayrollSettingPage = () => {
+ const { selectedStore } = useStoreStore();
+ const [account, setAccount] =
+ useState(null);
+ const navigate = useNavigate();
+ const {
+ control,
+ handleSubmit,
+ reset,
+ formState: { isDirty, isValid },
+ } = useForm({
+ resolver: zodResolver(payrollSettingsSchema),
+ mode: "onChange",
+ defaultValues: {
+ autoTransferEnabled: true,
+ transferDate: null,
+ deductionUnit: "ZERO_MIN",
+ commutingAllowance: 0,
+ },
+ });
+
+ useLayout({
+ title: "급여 설정",
+ theme: "plain",
+ bottomNavVisible: false,
+ });
+
+ useEffect(() => {
+ loadAndApplySettings();
+ }, [selectedStore]);
+
+ const loadAndApplySettings = async () => {
+ if (!selectedStore) return;
+ const data = await fetchPayrollSettings(selectedStore.storeId);
+ setAccount(data.account);
+ reset(data);
+ };
+
+ const onSubmit = async (data: PayrollSettingsForm) => {
+ if (!selectedStore) return;
+ try {
+ await updatePayrollSettings(selectedStore.storeId, data);
+ toast.success("급여 설정이 저장되었습니다.");
+ await loadAndApplySettings();
+ } catch (e) {
+ toast.error("저장에 실패했습니다.");
+ }
+ };
+
+ const handleDeleteAccount = async (
+ e: React.MouseEvent,
+ ) => {
+ e.preventDefault();
+ if (!selectedStore) return;
+
+ const confirmed = await showConfirm({
+ title: "계좌를 삭제하시겠습니까?",
+ text: "계좌 정보는 삭제 후 재등록할 수 있습니다.",
+ confirmText: "삭제",
+ cancelText: "취소",
+ icon: "warning",
+ });
+
+ if (!confirmed) return;
+
+ try {
+ await deleteAccountInfo(selectedStore.storeId);
+ toast.success("계좌 정보가 삭제되었습니다.");
+ await loadAndApplySettings();
+ } catch (err) {
+ toast.error("계좌 삭제에 실패했습니다.");
+ console.error(err);
+ }
+ };
+
+ const redirectRegisterAccount = (e: React.MouseEvent) => {
+ e.preventDefault();
+ navigate("/boss/store/account-register");
+ };
+
+ return (
+
+ );
+};
+
+export default PayrollSettingPage;
diff --git a/src/pages/mypage/staff/MyPageStaff.tsx b/src/pages/mypage/staff/MyPageStaff.tsx
deleted file mode 100644
index 056f65e..0000000
--- a/src/pages/mypage/staff/MyPageStaff.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import { useEffect, useState } from "react";
-import { getStoreList } from "../../../api/boss/store.ts";
-import ErrorIcon from "../../../components/icons/ErrorIcon.tsx";
-import { useNavigate } from "react-router-dom";
-import ArrowIcon from "../../../components/icons/ArrowIcon.tsx";
-import useBottomSheetStore from "../../../stores/useBottomSheetStore.ts";
-import useStoreStore from "../../../stores/storeStore.ts";
-import { StoreSummaryBoss } from "../../../types/store.ts";
-import StoreBottomSheetContent from "../../store/boss/StoreBottomSheetContent.tsx";
-import FullScreenLoading from "../../../components/common/FullScreenLoading.tsx"; // ✅ zustand store import
-
-const Store = () => {
- const navigate = useNavigate();
- const { setBottomSheetContent } = useBottomSheetStore();
- const { selectedStore, setSelectedStore } = useStoreStore(); // ✅ store hook
- const [storeList, setStoreList] = useState(null);
- const [loading, setLoading] = useState(true);
-
- const openStoreSheet = () => {
- setBottomSheetContent(({
+ resolver: zodResolver(accountRegisterSchema),
+ mode: "onChange",
+ defaultValues: {
+ bankName: "농협은행",
+ accountNumber: "",
+ birthdate: user?.birth?.replace(/-/g, "") ?? "",
+ password: "",
+ agreeWithdraw: false,
+ },
+ });
+
+ useLayout({
+ title: "계좌 등록하기",
+ theme: "plain",
+ bottomNavVisible: false,
+ });
+
+ const onSubmit = async (data: AccountRegisterForm) => {
+ if (!selectedStore) return;
+
+ try {
+ await verifyStaffAccount(selectedStore.storeId, data);
+ toast.success("계좌가 등록되었습니다.");
+ navigate("/staff/mypage", { replace: true });
+ } catch (e) {
+ console.error(e);
+ }
+ };
+
+ return (
+
+ );
+};
+
+export default StaffAccountRegisterPage;
diff --git a/src/pages/mypage/staff/StaffDocumentContainer.tsx b/src/pages/mypage/staff/StaffDocumentContainer.tsx
index c93beba..00770ec 100644
--- a/src/pages/mypage/staff/StaffDocumentContainer.tsx
+++ b/src/pages/mypage/staff/StaffDocumentContainer.tsx
@@ -56,8 +56,8 @@ const StaffDocumentContainer = () => {
);
return (
-
-
- );
- }
-
- // ✅ 표시할 매장: selectedStore가 있으면 사용, 없으면 null 처리
- const activeStore = selectedStore ?? storeList[0];
-
- return (
-
-
-
- 현재 등록된 매장이 없습니다!
-
- 매장을 추가해 주세요. -
- - 매장을 추가해 주세요. -
- + 매장 추가하기
-
-
-
- );
-};
-
-export default Store;
diff --git a/src/pages/mypage/staff/StaffAccountRegisterPage.tsx b/src/pages/mypage/staff/StaffAccountRegisterPage.tsx
new file mode 100644
index 0000000..5ec272f
--- /dev/null
+++ b/src/pages/mypage/staff/StaffAccountRegisterPage.tsx
@@ -0,0 +1,155 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useLayout } from "../../../hooks/useLayout.ts";
+import { useUserStore } from "../../../stores/userStore.ts";
+import { toast } from "react-toastify";
+import { useNavigate } from "react-router-dom";
+import TextField from "../../../components/common/TextField.tsx";
+import SelectField from "../../../components/common/SelectField.tsx";
+import Checkbox from "../../../components/common/Checkbox.tsx";
+import Button from "../../../components/common/Button.tsx";
+import {
+ accountRegisterSchema,
+ AccountRegisterForm,
+} from "../../../schemas/accountRegisterSchema";
+import useStaffStoreStore from "../../../stores/useStaffStoreStore.ts";
+import { verifyStaffAccount } from "../../../api/staff/payroll.ts";
+
+const bankNameOptions = [{ label: "농협은행", value: "농협은행" }];
+
+const StaffAccountRegisterPage = () => {
+ const { selectedStore } = useStaffStoreStore();
+ const { user } = useUserStore();
+ const navigate = useNavigate();
+
+ const {
+ control,
+ handleSubmit,
+ formState: { isDirty, isValid },
+ } = useForm
-
-
- {/* 메뉴 카드들 */}
-
-
- {activeStore.storeType}
-
-
-
- {activeStore.storeName}
-
-
- 주소
-
- {activeStore.address}
-
-
-
- 초대코드
-
- {activeStore.inviteCode}
-
-
-
-
- navigate("/boss/store/info")}
- className="cursor-pointer flex py-3 px-4 border border-grayscale-300 bg-white shadow-basic rounded-xl flex-col justify-center items-start gap-2 self-stretch"
- >
- 매장 정보
-
- 망고보스에 등록된 매장의 정보를 확인해요
-
-
-
- navigate("/boss/store/attendance")}
- className="cursor-pointer flex py-3 px-4 border border-grayscale-300 bg-white shadow-basic rounded-xl flex-col justify-center items-start gap-2 self-stretch"
- >
- 출퇴근 방식 설정
-
- 알바생이 출퇴근하는 방식을 설정해요
-
-
-
- navigate("/boss/store/salary")}
- className="cursor-pointer flex py-3 px-4 border border-grayscale-300 bg-white shadow-basic rounded-xl flex-col justify-center items-start gap-2 self-stretch"
- >
- 급여 설정
-
- 매장에서 제공하는 급여 정보를 설정해요
-
-
-
- navigate("/boss/store/notification")}
- className="cursor-pointer flex py-3 px-4 border border-grayscale-300 bg-white shadow-basic rounded-xl flex-col justify-center items-start gap-2 self-stretch"
- >
- 알림 설정
-
- 매장에서의 알림 범위를 설정해요
-
-
-
-
내가 제출한 서류
+
+
내가 제출한 서류
{isDocsCountZero ? (
제출한 서류가 없습니다.
diff --git a/src/pages/mypage/staff/StaffMyPage.tsx b/src/pages/mypage/staff/StaffMyPage.tsx
index da652eb..76d967a 100644
--- a/src/pages/mypage/staff/StaffMyPage.tsx
+++ b/src/pages/mypage/staff/StaffMyPage.tsx
@@ -1,31 +1,38 @@
import StaffStoreCard from "../../store/staff/StaffStoreCard.tsx";
import { useUserStore } from "../../../stores/userStore.ts";
import StaffDocumentContainer from "./StaffDocumentContainer.tsx";
+import StaffPayrollSettingContainer from "./StaffPayrollSettingContainer.tsx";
const StaffMyPage = () => {
const { user } = useUserStore();
return (
-
+
-
(
+ null,
+ );
+ const [account, setAccount] = useState(null);
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ if (!selectedStore) return;
+ setLoading(true);
+ Promise.all([fetchAccountInfo(), fetchPayrollInfo()]).finally(() => {
+ setLoading(false);
+ });
+ }, [selectedStore]);
+
+ const fetchAccountInfo = async () => {
+ if (!selectedStore) return;
+ try {
+ const accountRes = await getStaffAccount(selectedStore.storeId);
+ setAccount(accountRes);
+ console.log(accountRes);
+ } catch (err) {
+ console.error("계좌 정보 오류:", err);
+ }
+ };
+
+ const fetchPayrollInfo = async () => {
+ if (!selectedStore) return;
+ try {
+ const payrollRes = await getStaffPayrollInfo(selectedStore.storeId);
+ setPayrollInfo(payrollRes);
+ } catch (err) {
+ console.error("급여 정보 오류:", err);
+ }
+ };
+
+ const handleDeleteAccount = async (
+ e: React.MouseEvent,
+ ) => {
+ e.preventDefault();
+ if (!selectedStore) return;
+
+ const confirmed = await showConfirm({
+ title: "계좌를 삭제하시겠습니까?",
+ text: "계좌 정보는 삭제 후 재등록할 수 있습니다.",
+ confirmText: "삭제",
+ cancelText: "취소",
+ icon: "warning",
+ });
+
+ if (!confirmed) return;
+
+ try {
+ await deleteStaffAccountInfo(selectedStore.storeId);
+ toast.success("계좌 정보가 삭제되었습니다.");
+ await fetchAccountInfo();
+ } catch (err) {
+ toast.error("계좌 삭제에 실패했습니다.");
+ console.error(err);
+ }
+ };
+
+ const redirectRegisterAccount = (e: React.MouseEvent) => {
+ e.preventDefault();
+ navigate("/staff/store/account-register");
+ };
+
+ return (
+ (null);
+ useClickOutside(popupRef, () => setPopupOpen(false));
+
+ const transferStateUi = info?.transferState
+ ? stateStyleMap[info.transferState]
+ : null;
+
+ const handlePreviewPayroll = () => {
+ setPopupOpen(false);
+
+ if (info?.payrollId) {
+ navigate(`/boss/payroll/payslip?payrollId=${info.payrollId}`);
+ return;
+ }
+
+ if (staff?.staffId && data?.month) {
+ navigate(
+ `/boss/payroll/payslip?staffId=${staff.staffId}&month=${data.month}`,
+ );
+ return;
+ }
+
+ toast.error("급여명세서 정보를 확인할 수 없습니다.");
+ };
+
+ const handleDownloadPdf = async () => {
+ setPopupOpen(false);
+ if (!selectedStore) {
+ toast.error("매장 정보가 확인되지 않았습니다.");
+ return;
+ }
+ if (!info || !info.payslipId) {
+ toast.error("급여명세서 정보가 없습니다.");
+ return;
+ }
+ try {
+ const { url } = await fetchPayslipDownloadLink(
+ selectedStore.storeId,
+ info.payslipId,
+ );
+
+ const a = document.createElement("a");
+ a.href = url;
+ a.download = `${staff.name + data.month + " 월 급여명세서"}.pdf`;
+ a.click();
+ } catch (e) {
+ console.error("다운로드 오류", e);
+ }
+ };
return (
-
-
{user?.name}
- +
+
{user?.name}
+
+
+ 전화번호
+ {user?.phone}
+
+
+ 이메일
+ {user?.email}
+
+ 내 매장
-
+
+ {/* 계좌 영역 */}
+
+
+ {loading ? (
+
+
+
+
+
+ {loading ? (
+
+
+ );
+};
+
+export default StaffPayrollSettingContainer;
diff --git a/src/pages/payroll/boss/BossPayrollCard.tsx b/src/pages/payroll/boss/BossPayrollCard.tsx
index f4b1bf9..c520c78 100644
--- a/src/pages/payroll/boss/BossPayrollCard.tsx
+++ b/src/pages/payroll/boss/BossPayrollCard.tsx
@@ -1,75 +1,175 @@
-// src/components/payroll/BossPayrollCard.tsx
+// src/components/payroll/BossAutoTransferStaticCard.tsx
import {
- CheckboxFilled,
- CheckboxOff,
-} from "../../../components/icons/CheckboxIcon.tsx";
-import { StaffPayroll } from "../../../types/payroll.ts";
+ ConfirmedTransferItem,
+ MonthlyPayrollItem,
+} from "../../../types/payroll.ts";
+import MoreIcon from "../../../components/common/MoreIcon.tsx";
+import useClickOutside from "../../../hooks/useClickOutside.ts";
+import { AnimatePresence, motion } from "framer-motion";
+import { toast } from "react-toastify";
+import { useNavigate } from "react-router-dom";
+import { useRef, useState } from "react";
+import { fetchPayslipDownloadLink } from "../../../api/boss/payroll.ts";
+import useStoreStore from "../../../stores/storeStore.ts";
+import { cn } from "../../../libs";
interface Props {
- data: StaffPayroll;
- checked: boolean;
- editable: boolean;
- onToggle: (key: string) => void;
+ item: ConfirmedTransferItem | MonthlyPayrollItem;
}
-const BossPayrollCard = ({ data, checked, editable, onToggle }: Props) => {
- const { staff, payroll } = data;
+const stateStyleMap = {
+ COMPLETED: {
+ label: "송금 완료",
+ text: "text-green-700",
+ },
+ PENDING: {
+ label: "송금 대기 중",
+ text: "text-yellow-700",
+ },
+ FAILED: {
+ label: "송금 실패",
+ text: "text-red-700",
+ },
+} as const;
+const BossPayrollCard = ({ item }: Props) => {
+ const { staff, data, info } = item;
+ const navigate = useNavigate();
+ const { selectedStore } = useStoreStore();
+ const [popupOpen, setPopupOpen] = useState(false);
+ const popupRef = useRef
+
+
+
+ ) : payrollInfo ? (
+
+
+ ) : (
+
+
+ 시급: {payrollInfo.hourlyWage.toLocaleString()}원
++ 세액공제:{" "} + { + { + INCOME_TAX: "원천징수 3.3%", + SOCIAL_INSURANCE: "4대보험 9.4%", + NONE: "보험적용안함", + }[payrollInfo.withholdingType] + } +
++ 급여 정보가 등록되지 않았습니다. +
+ )} +
+
+
+
+ ) : account && account.bankName ? (
+
+
+ ) : (
+
+
+
+
+ 
+
+ {account.bankName}
+
+
+ + {account.accountNumber} +
+
+
+ )}
+ 등록된 계좌가 없습니다.
+ +
-
- {/* 왼쪽: 프로필 + 급여 정보 */}
-
-
- {staff.profileImageUrl && (
- 
- )}
-
-
-
{staff.name}
-- {payroll.bankCode} {payroll.account} -
+
+
+
-
-
+
-
- {/* 오른쪽: 체크박스 */}
+
+ {staff.profileImageUrl && (
+
+ )}
+
+
+
{staff.name}
+ {data.bankCode && data.account && ( ++ {data.bankCode} {data.account} +
+ )} +
+
+ {popupOpen && (
+ e.stopPropagation()}
+ >
+
+ {info && info.payslipId && (
+
+ )}
+
+ )}
+
);
};
diff --git a/src/pages/payroll/boss/BossPayrollPage.tsx b/src/pages/payroll/boss/BossPayrollPage.tsx
index e82fa45..65fece9 100644
--- a/src/pages/payroll/boss/BossPayrollPage.tsx
+++ b/src/pages/payroll/boss/BossPayrollPage.tsx
@@ -1,21 +1,25 @@
import { useSearchParams } from "react-router-dom";
import { useEffect } from "react";
import clsx from "clsx";
-import BossPayrollTab from "./BossPayrollTab.tsx";
+import BossAutoTransferTab from "./autoTransfer/BossAutoTransferTab.tsx";
+import BossPayrollHistoryTab from "./history/BossPayrollHistoryTab.tsx";
+import BossWithhodingTab from "./withholding/BossWithhodingTab.tsx";
+import BossWageTab from "./wage/BossWageTab.tsx";
const tabItems = [
- { label: "급여", value: "payroll" },
+ { label: "급여 내역", value: "history" },
+ { label: "자동 송금", value: "autoTransfer" },
{ label: "공제 항목", value: "withholding" },
- { label: "급여명세서", value: "paystub" },
+ { label: "시급 설정", value: "wage" },
];
const BossPayrollPage = () => {
const [searchParams, setSearchParams] = useSearchParams();
- const currentTab = searchParams.get("type") || "payroll";
+ const currentTab = searchParams.get("type") || "history";
useEffect(() => {
if (!searchParams.get("type")) {
- setSearchParams({ type: "payroll" });
+ setSearchParams({ type: "history" });
}
}, [searchParams, setSearchParams]);
@@ -26,7 +30,7 @@ const BossPayrollPage = () => {
return (
총 근무시간
- {payroll.totalTime}시간
+ {data.totalTime}시간
-
- 실 지급액
-
- {payroll.netAmount.toLocaleString()}원
-
+
+
+
+ 실 지급액
+
+ {data.netAmount.toLocaleString()}원
+
+
+ {transferStateUi ? (
+
+ {transferStateUi.label}
+
+ ) : (
+ 자동송금 미사용
+ )}
{/* 탭 영역 */}
- ([]);
+ const [settings, setSettings] = useState(
+ null,
+ );
+
+ const getMaxMonth = useCallback(() => {
+ const now = getKSTDate();
+ const year = now.getFullYear();
+
+ let month = now.getMonth();
+
+ if (settings?.transferDate != null) {
+ const remaining = getRemainingDays(settings.transferDate);
+ if (remaining < 0) {
+ month -= 1;
+ }
+ }
+
+ return `${year}-${String(month).padStart(2, "0")}`;
+ }, [settings]);
+
+ const [selectedYearMonth, setSelectedYearMonth] = useState(getMaxMonth);
+
+ useEffect(() => {
+ const loadData = async () => {
+ if (!selectedStore) return;
+ setLoading(true);
+
+ try {
+ const [settingsResult, payrollResult] = await Promise.all([
+ fetchPayrollSettings(selectedStore.storeId),
+ fetchMonthlyPayrolls(selectedStore.storeId, selectedYearMonth),
+ ]);
+
+ setSettings(settingsResult);
+ setPayrollItems(payrollResult);
+ } catch (err) {
+ console.error("급여 내역 조회 실패:", err);
+ setPayrollItems([]);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ loadData();
+ }, [selectedStore, selectedYearMonth]);
+
+ return (
+ (null);
+ const [loading, setLoading] = useState(true);
+
+ const handleDownload = async () => {
+ if (!selectedStore || !info?.payslipId) return;
+
+ try {
+ const { url } = await fetchPayslipDownloadLink(
+ selectedStore.storeId,
+ info.payslipId,
+ );
+
+ const a = document.createElement("a");
+ a.href = url;
+ a.download = `payslip_${staffName}_${dayjs(month).format("YYYYMM")}.pdf`;
+ a.click();
+ } catch (err) {
+ console.error("급여명세서 다운로드 실패", err);
+ }
+ };
+
+ const downloadButton =
+ paystub?.info?.payslipId && selectedStore ? (
+
+ ) : null;
+
+ useLayout({
+ title: "급여명세서 미리보기",
+ theme: "plain",
+ headerVisible: true,
+ bottomNavVisible: false,
+ onBack: () => history.back(),
+ rightIcon: downloadButton,
+ });
+
+ useEffect(() => {
+ const load = async () => {
+ if (!selectedStore) return;
+
+ const payrollId = searchParams.get("payrollId");
+ const staffId = searchParams.get("staffId");
+ const month = searchParams.get("month");
+
+ setLoading(true);
+ try {
+ let result: PayrollDetailResponse;
+
+ if (payrollId) {
+ result = await fetchPayrollDetail(
+ selectedStore.storeId,
+ Number(payrollId),
+ );
+ } else if (staffId && month) {
+ const formattedMonth = dayjs(month).format("YYYY-MM");
+ result = await fetchUnconfirmedPayrollDetail(
+ selectedStore.storeId,
+ Number(staffId),
+ formattedMonth,
+ );
+ } else {
+ toast.error("잘못된 접근입니다.");
+ return;
+ }
+
+ setPaystub(result);
+ } catch (e) {
+ console.error("명세서 조회 실패", e);
+ toast.error("급여명세서 조회 중 오류가 발생했습니다.");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ load();
+ }, [searchParams, selectedStore]);
+
+ if (loading) {
+ return (
+ ([]);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ const loadData = async () => {
+ if (!selectedStore) return;
+
+ setLoading(true);
+ try {
+ const response = await fetchHourlyWageList(selectedStore.storeId);
+ setStaffWageInfo(response);
+ } catch (err) {
+ console.error("공제 항목 조회 실패", err);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ loadData();
+ }, [selectedStore]);
+
+ return (
+ ) => {
+ const val = e.target.value;
+ // 숫자만 허용
+ if (!/^\d*$/.test(val)) return;
+ setWage(val);
+ setIsDirty(val !== initialWage.toString());
+ };
+
+ const handleSave = async () => {
+ const wageNumber = parseInt(wage, 10);
+ if (isNaN(wageNumber) || wageNumber < 0) {
+ toast.error("유효한 시급을 입력해주세요.");
+ return;
+ }
+
+ try {
+ await updateStaffHourlyWage(storeId, staff.staffId, {
+ hourlyWage: wageNumber,
+ });
+ toast.success("시급이 저장되었습니다.");
+ setIsDirty(false);
+ } catch (err) {
+ console.error(err);
+ toast.error("저장에 실패했습니다.");
+ }
+ };
+
+ return (
+ ([]);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ const loadData = async () => {
+ if (!selectedStore) return;
+
+ setLoading(true);
+ try {
+ const response = await getStaffWithholdingList(selectedStore.storeId);
+ setStaffTaxInfo(response);
+ } catch (err) {
+ console.error("공제 항목 조회 실패", err);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ loadData();
+ }, [selectedStore]);
+
+ return (
+ (initialType);
+ const [isDirty, setIsDirty] = useState(false);
+
+ const form = useMemo(() => ({ withholdingType: value }), [value]);
+
+ const handleChange = (newVal: string) => {
+ const next = newVal as WithholdingType;
+ setValue(next);
+ setIsDirty(next !== initialType);
+ };
+
+ const handleSave = async () => {
+ const parsed = withholdingSchema.safeParse(form);
+ if (!parsed.success) {
+ toast.error("유효하지 않은 공제항목입니다.");
+ return;
+ }
+
+ try {
+ await updateStaffWithholding(storeId, staff.staffId, parsed.data);
+ toast.success("공제 항목이 저장되었습니다.");
+ setIsDirty(false);
+ } catch (err) {
+ console.error(err);
+ toast.error("저장에 실패했습니다.");
+ }
+ };
+
+ return (
+ ([]);
+ const [loading, setLoading] = useState(true);
+
+ const handleClickRecord = (record: StaffAttendanceRecord) => {
+ setBottomSheetContent(
+ (
+ null,
+ );
+ const [settings, setSettings] = useState(
+ null,
+ );
+ const [loading, setLoading] = useState(true);
+
+ const currentMonth = getCurrentMonth();
+ const [selectedMonth, setSelectedMonth] = useState(currentMonth);
+ const getRemainingDaysStyle = (remaining: number): string => {
+ if (remaining > 7) return "text-black";
+ if (remaining > 3) return "text-delay";
+ return "text-warning";
+ };
+
+ const remainingDays =
+ settings && settings.transferDate !== null
+ ? getRemainingDays(settings.transferDate)
+ : null;
+ const remainingDaysStyle =
+ remainingDays !== null ? getRemainingDaysStyle(remainingDays) : "";
+
+ // 조건 계산
+ const isCurrentMonth = selectedMonth === currentMonth;
+ const isDday = isCurrentMonth && remainingDays === 0;
+ const isBeforeDue =
+ isCurrentMonth && remainingDays !== null && remainingDays > 0;
+ const isAfterDue =
+ isCurrentMonth && remainingDays !== null && remainingDays < 0;
+ const isPastMonth =
+ !isCurrentMonth ||
+ (isCurrentMonth && remainingDays !== null && remainingDays > 0); // 수정 불가한 이전달
+
+ useEffect(() => {
+ const fetchData = async () => {
+ if (!selectedStore) return;
+
+ try {
+ const [payrollResult, settingsResult] = await Promise.all([
+ getStaffPayroll(selectedStore.storeId, selectedMonth),
+ getPayrollSettings(selectedStore.storeId),
+ ]);
+ setStaffPayroll(payrollResult);
+ setSettings(settingsResult);
+ } catch (error) {
+ console.error("급여 정보 불러오기 실패:", error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchData();
+ }, [selectedStore, selectedMonth]);
+
+ const handleClickPayslip = () => {
+ navigate(`/staff/payroll/payslip?month=${selectedMonth}`);
+ };
+
+ if (!settings || loading) return null;
+
+ return (
+ (null);
+ const [loading, setLoading] = useState(true);
+ const [showTooltip, setShowTooltip] = useState(false);
+ const tooltipRef = useRef(null);
+
+ useClickOutside(tooltipRef, () => setShowTooltip(false));
+
+ useEffect(() => {
+ if (showTooltip) {
+ const timer = setTimeout(() => setShowTooltip(false), 3000);
+ return () => clearTimeout(timer);
+ }
+ }, [showTooltip]);
+
+ const handleDownload = async () => {
+ if (!selectedStore || !info?.payslipId) return;
+
+ try {
+ const { url } = await fetchPayslipDownloadLink(
+ selectedStore.storeId,
+ info.payslipId,
+ );
+
+ const a = document.createElement("a");
+ a.href = url;
+ a.download = `payslip_${staffName}_${dayjs(month).format("YYYYMM")}.pdf`;
+ a.click();
+ } catch (err) {
+ console.error("급여명세서 다운로드 실패", err);
+ }
+ };
+
+ const downloadButton =
+ payslip?.info?.payslipId && selectedStore ? (
+
+ ) : (
+ ;
diff --git a/src/schemas/payrollSettingsSchema.ts b/src/schemas/payrollSettingsSchema.ts
new file mode 100644
index 0000000..898ca18
--- /dev/null
+++ b/src/schemas/payrollSettingsSchema.ts
@@ -0,0 +1,10 @@
+import { z } from "zod";
+
+export const payrollSettingsSchema = z.object({
+ autoTransferEnabled: z.boolean(),
+ transferDate: z.union([z.number(), z.null()]),
+ deductionUnit: z.enum(["ZERO_MIN", "FIVE_MIN", "TEN_MIN", "THIRTY_MIN"]),
+ commutingAllowance: z.number().min(0),
+});
+
+export type PayrollSettingsForm = z.infer;
diff --git a/src/types/payroll.ts b/src/types/payroll.ts
index 4fad3a6..1676a0a 100644
--- a/src/types/payroll.ts
+++ b/src/types/payroll.ts
@@ -1,48 +1,218 @@
-export interface PayrollStaff {
- staffId: number;
- name: string;
- profileImageUrl: string;
+export interface AccountVerificationRequest {
+ bankName: "농협은행"; // 고정
+ accountNumber: string;
+ birthdate: string; // YYYYMMDD
+ password: string; // 숫자 4자리
+}
+export interface AccountVerificationResponse {
+ bankName: string;
+ accountHolder: string;
+ accountNumber: string;
+}
+
+export type DeductionUnit = "ZERO_MIN" | "FIVE_MIN" | "TEN_MIN" | "THIRTY_MIN";
+
+export interface PayrollSettingsRequest {
+ autoTransferEnabled: boolean;
+ transferDate: number | null;
+ deductionUnit: DeductionUnit;
+ commutingAllowance: number;
+}
+
+export interface PayrollSettingsResponse {
+ account: {
+ bankName: string;
+ accountNumber: string;
+ } | null;
+ autoTransferEnabled: boolean;
+ transferDate: number | null;
+ deductionUnit: DeductionUnit;
+ commutingAllowance: number;
+}
+
+export type TransferState = "COMPLETED" | "FAILED" | "PENDING";
+
+export interface ConfirmedTransferItem {
+ staff: {
+ staffId: number;
+ name: string;
+ profileImageUrl: string;
+ };
+ data: {
+ bankCode: string | null;
+ account: string | null;
+ month: string; // ISO date string, e.g. "2025-04-01"
+ totalTime: number;
+ netAmount: number;
+ };
+ info: {
+ payrollId: number;
+ transferState: TransferState;
+ payslipId: number | null;
+ };
+}
+
+export type WithholdingType = "INCOME_TAX" | "SOCIAL_INSURANCE" | "NONE";
+
+export interface EstimatedPayrollItem {
+ staff: {
+ staffId: number;
+ name: string;
+ profileImageUrl: string;
+ };
+ payroll: {
+ key: string | null;
+ data: {
+ staffName: string;
+ bankCode: string | null;
+ account: string | null;
+ month: string; // ISO 형식 "YYYY-MM-DD"
+ withholdingType: WithholdingType;
+ totalTime: number;
+ baseAmount: number;
+ weeklyAllowance: number;
+ totalCommutingAllowance: number;
+ totalAmount: number;
+ withholdingTax: number;
+ netAmount: number;
+ };
+ };
+}
+export interface ConfirmPayrollTargetsRequest {
+ payrollKeys: string[];
+}
+
+export interface PayslipDownloadLink {
+ url: string;
+ expiresAt: string; // ISO datetime string
}
-export interface PayrollDetail {
- key: string;
+export interface MonthlyPayrollItem {
+ staff: {
+ staffId: number;
+ name: string;
+ profileImageUrl: string;
+ };
+ data: {
+ bankCode: string | null;
+ account: string | null;
+ month: string; // ISO date string e.g. "2025-04-01"
+ totalTime: number;
+ netAmount: number;
+ };
+ info: {
+ payrollId: number;
+ transferState: TransferState;
+ payslipId: number | null;
+ } | null;
+}
+
+export interface PayrollDetailResponse {
+ data: {
+ staffName: string;
+ bankCode: string;
+ account: string;
+ month: string;
+ withholdingType: WithholdingType;
+ totalTime: number;
+ baseAmount: number;
+ weeklyAllowance: number;
+ totalCommutingAllowance: number;
+ totalAmount: number;
+ withholdingTax: number;
+ netAmount: number;
+ };
+ info: {
+ payrollId: number;
+ transferState: TransferState;
+ payslipId: number;
+ } | null;
+}
+
+export interface StaffWithholdingItem {
+ staff: {
+ staffId: number;
+ name: string;
+ profileImageUrl: string;
+ };
+ withholdingType: WithholdingType;
+}
+
+export interface UpdateWithholdingRequest {
+ withholdingType: WithholdingType;
+}
+
+export interface StaffHourlyWage {
+ staff: {
+ staffId: number;
+ name: string;
+ profileImageUrl: string;
+ };
+ hourlyWage: number;
+}
+
+export interface UpdateHourlyWageRequest {
+ hourlyWage: number;
+}
+
+/* staff */
+
+export interface StaffPayrollData {
+ staffName: string;
bankCode: string;
account: string;
- month: string;
- withholdingType: string;
+ month: string; // YYYY-MM-DD 형식
+ withholdingType: WithholdingType;
totalTime: number;
baseAmount: number;
weeklyAllowance: number;
+ totalCommutingAllowance: number;
totalAmount: number;
withholdingTax: number;
netAmount: number;
}
-export interface StaffPayroll {
- staff: PayrollStaff;
- payroll: PayrollDetail;
+export interface StaffPayrollInfo {
+ payrollId: number;
+ transferState: TransferState;
+ payslipId: number;
}
-export type DeductionUnit = "ZERO_MIN" | "FIVE_MIN" | "TEN_MIN" | "THIRTY_MIN";
+export interface StaffPayrollResponse {
+ data: StaffPayrollData;
+ info: StaffPayrollInfo | null;
+}
-export interface PayrollAccount {
- bankName: string;
- accountNumber: string;
- accountHolder: string;
+export interface PayslipDownloadResponse {
+ url: string;
+ expiresAt: string; // ISO datetime 문자열
}
export interface PayrollSettingsResponse {
- account: PayrollAccount | null;
autoTransferEnabled: boolean;
transferDate: number | null;
- overtimeLimit: number;
deductionUnit: DeductionUnit;
+ commutingAllowance: number;
}
-export interface ConfirmPayrollTransfersRequest {
- payrollKeys: string[];
+export interface VerifyAccountRequest {
+ bankName: string;
+ accountNumber: string;
+}
+
+export interface VerifyAccountResponse {
+ bankName: string;
+ accountHolder: string;
+ accountNumber: string;
+}
+
+export interface StaffAccountInfo {
+ bankName: string | null;
+ accountHolder: string | null;
+ accountNumber: string | null;
}
-export interface ConfirmPayrollTransfersResponse {
- result: StaffPayroll[];
+export interface StaffPayrollBriefInfo {
+ hourlyWage: number;
+ withholdingType: WithholdingType;
}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index b42930f..e9a0ce6 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -6,6 +6,8 @@ const config: Config = {
extend: {
animation: {
"spin-one-time": "spin 1s linear",
+ "slide-up": "slideUp 0.3s ease-out",
+ "slide-down": "slideDown 0.3s ease-out",
},
screens: {
mobile: "320px",
@@ -71,6 +73,16 @@ const config: Config = {
"input-box": "2px 2px 8px 0px rgba(0, 0, 0, 0.25)",
"layout-box": "0px 8px 36px 0px rgba(0, 0, 0, 0.15)",
},
+ keyframes: {
+ slideUp: {
+ "0%": { opacity: "0", transform: "translateY(8px)" },
+ "100%": { opacity: "1", transform: "translateY(0)" },
+ },
+ slideDown: {
+ "0%": { opacity: "0", transform: "translateY(-8px)" },
+ "100%": { opacity: "1", transform: "translateY(0)" },
+ },
+ },
},
fontFamily: {
sans: ["Pretendard Variable", "Pretendard", "sans-serif"],
From c3e47d8b94c150e8cf5b04beecb6520cf90b4971 Mon Sep 17 00:00:00 2001
From: Yoon seokchan <72729277+PaleBlueNote@users.noreply.github.com>
Date: Tue, 3 Jun 2025 03:11:56 +0900
Subject: [PATCH 03/23] =?UTF-8?q?[#52]=20=EC=9A=94=EC=B2=AD=20=EB=B0=8F=20?=
=?UTF-8?q?=EC=95=8C=EB=A6=BC=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B0=9C?=
=?UTF-8?q?=EB=B0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* feat: FCM 토큰 발급 후 서버 등록 기능 추가 (#52)
* feat: 사장님 요청 탭 개발 (#52)
* feat: 알바생 요청 탭 개발 (#52)
* feat: 사장님/알바생 알림 탭 개발 (#52)
* feat: 알림 타입 이미지 url 추가 (#52)
* feat: 알바생 근태,스케쥴 대타 요청 바텀시트 개발 (#52)
---
dev-dist/sw.js | 2 +-
public/firebase-messaging-sw.js | 5 +-
src/App.tsx | 8 +
src/api/boss/alarm.ts | 106 +++++++
src/api/common/user.ts | 11 +
src/api/staff/alarm.ts | 46 +++
src/api/staff/attendance.ts | 18 ++
src/api/staff/schedule.ts | 38 +++
src/components/common/SelectField.tsx | 5 +-
src/components/icons/CanceledIcon.tsx | 21 ++
src/components/layouts/Header.tsx | 12 +-
src/libs/fcm/requestPermission.ts | 2 +
src/pages/alarm/AttendanceRequestCard.tsx | 156 ++++++++++
src/pages/alarm/NotificationCard.tsx | 41 +++
src/pages/alarm/ScheduleRequestCard.tsx | 141 ++++++++++
src/pages/alarm/boss/BossAlarmPage.tsx | 66 +++++
src/pages/alarm/boss/BossNotificationTab.tsx | 46 +++
src/pages/alarm/boss/BossRequestTab.tsx | 109 +++++++
src/pages/alarm/staff/StaffAlarmPage.tsx | 66 +++++
.../alarm/staff/StaffNotificationTab.tsx | 46 +++
src/pages/alarm/staff/StaffRequestTab.tsx | 109 +++++++
.../schedule/boss/SingleScheduleAddForm.tsx | 3 +-
src/pages/schedule/staff/ScheduleStaff.tsx | 9 +-
.../staff/StaffAttendanceEditForm.tsx | 266 ++++++++++++++++++
.../schedule/staff/StaffScheduleEditForm.tsx | 229 +++++++++++++++
src/types/attendance.ts | 7 +
src/types/notification.ts | 40 +++
src/types/schedule.ts | 14 +
src/types/store.ts | 1 +
29 files changed, 1612 insertions(+), 11 deletions(-)
create mode 100644 src/api/boss/alarm.ts
create mode 100644 src/api/staff/alarm.ts
create mode 100644 src/components/icons/CanceledIcon.tsx
create mode 100644 src/pages/alarm/AttendanceRequestCard.tsx
create mode 100644 src/pages/alarm/NotificationCard.tsx
create mode 100644 src/pages/alarm/ScheduleRequestCard.tsx
create mode 100644 src/pages/alarm/boss/BossAlarmPage.tsx
create mode 100644 src/pages/alarm/boss/BossNotificationTab.tsx
create mode 100644 src/pages/alarm/boss/BossRequestTab.tsx
create mode 100644 src/pages/alarm/staff/StaffAlarmPage.tsx
create mode 100644 src/pages/alarm/staff/StaffNotificationTab.tsx
create mode 100644 src/pages/alarm/staff/StaffRequestTab.tsx
create mode 100644 src/pages/schedule/staff/StaffAttendanceEditForm.tsx
create mode 100644 src/pages/schedule/staff/StaffScheduleEditForm.tsx
create mode 100644 src/types/notification.ts
diff --git a/dev-dist/sw.js b/dev-dist/sw.js
index 49ad534..4490c93 100644
--- a/dev-dist/sw.js
+++ b/dev-dist/sw.js
@@ -82,7 +82,7 @@ define(['./workbox-86c9b217'], (function (workbox) { 'use strict';
"revision": "3ca0b8505b4bec776b69afdba2768812"
}, {
"url": "index.html",
- "revision": "0.3s5ufdgacm"
+ "revision": "0.4muc7e06d0o"
}], {});
workbox.cleanupOutdatedCaches();
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
diff --git a/public/firebase-messaging-sw.js b/public/firebase-messaging-sw.js
index d1e0229..b55694a 100644
--- a/public/firebase-messaging-sw.js
+++ b/public/firebase-messaging-sw.js
@@ -25,8 +25,9 @@ self.addEventListener("push", (event) => {
data.notification.title,
{
body: data.notification.body,
- icon: data.notification.icon || "/logo192.png", // fallback icon
- badge: data.notification.badge || "/badge-icon.png", // optional
+ image: data.notification?.image,
+ icon: data.notification.icon || "/logo-192x192.png", // fallback icon
+ badge: data.notification.badge || "/logo-192x192.png",
data: { click_action: clickAction },
},
);
diff --git a/src/App.tsx b/src/App.tsx
index 4aac8a8..97b291d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -76,6 +76,9 @@ const BossPayslipPage = lazy(
const AccountRegisterPage = lazy(
() => import("./pages/mypage/boss/AccountRegisterPage.tsx"),
);
+const BossAlarmPage = lazy(
+ () => import("./pages/alarm/boss/BossAlarmPage.tsx"),
+);
// Lazy-loaded components (staff)
const ScheduleStaff = lazy(
@@ -106,6 +109,9 @@ const StaffPayrollPage = lazy(
const StaffAccountRegisterPage = lazy(
() => import("./pages/mypage/staff/StaffAccountRegisterPage.tsx"),
);
+const StaffAlarmPage = lazy(
+ () => import("./pages/alarm/staff/StaffAlarmPage.tsx"),
+);
function App() {
return (
@@ -202,6 +208,7 @@ function App() {
path="/boss/payroll/edit"
element={ => {
+ const res = await axiosAuth.get(
+ `/api/boss/stores/${storeId}/schedules/substitutions`,
+ );
+ return res.data.result;
+};
+
+/**
+ * 대타 근무 요청 승인 (사장님용)
+ * @param storeId 매장 ID
+ * @param substitutionId 대타 요청 ID
+ * @returns 성공 여부
+ */
+export const approveSubstituteRequest = async (
+ storeId: number,
+ substitutionId: number,
+): Promise => {
+ await axiosAuth.post(
+ `/api/boss/stores/${storeId}/schedules/substitutions/${substitutionId}/approve`,
+ );
+};
+
+/**
+ * 대타 근무 요청 거절 (사장님용)
+ * @param storeId 매장 ID
+ * @param substitutionId 대타 요청 ID
+ * @returns 성공 여부
+ */
+export const rejectSubstituteRequest = async (
+ storeId: number,
+ substitutionId: number,
+): Promise => {
+ await axiosAuth.post(
+ `/api/boss/stores/${storeId}/schedules/substitutions/${substitutionId}/reject`,
+ );
+};
+
+/**
+ * 근태 수정 요청 목록 조회 (사장님용)
+ * @param storeId 매장 ID
+ * @returns 근태 수정 요청 리스트
+ */
+export const fetchAttendanceEditRequests = async (
+ storeId: number,
+): Promise => {
+ const res = await axiosAuth.get(
+ `/api/boss/stores/${storeId}/schedules/attendance-edits`,
+ );
+ return res.data.result;
+};
+
+/**
+ * 근태 수정 요청 승인 (사장님용)
+ * @param storeId 매장 ID
+ * @param editId 근태 수정 요청 ID
+ * @returns 성공 여부
+ */
+export const approveAttendanceEditRequest = async (
+ storeId: number,
+ editId: number,
+): Promise => {
+ await axiosAuth.post(
+ `/api/boss/stores/${storeId}/schedules/attendance-edits/${editId}/approve`,
+ );
+};
+
+/**
+ * 근태 수정 요청 거절 (사장님용)
+ * @param storeId 매장 ID
+ * @param editId 근태 수정 요청 ID
+ * @returns 성공 여부
+ */
+export const rejectAttendanceEditRequest = async (
+ storeId: number,
+ editId: number,
+): Promise => {
+ await axiosAuth.post(
+ `/api/boss/stores/${storeId}/schedules/attendance-edits/${editId}/reject`,
+ );
+};
+
+/**
+ * 사장 알림 목록 조회
+ * @param storeId 매장 ID
+ * @returns 알림 리스트
+ */
+export const fetchBossNotifications = async (
+ storeId: number,
+): Promise => {
+ const res = await axiosAuth.get(`/api/boss/stores/${storeId}/notifications`);
+ return res.data.result;
+};
diff --git a/src/api/common/user.ts b/src/api/common/user.ts
index d816e9e..0844855 100644
--- a/src/api/common/user.ts
+++ b/src/api/common/user.ts
@@ -6,3 +6,14 @@ export const fetchUserProfile = async (): Promise => {
const res = await axiosAuth.get("/api/users/me");
return res.data;
};
+
+/**
+ * FCM 토큰 등록 (알림 허용 후)
+ * @param fcmToken FCM 디바이스 토큰
+ * @returns 성공 여부
+ */
+export const registerFcmToken = async (fcmToken: string): Promise => {
+ await axiosAuth.post("/api/users/device-token", {
+ fcmToken,
+ });
+};
diff --git a/src/api/staff/alarm.ts b/src/api/staff/alarm.ts
new file mode 100644
index 0000000..d12c73f
--- /dev/null
+++ b/src/api/staff/alarm.ts
@@ -0,0 +1,46 @@
+import {
+ AttendanceEditRequest,
+ NotificationItem,
+ SubstituteRequest,
+} from "../../types/notification.ts";
+import axiosAuth from "../common/axiosAuth.ts";
+
+/**
+ * 알바생 알림 조회
+ * @param storeId 매장 ID
+ * @returns 알림 리스트
+ */
+export const fetchStaffNotifications = async (
+ storeId: number,
+): Promise => {
+ const res = await axiosAuth.get(`/api/staff/stores/${storeId}/notifications`);
+ return res.data.result;
+};
+
+/**
+ * 본인의 근태 수정 요청 목록 조회 (알바생용)
+ * @param storeId 매장 ID
+ * @returns 근태 수정 요청 리스트
+ */
+export const fetchOwnAttendanceEditRequests = async (
+ storeId: number,
+): Promise => {
+ const res = await axiosAuth.get(
+ `/api/staff/stores/${storeId}/schedules/attendance-edits`,
+ );
+ return res.data.result;
+};
+
+/**
+ * 알바생 대타 근무 요청 목록 조회 (내가 요청한 + 받은 요청 모두)
+ * @param storeId 매장 ID
+ * @returns 대타 요청 리스트
+ */
+export const fetchOwnSubstituteRequests = async (
+ storeId: number,
+): Promise => {
+ const res = await axiosAuth.get(
+ `/api/staff/stores/${storeId}/schedules/substitutions`,
+ );
+ return res.data.result;
+};
diff --git a/src/api/staff/attendance.ts b/src/api/staff/attendance.ts
index 8b853d6..d266e6f 100644
--- a/src/api/staff/attendance.ts
+++ b/src/api/staff/attendance.ts
@@ -1,6 +1,7 @@
import axiosAuth from "../common/axiosAuth.ts";
import {
ClockInRequest,
+ StaffAttendanceEditRequest,
StaffAttendanceRecord,
TodayScheduleWithAttendance,
} from "../../types/attendance.ts";
@@ -66,3 +67,20 @@ export const getStaffAttendanceRecords = async (
);
return response.data.result;
};
+
+/**
+ * 알바생 근태 수정 요청
+ * @param storeId 매장 ID
+ * @param scheduleId 스케줄 ID
+ * @param body 근태 수정 요청 정보
+ */
+export const requestAttendanceEdit = async (
+ storeId: number,
+ scheduleId: number,
+ body: StaffAttendanceEditRequest,
+): Promise => {
+ await axiosAuth.post(
+ `/api/staff/stores/${storeId}/schedules/${scheduleId}/attendance-edits`,
+ body,
+ );
+};
diff --git a/src/api/staff/schedule.ts b/src/api/staff/schedule.ts
index e69de29..74cffb3 100644
--- a/src/api/staff/schedule.ts
+++ b/src/api/staff/schedule.ts
@@ -0,0 +1,38 @@
+import axiosAuth from "../common/axiosAuth.ts";
+import {
+ StaffSubstitutionRequest,
+ SubstituteCandidate,
+} from "../../types/schedule.ts";
+
+/**
+ * 알바생 대타 근무 요청
+ * @param storeId 매장 ID
+ * @param scheduleId 요청 대상 스케줄 ID
+ * @param body 대타 요청 정보
+ */
+export const requestSubstitution = async (
+ storeId: number,
+ scheduleId: number,
+ body: StaffSubstitutionRequest,
+): Promise => {
+ await axiosAuth.post(
+ `/api/staff/stores/${storeId}/schedules/${scheduleId}/substitutions`,
+ body,
+ );
+};
+
+/**
+ * 대타 근무 요청 후보 알바생 목록 조회
+ * @param storeId 매장 ID
+ * @param scheduleId 스케줄 ID
+ * @returns 대타 근무 가능 여부와 알바생 정보 목록
+ */
+export const fetchSubstituteCandidates = async (
+ storeId: number,
+ scheduleId: number,
+): Promise => {
+ const response = await axiosAuth.get(
+ `/api/staff/stores/${storeId}/schedules/${scheduleId}/substitute-candidates`,
+ );
+ return response.data.result;
+};
diff --git a/src/components/common/SelectField.tsx b/src/components/common/SelectField.tsx
index 35601be..86de826 100644
--- a/src/components/common/SelectField.tsx
+++ b/src/components/common/SelectField.tsx
@@ -24,6 +24,7 @@ interface SelectFieldProps {
description?: string;
size?: "lg" | "md" | "sm";
required?: boolean;
+ disabled?: boolean;
options: { label: string; value: string }[];
value: string;
onChange: (value: string) => void;
@@ -35,6 +36,7 @@ export default function SelectField({
description,
size = "md",
required = false,
+ disabled = false,
options,
value,
onChange,
@@ -78,6 +80,7 @@ export default function SelectField({
)}
type="button"
onClick={() => setIsOpen((prev) => !prev)}
+ disabled={disabled}
>
- {isOpen && (
+ {isOpen && !disabled && (
) {
+ return (
+
+ );
+}
diff --git a/src/components/layouts/Header.tsx b/src/components/layouts/Header.tsx
index 4504650..d53edae 100644
--- a/src/components/layouts/Header.tsx
+++ b/src/components/layouts/Header.tsx
@@ -34,6 +34,16 @@ const Header: React.FC = () => {
}
};
+ const handleAlarmPage = () => {
+ if (user?.role === "BOSS") {
+ navigate("/boss/alarm");
+ } else if (user?.role === "STAFF") {
+ navigate("/staff/alarm");
+ } else {
+ navigate("/");
+ }
+ };
+
return (
{
+ ([]);
+ const [estimatedPayrolls, setEstimatedPayrolls] = useState<
+ EstimatedPayrollItem[]
+ >([]);
const [checkedKeys, setCheckedKeys] = useState>(new Set());
const [settings, setSettings] = useState(
null,
@@ -37,14 +39,20 @@ const BossPayrollEditPage = () => {
if (!selectedStore) return;
try {
- const [payrollResult, settingsResult] = await Promise.all([
- fetchStaffPayrolls(selectedStore.storeId),
- getPayrollSettings(selectedStore.storeId),
+ const [estimatedPayrollResult, settingsResult] = await Promise.all([
+ fetchEstimatedPayrolls(selectedStore.storeId),
+ fetchPayrollSettings(selectedStore.storeId),
]);
- setPayrolls(payrollResult);
+ setEstimatedPayrolls(estimatedPayrollResult);
setSettings(settingsResult);
- setCheckedKeys(new Set(payrollResult.map((p) => p.payroll.key))); // 초기값: 모두 체크
+ setCheckedKeys(
+ new Set(
+ estimatedPayrollResult
+ .map((p) => p.payroll.key)
+ .filter((key): key is string => key !== null),
+ ),
+ );
} catch (err) {
console.error("데이터 불러오기 실패:", err);
} finally {
@@ -68,7 +76,7 @@ const BossPayrollEditPage = () => {
const keys = Array.from(checkedKeys);
try {
- await confirmPayrollTransfers(selectedStore.storeId, keys);
+ await confirmPayrollTargets(selectedStore.storeId, { payrollKeys: keys });
toast.success("송금 인원을 성공적으로 확정했습니다.");
history.back();
} catch (err: any) {
@@ -100,25 +108,25 @@ const BossPayrollEditPage = () => {
([]);
+ const [autoTransferInfo, setAutoTransferInfo] = useState<
+ ConfirmedTransferItem[]
+ >([]);
const [settings, setSettings] = useState(
null,
);
const [loading, setLoading] = useState(true);
const navigate = useNavigate();
+ const getNowMonth = () => {
+ const now = getKSTDate();
+ return `${now.getFullYear()}-${String(now.getMonth()).padStart(2, "0")}`;
+ };
useEffect(() => {
const loadData = async () => {
if (!selectedStore) return;
try {
- const [payrollResult, settingsResult] = await Promise.all([
- fetchConfirmedPayrolls(selectedStore.storeId),
- getPayrollSettings(selectedStore.storeId),
+ const [confirmResult, settingsResult] = await Promise.all([
+ fetchConfirmedTransfers(selectedStore.storeId),
+ fetchPayrollSettings(selectedStore.storeId),
]);
-
- setPayrolls(payrollResult);
+ setAutoTransferInfo(confirmResult);
setSettings(settingsResult);
} catch (err) {
console.log(err);
@@ -46,7 +52,7 @@ const BossPayrollTab = () => {
loadData();
}, [selectedStore]);
- const handlePayrollEdit = () => {
+ const handleAutoTransferEdit = () => {
navigate("/boss/payroll/edit");
};
@@ -69,7 +75,25 @@ const BossPayrollTab = () => {
{/* 상단 급여일 안내 */}
{settings && remainingDays !== null && (
- {remainingDays === 0 ? (
+
+ {remainingDays > 0 ? (
+ <>
+
@@ -115,20 +140,14 @@ const BossPayrollTab = () => {
{tabItems.map((tab) => (
);
diff --git a/src/pages/payroll/boss/autoTransfer/BossAutoTransferCheckCard.tsx b/src/pages/payroll/boss/autoTransfer/BossAutoTransferCheckCard.tsx
new file mode 100644
index 0000000..2a60436
--- /dev/null
+++ b/src/pages/payroll/boss/autoTransfer/BossAutoTransferCheckCard.tsx
@@ -0,0 +1,77 @@
+// src/components/payroll/BossAutoTransferCheckCard.tsx
+import { EstimatedPayrollItem } from "../../../../types/payroll";
+import {
+ CheckboxFilled,
+ CheckboxOff,
+} from "../../../../components/icons/CheckboxIcon.tsx";
+import { toast } from "react-toastify";
+
+interface Props {
+ item: EstimatedPayrollItem;
+ checked: boolean;
+ onToggle: (key: string) => void;
+}
+
+const BossAutoTransferCheckCard = ({ item, checked, onToggle }: Props) => {
+ const { staff, payroll } = item;
+ const isSelectable = payroll.key !== null;
+
+ const handleClick = () => {
+ if (!isSelectable) {
+ toast.warn("해당 알바생은 계좌 정보가 없어 확정할 수 없습니다.");
+ return;
+ }
+ onToggle(payroll.key!);
+ };
+
+ return (
+
+
+ );
+};
+
+export default BossAutoTransferCheckCard;
diff --git a/src/pages/payroll/boss/BossPayrollEditPage.tsx b/src/pages/payroll/boss/autoTransfer/BossAutoTransferEditPage.tsx
similarity index 58%
rename from src/pages/payroll/boss/BossPayrollEditPage.tsx
rename to src/pages/payroll/boss/autoTransfer/BossAutoTransferEditPage.tsx
index 2db99e4..97c5705 100644
--- a/src/pages/payroll/boss/BossPayrollEditPage.tsx
+++ b/src/pages/payroll/boss/autoTransfer/BossAutoTransferEditPage.tsx
@@ -1,22 +1,22 @@
import { useEffect, useState } from "react";
-import { useLayout } from "../../../hooks/useLayout.ts";
-import useStoreStore from "../../../stores/storeStore.ts";
+import { useLayout } from "../../../../hooks/useLayout.ts";
+import useStoreStore from "../../../../stores/storeStore.ts";
+import Button from "../../../../components/common/Button.tsx";
+import { toast } from "react-toastify";
+import BossAutoTransferCheckCard from "./BossAutoTransferCheckCard.tsx";
import {
- PayrollSettingsResponse,
- StaffPayroll,
-} from "../../../types/payroll.ts";
+ confirmPayrollTargets,
+ fetchEstimatedPayrolls,
+ fetchPayrollSettings,
+} from "../../../../api/boss/payroll.ts";
import {
- fetchStaffPayrolls,
- getPayrollSettings,
- confirmPayrollTransfers,
-} from "../../../api/boss/payroll.ts";
-import Button from "../../../components/common/Button.tsx";
-import BossPayrollCard from "./BossPayrollCard.tsx";
-import { toast } from "react-toastify";
+ EstimatedPayrollItem,
+ PayrollSettingsResponse,
+} from "../../../../types/payroll.ts";
-const BossPayrollEditPage = () => {
+const BossAutoTransferEditPage = () => {
useLayout({
- title: "송금인원 수정",
+ title: "송금정보 갱신",
theme: "plain",
headerVisible: true,
bottomNavVisible: false,
@@ -25,7 +25,9 @@ const BossPayrollEditPage = () => {
});
const { selectedStore } = useStoreStore();
- const [payrolls, setPayrolls] = useState
+ {/* 왼쪽 */}
+
+
+
+
+
+ {/* 체크박스 */}
+
+
+ {staff.profileImageUrl && (
+
+ )}
+
+
+
+ {staff.name}
++ {payroll.data.bankCode ?? "계좌 미등록"}{" "} + {payroll.data.account ?? ""} +
+
+
+
+ 총 근무시간
+ {payroll.data.totalTime}시간
+
+
+ 실 지급액
+
+ {payroll.data.netAmount.toLocaleString()}원
+
+
+
불러오는 중...
- ) : payrolls.length === 0 ? (
+ ) : estimatedPayrolls.length === 0 ? (
급여 정보가 없습니다.
) : (
- -
- {payrolls.map((item) => (
-
+
)}
-
@@ -126,4 +134,4 @@ const BossPayrollEditPage = () => {
);
};
-export default BossPayrollEditPage;
+export default BossAutoTransferEditPage;
diff --git a/src/pages/payroll/boss/BossPayrollTab.tsx b/src/pages/payroll/boss/autoTransfer/BossAutoTransferTab.tsx
similarity index 58%
rename from src/pages/payroll/boss/BossPayrollTab.tsx
rename to src/pages/payroll/boss/autoTransfer/BossAutoTransferTab.tsx
index 24d281e..ac56d3a 100644
--- a/src/pages/payroll/boss/BossPayrollTab.tsx
+++ b/src/pages/payroll/boss/autoTransfer/BossAutoTransferTab.tsx
@@ -1,40 +1,46 @@
-// src/pages/payroll/BossPayrollTab.tsx
+// src/pages/payroll/BossWithhodingTab.tsx
import { useEffect, useState } from "react";
+import useStoreStore from "../../../../stores/storeStore.ts";
+import Button from "../../../../components/common/Button.tsx";
+import { getRemainingDays } from "../../../../utils/date.ts";
+import { useNavigate } from "react-router-dom";
import {
- fetchConfirmedPayrolls,
- getPayrollSettings,
-} from "../../../api/boss/payroll";
-import useStoreStore from "../../../stores/storeStore";
+ fetchConfirmedTransfers,
+ fetchPayrollSettings,
+} from "../../../../api/boss/payroll.ts";
import {
- StaffPayroll,
+ ConfirmedTransferItem,
PayrollSettingsResponse,
-} from "../../../types/payroll.ts";
-import BossPayrollCard from "./BossPayrollCard.tsx";
-import Button from "../../../components/common/Button.tsx";
-import EditIcon from "../../../components/icons/EditIcon.tsx";
-import { getRemainingDays } from "../../../utils/date.ts";
-import { useNavigate } from "react-router-dom";
+} from "../../../../types/payroll.ts";
+import BossPayrollCard from "../BossPayrollCard.tsx";
+import ResetIcon from "../../../../components/icons/ResetIcon.tsx";
+import { getKSTDate } from "../../../../libs/date.ts";
-const BossPayrollTab = () => {
+const BossAutoTransferTab = () => {
const { selectedStore } = useStoreStore();
- const [payrolls, setPayrolls] = useState-
+ {estimatedPayrolls.map((item) => (
+
+ 이번달 급여지급일이
+
+ 지났습니다.
+
+ 이전 자동송금내역 및 급여명세서는
+ 급여 내역 탭에서 확인해 주세요.
+
급여지급일
@@ -102,10 +126,11 @@ const BossPayrollTab = () => {
}
- onClick={handlePayrollEdit}
+ icon={
불러오는 중...
- ) : payrolls.length === 0 ? (
+ ) : autoTransferInfo.length === 0 ? (
급여 정보가 없습니다.
) : (
-
- {payrolls.map((item) => (
-
+ {/* 상단 급여일 안내 */}
+
+ {loading ? (
+
+
+ );
+};
+
+export default BossPayrollHistoryTab;
diff --git a/src/pages/payroll/boss/history/BossPayslipPage.tsx b/src/pages/payroll/boss/history/BossPayslipPage.tsx
new file mode 100644
index 0000000..d26be06
--- /dev/null
+++ b/src/pages/payroll/boss/history/BossPayslipPage.tsx
@@ -0,0 +1,207 @@
+import { useSearchParams } from "react-router-dom";
+import { toast } from "react-toastify";
+import { useEffect, useState } from "react";
+import dayjs from "dayjs";
+import { useLayout } from "../../../../hooks/useLayout.ts";
+import useStoreStore from "../../../../stores/storeStore.ts";
+import {
+ fetchPayrollDetail,
+ fetchPayslipDownloadLink,
+ fetchUnconfirmedPayrollDetail,
+} from "../../../../api/boss/payroll.ts";
+import { PayrollDetailResponse } from "../../../../types/payroll.ts";
+import DownloadIcon from "../../../../components/icons/DownloadIcon.tsx";
+
+const BossPayslipPage = () => {
+ const { selectedStore } = useStoreStore();
+ const [searchParams] = useSearchParams();
+ const [paystub, setPaystub] = useState
+ setSelectedYearMonth(e.target.value)}
+ className="title-1 pb-2"
+ />
+
+ {/* 목록 */}
+
+ 불러오는 중...
+
+ ) : payrollItems.length === 0 ? (
+
+ 급여 내역이 없습니다.
+
+ ) : (
+ -
+ {payrollItems.map((item) => (
+
불러오는 중...
+ );
+ }
+ if (!paystub) {
+ return (
+
+ 급여명세서를 찾을 수 없습니다.
+
+ );
+ }
+
+ const { data, info } = paystub;
+ const {
+ staffName,
+ bankCode,
+ account,
+ month,
+ baseAmount,
+ weeklyAllowance,
+ totalCommutingAllowance,
+ totalAmount,
+ withholdingTax,
+ netAmount,
+ withholdingType,
+ } = data;
+
+ return (
+
+ {/* 상단 프로필 */}
+
+
+
+ {/* 공제 영역 */}
+
+
+
+ {/* 최종 금액 영역 */}
+
+
+
+ );
+};
+
+export default BossPayslipPage;
diff --git a/src/pages/payroll/boss/wage/BossWageTab.tsx b/src/pages/payroll/boss/wage/BossWageTab.tsx
new file mode 100644
index 0000000..72dd693
--- /dev/null
+++ b/src/pages/payroll/boss/wage/BossWageTab.tsx
@@ -0,0 +1,75 @@
+import { useEffect, useState } from "react";
+import useStoreStore from "../../../../stores/storeStore.ts";
+import { fetchHourlyWageList } from "../../../../api/boss/payroll.ts";
+import { StaffHourlyWage } from "../../../../types/payroll.ts";
+import StaffWageCard from "./StaffWageCard.tsx";
+
+const BossWageTab = () => {
+ const { selectedStore } = useStoreStore();
+ const [staffWageInfo, setStaffWageInfo] = useState
+
+
+ {/* 지급 영역 */}
+
+
+
+ {dayjs(month).format("YYYY년 M월")}
+
+
+
+ {staffName}
+
+ {bankCode}
+ {account}
+
+ + 총 급여 + + {totalAmount.toLocaleString()}원 + +
+
+
+
+ 기본급
+ {baseAmount.toLocaleString()}원
+
+
+ 주휴수당
+ {weeklyAllowance.toLocaleString()}원
+
+
+ 교통비
+ {totalCommutingAllowance.toLocaleString()}원
+
+ + 공제 총액 + + -{withholdingTax.toLocaleString()}원 + +
+ {withholdingType !== "NONE" && ( +
+
+ )}
+
+
+ {withholdingType === "INCOME_TAX" ? "원천징수" : "4대보험"}
+
+ {withholdingTax.toLocaleString()}원
+
+
+ 총 급여
+ {totalAmount.toLocaleString()}원
+
+
+ 공제 총액
+ -{withholdingTax.toLocaleString()}원
+
+
+ 실 지급액
+
+ {netAmount.toLocaleString()}원
+
+
+
+
+
+
+ {/* 목록 */}
+
+ {!selectedStore ? (
+
+
+ );
+};
+
+export default BossWageTab;
diff --git a/src/pages/payroll/boss/wage/StaffWageCard.tsx b/src/pages/payroll/boss/wage/StaffWageCard.tsx
new file mode 100644
index 0000000..615a9a6
--- /dev/null
+++ b/src/pages/payroll/boss/wage/StaffWageCard.tsx
@@ -0,0 +1,93 @@
+import { useState } from "react";
+import { toast } from "react-toastify";
+import TextField from "../../../../components/common/TextField";
+import { cn } from "../../../../libs";
+import { updateStaffHourlyWage } from "../../../../api/boss/payroll.ts";
+
+// 나중에 실제 API 연결 시 사용
+// import { updateStaffHourlyWage } from "../../../../api/boss/payroll";
+
+interface StaffWageCardProps {
+ storeId: number;
+ staff: {
+ staffId: number;
+ name: string;
+ profileImageUrl: string;
+ };
+ initialWage: number;
+}
+
+const StaffWageCard = ({ storeId, staff, initialWage }: StaffWageCardProps) => {
+ const [wage, setWage] = useState(initialWage.toString());
+ const [isDirty, setIsDirty] = useState(false);
+
+ const handleChange = (e: React.ChangeEvent
+ 알바생별 시급을
+
+ 설정합니다
+
+ 현재 최저시급은 10,030원 입니다. +
+
+ 선택된 매장이 없습니다.
+
+ ) : loading ? (
+
+ 불러오는 중...
+
+ ) : staffWageInfo.length === 0 ? (
+
+ 알바생의 시급 정보가 없습니다.
+
+ ) : (
+ -
+ {staffWageInfo.map((item) => (
+
-
+
+
+ ))}
+
+
+ );
+};
+
+export default StaffWageCard;
diff --git a/src/pages/payroll/boss/withholding/BossWithhodingTab.tsx b/src/pages/payroll/boss/withholding/BossWithhodingTab.tsx
new file mode 100644
index 0000000..23e4b42
--- /dev/null
+++ b/src/pages/payroll/boss/withholding/BossWithhodingTab.tsx
@@ -0,0 +1,77 @@
+import { useEffect, useState } from "react";
+import useStoreStore from "../../../../stores/storeStore.ts";
+import { getStaffWithholdingList } from "../../../../api/boss/payroll.ts";
+import { StaffWithholdingItem } from "../../../../types/payroll.ts";
+import StaffWithholdingCard from "./StaffWithholdingCard.tsx";
+
+const BossWithhodingTab = () => {
+ const { selectedStore } = useStoreStore();
+ const [staffTaxInfo, setStaffTaxInfo] = useState
+
+
+
+
+
+
+ {staff.name}
+
+
+
+
+
+
+
+
+ {/* 목록 */}
+
+ {!selectedStore ? (
+
+
+ );
+};
+
+export default BossWithhodingTab;
diff --git a/src/pages/payroll/boss/withholding/StaffWithholdingCard.tsx b/src/pages/payroll/boss/withholding/StaffWithholdingCard.tsx
new file mode 100644
index 0000000..f69eae2
--- /dev/null
+++ b/src/pages/payroll/boss/withholding/StaffWithholdingCard.tsx
@@ -0,0 +1,100 @@
+import { useState, useMemo } from "react";
+import { toast } from "react-toastify";
+import { z } from "zod";
+import { WithholdingType } from "../../../../types/payroll.ts";
+import { updateStaffWithholding } from "../../../../api/boss/payroll.ts";
+import SelectField from "../../../../components/common/SelectField.tsx";
+import { cn } from "../../../../libs";
+
+const withholdingSchema = z.object({
+ withholdingType: z.enum(["NONE", "INCOME_TAX", "SOCIAL_INSURANCE"]),
+});
+
+interface StaffWithholdingCardProps {
+ storeId: number;
+ staff: {
+ staffId: number;
+ name: string;
+ profileImageUrl: string;
+ };
+ initialType: WithholdingType;
+}
+
+const withholdingOptions = [
+ { value: "NONE", label: "보험 적용 안함" },
+ { value: "INCOME_TAX", label: "원천징수" },
+ { value: "SOCIAL_INSURANCE", label: "4대보험" },
+];
+
+const StaffWithholdingCard = ({
+ storeId,
+ staff,
+ initialType,
+}: StaffWithholdingCardProps) => {
+ const [value, setValue] = useState
+ 알바생별 공제항목을
+
+ 설정합니다
+
+ 원천징수: 3.3%
+
+ 4대보험: 9.4%
+
+ 선택된 매장이 없습니다.
+
+ ) : loading ? (
+
+ 불러오는 중...
+
+ ) : staffTaxInfo.length === 0 ? (
+
+ 알바생의 공제 항목 정보가 없습니다.
+
+ ) : (
+ -
+ {staffTaxInfo.map((item) => (
+
-
+
+
+ ))}
+
+
+ );
+};
+
+export default StaffWithholdingCard;
diff --git a/src/pages/payroll/staff/StaffAttendanceRecordContainer.tsx b/src/pages/payroll/staff/StaffAttendanceRecordContainer.tsx
new file mode 100644
index 0000000..015909c
--- /dev/null
+++ b/src/pages/payroll/staff/StaffAttendanceRecordContainer.tsx
@@ -0,0 +1,118 @@
+import { useEffect, useState } from "react";
+import { StaffAttendanceRecord } from "../../../types/attendance";
+import { cn } from "../../../libs";
+import useBottomSheetStore from "../../../stores/useBottomSheetStore";
+import AttendanceEditForm from "../../schedule/boss/AttendanceEditForm.tsx";
+import { getStartAndEndDates } from "../../../utils/date.ts";
+import FullScreenLoading from "../../../components/common/FullScreenLoading.tsx";
+import { toast } from "react-toastify";
+import { getStaffAttendanceRecords } from "../../../api/staff/attendance.ts";
+
+interface Props {
+ storeId: number;
+ currentMonth: string; // YYYY-MM 형식
+}
+
+const AttendanceRecordContainer = ({ storeId, currentMonth }: Props) => {
+ const { setBottomSheetContent } = useBottomSheetStore();
+ const [records, setRecords] = useState
+
+
+
+
+
+ {staff.name}
+
+
+
+
+
+
+ );
+};
+
+export default AttendanceRecordContainer;
diff --git a/src/pages/payroll/staff/StaffPayrollCard.tsx b/src/pages/payroll/staff/StaffPayrollCard.tsx
new file mode 100644
index 0000000..fabd4a2
--- /dev/null
+++ b/src/pages/payroll/staff/StaffPayrollCard.tsx
@@ -0,0 +1,105 @@
+// src/components/payroll/StaffPayrollCard.tsx
+import { StaffPayrollResponse } from "../../../types/payroll";
+
+interface Props {
+ data: StaffPayrollResponse;
+}
+
+const StaffPayrollCard = ({ data }: Props) => {
+ const {
+ totalTime,
+ totalAmount,
+ baseAmount,
+ weeklyAllowance,
+ totalCommutingAllowance,
+ withholdingTax,
+ netAmount,
+ withholdingType,
+ } = data.data;
+
+ const baseRate = (baseAmount / totalAmount) * 100;
+ const weeklyRate = (weeklyAllowance / totalAmount) * 100;
+ const commuteRate = (totalCommutingAllowance / totalAmount) * 100;
+ const taxRate = (withholdingTax / totalAmount) * 100;
+
+ return (
+ 근태 기록 관리
+ +
+
+
+ 날짜
+ 시간
+ 상태
+
+
+ {loading ? (
+
+ 근무 기록이 없습니다.
+
+ ) : (
+ records.map((record) => (
+ handleClickRecord(record)}
+ >
+ {record.workDate}
+
+ {record.startTime.slice(11, 16)}~{record.endTime.slice(11, 16)}
+
+
+ {record.clockInStatus === "NORMAL"
+ ? "출근"
+ : record.clockInStatus === "LATE"
+ ? "지각"
+ : "결근"}
+
+
+ ))
+ )}
+
+ {/* 상단 정보 */}
+
+ );
+};
+
+export default StaffPayrollCard;
diff --git a/src/pages/payroll/staff/StaffPayrollPage.tsx b/src/pages/payroll/staff/StaffPayrollPage.tsx
new file mode 100644
index 0000000..4565799
--- /dev/null
+++ b/src/pages/payroll/staff/StaffPayrollPage.tsx
@@ -0,0 +1,174 @@
+// src/pages/payroll/BossAutoTransferTab.tsx
+import { useEffect, useState } from "react";
+import useStaffStoreStore from "../../../stores/useStaffStoreStore.ts";
+import { getKSTDate } from "../../../libs/date.ts";
+import {
+ getPayrollSettings,
+ getStaffPayroll,
+} from "../../../api/staff/payroll.ts";
+import {
+ StaffPayrollResponse,
+ PayrollSettingsResponse,
+} from "../../../types/payroll.ts";
+import StaffAttendanceRecordContainer from "./StaffAttendanceRecordContainer.tsx";
+import StaffPayrollCard from "./StaffPayrollCard.tsx";
+import { useNavigate } from "react-router-dom";
+import { getRemainingDays } from "../../../utils/date.ts";
+
+const getCurrentMonth = (): string => {
+ const now = getKSTDate();
+ return `${now.getFullYear()}-${String(now.getMonth()).padStart(2, "0")}`;
+};
+
+const StaffPayrollPage = () => {
+ const { selectedStore } = useStaffStoreStore();
+ const navigate = useNavigate();
+ const [staffPayroll, setStaffPayroll] = useState
+
+
+ {/* 그래프 */}
+
+ {{
+ INCOME_TAX: "원천징수 3.3%",
+ SOCIAL_INSURANCE: "4대보험 9.4%",
+ NONE: "보험적용안함",
+ }[withholdingType] ?? ""}
+
+
+
+
+
+ 총 근무시간
+{totalTime}시간
+
+
+ 지급 총액
+{totalAmount.toLocaleString()}원
+
+
+ 공제 세금
+-{withholdingTax.toLocaleString()}원
+
+
+ 실수령액
++ {netAmount.toLocaleString()}원 +
+
+
+
+
+
+
+
+ {/* 범례 */}
+
+
+
+
+ 기본급
+
+
+
+ 주휴수당
+
+
+
+ 교통비
+
+
+
+ 세금
+
+
+ {/* 상단 급여일 안내 */}
+
+
+ {isDday && (
+ <>
+
+
+ {/* 급여 카드 */}
+ {staffPayroll && (
+
+
+ )}
+
+ {selectedStore && (
+
+
+ )}
+
+ );
+};
+
+export default StaffPayrollPage;
diff --git a/src/pages/payroll/staff/StaffPayslipPage.tsx b/src/pages/payroll/staff/StaffPayslipPage.tsx
new file mode 100644
index 0000000..aec7761
--- /dev/null
+++ b/src/pages/payroll/staff/StaffPayslipPage.tsx
@@ -0,0 +1,228 @@
+import { useSearchParams } from "react-router-dom";
+import { toast } from "react-toastify";
+import { useEffect, useRef, useState } from "react";
+import dayjs from "dayjs";
+import useStaffStoreStore from "../../../stores/useStaffStoreStore.ts";
+import { useLayout } from "../../../hooks/useLayout.ts";
+import { StaffPayrollResponse } from "../../../types/payroll.ts";
+import {
+ fetchPayslipDownloadLink,
+ getStaffPayroll,
+} from "../../../api/staff/payroll.ts";
+import DownloadIcon from "../../../components/icons/DownloadIcon.tsx";
+import ErrorIcon from "../../../components/icons/ErrorIcon.tsx";
+import useClickOutside from "../../../hooks/useClickOutside.ts";
+
+const StaffPayslipPage = () => {
+ const { selectedStore } = useStaffStoreStore();
+ const [searchParams] = useSearchParams();
+ const [payslip, setPayslip] = useState
+ 급여지급일
+
+ D-Day
+
+ 예상 급여를 확인해 보세요.
+
+ 근태 기록 수정은 불가능합니다.
+
+ 급여지급일까지
+
+
+ D{remainingDays}일 남았습니다
+
+
+ 급여지급일 하루 전까지 자신의 근태기록을
+
+ 확인하세요. 이후 요청은 반영되지 않습니다.
+
+ 이전 급여를
+
+ 급여명세서로 확인하세요.
+
+ 지급된 급여명세서에서
+
+ 근태 수정 반영은 불가능합니다.
+
+ setSelectedMonth(e.target.value)}
+ className="title-1 bg-white max-w-fit"
+ />
+
+
+
+
+ {showTooltip && (
+
+ );
+
+ useLayout({
+ title: "급여명세서 미리보기",
+ theme: "plain",
+ headerVisible: true,
+ bottomNavVisible: false,
+ onBack: () => history.back(),
+ rightIcon: downloadButton,
+ });
+
+ useEffect(() => {
+ const load = async () => {
+ if (!selectedStore) return;
+
+ const month = searchParams.get("month");
+
+ setLoading(true);
+ try {
+ let result: StaffPayrollResponse;
+
+ if (month) {
+ const formattedMonth = dayjs(month).format("YYYY-MM");
+ result = await getStaffPayroll(selectedStore.storeId, formattedMonth);
+ } else {
+ toast.error("잘못된 접근입니다.");
+ return;
+ }
+ console.log(result);
+ setPayslip(result);
+ } catch (e) {
+ console.error("명세서 조회 실패", e);
+ toast.error("급여명세서 조회 중 오류가 발생했습니다.");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ load();
+ }, [searchParams, selectedStore]);
+
+ if (loading) {
+ return (
+
+ 급여명세서가
생성되지 않았습니다. +
+ )}
+ 생성되지 않았습니다. +
불러오는 중...
+ );
+ }
+ if (!payslip) {
+ return (
+
+ 급여명세서를 찾을 수 없습니다.
+
+ );
+ }
+
+ const { data, info } = payslip;
+ const {
+ staffName,
+ bankCode,
+ account,
+ month,
+ baseAmount,
+ weeklyAllowance,
+ totalCommutingAllowance,
+ totalAmount,
+ withholdingTax,
+ netAmount,
+ withholdingType,
+ } = data;
+
+ return (
+
+ {/* 상단 프로필 */}
+
+
+
+ {/* 공제 영역 */}
+
+
+
+ {/* 최종 금액 영역 */}
+
+
+
+ );
+};
+
+export default StaffPayslipPage;
diff --git a/src/pages/store/boss/SalarySettingPage.tsx b/src/pages/store/boss/SalarySettingPage.tsx
deleted file mode 100644
index 73b29a9..0000000
--- a/src/pages/store/boss/SalarySettingPage.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useLayout } from "../../../hooks/useLayout.ts";
-
-const SalarySettingPage = () => {
- useLayout({
- title: "급여 설정",
- theme: "plain",
- bottomNavVisible: false,
- });
- return (
-
+
+
+ {/* 지급 영역 */}
+
+
+
+ {dayjs(month).format("YYYY년 M월")}
+
+
+
+ {staffName}
+
+ {bankCode}
+ {account}
+
+ + 총 급여 + + {totalAmount.toLocaleString()}원 + +
+
+
+
+ 기본급
+ {baseAmount.toLocaleString()}원
+
+
+ 주휴수당
+ {weeklyAllowance.toLocaleString()}원
+
+
+ 교통비
+ {totalCommutingAllowance.toLocaleString()}원
+
+ + 공제 총액 + + -{withholdingTax.toLocaleString()}원 + +
+ {withholdingType !== "NONE" && ( +
+
+ )}
+
+
+ {withholdingType === "INCOME_TAX" ? "원천징수" : "4대보험"}
+
+ {withholdingTax.toLocaleString()}원
+
+
+ 총 급여
+ {totalAmount.toLocaleString()}원
+
+
+ 공제 총액
+ -{withholdingTax.toLocaleString()}원
+
+
+ 실 지급액
+
+ {netAmount.toLocaleString()}원
+
+
+
-
- );
-};
-
-export default SalarySettingPage;
diff --git a/src/pages/store/boss/StoreModalContent.tsx b/src/pages/store/boss/StoreModalContent.tsx
deleted file mode 100644
index b86bf69..0000000
--- a/src/pages/store/boss/StoreModalContent.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { useNavigate } from "react-router-dom";
-import Button from "../../../components/common/Button.tsx";
-import modalStore from "../../../stores/modalStore.ts";
-
-const StoreModalContent = () => {
- const navigate = useNavigate();
- const { setModalOpen } = modalStore();
-
- const handleStoreRegister = () => {
- navigate("/boss/store/register");
- setModalOpen(false);
- };
-
- return (
- 급여 설정
-이 페이지에서 급여 설정를 확인하거나 수정할 수 있습니다.
-
- {/* 상단 인사 + 설명 */}
-
- );
-};
-
-export default StoreModalContent;
diff --git a/src/schemas/accountRegisterSchema.ts b/src/schemas/accountRegisterSchema.ts
new file mode 100644
index 0000000..e2cb73f
--- /dev/null
+++ b/src/schemas/accountRegisterSchema.ts
@@ -0,0 +1,14 @@
+// src/schemas/accountRegisterSchema.ts
+import { z } from "zod";
+
+export const accountRegisterSchema = z.object({
+ bankName: z.literal("농협은행"),
+ accountNumber: z.string().min(10, "계좌번호를 정확히 입력해주세요."),
+ birthdate: z.string().regex(/^\d{8}$/, "생년월일은 8자리여야 합니다."),
+ password: z.string().regex(/^\d{4}$/, "비밀번호는 4자리 숫자여야 합니다."),
+ agreeWithdraw: z.boolean().refine((val) => val === true, {
+ message: "출금 동의가 필요합니다.",
+ }),
+});
+
+export type AccountRegisterForm = z.infer
-
-
- {/* 상단 버튼 */}
- 김사장님
-- 매장을 추가하고 망고보스를 이용해보세요. -
-
-
-
-
- {/* 매장 리스트 (임시 카드 예시 1개) */}
-
-
-
- {/* 하단 완료 버튼 */}
-
-
-
- {/* 추후 storeList.map() 으로 렌더링 */}
- 매장 1 123-45-67890
-- 경기 수원시 영통구 월드컵로206번길 가상의점포 23호 -
-대표번호: 000000
-
{theme === "default" ? (
<>
-