From d48b816ac8cb96051fa94ddb3c398b79aeb1db85 Mon Sep 17 00:00:00 2001
From: seunghyeon77 <jdyjsh77@naver.com>
Date: Tue, 24 Dec 2024 15:26:08 +0900
Subject: [PATCH 01/12] =?UTF-8?q?feat:=20=EC=9D=B8=EC=A6=9D=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A1=9C=20=EC=9D=B4?=
 =?UTF-8?q?=EB=8F=99=EC=8B=9C=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=83=81?=
 =?UTF-8?q?=EB=8B=A8=20=EA=B3=A0=EC=A0=95=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_components/ScrollTop.tsx                      | 14 ++++++++++++++
 .../workspaceConfirmaionDetail/page.tsx            |  2 ++
 2 files changed, 16 insertions(+)
 create mode 100644 src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/_components/ScrollTop.tsx

diff --git a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/_components/ScrollTop.tsx b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/_components/ScrollTop.tsx
new file mode 100644
index 0000000..9347238
--- /dev/null
+++ b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/_components/ScrollTop.tsx
@@ -0,0 +1,14 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { useEffect } from 'react';
+
+export default function ScrollTop() {
+  const pathName = usePathname();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathName]);
+
+  return null;
+}
diff --git a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/page.tsx b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/page.tsx
index fea5dde..1ad7777 100644
--- a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/page.tsx
+++ b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/page.tsx
@@ -29,6 +29,7 @@ import {
 import ProgressBar from './_components/ProgressBar';
 import RemaineTime from './_components/RemaineTime';
 import ConfirmationProfileImg from '../_components/ConfirmationProfileImg';
+import ScrollTop from '../_components/ScrollTop';
 
 export default function Page() {
   const [reasonInput, setReasonInput] = useState('');
@@ -158,6 +159,7 @@ export default function Page() {
 
   return (
     <div className='h-screen'>
+      <ScrollTop />
       <div className='flex items-center ml-1 mt-1.5'>
         <ConfirmationProfileImg
           profileImageUrlParams={

From 2aaf50f6d0c1056090328e589673648807bdf67e Mon Sep 17 00:00:00 2001
From: seunghyeon77 <jdyjsh77@naver.com>
Date: Thu, 26 Dec 2024 09:24:26 +0900
Subject: [PATCH 02/12] =?UTF-8?q?refactor:=20=EB=8D=B0=EC=9D=B4=ED=84=B0?=
 =?UTF-8?q?=20=EC=97=86=EC=9D=84=20=EB=95=8C=20=EB=B3=B4=EC=97=AC=EC=A7=80?=
 =?UTF-8?q?=EB=8A=94=20UI=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C?=
 =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../workspaceConfirmation/page.tsx            | 65 +++++++++++--------
 .../[workspaceId]/workspaceHistory/page.tsx   | 10 +--
 .../workspace/_components/NoDataUI.tsx        | 16 +++++
 3 files changed, 57 insertions(+), 34 deletions(-)
 create mode 100644 src/app/(afterLogin)/workspace/_components/NoDataUI.tsx

diff --git a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/page.tsx b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/page.tsx
index 443a7dd..5dfcb5b 100644
--- a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/page.tsx
+++ b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/page.tsx
@@ -11,13 +11,14 @@ import IsSameDateAsPrevious from './_components/IsSameDataAsPrevious';
 import ConfirmationCompo from './_components/ConfirmationCompo';
 import useInfiniteQuerys from '@/hooks/workoutConfirmation/ useInfiniteQuerys';
 import { useEffect, useRef } from 'react';
+import NoDataUI from '../../_components/NoDataUI';
 
 export default function Page() {
   const workspaceId = useWorkoutIdFromParams();
   const [ref, inView] = useInView({ threshold: 0, delay: 0 });
 
   const scrollBottomRef = useRef<HTMLDivElement | null>(null);
-  const isInitialRender = useRef(true);
+  const isInitialRender = useRef<boolean>(true);
 
   const workoutConfirmation = useInfiniteQuerys({
     queryKey: ['workoutConfirmations', workspaceId],
@@ -35,39 +36,51 @@ export default function Page() {
     );
 
   useEffect(() => {
-    if (scrollBottomRef.current && isInitialRender) {
+    if (
+      isInitialRender.current &&
+      workoutConfirmationPages &&
+      workoutConfirmationPages.length
+    ) {
       scrollBottomRef.current?.scrollIntoView({ behavior: 'auto' });
       isInitialRender.current = false;
     }
   }, [workoutConfirmationPages]);
 
   return (
-    <div className='h-full'>
+    <div className='h-screen'>
       <div ref={ref} />
       <div className='-mx-4 px-4 bg-[#F1F7FF] -mt-3 pb-3'>
-        {workoutConfirmationPages?.map(
-          (
-            workoutConfirmationPage: IWorkoutConfirmationPageProps,
-            index: number
-          ) => {
-            return (
-              <div
-                key={`${workoutConfirmationPage.workoutConfirmationId}-${
-                  workoutConfirmationPage.objectionId || 'noObjection'
-                }-${workoutConfirmationPage.createdAt}`}
-              >
-                <IsSameDateAsPrevious
-                  workoutConfirmationPages={workoutConfirmationPages}
-                  workoutConfirmationPage={workoutConfirmationPage}
-                  index={index}
-                />
-                <ConfirmationCompo
-                  workoutConfirmationPage={workoutConfirmationPage}
-                  workspaceId={workspaceId}
-                />
-              </div>
-            );
-          }
+        {workoutConfirmationPages?.length === 0 ? (
+          <div>
+            <NoDataUI content='아직 운동 인증이 없어요.' />
+          </div>
+        ) : (
+          <div>
+            {workoutConfirmationPages?.map(
+              (
+                workoutConfirmationPage: IWorkoutConfirmationPageProps,
+                index: number
+              ) => {
+                return (
+                  <div
+                    key={`${workoutConfirmationPage.workoutConfirmationId}-${
+                      workoutConfirmationPage.objectionId || 'noObjection'
+                    }-${workoutConfirmationPage.createdAt}`}
+                  >
+                    <IsSameDateAsPrevious
+                      workoutConfirmationPages={workoutConfirmationPages}
+                      workoutConfirmationPage={workoutConfirmationPage}
+                      index={index}
+                    />
+                    <ConfirmationCompo
+                      workoutConfirmationPage={workoutConfirmationPage}
+                      workspaceId={workspaceId}
+                    />
+                  </div>
+                );
+              }
+            )}
+          </div>
         )}
         <ObjectionBell
           workspaceId={workspaceId}
diff --git a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceHistory/page.tsx b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceHistory/page.tsx
index 4171dee..462b136 100644
--- a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceHistory/page.tsx
+++ b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceHistory/page.tsx
@@ -4,8 +4,6 @@ import Image from 'next/image';
 import { useQuery } from '@tanstack/react-query';
 import { useSearchParams } from 'next/navigation';
 
-import noGroup from '@/../public/svgs/noGroup.svg';
-
 import { workspaceHistoryDataConst } from '@/constants/queryKey';
 import { workspaceHistorys } from '@/api/workspace';
 
@@ -17,6 +15,7 @@ import useWorkoutHistoryIds from '@/hooks/workoutHistory/useWorkoutHistoryIds';
 import useWorkoutIdFromParams from '@/hooks/workoutHistory/useWorkoutIdFromParams';
 
 import type { THistorys, TQueryTypes } from '@/types/workspaceHistory';
+import NoDataUI from '../../_components/NoDataUI';
 
 function useUserInfo(): TQueryTypes {
   const searchParams = useSearchParams();
@@ -70,12 +69,7 @@ function Page() {
             {'<개인별 운동 히스토리 목록>'}
           </span>
           {workspaceHistoryDatas?.data.workoutHistories.length === 0 ? (
-            <div className='h-[230px] flex items-center justify-center flex-col'>
-              <Image src={noGroup} alt='noGroup' className='h-[73px]' />
-              <span className='text-[#4B5563] text-sm mt-5'>
-                아직 운동 히스토리가 없습니다.
-              </span>
-            </div>
+            <NoDataUI content={'아직 운동 히스토리가 없어요.'} />
           ) : (
             <div className='pt-4 pl-6'>
               {workspaceHistoryDatas?.data.workoutHistories.map(
diff --git a/src/app/(afterLogin)/workspace/_components/NoDataUI.tsx b/src/app/(afterLogin)/workspace/_components/NoDataUI.tsx
new file mode 100644
index 0000000..71b795b
--- /dev/null
+++ b/src/app/(afterLogin)/workspace/_components/NoDataUI.tsx
@@ -0,0 +1,16 @@
+import Image from 'next/image';
+
+import noGroup from '@/../public/svgs/noGroup.svg';
+
+interface INoDataUI {
+  content: string;
+}
+
+export default function NoDataUI({ content }: INoDataUI) {
+  return (
+    <div className='h-[230px] flex items-center justify-center flex-col'>
+      <Image src={noGroup} alt='noGroup' className='h-[73px]' />
+      <span className='text-[#4B5563] text-sm mt-5'>{content}</span>
+    </div>
+  );
+}

From a07ddfb22368c745de4799cb773dd6db9b7aa633 Mon Sep 17 00:00:00 2001
From: seunghyeon77 <jdyjsh77@naver.com>
Date: Thu, 26 Dec 2024 10:18:22 +0900
Subject: [PATCH 03/12] =?UTF-8?q?refactor:=20=EC=9D=B8=EC=A6=9D=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=94=84?=
 =?UTF-8?q?=EB=A1=9C=ED=95=84=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_components/ConfirmationDetailProfile.tsx | 26 +++++++++++++++++++
 .../workspaceConfirmaionDetail/page.tsx       | 25 ++++++------------
 src/types/workoutConfirmation.ts              |  9 +++++++
 3 files changed, 43 insertions(+), 17 deletions(-)
 create mode 100644 src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationDetailProfile.tsx

diff --git a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationDetailProfile.tsx b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationDetailProfile.tsx
new file mode 100644
index 0000000..f1feb5e
--- /dev/null
+++ b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationDetailProfile.tsx
@@ -0,0 +1,26 @@
+import ConfirmationProfileImg from '../../_components/ConfirmationProfileImg';
+import { IWorkspaceConfirmationDetailProps } from '@/types/workoutConfirmation';
+
+interface IConfirmationDetailProfileProps {
+  workspaceConfirmationDetail: IWorkspaceConfirmationDetailProps | undefined;
+}
+
+export default function ConfirmationDetailProfile({
+  workspaceConfirmationDetail,
+}: IConfirmationDetailProfileProps) {
+  return (
+    <div className='flex items-center ml-1 mt-1.5'>
+      <ConfirmationProfileImg
+        profileImageUrlParams={workspaceConfirmationDetail?.profileImageUrl}
+      />
+      <div className='flex flex-col ml-3 mt-1'>
+        <span className='text-base text-[#1F2937]'>
+          {workspaceConfirmationDetail?.nickname}
+        </span>
+        <span className='text-[10px] text-[#848D99]'>
+          {workspaceConfirmationDetail?.loginId}
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/page.tsx b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/page.tsx
index 1ad7777..96aa674 100644
--- a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/page.tsx
+++ b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/page.tsx
@@ -28,8 +28,9 @@ import {
 } from '@/api/workspaceConfirmaion';
 import ProgressBar from './_components/ProgressBar';
 import RemaineTime from './_components/RemaineTime';
-import ConfirmationProfileImg from '../_components/ConfirmationProfileImg';
 import ScrollTop from '../_components/ScrollTop';
+import ConfirmationDetailProfile from './_components/ConfirmationDetailProfile';
+import { IWorkspaceConfirmationDetailProps } from '@/types/workoutConfirmation';
 
 export default function Page() {
   const [reasonInput, setReasonInput] = useState('');
@@ -45,7 +46,9 @@ export default function Page() {
 
   const objectionId = parseInt(seachParams.get('objectionId') || '0', 10);
 
-  const { data: workspaceConfirmationDetail } = useQuery({
+  const { data: workspaceConfirmationDetail } = useQuery<{
+    data: IWorkspaceConfirmationDetailProps;
+  }>({
     queryKey: [
       'workspaceConfimationDetail',
       workspaceId,
@@ -160,21 +163,9 @@ export default function Page() {
   return (
     <div className='h-screen'>
       <ScrollTop />
-      <div className='flex items-center ml-1 mt-1.5'>
-        <ConfirmationProfileImg
-          profileImageUrlParams={
-            workspaceConfirmationDetail?.data.profileImageUrl
-          }
-        />
-        <div className='flex flex-col ml-3 mt-1'>
-          <span className='text-base text-[#1F2937]'>
-            {workspaceConfirmationDetail?.data.nickname}
-          </span>
-          <span className='text-[10px] text-[#848D99]'>
-            {workspaceConfirmationDetail?.data.loginId}
-          </span>
-        </div>
-      </div>
+      <ConfirmationDetailProfile
+        workspaceConfirmationDetail={workspaceConfirmationDetail?.data}
+      />
       <div className='my-5'>
         <span className='text-base text-[#1F2937]'>
           {workspaceConfirmationDetail?.data.comment}
diff --git a/src/types/workoutConfirmation.ts b/src/types/workoutConfirmation.ts
index 37ba7ae..c389d30 100644
--- a/src/types/workoutConfirmation.ts
+++ b/src/types/workoutConfirmation.ts
@@ -17,3 +17,12 @@ export interface IWorkoutConfirmationObjectionListPageProps {
   voteCompletion: boolean;
   workoutConfirmationId: number;
 }
+
+export interface IWorkspaceConfirmationDetailProps {
+  comment: string;
+  loginId: string;
+  nickname: string;
+  objectionId: number | null;
+  profileImageUrl: any;
+  workoutConfirmationImageUrl: any;
+}

From 97dd776085cceae7932bd962ca63a9efaaf96fd0 Mon Sep 17 00:00:00 2001
From: seunghyeon77 <jdyjsh77@naver.com>
Date: Thu, 26 Dec 2024 10:24:53 +0900
Subject: [PATCH 04/12] =?UTF-8?q?refactor:=20=EC=9D=B8=EC=A6=9D=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9D=B4?=
 =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_components/ConfimationDetailImage.tsx    | 29 +++++++++++++++++++
 .../workspaceConfirmaionDetail/page.tsx       | 22 +++-----------
 2 files changed, 33 insertions(+), 18 deletions(-)
 create mode 100644 src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfimationDetailImage.tsx

diff --git a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfimationDetailImage.tsx b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfimationDetailImage.tsx
new file mode 100644
index 0000000..ba781e0
--- /dev/null
+++ b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfimationDetailImage.tsx
@@ -0,0 +1,29 @@
+import Image from 'next/image';
+
+import confirmDetailNoImage from '@/../public/svgs/workspace/workspaceConfirmaion/confirmDetailNoImage.svg';
+import { IWorkspaceConfirmationDetailProps } from '@/types/workoutConfirmation';
+
+interface IConfirmationDetailImage {
+  workspaceConfirmationDetail: IWorkspaceConfirmationDetailProps | undefined;
+}
+
+export default function ConfirmationDetailImage({
+  workspaceConfirmationDetail,
+}: IConfirmationDetailImage) {
+  return (
+    <div className='w-full h-[380px] bg-[#E5E7EB] mt-5 flex justify-center relative'>
+      {workspaceConfirmationDetail?.workoutConfirmationImageUrl === '' ? (
+        <Image src={confirmDetailNoImage} alt='confirmDetailNoImage' />
+      ) : (
+        <Image
+          src={workspaceConfirmationDetail?.workoutConfirmationImageUrl}
+          alt='Image'
+          loader={({ src }) => src}
+          loading='lazy'
+          sizes='360px'
+          fill
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/page.tsx b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/page.tsx
index 96aa674..16fd5af 100644
--- a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/page.tsx
+++ b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/page.tsx
@@ -14,7 +14,6 @@ import {
 } from '@/components/ui/dialog';
 
 import objectedWorkoutVoteIcon from '@/../public/svgs/workspace/workspaceConfirmaion/objectedWorkoutVoteIcon.svg';
-import confirmDetailNoImage from '@/../public/svgs/workspace/workspaceConfirmaion/confirmDetailNoImage.svg';
 
 import { DialogDescription } from '@radix-ui/react-dialog';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
@@ -31,6 +30,7 @@ import RemaineTime from './_components/RemaineTime';
 import ScrollTop from '../_components/ScrollTop';
 import ConfirmationDetailProfile from './_components/ConfirmationDetailProfile';
 import { IWorkspaceConfirmationDetailProps } from '@/types/workoutConfirmation';
+import ConfirmationDetailImage from './_components/ConfimationDetailImage';
 
 export default function Page() {
   const [reasonInput, setReasonInput] = useState('');
@@ -170,23 +170,9 @@ export default function Page() {
         <span className='text-base text-[#1F2937]'>
           {workspaceConfirmationDetail?.data.comment}
         </span>
-        <div className='w-full h-[380px] bg-[#E5E7EB] mt-5 flex justify-center relative'>
-          {workspaceConfirmationDetail?.data.workoutConfirmationImageUrl ===
-          '' ? (
-            <Image src={confirmDetailNoImage} alt='confirmDetailNoImage' />
-          ) : (
-            <Image
-              src={
-                workspaceConfirmationDetail?.data.workoutConfirmationImageUrl
-              }
-              alt='Image'
-              loader={({ src }) => src}
-              loading='lazy'
-              sizes='360px'
-              fill
-            />
-          )}
-        </div>
+        <ConfirmationDetailImage
+          workspaceConfirmationDetail={workspaceConfirmationDetail?.data}
+        />
       </div>
 
       {/* 이의 신청 팝업창 */}

From 3b0de8f285f6cd975295fcc16b54d89d454689fa Mon Sep 17 00:00:00 2001
From: seunghyeon77 <jdyjsh77@naver.com>
Date: Thu, 26 Dec 2024 11:00:42 +0900
Subject: [PATCH 05/12] =?UTF-8?q?refactor:=20=EC=9D=B8=EC=A6=9D=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=20=EC=9D=B8=EC=A6=9D=20=ED=88=AC=ED=91=9C=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ConfirmationObjectionCompo.tsx            | 202 ++++++++++++++++++
 .../workspaceConfirmaionDetail/page.tsx       | 187 +---------------
 src/types/workoutConfirmation.ts              |  12 ++
 3 files changed, 222 insertions(+), 179 deletions(-)
 create mode 100644 src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationObjectionCompo.tsx

diff --git a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationObjectionCompo.tsx b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationObjectionCompo.tsx
new file mode 100644
index 0000000..87ecc11
--- /dev/null
+++ b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationObjectionCompo.tsx
@@ -0,0 +1,202 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useState } from 'react';
+
+import Image from 'next/image';
+import { ReadonlyURLSearchParams } from 'next/navigation';
+import { DialogTrigger } from '@/components/ui/dialog';
+
+import objectedWorkoutVoteIcon from '@/../public/svgs/workspace/workspaceConfirmaion/objectedWorkoutVoteIcon.svg';
+import ProgressBar from './ProgressBar';
+import RemaineTime from './RemaineTime';
+import {
+  workoutObjections,
+  workoutObjectionsVote,
+} from '@/api/workspaceConfirmaion';
+
+interface IConfirmationObjectionCompo {
+  seachParams: ReadonlyURLSearchParams;
+  workspaceId: number;
+  objectionId: number;
+}
+
+export default function ConfirmationObjectionCompo({
+  seachParams,
+  workspaceId,
+  objectionId,
+}: IConfirmationObjectionCompo) {
+  console.log(seachParams);
+  const [isObjectionVote, setIsObjection] = useState<boolean | null>(null);
+
+  const isObjection = seachParams.get('isObjection') === 'false';
+
+  const { data: workoutObjection } = useQuery({
+    queryKey: ['workoutObjection', workspaceId, objectionId],
+    queryFn: () =>
+      workoutObjections({
+        workspaceId,
+        objectionId,
+      }),
+    enabled: !isObjection,
+  });
+
+  const handleVote = (isObjection: boolean) => {
+    setIsObjection((prev) => (prev === isObjection ? null : isObjection));
+  };
+
+  const queryClient = useQueryClient();
+
+  const OBJECTTIONVOTE_QUERYKEY = {
+    workoutObjection: (workspaceId: number, objectionId: number) => [
+      'workoutObjection',
+      workspaceId,
+      objectionId,
+    ],
+  };
+
+  const objectionVote = useMutation({
+    mutationFn: workoutObjectionsVote,
+    onSuccess: (data) => {
+      console.log('Success:', data);
+      alert('이의 신청 투표가 성공적으로 제출되었습니다.');
+
+      queryClient.invalidateQueries({
+        queryKey: OBJECTTIONVOTE_QUERYKEY.workoutObjection(
+          workspaceId,
+          objectionId
+        ),
+      });
+    },
+
+    onError: (error) => {
+      console.error('Error:', error);
+      alert('이의 신청 투표 중 오류가 발생했습니다.');
+    },
+  });
+
+  const handleVotePost = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+
+    if (isObjectionVote === null) {
+      alert('이의신청 투표를 진행해주세요.');
+    }
+
+    if (isObjectionVote !== null) {
+      objectionVote.mutate({
+        workspaceId,
+        objectionId,
+        objectionVote: isObjectionVote,
+      });
+    }
+  };
+
+  const appovalCount =
+    (workoutObjection?.data.approvalCount / workoutObjection?.data.headCount) *
+    100;
+  const rejectionCount =
+    (workoutObjection?.data.rejectionCount / workoutObjection?.data.headCount) *
+    100;
+  if (appovalCount > 100 || rejectionCount > 100) {
+    appovalCount === 100 || rejectionCount === 100;
+  }
+
+  return (
+    <div>
+      {isObjection ? (
+        <div
+          className={
+            ' w-full h-11 bg-[#EFF6FF] rounded-[35px] flex justify-center'
+          }
+        >
+          <DialogTrigger asChild>
+            <button className='w-full text-base text-[#848D99]'>
+              이의 신청하기
+            </button>
+          </DialogTrigger>
+        </div>
+      ) : (
+        <div
+          className={`w-full ${
+            !workoutObjection?.data.inInProgress ? 'h-44' : 'h-42'
+          } border border-[#E5E7EB] rounded-lg p-3`}
+        >
+          <div className='flex'>
+            <Image
+              src={objectedWorkoutVoteIcon}
+              alt='objectedWorkoutVoteIcon'
+            />
+            <span className='text-base text-[#1F2937] ml-1'>
+              {!workoutObjection?.data.inInProgress
+                ? `투표 결과: ${
+                    workoutObjection?.data.confirmationCompletion
+                      ? '찬성'
+                      : '반대'
+                  }`
+                : '이의 신청 투표'}
+            </span>
+          </div>
+          <p className='text-[10px] text-[#1F2937] my-2'>
+            {workoutObjection?.data.reason}
+          </p>
+          <div className='flex justify-end mb-2'>
+            <span className='text-[10px] text-[#848D99]'>
+              {!workoutObjection?.data.inInProgress ? (
+                '투표 종료'
+              ) : (
+                <>
+                  투표 종료까지{' '}
+                  <RemaineTime deadline={workoutObjection?.data.deadline} />
+                </>
+              )}
+              {' * '}
+              {workoutObjection?.data.voteParticipationCount}명 참여
+            </span>
+          </div>
+          {!workoutObjection?.data.inInProgress ? (
+            <div className='h-11 bg-[#3B82F6] text-[#FFFFFF] rounded-[35px] mt-4 flex justify-center items-center opacity-60'>
+              <span className='text-base'>투표 종료</span>
+            </div>
+          ) : (
+            <div>
+              <ProgressBar
+                comment='찬성하기'
+                progressValue={appovalCount}
+                onClick={() => {
+                  if (!workoutObjection?.data.voteCompletion) handleVote(true);
+                }}
+                isObjectionVote={isObjectionVote === true}
+              />
+              <ProgressBar
+                comment='반대하기'
+                progressValue={rejectionCount}
+                onClick={() => {
+                  if (!workoutObjection?.data.voteCompletion) handleVote(false);
+                }}
+                isObjectionVote={isObjectionVote === false}
+              />
+              <div
+                className={`h-11 ${
+                  isObjectionVote !== null ||
+                  workoutObjection?.data.voteCompletion
+                    ? 'bg-[#3B82F6] text-[#FFFFFF]'
+                    : 'bg-[#EFF6FF] text-[#3B82F6]'
+                } rounded-[35px] flex justify-center`}
+              >
+                {workoutObjection?.data.voteCompletion ? (
+                  <div className='text-base flex items-center'>투표완료</div>
+                ) : (
+                  <button
+                    className='text-base w-full'
+                    onClick={handleVotePost}
+                    disabled={objectionVote.isPending}
+                  >
+                    투표하기
+                  </button>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/page.tsx b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/page.tsx
index 16fd5af..ad52a72 100644
--- a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/page.tsx
+++ b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/page.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import Image from 'next/image';
 import { useState } from 'react';
 
 import {
@@ -10,31 +9,25 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
 } from '@/components/ui/dialog';
 
-import objectedWorkoutVoteIcon from '@/../public/svgs/workspace/workspaceConfirmaion/objectedWorkoutVoteIcon.svg';
-
 import { DialogDescription } from '@radix-ui/react-dialog';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { useRouter, useSearchParams } from 'next/navigation';
 import useWorkoutIdFromParams from '@/hooks/workoutHistory/useWorkoutIdFromParams';
 import {
   workoutConfirmaionsDetail,
   workoutObjectionReason,
-  workoutObjections,
-  workoutObjectionsVote,
 } from '@/api/workspaceConfirmaion';
-import ProgressBar from './_components/ProgressBar';
-import RemaineTime from './_components/RemaineTime';
+
 import ScrollTop from '../_components/ScrollTop';
 import ConfirmationDetailProfile from './_components/ConfirmationDetailProfile';
 import { IWorkspaceConfirmationDetailProps } from '@/types/workoutConfirmation';
 import ConfirmationDetailImage from './_components/ConfimationDetailImage';
+import ConfirmationobjectionCompo from './_components/ConfirmationObjectionCompo';
 
 export default function Page() {
   const [reasonInput, setReasonInput] = useState('');
-  const [isObjectionVote, setIsObjection] = useState<boolean | null>(null);
   const router = useRouter();
   const workspaceId = useWorkoutIdFromParams();
   const seachParams = useSearchParams();
@@ -42,7 +35,6 @@ export default function Page() {
     seachParams.get('workoutConfirmationId') || '0',
     10
   );
-  const isObjection = seachParams.get('isObjection') === 'false';
 
   const objectionId = parseInt(seachParams.get('objectionId') || '0', 10);
 
@@ -61,18 +53,6 @@ export default function Page() {
       }),
   });
 
-  const { data: workoutObjection } = useQuery({
-    queryKey: ['workoutObjection', workspaceId, objectionId],
-    queryFn: () =>
-      workoutObjections({
-        workspaceId,
-        objectionId,
-      }),
-    enabled: !isObjection,
-  });
-
-  const queryClient = useQueryClient();
-
   const objectionReason = useMutation({
     mutationFn: workoutObjectionReason,
     onSuccess: (data) => {
@@ -102,64 +82,6 @@ export default function Page() {
     }
   };
 
-  const handleVote = (isObjection: boolean) => {
-    setIsObjection((prev) => (prev === isObjection ? null : isObjection));
-  };
-
-  const OBJECTTIONVOTE_QUERYKEY = {
-    workoutObjection: (workspaceId: number, objectionId: number) => [
-      'workoutObjection',
-      workspaceId,
-      objectionId,
-    ],
-  };
-
-  const objectionVote = useMutation({
-    mutationFn: workoutObjectionsVote,
-    onSuccess: (data) => {
-      console.log('Success:', data);
-      alert('이의 신청 투표가 성공적으로 제출되었습니다.');
-
-      queryClient.invalidateQueries({
-        queryKey: OBJECTTIONVOTE_QUERYKEY.workoutObjection(
-          workspaceId,
-          objectionId
-        ),
-      });
-    },
-
-    onError: (error) => {
-      console.error('Error:', error);
-      alert('이의 신청 투표 중 오류가 발생했습니다.');
-    },
-  });
-
-  const handleVotePost = (event: React.MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-
-    if (isObjectionVote === null) {
-      alert('이의신청 투표를 진행해주세요.');
-    }
-
-    if (isObjectionVote !== null) {
-      objectionVote.mutate({
-        workspaceId,
-        objectionId,
-        objectionVote: isObjectionVote,
-      });
-    }
-  };
-
-  const appovalCount =
-    (workoutObjection?.data.approvalCount / workoutObjection?.data.headCount) *
-    100;
-  const rejectionCount =
-    (workoutObjection?.data.rejectionCount / workoutObjection?.data.headCount) *
-    100;
-  if (appovalCount > 100 || rejectionCount > 100) {
-    appovalCount === 100 || rejectionCount === 100;
-  }
-
   return (
     <div className='h-screen'>
       <ScrollTop />
@@ -177,104 +99,11 @@ export default function Page() {
 
       {/* 이의 신청 팝업창 */}
       <Dialog>
-        {isObjection ? (
-          <div
-            className={
-              ' w-full h-11 bg-[#EFF6FF] rounded-[35px] flex justify-center'
-            }
-          >
-            <DialogTrigger asChild>
-              <button className='w-full text-base text-[#848D99]'>
-                이의 신청하기
-              </button>
-            </DialogTrigger>
-          </div>
-        ) : (
-          <div
-            className={`w-full ${
-              !workoutObjection?.data.inInProgress ? 'h-44' : 'h-42'
-            } border border-[#E5E7EB] rounded-lg p-3`}
-          >
-            <div className='flex'>
-              <Image
-                src={objectedWorkoutVoteIcon}
-                alt='objectedWorkoutVoteIcon'
-              />
-              <span className='text-base text-[#1F2937] ml-1'>
-                {!workoutObjection?.data.inInProgress
-                  ? `투표 결과: ${
-                      workoutObjection?.data.confirmationCompletion
-                        ? '찬성'
-                        : '반대'
-                    }`
-                  : '이의 신청 투표'}
-              </span>
-            </div>
-            <p className='text-[10px] text-[#1F2937] my-2'>
-              {workoutObjection?.data.reason}
-            </p>
-            <div className='flex justify-end mb-2'>
-              <span className='text-[10px] text-[#848D99]'>
-                {!workoutObjection?.data.inInProgress ? (
-                  '투표 종료'
-                ) : (
-                  <>
-                    투표 종료까지{' '}
-                    <RemaineTime deadline={workoutObjection?.data.deadline} />
-                  </>
-                )}
-                {' * '}
-                {workoutObjection?.data.voteParticipationCount}명 참여
-              </span>
-            </div>
-            {!workoutObjection?.data.inInProgress ? (
-              <div className='h-11 bg-[#3B82F6] text-[#FFFFFF] rounded-[35px] mt-4 flex justify-center items-center opacity-60'>
-                <span className='text-base'>투표 종료</span>
-              </div>
-            ) : (
-              <>
-                <ProgressBar
-                  comment='찬성하기'
-                  progressValue={appovalCount}
-                  onClick={() => {
-                    if (!workoutObjection?.data.voteCompletion)
-                      handleVote(true);
-                  }}
-                  isObjectionVote={isObjectionVote === true}
-                />
-                <ProgressBar
-                  comment='반대하기'
-                  progressValue={rejectionCount}
-                  onClick={() => {
-                    if (!workoutObjection?.data.voteCompletion)
-                      handleVote(false);
-                  }}
-                  isObjectionVote={isObjectionVote === false}
-                />
-                <div
-                  className={`h-11 ${
-                    isObjectionVote !== null ||
-                    workoutObjection?.data.voteCompletion
-                      ? 'bg-[#3B82F6] text-[#FFFFFF]'
-                      : 'bg-[#EFF6FF] text-[#3B82F6]'
-                  } rounded-[35px] flex justify-center`}
-                >
-                  {workoutObjection?.data.voteCompletion ? (
-                    <div className='text-base flex items-center'>투표완료</div>
-                  ) : (
-                    <button
-                      className='text-base w-full'
-                      onClick={handleVotePost}
-                      disabled={objectionVote.isPending}
-                    >
-                      투표하기
-                    </button>
-                  )}
-                </div>
-              </>
-            )}
-          </div>
-        )}
+        <ConfirmationobjectionCompo
+          seachParams={seachParams}
+          workspaceId={workspaceId}
+          objectionId={objectionId}
+        />
 
         <DialogContent
           className={`w-72 ${
diff --git a/src/types/workoutConfirmation.ts b/src/types/workoutConfirmation.ts
index c389d30..3bad659 100644
--- a/src/types/workoutConfirmation.ts
+++ b/src/types/workoutConfirmation.ts
@@ -26,3 +26,15 @@ export interface IWorkspaceConfirmationDetailProps {
   profileImageUrl: any;
   workoutConfirmationImageUrl: any;
 }
+
+export interface IWorkoutObjectionProps {
+  approvalCount: number;
+  confirmationCompletion: boolean | null;
+  deadline: string;
+  headCount: number;
+  inInProgress: boolean;
+  reason: string;
+  rejectionCount: number;
+  voteCompletion: boolean | null;
+  voteParticipationCount: number;
+}

From 557f739a10c2fcd20d6a865390f0704e6a6f2d16 Mon Sep 17 00:00:00 2001
From: seunghyeon77 <jdyjsh77@naver.com>
Date: Thu, 26 Dec 2024 11:11:05 +0900
Subject: [PATCH 06/12] =?UTF-8?q?refactor:=20=EC=9D=B8=EC=A6=9D=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=EB=82=B4=EC=9A=A9=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_components/ConfirmationDetailCompo.tsx   | 46 +++++++++++++++++++
 .../ConfirmationObjectionCompo.tsx            |  5 +-
 .../workspaceConfirmaionDetail/page.tsx       | 40 ++--------------
 3 files changed, 52 insertions(+), 39 deletions(-)
 create mode 100644 src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationDetailCompo.tsx

diff --git a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationDetailCompo.tsx b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationDetailCompo.tsx
new file mode 100644
index 0000000..bd38efd
--- /dev/null
+++ b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationDetailCompo.tsx
@@ -0,0 +1,46 @@
+import { useQuery } from '@tanstack/react-query';
+import ConfirmationDetailImage from './ConfimationDetailImage';
+import ConfirmationDetailProfile from './ConfirmationDetailProfile';
+import { IWorkspaceConfirmationDetailProps } from '@/types/workoutConfirmation';
+import useWorkoutIdFromParams from '@/hooks/workoutHistory/useWorkoutIdFromParams';
+import { workoutConfirmaionsDetail } from '@/api/workspaceConfirmaion';
+
+interface IConfirmationDetailCompoProps {
+  workoutConfirmationId: number;
+}
+
+export default function ConfirmationDetailCompo({
+  workoutConfirmationId,
+}: IConfirmationDetailCompoProps) {
+  const workspaceId = useWorkoutIdFromParams();
+
+  const { data: workspaceConfirmationDetail } = useQuery<{
+    data: IWorkspaceConfirmationDetailProps;
+  }>({
+    queryKey: [
+      'workspaceConfimationDetail',
+      workspaceId,
+      workoutConfirmationId,
+    ],
+    queryFn: () =>
+      workoutConfirmaionsDetail({
+        workspaceId,
+        workoutConfirmationId,
+      }),
+  });
+  return (
+    <div>
+      <ConfirmationDetailProfile
+        workspaceConfirmationDetail={workspaceConfirmationDetail?.data}
+      />
+      <div className='my-5'>
+        <span className='text-base text-[#1F2937]'>
+          {workspaceConfirmationDetail?.data.comment}
+        </span>
+        <ConfirmationDetailImage
+          workspaceConfirmationDetail={workspaceConfirmationDetail?.data}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationObjectionCompo.tsx b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationObjectionCompo.tsx
index 87ecc11..6ff2be2 100644
--- a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationObjectionCompo.tsx
+++ b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationObjectionCompo.tsx
@@ -12,20 +12,19 @@ import {
   workoutObjections,
   workoutObjectionsVote,
 } from '@/api/workspaceConfirmaion';
+import useWorkoutIdFromParams from '@/hooks/workoutHistory/useWorkoutIdFromParams';
 
 interface IConfirmationObjectionCompo {
   seachParams: ReadonlyURLSearchParams;
-  workspaceId: number;
   objectionId: number;
 }
 
 export default function ConfirmationObjectionCompo({
   seachParams,
-  workspaceId,
   objectionId,
 }: IConfirmationObjectionCompo) {
-  console.log(seachParams);
   const [isObjectionVote, setIsObjection] = useState<boolean | null>(null);
+  const workspaceId = useWorkoutIdFromParams();
 
   const isObjection = seachParams.get('isObjection') === 'false';
 
diff --git a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/page.tsx b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/page.tsx
index ad52a72..5343162 100644
--- a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/page.tsx
+++ b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/page.tsx
@@ -12,19 +12,14 @@ import {
 } from '@/components/ui/dialog';
 
 import { DialogDescription } from '@radix-ui/react-dialog';
-import { useMutation, useQuery } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import { useRouter, useSearchParams } from 'next/navigation';
 import useWorkoutIdFromParams from '@/hooks/workoutHistory/useWorkoutIdFromParams';
-import {
-  workoutConfirmaionsDetail,
-  workoutObjectionReason,
-} from '@/api/workspaceConfirmaion';
+import { workoutObjectionReason } from '@/api/workspaceConfirmaion';
 
 import ScrollTop from '../_components/ScrollTop';
-import ConfirmationDetailProfile from './_components/ConfirmationDetailProfile';
-import { IWorkspaceConfirmationDetailProps } from '@/types/workoutConfirmation';
-import ConfirmationDetailImage from './_components/ConfimationDetailImage';
 import ConfirmationobjectionCompo from './_components/ConfirmationObjectionCompo';
+import ConfirmationDetailCompo from './_components/ConfirmationDetailCompo';
 
 export default function Page() {
   const [reasonInput, setReasonInput] = useState('');
@@ -35,24 +30,8 @@ export default function Page() {
     seachParams.get('workoutConfirmationId') || '0',
     10
   );
-
   const objectionId = parseInt(seachParams.get('objectionId') || '0', 10);
 
-  const { data: workspaceConfirmationDetail } = useQuery<{
-    data: IWorkspaceConfirmationDetailProps;
-  }>({
-    queryKey: [
-      'workspaceConfimationDetail',
-      workspaceId,
-      workoutConfirmationId,
-    ],
-    queryFn: () =>
-      workoutConfirmaionsDetail({
-        workspaceId,
-        workoutConfirmationId,
-      }),
-  });
-
   const objectionReason = useMutation({
     mutationFn: workoutObjectionReason,
     onSuccess: (data) => {
@@ -85,23 +64,12 @@ export default function Page() {
   return (
     <div className='h-screen'>
       <ScrollTop />
-      <ConfirmationDetailProfile
-        workspaceConfirmationDetail={workspaceConfirmationDetail?.data}
-      />
-      <div className='my-5'>
-        <span className='text-base text-[#1F2937]'>
-          {workspaceConfirmationDetail?.data.comment}
-        </span>
-        <ConfirmationDetailImage
-          workspaceConfirmationDetail={workspaceConfirmationDetail?.data}
-        />
-      </div>
+      <ConfirmationDetailCompo workoutConfirmationId={workoutConfirmationId} />
 
       {/* 이의 신청 팝업창 */}
       <Dialog>
         <ConfirmationobjectionCompo
           seachParams={seachParams}
-          workspaceId={workspaceId}
           objectionId={objectionId}
         />
 

From e449134fee4763871af2d9a2fecd8a10c5dfd7a7 Mon Sep 17 00:00:00 2001
From: seunghyeon77 <jdyjsh77@naver.com>
Date: Thu, 26 Dec 2024 11:23:13 +0900
Subject: [PATCH 07/12] =?UTF-8?q?refactor:=20=EC=9D=B8=EC=A6=9D=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9D=B4?=
 =?UTF-8?q?=EC=9D=98=20=EC=8B=A0=EC=B2=AD=20=EC=9E=85=EB=A0=A5=20=ED=8C=9D?=
 =?UTF-8?q?=EC=97=85=EC=B0=BD=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_components/ConfirmationDetailCompo.tsx   |   1 +
 .../ConfirmationDetailObjectionInput.tsx      | 100 +++++++++++++++++
 .../ConfirmationObjectionCompo.tsx            |   5 +-
 .../workspaceConfirmaionDetail/page.tsx       | 104 ++----------------
 4 files changed, 111 insertions(+), 99 deletions(-)
 create mode 100644 src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationDetailObjectionInput.tsx

diff --git a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationDetailCompo.tsx b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationDetailCompo.tsx
index bd38efd..54eaebf 100644
--- a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationDetailCompo.tsx
+++ b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationDetailCompo.tsx
@@ -1,4 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
+
 import ConfirmationDetailImage from './ConfimationDetailImage';
 import ConfirmationDetailProfile from './ConfirmationDetailProfile';
 import { IWorkspaceConfirmationDetailProps } from '@/types/workoutConfirmation';
diff --git a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationDetailObjectionInput.tsx b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationDetailObjectionInput.tsx
new file mode 100644
index 0000000..9567ebd
--- /dev/null
+++ b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationDetailObjectionInput.tsx
@@ -0,0 +1,100 @@
+import { workoutObjectionReason } from '@/api/workspaceConfirmaion';
+import {
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import useWorkoutIdFromParams from '@/hooks/workoutHistory/useWorkoutIdFromParams';
+import { DialogDescription } from '@radix-ui/react-dialog';
+import { useMutation } from '@tanstack/react-query';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+
+interface IConfirmationDetailObjectionInputProps {
+  workoutConfirmationId: number;
+}
+
+export default function ConfirmationDetailObjectionInput({
+  workoutConfirmationId,
+}: IConfirmationDetailObjectionInputProps) {
+  const router = useRouter();
+  const [reasonInput, setReasonInput] = useState('');
+  const workspaceId = useWorkoutIdFromParams();
+
+  const objectionReason = useMutation({
+    mutationFn: workoutObjectionReason,
+    onSuccess: (data) => {
+      console.log('Success:', data);
+      alert('이의 신청이 성공적으로 제출되었습니다.');
+      router.push(`/workspace/${workspaceId}/workspaceConfirmation`);
+    },
+    onError: (error) => {
+      console.error('Error:', error);
+      alert('이의 신청 제출 중 오류가 발생했습니다.');
+    },
+  });
+
+  const handleReasonPost = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+
+    if (reasonInput.length < 10) {
+      alert('10자 이상 작성하셔야 합니다.');
+    }
+
+    if (reasonInput.length >= 10) {
+      objectionReason.mutate({
+        workspaceId,
+        workoutConfirmationId,
+        objectionReason: reasonInput,
+      });
+    }
+  };
+
+  return (
+    <DialogContent
+      className={`w-72 ${
+        reasonInput.length <= 9 ? 'h-[190px]' : 'h-[165px]'
+      } rounded-lg`}
+    >
+      <DialogHeader>
+        <DialogTitle className='-mb-2' />
+        <DialogDescription className='text-base text-[#1F2937]'>
+          이의 신청 이유를 입력해주세요.
+        </DialogDescription>
+      </DialogHeader>
+      <div>
+        <input
+          className='w-60 h-10 rounded-lg bg-[#F9FAFB] text-sm text-[#B7C4D5] pl-3'
+          value={reasonInput}
+          onChange={(e) => setReasonInput(e.target.value)}
+        />
+        {reasonInput.length <= 10 ? (
+          <span className='text-[8px] text-[#F87171] ml-2'>
+            이의 신청 이유는 10자 이상 작성해주세요.
+          </span>
+        ) : (
+          <></>
+        )}
+      </div>
+      <DialogFooter>
+        <div>
+          <hr className='absolute left-1/2 -translate-x-1/2 w-72 border-l border-[#E5E7EB]' />
+          <div className='flex justify-between mx-7 items-center'>
+            <DialogClose asChild>
+              <span className='text-sm text-[#B7C4D5]'>cancel</span>
+            </DialogClose>
+            <hr className='h-[45px] border-l border-[#E5E7EB]' />
+            <button
+              className='text-sm text-[#3B82F6] mr-3'
+              onClick={handleReasonPost}
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      </DialogFooter>
+    </DialogContent>
+  );
+}
diff --git a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationObjectionCompo.tsx b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationObjectionCompo.tsx
index 6ff2be2..6440e2d 100644
--- a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationObjectionCompo.tsx
+++ b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationObjectionCompo.tsx
@@ -1,5 +1,5 @@
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 
 import Image from 'next/image';
 import { ReadonlyURLSearchParams } from 'next/navigation';
@@ -16,15 +16,14 @@ import useWorkoutIdFromParams from '@/hooks/workoutHistory/useWorkoutIdFromParam
 
 interface IConfirmationObjectionCompo {
   seachParams: ReadonlyURLSearchParams;
-  objectionId: number;
 }
 
 export default function ConfirmationObjectionCompo({
   seachParams,
-  objectionId,
 }: IConfirmationObjectionCompo) {
   const [isObjectionVote, setIsObjection] = useState<boolean | null>(null);
   const workspaceId = useWorkoutIdFromParams();
+  const objectionId = parseInt(seachParams.get('objectionId') || '0', 10);
 
   const isObjection = seachParams.get('isObjection') === 'false';
 
diff --git a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/page.tsx b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/page.tsx
index 5343162..6f8166d 100644
--- a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/page.tsx
+++ b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/page.tsx
@@ -1,65 +1,20 @@
 'use client';
 
-import { useState } from 'react';
+import { Dialog } from '@/components/ui/dialog';
 
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-
-import { DialogDescription } from '@radix-ui/react-dialog';
-import { useMutation } from '@tanstack/react-query';
-import { useRouter, useSearchParams } from 'next/navigation';
-import useWorkoutIdFromParams from '@/hooks/workoutHistory/useWorkoutIdFromParams';
-import { workoutObjectionReason } from '@/api/workspaceConfirmaion';
+import { useSearchParams } from 'next/navigation';
 
 import ScrollTop from '../_components/ScrollTop';
-import ConfirmationobjectionCompo from './_components/ConfirmationObjectionCompo';
+import ConfirmationObjectionCompo from './_components/ConfirmationObjectionCompo';
 import ConfirmationDetailCompo from './_components/ConfirmationDetailCompo';
+import ConfirmationDetailObjectionInput from './_components/ConfirmationDetailObjectionInput';
 
 export default function Page() {
-  const [reasonInput, setReasonInput] = useState('');
-  const router = useRouter();
-  const workspaceId = useWorkoutIdFromParams();
   const seachParams = useSearchParams();
   const workoutConfirmationId = parseInt(
     seachParams.get('workoutConfirmationId') || '0',
     10
   );
-  const objectionId = parseInt(seachParams.get('objectionId') || '0', 10);
-
-  const objectionReason = useMutation({
-    mutationFn: workoutObjectionReason,
-    onSuccess: (data) => {
-      console.log('Success:', data);
-      alert('이의 신청이 성공적으로 제출되었습니다.');
-      router.push(`/workspace/${workspaceId}/workspaceConfirmation`);
-    },
-    onError: (error) => {
-      console.error('Error:', error);
-      alert('이의 신청 제출 중 오류가 발생했습니다.');
-    },
-  });
-
-  const handleReasonPost = (event: React.MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-
-    if (reasonInput.length < 10) {
-      alert('10자 이상 작성하셔야 합니다.');
-    }
-
-    if (reasonInput.length >= 10) {
-      objectionReason.mutate({
-        workspaceId,
-        workoutConfirmationId,
-        objectionReason: reasonInput,
-      });
-    }
-  };
 
   return (
     <div className='h-screen'>
@@ -68,54 +23,11 @@ export default function Page() {
 
       {/* 이의 신청 팝업창 */}
       <Dialog>
-        <ConfirmationobjectionCompo
-          seachParams={seachParams}
-          objectionId={objectionId}
-        />
+        <ConfirmationObjectionCompo seachParams={seachParams} />
 
-        <DialogContent
-          className={`w-72 ${
-            reasonInput.length <= 10 ? 'h-[190px]' : 'h-[165px]'
-          } rounded-lg`}
-        >
-          <DialogHeader>
-            <DialogTitle className='-mb-2' />
-            <DialogDescription className='text-base text-[#1F2937]'>
-              이의 신청 이유를 입력해주세요.
-            </DialogDescription>
-          </DialogHeader>
-          <div>
-            <input
-              className='w-60 h-10 rounded-lg bg-[#F9FAFB] text-sm text-[#B7C4D5] pl-3'
-              value={reasonInput}
-              onChange={(e) => setReasonInput(e.target.value)}
-            />
-            {reasonInput.length <= 10 ? (
-              <span className='text-[8px] text-[#F87171] ml-2'>
-                이의 신청 이유는 10자 이상 작성해주세요.
-              </span>
-            ) : (
-              <></>
-            )}
-          </div>
-          <DialogFooter>
-            <div>
-              <hr className='absolute left-1/2 -translate-x-1/2 w-72 border-l border-[#E5E7EB]' />
-              <div className='flex justify-between mx-7 items-center'>
-                <DialogClose asChild>
-                  <span className='text-sm text-[#B7C4D5]'>cancel</span>
-                </DialogClose>
-                <hr className='h-[45px] border-l border-[#E5E7EB]' />
-                <button
-                  className='text-sm text-[#3B82F6] mr-3'
-                  onClick={handleReasonPost}
-                >
-                  OK
-                </button>
-              </div>
-            </div>
-          </DialogFooter>
-        </DialogContent>
+        <ConfirmationDetailObjectionInput
+          workoutConfirmationId={workoutConfirmationId}
+        />
       </Dialog>
     </div>
   );

From 15be87b46cfe78524d5856823d212a1ceaef8e58 Mon Sep 17 00:00:00 2001
From: seunghyeon77 <jdyjsh77@naver.com>
Date: Thu, 26 Dec 2024 11:29:47 +0900
Subject: [PATCH 08/12] =?UTF-8?q?refactor:=20=EC=83=81=EB=8B=A8=EC=97=90?=
 =?UTF-8?q?=20'use=20client'=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_components/ConfirmationDetailCompo.tsx                   | 2 ++
 .../_components/ConfirmationDetailObjectionInput.tsx          | 4 +++-
 .../_components/ConfirmationObjectionCompo.tsx                | 2 ++
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationDetailCompo.tsx b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationDetailCompo.tsx
index 54eaebf..5a3923e 100644
--- a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationDetailCompo.tsx
+++ b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationDetailCompo.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useQuery } from '@tanstack/react-query';
 
 import ConfirmationDetailImage from './ConfimationDetailImage';
diff --git a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationDetailObjectionInput.tsx b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationDetailObjectionInput.tsx
index 9567ebd..76c49c7 100644
--- a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationDetailObjectionInput.tsx
+++ b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationDetailObjectionInput.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { workoutObjectionReason } from '@/api/workspaceConfirmaion';
 import {
   DialogClose,
@@ -55,7 +57,7 @@ export default function ConfirmationDetailObjectionInput({
   return (
     <DialogContent
       className={`w-72 ${
-        reasonInput.length <= 9 ? 'h-[190px]' : 'h-[165px]'
+        reasonInput.length <= 10 ? 'h-[190px]' : 'h-[165px]'
       } rounded-lg`}
     >
       <DialogHeader>
diff --git a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationObjectionCompo.tsx b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationObjectionCompo.tsx
index 6440e2d..b60d9d4 100644
--- a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationObjectionCompo.tsx
+++ b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationObjectionCompo.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useState } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 

From 655ce66178fe389f7af1e4a20c2136feec55a5ea Mon Sep 17 00:00:00 2001
From: seunghyeon77 <jdyjsh77@naver.com>
Date: Thu, 26 Dec 2024 15:30:43 +0900
Subject: [PATCH 09/12] =?UTF-8?q?refactor:=20=EC=9D=B8=EC=A6=9D=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=20=EC=9D=B8=EC=A6=9D=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=97=90=EC=84=9C=20progressBar=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ConfirmationObjectionCompo.tsx            | 60 ++++++-------------
 .../ConfirmationObjectionProgressBars.tsx     | 48 +++++++++++++++
 .../workspaceConfirmaionDetail/page.tsx       |  2 +-
 3 files changed, 68 insertions(+), 42 deletions(-)
 rename src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/{ => confirmationObjection}/ConfirmationObjectionCompo.tsx (77%)
 create mode 100644 src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/confirmationObjection/ConfirmationObjectionProgressBars.tsx

diff --git a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationObjectionCompo.tsx b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/confirmationObjection/ConfirmationObjectionCompo.tsx
similarity index 77%
rename from src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationObjectionCompo.tsx
rename to src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/confirmationObjection/ConfirmationObjectionCompo.tsx
index b60d9d4..e87918e 100644
--- a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/ConfirmationObjectionCompo.tsx
+++ b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/confirmationObjection/ConfirmationObjectionCompo.tsx
@@ -8,13 +8,14 @@ import { ReadonlyURLSearchParams } from 'next/navigation';
 import { DialogTrigger } from '@/components/ui/dialog';
 
 import objectedWorkoutVoteIcon from '@/../public/svgs/workspace/workspaceConfirmaion/objectedWorkoutVoteIcon.svg';
-import ProgressBar from './ProgressBar';
-import RemaineTime from './RemaineTime';
+import RemaineTime from '../RemaineTime';
 import {
   workoutObjections,
   workoutObjectionsVote,
 } from '@/api/workspaceConfirmaion';
 import useWorkoutIdFromParams from '@/hooks/workoutHistory/useWorkoutIdFromParams';
+import ConfirmationObjectionProgressBars from './ConfirmationObjectionProgressBars';
+import { IWorkoutObjectionProps } from '@/types/workoutConfirmation';
 
 interface IConfirmationObjectionCompo {
   seachParams: ReadonlyURLSearchParams;
@@ -23,25 +24,23 @@ interface IConfirmationObjectionCompo {
 export default function ConfirmationObjectionCompo({
   seachParams,
 }: IConfirmationObjectionCompo) {
-  const [isObjectionVote, setIsObjection] = useState<boolean | null>(null);
   const workspaceId = useWorkoutIdFromParams();
+  const [isObjectionVote, setIsObjectionVote] = useState<boolean | null>(null);
   const objectionId = parseInt(seachParams.get('objectionId') || '0', 10);
 
   const isObjection = seachParams.get('isObjection') === 'false';
 
-  const { data: workoutObjection } = useQuery({
-    queryKey: ['workoutObjection', workspaceId, objectionId],
-    queryFn: () =>
-      workoutObjections({
-        workspaceId,
-        objectionId,
-      }),
-    enabled: !isObjection,
-  });
-
-  const handleVote = (isObjection: boolean) => {
-    setIsObjection((prev) => (prev === isObjection ? null : isObjection));
-  };
+  const { data: workoutObjection } = useQuery<{ data: IWorkoutObjectionProps }>(
+    {
+      queryKey: ['workoutObjection', workspaceId, objectionId],
+      queryFn: () =>
+        workoutObjections({
+          workspaceId,
+          objectionId,
+        }),
+      enabled: !isObjection,
+    }
+  );
 
   const queryClient = useQueryClient();
 
@@ -89,16 +88,6 @@ export default function ConfirmationObjectionCompo({
     }
   };
 
-  const appovalCount =
-    (workoutObjection?.data.approvalCount / workoutObjection?.data.headCount) *
-    100;
-  const rejectionCount =
-    (workoutObjection?.data.rejectionCount / workoutObjection?.data.headCount) *
-    100;
-  if (appovalCount > 100 || rejectionCount > 100) {
-    appovalCount === 100 || rejectionCount === 100;
-  }
-
   return (
     <div>
       {isObjection ? (
@@ -157,21 +146,10 @@ export default function ConfirmationObjectionCompo({
             </div>
           ) : (
             <div>
-              <ProgressBar
-                comment='찬성하기'
-                progressValue={appovalCount}
-                onClick={() => {
-                  if (!workoutObjection?.data.voteCompletion) handleVote(true);
-                }}
-                isObjectionVote={isObjectionVote === true}
-              />
-              <ProgressBar
-                comment='반대하기'
-                progressValue={rejectionCount}
-                onClick={() => {
-                  if (!workoutObjection?.data.voteCompletion) handleVote(false);
-                }}
-                isObjectionVote={isObjectionVote === false}
+              <ConfirmationObjectionProgressBars
+                isObjectionVote={isObjectionVote}
+                setIsObjectionVote={setIsObjectionVote}
+                workoutObjection={workoutObjection?.data}
               />
               <div
                 className={`h-11 ${
diff --git a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/confirmationObjection/ConfirmationObjectionProgressBars.tsx b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/confirmationObjection/ConfirmationObjectionProgressBars.tsx
new file mode 100644
index 0000000..e83252e
--- /dev/null
+++ b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/_components/confirmationObjection/ConfirmationObjectionProgressBars.tsx
@@ -0,0 +1,48 @@
+import { IWorkoutObjectionProps } from '@/types/workoutConfirmation';
+import ProgressBar from '../ProgressBar';
+import { Dispatch, SetStateAction } from 'react';
+
+interface IConfirmationObjectionProgressBarsProps {
+  isObjectionVote: boolean | null;
+  setIsObjectionVote: Dispatch<SetStateAction<boolean | null>>;
+  workoutObjection: IWorkoutObjectionProps;
+}
+
+export default function ConfirmationObjectionProgressBars({
+  isObjectionVote,
+  setIsObjectionVote,
+  workoutObjection,
+}: IConfirmationObjectionProgressBarsProps) {
+  const handleVote = (isObjection: boolean) => {
+    setIsObjectionVote((prev) => (prev === isObjection ? null : isObjection));
+  };
+
+  const appovalCount =
+    (workoutObjection?.approvalCount / workoutObjection?.headCount) * 100;
+  const rejectionCount =
+    (workoutObjection?.rejectionCount / workoutObjection?.headCount) * 100;
+
+  if (appovalCount > 100 || rejectionCount > 100) {
+    appovalCount === 100 || rejectionCount === 100;
+  }
+  return (
+    <div>
+      <ProgressBar
+        comment='찬성하기'
+        progressValue={appovalCount}
+        onClick={() => {
+          if (!workoutObjection?.voteCompletion) handleVote(true);
+        }}
+        isObjectionVote={isObjectionVote === true}
+      />
+      <ProgressBar
+        comment='반대하기'
+        progressValue={rejectionCount}
+        onClick={() => {
+          if (!workoutObjection?.voteCompletion) handleVote(false);
+        }}
+        isObjectionVote={isObjectionVote === false}
+      />
+    </div>
+  );
+}
diff --git a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/page.tsx b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/page.tsx
index 6f8166d..78f3197 100644
--- a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/page.tsx
+++ b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/workspaceConfirmaionDetail/page.tsx
@@ -5,7 +5,7 @@ import { Dialog } from '@/components/ui/dialog';
 import { useSearchParams } from 'next/navigation';
 
 import ScrollTop from '../_components/ScrollTop';
-import ConfirmationObjectionCompo from './_components/ConfirmationObjectionCompo';
+import ConfirmationObjectionCompo from './_components/confirmationObjection/ConfirmationObjectionCompo';
 import ConfirmationDetailCompo from './_components/ConfirmationDetailCompo';
 import ConfirmationDetailObjectionInput from './_components/ConfirmationDetailObjectionInput';
 

From 4ba649cbaa7745a1b9233734fbdf3108dc752d83 Mon Sep 17 00:00:00 2001
From: seunghyeon77 <jdyjsh77@naver.com>
Date: Thu, 26 Dec 2024 15:52:26 +0900
Subject: [PATCH 10/12] =?UTF-8?q?refactor:=20=EC=9D=B8=EC=A6=9D=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=93=B1=EB=A1=9D=20=EC=8B=9C?=
 =?UTF-8?q?=EA=B0=84=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_components/ConfirmationCompo.tsx         | 13 ++++--------
 .../_components/ConfirmationCompoTime.tsx     | 21 +++++++++++++++++++
 2 files changed, 25 insertions(+), 9 deletions(-)
 create mode 100644 src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/_components/ConfirmationCompoTime.tsx

diff --git a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/_components/ConfirmationCompo.tsx b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/_components/ConfirmationCompo.tsx
index 32e6be0..cf85c96 100644
--- a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/_components/ConfirmationCompo.tsx
+++ b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/_components/ConfirmationCompo.tsx
@@ -2,6 +2,7 @@ import { IWorkoutConfirmationPageProps } from '@/types/workoutConfirmation';
 import ConfirmationProfile from './ConfirmationProfile';
 import ConfirmationCompoObjection from './ConfirmationCompoObjection';
 import ConfirmationCompoConfirm from './ConfirmationCompoConfirm';
+import ConfirmationCompoTime from './ConfirmationCompoTime';
 
 interface IConfirmationCompoProps {
   workoutConfirmationPage: IWorkoutConfirmationPageProps;
@@ -30,15 +31,9 @@ export default function ConfirmationCompo({
             workspaceId={workspaceId}
           />
         )}
-        <div
-          className={`${
-            workoutConfirmationPage.isMine ? 'mr-2' : 'ml-2'
-          } flex items-end `}
-        >
-          <span className='text-[10px] text-[#9CA3AF]'>
-            {workoutConfirmationPage.createdAt.substring(11, 16)}
-          </span>
-        </div>
+        <ConfirmationCompoTime
+          workoutConfirmationPage={workoutConfirmationPage}
+        />
       </div>
     </div>
   );
diff --git a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/_components/ConfirmationCompoTime.tsx b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/_components/ConfirmationCompoTime.tsx
new file mode 100644
index 0000000..10a30c1
--- /dev/null
+++ b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/_components/ConfirmationCompoTime.tsx
@@ -0,0 +1,21 @@
+import { IWorkoutConfirmationPageProps } from '@/types/workoutConfirmation';
+
+interface IConfirmationPageProps {
+  workoutConfirmationPage: IWorkoutConfirmationPageProps;
+}
+
+export default function ConfirmationCompoTime({
+  workoutConfirmationPage,
+}: IConfirmationPageProps) {
+  return (
+    <div
+      className={`${
+        workoutConfirmationPage.isMine ? 'mr-2' : 'ml-2'
+      } flex items-end `}
+    >
+      <span className='text-[10px] text-[#9CA3AF]'>
+        {workoutConfirmationPage.createdAt.substring(11, 16)}
+      </span>
+    </div>
+  );
+}

From 3571b5e610b488712cefd8cf1a687db63173f504 Mon Sep 17 00:00:00 2001
From: seunghyeon77 <jdyjsh77@naver.com>
Date: Fri, 27 Dec 2024 13:19:58 +0900
Subject: [PATCH 11/12] =?UTF-8?q?feat:=20=EC=9A=B4=EB=8F=99=20=ED=9E=88?=
 =?UTF-8?q?=EC=8A=A4=ED=86=A0=EB=A6=AC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EC=9D=B4=EB=8F=99=20=EC=8B=9C=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?=
 =?UTF-8?q?=EC=83=81=EB=8B=A8=20=EA=B3=A0=EC=A0=95=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../workspace/[workspaceId]/workspaceHistory/page.tsx           | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceHistory/page.tsx b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceHistory/page.tsx
index 462b136..195529c 100644
--- a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceHistory/page.tsx
+++ b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceHistory/page.tsx
@@ -16,6 +16,7 @@ import useWorkoutIdFromParams from '@/hooks/workoutHistory/useWorkoutIdFromParam
 
 import type { THistorys, TQueryTypes } from '@/types/workspaceHistory';
 import NoDataUI from '../../_components/NoDataUI';
+import ScrollTop from '../workspaceConfirmation/_components/ScrollTop';
 
 function useUserInfo(): TQueryTypes {
   const searchParams = useSearchParams();
@@ -57,6 +58,7 @@ function Page() {
 
   return (
     <div className='h-screen'>
+      <ScrollTop />
       <WorkspaceGimmiTitle queryData={queryData} />
 
       <WorkspaceScoreBoard

From 0184d569eb70ab045581fcb826ae1f48bd9c2bc1 Mon Sep 17 00:00:00 2001
From: seunghyeon77 <jdyjsh77@naver.com>
Date: Sun, 29 Dec 2024 00:19:31 +0900
Subject: [PATCH 12/12] =?UTF-8?q?refactor:=20=EC=9D=B8=EC=A6=9D=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?=
 =?UTF-8?q?=ED=95=98=EB=8B=A8=20=EA=B3=A0=EC=A0=95=20=EB=B0=8F=20=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EB=A7=A4=ED=95=91=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../workspaceConfirmation/page.tsx            | 39 ++++++++++++-------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/page.tsx b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/page.tsx
index 5dfcb5b..cab5f6a 100644
--- a/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/page.tsx
+++ b/src/app/(afterLogin)/workspace/[workspaceId]/workspaceConfirmation/page.tsx
@@ -10,12 +10,17 @@ import ObjectionBell from './_components/ObjectionBell';
 import IsSameDateAsPrevious from './_components/IsSameDataAsPrevious';
 import ConfirmationCompo from './_components/ConfirmationCompo';
 import useInfiniteQuerys from '@/hooks/workoutConfirmation/ useInfiniteQuerys';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import NoDataUI from '../../_components/NoDataUI';
 
 export default function Page() {
   const workspaceId = useWorkoutIdFromParams();
-  const [ref, inView] = useInView({ threshold: 0, delay: 0 });
+  const [initialObserve, setInitialObserve] = useState(false);
+
+  const [ref, inView] = useInView({
+    threshold: 0.1,
+    delay: 500,
+  });
 
   const scrollBottomRef = useRef<HTMLDivElement | null>(null);
   const isInitialRender = useRef<boolean>(true);
@@ -24,12 +29,14 @@ export default function Page() {
     queryKey: ['workoutConfirmations', workspaceId],
     dataReqFn: workoutConfirmations,
     params: { workspaceId },
-    inView,
+    inView: inView && initialObserve,
   });
 
-  const workoutConfirmationPages = workoutConfirmation?.pages.flatMap(
-    (pages) => pages.data.data
-  );
+  const workoutConfirmationPages = workoutConfirmation?.pages
+    .slice()
+    .reverse()
+    .flatMap((pages) => pages.data.data);
+
   const workoutConfirmationVoteInCompletionCount =
     workoutConfirmation?.pages.flatMap(
       (pages) => pages.data.voteIncompletionCount
@@ -40,15 +47,20 @@ export default function Page() {
       isInitialRender.current &&
       workoutConfirmationPages &&
       workoutConfirmationPages.length
-    ) {
-      scrollBottomRef.current?.scrollIntoView({ behavior: 'auto' });
-      isInitialRender.current = false;
-    }
+    )
+      setTimeout(() => {
+        scrollBottomRef.current?.scrollIntoView({
+          behavior: 'auto',
+        });
+        isInitialRender.current = false;
+        setTimeout(() => {
+          setInitialObserve(true);
+        }, 100);
+      }, 100);
   }, [workoutConfirmationPages]);
 
   return (
-    <div className='h-screen'>
-      <div ref={ref} />
+    <div className='h-full'>
       <div className='-mx-4 px-4 bg-[#F1F7FF] -mt-3 pb-3'>
         {workoutConfirmationPages?.length === 0 ? (
           <div>
@@ -56,6 +68,7 @@ export default function Page() {
           </div>
         ) : (
           <div>
+            <div ref={ref} />
             {workoutConfirmationPages?.map(
               (
                 workoutConfirmationPage: IWorkoutConfirmationPageProps,
@@ -80,6 +93,7 @@ export default function Page() {
                 );
               }
             )}
+            <div ref={scrollBottomRef} />
           </div>
         )}
         <ObjectionBell
@@ -89,7 +103,6 @@ export default function Page() {
           }
         />
       </div>
-      <div ref={scrollBottomRef} />
     </div>
   );
 }