레이아웃 및 미션 수행 UI 추가 수정

src/app/(service)/(my)/my-study/page.tsx

@@ -8,7 +8,7 @@ import { useMemberStudyListQuery } from '@/features/study/group/model/use-member
 import CompletedGroupStudyList from '@/features/study/group/ui/completed-group-study-list';
 import GroupStudyFormModal from '@/features/study/group/ui/group-study-form-modal';
 import NotCompletedGroupStudyList from '@/features/study/group/ui/not-completed-group-study-list';
-import { useAuth } from '@/hooks/use-auth';
+import { useAuth } from '@/hooks/common/use-auth';
 
 interface MemberGroupStudyList extends MemberStudyItem {
   type: 'GROUP_STUDY';

src/app/(service)/layout.tsx

@@ -43,11 +43,8 @@ export default function ServiceLayout({
         <MainProvider>
           <PageViewTracker />
           <div className="w-full overflow-auto">
-            {/** 1400 + 48*2 패딩 양옆 48로 임의적용 */}
-            <div className="m-auto flex w-[1496px] flex-1 flex-col items-center">
-              <Header />
-              <main className="w-full px-600">{children}</main>
-            </div>
+            <Header />
+            <main className="h-[calc(100vh-62px)] w-full">{children}</main>
           </div>
         </MainProvider>
       </body>

src/components/card/mission-card.tsx

@@ -4,14 +4,16 @@ import { ComponentProps } from 'react';
 import { MissionListResponse } from '@/api/openapi/models';
 import Badge from '@/components/ui/badge';
 import Button from '@/components/ui/button';
-import { useIsLeader } from '@/providers/study-leader-context';
+import { useIsLeader } from '@/stores/useLeaderStore';
+import { useUserStore } from '@/stores/useUserStore';
 
 import DeleteMissionModal from '../modals/delete-mission-modal';
 import EditMissionModal from '../modals/edit-mission-modal';
 import { cn } from '../ui/(shadcn)/lib/utils';
 
 interface MissionCardProps {
   mission: MissionListResponse;
+  groupStudyId: number;
   onSelectMission: (missionId: number) => void;
   showDeadline?: boolean;
 }
@@ -92,10 +94,12 @@ function isCardClickable(
 
 export default function MissionCard({
   mission,
+  groupStudyId,
   onSelectMission,
   showDeadline = false,
 }: MissionCardProps) {
-  const isLeader = useIsLeader();
+  const memberId = useUserStore((state) => state.memberId);
+  const isLeader = useIsLeader(memberId);
   const statusConfig =
     mission.status && mission.status in STATUS_CONFIG
       ? STATUS_CONFIG[mission.status as keyof typeof STATUS_CONFIG]
@@ -116,7 +120,7 @@ export default function MissionCard({
   // 리더 + 진행 예정: 수정/삭제 버튼만 노출
   if (isLeader && mission.status === 'NOT_STARTED') {
     return (
-      <li className="border-border-default rounded-100 flex items-center justify-between border p-300">
+      <li className="border-border-default rounded-100 flex items-center justify-between border bg-[#fff] p-300">
         <MissionCardContent
           title={mission.title}
           statusConfig={statusConfig}
@@ -137,7 +141,10 @@ export default function MissionCard({
               },
             }}
           />
-          <DeleteMissionModal missionId={mission.missionId} />
+          <DeleteMissionModal
+            missionId={mission.missionId}
+            groupStudyId={groupStudyId}
+          />
         </div>
       </li>
     );
@@ -147,7 +154,7 @@ export default function MissionCard({
   if (isLeader && mission.status === 'ENDED') {
     return (
       <li
-        className="border-border-default rounded-100 flex cursor-pointer items-center justify-between border p-300"
+        className="border-border-default rounded-100 flex cursor-pointer items-center justify-between border bg-[#fff] p-300"
         onClick={handleSelectMission}
       >
         <MissionCardContent
@@ -176,7 +183,7 @@ export default function MissionCard({
     return (
       <li
         className={cn(
-          'rounded-100 flex cursor-pointer items-center justify-between border p-300',
+          'rounded-100 flex cursor-pointer items-center justify-between border bg-[#fff] p-300',
           deadlineInfo?.isUrgent
             ? 'border-status-error'
             : 'border-border-default',
@@ -198,7 +205,7 @@ export default function MissionCard({
   return (
     <li
       className={cn(
-        'rounded-100 flex items-center justify-between border p-300',
+        'rounded-100 flex items-center justify-between border bg-[#fff] p-300',
         deadlineInfo?.isUrgent
           ? 'border-border-brand'
           : 'border-border-default',

src/components/contents/homework-detail-content.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useRouter, useSearchParams } from 'next/navigation';
 import { useState } from 'react';
 
 import type {
@@ -20,37 +21,30 @@ import {
   useDeletePeerReview,
   useUpdatePeerReview,
 } from '@/hooks/queries/peer-review-api';
-import { useIsLeader } from '@/providers/study-leader-context';
+import { useIsLeader } from '@/stores/useLeaderStore';
 import DeleteHomeworkModal from '../modals/delete-homework-modal';
 import EditHomeworkModal from '../modals/edit-homework-modal';
 
 interface HomeworkDetailContentProps {
   groupStudyId: number;
   missionId: number;
   homeworkId: number;
-  onEdit?: () => void;
-  onDelete?: () => void;
 }
 
 export default function HomeworkDetailContent({
   homeworkId,
-  onEdit,
-  onDelete,
 }: HomeworkDetailContentProps) {
-  const isLeader = useIsLeader();
+  const router = useRouter();
+  const searchParams = useSearchParams();
   const currentUserId = useUserStore((state) => state.memberId);
+  const isLeader = useIsLeader(currentUserId);
   const { data: homework, isLoading: isHomeworkLoading } =
     useGetHomework(homeworkId);
-  const { mutate: deleteHomework, isPending: isDeleting } = useDeleteHomework();
 
-  const handleDelete = () => {
-    if (window.confirm('정말 삭제하시겠습니까?')) {
-      deleteHomework(homeworkId, {
-        onSuccess: () => {
-          onDelete?.();
-        },
-      });
-    }
+  const handleDeleteSuccess = () => {
+    const params = new URLSearchParams(searchParams.toString());
+    params.delete('homeworkId');
+    router.push(`?${params.toString()}`);
   };
 
   if (isHomeworkLoading || !homework) {
@@ -99,7 +93,10 @@ export default function HomeworkDetailContent({
                   attachmentLink: homework.homeworkContent.optionalContent.link,
                 }}
               />
-              <DeleteHomeworkModal homeworkId={homeworkId} />
+              <DeleteHomeworkModal
+                homeworkId={homeworkId}
+                onSuccess={handleDeleteSuccess}
+              />
             </div>
           )}
         </div>

src/components/contents/mission-detail-content.tsx

@@ -8,7 +8,7 @@ import Avatar from '@/components/ui/avatar';
 import Badge from '@/components/ui/badge';
 import Progress from '@/components/ui/progress';
 import { useGetMission } from '@/hooks/queries/mission-api';
-import { useIsLeader } from '@/providers/study-leader-context';
+import { useIsLeader } from '@/stores/useLeaderStore';
 import { useUserStore } from '@/stores/useUserStore';
 import MyHomeworkStatus from '../card/my-homework-status-card';
 
@@ -27,12 +27,10 @@ export default function MissionDetailContent({
   groupStudyId,
   missionId,
 }: MissionDetailContentProps) {
-  const isLeader = useIsLeader();
   const router = useRouter();
   const searchParams = useSearchParams();
   const memberId = useUserStore((state) => state.memberId);
-
-  console.log('memberId', memberId);
+  const isLeader = useIsLeader(memberId);
 
   const { data: mission, isLoading } = useGetMission(missionId);
 
@@ -58,8 +56,7 @@ export default function MissionDetailContent({
       (mission.maxHomeworkSubmissionCount ?? 1)) *
     100;
 
-  // TODO: 백엔드에서 MissionResponseDto에 status 필드 추가 후 교체 필요
-  const isMissionClosed = true;
+  const isMissionClosed = mission.status === 'ENDED';
 
   return (
     <div className="flex flex-col gap-400">

src/components/contents/payment-page-content.tsx

@@ -26,6 +26,8 @@ export default function PaymentPageContent({ id }: PaymentPageContentProps) {
 
   const data = result.data;
 
+  console.log(data);
+
   return (
     <div className="bg-background-alternative min-h-dvh">
       <div className="mx-auto max-w-[840px] pt-600">
@@ -37,6 +39,7 @@ export default function PaymentPageContent({ id }: PaymentPageContentProps) {
             <OrderSummary
               groupStudyTitle={data?.groupStudyTitle}
               amount={data.amount}
+              description={data.groupStudyDescription}
             />
           </section>
 

src/components/layout/sidebar/admin-sidebar.tsx

@@ -5,7 +5,7 @@ import { usePathname } from 'next/navigation';
 import UserAvatar from '@/components/ui/avatar';
 import TabMenu from '@/components/ui/tab-menu';
 import { useUserProfileQuery } from '@/entities/user/model/use-user-profile-query';
-import { useAuth } from '@/hooks/use-auth';
+import { useAuth } from '@/hooks/common/use-auth';
 import OutIcon from 'public/icons/out.svg';
 
 export default function AdminSideBar() {

src/components/lists/group-study-list.tsx

@@ -4,7 +4,7 @@ import { sendGTMEvent } from '@next/third-parties/google';
 import Image from 'next/image';
 
 import { GroupStudyListItemDto } from '@/api/openapi';
-import { useAuth } from '@/hooks/use-auth';
+import { useAuth } from '@/hooks/common/use-auth';
 import { hashValue } from '@/utils/hash';
 
 import { GroupStudyData } from '../../features/study/group/api/group-study-types';

src/components/lists/study-member-list.tsx

@@ -4,9 +4,10 @@ import Image from 'next/image';
 import { useState } from 'react';
 import { GetGroupStudyMemberStatusResponseContent } from '@/api/openapi';
 import Pagination from '@/components/ui/pagination';
+import { useAuth } from '@/hooks/common/use-auth';
 import { useGetGroupStudyMembers } from '@/hooks/queries/group-study-member-api';
-import { useAuth } from '@/hooks/use-auth';
 import type { GroupStudyMember } from '../../features/study/group/api/group-study-types';
+
 import GroupStudyMemberItem from '../../features/study/group/ui/group-study-member-item';
 import KickedReasonModal from '../../features/study/group/ui/kicked-reason-modal';
 
@@ -45,7 +46,7 @@ export default function StudyMemberList({
   const totalPages = Math.ceil((data?.totalMemberCount || 0) / PAGE_SIZE) || 1;
 
   return (
-    <section className="flex flex-col gap-300">
+    <section className="mt-500 flex w-[1164px] flex-col gap-300">
       {/* 리더가 아닌 참가자에게 내 정보 상단에 노출 */}
       {!isLeader && (
         <SelfMemberInfo

src/components/modals/delete-homework-modal.tsx

@@ -5,11 +5,13 @@ import { Modal } from '../ui/modal';
 
 interface DeleteHomeworkModalProps {
   homeworkId: number;
+  onSuccess?: () => void;
 }
 
 // 과제 삭제 모달
 export default function DeleteHomeworkModal({
   homeworkId,
+  onSuccess,
 }: DeleteHomeworkModalProps) {
   const [open, setOpen] = useState<boolean>(false);
 
@@ -20,6 +22,7 @@ export default function DeleteHomeworkModal({
       onSuccess: () => {
         alert('과제가 성공적으로 삭제되었습니다!');
         setOpen(false);
+        onSuccess?.();
       },
       onError: () => {
         alert('과제 삭제에 실패했습니다. 다시 시도해주세요.');

src/components/modals/delete-mission-modal.tsx

@@ -1,20 +1,41 @@
 import { useState } from 'react';
 
 import { MissionListResponse } from '@/api/openapi';
+import { useDeleteMission } from '@/hooks/queries/mission-api';
 import Button from '../ui/button';
 import { Modal } from '../ui/modal';
 
 interface DeleteMissionModalProps {
   missionId: MissionListResponse['missionId'];
+  groupStudyId: number;
+  onSuccess?: () => void;
 }
 
 // 미션 삭제 모달
 export default function DeleteMissionModal({
   missionId,
+  groupStudyId,
+  onSuccess,
 }: DeleteMissionModalProps) {
   const [open, setOpen] = useState<boolean>(false);
 
-  const handleDelete = () => {};
+  const { mutate: deleteMission } = useDeleteMission();
+
+  const handleDelete = () => {
+    deleteMission(
+      { missionId, groupStudyId },
+      {
+        onSuccess: () => {
+          alert('미션이 성공적으로 삭제되었습니다!');
+          setOpen(false);
+          onSuccess?.();
+        },
+        onError: () => {
+          alert('미션 삭제에 실패했습니다. 다시 시도해주세요.');
+        },
+      },
+    );
+  };
 
   return (
     <Modal.Root open={open} onOpenChange={setOpen}>

src/components/modals/edit-homework-modal.tsx

@@ -19,13 +19,15 @@ type EditHomeworkFormValues = z.infer<typeof EditHomeworkFormSchema>;
 
 interface EditHomeworkModalProps {
   defaultValue: EditHomeworkFormValues;
-  homeworkId: number; // todo api response 타입 적용
+  homeworkId: number;
+  onSuccess?: () => void;
 }
 
 // 과제 수정 모달
 export default function EditHomeworkModal({
   defaultValue,
   homeworkId,
+  onSuccess,
 }: EditHomeworkModalProps) {
   const [open, setOpen] = useState<boolean>(false);
 
@@ -57,6 +59,7 @@ export default function EditHomeworkModal({
             defaultValue={defaultValue}
             homeworkId={homeworkId}
             onClose={() => setOpen(false)}
+            onSuccess={onSuccess}
           />
         </Modal.Content>
       </Modal.Portal>
@@ -68,12 +71,14 @@ interface EditHomeworkFormProps {
   defaultValue: EditHomeworkFormValues;
   homeworkId: number;
   onClose: () => void;
+  onSuccess?: () => void;
 }
 
 function EditHomeworkForm({
   defaultValue,
   homeworkId,
   onClose,
+  onSuccess,
 }: EditHomeworkFormProps) {
   const methods = useForm<EditHomeworkFormValues>({
     resolver: zodResolver(EditHomeworkFormSchema),
@@ -101,6 +106,7 @@ function EditHomeworkForm({
         onSuccess: async () => {
           alert('과제가 성공적으로 수정되었습니다!');
           onClose();
+          onSuccess?.();
         },
         onError: () => {
           alert('과제 수정에 실패했습니다. 다시 시도해주세요.');