From 71a515f1629f7693c114173999ddee9e3e531eb6 Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Mon, 4 Nov 2024 10:46:38 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=B8=94=EB=9F=AC=EC=B2=98=EB=A6=AC=20?=
 =?UTF-8?q?=EC=9C=84=EC=97=90=20overlay=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../feedbackCard/FeedbackCard.style.ts        | 24 ++++++++++++-----
 .../feedback/feedbackCard/FeedbackCard.tsx    | 27 ++++++++++---------
 .../roomDetailPage/myReviewee/MyReviewee.tsx  |  2 +-
 .../roomDetailPage/myReviewer/MyReviewer.tsx  |  2 +-
 frontend/src/router.tsx                       |  4 +--
 5 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/feedback/feedbackCard/FeedbackCard.style.ts b/frontend/src/components/feedback/feedbackCard/FeedbackCard.style.ts
index 8363c2cdb..a6c2251ad 100644
--- a/frontend/src/components/feedback/feedbackCard/FeedbackCard.style.ts
+++ b/frontend/src/components/feedback/feedbackCard/FeedbackCard.style.ts
@@ -29,13 +29,25 @@ export const FeedbackCardContainer = styled.div<{ $isTypeDevelop: boolean }>`
   `}
 `;
 
-export const ButtonWrapper = styled.div`
+export const Overlay = styled.div`
+  pointer-events: auto;
+
   position: absolute;
-  z-index: 1;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  z-index: 10;
+  top: 60px;
+  left: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
+  width: 100%;
+  height: calc(100% - 60px);
+
+  background-color: rgb(255 255 255 / 50%);
+`;
+
+export const ButtonWrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -47,7 +59,7 @@ export const ButtonWrapper = styled.div`
   font: ${({ theme }) => theme.TEXT.large_bold};
 `;
 
-export const BlurContainer = styled.div<{ $isWrited: boolean }>`
+export const FeedbackContent = styled.div<{ $isWrited: boolean }>`
   display: flex;
   flex-direction: column;
   gap: 3rem;
diff --git a/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx b/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx
index c2a3f9e08..b3f6e9127 100644
--- a/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx
+++ b/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx
@@ -39,7 +39,7 @@ const FeedbackCard = ({
   // 피드백 페이지 이동 함수
   const handleNavigateFeedbackPage = (reviewer: ReviewerInfo) => {
     navigate(
-      `/feedback/${feedbackType === "develop" ? "reviewer" : "reviewee"}/${feedbackCardData.roomId}?username=${feedbackCardData.username}`,
+      `/rooms/${feedbackCardData.roomId}/feedback/${feedbackType === "develop" ? "reviewer" : "reviewee"}?username=${feedbackCardData.username}`,
       {
         state: { reviewer },
       },
@@ -52,16 +52,19 @@ const FeedbackCard = ({
 
       <S.FeedbackCardContainer $isTypeDevelop={feedbackType === "develop"}>
         {!feedbackCardData.isWrited && (
-          <S.ButtonWrapper>
-            <p>상대방 피드백을 작성해야 볼 수 있습니다.</p>
-            <Button
-              variant={feedbackType ? "primary" : "secondary"}
-              onClick={() => handleNavigateFeedbackPage(reviewer)}
-            >
-              피드백 작성하러가기
-            </Button>
-          </S.ButtonWrapper>
+          <S.Overlay>
+            <S.ButtonWrapper>
+              <p>상대방 피드백을 작성해야 볼 수 있습니다.</p>
+              <Button
+                variant={feedbackType ? "primary" : "secondary"}
+                onClick={() => handleNavigateFeedbackPage(reviewer)}
+              >
+                피드백 작성하러가기
+              </Button>
+            </S.ButtonWrapper>
+          </S.Overlay>
         )}
+
         <S.FeedbackHeader>
           <HoverStyledLink to={`/profile/${feedbackCardData.username}`} tabIndex={-1}>
             <S.FeedbackProfile>
@@ -84,7 +87,7 @@ const FeedbackCard = ({
           </S.FeedbackType>
         </S.FeedbackHeader>
 
-        <S.BlurContainer $isWrited={feedbackCardData.isWrited}>
+        <S.FeedbackContent $isWrited={feedbackCardData.isWrited}>
           <S.FeedbackScoreContainer>
             <S.FeedbackTitle>피드백 점수</S.FeedbackTitle>
             <EvaluationPointBar
@@ -114,7 +117,7 @@ const FeedbackCard = ({
               readOnly
             />
           </S.FeedbackDetailContainer>
-        </S.BlurContainer>
+        </S.FeedbackContent>
       </S.FeedbackCardContainer>
     </>
   );
diff --git a/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx b/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx
index bd84ee327..850b16ec4 100644
--- a/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx
+++ b/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx
@@ -24,7 +24,7 @@ const MyReviewee = ({ roomInfo }: MyRevieweeProps) => {
 
   // 피드백 페이지 이동 함수
   const handleNavigateFeedbackPage = (reviewee: ReviewerInfo) => {
-    navigate(`/feedback/reviewee/${roomInfo.id}?username=${reviewee.username}`, {
+    navigate(`/rooms/${roomInfo.id}/feedback/reviewer?username=${reviewee.username}`, {
       state: { reviewee },
     });
   };
diff --git a/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx b/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
index 35863e94d..93e892f45 100644
--- a/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
+++ b/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
@@ -20,7 +20,7 @@ const MyReviewer = ({ roomInfo }: MyReviewerProps) => {
 
   // 피드백 페이지 이동 함수
   const handleNavigateFeedbackPage = (reviewer: ReviewerInfo) => {
-    navigate(`/feedback/reviewer/${roomInfo.id}?username=${reviewer.username}`, {
+    navigate(`/rooms/${roomInfo.id}/feedback/reviewer?username=${reviewer.username}`, {
       state: { reviewer },
     });
   };
diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
index edeb7f1a4..f0734c152 100644
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -67,11 +67,11 @@ const router = sentryCreateBrowserRouter([
             element: <FeedbackPage />,
           },
           {
-            path: `feedback/reviewer/:roomId`,
+            path: `/rooms/:roomId/feedback/reviewer`,
             element: <ReviewerFeedbackPage />,
           },
           {
-            path: `feedback/reviewee/:roomId`,
+            path: `/rooms/:roomId/feedback/reviewee`,
             element: <RevieweeFeedbackPage />,
           },
           {