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/@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/common/button/Button.style.ts b/frontend/src/components/common/button/Button.style.ts
index 170e5e3ad..68ca029e3 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.white;
+    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}
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" />
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");
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/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/feedbackCard/FeedbackCard.style.ts b/frontend/src/components/feedback/feedbackCard/FeedbackCard.style.ts
index 54fb309cc..a6c2251ad 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,43 @@ export const FeedbackCardContainer = styled.div<{ $isTypeDevelop: boolean }>`
   `}
 `;
 
+export const Overlay = styled.div`
+  pointer-events: auto;
+
+  position: absolute;
+  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;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+
+  font: ${({ theme }) => theme.TEXT.large_bold};
+`;
+
+export const FeedbackContent = 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..60a100d15 100644
--- a/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx
+++ b/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx
@@ -1,9 +1,12 @@
+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";
 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";
 
@@ -18,6 +21,7 @@ const FeedbackCard = ({
   feedbackCardData,
   feedbackType,
 }: FeedbackCardProps) => {
+  const navigate = useNavigate();
   const getFeedbackTarget = (feedbackType: "develop" | "social") => {
     if (selectedFeedbackType === "받은 피드백") {
       return feedbackType === "develop" ? "FROM. 나의 리뷰어" : "FROM. 나의 리뷰이";
@@ -25,10 +29,42 @@ const FeedbackCard = ({
     return feedbackType === "develop" ? "TO. 나의 리뷰이" : "TO. 나의 리뷰어";
   };
 
+  const reviewer: ReviewerInfo = {
+    userId: feedbackCardData.receiverId,
+    username: feedbackCardData.username,
+    link: feedbackCardData.profile,
+    isWrited: feedbackCardData.isWrited,
+  };
+
+  // 피드백 페이지 이동 함수
+  const handleNavigateFeedbackPage = () => {
+    navigate(
+      `/rooms/${feedbackCardData.roomId}/feedback/${feedbackType === "develop" ? "reviewer" : "reviewee"}?username=${feedbackCardData.username}`,
+      {
+        state: { reviewer },
+      },
+    );
+  };
+
   return (
     <>
       <S.ScreenReader>미션의 상세 피드백 내용입니다.</S.ScreenReader>
+
       <S.FeedbackCardContainer $isTypeDevelop={feedbackType === "develop"}>
+        {!feedbackCardData.isWrited && (
+          <S.Overlay>
+            <S.ButtonWrapper>
+              <p>상대방 피드백을 작성해야 볼 수 있습니다.</p>
+              <Button
+                variant={feedbackType ? "primary" : "secondary"}
+                onClick={handleNavigateFeedbackPage}
+              >
+                피드백 작성하러가기
+              </Button>
+            </S.ButtonWrapper>
+          </S.Overlay>
+        )}
+
         <S.FeedbackHeader>
           <HoverStyledLink to={`/profile/${feedbackCardData.username}`} tabIndex={-1}>
             <S.FeedbackProfile>
@@ -51,35 +87,39 @@ 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.FeedbackContent $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.FeedbackContent>
       </S.FeedbackCardContainer>
     </>
   );
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/components/feedback/feedbackForm/FeedbackForm.style.ts b/frontend/src/components/feedback/feedbackForm/FeedbackForm.style.ts
index 778a8b412..f44524885 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,15 +19,18 @@ 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};
+  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`
-  padding-top: 0.5rem;
   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 80a52ec81..90ea128bc 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 { FeedbackPageType } from "@/utils/feedbackUtils";
 
 interface RevieweeFeedbackFormProps {
   formState: RevieweeFeedbackData;
@@ -17,7 +17,8 @@ interface RevieweeFeedbackFormProps {
     key: keyof RevieweeFeedbackData,
     value: RevieweeFeedbackData[keyof RevieweeFeedbackData],
   ) => void;
-  modalType: FeedbackModalType;
+  feedbackPageType: FeedbackPageType;
+  isClicked: boolean;
 }
 
 const getDevelopKeywordOptions = (selectedEvaluationId: number | undefined) => {
@@ -27,62 +28,73 @@ const getDevelopKeywordOptions = (selectedEvaluationId: number | undefined) => {
   return DEVELOP_GOOD_KEYWORD_OPTIONS;
 };
 
-const RevieweeFeedbackForm = ({ formState, onChange, modalType }: RevieweeFeedbackFormProps) => {
+const RevieweeFeedbackForm = ({
+  formState,
+  onChange,
+  feedbackPageType,
+  isClicked,
+}: RevieweeFeedbackFormProps) => {
   return (
     <S.FeedbackFormContainer>
       <S.ItemContainer>
         <S.QuestionContainer>
-          <S.ModalQuestion>리뷰이의 개발 역량 향상을 위해 코드를 평가 해주세요.</S.ModalQuestion>
-          <S.Required>*필수입력</S.Required>
+          <S.ModalQuestion $isInvalid={isClicked && formState.evaluationPoint === 0}>
+            [공개] 리뷰이의 개발 역량 향상을 위해 코드를 평가 해주세요.
+            <S.Required> *필수입력</S.Required>
+          </S.ModalQuestion>
         </S.QuestionContainer>
         <EvaluationPointBar
           initialOptionId={formState.evaluationPoint}
           onChange={(value) => onChange("evaluationPoint", value)}
-          readonly={modalType === "view"}
+          readonly={feedbackPageType === "view"}
         />
       </S.ItemContainer>
 
       <S.ItemContainer>
         <S.QuestionContainer>
-          <S.ModalQuestion>위와 같이 선택한 이유를 알려주세요. (1개 이상 선택)</S.ModalQuestion>
-          <S.Required>*필수입력</S.Required>
+          <S.ModalQuestion $isInvalid={isClicked && formState.feedbackKeywords.length === 0}>
+            [공개] 위와 같이 선택한 이유를 알려주세요. (복수선택 가능)
+            <S.Required> *필수입력</S.Required>
+          </S.ModalQuestion>
         </S.QuestionContainer>
         <KeywordOptionButton
           selectedOptions={formState.feedbackKeywords}
           onChange={(value) => onChange("feedbackKeywords", value)}
           selectedEvaluationId={formState.evaluationPoint}
-          readonly={modalType === "view"}
+          readonly={feedbackPageType === "view"}
           options={getDevelopKeywordOptions(formState.evaluationPoint)}
         />
       </S.ItemContainer>
 
       <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}
           onChange={(value) => onChange("recommendationPoint", value)}
-          readonly={modalType === "view"}
+          readonly={feedbackPageType === "view"}
         />
       </S.ItemContainer>
 
       <S.ItemContainer>
-        <S.ModalQuestion>추가적으로 하고 싶은 피드백이 있다면 남겨 주세요.</S.ModalQuestion>
+        <S.ModalQuestion>[공개] 추가적으로 하고 싶은 피드백이 있다면 남겨주세요.</S.ModalQuestion>
         <S.TextareaWrapper>
           <Textarea
             rows={10}
             showCharCount={true}
             maxLength={2000}
             placeholder={
-              modalType === "view"
-                ? "없음"
+              feedbackPageType === "view"
+                ? "미작성"
                 : "상대 리뷰이의 개발 역량 향상을 위해 피드백을 남겨주세요."
             }
             value={formState.feedbackText}
             onChange={(e) => onChange("feedbackText", e.target.value)}
-            readOnly={modalType === "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 27056308b..a64d49437 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 { FeedbackPageType } from "@/utils/feedbackUtils";
 
 interface ReviewerFeedbackFormProps {
   formState: ReviewerFeedbackData;
@@ -17,7 +17,8 @@ interface ReviewerFeedbackFormProps {
     key: keyof ReviewerFeedbackData,
     value: ReviewerFeedbackData[keyof ReviewerFeedbackData],
   ) => void;
-  modalType: FeedbackModalType;
+  feedbackPageType: FeedbackPageType;
+  isClicked: boolean;
 }
 
 const getSocialKeywordOptions = (selectedEvaluationId: number | undefined) => {
@@ -27,54 +28,61 @@ const getSocialKeywordOptions = (selectedEvaluationId: number | undefined) => {
   return SOCIAL_GOOD_KEYWORD_OPTIONS;
 };
 
-const ReviewerFeedbackForm = ({ formState, onChange, modalType }: ReviewerFeedbackFormProps) => {
+const ReviewerFeedbackForm = ({
+  formState,
+  onChange,
+  feedbackPageType,
+  isClicked,
+}: ReviewerFeedbackFormProps) => {
   return (
     <S.FeedbackFormContainer>
       <S.ItemContainer>
         <S.QuestionContainer>
-          <S.ModalQuestion>
-            리뷰어의 소프트 스킬 역량 향상을 위해 피드백을 해주세요.
+          <S.ModalQuestion $isInvalid={isClicked && formState.evaluationPoint === 0}>
+            [공개] 리뷰어의 소프트 스킬 역량 향상을 위해 피드백을 해주세요.
+            <S.Required> *필수입력</S.Required>
           </S.ModalQuestion>
-          <S.Required>*필수입력</S.Required>
         </S.QuestionContainer>
         <EvaluationPointBar
           initialOptionId={formState.evaluationPoint}
           onChange={(value) => onChange("evaluationPoint", value)}
-          readonly={modalType === "view"}
           color={theme.COLOR.secondary}
+          readonly={feedbackPageType === "view"}
         />
       </S.ItemContainer>
 
       <S.ItemContainer>
         <S.QuestionContainer>
-          <S.ModalQuestion>위와 같이 선택한 이유를 알려주세요. (1개 이상 선택)</S.ModalQuestion>
-          <S.Required>*필수입력</S.Required>
+          <S.ModalQuestion $isInvalid={isClicked && formState.feedbackKeywords.length === 0}>
+            [공개] 위와 같이 선택한 이유를 알려주세요. (복수선택 가능)
+            <S.Required> *필수입력</S.Required>
+          </S.ModalQuestion>
         </S.QuestionContainer>
         <KeywordOptionButton
           selectedOptions={formState.feedbackKeywords}
           onChange={(value) => onChange("feedbackKeywords", value)}
           selectedEvaluationId={formState.evaluationPoint}
-          readonly={modalType === "view"}
           options={getSocialKeywordOptions(formState.evaluationPoint)}
           color={theme.COLOR.secondary}
+          readonly={feedbackPageType === "view"}
         />
       </S.ItemContainer>
 
       <S.ItemContainer>
-        <S.ModalQuestion>추가적으로 하고 싶은 피드백이 있다면 남겨 주세요.</S.ModalQuestion>
+        <S.ModalQuestion>[공개] 추가적으로 하고 싶은 피드백이 있다면 남겨주세요.</S.ModalQuestion>
         <S.TextareaWrapper>
           <Textarea
             rows={10}
             showCharCount={true}
             maxLength={2000}
             placeholder={
-              modalType === "view"
-                ? "없음"
+              feedbackPageType === "view"
+                ? "미작성"
                 : "상대 리뷰어의 소프트 스킬 향상을 위해 피드백을 남겨주세요."
             }
             value={formState.feedbackText}
             onChange={(e) => onChange("feedbackText", e.target.value)}
-            readOnly={modalType === "view"}
+            readOnly={feedbackPageType === "view"}
           />
         </S.TextareaWrapper>
       </S.ItemContainer>
diff --git a/frontend/src/components/feedback/reviewerFeedbackModal/ReviewerFeedbackModal.style.ts b/frontend/src/components/feedback/feedbackLayout/FeedbackLayout.style.ts
similarity index 67%
rename from frontend/src/components/feedback/reviewerFeedbackModal/ReviewerFeedbackModal.style.ts
rename to frontend/src/components/feedback/feedbackLayout/FeedbackLayout.style.ts
index 13e5fb4af..055972c6f 100644
--- a/frontend/src/components/feedback/reviewerFeedbackModal/ReviewerFeedbackModal.style.ts
+++ b/frontend/src/components/feedback/feedbackLayout/FeedbackLayout.style.ts
@@ -1,27 +1,40 @@
 import styled from "styled-components";
 
-interface ModalQuestionProps {
-  required?: boolean;
-}
-
 export const FeedbackContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 1.6rem;
+  gap: 2rem;
+
+  width: 100%;
+  min-width: 335px;
+  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 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};
 `;
@@ -37,25 +50,12 @@ export const ItemContainer = styled.div`
   gap: 0.8rem;
 `;
 
-export const ModalQuestion = 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/feedbackLayout/RevieweeFeedbackLayout.tsx b/frontend/src/components/feedback/feedbackLayout/RevieweeFeedbackLayout.tsx
new file mode 100644
index 000000000..959b877bf
--- /dev/null
+++ b/frontend/src/components/feedback/feedbackLayout/RevieweeFeedbackLayout.tsx
@@ -0,0 +1,157 @@
+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/feedbackLayout/FeedbackLayout.style";
+import { RevieweeFeedbackData } from "@/@types/feedback";
+import { ReviewerInfo } from "@/@types/reviewer";
+import { RoomInfo } from "@/@types/roomInfo";
+import { theme } from "@/styles/theme";
+import { FeedbackPageType } from "@/utils/feedbackUtils";
+
+interface RevieweeFeedbackProps {
+  feedbackPageType: FeedbackPageType;
+  roomInfo: Pick<RoomInfo, "id" | "title" | "keywords">;
+  reviewee?: ReviewerInfo;
+  feedbackData?: RevieweeFeedbackData;
+}
+
+const getInitialFormState = (
+  reviewee?: ReviewerInfo,
+  feedbackData?: RevieweeFeedbackData,
+): RevieweeFeedbackData => ({
+  feedbackId: feedbackData?.feedbackId || 0,
+  receiverId: feedbackData?.receiverId || reviewee?.userId || 0,
+  evaluationPoint: feedbackData?.evaluationPoint || 0,
+  feedbackKeywords: feedbackData?.feedbackKeywords || [],
+  feedbackText: feedbackData?.feedbackText || "",
+  recommendationPoint: feedbackData?.recommendationPoint || 0,
+});
+
+const RevieweeFeedbackLayout = ({
+  feedbackPageType,
+  roomInfo,
+  reviewee,
+  feedbackData,
+}: RevieweeFeedbackProps) => {
+  const navigate = useNavigate();
+  const [formState, setFormState] = useState<RevieweeFeedbackData>(() =>
+    getInitialFormState(reviewee, feedbackData),
+  );
+  const { postRevieweeFeedbackMutation, putRevieweeFeedbackMutation } = useMutateFeedback(
+    roomInfo.id,
+  );
+  const [isClicked, setIsClicked] = useState(false);
+
+  const buttonText = feedbackPageType === "create" ? "작성하기" : "수정하기";
+
+  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));
+    }
+  }, [reviewee, feedbackData]);
+
+  const handleChange = (
+    key: keyof RevieweeFeedbackData,
+    value: RevieweeFeedbackData[keyof RevieweeFeedbackData],
+  ) => {
+    if (feedbackPageType === "view") return;
+
+    if (key === "evaluationPoint") {
+      setFormState((prevState) => ({
+        ...prevState,
+        evaluationPoint: value as number,
+        feedbackKeywords: [],
+      }));
+    } else {
+      setFormState((prevState) => ({ ...prevState, [key]: value }));
+    }
+  };
+
+  const handleSubmit = () => {
+    setIsClicked(true);
+
+    if (!isFormValid || feedbackPageType === "view") return;
+
+    if (feedbackPageType === "create") {
+      postRevieweeFeedbackMutation.mutate(
+        { feedbackData: formState },
+        {
+          onSuccess: () => {
+            navigate(-1);
+          },
+        },
+      );
+    }
+
+    if (feedbackPageType === "edit") {
+      putRevieweeFeedbackMutation.mutate(
+        { feedbackId: formState.feedbackId, feedbackData: formState },
+        {
+          onSuccess: () => {
+            navigate(-1);
+          },
+        },
+      );
+    }
+  };
+
+  return (
+    <>
+      <S.FeedbackContainer>
+        <S.FeedbackContainerHeader>
+          <S.PageType>
+            <>리뷰이 {reviewee?.username} 피드백 </>
+            {feedbackPageType === "create" && "작성하기"}
+            {feedbackPageType === "edit" && "수정하기"}
+            {feedbackPageType === "view" && "확인하기"}
+          </S.PageType>
+
+          <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
+          isClicked={isClicked}
+          formState={formState}
+          onChange={handleChange}
+          feedbackPageType={feedbackPageType}
+        />
+
+        <S.ButtonWrapper>
+          <Button onClick={() => navigate(-1)} type="button" variant="primary" outline={true}>
+            뒤로가기
+          </Button>
+          <Button onClick={handleSubmit}>{buttonText}</Button>
+        </S.ButtonWrapper>
+      </S.FeedbackContainer>
+    </>
+  );
+};
+
+export default RevieweeFeedbackLayout;
diff --git a/frontend/src/components/feedback/feedbackLayout/ReviewerFeedbackLayout.tsx b/frontend/src/components/feedback/feedbackLayout/ReviewerFeedbackLayout.tsx
new file mode 100644
index 000000000..edbefe020
--- /dev/null
+++ b/frontend/src/components/feedback/feedbackLayout/ReviewerFeedbackLayout.tsx
@@ -0,0 +1,155 @@
+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/feedbackLayout/FeedbackLayout.style";
+import { ReviewerFeedbackData } from "@/@types/feedback";
+import { ReviewerInfo } from "@/@types/reviewer";
+import { RoomInfo } from "@/@types/roomInfo";
+import { theme } from "@/styles/theme";
+import { FeedbackPageType } from "@/utils/feedbackUtils";
+
+interface ReviewerFeedbackProps {
+  feedbackPageType: FeedbackPageType;
+  roomInfo: Pick<RoomInfo, "id" | "title" | "keywords">;
+  reviewer?: ReviewerInfo;
+  feedbackData?: ReviewerFeedbackData;
+}
+
+const getInitialFormState = (
+  reviewer?: ReviewerInfo,
+  feedbackData?: ReviewerFeedbackData,
+): ReviewerFeedbackData => ({
+  feedbackId: feedbackData?.feedbackId || 0,
+  receiverId: feedbackData?.receiverId || reviewer?.userId || 0,
+  evaluationPoint: feedbackData?.evaluationPoint || 0,
+  feedbackKeywords: feedbackData?.feedbackKeywords || [],
+  feedbackText: feedbackData?.feedbackText || "",
+});
+
+const ReviewerFeedbackLayout = ({
+  feedbackPageType,
+  roomInfo,
+  reviewer,
+  feedbackData,
+}: ReviewerFeedbackProps) => {
+  const navigate = useNavigate();
+  const { postReviewerFeedbackMutation, putReviewerFeedbackMutation } = useMutateFeedback(
+    roomInfo.id,
+  );
+  const [formState, setFormState] = useState<ReviewerFeedbackData>(() =>
+    getInitialFormState(reviewer, feedbackData),
+  );
+  const [isClicked, setIsClicked] = useState(false);
+
+  const buttonText = feedbackPageType === "create" ? "작성하기" : "수정하기";
+
+  const displayedKeywords = roomInfo.keywords.filter((keyword) => keyword !== "");
+
+  const isFormValid = formState.evaluationPoint !== 0 && formState.feedbackKeywords.length > 0;
+
+  useEffect(() => {
+    if (feedbackData) {
+      setFormState(getInitialFormState(reviewer, feedbackData));
+    }
+  }, [reviewer, feedbackData]);
+
+  const handleChange = (
+    key: keyof ReviewerFeedbackData,
+    value: ReviewerFeedbackData[keyof ReviewerFeedbackData],
+  ) => {
+    if (feedbackPageType === "view") return;
+
+    if (key === "evaluationPoint") {
+      setFormState((prevState) => ({
+        ...prevState,
+        evaluationPoint: value as number,
+        feedbackKeywords: [],
+      }));
+    } else {
+      setFormState((prevState) => ({ ...prevState, [key]: value }));
+    }
+  };
+
+  const handleSubmit = () => {
+    setIsClicked(true);
+
+    if (!isFormValid || feedbackPageType === "view") return;
+
+    if (feedbackPageType === "create") {
+      postReviewerFeedbackMutation.mutate(
+        { feedbackData: formState },
+        {
+          onSuccess: () => {
+            navigate(-1);
+          },
+        },
+      );
+    }
+
+    if (feedbackPageType === "edit") {
+      putReviewerFeedbackMutation.mutate(
+        { feedbackId: formState.feedbackId, feedbackData: formState },
+        {
+          onSuccess: () => {
+            navigate(-1);
+          },
+        },
+      );
+    }
+  };
+
+  return (
+    <>
+      <S.FeedbackContainer>
+        <S.FeedbackContainerHeader>
+          <S.PageType>
+            <>리뷰어 {reviewer?.username} 피드백 </>
+            {feedbackPageType === "create" && "작성하기"}
+            {feedbackPageType === "edit" && "수정하기"}
+            {feedbackPageType === "view" && "확인하기"}
+          </S.PageType>
+
+          <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
+          isClicked={isClicked}
+          formState={formState}
+          onChange={handleChange}
+          feedbackPageType={feedbackPageType}
+        />
+
+        <S.ButtonWrapper>
+          <Button onClick={() => navigate(-1)} type="button" variant="secondary" outline={true}>
+            뒤로가기
+          </Button>
+          <Button onClick={handleSubmit} variant="secondary">
+            {buttonText}
+          </Button>
+        </S.ButtonWrapper>
+      </S.FeedbackContainer>
+    </>
+  );
+};
+
+export default ReviewerFeedbackLayout;
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.style.ts b/frontend/src/components/feedback/revieweeFeedbackModal/RevieweeFeedbackModal.style.ts
deleted file mode 100644
index fc7dc40ee..000000000
--- a/frontend/src/components/feedback/revieweeFeedbackModal/RevieweeFeedbackModal.style.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import styled from "styled-components";
-
-export const FeedbackContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 1.6rem;
-`;
-
-export const FeedbackContainerHeader = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 1.2rem;
-`;
-
-export const ModalType = styled.p`
-  font: ${({ theme }) => theme.TEXT.small_bold};
-  color: ${({ theme }) => theme.COLOR.grey3};
-`;
-
-export const ModalTitle = 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;
-  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/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/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/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..372d4638d 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>
@@ -41,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>
diff --git a/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx b/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx
index f9df884f0..6b49560e4 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 { getFeedbackPageType } 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(`/rooms/${roomInfo.id}/feedback/reviewee?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)),
@@ -55,8 +47,8 @@ const MyReviewee = ({ roomInfo }: MyRevieweeProps) => {
 
   // 리뷰 및 피드백 여부 버튼 렌더링 함수
   const renderRevieweeButton = (reviewee: ReviewerInfo) => {
-    const { buttonText } = getFeedbackType({
-      isReviewed: reviewee.isReviewed,
+    const { buttonText } = getFeedbackPageType({
+      isReviewed: reviewee.isReviewed ?? true,
       isWrited: reviewee.isWrited,
       isClosed: roomInfo.roomStatus === "CLOSE",
     });
@@ -65,16 +57,17 @@ const MyReviewee = ({ roomInfo }: MyRevieweeProps) => {
       return <p>코드리뷰를 하지 않았어요</p>;
     }
 
-    if (roomInfo.roomStatus === "CLOSE" && !reviewee.isWrited) {
-      return <p>피드백을 작성하지 않았어요</p>;
-    }
+    // TODO: 방 끝나도 계속 작성 가능
+    // 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 +131,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/components/roomDetailPage/myReviewer/MyReviewer.tsx b/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
index 621eb06cf..ff2030d58 100644
--- a/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
+++ b/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
@@ -1,44 +1,34 @@
-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 { getFeedbackPageType } 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(`/rooms/${roomInfo.id}/feedback/reviewer?username=${reviewer.username}`, {
+      state: { reviewer },
     });
-    setSelectedReviewer(reviewer);
-    setFeedbackTypeResult(feedbackType);
-    handleOpenModal();
   };
 
   // 피드백 여부 버튼 렌더링 함수
   const renderReviewerButton = (reviewer: ReviewerInfo) => {
-    const { buttonText } = getFeedbackType({
-      isReviewed: reviewer.isReviewed,
+    const { buttonText } = getFeedbackPageType({
+      isReviewed: reviewer.isReviewed ?? true,
       isWrited: reviewer.isWrited,
       isClosed: roomInfo.roomStatus === "CLOSE",
     });
@@ -47,15 +37,16 @@ const MyReviewer = ({ roomInfo }: MyReviewerProps) => {
       return <p>리뷰어가 리뷰를 하지 않았어요</p>;
     }
 
-    if (roomInfo.roomStatus === "CLOSE" && !reviewer.isWrited) {
-      return <p>피드백을 작성하지 않았어요</p>;
-    }
+    // TODO: 방이 끝나도 계속 작성 가능
+    // 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 +97,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/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/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/constants/message.ts b/frontend/src/constants/message.ts
index 4f9c91b62..64fcf0dca 100644
--- a/frontend/src/constants/message.ts
+++ b/frontend/src/constants/message.ts
@@ -4,12 +4,13 @@ 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: "이 방의 참여자가 없습니다.",
+  NO_PARTICIPANTS: "매칭 실패로 인해 참여자 목록을 볼 수 없습니다.",
   ONLY_REVIEWER: "리뷰어로만 참여 중입니다!",
   PULL_REQUEST_NOT_SUBMITTED: "PR을 제출하지 않아 매칭되지 않았습니다.",
 };
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/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/hooks/queries/useFetchFeedback.ts b/frontend/src/hooks/queries/useFetchFeedback.ts
index 53b36223f..9b729086b 100644
--- a/frontend/src/hooks/queries/useFetchFeedback.ts
+++ b/frontend/src/hooks/queries/useFetchFeedback.ts
@@ -7,7 +7,7 @@ import {
 } from "@/apis/feedback.api";
 import QUERY_KEYS from "@/apis/queryKeys";
 
-interface UseFetchReviewerFeedbackProps {
+interface UseFetchFeedbackProps {
   roomId: number;
   username: string;
   enabled: boolean;
@@ -30,11 +30,7 @@ export const useFetchDeliveredFeedback = (enabled: boolean) => {
 };
 
 // 리뷰어 -> 리뷰이
-export const useFetchRevieweeFeedback = ({
-  roomId,
-  username,
-  enabled,
-}: UseFetchReviewerFeedbackProps) => {
+export const useFetchRevieweeFeedback = ({ roomId, username, enabled }: UseFetchFeedbackProps) => {
   return useQuery({
     queryKey: [QUERY_KEYS.REVIEWEE_FEEDBACK, roomId.toString(), username],
     queryFn: () => getRevieweeFeedback(roomId, username),
@@ -43,11 +39,7 @@ export const useFetchRevieweeFeedback = ({
 };
 
 // 리뷰이 -> 리뷰어
-export const useFetchReviewerFeedback = ({
-  roomId,
-  username,
-  enabled,
-}: UseFetchReviewerFeedbackProps) => {
+export const useFetchReviewerFeedback = ({ roomId, username, enabled }: UseFetchFeedbackProps) => {
   return useQuery({
     queryKey: [QUERY_KEYS.REVIEWER_FEEDBACK, roomId.toString(), username],
     queryFn: () => getReviewerFeedback(roomId, username),
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
         }
       ]
     }
diff --git a/frontend/src/pages/feedbackForm/RevieweeFeedbackPage.tsx b/frontend/src/pages/feedbackForm/RevieweeFeedbackPage.tsx
new file mode 100644
index 000000000..d28efeb5c
--- /dev/null
+++ b/frontend/src/pages/feedbackForm/RevieweeFeedbackPage.tsx
@@ -0,0 +1,32 @@
+import { useLocation, useParams } from "react-router-dom";
+import { useFetchRevieweeFeedback } from "@/hooks/queries/useFetchFeedback";
+import { useFetchDetailRoomInfo } from "@/hooks/queries/useFetchRooms";
+import RevieweeFeedbackLayout from "@/components/feedback/feedbackLayout/RevieweeFeedbackLayout";
+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,
+    enabled: reviewee.isWrited,
+  });
+
+  return (
+    <RevieweeFeedbackLayout
+      feedbackPageType={reviewee.isWrited ? "edit" : "create"}
+      roomInfo={roomInfo}
+      reviewee={reviewee}
+      feedbackData={feedbackData}
+    />
+  );
+};
+
+export default RevieweeFeedbackPage;
diff --git a/frontend/src/pages/feedbackForm/ReviewerFeedbackPage.tsx b/frontend/src/pages/feedbackForm/ReviewerFeedbackPage.tsx
new file mode 100644
index 000000000..ccfd44cab
--- /dev/null
+++ b/frontend/src/pages/feedbackForm/ReviewerFeedbackPage.tsx
@@ -0,0 +1,32 @@
+import { useLocation, useParams } from "react-router-dom";
+import { useFetchReviewerFeedback } from "@/hooks/queries/useFetchFeedback";
+import { useFetchDetailRoomInfo } from "@/hooks/queries/useFetchRooms";
+import ReviewerFeedbackLayout from "@/components/feedback/feedbackLayout/ReviewerFeedbackLayout";
+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,
+    enabled: reviewer.isWrited,
+  });
+
+  return (
+    <ReviewerFeedbackLayout
+      feedbackPageType={reviewer.isWrited ? "edit" : "create"}
+      roomInfo={roomInfo}
+      reviewer={reviewer}
+      feedbackData={feedbackData}
+    />
+  );
+};
+
+export default ReviewerFeedbackPage;
diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
index 638893541..f0734c152 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: `/rooms/:roomId/feedback/reviewer`,
+            element: <ReviewerFeedbackPage />,
+          },
+          {
+            path: `/rooms/:roomId/feedback/reviewee`,
+            element: <RevieweeFeedbackPage />,
+          },
           {
             path: `profile`,
             element: <ProfilePage />,
diff --git a/frontend/src/utils/feedbackUtils.ts b/frontend/src/utils/feedbackUtils.ts
index 4d18a8167..a08bcf878 100644
--- a/frontend/src/utils/feedbackUtils.ts
+++ b/frontend/src/utils/feedbackUtils.ts
@@ -1,30 +1,33 @@
 // 피드백 작성/수정/확인 타입 구분
-export type FeedbackModalType = "create" | "edit" | "view";
+export type FeedbackPageType = "create" | "edit" | "view";
 
-interface FeedbackTypeProps {
+interface FeedbackPageTypeProps {
   isReviewed: boolean;
   isWrited: boolean;
   isClosed: boolean;
 }
 
 export interface FeedbackTypeResult {
-  modalType: FeedbackModalType;
+  feedbackPageType: FeedbackPageType;
   buttonText: string;
 }
 
-export const getFeedbackType = ({
+export const getFeedbackPageType = ({
   isReviewed,
   isWrited,
   isClosed,
-}: FeedbackTypeProps): FeedbackTypeResult => {
+}: FeedbackPageTypeProps): FeedbackTypeResult => {
   if (!isReviewed) {
-    return { modalType: "create", buttonText: "피드백 작성하기" };
-  }
-  if (isClosed) {
-    return { modalType: "view", 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: "피드백 작성하기" };
 };
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";