[develop] 1차 MVP 운영진 정산 기능

apps/admin/app/(auth)/(home)/page.tsx

@@ -7,7 +7,6 @@ import IconSession from '@/assets/icons/icon_session.png';
 import IconSettlement from '@/assets/icons/icon_settlement.png';
 import { NavigationBar } from '@/components/navigation-bar';
 import { SESSION_ID } from '../(attendance)/attendance/search/@tabs/const/const';
-import { FeatureComingSoon } from './_components/coming-soon';
 import { CurrentWeekSession } from './_components/current-week-session';
 import { SessionBanner } from './_components/session-banner';
 import { SessionCurrentWeekBanner } from './_components/session-current-week-banner';
@@ -39,9 +38,7 @@ const UserPage = () => {
 						href={`/attendance/search/session?week=${SESSION_ID}`}
 					/>
 					<IconCard icon={IconSession} title="세션" href="/session" />
-					<FeatureComingSoon>
-						<IconCard icon={IconSettlement} title="정산" href="#" />
-					</FeatureComingSoon>
+					<IconCard icon={IconSettlement} title="정산" href="/bills" />
 				</ul>
 
 				<div className="flex flex-col my-5 px-4 w-full gap-y-5 flex-1">

apps/admin/app/(auth)/bills/[billId]/(status)/final-amount/_components/final-amount-by-member-item.tsx

@@ -0,0 +1,24 @@
+import type { Part } from '@dpm-core/api';
+import { Profile } from '@/components/attendance/profile';
+import { formatPrice } from '../../../utils/formatPrice';
+
+interface FinalAmountByMemberItemProps {
+	member: {
+		name: string;
+		teamNumber: number;
+		authority: string;
+		part: Exclude<Part, 'ETC'>;
+		splitAmount: number;
+	};
+}
+export const FinalAmountByMemberItem = ({ member }: FinalAmountByMemberItemProps) => {
+	return (
+		<div className="flex items-center justify-between">
+			<Profile name={member.name} teamNumber={member.teamNumber} part={member.part} />
+			<p className="flex gap-1 text-body2 font-semibold">
+				<span className="text-label-normal">{formatPrice(member.splitAmount)}</span>
+				<span className="text-label-assistive">원</span>
+			</p>
+		</div>
+	);
+};

apps/admin/app/(auth)/bills/[billId]/(status)/final-amount/_components/final-amount-by-member-list.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { getBillFinalAmountMemberByIdQueryOptions } from '@/remotes/queries/bill';
+import { FinalAmountByMemberItem } from './final-amount-by-member-item';
+
+interface FinalAmountByMemberListProps {
+	billId: number;
+}
+export const FinalAmountByMemberList = ({ billId }: FinalAmountByMemberListProps) => {
+	const {
+		data: { data: billFinalAmountMemberList },
+	} = useSuspenseQuery(getBillFinalAmountMemberByIdQueryOptions(billId));
+
+	return (
+		<section className="mt-2">
+			<ul>
+				{billFinalAmountMemberList.members.map((member) => (
+					<li key={member.name} className="px-4 py-3">
+						<FinalAmountByMemberItem member={member} />
+					</li>
+				))}
+			</ul>
+		</section>
+	);
+};

apps/admin/app/(auth)/bills/[billId]/(status)/final-amount/page.tsx

@@ -0,0 +1,22 @@
+import { AppHeader } from '@/components/app-header';
+import { FinalAmountByMemberList } from './_components/final-amount-by-member-list';
+
+interface Props {
+	params: Promise<{ billId: string }>;
+}
+
+export default async function BillFinalAmountByMemberPage({ params }: Props) {
+	const { billId } = await params;
+
+	return (
+		<>
+			<AppHeader title="멤버별 최종 금액" className="mb-1.5" />
+			<section className="mx-4">
+				<div className="px-4 py-3 bg-background-strong rounded-lg text-label-subtle text-caption1 font-medium">
+					멤버별 정산 예정 금액입니다. 실제 입금 여부는 모임통장에서 확인해 주세요.
+				</div>
+			</section>
+			<FinalAmountByMemberList billId={Number(billId)} />
+		</>
+	);
+}

apps/admin/app/(auth)/bills/[billId]/(status)/submit/_components/submit-status-filter.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { Tabs, TabsList, TabsTrigger } from '@dpm-core/shared';
+import { useBillSubmittedStatusSearchParams } from '../_hooks/use-bill-submitted-status-search-params';
+
+const TABS_FILTER = [
+	{
+		label: '제출',
+		value: 'SUBMIT',
+	},
+	{
+		label: '미제출',
+		value: 'UNSUBMIT',
+	},
+];
+
+export const SubmitStatusFilter = () => {
+	const { submitStatus, handleChange } = useBillSubmittedStatusSearchParams();
+
+	return (
+		<Tabs value={submitStatus} onValueChange={handleChange}>
+			<TabsList className="pt-2 px-4">
+				{TABS_FILTER.map(({ value, label }) => {
+					return (
+						<TabsTrigger key={value} value={value} className="data-[state=active]:border-gray-900">
+							{label}
+						</TabsTrigger>
+					);
+				})}
+			</TabsList>
+		</Tabs>
+	);
+};

apps/admin/app/(auth)/bills/[billId]/(status)/submit/_components/submitted-member-item.tsx

@@ -0,0 +1,20 @@
+import type { Part } from '@dpm-core/api';
+import { Profile } from '@/components/attendance/profile';
+
+interface SubmittedMemberItemProps {
+	member: {
+		name: string;
+		teamNumber: number;
+		authority: string;
+		part: Exclude<Part, 'ETC'>;
+		isInvitationSubmitted: boolean;
+	};
+}
+
+export const SubmittedMemberItem = ({ member }: SubmittedMemberItemProps) => {
+	return (
+		<div className="flex items-center justify-between">
+			<Profile name={member.name} teamNumber={member.teamNumber} part={member.part} />
+		</div>
+	);
+};

apps/admin/app/(auth)/bills/[billId]/(status)/submit/_components/submitted-member-list.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { getBillSubmittedMemberByIdQueryOptions } from '@/remotes/queries/bill';
+import { useBillSubmittedStatusSearchParams } from '../_hooks/use-bill-submitted-status-search-params';
+import { SubmitStatusFilter } from './submit-status-filter';
+import { SubmittedMemberItem } from './submitted-member-item';
+
+interface SubmittedMemberListProps {
+	billId: number;
+}
+export const SubmittedMemberList = ({ billId }: SubmittedMemberListProps) => {
+	const {
+		data: { data: submittedMemberList },
+	} = useSuspenseQuery(getBillSubmittedMemberByIdQueryOptions(billId));
+
+	const { submitStatus } = useBillSubmittedStatusSearchParams();
+
+	const filteredMember = submittedMemberList.members.filter((member) => {
+		if (submitStatus === 'SUBMIT') {
+			return member.isInvitationSubmitted;
+		}
+		if (submitStatus === 'UNSUBMIT') {
+			return !member.isInvitationSubmitted;
+		}
+		return true;
+	});
+
+	return (
+		<section>
+			<SubmitStatusFilter />
+			<ul className="mt-2">
+				{filteredMember.map((member) => (
+					<li key={member.name} className="px-4 py-3">
+						<SubmittedMemberItem member={member} />
+					</li>
+				))}
+			</ul>
+		</section>
+	);
+};

apps/admin/app/(auth)/bills/[billId]/(status)/submit/_hooks/use-bill-submitted-status-search-params.ts

@@ -0,0 +1,20 @@
+import { useRouter, useSearchParams } from 'next/navigation';
+
+import z from 'zod';
+
+const submitStatusSchema = z.enum(['SUBMIT', 'UNSUBMIT']).catch('SUBMIT');
+
+export const useBillSubmittedStatusSearchParams = () => {
+	const searchParams = useSearchParams();
+	const router = useRouter();
+
+	const submitStatus = submitStatusSchema.parse(searchParams.get('submitStatus'));
+
+	const handleFilterSubmitStatus = (value: string) => {
+		const newSearchParams = new URLSearchParams(searchParams);
+		newSearchParams.set('submitStatus', value);
+		router.replace(`?${newSearchParams.toString()}`);
+	};
+
+	return { submitStatus, handleChange: handleFilterSubmitStatus };
+};

apps/admin/app/(auth)/bills/[billId]/(status)/submit/page.tsx

@@ -0,0 +1,23 @@
+import { AppHeader } from '@/components/app-header';
+import { SubmittedMemberList } from './_components/submitted-member-list';
+
+interface Props {
+	params: Promise<{ billId: string }>;
+}
+
+export default async function BillMemberSubmitPage({ params }: Props) {
+	const { billId } = await params;
+
+	return (
+		<>
+			<AppHeader title="제출 현황" className="mb-1.5" />
+			<section className="mx-4">
+				<div className="px-4 py-3 bg-background-strong rounded-lg text-label-subtle text-caption1 font-medium">
+					초대 멤버 전원이 참석 여부를 제출하면 멤버를 확정할 수 있어요.
+				</div>
+			</section>
+
+			<SubmittedMemberList billId={Number(billId)} />
+		</>
+	);
+}