feat: 블러처리 위에 overlay 추가

woowacourse-teams · Nov 4, 2024 · 71a515f · 71a515f
1 parent 0934ae2
commit 71a515f
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 />,
           },
           {