From a4d840a3f0609e1a862b47dfed29c7ef1d3e2e06 Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Fri, 1 Nov 2024 16:11:36 +0900
Subject: [PATCH 01/28] =?UTF-8?q?feat:=20feedback=20=ED=83=80=EC=9E=85?=
 =?UTF-8?q?=EC=97=90=20isWrited=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/@types/feedback.ts                   |  1 +
 .../feedbackCard/FeedbackCard.stories.tsx         |  4 ++--
 .../feedbackCardList/FeedbackCardList.stories.tsx |  2 ++
 .../mocks/mockResponse/deliveredFeedbackInfo.json | 15 ++++++++++-----
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/frontend/src/@types/feedback.ts b/frontend/src/@types/feedback.ts
index 0ebeafed2..1f1cf70d6 100644
--- a/frontend/src/@types/feedback.ts
+++ b/frontend/src/@types/feedback.ts
@@ -17,6 +17,7 @@ export interface FeedbackCardData {
   readonly feedbackKeywords: NonEmptyArray<string>;
   readonly feedbackText: string;
   readonly evaluationPoint: 1 | 2 | 3 | 4 | 5;
+  readonly isWrited: boolean;
 }
 
 export interface RevieweeFeedbackData {
diff --git a/frontend/src/components/feedback/feedbackCard/FeedbackCard.stories.tsx b/frontend/src/components/feedback/feedbackCard/FeedbackCard.stories.tsx
index 711b6c002..eb9264d46 100644
--- a/frontend/src/components/feedback/feedbackCard/FeedbackCard.stories.tsx
+++ b/frontend/src/components/feedback/feedbackCard/FeedbackCard.stories.tsx
@@ -37,8 +37,8 @@ export const 기술적_피드백: Story = {
       feedbackKeywords: ["작업 속도", "PR 본문 메시지", "코드 관심사 분리"],
       feedbackText: `작업 속도가 정말 빠르면서 평소 책을 많이 읽어서 그런지 PR 본문 메시지가 정말 알이 꽉꽉 찼어요.
       
-      그리고 코드 관심사 분리라는 단어를 알고 있어서 대화하기 편했어요 ㅎㅎ.
-  `,
+      그리고 코드 관심사 분리라는 단어를 알고 있어서 대화하기 편했어요 ㅎㅎ.`,
+      isWrited: true,
       evaluationPoint: 1,
     },
     feedbackType: "develop",
diff --git a/frontend/src/components/feedback/feedbackCardList/FeedbackCardList.stories.tsx b/frontend/src/components/feedback/feedbackCardList/FeedbackCardList.stories.tsx
index 7512ea442..837a1fc48 100644
--- a/frontend/src/components/feedback/feedbackCardList/FeedbackCardList.stories.tsx
+++ b/frontend/src/components/feedback/feedbackCardList/FeedbackCardList.stories.tsx
@@ -29,12 +29,14 @@ const developFeedbackData = deliveredFeedbackInfo.feedbacks[0].developFeedback.m
   ...feedback,
   feedbackKeywords: feedback.feedbackKeywords as unknown as NonEmptyArray<string>,
   evaluationPoint: feedback.evaluationPoint as 1 | 2 | 3 | 4 | 5,
+  isWrited: feedback.isWrited as boolean,
 })) satisfies FeedbackCardData[];
 
 const socialFeedbackData = deliveredFeedbackInfo.feedbacks[0].socialFeedback.map((feedback) => ({
   ...feedback,
   feedbackKeywords: feedback.feedbackKeywords as unknown as NonEmptyArray<string>,
   evaluationPoint: feedback.evaluationPoint as 1 | 2 | 3 | 4 | 5,
+  isWrited: feedback.isWrited as boolean,
 })) satisfies FeedbackCardData[];
 
 export const Default: Story = {
diff --git a/frontend/src/mocks/mockResponse/deliveredFeedbackInfo.json b/frontend/src/mocks/mockResponse/deliveredFeedbackInfo.json
index e3bcbea48..48b987978 100644
--- a/frontend/src/mocks/mockResponse/deliveredFeedbackInfo.json
+++ b/frontend/src/mocks/mockResponse/deliveredFeedbackInfo.json
@@ -13,7 +13,8 @@
           "username": "a",
           "feedbackKeywords": ["string"],
           "evaluationPoint": 4,
-          "feedbackText": "string"
+          "feedbackText": "string",
+          "isWrited": true
         },
         {
           "feedbackId": 0,
@@ -23,7 +24,8 @@
           "username": "q",
           "feedbackKeywords": ["string"],
           "evaluationPoint": 4,
-          "feedbackText": "string"
+          "feedbackText": "string",
+          "isWrited": true
         },
         {
           "feedbackId": 0,
@@ -33,7 +35,8 @@
           "username": "m",
           "feedbackKeywords": ["string"],
           "evaluationPoint": 4,
-          "feedbackText": "string"
+          "feedbackText": "string",
+          "isWrited": true
         },
         {
           "feedbackId": 0,
@@ -43,7 +46,8 @@
           "username": "b",
           "feedbackKeywords": ["string"],
           "evaluationPoint": 4,
-          "feedbackText": "string"
+          "feedbackText": "string",
+          "isWrited": true
         }
       ],
       "socialFeedback": [
@@ -55,7 +59,8 @@
           "username": "q",
           "feedbackKeywords": ["string"],
           "evaluationPoint": 4,
-          "feedbackText": "string"
+          "feedbackText": "string",
+          "isWrited": true
         }
       ]
     }

From 2ee37c92d321527bf76ce28616e80414b8182af1 Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Fri, 1 Nov 2024 16:11:53 +0900
Subject: [PATCH 02/28] =?UTF-8?q?refactor:=20hostname=20=ED=95=A8=EC=88=98?=
 =?UTF-8?q?=20=EB=B0=96=EC=9C=BC=EB=A1=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/utils/hostType.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/utils/hostType.ts b/frontend/src/utils/hostType.ts
index f9d10fb41..20764705a 100644
--- a/frontend/src/utils/hostType.ts
+++ b/frontend/src/utils/hostType.ts
@@ -1,6 +1,6 @@
-const getHostType = () => {
-  const hostname = window.location.hostname;
+const hostname = window.location.hostname;
 
+const getHostType = () => {
   if (process.env.NODE_ENV === "development") return "develop";
 
   if (hostname.includes("dev")) return "release";

From 5de19574c910aed4fbd78c581e18f1dbf4978732 Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Fri, 1 Nov 2024 17:11:52 +0900
Subject: [PATCH 03/28] =?UTF-8?q?feat:=20=ED=94=BC=EB=93=9C=EB=B0=B1=20?=
 =?UTF-8?q?=EC=95=88=20=EC=8D=BC=EC=9D=84=20=EB=95=8C=20=EB=B8=94=EB=9F=AC?=
 =?UTF-8?q?=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../feedbackCard/FeedbackCard.style.ts        | 27 +++++++
 .../feedback/feedbackCard/FeedbackCard.tsx    | 71 ++++++++++++-------
 2 files changed, 71 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/feedback/feedbackCard/FeedbackCard.style.ts b/frontend/src/components/feedback/feedbackCard/FeedbackCard.style.ts
index 54fb309cc..8363c2cdb 100644
--- a/frontend/src/components/feedback/feedbackCard/FeedbackCard.style.ts
+++ b/frontend/src/components/feedback/feedbackCard/FeedbackCard.style.ts
@@ -3,6 +3,8 @@ import { EllipsisText, VisuallyHidden } from "@/styles/common";
 import media from "@/styles/media";
 
 export const FeedbackCardContainer = styled.div<{ $isTypeDevelop: boolean }>`
+  position: relative;
+
   overflow-y: hidden;
   display: flex;
   flex-direction: column;
@@ -27,6 +29,31 @@ export const FeedbackCardContainer = styled.div<{ $isTypeDevelop: boolean }>`
   `}
 `;
 
+export const ButtonWrapper = styled.div`
+  position: absolute;
+  z-index: 1;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+
+  font: ${({ theme }) => theme.TEXT.large_bold};
+`;
+
+export const BlurContainer = styled.div<{ $isWrited: boolean }>`
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+  filter: ${(props) => (props.$isWrited ? "none" : "blur(7px)")};
+`;
+
 export const FeedbackScoreContainer = styled.div`
   display: flex;
   flex-direction: column;
diff --git a/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx b/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx
index 1e89058f4..f70c7ecc6 100644
--- a/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx
+++ b/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx
@@ -1,4 +1,6 @@
+import { useNavigate } from "react-router-dom";
 import { FeedbackType } from "@/hooks/feedback/useSelectedFeedbackData";
+import Button from "@/components/common/button/Button";
 import Profile from "@/components/common/profile/Profile";
 import { Textarea } from "@/components/common/textarea/Textarea";
 import EvaluationPointBar from "@/components/feedback/evaluationPointBar/EvaluationPointBar";
@@ -18,6 +20,7 @@ const FeedbackCard = ({
   feedbackCardData,
   feedbackType,
 }: FeedbackCardProps) => {
+  const navigate = useNavigate();
   const getFeedbackTarget = (feedbackType: "develop" | "social") => {
     if (selectedFeedbackType === "받은 피드백") {
       return feedbackType === "develop" ? "FROM. 나의 리뷰어" : "FROM. 나의 리뷰이";
@@ -28,7 +31,19 @@ const FeedbackCard = ({
   return (
     <>
       <S.ScreenReader>미션의 상세 피드백 내용입니다.</S.ScreenReader>
+
       <S.FeedbackCardContainer $isTypeDevelop={feedbackType === "develop"}>
+        {!feedbackCardData.isWrited && (
+          <S.ButtonWrapper>
+            <p>상대방 피드백을 작성해야 볼 수 있습니다.</p>
+            <Button
+              variant={feedbackType ? "primary" : "secondary"}
+              onClick={() => navigate(`/rooms/${feedbackCardData.roomId}`)}
+            >
+              피드백 작성하러가기
+            </Button>
+          </S.ButtonWrapper>
+        )}
         <S.FeedbackHeader>
           <HoverStyledLink to={`/profile/${feedbackCardData.username}`} tabIndex={-1}>
             <S.FeedbackProfile>
@@ -51,35 +66,37 @@ const FeedbackCard = ({
           </S.FeedbackType>
         </S.FeedbackHeader>
 
-        <S.FeedbackScoreContainer>
-          <S.FeedbackTitle>피드백 점수</S.FeedbackTitle>
-          <EvaluationPointBar
-            initialOptionId={feedbackCardData.evaluationPoint}
-            readonly={true}
-            color={feedbackType === "social" ? theme.COLOR.secondary : undefined}
-            isTabFocusable={false}
-          />
-        </S.FeedbackScoreContainer>
+        <S.BlurContainer $isWrited={feedbackCardData.isWrited}>
+          <S.FeedbackScoreContainer>
+            <S.FeedbackTitle>피드백 점수</S.FeedbackTitle>
+            <EvaluationPointBar
+              initialOptionId={feedbackCardData.evaluationPoint}
+              readonly={true}
+              color={feedbackType === "social" ? theme.COLOR.secondary : undefined}
+              isTabFocusable={false}
+            />
+          </S.FeedbackScoreContainer>
 
-        <S.FeedbackKeywordContainer>
-          <S.FeedbackTitle>피드백 키워드</S.FeedbackTitle>
-          <S.FeedbackKeywordWrapper>
-            {feedbackCardData.feedbackKeywords.map((keyword) => (
-              <S.FeedbackKeyword key={keyword}>{keyword}</S.FeedbackKeyword>
-            ))}
-          </S.FeedbackKeywordWrapper>
-        </S.FeedbackKeywordContainer>
+          <S.FeedbackKeywordContainer>
+            <S.FeedbackTitle>피드백 키워드</S.FeedbackTitle>
+            <S.FeedbackKeywordWrapper>
+              {feedbackCardData.feedbackKeywords.map((keyword) => (
+                <S.FeedbackKeyword key={keyword}>{keyword}</S.FeedbackKeyword>
+              ))}
+            </S.FeedbackKeywordWrapper>
+          </S.FeedbackKeywordContainer>
 
-        <S.FeedbackDetailContainer>
-          <S.FeedbackTitle>세부 피드백</S.FeedbackTitle>
-          <Textarea
-            rows={10}
-            maxLength={2000}
-            showCharCount={true}
-            value={feedbackCardData.feedbackText.length ? feedbackCardData.feedbackText : "없음"}
-            readOnly
-          />
-        </S.FeedbackDetailContainer>
+          <S.FeedbackDetailContainer>
+            <S.FeedbackTitle>세부 피드백</S.FeedbackTitle>
+            <Textarea
+              rows={10}
+              maxLength={2000}
+              showCharCount={true}
+              value={feedbackCardData.feedbackText.length ? feedbackCardData.feedbackText : "없음"}
+              readOnly
+            />
+          </S.FeedbackDetailContainer>
+        </S.BlurContainer>
       </S.FeedbackCardContainer>
     </>
   );

From 927f3e41bba46f32d0b7b50103ea2c37bf222d56 Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Sat, 2 Nov 2024 21:26:36 +0900
Subject: [PATCH 04/28] =?UTF-8?q?refactor:=20feedbackModalType=EC=9D=84=20?=
 =?UTF-8?q?feedbackType=EC=9C=BC=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

---
 frontend/src/utils/feedbackUtils.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/utils/feedbackUtils.ts b/frontend/src/utils/feedbackUtils.ts
index 4d18a8167..12181a4f9 100644
--- a/frontend/src/utils/feedbackUtils.ts
+++ b/frontend/src/utils/feedbackUtils.ts
@@ -1,5 +1,5 @@
 // 피드백 작성/수정/확인 타입 구분
-export type FeedbackModalType = "create" | "edit" | "view";
+export type FeedbackType = "create" | "edit" | "view";
 
 interface FeedbackTypeProps {
   isReviewed: boolean;
@@ -8,7 +8,7 @@ interface FeedbackTypeProps {
 }
 
 export interface FeedbackTypeResult {
-  modalType: FeedbackModalType;
+  modalType: FeedbackType;
   buttonText: string;
 }
 

From ce1ab19b4fb2abdf62ad33b1bb555c0c560a6671 Mon Sep 17 00:00:00 2001
From: 00kang <kdb070970@gmail.com>
Date: Sun, 3 Nov 2024 17:23:08 +0900
Subject: [PATCH 05/28] =?UTF-8?q?fix:=20=EB=A7=88=EC=9D=B4=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20=EB=8B=89=EB=84=A4?=
 =?UTF-8?q?=EC=9E=84=EC=9D=B4=20=EA=B8=B8=EC=96=B4=EB=8F=84=20=EA=B9=83?=
 =?UTF-8?q?=ED=97=88=EB=B8=8C=20=EC=95=84=EC=9D=B4=EC=BD=98=EC=9D=80=20?=
 =?UTF-8?q?=EC=95=88=20=EC=9E=98=EB=A6=AC=EB=8F=84=EB=A1=9D=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../profile/profileCard/ProfileCard.style.ts          | 11 ++++++++---
 .../components/profile/profileCard/ProfileCard.tsx    |  6 ++++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/profile/profileCard/ProfileCard.style.ts b/frontend/src/components/profile/profileCard/ProfileCard.style.ts
index a6d23127f..6acc0ec03 100644
--- a/frontend/src/components/profile/profileCard/ProfileCard.style.ts
+++ b/frontend/src/components/profile/profileCard/ProfileCard.style.ts
@@ -33,14 +33,19 @@ export const ProfileNickname = styled.div`
   display: flex;
   gap: 0.5rem;
   align-items: center;
+  justify-content: center;
 
   max-width: 108px;
+`;
 
-  font: ${({ theme }) => theme.TEXT.medium_bold};
-  color: ${({ theme }) => theme.COLOR.grey3};
-  text-align: center;
+export const GithubIcon = styled.div`
+  flex-shrink: 0;
+`;
 
+export const NicknameText = styled.span`
   ${EllipsisText}
+  font: ${({ theme }) => theme.TEXT.medium_bold};
+  color: ${({ theme }) => theme.COLOR.grey3};
 `;
 
 export const ProfileInfoWrapper = styled.div`
diff --git a/frontend/src/components/profile/profileCard/ProfileCard.tsx b/frontend/src/components/profile/profileCard/ProfileCard.tsx
index ce9b70969..1a40cb2b7 100644
--- a/frontend/src/components/profile/profileCard/ProfileCard.tsx
+++ b/frontend/src/components/profile/profileCard/ProfileCard.tsx
@@ -18,8 +18,10 @@ const ProfileCard = (profileData: ProfileData) => {
           <S.ProfileWrapper>
             <Profile imgSrc={profileData.profileImage} size={110} />
             <S.ProfileNickname>
-              <Icon kind="githubLogo" size="2.5rem" />
-              {profileData.nickname}
+              <S.GithubIcon>
+                <Icon kind="githubLogo" size="2.5rem" />
+              </S.GithubIcon>
+              <S.NicknameText>{profileData.nickname}</S.NicknameText>
             </S.ProfileNickname>
           </S.ProfileWrapper>
         </HoverStyledLink>

From 7f35197ece140243860e6f77a3890a7750ea62f6 Mon Sep 17 00:00:00 2001
From: 00kang <kdb070970@gmail.com>
Date: Sun, 3 Nov 2024 17:23:52 +0900
Subject: [PATCH 06/28] =?UTF-8?q?fix:=20=EB=AA=A8=EB=8B=AC=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=20=EB=B6=88=ED=95=84?=
 =?UTF-8?q?=EC=9A=94=ED=95=9C=20=EA=B3=B5=EB=B0=B1=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/common/modal/Modal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/common/modal/Modal.tsx b/frontend/src/components/common/modal/Modal.tsx
index 6fc3c8a2c..93887e9d1 100644
--- a/frontend/src/components/common/modal/Modal.tsx
+++ b/frontend/src/components/common/modal/Modal.tsx
@@ -52,7 +52,7 @@ const Modal = ({ isOpen, onClose, hasCloseButton = true, style, children }: Moda
 
       element.removeAttribute("aria-hidden");
     });
-    
+
     return () => {
       previousFocusedElement.current?.focus();
       document.getElementById("root")?.setAttribute("aria-hidden", "false");

From cbb8cc630028fbea76dcc4abc13404058535d9d8 Mon Sep 17 00:00:00 2001
From: 00kang <kdb070970@gmail.com>
Date: Sun, 3 Nov 2024 17:25:55 +0900
Subject: [PATCH 07/28] =?UTF-8?q?feat:=20=EB=A7=88=EC=9D=B4=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20=ED=8F=89=EA=B7=A0=20?=
 =?UTF-8?q?=ED=8F=89=EC=A0=90=EC=9D=80=20=EC=86=8C=EC=88=98=EC=A0=90=20?=
 =?UTF-8?q?=EC=B2=AB=EC=A7=B8=20=EC=9E=90=EB=A6=AC=EA=B9=8C=EC=A7=80?=
 =?UTF-8?q?=EB=A7=8C=20=EB=82=98=ED=83=80=EB=82=B4=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/profile/profileCard/ProfileCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/profile/profileCard/ProfileCard.tsx b/frontend/src/components/profile/profileCard/ProfileCard.tsx
index 1a40cb2b7..372d4638d 100644
--- a/frontend/src/components/profile/profileCard/ProfileCard.tsx
+++ b/frontend/src/components/profile/profileCard/ProfileCard.tsx
@@ -43,7 +43,7 @@ const ProfileCard = (profileData: ProfileData) => {
             <dl>
               <dt>평균 평점</dt>
               <dd>
-                <Icon kind="star" size="1rem" /> {profileData.averageRating}
+                <Icon kind="star" size="1rem" /> {profileData.averageRating.toFixed(1)}
               </dd>
             </dl>
           </S.ProfileSummaryContainer>

From 2c74633c282e906c8a581df5652631962aa581d2 Mon Sep 17 00:00:00 2001
From: 00kang <kdb070970@gmail.com>
Date: Sun, 3 Nov 2024 17:32:16 +0900
Subject: [PATCH 08/28] =?UTF-8?q?feat:=20confirmModal=20=EB=82=B4=EB=B6=80?=
 =?UTF-8?q?=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=A4=84=EB=B0=94=EA=BF=88=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/modal/confirmModal/ConfirmModal.style.ts       | 3 +++
 frontend/src/constants/message.ts                         | 8 ++++----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/common/modal/confirmModal/ConfirmModal.style.ts b/frontend/src/components/common/modal/confirmModal/ConfirmModal.style.ts
index 9b61ce070..22aee284c 100644
--- a/frontend/src/components/common/modal/confirmModal/ConfirmModal.style.ts
+++ b/frontend/src/components/common/modal/confirmModal/ConfirmModal.style.ts
@@ -8,6 +8,9 @@ export const ConfirmModalContainer = styled.div`
   padding: 3rem;
 
   font: ${({ theme }) => theme.TEXT.medium_bold};
+  line-height: normal;
+  text-align: center;
+  white-space: pre-line;
 `;
 
 export const ButtonWrapper = styled.div`
diff --git a/frontend/src/constants/message.ts b/frontend/src/constants/message.ts
index 4f9c91b62..7dd053714 100644
--- a/frontend/src/constants/message.ts
+++ b/frontend/src/constants/message.ts
@@ -4,10 +4,10 @@ const GUIDANCE_MESSAGES = {
   FAIL_MATCHED: "매칭에 실패한 방입니다.",
   REVIEWEE_FAIL_MATCHED: "리뷰이가 매칭되지 않았습니다.",
   SUB_DESCRIPTION: "조금만 기다려주세요🤗",
-  DELETE_ROOM: "정말 방을 삭제하시겠습니까? 모집 마감 후엔 방을 삭제할 수 없습니다.",
-  EXIT_ROOM: "정말 방을 나가시겠습니까? 모집 마감 전까진 언제든지 다시 참여할 수 있습니다.",
-  CREATE_ROOM: "방을 생성합니다. 모집 마감 전까지 방 정보를 수정할 수 있습니다.",
-  EDIT_ROOM: "방 정보를 수정합니다. 모집 마감 전까지 방 정보를 수정할 수 있습니다.",
+  DELETE_ROOM: "정말 방을 삭제하시겠습니까?\n모집 마감 후엔 방을 삭제할 수 없습니다.",
+  EXIT_ROOM: "정말 방을 나가시겠습니까?\n모집 마감 전까진 언제든지 다시 참여할 수 있습니다.",
+  CREATE_ROOM: "방을 생성합니다.\n모집 마감 전까지 방 정보를 수정할 수 있습니다.",
+  EDIT_ROOM: "방 정보를 수정합니다.\n모집 마감 전까지 방 정보를 수정할 수 있습니다.",
   EMPTY_PARTICIPANTS: "참여자 목록은 매칭이 시작된 이후 공개됩니다.",
   ZERO_PARTICIPANTS: "이 방의 참여자가 없습니다.",
   ONLY_REVIEWER: "리뷰어로만 참여 중입니다!",

From c070311cc60ca0f12ab08e56b2422e5a459ab4eb Mon Sep 17 00:00:00 2001
From: 00kang <kdb070970@gmail.com>
Date: Sun, 3 Nov 2024 20:30:19 +0900
Subject: [PATCH 09/28] =?UTF-8?q?feat:=20=EB=A7=A4=EC=B9=AD=EC=8B=A4?=
 =?UTF-8?q?=ED=8C=A8=ED=95=9C=20=EB=B0=A9=EC=9D=B4=20close=EB=90=98?=
 =?UTF-8?q?=EC=97=88=EC=9D=84=20=EB=95=8C,=20=EC=B0=B8=EC=97=AC=EC=9E=90?=
 =?UTF-8?q?=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=EC=97=90=20=EB=AC=B8=EA=B5=AC=20?=
 =?UTF-8?q?=EB=9D=84=EC=9A=B0=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../roomDetailPage/participantList/ParticipantList.tsx   | 9 +++++++++
 frontend/src/constants/message.ts                        | 1 +
 2 files changed, 10 insertions(+)

diff --git a/frontend/src/components/roomDetailPage/participantList/ParticipantList.tsx b/frontend/src/components/roomDetailPage/participantList/ParticipantList.tsx
index 8b4f8030a..bba10cdbd 100644
--- a/frontend/src/components/roomDetailPage/participantList/ParticipantList.tsx
+++ b/frontend/src/components/roomDetailPage/participantList/ParticipantList.tsx
@@ -43,6 +43,15 @@ const ParticipantList = ({ roomInfo }: ParticipantListProps) => {
     );
   }
 
+  // 방 종료 후 매칭 실패 상태의 화면
+  if (roomInfo.roomStatus === "CLOSE" && roomInfo.message !== "") {
+    return (
+      <S.TotalContainer>
+        <S.MessageWrapper>{MESSAGES.GUIDANCE.NO_PARTICIPANTS}</S.MessageWrapper>
+      </S.TotalContainer>
+    );
+  }
+
   // 참여자 보여주는 화면
   return (
     <S.TotalContainer>
diff --git a/frontend/src/constants/message.ts b/frontend/src/constants/message.ts
index 7dd053714..64fcf0dca 100644
--- a/frontend/src/constants/message.ts
+++ b/frontend/src/constants/message.ts
@@ -10,6 +10,7 @@ const GUIDANCE_MESSAGES = {
   EDIT_ROOM: "방 정보를 수정합니다.\n모집 마감 전까지 방 정보를 수정할 수 있습니다.",
   EMPTY_PARTICIPANTS: "참여자 목록은 매칭이 시작된 이후 공개됩니다.",
   ZERO_PARTICIPANTS: "이 방의 참여자가 없습니다.",
+  NO_PARTICIPANTS: "매칭 실패로 인해 참여자 목록을 볼 수 없습니다.",
   ONLY_REVIEWER: "리뷰어로만 참여 중입니다!",
   PULL_REQUEST_NOT_SUBMITTED: "PR을 제출하지 않아 매칭되지 않았습니다.",
 };

From 88074bd119c5efb3fc0e29e7d0d58150cf390a30 Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Sun, 3 Nov 2024 23:21:12 +0900
Subject: [PATCH 10/28] =?UTF-8?q?feat:=20=EB=A6=AC=EB=B7=B0=EC=9D=B4=20?=
 =?UTF-8?q?=ED=94=BC=EB=93=9C=EB=B0=B1=20=EC=9E=91=EC=84=B1,=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../feedbackForm/RevieweeFeedbackForm.tsx     |  16 +-
 .../RevieweeFeedbackLayout.stories.tsx        |  78 +++++++++
 .../RevieweeFeedbackLayout.style.ts}          |  11 +-
 .../RevieweeFeedbackLayout.tsx                | 161 ++++++++++++++++++
 .../RevieweeFeedbackModal.stories.tsx         |  79 ---------
 .../RevieweeFeedbackModal.tsx                 |  74 --------
 .../roomDetailPage/myReviewee/MyReviewee.tsx  |  48 ++----
 .../hooks/feedback/useRevieweeFeedbackForm.ts |  96 -----------
 .../src/hooks/queries/useFetchFeedback.ts     |  19 +--
 .../feedbackForm/RevieweeFeedbackPage.tsx     |  41 +++++
 10 files changed, 313 insertions(+), 310 deletions(-)
 create mode 100644 frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.stories.tsx
 rename frontend/src/components/feedback/{revieweeFeedbackModal/RevieweeFeedbackModal.style.ts => revieweeFeedbackLayout/RevieweeFeedbackLayout.style.ts} (83%)
 create mode 100644 frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx
 delete mode 100644 frontend/src/components/feedback/revieweeFeedbackModal/RevieweeFeedbackModal.stories.tsx
 delete mode 100644 frontend/src/components/feedback/revieweeFeedbackModal/RevieweeFeedbackModal.tsx
 delete mode 100644 frontend/src/hooks/feedback/useRevieweeFeedbackForm.ts
 create mode 100644 frontend/src/pages/feedbackForm/RevieweeFeedbackPage.tsx

diff --git a/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx b/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx
index 80a52ec81..84e4cb1ed 100644
--- a/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx
+++ b/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx
@@ -9,7 +9,7 @@ import {
   DEVELOP_GOOD_KEYWORD_OPTIONS,
   DEVELOP_NORMAL_KEYWORD_OPTIONS,
 } from "@/constants/feedback";
-import { FeedbackModalType } from "@/utils/feedbackUtils";
+import { FeedbackType } from "@/utils/feedbackUtils";
 
 interface RevieweeFeedbackFormProps {
   formState: RevieweeFeedbackData;
@@ -17,7 +17,7 @@ interface RevieweeFeedbackFormProps {
     key: keyof RevieweeFeedbackData,
     value: RevieweeFeedbackData[keyof RevieweeFeedbackData],
   ) => void;
-  modalType: FeedbackModalType;
+  feedbackType: FeedbackType;
 }
 
 const getDevelopKeywordOptions = (selectedEvaluationId: number | undefined) => {
@@ -27,7 +27,7 @@ const getDevelopKeywordOptions = (selectedEvaluationId: number | undefined) => {
   return DEVELOP_GOOD_KEYWORD_OPTIONS;
 };
 
-const RevieweeFeedbackForm = ({ formState, onChange, modalType }: RevieweeFeedbackFormProps) => {
+const RevieweeFeedbackForm = ({ formState, onChange, feedbackType }: RevieweeFeedbackFormProps) => {
   return (
     <S.FeedbackFormContainer>
       <S.ItemContainer>
@@ -38,7 +38,7 @@ const RevieweeFeedbackForm = ({ formState, onChange, modalType }: RevieweeFeedba
         <EvaluationPointBar
           initialOptionId={formState.evaluationPoint}
           onChange={(value) => onChange("evaluationPoint", value)}
-          readonly={modalType === "view"}
+          readonly={feedbackType === "view"}
         />
       </S.ItemContainer>
 
@@ -51,7 +51,7 @@ const RevieweeFeedbackForm = ({ formState, onChange, modalType }: RevieweeFeedba
           selectedOptions={formState.feedbackKeywords}
           onChange={(value) => onChange("feedbackKeywords", value)}
           selectedEvaluationId={formState.evaluationPoint}
-          readonly={modalType === "view"}
+          readonly={feedbackType === "view"}
           options={getDevelopKeywordOptions(formState.evaluationPoint)}
         />
       </S.ItemContainer>
@@ -64,7 +64,7 @@ const RevieweeFeedbackForm = ({ formState, onChange, modalType }: RevieweeFeedba
         <RecommendationPointBar
           initialOptionId={formState.recommendationPoint}
           onChange={(value) => onChange("recommendationPoint", value)}
-          readonly={modalType === "view"}
+          readonly={feedbackType === "view"}
         />
       </S.ItemContainer>
 
@@ -76,13 +76,13 @@ const RevieweeFeedbackForm = ({ formState, onChange, modalType }: RevieweeFeedba
             showCharCount={true}
             maxLength={2000}
             placeholder={
-              modalType === "view"
+              feedbackType === "view"
                 ? "없음"
                 : "상대 리뷰이의 개발 역량 향상을 위해 피드백을 남겨주세요."
             }
             value={formState.feedbackText}
             onChange={(e) => onChange("feedbackText", e.target.value)}
-            readOnly={modalType === "view"}
+            readOnly={feedbackType === "view"}
           />
         </S.TextareaWrapper>
       </S.ItemContainer>
diff --git a/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.stories.tsx b/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.stories.tsx
new file mode 100644
index 000000000..9f4dd26c1
--- /dev/null
+++ b/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.stories.tsx
@@ -0,0 +1,78 @@
+// import type { Meta, StoryObj } from "@storybook/react";
+// import RevieweeFeedbackModal from "@/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout";
+// import { FeedbackType } from "@/utils/feedbackUtils";
+
+// const meta = {
+//   title: "feedback/RevieweeFeedbackModal",
+//   component: RevieweeFeedbackModal,
+//   parameters: {
+//     docs: {
+//       description: {
+//         component: "리뷰이 피드백 작성을 위한 모달 컴포넌트",
+//       },
+//     },
+//     viewport: {
+//       defaultViewport: "responsive",
+//     },
+//   },
+//   args: {
+//     roomInfo: {
+//       id: 1,
+//       title: "React 프로젝트 코드 리뷰",
+//       keywords: ["React", "TypeScript", "Styled-Components"],
+//     },
+//     reviewee: {
+//       userId: 1,
+//       username: "exampleUser",
+//       link: "https://github.com/example/project/pull/1",
+//       isReviewed: false,
+//       isWrited: false,
+//     },
+//     modalType: "create" as FeedbackType,
+//     buttonText: "피드백 작성",
+//   },
+// } satisfies Meta<typeof RevieweeFeedbackModal>;
+
+// export default meta;
+// type Story = StoryObj<typeof meta>;
+
+// export const Default: Story = {};
+
+// export const SmallViewport: Story = {
+//   parameters: {
+//     viewport: {
+//       defaultViewport: "mobile1",
+//     },
+//   },
+// };
+
+// export const MediumViewport: Story = {
+//   parameters: {
+//     viewport: {
+//       defaultViewport: "tablet",
+//     },
+//   },
+// };
+
+// export const LargeViewport: Story = {
+//   parameters: {
+//     viewport: {
+//       defaultViewport: "desktop",
+//     },
+//   },
+// };
+
+// export const EditMode: Story = {
+//   args: {
+//     modalType: "edit",
+//     buttonText: "피드백 수정",
+//   },
+// };
+
+// export const ViewMode: Story = {
+//   args: {
+//     modalType: "view",
+//     buttonText: "피드백 확인",
+//   },
+// };
+export default {};
diff --git a/frontend/src/components/feedback/revieweeFeedbackModal/RevieweeFeedbackModal.style.ts b/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.style.ts
similarity index 83%
rename from frontend/src/components/feedback/revieweeFeedbackModal/RevieweeFeedbackModal.style.ts
rename to frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.style.ts
index fc7dc40ee..37375778e 100644
--- a/frontend/src/components/feedback/revieweeFeedbackModal/RevieweeFeedbackModal.style.ts
+++ b/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.style.ts
@@ -4,20 +4,25 @@ export const FeedbackContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 1.6rem;
+
+  width: 100%;
+  min-width: 375px;
+  max-width: 700px;
+  margin: auto;
 `;
 
 export const FeedbackContainerHeader = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 1.2rem;
+  gap: 1.6rem;
 `;
 
-export const ModalType = styled.p`
+export const PageType = styled.p`
   font: ${({ theme }) => theme.TEXT.small_bold};
   color: ${({ theme }) => theme.COLOR.grey3};
 `;
 
-export const ModalTitle = styled.p`
+export const PageTitle = styled.p`
   font: ${({ theme }) => theme.TEXT.large_bold};
   color: ${({ theme }) => theme.COLOR.black};
 `;
diff --git a/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx b/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx
new file mode 100644
index 000000000..b132ce0b5
--- /dev/null
+++ b/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx
@@ -0,0 +1,161 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import useMutateFeedback from "@/hooks/mutations/useMutateFeedback";
+import Button from "@/components/common/button/Button";
+import Label from "@/components/common/label/Label";
+import RevieweeFeedbackForm from "@/components/feedback/feedbackForm/RevieweeFeedbackForm";
+import * as S from "@/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.style";
+import { RevieweeFeedbackData } from "@/@types/feedback";
+import { ReviewerInfo } from "@/@types/reviewer";
+import { RoomInfo } from "@/@types/roomInfo";
+import { theme } from "@/styles/theme";
+import { FeedbackType } from "@/utils/feedbackUtils";
+
+interface RevieweeFeedbackProps {
+  feedbackType: FeedbackType;
+  roomInfo: Pick<RoomInfo, "id" | "title" | "keywords">;
+  reviewee: ReviewerInfo;
+  feedbackData: RevieweeFeedbackData;
+}
+
+const getInitialFormState = (
+  reviewee: ReviewerInfo,
+  data: RevieweeFeedbackData,
+): RevieweeFeedbackData => ({
+  feedbackId: data.feedbackId || 0,
+  receiverId: reviewee.userId,
+  evaluationPoint: data.evaluationPoint || 0,
+  feedbackKeywords: data.feedbackKeywords || [],
+  feedbackText: data.feedbackText || "",
+  recommendationPoint: data.recommendationPoint || 0,
+});
+
+const RevieweeFeedbackLayout = ({
+  feedbackType,
+  roomInfo,
+  reviewee,
+  feedbackData,
+}: RevieweeFeedbackProps) => {
+  const navigate = useNavigate();
+  const { postRevieweeFeedbackMutation, putRevieweeFeedbackMutation } = useMutateFeedback(
+    roomInfo.id,
+  );
+  const [formState, setFormState] = useState<RevieweeFeedbackData>(() =>
+    getInitialFormState(reviewee, feedbackData),
+  );
+
+  const buttonText = feedbackType === "create" ? "작성하기" : "수정하기";
+
+  const displayedKeywords = roomInfo.keywords.filter((keyword) => keyword !== "");
+
+  useEffect(() => {
+    if (feedbackType === "create") {
+      setFormState({
+        feedbackId: 0,
+        receiverId: reviewee.userId,
+        evaluationPoint: 0,
+        feedbackKeywords: [],
+        feedbackText: "",
+        recommendationPoint: 0,
+      });
+    } else {
+      setFormState(feedbackData);
+    }
+  }, [feedbackType, feedbackData, reviewee.userId]);
+
+  const handleChange = (
+    key: keyof RevieweeFeedbackData,
+    value: RevieweeFeedbackData[keyof RevieweeFeedbackData],
+  ) => {
+    if (feedbackType === "view") return;
+
+    if (key === "evaluationPoint") {
+      setFormState((prevState) => ({
+        ...prevState,
+        evaluationPoint: value as number,
+        feedbackKeywords: [],
+      }));
+    } else {
+      setFormState((prevState) => ({ ...prevState, [key]: value }));
+    }
+  };
+
+  const isFormValid = formState.evaluationPoint !== 0 && formState.feedbackKeywords.length > 0;
+
+  const handleSubmit = () => {
+    if (!isFormValid || feedbackType === "view") return;
+
+    const formattedFormState = {
+      ...formState,
+      feedbackText: formState.feedbackText,
+      feedbackKeywords: formState.feedbackKeywords,
+      evaluationPoint: formState.evaluationPoint,
+    };
+
+    if (feedbackType === "create") {
+      postRevieweeFeedbackMutation.mutate(
+        { feedbackData: formattedFormState },
+        {
+          onSuccess: () => {
+            navigate(`/rooms/${roomInfo.id}`);
+          },
+        },
+      );
+    } else if (feedbackType === "edit") {
+      putRevieweeFeedbackMutation.mutate(
+        { feedbackId: formState.feedbackId, feedbackData: formattedFormState },
+        {
+          onSuccess: () => {
+            navigate(`/rooms/${roomInfo.id}`);
+          },
+        },
+      );
+    }
+  };
+
+  return (
+    <>
+      <S.FeedbackContainer>
+        <S.PageType>
+          {feedbackType === "create" && "리뷰어 피드백 작성하기"}
+          {feedbackType === "edit" && "리뷰어 피드백 수정하기"}
+          {feedbackType === "view" && "리뷰어 피드백 확인하기"}
+        </S.PageType>
+        <S.FeedbackContainerHeader>
+          <S.PageTitle>{roomInfo.title}</S.PageTitle>
+          <S.Keywords>
+            {displayedKeywords.length === 0 ? (
+              <S.NoKeywordText>지정된 키워드 없음</S.NoKeywordText>
+            ) : (
+              displayedKeywords.map((keyword) => (
+                <Label
+                  key={keyword}
+                  type="KEYWORD"
+                  text={keyword}
+                  size="semiSmall"
+                  backgroundColor={theme.COLOR.grey0}
+                />
+              ))
+            )}
+          </S.Keywords>
+        </S.FeedbackContainerHeader>
+
+        <RevieweeFeedbackForm
+          formState={formState}
+          onChange={handleChange}
+          feedbackType={feedbackType}
+        />
+
+        {feedbackType !== "view" && (
+          <S.ButtonWrapper>
+            <Button onClick={handleSubmit} disabled={!isFormValid}>
+              {buttonText}
+            </Button>
+          </S.ButtonWrapper>
+        )}
+      </S.FeedbackContainer>
+    </>
+  );
+};
+
+export default RevieweeFeedbackLayout;
diff --git a/frontend/src/components/feedback/revieweeFeedbackModal/RevieweeFeedbackModal.stories.tsx b/frontend/src/components/feedback/revieweeFeedbackModal/RevieweeFeedbackModal.stories.tsx
deleted file mode 100644
index 7175b1589..000000000
--- a/frontend/src/components/feedback/revieweeFeedbackModal/RevieweeFeedbackModal.stories.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import RevieweeFeedbackModal from "@/components/feedback/revieweeFeedbackModal/RevieweeFeedbackModal";
-import { FeedbackModalType } from "@/utils/feedbackUtils";
-
-const meta = {
-  title: "feedback/RevieweeFeedbackModal",
-  component: RevieweeFeedbackModal,
-  parameters: {
-    docs: {
-      description: {
-        component: "리뷰이 피드백 작성을 위한 모달 컴포넌트",
-      },
-    },
-    viewport: {
-      defaultViewport: "responsive",
-    },
-  },
-  args: {
-    isOpen: true,
-    onClose: () => {},
-    roomInfo: {
-      id: 1,
-      title: "React 프로젝트 코드 리뷰",
-      keywords: ["React", "TypeScript", "Styled-Components"],
-    },
-    reviewee: {
-      userId: 1,
-      username: "exampleUser",
-      link: "https://github.com/example/project/pull/1",
-      isReviewed: false,
-      isWrited: false,
-    },
-    modalType: "create" as FeedbackModalType,
-    buttonText: "피드백 작성",
-  },
-} satisfies Meta<typeof RevieweeFeedbackModal>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const SmallViewport: Story = {
-  parameters: {
-    viewport: {
-      defaultViewport: "mobile1",
-    },
-  },
-};
-
-export const MediumViewport: Story = {
-  parameters: {
-    viewport: {
-      defaultViewport: "tablet",
-    },
-  },
-};
-
-export const LargeViewport: Story = {
-  parameters: {
-    viewport: {
-      defaultViewport: "desktop",
-    },
-  },
-};
-
-export const EditMode: Story = {
-  args: {
-    modalType: "edit",
-    buttonText: "피드백 수정",
-  },
-};
-
-export const ViewMode: Story = {
-  args: {
-    modalType: "view",
-    buttonText: "피드백 확인",
-  },
-};
diff --git a/frontend/src/components/feedback/revieweeFeedbackModal/RevieweeFeedbackModal.tsx b/frontend/src/components/feedback/revieweeFeedbackModal/RevieweeFeedbackModal.tsx
deleted file mode 100644
index 0986d48c3..000000000
--- a/frontend/src/components/feedback/revieweeFeedbackModal/RevieweeFeedbackModal.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { useRevieweeFeedbackForm } from "@/hooks/feedback/useRevieweeFeedbackForm";
-import Button from "@/components/common/button/Button";
-import Label from "@/components/common/label/Label";
-import { ModalProps } from "@/components/common/modal/Modal";
-import FeedbackCustomModal from "@/components/common/modal/feedbackCustomModal/FeedbackCustomModal";
-import RevieweeFeedbackForm from "@/components/feedback/feedbackForm/RevieweeFeedbackForm";
-import * as S from "@/components/feedback/revieweeFeedbackModal/RevieweeFeedbackModal.style";
-import { ReviewerInfo } from "@/@types/reviewer";
-import { RoomInfo } from "@/@types/roomInfo";
-import { theme } from "@/styles/theme";
-import { FeedbackModalType } from "@/utils/feedbackUtils";
-
-interface RevieweeFeedbackModalProps extends ModalProps {
-  roomInfo: Pick<RoomInfo, "id" | "title" | "keywords">;
-  reviewee: ReviewerInfo;
-  modalType: FeedbackModalType;
-  buttonText: string;
-}
-
-const RevieweeFeedbackModal = ({
-  isOpen,
-  onClose,
-  roomInfo,
-  reviewee,
-  modalType,
-  buttonText,
-}: RevieweeFeedbackModalProps) => {
-  const { formState, handleChange, isFormValid, handleSubmit, handleClose } =
-    useRevieweeFeedbackForm(roomInfo.id, reviewee.username, reviewee.userId, modalType, onClose);
-
-  const displayedKeywords = roomInfo.keywords.filter((keyword) => keyword !== "");
-
-  return (
-    <FeedbackCustomModal isOpen={isOpen} onClose={handleClose}>
-      <S.FeedbackContainer>
-        <S.ModalType>
-          {modalType === "create" && "리뷰이 피드백 작성하기"}
-          {modalType === "edit" && "리뷰이 피드백 수정하기"}
-          {modalType === "view" && "리뷰이 피드백 확인하기"}
-        </S.ModalType>
-        <S.FeedbackContainerHeader>
-          <S.ModalTitle>{roomInfo.title}</S.ModalTitle>
-          <S.Keywords>
-            {displayedKeywords.length === 0 ? (
-              <S.NoKeywordText>지정된 키워드 없음</S.NoKeywordText>
-            ) : (
-              displayedKeywords.map((keyword) => (
-                <Label
-                  key={keyword}
-                  type="KEYWORD"
-                  text={keyword}
-                  size="semiSmall"
-                  backgroundColor={theme.COLOR.grey0}
-                />
-              ))
-            )}
-          </S.Keywords>
-        </S.FeedbackContainerHeader>
-
-        <RevieweeFeedbackForm formState={formState} onChange={handleChange} modalType={modalType} />
-
-        {modalType !== "view" && (
-          <S.ButtonWrapper>
-            <Button onClick={handleSubmit} disabled={!isFormValid}>
-              {buttonText}
-            </Button>
-          </S.ButtonWrapper>
-        )}
-      </S.FeedbackContainer>
-    </FeedbackCustomModal>
-  );
-};
-
-export default RevieweeFeedbackModal;
diff --git a/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx b/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx
index f9df884f0..8bc6c18e6 100644
--- a/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx
+++ b/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx
@@ -1,40 +1,32 @@
 import React, { useState } from "react";
-import useModal from "@/hooks/common/useModal";
+import { useNavigate } from "react-router-dom";
 import useMutateReviewComplete from "@/hooks/mutations/useMutateReview";
 import { useFetchReviewee } from "@/hooks/queries/useFetchReviewee";
 import Button from "@/components/common/button/Button";
 import Icon from "@/components/common/icon/Icon";
-import RevieweeFeedbackModal from "@/components/feedback/revieweeFeedbackModal/RevieweeFeedbackModal";
 import * as S from "@/components/roomDetailPage/myReviewee/MyReviewee.style";
 import { ReviewerInfo } from "@/@types/reviewer";
 import { RoomInfo } from "@/@types/roomInfo";
 import { spinner } from "@/assets";
 import MESSAGES from "@/constants/message";
 import { HoverStyledLink } from "@/styles/common";
-import { FeedbackTypeResult, getFeedbackType } from "@/utils/feedbackUtils";
+import { getFeedbackType } from "@/utils/feedbackUtils";
 
 interface MyRevieweeProps {
   roomInfo: RoomInfo;
 }
 
 const MyReviewee = ({ roomInfo }: MyRevieweeProps) => {
+  const navigate = useNavigate();
   const { data: revieweeData } = useFetchReviewee(roomInfo);
-  const { isModalOpen, handleOpenModal, handleCloseModal } = useModal();
   const { postReviewCompleteMutation } = useMutateReviewComplete(roomInfo.id);
-  const [selectedReviewee, setSelectedReviewee] = useState<ReviewerInfo | null>(null);
-  const [feedbackTypeResult, setFeedbackTypeResult] = useState<FeedbackTypeResult | null>(null);
   const [loadingButtonId, setLoadingButtonId] = useState<number[]>([]);
 
-  // 피드백 모달 여는 함수
-  const handleOpenFeedbackModal = (reviewee: ReviewerInfo) => {
-    const feedbackType = getFeedbackType({
-      isReviewed: reviewee.isReviewed,
-      isWrited: reviewee.isWrited,
-      isClosed: roomInfo.roomStatus === "CLOSE",
+  // 피드백 페이지 이동 함수
+  const handleNavigateFeedbackPage = (reviewee: ReviewerInfo) => {
+    navigate(`/feedback/reviewee/${roomInfo.id}?username=${reviewee.username}`, {
+      state: { reviewee },
     });
-    setSelectedReviewee(reviewee);
-    setFeedbackTypeResult(feedbackType);
-    handleOpenModal();
   };
 
   // 코드 리뷰 완료 post 요청 보내는 함수
@@ -45,7 +37,7 @@ const MyReviewee = ({ roomInfo }: MyRevieweeProps) => {
       { roomId: roomInfo.id, revieweeId: reviewee.userId },
       {
         onSuccess: () => {
-          handleOpenFeedbackModal(reviewee);
+          handleNavigateFeedbackPage(reviewee);
           setLoadingButtonId((prev) => prev.filter((id) => id !== reviewee.userId));
         },
         onError: () => setLoadingButtonId((prev) => prev.filter((id) => id !== reviewee.userId)),
@@ -65,16 +57,16 @@ const MyReviewee = ({ roomInfo }: MyRevieweeProps) => {
       return <p>코드리뷰를 하지 않았어요</p>;
     }
 
-    if (roomInfo.roomStatus === "CLOSE" && !reviewee.isWrited) {
-      return <p>피드백을 작성하지 않았어요</p>;
-    }
+    // if (roomInfo.roomStatus === "CLOSE" && !reviewee.isWrited) {
+    //   return <p>피드백을 작성하지 않았어요</p>;
+    // }
 
     return reviewee.isReviewed ? (
       <Button
         size="xSmall"
         variant="primary"
+        onClick={() => handleNavigateFeedbackPage(reviewee)}
         disabled={!reviewee.isReviewed || loadingButtonId.includes(reviewee.userId)}
-        onClick={() => handleOpenFeedbackModal(reviewee)}
       >
         {loadingButtonId.includes(reviewee.userId) ? (
           <S.LoadingSpinner src={spinner} />
@@ -138,22 +130,6 @@ const MyReviewee = ({ roomInfo }: MyRevieweeProps) => {
   // 매칭 후 성공했을 때 보여줄 화면
   return (
     <>
-      {selectedReviewee && feedbackTypeResult && (
-        <RevieweeFeedbackModal
-          key={selectedReviewee.username}
-          isOpen={isModalOpen}
-          onClose={() => {
-            handleCloseModal();
-            setSelectedReviewee(null);
-            setFeedbackTypeResult(null);
-          }}
-          roomInfo={roomInfo}
-          reviewee={selectedReviewee}
-          modalType={feedbackTypeResult.modalType}
-          buttonText={feedbackTypeResult.buttonText}
-        />
-      )}
-
       <S.MyRevieweeTable aria-label="나의 리뷰이 목록.">
         <S.MyRevieweeTableHead>
           <S.MyRevieweeTableRow>
diff --git a/frontend/src/hooks/feedback/useRevieweeFeedbackForm.ts b/frontend/src/hooks/feedback/useRevieweeFeedbackForm.ts
deleted file mode 100644
index 90e0e2a81..000000000
--- a/frontend/src/hooks/feedback/useRevieweeFeedbackForm.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import { useEffect, useState } from "react";
-import useMutateFeedback from "@/hooks/mutations/useMutateFeedback";
-import { useFetchRevieweeFeedback } from "@/hooks/queries/useFetchFeedback";
-import { RevieweeFeedbackData } from "@/@types/feedback";
-import { FeedbackModalType } from "@/utils/feedbackUtils";
-
-const initialFormState: RevieweeFeedbackData = {
-  feedbackId: 0,
-  receiverId: 0,
-  evaluationPoint: 0,
-  feedbackKeywords: [],
-  feedbackText: "",
-  recommendationPoint: 0,
-};
-
-export const useRevieweeFeedbackForm = (
-  roomId: number,
-  revieweeUsername: string,
-  receiverId: number,
-  modalType: FeedbackModalType,
-  onClose: () => void,
-) => {
-  const [formState, setFormState] = useState<RevieweeFeedbackData>(initialFormState);
-  const { postRevieweeFeedbackMutation, putRevieweeFeedbackMutation } = useMutateFeedback(roomId);
-
-  const { data: feedbackData } = useFetchRevieweeFeedback({
-    roomId,
-    username: revieweeUsername,
-    enabled: modalType !== "create",
-  });
-
-  useEffect(() => {
-    if (modalType === "create") {
-      setFormState({ ...initialFormState, receiverId });
-    } else if (feedbackData) {
-      setFormState({ ...feedbackData, receiverId });
-    }
-  }, [modalType, feedbackData, receiverId]);
-
-  const handleChange = (
-    key: keyof RevieweeFeedbackData,
-    value: RevieweeFeedbackData[keyof RevieweeFeedbackData],
-  ) => {
-    if (modalType === "view") return;
-
-    if (key === "evaluationPoint") {
-      setFormState((prevState) => ({
-        ...prevState,
-        evaluationPoint: value as number,
-        feedbackKeywords: [],
-      }));
-    } else {
-      setFormState((prevState) => ({ ...prevState, [key]: value }));
-    }
-  };
-
-  const isFormValid =
-    formState.evaluationPoint !== 0 &&
-    formState.feedbackKeywords.length > 0 &&
-    formState.recommendationPoint !== 0;
-
-  const handleSubmit = () => {
-    if (!isFormValid || modalType === "view") return;
-
-    const feedbackData = { ...formState };
-
-    if (modalType === "create") {
-      postRevieweeFeedbackMutation.mutate(
-        { feedbackData },
-        {
-          onSuccess: () => {
-            onClose();
-          },
-        },
-      );
-    }
-
-    if (modalType === "edit") {
-      putRevieweeFeedbackMutation.mutate(
-        { feedbackId: feedbackData.feedbackId, feedbackData },
-        {
-          onSuccess: () => {
-            onClose();
-          },
-        },
-      );
-    }
-  };
-
-  const handleClose = () => {
-    setFormState(initialFormState);
-    onClose();
-  };
-
-  return { formState, handleChange, isFormValid, handleSubmit, handleClose };
-};
diff --git a/frontend/src/hooks/queries/useFetchFeedback.ts b/frontend/src/hooks/queries/useFetchFeedback.ts
index 53b36223f..2f99dd9d6 100644
--- a/frontend/src/hooks/queries/useFetchFeedback.ts
+++ b/frontend/src/hooks/queries/useFetchFeedback.ts
@@ -7,10 +7,9 @@ import {
 } from "@/apis/feedback.api";
 import QUERY_KEYS from "@/apis/queryKeys";
 
-interface UseFetchReviewerFeedbackProps {
+interface UseFetchFeedbackProps {
   roomId: number;
   username: string;
-  enabled: boolean;
 }
 
 export const useFetchReceivedFeedback = (enabled: boolean) => {
@@ -30,27 +29,19 @@ export const useFetchDeliveredFeedback = (enabled: boolean) => {
 };
 
 // 리뷰어 -> 리뷰이
-export const useFetchRevieweeFeedback = ({
-  roomId,
-  username,
-  enabled,
-}: UseFetchReviewerFeedbackProps) => {
+export const useFetchRevieweeFeedback = ({ roomId, username }: UseFetchFeedbackProps) => {
   return useQuery({
     queryKey: [QUERY_KEYS.REVIEWEE_FEEDBACK, roomId.toString(), username],
     queryFn: () => getRevieweeFeedback(roomId, username),
-    enabled: enabled && !!roomId && !!username,
+    enabled: !!roomId && !!username,
   });
 };
 
 // 리뷰이 -> 리뷰어
-export const useFetchReviewerFeedback = ({
-  roomId,
-  username,
-  enabled,
-}: UseFetchReviewerFeedbackProps) => {
+export const useFetchReviewerFeedback = ({ roomId, username }: UseFetchFeedbackProps) => {
   return useQuery({
     queryKey: [QUERY_KEYS.REVIEWER_FEEDBACK, roomId.toString(), username],
     queryFn: () => getReviewerFeedback(roomId, username),
-    enabled: enabled && !!roomId && !!username,
+    enabled: !!roomId && !!username,
   });
 };
diff --git a/frontend/src/pages/feedbackForm/RevieweeFeedbackPage.tsx b/frontend/src/pages/feedbackForm/RevieweeFeedbackPage.tsx
new file mode 100644
index 000000000..9655c59dc
--- /dev/null
+++ b/frontend/src/pages/feedbackForm/RevieweeFeedbackPage.tsx
@@ -0,0 +1,41 @@
+import { useLocation, useParams } from "react-router-dom";
+import { useFetchRevieweeFeedback } from "@/hooks/queries/useFetchFeedback";
+import { useFetchDetailRoomInfo } from "@/hooks/queries/useFetchRooms";
+import RevieweeFeedbackLayout from "@/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout";
+import { RevieweeFeedbackData } from "@/@types/feedback";
+import { ReviewerInfo } from "@/@types/reviewer";
+
+const RevieweeFeedbackPage = () => {
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location.search);
+
+  const roomId = Number(useParams().roomId);
+  const username = queryParams.get("username") || "";
+  const reviewee = location.state?.reviewee as ReviewerInfo;
+
+  const { data: roomInfo } = useFetchDetailRoomInfo(roomId);
+  const { data: feedbackData } = useFetchRevieweeFeedback({
+    roomId,
+    username,
+  });
+
+  const initialFeedbackData: RevieweeFeedbackData = {
+    feedbackId: 0,
+    receiverId: 0,
+    evaluationPoint: 0,
+    feedbackKeywords: [],
+    feedbackText: "",
+    recommendationPoint: 0,
+  };
+
+  return (
+    <RevieweeFeedbackLayout
+      feedbackType={feedbackData ? "edit" : "create"}
+      roomInfo={roomInfo}
+      reviewee={reviewee}
+      feedbackData={feedbackData || initialFeedbackData}
+    />
+  );
+};
+
+export default RevieweeFeedbackPage;

From 668c06b92f169194ccfc2746364ce8b0daef5767 Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Sun, 3 Nov 2024 23:22:49 +0900
Subject: [PATCH 11/28] =?UTF-8?q?feat:=20=EB=A6=AC=EB=B7=B0=EC=96=B4=20?=
 =?UTF-8?q?=ED=94=BC=EB=93=9C=EB=B0=B1=20=EC=9E=91=EC=84=B1,=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../feedbackForm/ReviewerFeedbackForm.tsx     |  16 +-
 .../ReviewerFeedbackLayout.stories.tsx        |  78 +++++++++
 .../ReviewerFeedbackLayout.style.ts}          |  11 +-
 .../ReviewerFeedbackLayout.tsx                | 159 ++++++++++++++++++
 .../ReviewerFeedbackModal.stories.tsx         |  79 ---------
 .../ReviewerFeedbackModal.tsx                 |  74 --------
 .../roomDetailPage/myReviewer/MyReviewer.tsx  |  50 ++----
 .../hooks/feedback/useReviewerFeedbackForm.ts |  92 ----------
 .../feedbackForm/ReviewerFeedbackPage.tsx     |  40 +++++
 frontend/src/router.tsx                       |  10 ++
 10 files changed, 315 insertions(+), 294 deletions(-)
 create mode 100644 frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.stories.tsx
 rename frontend/src/components/feedback/{reviewerFeedbackModal/ReviewerFeedbackModal.style.ts => reviewerFeedbackLayout/ReviewerFeedbackLayout.style.ts} (85%)
 create mode 100644 frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx
 delete mode 100644 frontend/src/components/feedback/reviewerFeedbackModal/ReviewerFeedbackModal.stories.tsx
 delete mode 100644 frontend/src/components/feedback/reviewerFeedbackModal/ReviewerFeedbackModal.tsx
 delete mode 100644 frontend/src/hooks/feedback/useReviewerFeedbackForm.ts
 create mode 100644 frontend/src/pages/feedbackForm/ReviewerFeedbackPage.tsx

diff --git a/frontend/src/components/feedback/feedbackForm/ReviewerFeedbackForm.tsx b/frontend/src/components/feedback/feedbackForm/ReviewerFeedbackForm.tsx
index 27056308b..691317560 100644
--- a/frontend/src/components/feedback/feedbackForm/ReviewerFeedbackForm.tsx
+++ b/frontend/src/components/feedback/feedbackForm/ReviewerFeedbackForm.tsx
@@ -9,7 +9,7 @@ import {
   SOCIAL_NORMAL_KEYWORD_OPTIONS,
 } from "@/constants/feedback";
 import { theme } from "@/styles/theme";
-import { FeedbackModalType } from "@/utils/feedbackUtils";
+import { FeedbackType } from "@/utils/feedbackUtils";
 
 interface ReviewerFeedbackFormProps {
   formState: ReviewerFeedbackData;
@@ -17,7 +17,7 @@ interface ReviewerFeedbackFormProps {
     key: keyof ReviewerFeedbackData,
     value: ReviewerFeedbackData[keyof ReviewerFeedbackData],
   ) => void;
-  modalType: FeedbackModalType;
+  feedbackType: FeedbackType;
 }
 
 const getSocialKeywordOptions = (selectedEvaluationId: number | undefined) => {
@@ -27,7 +27,7 @@ const getSocialKeywordOptions = (selectedEvaluationId: number | undefined) => {
   return SOCIAL_GOOD_KEYWORD_OPTIONS;
 };
 
-const ReviewerFeedbackForm = ({ formState, onChange, modalType }: ReviewerFeedbackFormProps) => {
+const ReviewerFeedbackForm = ({ formState, onChange, feedbackType }: ReviewerFeedbackFormProps) => {
   return (
     <S.FeedbackFormContainer>
       <S.ItemContainer>
@@ -40,8 +40,8 @@ const ReviewerFeedbackForm = ({ formState, onChange, modalType }: ReviewerFeedba
         <EvaluationPointBar
           initialOptionId={formState.evaluationPoint}
           onChange={(value) => onChange("evaluationPoint", value)}
-          readonly={modalType === "view"}
           color={theme.COLOR.secondary}
+          readonly={feedbackType === "view"}
         />
       </S.ItemContainer>
 
@@ -54,9 +54,9 @@ const ReviewerFeedbackForm = ({ formState, onChange, modalType }: ReviewerFeedba
           selectedOptions={formState.feedbackKeywords}
           onChange={(value) => onChange("feedbackKeywords", value)}
           selectedEvaluationId={formState.evaluationPoint}
-          readonly={modalType === "view"}
           options={getSocialKeywordOptions(formState.evaluationPoint)}
           color={theme.COLOR.secondary}
+          readonly={feedbackType === "view"}
         />
       </S.ItemContainer>
 
@@ -68,13 +68,13 @@ const ReviewerFeedbackForm = ({ formState, onChange, modalType }: ReviewerFeedba
             showCharCount={true}
             maxLength={2000}
             placeholder={
-              modalType === "view"
-                ? "없음"
+              feedbackType === "view"
+                ? "미작성"
                 : "상대 리뷰어의 소프트 스킬 향상을 위해 피드백을 남겨주세요."
             }
             value={formState.feedbackText}
             onChange={(e) => onChange("feedbackText", e.target.value)}
-            readOnly={modalType === "view"}
+            readOnly={feedbackType === "view"}
           />
         </S.TextareaWrapper>
       </S.ItemContainer>
diff --git a/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.stories.tsx b/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.stories.tsx
new file mode 100644
index 000000000..a215d4111
--- /dev/null
+++ b/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.stories.tsx
@@ -0,0 +1,78 @@
+// import type { Meta, StoryObj } from "@storybook/react";
+// import ReviewerFeedbackModal from "@/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout";
+// import { FeedbackType } from "@/utils/feedbackUtils";
+
+// const meta = {
+//   title: "feedback/ReviewerFeedbackModal",
+//   component: ReviewerFeedbackModal,
+//   parameters: {
+//     docs: {
+//       description: {
+//         component: "리뷰어 피드백 작성을 위한 모달 컴포넌트",
+//       },
+//     },
+//     viewport: {
+//       defaultViewport: "responsive",
+//     },
+//   },
+//   args: {
+//     roomInfo: {
+//       id: 1,
+//       title: "React 프로젝트 코드 리뷰",
+//       keywords: ["React", "TypeScript", "Styled-Components"],
+//     },
+//     reviewer: {
+//       userId: 1,
+//       username: "exampleUser",
+//       link: "https://github.com/example/project/pull/1",
+//       isReviewed: false,
+//       isWrited: false,
+//     },
+//     modalType: "create" as FeedbackType,
+//     buttonText: "피드백 작성",
+//   },
+// } satisfies Meta<typeof ReviewerFeedbackModal>;
+
+// export default meta;
+// type Story = StoryObj<typeof meta>;
+
+// export const Default: Story = {};
+
+// export const SmallViewport: Story = {
+//   parameters: {
+//     viewport: {
+//       defaultViewport: "mobile1",
+//     },
+//   },
+// };
+
+// export const MediumViewport: Story = {
+//   parameters: {
+//     viewport: {
+//       defaultViewport: "tablet",
+//     },
+//   },
+// };
+
+// export const LargeViewport: Story = {
+//   parameters: {
+//     viewport: {
+//       defaultViewport: "desktop",
+//     },
+//   },
+// };
+
+// export const EditMode: Story = {
+//   args: {
+//     modalType: "edit",
+//     buttonText: "피드백 수정",
+//   },
+// };
+
+// export const ViewMode: Story = {
+//   args: {
+//     modalType: "view",
+//     buttonText: "피드백 확인",
+//   },
+// };
+export default {};
diff --git a/frontend/src/components/feedback/reviewerFeedbackModal/ReviewerFeedbackModal.style.ts b/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.style.ts
similarity index 85%
rename from frontend/src/components/feedback/reviewerFeedbackModal/ReviewerFeedbackModal.style.ts
rename to frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.style.ts
index 13e5fb4af..1beb6222a 100644
--- a/frontend/src/components/feedback/reviewerFeedbackModal/ReviewerFeedbackModal.style.ts
+++ b/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.style.ts
@@ -8,6 +8,11 @@ export const FeedbackContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 1.6rem;
+
+  width: 100%;
+  min-width: 375px;
+  max-width: 700px;
+  margin: auto;
 `;
 
 export const FeedbackContainerHeader = styled.div`
@@ -16,12 +21,12 @@ export const FeedbackContainerHeader = styled.div`
   gap: 1.2rem;
 `;
 
-export const ModalType = styled.p`
+export const PageType = styled.p`
   font: ${({ theme }) => theme.TEXT.small_bold};
   color: ${({ theme }) => theme.COLOR.grey3};
 `;
 
-export const ModalTitle = styled.p`
+export const PageTitle = styled.p`
   font: ${({ theme }) => theme.TEXT.large_bold};
   color: ${({ theme }) => theme.COLOR.black};
 `;
@@ -37,7 +42,7 @@ export const ItemContainer = styled.div`
   gap: 0.8rem;
 `;
 
-export const ModalQuestion = styled.p<ModalQuestionProps>`
+export const PageQuestion = styled.p<ModalQuestionProps>`
   font: ${({ theme }) => theme.TEXT.small};
   font-weight: 600;
 
diff --git a/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx b/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx
new file mode 100644
index 000000000..4784f7bb7
--- /dev/null
+++ b/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx
@@ -0,0 +1,159 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import useMutateFeedback from "@/hooks/mutations/useMutateFeedback";
+import Button from "@/components/common/button/Button";
+import Label from "@/components/common/label/Label";
+import ReviewerFeedbackForm from "@/components/feedback/feedbackForm/ReviewerFeedbackForm";
+import * as S from "@/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.style";
+import { ReviewerFeedbackData } from "@/@types/feedback";
+import { ReviewerInfo } from "@/@types/reviewer";
+import { RoomInfo } from "@/@types/roomInfo";
+import { theme } from "@/styles/theme";
+import { FeedbackType } from "@/utils/feedbackUtils";
+
+interface ReviewerFeedbackProps {
+  feedbackType: FeedbackType;
+  roomInfo: Pick<RoomInfo, "id" | "title" | "keywords">;
+  reviewer: ReviewerInfo;
+  feedbackData: ReviewerFeedbackData;
+}
+
+const getInitialFormState = (
+  reviewer: ReviewerInfo,
+  data: ReviewerFeedbackData,
+): ReviewerFeedbackData => ({
+  feedbackId: data.feedbackId || 0,
+  receiverId: reviewer.userId,
+  evaluationPoint: data.evaluationPoint || 0,
+  feedbackKeywords: data.feedbackKeywords || [],
+  feedbackText: data.feedbackText || "",
+});
+
+const ReviewerFeedbackLayout = ({
+  feedbackType,
+  roomInfo,
+  reviewer,
+  feedbackData,
+}: ReviewerFeedbackProps) => {
+  const navigate = useNavigate();
+  const { postReviewerFeedbackMutation, putReviewerFeedbackMutation } = useMutateFeedback(
+    roomInfo.id,
+  );
+  const [formState, setFormState] = useState<ReviewerFeedbackData>(() =>
+    getInitialFormState(reviewer, feedbackData),
+  );
+
+  const buttonText = feedbackType === "create" ? "작성하기" : "수정하기";
+
+  const displayedKeywords = roomInfo.keywords.filter((keyword) => keyword !== "");
+
+  useEffect(() => {
+    if (feedbackType === "create") {
+      setFormState({
+        feedbackId: 0,
+        receiverId: reviewer.userId,
+        evaluationPoint: 0,
+        feedbackKeywords: [],
+        feedbackText: "",
+      });
+    } else {
+      setFormState(feedbackData);
+    }
+  }, [feedbackType, feedbackData, reviewer.userId]);
+
+  const handleChange = (
+    key: keyof ReviewerFeedbackData,
+    value: ReviewerFeedbackData[keyof ReviewerFeedbackData],
+  ) => {
+    if (feedbackType === "view") return;
+
+    if (key === "evaluationPoint") {
+      setFormState((prevState) => ({
+        ...prevState,
+        evaluationPoint: value as number,
+        feedbackKeywords: [],
+      }));
+    } else {
+      setFormState((prevState) => ({ ...prevState, [key]: value }));
+    }
+  };
+
+  const isFormValid = formState.evaluationPoint !== 0 && formState.feedbackKeywords.length > 0;
+
+  const handleSubmit = () => {
+    if (!isFormValid || feedbackType === "view") return;
+
+    const formattedFormState = {
+      ...formState,
+      feedbackText: formState.feedbackText,
+      feedbackKeywords: formState.feedbackKeywords,
+      evaluationPoint: formState.evaluationPoint,
+    };
+
+    if (feedbackType === "create") {
+      postReviewerFeedbackMutation.mutate(
+        { feedbackData: formattedFormState },
+        {
+          onSuccess: () => {
+            navigate(`/rooms/${roomInfo.id}`);
+          },
+        },
+      );
+    } else if (feedbackType === "edit") {
+      putReviewerFeedbackMutation.mutate(
+        { feedbackId: formState.feedbackId, feedbackData: formattedFormState },
+        {
+          onSuccess: () => {
+            navigate(`/rooms/${roomInfo.id}`);
+          },
+        },
+      );
+    }
+  };
+
+  return (
+    <>
+      <S.FeedbackContainer>
+        <S.PageType>
+          {feedbackType === "create" && "리뷰어 피드백 작성하기"}
+          {feedbackType === "edit" && "리뷰어 피드백 수정하기"}
+          {feedbackType === "view" && "리뷰어 피드백 확인하기"}
+        </S.PageType>
+        <S.FeedbackContainerHeader>
+          <S.PageTitle>{roomInfo.title}</S.PageTitle>
+          <S.Keywords>
+            {displayedKeywords.length === 0 ? (
+              <S.NoKeywordText>지정된 키워드 없음</S.NoKeywordText>
+            ) : (
+              displayedKeywords.map((keyword) => (
+                <Label
+                  key={keyword}
+                  type="KEYWORD"
+                  text={keyword}
+                  size="semiSmall"
+                  backgroundColor={theme.COLOR.grey0}
+                />
+              ))
+            )}
+          </S.Keywords>
+        </S.FeedbackContainerHeader>
+
+        <ReviewerFeedbackForm
+          formState={formState}
+          onChange={handleChange}
+          feedbackType={feedbackType}
+        />
+
+        {feedbackType !== "view" && (
+          <S.ButtonWrapper>
+            <Button onClick={handleSubmit} disabled={!isFormValid}>
+              {buttonText}
+            </Button>
+          </S.ButtonWrapper>
+        )}
+      </S.FeedbackContainer>
+    </>
+  );
+};
+
+export default ReviewerFeedbackLayout;
diff --git a/frontend/src/components/feedback/reviewerFeedbackModal/ReviewerFeedbackModal.stories.tsx b/frontend/src/components/feedback/reviewerFeedbackModal/ReviewerFeedbackModal.stories.tsx
deleted file mode 100644
index b04ddea53..000000000
--- a/frontend/src/components/feedback/reviewerFeedbackModal/ReviewerFeedbackModal.stories.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import ReviewerFeedbackModal from "@/components/feedback/reviewerFeedbackModal/ReviewerFeedbackModal";
-import { FeedbackModalType } from "@/utils/feedbackUtils";
-
-const meta = {
-  title: "feedback/ReviewerFeedbackModal",
-  component: ReviewerFeedbackModal,
-  parameters: {
-    docs: {
-      description: {
-        component: "리뷰어 피드백 작성을 위한 모달 컴포넌트",
-      },
-    },
-    viewport: {
-      defaultViewport: "responsive",
-    },
-  },
-  args: {
-    isOpen: true,
-    onClose: () => {},
-    roomInfo: {
-      id: 1,
-      title: "React 프로젝트 코드 리뷰",
-      keywords: ["React", "TypeScript", "Styled-Components"],
-    },
-    reviewer: {
-      userId: 1,
-      username: "exampleUser",
-      link: "https://github.com/example/project/pull/1",
-      isReviewed: false,
-      isWrited: false,
-    },
-    modalType: "create" as FeedbackModalType,
-    buttonText: "피드백 작성",
-  },
-} satisfies Meta<typeof ReviewerFeedbackModal>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const SmallViewport: Story = {
-  parameters: {
-    viewport: {
-      defaultViewport: "mobile1",
-    },
-  },
-};
-
-export const MediumViewport: Story = {
-  parameters: {
-    viewport: {
-      defaultViewport: "tablet",
-    },
-  },
-};
-
-export const LargeViewport: Story = {
-  parameters: {
-    viewport: {
-      defaultViewport: "desktop",
-    },
-  },
-};
-
-export const EditMode: Story = {
-  args: {
-    modalType: "edit",
-    buttonText: "피드백 수정",
-  },
-};
-
-export const ViewMode: Story = {
-  args: {
-    modalType: "view",
-    buttonText: "피드백 확인",
-  },
-};
diff --git a/frontend/src/components/feedback/reviewerFeedbackModal/ReviewerFeedbackModal.tsx b/frontend/src/components/feedback/reviewerFeedbackModal/ReviewerFeedbackModal.tsx
deleted file mode 100644
index 7d13f76e7..000000000
--- a/frontend/src/components/feedback/reviewerFeedbackModal/ReviewerFeedbackModal.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { useReviewerFeedbackForm } from "@/hooks/feedback/useReviewerFeedbackForm";
-import Button from "@/components/common/button/Button";
-import Label from "@/components/common/label/Label";
-import { ModalProps } from "@/components/common/modal/Modal";
-import FeedbackCustomModal from "@/components/common/modal/feedbackCustomModal/FeedbackCustomModal";
-import ReviewerFeedbackForm from "@/components/feedback/feedbackForm/ReviewerFeedbackForm";
-import * as S from "@/components/feedback/reviewerFeedbackModal/ReviewerFeedbackModal.style";
-import { ReviewerInfo } from "@/@types/reviewer";
-import { RoomInfo } from "@/@types/roomInfo";
-import { theme } from "@/styles/theme";
-import { FeedbackModalType } from "@/utils/feedbackUtils";
-
-interface ReviewerFeedbackModalProps extends ModalProps {
-  roomInfo: Pick<RoomInfo, "id" | "title" | "keywords">;
-  reviewer: ReviewerInfo;
-  modalType: FeedbackModalType;
-  buttonText: string;
-}
-
-const ReviewerFeedbackModal = ({
-  isOpen,
-  onClose,
-  roomInfo,
-  reviewer,
-  modalType,
-  buttonText,
-}: ReviewerFeedbackModalProps) => {
-  const { formState, handleChange, isFormValid, handleSubmit, handleClose } =
-    useReviewerFeedbackForm(roomInfo.id, reviewer.username, reviewer.userId, modalType, onClose);
-
-  const displayedKeywords = roomInfo.keywords.filter((keyword) => keyword !== "");
-
-  return (
-    <FeedbackCustomModal isOpen={isOpen} onClose={handleClose}>
-      <S.FeedbackContainer>
-        <S.ModalType>
-          {modalType === "create" && "리뷰어 피드백 작성하기"}
-          {modalType === "edit" && "리뷰어 피드백 수정하기"}
-          {modalType === "view" && "리뷰어 피드백 확인하기"}
-        </S.ModalType>
-        <S.FeedbackContainerHeader>
-          <S.ModalTitle>{roomInfo.title}</S.ModalTitle>
-          <S.Keywords>
-            {displayedKeywords.length === 0 ? (
-              <S.NoKeywordText>지정된 키워드 없음</S.NoKeywordText>
-            ) : (
-              displayedKeywords.map((keyword) => (
-                <Label
-                  key={keyword}
-                  type="KEYWORD"
-                  text={keyword}
-                  size="semiSmall"
-                  backgroundColor={theme.COLOR.grey0}
-                />
-              ))
-            )}
-          </S.Keywords>
-        </S.FeedbackContainerHeader>
-
-        <ReviewerFeedbackForm formState={formState} onChange={handleChange} modalType={modalType} />
-
-        {modalType !== "view" && (
-          <S.ButtonWrapper>
-            <Button onClick={handleSubmit} disabled={!isFormValid}>
-              {buttonText}
-            </Button>
-          </S.ButtonWrapper>
-        )}
-      </S.FeedbackContainer>
-    </FeedbackCustomModal>
-  );
-};
-
-export default ReviewerFeedbackModal;
diff --git a/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx b/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
index 621eb06cf..ec876346a 100644
--- a/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
+++ b/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
@@ -1,38 +1,28 @@
-import { useState } from "react";
-import useModal from "@/hooks/common/useModal";
+import { useNavigate } from "react-router-dom";
 import { useFetchReviewer } from "@/hooks/queries/useFetchReviewer";
 import Button from "@/components/common/button/Button";
 import Icon from "@/components/common/icon/Icon";
-import ReviewerFeedbackModal from "@/components/feedback/reviewerFeedbackModal/ReviewerFeedbackModal";
 import * as S from "@/components/roomDetailPage/myReviewer/MyReviewer.style";
 import { ReviewerInfo } from "@/@types/reviewer";
 import { RoomInfo } from "@/@types/roomInfo";
 import { thinkingCharacter } from "@/assets";
 import MESSAGES from "@/constants/message";
 import { HoverStyledLink } from "@/styles/common";
-import { FeedbackTypeResult, getFeedbackType } from "@/utils/feedbackUtils";
+import { getFeedbackType } from "@/utils/feedbackUtils";
 
 interface MyReviewerProps {
   roomInfo: RoomInfo;
 }
 
 const MyReviewer = ({ roomInfo }: MyReviewerProps) => {
+  const navigate = useNavigate();
   const { data: reviewerData } = useFetchReviewer(roomInfo);
-  const { isModalOpen, handleOpenModal, handleCloseModal } = useModal();
-  const [selectedReviewer, setSelectedReviewer] = useState<ReviewerInfo | null>(null);
-  const [feedbackTypeResult, setFeedbackTypeResult] = useState<FeedbackTypeResult | null>(null);
-  const [loadingButtonId, setLoadingButtonId] = useState<number[]>([]);
-
-  // 피드백 모달 여는 함수
-  const handleOpenFeedbackModal = (reviewer: ReviewerInfo) => {
-    const feedbackType = getFeedbackType({
-      isReviewed: reviewer.isReviewed,
-      isWrited: reviewer.isWrited,
-      isClosed: roomInfo.roomStatus === "CLOSE",
+
+  // 피드백 페이지 이동 함수
+  const handleNavigateFeedbackPage = (reviewer: ReviewerInfo) => {
+    navigate(`/feedback/reviewer/${roomInfo.id}?username=${reviewer.username}`, {
+      state: { reviewer },
     });
-    setSelectedReviewer(reviewer);
-    setFeedbackTypeResult(feedbackType);
-    handleOpenModal();
   };
 
   // 피드백 여부 버튼 렌더링 함수
@@ -47,15 +37,15 @@ const MyReviewer = ({ roomInfo }: MyReviewerProps) => {
       return <p>리뷰어가 리뷰를 하지 않았어요</p>;
     }
 
-    if (roomInfo.roomStatus === "CLOSE" && !reviewer.isWrited) {
-      return <p>피드백을 작성하지 않았어요</p>;
-    }
+    // if (roomInfo.roomStatus === "CLOSE" && !reviewer.isWrited) {
+    //   return <p>피드백을 작성하지 않았어요</p>;
+    // }
 
     return reviewer.isReviewed ? (
       <Button
         size="xSmall"
-        onClick={() => handleOpenFeedbackModal(reviewer)}
         variant={reviewer.isReviewed ? "secondary" : "disable"}
+        onClick={() => handleNavigateFeedbackPage(reviewer)}
         disabled={!reviewer.isReviewed}
       >
         {buttonText}
@@ -106,22 +96,6 @@ const MyReviewer = ({ roomInfo }: MyReviewerProps) => {
   // 매칭 후 성공했을 때 보여줄 화면
   return (
     <>
-      {selectedReviewer && feedbackTypeResult && (
-        <ReviewerFeedbackModal
-          key={selectedReviewer.username}
-          isOpen={isModalOpen}
-          onClose={() => {
-            handleCloseModal();
-            setSelectedReviewer(null);
-            setFeedbackTypeResult(null);
-          }}
-          roomInfo={roomInfo}
-          reviewer={selectedReviewer}
-          modalType={feedbackTypeResult.modalType}
-          buttonText={feedbackTypeResult.buttonText}
-        />
-      )}
-
       <S.MyReviewerTable aria-label="나의 리뷰어 목록.">
         <S.MyReviewerTableHead>
           <S.MyReviewerTableRow>
diff --git a/frontend/src/hooks/feedback/useReviewerFeedbackForm.ts b/frontend/src/hooks/feedback/useReviewerFeedbackForm.ts
deleted file mode 100644
index 94780b05f..000000000
--- a/frontend/src/hooks/feedback/useReviewerFeedbackForm.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { useEffect, useState } from "react";
-import useMutateFeedback from "@/hooks/mutations/useMutateFeedback";
-import { useFetchReviewerFeedback } from "@/hooks/queries/useFetchFeedback";
-import { ReviewerFeedbackData } from "@/@types/feedback";
-import { FeedbackModalType } from "@/utils/feedbackUtils";
-
-const initialFormState: ReviewerFeedbackData = {
-  feedbackId: 0,
-  receiverId: 0,
-  evaluationPoint: 0,
-  feedbackKeywords: [],
-  feedbackText: "",
-};
-
-export const useReviewerFeedbackForm = (
-  roomId: number,
-  reviewerUsername: string,
-  receiverId: number,
-  modalType: FeedbackModalType,
-  onClose: () => void,
-) => {
-  const [formState, setFormState] = useState<ReviewerFeedbackData>(initialFormState);
-  const { postReviewerFeedbackMutation, putReviewerFeedbackMutation } = useMutateFeedback(roomId);
-
-  const { data: feedbackData } = useFetchReviewerFeedback({
-    roomId,
-    username: reviewerUsername,
-    enabled: modalType !== "create",
-  });
-
-  useEffect(() => {
-    if (modalType === "create") {
-      setFormState({ ...initialFormState, receiverId });
-    } else if (feedbackData) {
-      setFormState({ ...feedbackData, receiverId, feedbackId: feedbackData.feedbackId });
-    }
-  }, [modalType, feedbackData, receiverId]);
-
-  const handleChange = (
-    key: keyof ReviewerFeedbackData,
-    value: ReviewerFeedbackData[keyof ReviewerFeedbackData],
-  ) => {
-    if (modalType === "view") return;
-
-    if (key === "evaluationPoint") {
-      setFormState((prevState) => ({
-        ...prevState,
-        evaluationPoint: value as number,
-        feedbackKeywords: [],
-      }));
-    } else {
-      setFormState((prevState) => ({ ...prevState, [key]: value }));
-    }
-  };
-
-  const isFormValid = formState.evaluationPoint !== 0 && formState.feedbackKeywords.length > 0;
-
-  const handleSubmit = () => {
-    if (!isFormValid || modalType === "view") return;
-
-    const feedbackData = { ...formState };
-
-    if (modalType === "create") {
-      postReviewerFeedbackMutation.mutate(
-        { feedbackData },
-        {
-          onSuccess: () => {
-            onClose();
-          },
-        },
-      );
-    }
-
-    if (modalType === "edit") {
-      putReviewerFeedbackMutation.mutate(
-        { feedbackId: feedbackData.feedbackId, feedbackData },
-        {
-          onSuccess: () => {
-            onClose();
-          },
-        },
-      );
-    }
-  };
-
-  const handleClose = () => {
-    setFormState(initialFormState);
-    onClose();
-  };
-
-  return { formState, handleChange, isFormValid, handleSubmit, handleClose };
-};
diff --git a/frontend/src/pages/feedbackForm/ReviewerFeedbackPage.tsx b/frontend/src/pages/feedbackForm/ReviewerFeedbackPage.tsx
new file mode 100644
index 000000000..d1c6f296a
--- /dev/null
+++ b/frontend/src/pages/feedbackForm/ReviewerFeedbackPage.tsx
@@ -0,0 +1,40 @@
+import { useLocation, useParams } from "react-router-dom";
+import { useFetchReviewerFeedback } from "@/hooks/queries/useFetchFeedback";
+import { useFetchDetailRoomInfo } from "@/hooks/queries/useFetchRooms";
+import ReviewerFeedbackLayout from "@/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout";
+import { ReviewerFeedbackData } from "@/@types/feedback";
+import { ReviewerInfo } from "@/@types/reviewer";
+
+const ReviewerFeedbackPage = () => {
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location.search);
+
+  const roomId = Number(useParams().roomId);
+  const username = queryParams.get("username") || "";
+  const reviewer = location.state?.reviewer as ReviewerInfo;
+
+  const { data: roomInfo } = useFetchDetailRoomInfo(roomId);
+  const { data: feedbackData } = useFetchReviewerFeedback({
+    roomId,
+    username,
+  });
+
+  const initialFeedbackData: ReviewerFeedbackData = {
+    feedbackId: 0,
+    receiverId: reviewer.userId,
+    evaluationPoint: 0,
+    feedbackKeywords: [],
+    feedbackText: "",
+  };
+
+  return (
+    <ReviewerFeedbackLayout
+      feedbackType={feedbackData ? "edit" : "create"}
+      roomInfo={roomInfo}
+      reviewer={reviewer}
+      feedbackData={feedbackData || initialFeedbackData}
+    />
+  );
+};
+
+export default ReviewerFeedbackPage;
diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
index 638893541..edeb7f1a4 100644
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -1,6 +1,8 @@
 import PrivateRoute from "./components/routes/PrivateRoute";
 import CallbackPage from "./pages/callback/CallbackPage";
 import FeedbackPage from "./pages/feedback/FeedbackPage";
+import RevieweeFeedbackPage from "./pages/feedbackForm/RevieweeFeedbackPage";
+import ReviewerFeedbackPage from "./pages/feedbackForm/ReviewerFeedbackPage";
 import ProfilePage from "./pages/profile/ProfilePage";
 import RoomCreatePage from "./pages/roomForm/RoomCreatePage";
 // import RankingPage from "./pages/ranking/RankingPage";
@@ -64,6 +66,14 @@ const router = sentryCreateBrowserRouter([
             path: `feedback`,
             element: <FeedbackPage />,
           },
+          {
+            path: `feedback/reviewer/:roomId`,
+            element: <ReviewerFeedbackPage />,
+          },
+          {
+            path: `feedback/reviewee/:roomId`,
+            element: <RevieweeFeedbackPage />,
+          },
           {
             path: `profile`,
             element: <ProfilePage />,

From cb3a641562f470e6dd620c25ab208580a1279ba3 Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Sun, 3 Nov 2024 23:31:06 +0900
Subject: [PATCH 12/28] =?UTF-8?q?delete:=20=ED=94=BC=EB=93=9C=EB=B0=B1=20?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=8A=A4=ED=86=A0?=
 =?UTF-8?q?=EB=A6=AC=EB=B6=81=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RevieweeFeedbackLayout.stories.tsx        | 78 -------------------
 .../ReviewerFeedbackLayout.stories.tsx        | 78 -------------------
 2 files changed, 156 deletions(-)
 delete mode 100644 frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.stories.tsx
 delete mode 100644 frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.stories.tsx

diff --git a/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.stories.tsx b/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.stories.tsx
deleted file mode 100644
index 9f4dd26c1..000000000
--- a/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.stories.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-// import type { Meta, StoryObj } from "@storybook/react";
-// import RevieweeFeedbackModal from "@/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout";
-// import { FeedbackType } from "@/utils/feedbackUtils";
-
-// const meta = {
-//   title: "feedback/RevieweeFeedbackModal",
-//   component: RevieweeFeedbackModal,
-//   parameters: {
-//     docs: {
-//       description: {
-//         component: "리뷰이 피드백 작성을 위한 모달 컴포넌트",
-//       },
-//     },
-//     viewport: {
-//       defaultViewport: "responsive",
-//     },
-//   },
-//   args: {
-//     roomInfo: {
-//       id: 1,
-//       title: "React 프로젝트 코드 리뷰",
-//       keywords: ["React", "TypeScript", "Styled-Components"],
-//     },
-//     reviewee: {
-//       userId: 1,
-//       username: "exampleUser",
-//       link: "https://github.com/example/project/pull/1",
-//       isReviewed: false,
-//       isWrited: false,
-//     },
-//     modalType: "create" as FeedbackType,
-//     buttonText: "피드백 작성",
-//   },
-// } satisfies Meta<typeof RevieweeFeedbackModal>;
-
-// export default meta;
-// type Story = StoryObj<typeof meta>;
-
-// export const Default: Story = {};
-
-// export const SmallViewport: Story = {
-//   parameters: {
-//     viewport: {
-//       defaultViewport: "mobile1",
-//     },
-//   },
-// };
-
-// export const MediumViewport: Story = {
-//   parameters: {
-//     viewport: {
-//       defaultViewport: "tablet",
-//     },
-//   },
-// };
-
-// export const LargeViewport: Story = {
-//   parameters: {
-//     viewport: {
-//       defaultViewport: "desktop",
-//     },
-//   },
-// };
-
-// export const EditMode: Story = {
-//   args: {
-//     modalType: "edit",
-//     buttonText: "피드백 수정",
-//   },
-// };
-
-// export const ViewMode: Story = {
-//   args: {
-//     modalType: "view",
-//     buttonText: "피드백 확인",
-//   },
-// };
-export default {};
diff --git a/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.stories.tsx b/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.stories.tsx
deleted file mode 100644
index a215d4111..000000000
--- a/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.stories.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-// import type { Meta, StoryObj } from "@storybook/react";
-// import ReviewerFeedbackModal from "@/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout";
-// import { FeedbackType } from "@/utils/feedbackUtils";
-
-// const meta = {
-//   title: "feedback/ReviewerFeedbackModal",
-//   component: ReviewerFeedbackModal,
-//   parameters: {
-//     docs: {
-//       description: {
-//         component: "리뷰어 피드백 작성을 위한 모달 컴포넌트",
-//       },
-//     },
-//     viewport: {
-//       defaultViewport: "responsive",
-//     },
-//   },
-//   args: {
-//     roomInfo: {
-//       id: 1,
-//       title: "React 프로젝트 코드 리뷰",
-//       keywords: ["React", "TypeScript", "Styled-Components"],
-//     },
-//     reviewer: {
-//       userId: 1,
-//       username: "exampleUser",
-//       link: "https://github.com/example/project/pull/1",
-//       isReviewed: false,
-//       isWrited: false,
-//     },
-//     modalType: "create" as FeedbackType,
-//     buttonText: "피드백 작성",
-//   },
-// } satisfies Meta<typeof ReviewerFeedbackModal>;
-
-// export default meta;
-// type Story = StoryObj<typeof meta>;
-
-// export const Default: Story = {};
-
-// export const SmallViewport: Story = {
-//   parameters: {
-//     viewport: {
-//       defaultViewport: "mobile1",
-//     },
-//   },
-// };
-
-// export const MediumViewport: Story = {
-//   parameters: {
-//     viewport: {
-//       defaultViewport: "tablet",
-//     },
-//   },
-// };
-
-// export const LargeViewport: Story = {
-//   parameters: {
-//     viewport: {
-//       defaultViewport: "desktop",
-//     },
-//   },
-// };
-
-// export const EditMode: Story = {
-//   args: {
-//     modalType: "edit",
-//     buttonText: "피드백 수정",
-//   },
-// };
-
-// export const ViewMode: Story = {
-//   args: {
-//     modalType: "view",
-//     buttonText: "피드백 확인",
-//   },
-// };
-export default {};

From 556338578a2cdf3e2d5cad0c1192dca052c1b64b Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Mon, 4 Nov 2024 01:13:12 +0900
Subject: [PATCH 13/28] =?UTF-8?q?feat:=20button=20=EC=95=84=EC=9B=83?=
 =?UTF-8?q?=EB=9D=BC=EC=9D=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/button/Button.style.ts  | 67 +++++++++++--------
 .../src/components/common/button/Button.tsx   |  7 +-
 2 files changed, 46 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/common/button/Button.style.ts b/frontend/src/components/common/button/Button.style.ts
index 170e5e3ad..058b88795 100644
--- a/frontend/src/components/common/button/Button.style.ts
+++ b/frontend/src/components/common/button/Button.style.ts
@@ -1,22 +1,22 @@
 import { ButtonSize, ButtonVariant } from "./Button";
 import { css, styled } from "styled-components";
+import { ThemeType } from "@/styles/theme";
 
 export const ButtonContainer = styled.button<{
   $variant: ButtonVariant;
   $size: ButtonSize;
+  $outline?: boolean;
 }>`
   display: flex;
   align-items: center;
   justify-content: center;
-
-  color: ${({ theme }) => theme.COLOR.white};
   text-align: center;
 
-  ${(props) => variantStyles[props.$variant]}
-  ${(props) => sizeStyles[props.$size]}
+  ${({ $variant, $outline }) => variantStyles($variant, $outline)}
+  ${({ $size }) => sizeStyles[$size]}
 
-  ${(props) =>
-    props.$variant !== "disable"
+  ${({ $variant }) =>
+    $variant !== "disable"
       ? css`
           &:hover {
             cursor: pointer;
@@ -28,27 +28,40 @@ export const ButtonContainer = styled.button<{
         `}
 `;
 
-const variantStyles = {
-  default: css`
-    color: ${({ theme }) => theme.COLOR.black};
-    background-color: ${({ theme }) => theme.COLOR.white};
-  `,
-  primary: css`
-    background-color: ${({ theme }) => theme.COLOR.primary2};
-  `,
-  secondary: css`
-    background-color: ${({ theme }) => theme.COLOR.secondary};
-  `,
-  disable: css`
-    background-color: ${({ theme }) => theme.COLOR.grey1};
-  `,
-  confirm: css`
-    color: ${({ theme }) => theme.COLOR.black};
-    background-color: ${({ theme }) => theme.COLOR.lightGrass};
-  `,
-  error: css`
-    background-color: ${({ theme }) => theme.COLOR.error};
-  `,
+const variantStyles = (variant: ButtonVariant, outline?: boolean) => {
+  return css`
+    ${outline
+      ? css`
+          color: ${({ theme }) => getColor(theme, variant)};
+          background-color: ${({ theme }) => theme.COLOR.white};
+          border: 2px solid ${({ theme }) => getColor(theme, variant)};
+        `
+      : css`
+          color: ${({ theme }) =>
+            variant === "default" || variant === "confirm" ? theme.COLOR.black : theme.COLOR.white};
+          background-color: ${({ theme }) => getColor(theme, variant)};
+          border: 2px solid ${({ theme }) => getColor(theme, variant)};
+        `}
+  `;
+};
+
+const getColor = (theme: ThemeType, variant: ButtonVariant) => {
+  switch (variant) {
+    case "default":
+      return theme.COLOR.black;
+    case "primary":
+      return theme.COLOR.primary2;
+    case "secondary":
+      return theme.COLOR.secondary;
+    case "disable":
+      return theme.COLOR.grey1;
+    case "confirm":
+      return theme.COLOR.lightGrass;
+    case "error":
+      return theme.COLOR.error;
+    default:
+      return theme.COLOR.black;
+  }
 };
 
 const sizeStyles = {
diff --git a/frontend/src/components/common/button/Button.tsx b/frontend/src/components/common/button/Button.tsx
index 0b8bf95f6..d74efe6cc 100644
--- a/frontend/src/components/common/button/Button.tsx
+++ b/frontend/src/components/common/button/Button.tsx
@@ -7,15 +7,20 @@ export type ButtonSize = "xSmall" | "small" | "medium" | "large";
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: ButtonVariant;
   size?: ButtonSize;
+  outline?: boolean;
 }
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ children, variant = "primary", size = "medium", disabled = false, ...rest }, ref) => {
+  (
+    { children, variant = "primary", size = "medium", disabled = false, outline = false, ...rest },
+    ref,
+  ) => {
     return (
       <S.ButtonContainer
         ref={ref}
         $variant={disabled ? "disable" : variant}
         $size={size}
+        $outline={outline}
         disabled={disabled}
         tabIndex={disabled ? -1 : 0}
         {...rest}

From 0222075f68bd971252097b3e6c2ec5b46799f10f Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Mon, 4 Nov 2024 01:14:15 +0900
Subject: [PATCH 14/28] =?UTF-8?q?feat:=20=EC=9C=A0=ED=9A=A8=ED=95=98?=
 =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EC=9D=84=20=EB=95=8C=20form=20=ED=95=84?=
 =?UTF-8?q?=EB=93=9C=20=EC=83=89=EC=83=81=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../feedbackForm/FeedbackForm.style.ts        | 11 ++----
 .../feedbackForm/RevieweeFeedbackForm.tsx     | 18 +++++++--
 .../feedbackForm/ReviewerFeedbackForm.tsx     | 14 +++++--
 .../RevieweeFeedbackLayout.style.ts           |  4 +-
 .../RevieweeFeedbackLayout.tsx                | 37 +++++++++++--------
 .../ReviewerFeedbackLayout.style.ts           | 23 ++----------
 .../ReviewerFeedbackLayout.tsx                | 33 +++++++++--------
 7 files changed, 73 insertions(+), 67 deletions(-)

diff --git a/frontend/src/components/feedback/feedbackForm/FeedbackForm.style.ts b/frontend/src/components/feedback/feedbackForm/FeedbackForm.style.ts
index 778a8b412..166dede62 100644
--- a/frontend/src/components/feedback/feedbackForm/FeedbackForm.style.ts
+++ b/frontend/src/components/feedback/feedbackForm/FeedbackForm.style.ts
@@ -1,13 +1,9 @@
 import styled from "styled-components";
 
-interface ModalQuestionProps {
-  required?: boolean;
-}
-
 export const FeedbackFormContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 4rem;
+  gap: 8rem;
 `;
 
 export const ItemContainer = styled.fieldset`
@@ -23,13 +19,12 @@ export const QuestionContainer = styled.div`
   align-items: center;
 `;
 
-export const ModalQuestion = styled.legend<ModalQuestionProps>`
+export const ModalQuestion = styled.legend<{ $isInvalid?: boolean }>`
   font: ${({ theme }) => theme.TEXT.small_bold};
-  color: ${({ theme }) => theme.COLOR.grey4};
+  color: ${({ theme, $isInvalid }) => ($isInvalid ? theme.COLOR.error : theme.COLOR.grey4)};
 `;
 
 export const Required = styled.span`
-  padding-top: 0.5rem;
   font: ${({ theme }) => theme.TEXT.xSmall};
   color: ${({ theme }) => theme.COLOR.error};
 `;
diff --git a/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx b/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx
index 84e4cb1ed..fb74be05d 100644
--- a/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx
+++ b/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx
@@ -18,6 +18,7 @@ interface RevieweeFeedbackFormProps {
     value: RevieweeFeedbackData[keyof RevieweeFeedbackData],
   ) => void;
   feedbackType: FeedbackType;
+  isClicked: boolean;
 }
 
 const getDevelopKeywordOptions = (selectedEvaluationId: number | undefined) => {
@@ -27,12 +28,19 @@ const getDevelopKeywordOptions = (selectedEvaluationId: number | undefined) => {
   return DEVELOP_GOOD_KEYWORD_OPTIONS;
 };
 
-const RevieweeFeedbackForm = ({ formState, onChange, feedbackType }: RevieweeFeedbackFormProps) => {
+const RevieweeFeedbackForm = ({
+  formState,
+  onChange,
+  feedbackType,
+  isClicked,
+}: RevieweeFeedbackFormProps) => {
   return (
     <S.FeedbackFormContainer>
       <S.ItemContainer>
         <S.QuestionContainer>
-          <S.ModalQuestion>리뷰이의 개발 역량 향상을 위해 코드를 평가 해주세요.</S.ModalQuestion>
+          <S.ModalQuestion $isInvalid={isClicked && formState.evaluationPoint === 0}>
+            리뷰이의 개발 역량 향상을 위해 코드를 평가 해주세요.
+          </S.ModalQuestion>
           <S.Required>*필수입력</S.Required>
         </S.QuestionContainer>
         <EvaluationPointBar
@@ -44,7 +52,9 @@ const RevieweeFeedbackForm = ({ formState, onChange, feedbackType }: RevieweeFee
 
       <S.ItemContainer>
         <S.QuestionContainer>
-          <S.ModalQuestion>위와 같이 선택한 이유를 알려주세요. (1개 이상 선택)</S.ModalQuestion>
+          <S.ModalQuestion $isInvalid={isClicked && formState.feedbackKeywords.length === 0}>
+            위와 같이 선택한 이유를 알려주세요. (복수선택 가능)
+          </S.ModalQuestion>
           <S.Required>*필수입력</S.Required>
         </S.QuestionContainer>
         <KeywordOptionButton
@@ -58,7 +68,7 @@ const RevieweeFeedbackForm = ({ formState, onChange, feedbackType }: RevieweeFee
 
       <S.ItemContainer>
         <S.QuestionContainer>
-          <S.ModalQuestion>리뷰이의 코드를 추천하시나요? (비공개 항목)</S.ModalQuestion>
+          <S.ModalQuestion>[비공개] 리뷰이의 코드를 추천하시나요?</S.ModalQuestion>
           <S.Required>*필수입력</S.Required>
         </S.QuestionContainer>
         <RecommendationPointBar
diff --git a/frontend/src/components/feedback/feedbackForm/ReviewerFeedbackForm.tsx b/frontend/src/components/feedback/feedbackForm/ReviewerFeedbackForm.tsx
index 691317560..11fa589de 100644
--- a/frontend/src/components/feedback/feedbackForm/ReviewerFeedbackForm.tsx
+++ b/frontend/src/components/feedback/feedbackForm/ReviewerFeedbackForm.tsx
@@ -18,6 +18,7 @@ interface ReviewerFeedbackFormProps {
     value: ReviewerFeedbackData[keyof ReviewerFeedbackData],
   ) => void;
   feedbackType: FeedbackType;
+  isClicked: boolean;
 }
 
 const getSocialKeywordOptions = (selectedEvaluationId: number | undefined) => {
@@ -27,12 +28,17 @@ const getSocialKeywordOptions = (selectedEvaluationId: number | undefined) => {
   return SOCIAL_GOOD_KEYWORD_OPTIONS;
 };
 
-const ReviewerFeedbackForm = ({ formState, onChange, feedbackType }: ReviewerFeedbackFormProps) => {
+const ReviewerFeedbackForm = ({
+  formState,
+  onChange,
+  feedbackType,
+  isClicked,
+}: ReviewerFeedbackFormProps) => {
   return (
     <S.FeedbackFormContainer>
       <S.ItemContainer>
         <S.QuestionContainer>
-          <S.ModalQuestion>
+          <S.ModalQuestion $isInvalid={isClicked && formState.evaluationPoint === 0}>
             리뷰어의 소프트 스킬 역량 향상을 위해 피드백을 해주세요.
           </S.ModalQuestion>
           <S.Required>*필수입력</S.Required>
@@ -47,7 +53,9 @@ const ReviewerFeedbackForm = ({ formState, onChange, feedbackType }: ReviewerFee
 
       <S.ItemContainer>
         <S.QuestionContainer>
-          <S.ModalQuestion>위와 같이 선택한 이유를 알려주세요. (1개 이상 선택)</S.ModalQuestion>
+          <S.ModalQuestion $isInvalid={isClicked && formState.feedbackKeywords.length === 0}>
+            위와 같이 선택한 이유를 알려주세요. (복수선택 가능)
+          </S.ModalQuestion>
           <S.Required>*필수입력</S.Required>
         </S.QuestionContainer>
         <KeywordOptionButton
diff --git a/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.style.ts b/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.style.ts
index 37375778e..a0dddc355 100644
--- a/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.style.ts
+++ b/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.style.ts
@@ -6,7 +6,7 @@ export const FeedbackContainer = styled.div`
   gap: 1.6rem;
 
   width: 100%;
-  min-width: 375px;
+  min-width: 335px;
   max-width: 700px;
   margin: auto;
 `;
@@ -34,8 +34,10 @@ export const Keywords = styled.div`
 
 export const ButtonWrapper = styled.div`
   display: flex;
+  gap: 2rem;
   align-items: center;
   justify-content: center;
+
   margin-top: 1rem;
 `;
 
diff --git a/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx b/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx
index b132ce0b5..838f9b0d2 100644
--- a/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx
+++ b/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx
@@ -37,12 +37,13 @@ const RevieweeFeedbackLayout = ({
   feedbackData,
 }: RevieweeFeedbackProps) => {
   const navigate = useNavigate();
-  const { postRevieweeFeedbackMutation, putRevieweeFeedbackMutation } = useMutateFeedback(
-    roomInfo.id,
-  );
   const [formState, setFormState] = useState<RevieweeFeedbackData>(() =>
     getInitialFormState(reviewee, feedbackData),
   );
+  const { postRevieweeFeedbackMutation, putRevieweeFeedbackMutation } = useMutateFeedback(
+    roomInfo.id,
+  );
+  const [isClicked, setIsClicked] = useState(false);
 
   const buttonText = feedbackType === "create" ? "작성하기" : "수정하기";
 
@@ -83,7 +84,8 @@ const RevieweeFeedbackLayout = ({
   const isFormValid = formState.evaluationPoint !== 0 && formState.feedbackKeywords.length > 0;
 
   const handleSubmit = () => {
-    if (!isFormValid || feedbackType === "view") return;
+    setIsClicked(true);
+    if (feedbackType === "view") return;
 
     const formattedFormState = {
       ...formState,
@@ -116,12 +118,13 @@ const RevieweeFeedbackLayout = ({
   return (
     <>
       <S.FeedbackContainer>
-        <S.PageType>
-          {feedbackType === "create" && "리뷰어 피드백 작성하기"}
-          {feedbackType === "edit" && "리뷰어 피드백 수정하기"}
-          {feedbackType === "view" && "리뷰어 피드백 확인하기"}
-        </S.PageType>
         <S.FeedbackContainerHeader>
+          <S.PageType>
+            <>{reviewee.username} </>
+            {feedbackType === "create" && "리뷰이 피드백 작성하기"}
+            {feedbackType === "edit" && "리뷰이 피드백 수정하기"}
+            {feedbackType === "view" && "리뷰이 피드백 확인하기"}
+          </S.PageType>
           <S.PageTitle>{roomInfo.title}</S.PageTitle>
           <S.Keywords>
             {displayedKeywords.length === 0 ? (
@@ -141,18 +144,20 @@ const RevieweeFeedbackLayout = ({
         </S.FeedbackContainerHeader>
 
         <RevieweeFeedbackForm
+          isClicked={isClicked}
           formState={formState}
           onChange={handleChange}
           feedbackType={feedbackType}
         />
 
-        {feedbackType !== "view" && (
-          <S.ButtonWrapper>
-            <Button onClick={handleSubmit} disabled={!isFormValid}>
-              {buttonText}
-            </Button>
-          </S.ButtonWrapper>
-        )}
+        <S.ButtonWrapper>
+          <Button onClick={() => navigate(-1)} type="button" variant="primary" outline={true}>
+            뒤로가기
+          </Button>
+          <Button onClick={handleSubmit} disabled={!isFormValid}>
+            {buttonText}
+          </Button>
+        </S.ButtonWrapper>
       </S.FeedbackContainer>
     </>
   );
diff --git a/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.style.ts b/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.style.ts
index 1beb6222a..0f94a4f37 100644
--- a/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.style.ts
+++ b/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.style.ts
@@ -1,16 +1,12 @@
 import styled from "styled-components";
 
-interface ModalQuestionProps {
-  required?: boolean;
-}
-
 export const FeedbackContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 1.6rem;
 
   width: 100%;
-  min-width: 375px;
+  min-width: 335px;
   max-width: 700px;
   margin: auto;
 `;
@@ -42,25 +38,12 @@ export const ItemContainer = styled.div`
   gap: 0.8rem;
 `;
 
-export const PageQuestion = styled.p<ModalQuestionProps>`
-  font: ${({ theme }) => theme.TEXT.small};
-  font-weight: 600;
-
-  ${({ required, theme }) =>
-    required &&
-    `
-    &::after {
-      content: "*";
-      color: ${theme.COLOR.error};
-      margin-left: 4px;
-    }
-  `}
-`;
-
 export const ButtonWrapper = styled.div`
   display: flex;
+  gap: 2rem;
   align-items: center;
   justify-content: center;
+
   margin-top: 1rem;
 `;
 
diff --git a/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx b/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx
index 4784f7bb7..7a2f0aa23 100644
--- a/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx
+++ b/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx
@@ -42,6 +42,7 @@ const ReviewerFeedbackLayout = ({
   const [formState, setFormState] = useState<ReviewerFeedbackData>(() =>
     getInitialFormState(reviewer, feedbackData),
   );
+  const [isClicked, setIsClicked] = useState(false);
 
   const buttonText = feedbackType === "create" ? "작성하기" : "수정하기";
 
@@ -78,10 +79,9 @@ const ReviewerFeedbackLayout = ({
     }
   };
 
-  const isFormValid = formState.evaluationPoint !== 0 && formState.feedbackKeywords.length > 0;
-
   const handleSubmit = () => {
-    if (!isFormValid || feedbackType === "view") return;
+    setIsClicked(true);
+    if (feedbackType === "view") return;
 
     const formattedFormState = {
       ...formState,
@@ -114,12 +114,13 @@ const ReviewerFeedbackLayout = ({
   return (
     <>
       <S.FeedbackContainer>
-        <S.PageType>
-          {feedbackType === "create" && "리뷰어 피드백 작성하기"}
-          {feedbackType === "edit" && "리뷰어 피드백 수정하기"}
-          {feedbackType === "view" && "리뷰어 피드백 확인하기"}
-        </S.PageType>
         <S.FeedbackContainerHeader>
+          <S.PageType>
+            <>{reviewer.username} </>
+            {feedbackType === "create" && "리뷰어 피드백 작성하기"}
+            {feedbackType === "edit" && "리뷰어 피드백 수정하기"}
+            {feedbackType === "view" && "리뷰어 피드백 확인하기"}
+          </S.PageType>
           <S.PageTitle>{roomInfo.title}</S.PageTitle>
           <S.Keywords>
             {displayedKeywords.length === 0 ? (
@@ -139,18 +140,20 @@ const ReviewerFeedbackLayout = ({
         </S.FeedbackContainerHeader>
 
         <ReviewerFeedbackForm
+          isClicked={isClicked}
           formState={formState}
           onChange={handleChange}
           feedbackType={feedbackType}
         />
 
-        {feedbackType !== "view" && (
-          <S.ButtonWrapper>
-            <Button onClick={handleSubmit} disabled={!isFormValid}>
-              {buttonText}
-            </Button>
-          </S.ButtonWrapper>
-        )}
+        <S.ButtonWrapper>
+          <Button onClick={() => navigate(-1)} type="button" variant="secondary" outline={true}>
+            뒤로가기
+          </Button>
+          <Button onClick={handleSubmit} variant="secondary">
+            {buttonText}
+          </Button>
+        </S.ButtonWrapper>
       </S.FeedbackContainer>
     </>
   );

From 48119159dc315e75d619a54bee906af42812d69c Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Mon, 4 Nov 2024 01:38:38 +0900
Subject: [PATCH 15/28] =?UTF-8?q?refactor:=20=EC=B4=88=EA=B8=B0=ED=99=94?=
 =?UTF-8?q?=20=EA=B0=92=20=EC=A0=9C=EA=B1=B0,=20enabled=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RevieweeFeedbackLayout.tsx                | 37 +++++++------------
 .../ReviewerFeedbackLayout.tsx                | 34 +++++++----------
 .../src/hooks/queries/useFetchFeedback.ts     |  9 +++--
 .../feedbackForm/RevieweeFeedbackPage.tsx     | 13 +------
 .../feedbackForm/ReviewerFeedbackPage.tsx     | 12 +-----
 frontend/src/utils/feedbackUtils.ts           |  6 +--
 6 files changed, 39 insertions(+), 72 deletions(-)

diff --git a/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx b/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx
index 838f9b0d2..35033a334 100644
--- a/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx
+++ b/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx
@@ -14,20 +14,20 @@ import { FeedbackType } from "@/utils/feedbackUtils";
 interface RevieweeFeedbackProps {
   feedbackType: FeedbackType;
   roomInfo: Pick<RoomInfo, "id" | "title" | "keywords">;
-  reviewee: ReviewerInfo;
-  feedbackData: RevieweeFeedbackData;
+  reviewee?: ReviewerInfo;
+  feedbackData?: RevieweeFeedbackData;
 }
 
 const getInitialFormState = (
-  reviewee: ReviewerInfo,
-  data: RevieweeFeedbackData,
+  reviewee?: ReviewerInfo,
+  feedbackData?: RevieweeFeedbackData,
 ): RevieweeFeedbackData => ({
-  feedbackId: data.feedbackId || 0,
-  receiverId: reviewee.userId,
-  evaluationPoint: data.evaluationPoint || 0,
-  feedbackKeywords: data.feedbackKeywords || [],
-  feedbackText: data.feedbackText || "",
-  recommendationPoint: data.recommendationPoint || 0,
+  feedbackId: feedbackData?.feedbackId || 0,
+  receiverId: reviewee?.userId || 0,
+  evaluationPoint: feedbackData?.evaluationPoint || 0,
+  feedbackKeywords: feedbackData?.feedbackKeywords || [],
+  feedbackText: feedbackData?.feedbackText || "",
+  recommendationPoint: feedbackData?.recommendationPoint || 0,
 });
 
 const RevieweeFeedbackLayout = ({
@@ -50,19 +50,10 @@ const RevieweeFeedbackLayout = ({
   const displayedKeywords = roomInfo.keywords.filter((keyword) => keyword !== "");
 
   useEffect(() => {
-    if (feedbackType === "create") {
-      setFormState({
-        feedbackId: 0,
-        receiverId: reviewee.userId,
-        evaluationPoint: 0,
-        feedbackKeywords: [],
-        feedbackText: "",
-        recommendationPoint: 0,
-      });
-    } else {
-      setFormState(feedbackData);
+    if (feedbackData) {
+      setFormState(getInitialFormState(reviewee, feedbackData));
     }
-  }, [feedbackType, feedbackData, reviewee.userId]);
+  }, [reviewee, feedbackData]);
 
   const handleChange = (
     key: keyof RevieweeFeedbackData,
@@ -120,7 +111,7 @@ const RevieweeFeedbackLayout = ({
       <S.FeedbackContainer>
         <S.FeedbackContainerHeader>
           <S.PageType>
-            <>{reviewee.username} </>
+            <>{reviewee?.username} </>
             {feedbackType === "create" && "리뷰이 피드백 작성하기"}
             {feedbackType === "edit" && "리뷰이 피드백 수정하기"}
             {feedbackType === "view" && "리뷰이 피드백 확인하기"}
diff --git a/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx b/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx
index 7a2f0aa23..95f68071c 100644
--- a/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx
+++ b/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx
@@ -14,19 +14,19 @@ import { FeedbackType } from "@/utils/feedbackUtils";
 interface ReviewerFeedbackProps {
   feedbackType: FeedbackType;
   roomInfo: Pick<RoomInfo, "id" | "title" | "keywords">;
-  reviewer: ReviewerInfo;
-  feedbackData: ReviewerFeedbackData;
+  reviewer?: ReviewerInfo;
+  feedbackData?: ReviewerFeedbackData;
 }
 
 const getInitialFormState = (
-  reviewer: ReviewerInfo,
-  data: ReviewerFeedbackData,
+  reviewer?: ReviewerInfo,
+  feedbackData?: ReviewerFeedbackData,
 ): ReviewerFeedbackData => ({
-  feedbackId: data.feedbackId || 0,
-  receiverId: reviewer.userId,
-  evaluationPoint: data.evaluationPoint || 0,
-  feedbackKeywords: data.feedbackKeywords || [],
-  feedbackText: data.feedbackText || "",
+  feedbackId: feedbackData?.feedbackId || 0,
+  receiverId: reviewer?.userId || 0,
+  evaluationPoint: feedbackData?.evaluationPoint || 0,
+  feedbackKeywords: feedbackData?.feedbackKeywords || [],
+  feedbackText: feedbackData?.feedbackText || "",
 });
 
 const ReviewerFeedbackLayout = ({
@@ -49,18 +49,10 @@ const ReviewerFeedbackLayout = ({
   const displayedKeywords = roomInfo.keywords.filter((keyword) => keyword !== "");
 
   useEffect(() => {
-    if (feedbackType === "create") {
-      setFormState({
-        feedbackId: 0,
-        receiverId: reviewer.userId,
-        evaluationPoint: 0,
-        feedbackKeywords: [],
-        feedbackText: "",
-      });
-    } else {
-      setFormState(feedbackData);
+    if (feedbackData) {
+      setFormState(getInitialFormState(reviewer, feedbackData));
     }
-  }, [feedbackType, feedbackData, reviewer.userId]);
+  }, [reviewer, feedbackData]);
 
   const handleChange = (
     key: keyof ReviewerFeedbackData,
@@ -116,7 +108,7 @@ const ReviewerFeedbackLayout = ({
       <S.FeedbackContainer>
         <S.FeedbackContainerHeader>
           <S.PageType>
-            <>{reviewer.username} </>
+            <>{reviewer?.username} </>
             {feedbackType === "create" && "리뷰어 피드백 작성하기"}
             {feedbackType === "edit" && "리뷰어 피드백 수정하기"}
             {feedbackType === "view" && "리뷰어 피드백 확인하기"}
diff --git a/frontend/src/hooks/queries/useFetchFeedback.ts b/frontend/src/hooks/queries/useFetchFeedback.ts
index 2f99dd9d6..9b729086b 100644
--- a/frontend/src/hooks/queries/useFetchFeedback.ts
+++ b/frontend/src/hooks/queries/useFetchFeedback.ts
@@ -10,6 +10,7 @@ import QUERY_KEYS from "@/apis/queryKeys";
 interface UseFetchFeedbackProps {
   roomId: number;
   username: string;
+  enabled: boolean;
 }
 
 export const useFetchReceivedFeedback = (enabled: boolean) => {
@@ -29,19 +30,19 @@ export const useFetchDeliveredFeedback = (enabled: boolean) => {
 };
 
 // 리뷰어 -> 리뷰이
-export const useFetchRevieweeFeedback = ({ roomId, username }: UseFetchFeedbackProps) => {
+export const useFetchRevieweeFeedback = ({ roomId, username, enabled }: UseFetchFeedbackProps) => {
   return useQuery({
     queryKey: [QUERY_KEYS.REVIEWEE_FEEDBACK, roomId.toString(), username],
     queryFn: () => getRevieweeFeedback(roomId, username),
-    enabled: !!roomId && !!username,
+    enabled: enabled && !!roomId && !!username,
   });
 };
 
 // 리뷰이 -> 리뷰어
-export const useFetchReviewerFeedback = ({ roomId, username }: UseFetchFeedbackProps) => {
+export const useFetchReviewerFeedback = ({ roomId, username, enabled }: UseFetchFeedbackProps) => {
   return useQuery({
     queryKey: [QUERY_KEYS.REVIEWER_FEEDBACK, roomId.toString(), username],
     queryFn: () => getReviewerFeedback(roomId, username),
-    enabled: !!roomId && !!username,
+    enabled: enabled && !!roomId && !!username,
   });
 };
diff --git a/frontend/src/pages/feedbackForm/RevieweeFeedbackPage.tsx b/frontend/src/pages/feedbackForm/RevieweeFeedbackPage.tsx
index 9655c59dc..40340fa82 100644
--- a/frontend/src/pages/feedbackForm/RevieweeFeedbackPage.tsx
+++ b/frontend/src/pages/feedbackForm/RevieweeFeedbackPage.tsx
@@ -2,7 +2,6 @@ import { useLocation, useParams } from "react-router-dom";
 import { useFetchRevieweeFeedback } from "@/hooks/queries/useFetchFeedback";
 import { useFetchDetailRoomInfo } from "@/hooks/queries/useFetchRooms";
 import RevieweeFeedbackLayout from "@/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout";
-import { RevieweeFeedbackData } from "@/@types/feedback";
 import { ReviewerInfo } from "@/@types/reviewer";
 
 const RevieweeFeedbackPage = () => {
@@ -17,23 +16,15 @@ const RevieweeFeedbackPage = () => {
   const { data: feedbackData } = useFetchRevieweeFeedback({
     roomId,
     username,
+    enabled: reviewee.isWrited,
   });
 
-  const initialFeedbackData: RevieweeFeedbackData = {
-    feedbackId: 0,
-    receiverId: 0,
-    evaluationPoint: 0,
-    feedbackKeywords: [],
-    feedbackText: "",
-    recommendationPoint: 0,
-  };
-
   return (
     <RevieweeFeedbackLayout
       feedbackType={feedbackData ? "edit" : "create"}
       roomInfo={roomInfo}
       reviewee={reviewee}
-      feedbackData={feedbackData || initialFeedbackData}
+      feedbackData={feedbackData}
     />
   );
 };
diff --git a/frontend/src/pages/feedbackForm/ReviewerFeedbackPage.tsx b/frontend/src/pages/feedbackForm/ReviewerFeedbackPage.tsx
index d1c6f296a..8103ec42d 100644
--- a/frontend/src/pages/feedbackForm/ReviewerFeedbackPage.tsx
+++ b/frontend/src/pages/feedbackForm/ReviewerFeedbackPage.tsx
@@ -2,7 +2,6 @@ import { useLocation, useParams } from "react-router-dom";
 import { useFetchReviewerFeedback } from "@/hooks/queries/useFetchFeedback";
 import { useFetchDetailRoomInfo } from "@/hooks/queries/useFetchRooms";
 import ReviewerFeedbackLayout from "@/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout";
-import { ReviewerFeedbackData } from "@/@types/feedback";
 import { ReviewerInfo } from "@/@types/reviewer";
 
 const ReviewerFeedbackPage = () => {
@@ -17,22 +16,15 @@ const ReviewerFeedbackPage = () => {
   const { data: feedbackData } = useFetchReviewerFeedback({
     roomId,
     username,
+    enabled: reviewer.isWrited,
   });
 
-  const initialFeedbackData: ReviewerFeedbackData = {
-    feedbackId: 0,
-    receiverId: reviewer.userId,
-    evaluationPoint: 0,
-    feedbackKeywords: [],
-    feedbackText: "",
-  };
-
   return (
     <ReviewerFeedbackLayout
       feedbackType={feedbackData ? "edit" : "create"}
       roomInfo={roomInfo}
       reviewer={reviewer}
-      feedbackData={feedbackData || initialFeedbackData}
+      feedbackData={feedbackData}
     />
   );
 };
diff --git a/frontend/src/utils/feedbackUtils.ts b/frontend/src/utils/feedbackUtils.ts
index 12181a4f9..ac2bbe016 100644
--- a/frontend/src/utils/feedbackUtils.ts
+++ b/frontend/src/utils/feedbackUtils.ts
@@ -20,9 +20,9 @@ export const getFeedbackType = ({
   if (!isReviewed) {
     return { modalType: "create", buttonText: "피드백 작성하기" };
   }
-  if (isClosed) {
-    return { modalType: "view", buttonText: "피드백 확인하기" };
-  }
+  // if (isClosed) {
+  //   return { modalType: "view", buttonText: "피드백 확인하기" };
+  // }
   if (isWrited) {
     return { modalType: "edit", buttonText: "피드백 수정하기" };
   }

From 0934ae24b9789f722798726e46f42c5cb9ee97ba Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Mon, 4 Nov 2024 02:16:42 +0900
Subject: [PATCH 16/28] =?UTF-8?q?feat:=20=EB=B8=94=EB=9F=AC=EC=B2=98?=
 =?UTF-8?q?=EB=A6=AC=20=EB=90=9C=20=ED=94=BC=EB=93=9C=EB=B0=B1=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20=EC=9E=91=EC=84=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=EB=A1=9C=20=EB=A6=AC=EB=8B=A4=EC=9D=B4=EB=A0=89=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/@types/reviewer.ts               |  2 +-
 .../feedback/feedbackCard/FeedbackCard.tsx    | 20 ++++++++++++++++++-
 .../RevieweeFeedbackLayout.tsx                |  2 +-
 .../ReviewerFeedbackLayout.tsx                |  2 +-
 .../roomDetailPage/myReviewee/MyReviewee.tsx  |  2 +-
 .../roomDetailPage/myReviewer/MyReviewer.tsx  |  2 +-
 6 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/frontend/src/@types/reviewer.ts b/frontend/src/@types/reviewer.ts
index 987dca011..19c38e1ab 100644
--- a/frontend/src/@types/reviewer.ts
+++ b/frontend/src/@types/reviewer.ts
@@ -2,6 +2,6 @@ export interface ReviewerInfo {
   userId: number;
   username: string;
   link: string;
-  isReviewed: boolean;
+  isReviewed?: boolean;
   isWrited: boolean;
 }
diff --git a/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx b/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx
index f70c7ecc6..c2a3f9e08 100644
--- a/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx
+++ b/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx
@@ -6,6 +6,7 @@ import { Textarea } from "@/components/common/textarea/Textarea";
 import EvaluationPointBar from "@/components/feedback/evaluationPointBar/EvaluationPointBar";
 import * as S from "@/components/feedback/feedbackCard/FeedbackCard.style";
 import { FeedbackCardData } from "@/@types/feedback";
+import { ReviewerInfo } from "@/@types/reviewer";
 import { HoverStyledLink } from "@/styles/common";
 import { theme } from "@/styles/theme";
 
@@ -28,6 +29,23 @@ const FeedbackCard = ({
     return feedbackType === "develop" ? "TO. 나의 리뷰이" : "TO. 나의 리뷰어";
   };
 
+  const reviewer: ReviewerInfo = {
+    userId: feedbackCardData.receiverId,
+    username: feedbackCardData.username,
+    link: feedbackCardData.profile,
+    isWrited: feedbackCardData.isWrited,
+  };
+
+  // 피드백 페이지 이동 함수
+  const handleNavigateFeedbackPage = (reviewer: ReviewerInfo) => {
+    navigate(
+      `/feedback/${feedbackType === "develop" ? "reviewer" : "reviewee"}/${feedbackCardData.roomId}?username=${feedbackCardData.username}`,
+      {
+        state: { reviewer },
+      },
+    );
+  };
+
   return (
     <>
       <S.ScreenReader>미션의 상세 피드백 내용입니다.</S.ScreenReader>
@@ -38,7 +56,7 @@ const FeedbackCard = ({
             <p>상대방 피드백을 작성해야 볼 수 있습니다.</p>
             <Button
               variant={feedbackType ? "primary" : "secondary"}
-              onClick={() => navigate(`/rooms/${feedbackCardData.roomId}`)}
+              onClick={() => handleNavigateFeedbackPage(reviewer)}
             >
               피드백 작성하러가기
             </Button>
diff --git a/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx b/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx
index 35033a334..1f9e5297a 100644
--- a/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx
+++ b/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx
@@ -23,7 +23,7 @@ const getInitialFormState = (
   feedbackData?: RevieweeFeedbackData,
 ): RevieweeFeedbackData => ({
   feedbackId: feedbackData?.feedbackId || 0,
-  receiverId: reviewee?.userId || 0,
+  receiverId: feedbackData?.receiverId || reviewee?.userId || 0,
   evaluationPoint: feedbackData?.evaluationPoint || 0,
   feedbackKeywords: feedbackData?.feedbackKeywords || [],
   feedbackText: feedbackData?.feedbackText || "",
diff --git a/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx b/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx
index 95f68071c..01db54650 100644
--- a/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx
+++ b/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx
@@ -23,7 +23,7 @@ const getInitialFormState = (
   feedbackData?: ReviewerFeedbackData,
 ): ReviewerFeedbackData => ({
   feedbackId: feedbackData?.feedbackId || 0,
-  receiverId: reviewer?.userId || 0,
+  receiverId: feedbackData?.receiverId || reviewer?.userId || 0,
   evaluationPoint: feedbackData?.evaluationPoint || 0,
   feedbackKeywords: feedbackData?.feedbackKeywords || [],
   feedbackText: feedbackData?.feedbackText || "",
diff --git a/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx b/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx
index 8bc6c18e6..bd84ee327 100644
--- a/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx
+++ b/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx
@@ -48,7 +48,7 @@ const MyReviewee = ({ roomInfo }: MyRevieweeProps) => {
   // 리뷰 및 피드백 여부 버튼 렌더링 함수
   const renderRevieweeButton = (reviewee: ReviewerInfo) => {
     const { buttonText } = getFeedbackType({
-      isReviewed: reviewee.isReviewed,
+      isReviewed: reviewee.isReviewed ?? false,
       isWrited: reviewee.isWrited,
       isClosed: roomInfo.roomStatus === "CLOSE",
     });
diff --git a/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx b/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
index ec876346a..35863e94d 100644
--- a/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
+++ b/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
@@ -28,7 +28,7 @@ const MyReviewer = ({ roomInfo }: MyReviewerProps) => {
   // 피드백 여부 버튼 렌더링 함수
   const renderReviewerButton = (reviewer: ReviewerInfo) => {
     const { buttonText } = getFeedbackType({
-      isReviewed: reviewer.isReviewed,
+      isReviewed: reviewer.isReviewed ?? false,
       isWrited: reviewer.isWrited,
       isClosed: roomInfo.roomStatus === "CLOSE",
     });

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 17/28] =?UTF-8?q?feat:=20=EB=B8=94=EB=9F=AC=EC=B2=98?=
 =?UTF-8?q?=EB=A6=AC=20=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 />,
           },
           {

From d603b54b56588cc5f7e20f784bffbb242ef0b999 Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Mon, 4 Nov 2024 10:59:57 +0900
Subject: [PATCH 18/28] =?UTF-8?q?fix:=20isFormValid=EA=B0=80=20false?=
 =?UTF-8?q?=EC=9D=BC=20=EB=95=8C=20=EC=84=9C=EB=B2=84=20=EC=9A=94=EC=B2=AD?=
 =?UTF-8?q?=20=EC=95=88=20=ED=95=98=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RevieweeFeedbackLayout.tsx                | 27 +++++++++----------
 .../ReviewerFeedbackLayout.tsx                | 22 +++++++--------
 2 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx b/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx
index 1f9e5297a..78ab7c5fe 100644
--- a/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx
+++ b/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx
@@ -49,6 +49,11 @@ const RevieweeFeedbackLayout = ({
 
   const displayedKeywords = roomInfo.keywords.filter((keyword) => keyword !== "");
 
+  const isFormValid =
+    formState.evaluationPoint !== 0 &&
+    formState.feedbackKeywords.length > 0 &&
+    formState.recommendationPoint !== 0;
+
   useEffect(() => {
     if (feedbackData) {
       setFormState(getInitialFormState(reviewee, feedbackData));
@@ -72,34 +77,28 @@ const RevieweeFeedbackLayout = ({
     }
   };
 
-  const isFormValid = formState.evaluationPoint !== 0 && formState.feedbackKeywords.length > 0;
-
   const handleSubmit = () => {
     setIsClicked(true);
-    if (feedbackType === "view") return;
 
-    const formattedFormState = {
-      ...formState,
-      feedbackText: formState.feedbackText,
-      feedbackKeywords: formState.feedbackKeywords,
-      evaluationPoint: formState.evaluationPoint,
-    };
+    if (!isFormValid || feedbackType === "view") return;
 
     if (feedbackType === "create") {
       postRevieweeFeedbackMutation.mutate(
-        { feedbackData: formattedFormState },
+        { feedbackData: formState },
         {
           onSuccess: () => {
-            navigate(`/rooms/${roomInfo.id}`);
+            navigate(-1);
           },
         },
       );
-    } else if (feedbackType === "edit") {
+    }
+
+    if (feedbackType === "edit") {
       putRevieweeFeedbackMutation.mutate(
-        { feedbackId: formState.feedbackId, feedbackData: formattedFormState },
+        { feedbackId: formState.feedbackId, feedbackData: formState },
         {
           onSuccess: () => {
-            navigate(`/rooms/${roomInfo.id}`);
+            navigate(-1);
           },
         },
       );
diff --git a/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx b/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx
index 01db54650..bf0f8f238 100644
--- a/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx
+++ b/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx
@@ -48,6 +48,8 @@ const ReviewerFeedbackLayout = ({
 
   const displayedKeywords = roomInfo.keywords.filter((keyword) => keyword !== "");
 
+  const isFormValid = formState.evaluationPoint !== 0 && formState.feedbackKeywords.length > 0;
+
   useEffect(() => {
     if (feedbackData) {
       setFormState(getInitialFormState(reviewer, feedbackData));
@@ -73,30 +75,26 @@ const ReviewerFeedbackLayout = ({
 
   const handleSubmit = () => {
     setIsClicked(true);
-    if (feedbackType === "view") return;
 
-    const formattedFormState = {
-      ...formState,
-      feedbackText: formState.feedbackText,
-      feedbackKeywords: formState.feedbackKeywords,
-      evaluationPoint: formState.evaluationPoint,
-    };
+    if (!isFormValid || feedbackType === "view") return;
 
     if (feedbackType === "create") {
       postReviewerFeedbackMutation.mutate(
-        { feedbackData: formattedFormState },
+        { feedbackData: formState },
         {
           onSuccess: () => {
-            navigate(`/rooms/${roomInfo.id}`);
+            navigate(-1);
           },
         },
       );
-    } else if (feedbackType === "edit") {
+    }
+
+    if (feedbackType === "edit") {
       putReviewerFeedbackMutation.mutate(
-        { feedbackId: formState.feedbackId, feedbackData: formattedFormState },
+        { feedbackId: formState.feedbackId, feedbackData: formState },
         {
           onSuccess: () => {
-            navigate(`/rooms/${roomInfo.id}`);
+            navigate(-1);
           },
         },
       );

From dcfd7d93a9370de1af8aa0d350e3d11f44e76b63 Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Mon, 4 Nov 2024 11:16:19 +0900
Subject: [PATCH 19/28] =?UTF-8?q?refactor:=20feedbackType=EC=9D=84=20feedb?=
 =?UTF-8?q?ackPageType=EC=9C=BC=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

---
 .../feedbackForm/RevieweeFeedbackForm.tsx     | 16 ++++++-------
 .../feedbackForm/ReviewerFeedbackForm.tsx     | 14 +++++------
 .../RevieweeFeedbackLayout.tsx                | 24 +++++++++----------
 .../ReviewerFeedbackLayout.tsx                | 24 +++++++++----------
 .../roomDetailPage/myReviewee/MyReviewee.tsx  |  7 +++---
 .../roomDetailPage/myReviewer/MyReviewer.tsx  |  5 ++--
 .../roomInfoCard/RoomInfoCard.tsx             |  4 ++--
 .../shared/roomCardModal/RoomCardModal.tsx    |  4 ++--
 .../feedbackForm/RevieweeFeedbackPage.tsx     |  2 +-
 .../feedbackForm/ReviewerFeedbackPage.tsx     |  2 +-
 frontend/src/utils/feedbackUtils.ts           | 19 ++++++++-------
 11 files changed, 63 insertions(+), 58 deletions(-)

diff --git a/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx b/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx
index fb74be05d..353101d38 100644
--- a/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx
+++ b/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx
@@ -9,7 +9,7 @@ import {
   DEVELOP_GOOD_KEYWORD_OPTIONS,
   DEVELOP_NORMAL_KEYWORD_OPTIONS,
 } from "@/constants/feedback";
-import { FeedbackType } from "@/utils/feedbackUtils";
+import { FeedbackPageType } from "@/utils/feedbackUtils";
 
 interface RevieweeFeedbackFormProps {
   formState: RevieweeFeedbackData;
@@ -17,7 +17,7 @@ interface RevieweeFeedbackFormProps {
     key: keyof RevieweeFeedbackData,
     value: RevieweeFeedbackData[keyof RevieweeFeedbackData],
   ) => void;
-  feedbackType: FeedbackType;
+  feedbackPageType: FeedbackPageType;
   isClicked: boolean;
 }
 
@@ -31,7 +31,7 @@ const getDevelopKeywordOptions = (selectedEvaluationId: number | undefined) => {
 const RevieweeFeedbackForm = ({
   formState,
   onChange,
-  feedbackType,
+  feedbackPageType,
   isClicked,
 }: RevieweeFeedbackFormProps) => {
   return (
@@ -46,7 +46,7 @@ const RevieweeFeedbackForm = ({
         <EvaluationPointBar
           initialOptionId={formState.evaluationPoint}
           onChange={(value) => onChange("evaluationPoint", value)}
-          readonly={feedbackType === "view"}
+          readonly={feedbackPageType === "view"}
         />
       </S.ItemContainer>
 
@@ -61,7 +61,7 @@ const RevieweeFeedbackForm = ({
           selectedOptions={formState.feedbackKeywords}
           onChange={(value) => onChange("feedbackKeywords", value)}
           selectedEvaluationId={formState.evaluationPoint}
-          readonly={feedbackType === "view"}
+          readonly={feedbackPageType === "view"}
           options={getDevelopKeywordOptions(formState.evaluationPoint)}
         />
       </S.ItemContainer>
@@ -74,7 +74,7 @@ const RevieweeFeedbackForm = ({
         <RecommendationPointBar
           initialOptionId={formState.recommendationPoint}
           onChange={(value) => onChange("recommendationPoint", value)}
-          readonly={feedbackType === "view"}
+          readonly={feedbackPageType === "view"}
         />
       </S.ItemContainer>
 
@@ -86,13 +86,13 @@ const RevieweeFeedbackForm = ({
             showCharCount={true}
             maxLength={2000}
             placeholder={
-              feedbackType === "view"
+              feedbackPageType === "view"
                 ? "없음"
                 : "상대 리뷰이의 개발 역량 향상을 위해 피드백을 남겨주세요."
             }
             value={formState.feedbackText}
             onChange={(e) => onChange("feedbackText", e.target.value)}
-            readOnly={feedbackType === "view"}
+            readOnly={feedbackPageType === "view"}
           />
         </S.TextareaWrapper>
       </S.ItemContainer>
diff --git a/frontend/src/components/feedback/feedbackForm/ReviewerFeedbackForm.tsx b/frontend/src/components/feedback/feedbackForm/ReviewerFeedbackForm.tsx
index 11fa589de..fba24e74b 100644
--- a/frontend/src/components/feedback/feedbackForm/ReviewerFeedbackForm.tsx
+++ b/frontend/src/components/feedback/feedbackForm/ReviewerFeedbackForm.tsx
@@ -9,7 +9,7 @@ import {
   SOCIAL_NORMAL_KEYWORD_OPTIONS,
 } from "@/constants/feedback";
 import { theme } from "@/styles/theme";
-import { FeedbackType } from "@/utils/feedbackUtils";
+import { FeedbackPageType } from "@/utils/feedbackUtils";
 
 interface ReviewerFeedbackFormProps {
   formState: ReviewerFeedbackData;
@@ -17,7 +17,7 @@ interface ReviewerFeedbackFormProps {
     key: keyof ReviewerFeedbackData,
     value: ReviewerFeedbackData[keyof ReviewerFeedbackData],
   ) => void;
-  feedbackType: FeedbackType;
+  feedbackPageType: FeedbackPageType;
   isClicked: boolean;
 }
 
@@ -31,7 +31,7 @@ const getSocialKeywordOptions = (selectedEvaluationId: number | undefined) => {
 const ReviewerFeedbackForm = ({
   formState,
   onChange,
-  feedbackType,
+  feedbackPageType,
   isClicked,
 }: ReviewerFeedbackFormProps) => {
   return (
@@ -47,7 +47,7 @@ const ReviewerFeedbackForm = ({
           initialOptionId={formState.evaluationPoint}
           onChange={(value) => onChange("evaluationPoint", value)}
           color={theme.COLOR.secondary}
-          readonly={feedbackType === "view"}
+          readonly={feedbackPageType === "view"}
         />
       </S.ItemContainer>
 
@@ -64,7 +64,7 @@ const ReviewerFeedbackForm = ({
           selectedEvaluationId={formState.evaluationPoint}
           options={getSocialKeywordOptions(formState.evaluationPoint)}
           color={theme.COLOR.secondary}
-          readonly={feedbackType === "view"}
+          readonly={feedbackPageType === "view"}
         />
       </S.ItemContainer>
 
@@ -76,13 +76,13 @@ const ReviewerFeedbackForm = ({
             showCharCount={true}
             maxLength={2000}
             placeholder={
-              feedbackType === "view"
+              feedbackPageType === "view"
                 ? "미작성"
                 : "상대 리뷰어의 소프트 스킬 향상을 위해 피드백을 남겨주세요."
             }
             value={formState.feedbackText}
             onChange={(e) => onChange("feedbackText", e.target.value)}
-            readOnly={feedbackType === "view"}
+            readOnly={feedbackPageType === "view"}
           />
         </S.TextareaWrapper>
       </S.ItemContainer>
diff --git a/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx b/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx
index 78ab7c5fe..9b81cad6a 100644
--- a/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx
+++ b/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx
@@ -9,10 +9,10 @@ import { RevieweeFeedbackData } from "@/@types/feedback";
 import { ReviewerInfo } from "@/@types/reviewer";
 import { RoomInfo } from "@/@types/roomInfo";
 import { theme } from "@/styles/theme";
-import { FeedbackType } from "@/utils/feedbackUtils";
+import { FeedbackPageType } from "@/utils/feedbackUtils";
 
 interface RevieweeFeedbackProps {
-  feedbackType: FeedbackType;
+  feedbackPageType: FeedbackPageType;
   roomInfo: Pick<RoomInfo, "id" | "title" | "keywords">;
   reviewee?: ReviewerInfo;
   feedbackData?: RevieweeFeedbackData;
@@ -31,7 +31,7 @@ const getInitialFormState = (
 });
 
 const RevieweeFeedbackLayout = ({
-  feedbackType,
+  feedbackPageType,
   roomInfo,
   reviewee,
   feedbackData,
@@ -45,7 +45,7 @@ const RevieweeFeedbackLayout = ({
   );
   const [isClicked, setIsClicked] = useState(false);
 
-  const buttonText = feedbackType === "create" ? "작성하기" : "수정하기";
+  const buttonText = feedbackPageType === "create" ? "작성하기" : "수정하기";
 
   const displayedKeywords = roomInfo.keywords.filter((keyword) => keyword !== "");
 
@@ -64,7 +64,7 @@ const RevieweeFeedbackLayout = ({
     key: keyof RevieweeFeedbackData,
     value: RevieweeFeedbackData[keyof RevieweeFeedbackData],
   ) => {
-    if (feedbackType === "view") return;
+    if (feedbackPageType === "view") return;
 
     if (key === "evaluationPoint") {
       setFormState((prevState) => ({
@@ -80,9 +80,9 @@ const RevieweeFeedbackLayout = ({
   const handleSubmit = () => {
     setIsClicked(true);
 
-    if (!isFormValid || feedbackType === "view") return;
+    if (!isFormValid || feedbackPageType === "view") return;
 
-    if (feedbackType === "create") {
+    if (feedbackPageType === "create") {
       postRevieweeFeedbackMutation.mutate(
         { feedbackData: formState },
         {
@@ -93,7 +93,7 @@ const RevieweeFeedbackLayout = ({
       );
     }
 
-    if (feedbackType === "edit") {
+    if (feedbackPageType === "edit") {
       putRevieweeFeedbackMutation.mutate(
         { feedbackId: formState.feedbackId, feedbackData: formState },
         {
@@ -111,9 +111,9 @@ const RevieweeFeedbackLayout = ({
         <S.FeedbackContainerHeader>
           <S.PageType>
             <>{reviewee?.username} </>
-            {feedbackType === "create" && "리뷰이 피드백 작성하기"}
-            {feedbackType === "edit" && "리뷰이 피드백 수정하기"}
-            {feedbackType === "view" && "리뷰이 피드백 확인하기"}
+            {feedbackPageType === "create" && "리뷰이 피드백 작성하기"}
+            {feedbackPageType === "edit" && "리뷰이 피드백 수정하기"}
+            {feedbackPageType === "view" && "리뷰이 피드백 확인하기"}
           </S.PageType>
           <S.PageTitle>{roomInfo.title}</S.PageTitle>
           <S.Keywords>
@@ -137,7 +137,7 @@ const RevieweeFeedbackLayout = ({
           isClicked={isClicked}
           formState={formState}
           onChange={handleChange}
-          feedbackType={feedbackType}
+          feedbackPageType={feedbackPageType}
         />
 
         <S.ButtonWrapper>
diff --git a/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx b/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx
index bf0f8f238..0623af890 100644
--- a/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx
+++ b/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx
@@ -9,10 +9,10 @@ import { ReviewerFeedbackData } from "@/@types/feedback";
 import { ReviewerInfo } from "@/@types/reviewer";
 import { RoomInfo } from "@/@types/roomInfo";
 import { theme } from "@/styles/theme";
-import { FeedbackType } from "@/utils/feedbackUtils";
+import { FeedbackPageType } from "@/utils/feedbackUtils";
 
 interface ReviewerFeedbackProps {
-  feedbackType: FeedbackType;
+  feedbackPageType: FeedbackPageType;
   roomInfo: Pick<RoomInfo, "id" | "title" | "keywords">;
   reviewer?: ReviewerInfo;
   feedbackData?: ReviewerFeedbackData;
@@ -30,7 +30,7 @@ const getInitialFormState = (
 });
 
 const ReviewerFeedbackLayout = ({
-  feedbackType,
+  feedbackPageType,
   roomInfo,
   reviewer,
   feedbackData,
@@ -44,7 +44,7 @@ const ReviewerFeedbackLayout = ({
   );
   const [isClicked, setIsClicked] = useState(false);
 
-  const buttonText = feedbackType === "create" ? "작성하기" : "수정하기";
+  const buttonText = feedbackPageType === "create" ? "작성하기" : "수정하기";
 
   const displayedKeywords = roomInfo.keywords.filter((keyword) => keyword !== "");
 
@@ -60,7 +60,7 @@ const ReviewerFeedbackLayout = ({
     key: keyof ReviewerFeedbackData,
     value: ReviewerFeedbackData[keyof ReviewerFeedbackData],
   ) => {
-    if (feedbackType === "view") return;
+    if (feedbackPageType === "view") return;
 
     if (key === "evaluationPoint") {
       setFormState((prevState) => ({
@@ -76,9 +76,9 @@ const ReviewerFeedbackLayout = ({
   const handleSubmit = () => {
     setIsClicked(true);
 
-    if (!isFormValid || feedbackType === "view") return;
+    if (!isFormValid || feedbackPageType === "view") return;
 
-    if (feedbackType === "create") {
+    if (feedbackPageType === "create") {
       postReviewerFeedbackMutation.mutate(
         { feedbackData: formState },
         {
@@ -89,7 +89,7 @@ const ReviewerFeedbackLayout = ({
       );
     }
 
-    if (feedbackType === "edit") {
+    if (feedbackPageType === "edit") {
       putReviewerFeedbackMutation.mutate(
         { feedbackId: formState.feedbackId, feedbackData: formState },
         {
@@ -107,9 +107,9 @@ const ReviewerFeedbackLayout = ({
         <S.FeedbackContainerHeader>
           <S.PageType>
             <>{reviewer?.username} </>
-            {feedbackType === "create" && "리뷰어 피드백 작성하기"}
-            {feedbackType === "edit" && "리뷰어 피드백 수정하기"}
-            {feedbackType === "view" && "리뷰어 피드백 확인하기"}
+            {feedbackPageType === "create" && "리뷰어 피드백 작성하기"}
+            {feedbackPageType === "edit" && "리뷰어 피드백 수정하기"}
+            {feedbackPageType === "view" && "리뷰어 피드백 확인하기"}
           </S.PageType>
           <S.PageTitle>{roomInfo.title}</S.PageTitle>
           <S.Keywords>
@@ -133,7 +133,7 @@ const ReviewerFeedbackLayout = ({
           isClicked={isClicked}
           formState={formState}
           onChange={handleChange}
-          feedbackType={feedbackType}
+          feedbackPageType={feedbackPageType}
         />
 
         <S.ButtonWrapper>
diff --git a/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx b/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx
index 850b16ec4..d8218f7d4 100644
--- a/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx
+++ b/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx
@@ -10,7 +10,7 @@ import { RoomInfo } from "@/@types/roomInfo";
 import { spinner } from "@/assets";
 import MESSAGES from "@/constants/message";
 import { HoverStyledLink } from "@/styles/common";
-import { getFeedbackType } from "@/utils/feedbackUtils";
+import { getFeedbackPageType } from "@/utils/feedbackUtils";
 
 interface MyRevieweeProps {
   roomInfo: RoomInfo;
@@ -24,7 +24,7 @@ const MyReviewee = ({ roomInfo }: MyRevieweeProps) => {
 
   // 피드백 페이지 이동 함수
   const handleNavigateFeedbackPage = (reviewee: ReviewerInfo) => {
-    navigate(`/rooms/${roomInfo.id}/feedback/reviewer?username=${reviewee.username}`, {
+    navigate(`/rooms/${roomInfo.id}/feedback/reviewee?username=${reviewee.username}`, {
       state: { reviewee },
     });
   };
@@ -47,7 +47,7 @@ const MyReviewee = ({ roomInfo }: MyRevieweeProps) => {
 
   // 리뷰 및 피드백 여부 버튼 렌더링 함수
   const renderRevieweeButton = (reviewee: ReviewerInfo) => {
-    const { buttonText } = getFeedbackType({
+    const { buttonText } = getFeedbackPageType({
       isReviewed: reviewee.isReviewed ?? false,
       isWrited: reviewee.isWrited,
       isClosed: roomInfo.roomStatus === "CLOSE",
@@ -57,6 +57,7 @@ const MyReviewee = ({ roomInfo }: MyRevieweeProps) => {
       return <p>코드리뷰를 하지 않았어요</p>;
     }
 
+    // TODO: 방 끝나도 계속 작성 가능
     // if (roomInfo.roomStatus === "CLOSE" && !reviewee.isWrited) {
     //   return <p>피드백을 작성하지 않았어요</p>;
     // }
diff --git a/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx b/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
index 93e892f45..57766eefb 100644
--- a/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
+++ b/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
@@ -8,7 +8,7 @@ import { RoomInfo } from "@/@types/roomInfo";
 import { thinkingCharacter } from "@/assets";
 import MESSAGES from "@/constants/message";
 import { HoverStyledLink } from "@/styles/common";
-import { getFeedbackType } from "@/utils/feedbackUtils";
+import { getFeedbackPageType } from "@/utils/feedbackUtils";
 
 interface MyReviewerProps {
   roomInfo: RoomInfo;
@@ -27,7 +27,7 @@ const MyReviewer = ({ roomInfo }: MyReviewerProps) => {
 
   // 피드백 여부 버튼 렌더링 함수
   const renderReviewerButton = (reviewer: ReviewerInfo) => {
-    const { buttonText } = getFeedbackType({
+    const { buttonText } = getFeedbackPageType({
       isReviewed: reviewer.isReviewed ?? false,
       isWrited: reviewer.isWrited,
       isClosed: roomInfo.roomStatus === "CLOSE",
@@ -37,6 +37,7 @@ const MyReviewer = ({ roomInfo }: MyReviewerProps) => {
       return <p>리뷰어가 리뷰를 하지 않았어요</p>;
     }
 
+    // TODO: 방이 끝나도 계속 작성 가능
     // if (roomInfo.roomStatus === "CLOSE" && !reviewer.isWrited) {
     //   return <p>피드백을 작성하지 않았어요</p>;
     // }
diff --git a/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.tsx b/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.tsx
index f8afe238b..e46e2c2b9 100644
--- a/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.tsx
+++ b/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.tsx
@@ -108,7 +108,7 @@ const RoomInfoCard = ({ roomInfo }: { roomInfo: RoomInfo }) => {
             <S.ContentLineBreak aria-hidden>
               <S.RoomContentSmall>
                 <Icon kind="calendar" size="1.8rem" color={theme.COLOR.grey4} />
-                <span>리뷰 및 피드백 마감일: </span>
+                <span>리뷰 마감일: </span>
               </S.RoomContentSmall>
               <div>
                 <S.DateTimeText>{formatDateTimeString(roomInfo.reviewDeadline)}</S.DateTimeText>
@@ -120,7 +120,7 @@ const RoomInfoCard = ({ roomInfo }: { roomInfo: RoomInfo }) => {
               </div>
             </S.ContentLineBreak>
             <S.ScreenReader>
-              {`리뷰 및 피드백 마감일 ${convertDateToKorean(formatDateTimeString(roomInfo.reviewDeadline))}`}
+              {`리뷰 마감일 ${convertDateToKorean(formatDateTimeString(roomInfo.reviewDeadline))}`}
             </S.ScreenReader>
           </S.RoomContentSmall>
         </S.RoomContentBox>
diff --git a/frontend/src/components/shared/roomCardModal/RoomCardModal.tsx b/frontend/src/components/shared/roomCardModal/RoomCardModal.tsx
index 4660935f9..0e82ea79a 100644
--- a/frontend/src/components/shared/roomCardModal/RoomCardModal.tsx
+++ b/frontend/src/components/shared/roomCardModal/RoomCardModal.tsx
@@ -67,13 +67,13 @@ const RoomCardModal = ({ isOpen, onClose, roomInfo }: RoomCardModalProps) => {
 
           <S.InfoRow>
             <S.InfoTitle id="reviewDeadlineTitle" aria-hidden>
-              리뷰 및 피드백 마감일
+              리뷰 마감일
             </S.InfoTitle>
             <S.InfoContent aria-hidden>
               {formatDateTimeString(roomInfo.reviewDeadline)}
             </S.InfoContent>
             <S.ScreenReader>
-              {`리뷰 및 피드백 마감일 ${convertDateToKorean(formatDateTimeString(roomInfo.reviewDeadline))}`}
+              {`리뷰 마감일 ${convertDateToKorean(formatDateTimeString(roomInfo.reviewDeadline))}`}
             </S.ScreenReader>
           </S.InfoRow>
 
diff --git a/frontend/src/pages/feedbackForm/RevieweeFeedbackPage.tsx b/frontend/src/pages/feedbackForm/RevieweeFeedbackPage.tsx
index 40340fa82..e11e50210 100644
--- a/frontend/src/pages/feedbackForm/RevieweeFeedbackPage.tsx
+++ b/frontend/src/pages/feedbackForm/RevieweeFeedbackPage.tsx
@@ -21,7 +21,7 @@ const RevieweeFeedbackPage = () => {
 
   return (
     <RevieweeFeedbackLayout
-      feedbackType={feedbackData ? "edit" : "create"}
+      feedbackPageType={reviewee.isWrited ? "edit" : "create"}
       roomInfo={roomInfo}
       reviewee={reviewee}
       feedbackData={feedbackData}
diff --git a/frontend/src/pages/feedbackForm/ReviewerFeedbackPage.tsx b/frontend/src/pages/feedbackForm/ReviewerFeedbackPage.tsx
index 8103ec42d..2b3c40ca5 100644
--- a/frontend/src/pages/feedbackForm/ReviewerFeedbackPage.tsx
+++ b/frontend/src/pages/feedbackForm/ReviewerFeedbackPage.tsx
@@ -21,7 +21,7 @@ const ReviewerFeedbackPage = () => {
 
   return (
     <ReviewerFeedbackLayout
-      feedbackType={feedbackData ? "edit" : "create"}
+      feedbackPageType={reviewer.isWrited ? "edit" : "create"}
       roomInfo={roomInfo}
       reviewer={reviewer}
       feedbackData={feedbackData}
diff --git a/frontend/src/utils/feedbackUtils.ts b/frontend/src/utils/feedbackUtils.ts
index ac2bbe016..a08bcf878 100644
--- a/frontend/src/utils/feedbackUtils.ts
+++ b/frontend/src/utils/feedbackUtils.ts
@@ -1,30 +1,33 @@
 // 피드백 작성/수정/확인 타입 구분
-export type FeedbackType = "create" | "edit" | "view";
+export type FeedbackPageType = "create" | "edit" | "view";
 
-interface FeedbackTypeProps {
+interface FeedbackPageTypeProps {
   isReviewed: boolean;
   isWrited: boolean;
   isClosed: boolean;
 }
 
 export interface FeedbackTypeResult {
-  modalType: FeedbackType;
+  feedbackPageType: FeedbackPageType;
   buttonText: string;
 }
 
-export const getFeedbackType = ({
+export const getFeedbackPageType = ({
   isReviewed,
   isWrited,
   isClosed,
-}: FeedbackTypeProps): FeedbackTypeResult => {
+}: FeedbackPageTypeProps): FeedbackTypeResult => {
   if (!isReviewed) {
-    return { modalType: "create", buttonText: "피드백 작성하기" };
+    return { feedbackPageType: "create", buttonText: "피드백 작성하기" };
   }
+
+  // TODO: 방 끝나도 계속 작성 가능
   // if (isClosed) {
   //   return { modalType: "view", buttonText: "피드백 확인하기" };
   // }
+
   if (isWrited) {
-    return { modalType: "edit", buttonText: "피드백 수정하기" };
+    return { feedbackPageType: "edit", buttonText: "피드백 수정하기" };
   }
-  return { modalType: "create", buttonText: "피드백 작성하기" };
+  return { feedbackPageType: "create", buttonText: "피드백 작성하기" };
 };

From 8d2d77a616d4017db97fbad20dbb34ac134063bc Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Mon, 4 Nov 2024 11:28:03 +0900
Subject: [PATCH 20/28] =?UTF-8?q?refactor:=20handleNavigateFeedbackPage=20?=
 =?UTF-8?q?=EC=9D=B8=EC=9E=90=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/feedback/feedbackCard/FeedbackCard.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx b/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx
index b3f6e9127..98fcd52e0 100644
--- a/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx
+++ b/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx
@@ -37,7 +37,7 @@ const FeedbackCard = ({
   };
 
   // 피드백 페이지 이동 함수
-  const handleNavigateFeedbackPage = (reviewer: ReviewerInfo) => {
+  const handleNavigateFeedbackPage = () => {
     navigate(
       `/rooms/${feedbackCardData.roomId}/feedback/${feedbackType === "develop" ? "reviewer" : "reviewee"}?username=${feedbackCardData.username}`,
       {
@@ -57,7 +57,7 @@ const FeedbackCard = ({
               <p>상대방 피드백을 작성해야 볼 수 있습니다.</p>
               <Button
                 variant={feedbackType ? "primary" : "secondary"}
-                onClick={() => handleNavigateFeedbackPage(reviewer)}
+                onClick={handleNavigateFeedbackPage}
               >
                 피드백 작성하러가기
               </Button>

From 481ab652a661419412df668f0e85f2536a79194f Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Mon, 4 Nov 2024 11:41:43 +0900
Subject: [PATCH 21/28] =?UTF-8?q?refactor:=20isReviewed=20=EA=B8=B0?=
 =?UTF-8?q?=EB=B3=B8=EA=B0=92=20true=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

---
 .../src/components/roomDetailPage/myReviewee/MyReviewee.tsx     | 2 +-
 .../src/components/roomDetailPage/myReviewer/MyReviewer.tsx     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx b/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx
index d8218f7d4..6b49560e4 100644
--- a/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx
+++ b/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx
@@ -48,7 +48,7 @@ const MyReviewee = ({ roomInfo }: MyRevieweeProps) => {
   // 리뷰 및 피드백 여부 버튼 렌더링 함수
   const renderRevieweeButton = (reviewee: ReviewerInfo) => {
     const { buttonText } = getFeedbackPageType({
-      isReviewed: reviewee.isReviewed ?? false,
+      isReviewed: reviewee.isReviewed ?? true,
       isWrited: reviewee.isWrited,
       isClosed: roomInfo.roomStatus === "CLOSE",
     });
diff --git a/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx b/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
index 57766eefb..ff2030d58 100644
--- a/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
+++ b/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
@@ -28,7 +28,7 @@ const MyReviewer = ({ roomInfo }: MyReviewerProps) => {
   // 피드백 여부 버튼 렌더링 함수
   const renderReviewerButton = (reviewer: ReviewerInfo) => {
     const { buttonText } = getFeedbackPageType({
-      isReviewed: reviewer.isReviewed ?? false,
+      isReviewed: reviewer.isReviewed ?? true,
       isWrited: reviewer.isWrited,
       isClosed: roomInfo.roomStatus === "CLOSE",
     });

From 77c1fd09a9bb7a0187cba51a2ea787f1fb9a7da7 Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Mon, 4 Nov 2024 21:38:15 +0900
Subject: [PATCH 22/28] =?UTF-8?q?refactor:=20=ED=94=BC=EB=93=9C=EB=B0=B1?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80=20=EC=9E=91=EC=84=B1=20=EC=97=86=EC=9D=84?=
 =?UTF-8?q?=20=EB=95=8C=20"=EB=AF=B8=EC=9E=91=EC=84=B1"=EC=9C=BC=EB=A1=9C?=
 =?UTF-8?q?=20=EB=AC=B8=EA=B5=AC=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/feedback/feedbackCard/FeedbackCard.tsx     | 4 +++-
 .../components/feedback/feedbackForm/RevieweeFeedbackForm.tsx | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx b/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx
index 98fcd52e0..60a100d15 100644
--- a/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx
+++ b/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx
@@ -113,7 +113,9 @@ const FeedbackCard = ({
               rows={10}
               maxLength={2000}
               showCharCount={true}
-              value={feedbackCardData.feedbackText.length ? feedbackCardData.feedbackText : "없음"}
+              value={
+                feedbackCardData.feedbackText.length ? feedbackCardData.feedbackText : "미작성"
+              }
               readOnly
             />
           </S.FeedbackDetailContainer>
diff --git a/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx b/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx
index 353101d38..082773b8a 100644
--- a/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx
+++ b/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx
@@ -87,7 +87,7 @@ const RevieweeFeedbackForm = ({
             maxLength={2000}
             placeholder={
               feedbackPageType === "view"
-                ? "없음"
+                ? "미작성"
                 : "상대 리뷰이의 개발 역량 향상을 위해 피드백을 남겨주세요."
             }
             value={formState.feedbackText}

From 4a43669e1b99499d4bc53d10193642fd509df4ab Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Mon, 4 Nov 2024 21:40:58 +0900
Subject: [PATCH 23/28] =?UTF-8?q?feat:=20'=EB=A6=AC=EB=B7=B0=EC=96=B4=20{?=
 =?UTF-8?q?=EC=9D=B4=EB=A6=84}=20=ED=94=BC=EB=93=9C=EB=B0=B1=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1=ED=95=98=EA=B8=B0'=20=EB=A1=9C=20=EB=AC=B8=EA=B5=AC?=
 =?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

---
 .../revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx     | 8 ++++----
 .../reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx     | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx b/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx
index 9b81cad6a..ce8ded3d7 100644
--- a/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx
+++ b/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx
@@ -110,10 +110,10 @@ const RevieweeFeedbackLayout = ({
       <S.FeedbackContainer>
         <S.FeedbackContainerHeader>
           <S.PageType>
-            <>{reviewee?.username} </>
-            {feedbackPageType === "create" && "리뷰이 피드백 작성하기"}
-            {feedbackPageType === "edit" && "리뷰이 피드백 수정하기"}
-            {feedbackPageType === "view" && "리뷰이 피드백 확인하기"}
+            <>리뷰이 {reviewee?.username} 피드백 </>
+            {feedbackPageType === "create" && "작성하기"}
+            {feedbackPageType === "edit" && "수정하기"}
+            {feedbackPageType === "view" && "확인하기"}
           </S.PageType>
           <S.PageTitle>{roomInfo.title}</S.PageTitle>
           <S.Keywords>
diff --git a/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx b/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx
index 0623af890..3f2833041 100644
--- a/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx
+++ b/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx
@@ -106,10 +106,10 @@ const ReviewerFeedbackLayout = ({
       <S.FeedbackContainer>
         <S.FeedbackContainerHeader>
           <S.PageType>
-            <>{reviewer?.username} </>
-            {feedbackPageType === "create" && "리뷰어 피드백 작성하기"}
-            {feedbackPageType === "edit" && "리뷰어 피드백 수정하기"}
-            {feedbackPageType === "view" && "리뷰어 피드백 확인하기"}
+            <>리뷰어 {reviewer?.username} 피드백 </>
+            {feedbackPageType === "create" && "작성하기"}
+            {feedbackPageType === "edit" && "수정하기"}
+            {feedbackPageType === "view" && "확인하기"}
           </S.PageType>
           <S.PageTitle>{roomInfo.title}</S.PageTitle>
           <S.Keywords>

From 8e59c8746e587c3aaf1f1e35101cb25b0e2c9a9e Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Mon, 4 Nov 2024 22:10:11 +0900
Subject: [PATCH 24/28] =?UTF-8?q?design:=20line-height=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80,=20=ED=95=84=EC=88=98=EC=9E=85=EB=A0=A5=20=EC=98=86?=
 =?UTF-8?q?=EC=97=90=20=EB=9D=84=EC=9A=B0=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../feedback/feedbackForm/FeedbackForm.style.ts      |  4 ++++
 .../feedback/feedbackForm/RevieweeFeedbackForm.tsx   | 12 +++++++-----
 .../feedback/feedbackForm/ReviewerFeedbackForm.tsx   |  6 +++---
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/feedback/feedbackForm/FeedbackForm.style.ts b/frontend/src/components/feedback/feedbackForm/FeedbackForm.style.ts
index 166dede62..f44524885 100644
--- a/frontend/src/components/feedback/feedbackForm/FeedbackForm.style.ts
+++ b/frontend/src/components/feedback/feedbackForm/FeedbackForm.style.ts
@@ -21,12 +21,16 @@ export const QuestionContainer = styled.div`
 
 export const ModalQuestion = styled.legend<{ $isInvalid?: boolean }>`
   font: ${({ theme }) => theme.TEXT.small_bold};
+  line-height: normal;
   color: ${({ theme, $isInvalid }) => ($isInvalid ? theme.COLOR.error : theme.COLOR.grey4)};
+  word-break: keep-all;
+  overflow-wrap: break-word;
 `;
 
 export const Required = styled.span`
   font: ${({ theme }) => theme.TEXT.xSmall};
   color: ${({ theme }) => theme.COLOR.error};
+  white-space: nowrap;
 `;
 
 export const TextareaWrapper = styled.div`
diff --git a/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx b/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx
index 082773b8a..ab69ec401 100644
--- a/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx
+++ b/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx
@@ -40,8 +40,8 @@ const RevieweeFeedbackForm = ({
         <S.QuestionContainer>
           <S.ModalQuestion $isInvalid={isClicked && formState.evaluationPoint === 0}>
             리뷰이의 개발 역량 향상을 위해 코드를 평가 해주세요.
+            <S.Required> *필수입력</S.Required>
           </S.ModalQuestion>
-          <S.Required>*필수입력</S.Required>
         </S.QuestionContainer>
         <EvaluationPointBar
           initialOptionId={formState.evaluationPoint}
@@ -54,8 +54,8 @@ const RevieweeFeedbackForm = ({
         <S.QuestionContainer>
           <S.ModalQuestion $isInvalid={isClicked && formState.feedbackKeywords.length === 0}>
             위와 같이 선택한 이유를 알려주세요. (복수선택 가능)
+            <S.Required> *필수입력</S.Required>
           </S.ModalQuestion>
-          <S.Required>*필수입력</S.Required>
         </S.QuestionContainer>
         <KeywordOptionButton
           selectedOptions={formState.feedbackKeywords}
@@ -68,8 +68,10 @@ const RevieweeFeedbackForm = ({
 
       <S.ItemContainer>
         <S.QuestionContainer>
-          <S.ModalQuestion>[비공개] 리뷰이의 코드를 추천하시나요?</S.ModalQuestion>
-          <S.Required>*필수입력</S.Required>
+          <S.ModalQuestion>
+            [비공개] 리뷰이의 코드를 추천하시나요?
+            <S.Required> *필수입력</S.Required>
+          </S.ModalQuestion>
         </S.QuestionContainer>
         <RecommendationPointBar
           initialOptionId={formState.recommendationPoint}
@@ -79,7 +81,7 @@ const RevieweeFeedbackForm = ({
       </S.ItemContainer>
 
       <S.ItemContainer>
-        <S.ModalQuestion>추가적으로 하고 싶은 피드백이 있다면 남겨 주세요.</S.ModalQuestion>
+        <S.ModalQuestion>추가적으로 하고 싶은 피드백이 있다면 남겨주세요.</S.ModalQuestion>
         <S.TextareaWrapper>
           <Textarea
             rows={10}
diff --git a/frontend/src/components/feedback/feedbackForm/ReviewerFeedbackForm.tsx b/frontend/src/components/feedback/feedbackForm/ReviewerFeedbackForm.tsx
index fba24e74b..f3cf73225 100644
--- a/frontend/src/components/feedback/feedbackForm/ReviewerFeedbackForm.tsx
+++ b/frontend/src/components/feedback/feedbackForm/ReviewerFeedbackForm.tsx
@@ -40,8 +40,8 @@ const ReviewerFeedbackForm = ({
         <S.QuestionContainer>
           <S.ModalQuestion $isInvalid={isClicked && formState.evaluationPoint === 0}>
             리뷰어의 소프트 스킬 역량 향상을 위해 피드백을 해주세요.
+            <S.Required> *필수입력</S.Required>
           </S.ModalQuestion>
-          <S.Required>*필수입력</S.Required>
         </S.QuestionContainer>
         <EvaluationPointBar
           initialOptionId={formState.evaluationPoint}
@@ -55,8 +55,8 @@ const ReviewerFeedbackForm = ({
         <S.QuestionContainer>
           <S.ModalQuestion $isInvalid={isClicked && formState.feedbackKeywords.length === 0}>
             위와 같이 선택한 이유를 알려주세요. (복수선택 가능)
+            <S.Required> *필수입력</S.Required>
           </S.ModalQuestion>
-          <S.Required>*필수입력</S.Required>
         </S.QuestionContainer>
         <KeywordOptionButton
           selectedOptions={formState.feedbackKeywords}
@@ -69,7 +69,7 @@ const ReviewerFeedbackForm = ({
       </S.ItemContainer>
 
       <S.ItemContainer>
-        <S.ModalQuestion>추가적으로 하고 싶은 피드백이 있다면 남겨 주세요.</S.ModalQuestion>
+        <S.ModalQuestion>추가적으로 하고 싶은 피드백이 있다면 남겨주세요.</S.ModalQuestion>
         <S.TextareaWrapper>
           <Textarea
             rows={10}

From 1180e201af7aff59857e3213be978f7b674ae6fb Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Mon, 4 Nov 2024 22:26:53 +0900
Subject: [PATCH 25/28] =?UTF-8?q?feat:=20=EB=B0=A9=20=EC=A0=95=EB=B3=B4=20?=
 =?UTF-8?q?=EB=8B=A4=EB=A5=B4=EA=B2=8C=20=EB=B3=80=EA=B2=BD,=20=ED=8F=B4?=
 =?UTF-8?q?=EB=8D=94=20=EA=B5=AC=EC=A1=B0=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FeedbackLayout.style.ts}                  | 16 ++++++-
 .../RevieweeFeedbackLayout.tsx                | 37 ++++++++-------
 .../ReviewerFeedbackLayout.tsx                | 37 ++++++++-------
 .../RevieweeFeedbackLayout.style.ts           | 47 -------------------
 .../feedbackForm/RevieweeFeedbackPage.tsx     |  2 +-
 .../feedbackForm/ReviewerFeedbackPage.tsx     |  2 +-
 6 files changed, 56 insertions(+), 85 deletions(-)
 rename frontend/src/components/feedback/{reviewerFeedbackLayout/ReviewerFeedbackLayout.style.ts => feedbackLayout/FeedbackLayout.style.ts} (79%)
 rename frontend/src/components/feedback/{revieweeFeedbackLayout => feedbackLayout}/RevieweeFeedbackLayout.tsx (85%)
 rename frontend/src/components/feedback/{reviewerFeedbackLayout => feedbackLayout}/ReviewerFeedbackLayout.tsx (84%)
 delete mode 100644 frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.style.ts

diff --git a/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.style.ts b/frontend/src/components/feedback/feedbackLayout/FeedbackLayout.style.ts
similarity index 79%
rename from frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.style.ts
rename to frontend/src/components/feedback/feedbackLayout/FeedbackLayout.style.ts
index 0f94a4f37..055972c6f 100644
--- a/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.style.ts
+++ b/frontend/src/components/feedback/feedbackLayout/FeedbackLayout.style.ts
@@ -3,7 +3,7 @@ import styled from "styled-components";
 export const FeedbackContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 1.6rem;
+  gap: 2rem;
 
   width: 100%;
   min-width: 335px;
@@ -14,7 +14,7 @@ export const FeedbackContainer = styled.div`
 export const FeedbackContainerHeader = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 1.2rem;
+  gap: 1.6rem;
 `;
 
 export const PageType = styled.p`
@@ -22,6 +22,18 @@ export const PageType = styled.p`
   color: ${({ theme }) => theme.COLOR.grey3};
 `;
 
+export const MissionInfoContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  padding: 1rem;
+
+  border: 1px solid ${({ theme }) => theme.COLOR.grey1};
+  border-radius: 8px;
+  box-shadow: ${({ theme }) => theme.BOX_SHADOW.light};
+`;
+
 export const PageTitle = styled.p`
   font: ${({ theme }) => theme.TEXT.large_bold};
   color: ${({ theme }) => theme.COLOR.black};
diff --git a/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx b/frontend/src/components/feedback/feedbackLayout/RevieweeFeedbackLayout.tsx
similarity index 85%
rename from frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx
rename to frontend/src/components/feedback/feedbackLayout/RevieweeFeedbackLayout.tsx
index ce8ded3d7..fae95deb9 100644
--- a/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.tsx
+++ b/frontend/src/components/feedback/feedbackLayout/RevieweeFeedbackLayout.tsx
@@ -4,7 +4,7 @@ import useMutateFeedback from "@/hooks/mutations/useMutateFeedback";
 import Button from "@/components/common/button/Button";
 import Label from "@/components/common/label/Label";
 import RevieweeFeedbackForm from "@/components/feedback/feedbackForm/RevieweeFeedbackForm";
-import * as S from "@/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.style";
+import * as S from "@/components/feedback/feedbackLayout/FeedbackLayout.style";
 import { RevieweeFeedbackData } from "@/@types/feedback";
 import { ReviewerInfo } from "@/@types/reviewer";
 import { RoomInfo } from "@/@types/roomInfo";
@@ -115,22 +115,25 @@ const RevieweeFeedbackLayout = ({
             {feedbackPageType === "edit" && "수정하기"}
             {feedbackPageType === "view" && "확인하기"}
           </S.PageType>
-          <S.PageTitle>{roomInfo.title}</S.PageTitle>
-          <S.Keywords>
-            {displayedKeywords.length === 0 ? (
-              <S.NoKeywordText>지정된 키워드 없음</S.NoKeywordText>
-            ) : (
-              displayedKeywords.map((keyword) => (
-                <Label
-                  key={keyword}
-                  type="KEYWORD"
-                  text={keyword}
-                  size="semiSmall"
-                  backgroundColor={theme.COLOR.grey0}
-                />
-              ))
-            )}
-          </S.Keywords>
+
+          <S.MissionInfoContainer>
+            <S.PageTitle>{roomInfo.title}</S.PageTitle>
+            <S.Keywords>
+              {displayedKeywords.length === 0 ? (
+                <S.NoKeywordText>지정된 키워드 없음</S.NoKeywordText>
+              ) : (
+                displayedKeywords.map((keyword) => (
+                  <Label
+                    key={keyword}
+                    type="KEYWORD"
+                    text={keyword}
+                    size="semiSmall"
+                    backgroundColor={theme.COLOR.grey0}
+                  />
+                ))
+              )}
+            </S.Keywords>
+          </S.MissionInfoContainer>
         </S.FeedbackContainerHeader>
 
         <RevieweeFeedbackForm
diff --git a/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx b/frontend/src/components/feedback/feedbackLayout/ReviewerFeedbackLayout.tsx
similarity index 84%
rename from frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx
rename to frontend/src/components/feedback/feedbackLayout/ReviewerFeedbackLayout.tsx
index 3f2833041..edbefe020 100644
--- a/frontend/src/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.tsx
+++ b/frontend/src/components/feedback/feedbackLayout/ReviewerFeedbackLayout.tsx
@@ -4,7 +4,7 @@ import useMutateFeedback from "@/hooks/mutations/useMutateFeedback";
 import Button from "@/components/common/button/Button";
 import Label from "@/components/common/label/Label";
 import ReviewerFeedbackForm from "@/components/feedback/feedbackForm/ReviewerFeedbackForm";
-import * as S from "@/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout.style";
+import * as S from "@/components/feedback/feedbackLayout/FeedbackLayout.style";
 import { ReviewerFeedbackData } from "@/@types/feedback";
 import { ReviewerInfo } from "@/@types/reviewer";
 import { RoomInfo } from "@/@types/roomInfo";
@@ -111,22 +111,25 @@ const ReviewerFeedbackLayout = ({
             {feedbackPageType === "edit" && "수정하기"}
             {feedbackPageType === "view" && "확인하기"}
           </S.PageType>
-          <S.PageTitle>{roomInfo.title}</S.PageTitle>
-          <S.Keywords>
-            {displayedKeywords.length === 0 ? (
-              <S.NoKeywordText>지정된 키워드 없음</S.NoKeywordText>
-            ) : (
-              displayedKeywords.map((keyword) => (
-                <Label
-                  key={keyword}
-                  type="KEYWORD"
-                  text={keyword}
-                  size="semiSmall"
-                  backgroundColor={theme.COLOR.grey0}
-                />
-              ))
-            )}
-          </S.Keywords>
+
+          <S.MissionInfoContainer>
+            <S.PageTitle>{roomInfo.title}</S.PageTitle>
+            <S.Keywords>
+              {displayedKeywords.length === 0 ? (
+                <S.NoKeywordText>지정된 키워드 없음</S.NoKeywordText>
+              ) : (
+                displayedKeywords.map((keyword) => (
+                  <Label
+                    key={keyword}
+                    type="KEYWORD"
+                    text={keyword}
+                    size="semiSmall"
+                    backgroundColor={theme.COLOR.grey0}
+                  />
+                ))
+              )}
+            </S.Keywords>
+          </S.MissionInfoContainer>
         </S.FeedbackContainerHeader>
 
         <ReviewerFeedbackForm
diff --git a/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.style.ts b/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.style.ts
deleted file mode 100644
index a0dddc355..000000000
--- a/frontend/src/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout.style.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import styled from "styled-components";
-
-export const FeedbackContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 1.6rem;
-
-  width: 100%;
-  min-width: 335px;
-  max-width: 700px;
-  margin: auto;
-`;
-
-export const FeedbackContainerHeader = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 1.6rem;
-`;
-
-export const PageType = styled.p`
-  font: ${({ theme }) => theme.TEXT.small_bold};
-  color: ${({ theme }) => theme.COLOR.grey3};
-`;
-
-export const PageTitle = styled.p`
-  font: ${({ theme }) => theme.TEXT.large_bold};
-  color: ${({ theme }) => theme.COLOR.black};
-`;
-
-export const Keywords = styled.div`
-  display: flex;
-  gap: 0.5rem;
-`;
-
-export const ButtonWrapper = styled.div`
-  display: flex;
-  gap: 2rem;
-  align-items: center;
-  justify-content: center;
-
-  margin-top: 1rem;
-`;
-
-export const NoKeywordText = styled.span`
-  font: ${({ theme }) => theme.TEXT.semiSmall};
-  color: ${({ theme }) => theme.COLOR.grey2};
-`;
diff --git a/frontend/src/pages/feedbackForm/RevieweeFeedbackPage.tsx b/frontend/src/pages/feedbackForm/RevieweeFeedbackPage.tsx
index e11e50210..d28efeb5c 100644
--- a/frontend/src/pages/feedbackForm/RevieweeFeedbackPage.tsx
+++ b/frontend/src/pages/feedbackForm/RevieweeFeedbackPage.tsx
@@ -1,7 +1,7 @@
 import { useLocation, useParams } from "react-router-dom";
 import { useFetchRevieweeFeedback } from "@/hooks/queries/useFetchFeedback";
 import { useFetchDetailRoomInfo } from "@/hooks/queries/useFetchRooms";
-import RevieweeFeedbackLayout from "@/components/feedback/revieweeFeedbackLayout/RevieweeFeedbackLayout";
+import RevieweeFeedbackLayout from "@/components/feedback/feedbackLayout/RevieweeFeedbackLayout";
 import { ReviewerInfo } from "@/@types/reviewer";
 
 const RevieweeFeedbackPage = () => {
diff --git a/frontend/src/pages/feedbackForm/ReviewerFeedbackPage.tsx b/frontend/src/pages/feedbackForm/ReviewerFeedbackPage.tsx
index 2b3c40ca5..ccfd44cab 100644
--- a/frontend/src/pages/feedbackForm/ReviewerFeedbackPage.tsx
+++ b/frontend/src/pages/feedbackForm/ReviewerFeedbackPage.tsx
@@ -1,7 +1,7 @@
 import { useLocation, useParams } from "react-router-dom";
 import { useFetchReviewerFeedback } from "@/hooks/queries/useFetchFeedback";
 import { useFetchDetailRoomInfo } from "@/hooks/queries/useFetchRooms";
-import ReviewerFeedbackLayout from "@/components/feedback/reviewerFeedbackLayout/ReviewerFeedbackLayout";
+import ReviewerFeedbackLayout from "@/components/feedback/feedbackLayout/ReviewerFeedbackLayout";
 import { ReviewerInfo } from "@/@types/reviewer";
 
 const ReviewerFeedbackPage = () => {

From 052332a6b85348be2e931daa1983a5afdbf0aa8b Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Mon, 4 Nov 2024 22:30:38 +0900
Subject: [PATCH 26/28] =?UTF-8?q?feat:=20=EA=B3=B5=EA=B0=9C,=20=EB=B9=84?=
 =?UTF-8?q?=EA=B3=B5=EA=B0=9C=20=EB=AC=B8=EA=B5=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../feedback/feedbackForm/RevieweeFeedbackForm.tsx          | 6 +++---
 .../feedback/feedbackForm/ReviewerFeedbackForm.tsx          | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx b/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx
index ab69ec401..90ea128bc 100644
--- a/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx
+++ b/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx
@@ -39,7 +39,7 @@ const RevieweeFeedbackForm = ({
       <S.ItemContainer>
         <S.QuestionContainer>
           <S.ModalQuestion $isInvalid={isClicked && formState.evaluationPoint === 0}>
-            리뷰이의 개발 역량 향상을 위해 코드를 평가 해주세요.
+            [공개] 리뷰이의 개발 역량 향상을 위해 코드를 평가 해주세요.
             <S.Required> *필수입력</S.Required>
           </S.ModalQuestion>
         </S.QuestionContainer>
@@ -53,7 +53,7 @@ const RevieweeFeedbackForm = ({
       <S.ItemContainer>
         <S.QuestionContainer>
           <S.ModalQuestion $isInvalid={isClicked && formState.feedbackKeywords.length === 0}>
-            위와 같이 선택한 이유를 알려주세요. (복수선택 가능)
+            [공개] 위와 같이 선택한 이유를 알려주세요. (복수선택 가능)
             <S.Required> *필수입력</S.Required>
           </S.ModalQuestion>
         </S.QuestionContainer>
@@ -81,7 +81,7 @@ const RevieweeFeedbackForm = ({
       </S.ItemContainer>
 
       <S.ItemContainer>
-        <S.ModalQuestion>추가적으로 하고 싶은 피드백이 있다면 남겨주세요.</S.ModalQuestion>
+        <S.ModalQuestion>[공개] 추가적으로 하고 싶은 피드백이 있다면 남겨주세요.</S.ModalQuestion>
         <S.TextareaWrapper>
           <Textarea
             rows={10}
diff --git a/frontend/src/components/feedback/feedbackForm/ReviewerFeedbackForm.tsx b/frontend/src/components/feedback/feedbackForm/ReviewerFeedbackForm.tsx
index f3cf73225..a64d49437 100644
--- a/frontend/src/components/feedback/feedbackForm/ReviewerFeedbackForm.tsx
+++ b/frontend/src/components/feedback/feedbackForm/ReviewerFeedbackForm.tsx
@@ -39,7 +39,7 @@ const ReviewerFeedbackForm = ({
       <S.ItemContainer>
         <S.QuestionContainer>
           <S.ModalQuestion $isInvalid={isClicked && formState.evaluationPoint === 0}>
-            리뷰어의 소프트 스킬 역량 향상을 위해 피드백을 해주세요.
+            [공개] 리뷰어의 소프트 스킬 역량 향상을 위해 피드백을 해주세요.
             <S.Required> *필수입력</S.Required>
           </S.ModalQuestion>
         </S.QuestionContainer>
@@ -54,7 +54,7 @@ const ReviewerFeedbackForm = ({
       <S.ItemContainer>
         <S.QuestionContainer>
           <S.ModalQuestion $isInvalid={isClicked && formState.feedbackKeywords.length === 0}>
-            위와 같이 선택한 이유를 알려주세요. (복수선택 가능)
+            [공개] 위와 같이 선택한 이유를 알려주세요. (복수선택 가능)
             <S.Required> *필수입력</S.Required>
           </S.ModalQuestion>
         </S.QuestionContainer>
@@ -69,7 +69,7 @@ const ReviewerFeedbackForm = ({
       </S.ItemContainer>
 
       <S.ItemContainer>
-        <S.ModalQuestion>추가적으로 하고 싶은 피드백이 있다면 남겨주세요.</S.ModalQuestion>
+        <S.ModalQuestion>[공개] 추가적으로 하고 싶은 피드백이 있다면 남겨주세요.</S.ModalQuestion>
         <S.TextareaWrapper>
           <Textarea
             rows={10}

From feb64bfd34dfd4a293774f05e5f30fbabaa9735b Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Mon, 4 Nov 2024 22:54:40 +0900
Subject: [PATCH 27/28] =?UTF-8?q?fix:=20=EB=A9=94=EB=89=B4=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=EB=B0=B0=EA=B2=BD=EC=83=89=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/common/button/Button.style.ts | 2 +-
 frontend/src/components/common/header/SideNavBar.tsx  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/common/button/Button.style.ts b/frontend/src/components/common/button/Button.style.ts
index 058b88795..68ca029e3 100644
--- a/frontend/src/components/common/button/Button.style.ts
+++ b/frontend/src/components/common/button/Button.style.ts
@@ -48,7 +48,7 @@ const variantStyles = (variant: ButtonVariant, outline?: boolean) => {
 const getColor = (theme: ThemeType, variant: ButtonVariant) => {
   switch (variant) {
     case "default":
-      return theme.COLOR.black;
+      return theme.COLOR.white;
     case "primary":
       return theme.COLOR.primary2;
     case "secondary":
diff --git a/frontend/src/components/common/header/SideNavBar.tsx b/frontend/src/components/common/header/SideNavBar.tsx
index 94fcd2853..2699960de 100644
--- a/frontend/src/components/common/header/SideNavBar.tsx
+++ b/frontend/src/components/common/header/SideNavBar.tsx
@@ -108,7 +108,7 @@ const SideNavBar = ({ isOpen, onClose, isLoggedIn }: SideNavBarProps) => {
             <Button
               onClick={handleClose}
               size="xSmall"
-              style={{ background: "transparent", color: "black" }}
+              style={{ background: "transparent", color: "black", border: "none" }}
               ref={firstChildRef}
             >
               <Icon kind="close" size="2.4rem" />
@@ -153,7 +153,7 @@ const SideNavBar = ({ isOpen, onClose, isLoggedIn }: SideNavBarProps) => {
             <Button
               onClick={onClose}
               size="xSmall"
-              style={{ background: "transparent", color: "black" }}
+              style={{ background: "transparent", color: "black", border: "none" }}
               ref={firstChildRef}
             >
               <Icon kind="close" size="2.4rem" />

From de4ee699f22544652b61db6c4e131ad6f39c65ab Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Mon, 4 Nov 2024 22:59:02 +0900
Subject: [PATCH 28/28] =?UTF-8?q?feat:=20=EB=A6=AC=EB=B7=B0=EC=9D=B4=20?=
 =?UTF-8?q?=ED=94=BC=EB=93=9C=EB=B0=B1=EB=8F=84=20=ED=8F=BC=20=EC=9C=A0?=
 =?UTF-8?q?=ED=9A=A8=EC=84=B1=20=ED=86=B5=EA=B3=BC=20=EB=AA=BB=20=ED=95=B4?=
 =?UTF-8?q?=EB=8F=84=20=EB=B2=84=ED=8A=BC=20=EB=88=8C=EB=A6=AC=EA=B2=8C=20?=
 =?UTF-8?q?=ED=95=98=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../feedback/feedbackLayout/RevieweeFeedbackLayout.tsx        | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/src/components/feedback/feedbackLayout/RevieweeFeedbackLayout.tsx b/frontend/src/components/feedback/feedbackLayout/RevieweeFeedbackLayout.tsx
index fae95deb9..959b877bf 100644
--- a/frontend/src/components/feedback/feedbackLayout/RevieweeFeedbackLayout.tsx
+++ b/frontend/src/components/feedback/feedbackLayout/RevieweeFeedbackLayout.tsx
@@ -147,9 +147,7 @@ const RevieweeFeedbackLayout = ({
           <Button onClick={() => navigate(-1)} type="button" variant="primary" outline={true}>
             뒤로가기
           </Button>
-          <Button onClick={handleSubmit} disabled={!isFormValid}>
-            {buttonText}
-          </Button>
+          <Button onClick={handleSubmit}>{buttonText}</Button>
         </S.ButtonWrapper>
       </S.FeedbackContainer>
     </>