From f89f13a7d3d7964f4e1f9fd41144fa768971cfa1 Mon Sep 17 00:00:00 2001
From: hjkl <goni1653@hufs.ac.kr>
Date: Wed, 22 Jul 2026 13:19:30 +0900
Subject: [PATCH 1/2] =?UTF-8?q?design:=20=ED=9B=84=EA=B8=B0=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1=20=EC=B2=98=EC=9D=8C~=EC=8A=A4=ED=85=9D2=EA=B9=8C?=
 =?UTF-8?q?=EC=A7=80=20=EB=B0=98=EC=9D=91=ED=98=95=20ui=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/(protected)/reviews/new/page.tsx          |  2 +-
 .../project-invite-accept-modal.tsx           | 84 +++++++++----------
 .../components/project-invite-handler.tsx     |  8 --
 .../write-review/review-spectrum-slider.tsx   | 17 ++--
 .../write-review/review-step-spectrum.tsx     | 20 +++--
 .../write-review/review-step-tag.tsx          | 18 ++--
 .../write-review/write-review-flow.tsx        | 40 ++++++---
 .../components/dialog/confirmation-dialog.tsx |  4 +-
 shared/components/step-indicator.tsx          | 11 ++-
 shared/constants/guidance-copy.ts             |  5 +-
 10 files changed, 113 insertions(+), 96 deletions(-)

diff --git a/app/(protected)/reviews/new/page.tsx b/app/(protected)/reviews/new/page.tsx
index 3ec4bde3..c21a5ac6 100644
--- a/app/(protected)/reviews/new/page.tsx
+++ b/app/(protected)/reviews/new/page.tsx
@@ -85,7 +85,7 @@ const ReviewNewPage = async ({ searchParams }: ReviewNewPageProps) => {
   });
 
   return (
-    <div className="flex min-h-[calc(100vh-73px-168px)] flex-col items-center bg-white px-4 py-15">
+    <div className="flex min-h-[calc(100vh-73px-168px)] flex-col items-center bg-white px-5 py-15 lg:px-4">
       <HydrationBoundary state={dehydrate(queryClient)}>
         <WriteReviewFlow projectId={projectId} revieweeId={revieweeId} revieweeName={revieweeName} />
       </HydrationBoundary>
diff --git a/features/project/components/project-invite-accept-modal.tsx b/features/project/components/project-invite-accept-modal.tsx
index 1b5bb60e..be73bf1f 100644
--- a/features/project/components/project-invite-accept-modal.tsx
+++ b/features/project/components/project-invite-accept-modal.tsx
@@ -14,8 +14,6 @@ import { PROJECT_INVITE_MAX_POSITIONS, PROJECT_POSITION_LABELS, PROJECT_POSITION
 
 type ProjectInviteAcceptModalProps = {
   open: boolean;
-  /** 링크를 공유한 사람의 이름. 백엔드 조회 없이 표시할 수 있는 유일한 프로젝트 맥락이다. */
-  inviterName?: string;
   onOpenChange: (open: boolean) => void;
   onConfirm: (projectPositions: ProjectPositionValue[]) => void | Promise<void>;
   isConfirming?: boolean;
@@ -24,7 +22,6 @@ type ProjectInviteAcceptModalProps = {
 
 export const ProjectInviteAcceptModal = ({
   open,
-  inviterName,
   onOpenChange,
   onConfirm,
   isConfirming = false,
@@ -49,57 +46,54 @@ export const ProjectInviteAcceptModal = ({
       <DialogAnimatedPortal
         open={open}
         className={cn(
-          'border-border-gray bg-surface-white fixed top-1/2 left-1/2 z-50 flex w-md max-w-[calc(100vw-32px)] flex-col',
+          'border-border-gray bg-surface-white fixed top-1/2 left-1/2 z-50 flex w-full max-w-[min(28rem,calc(100vw-40px))] flex-col',
           'gap-4 overflow-hidden rounded-xl border p-6 outline-none',
         )}
       >
-        <div className="flex w-full shrink-0 flex-col gap-2 px-4 py-2">
-          <Dialog.Title className="text-heading-base text-text-basic leading-normal font-bold">후기 작성</Dialog.Title>
-          <Dialog.Description asChild>
-            <div className="text-body-base text-text-subtle flex flex-col leading-normal">
-              <span>
-                {inviterName ? <span className="text-text-basic font-bold">{inviterName}님이 초대한 </span> : null}
-                프로젝트의 후기 작성에 참여하시겠습니까?
-              </span>
-            </div>
+        <div className="flex w-full min-w-0 flex-col gap-2 py-2">
+          <Dialog.Title className="text-heading-base text-text-basic leading-normal font-bold">
+            프로젝트 참여
+          </Dialog.Title>
+          <Dialog.Description className="text-body-base text-text-subtle leading-normal">
+            이번 프로젝트에서 본인의 역할을 선택해주세요.
           </Dialog.Description>
-        </div>
 
-        <div className="flex flex-col gap-2 px-4">
-          <p className="text-body-sm text-text-basic font-medium">
-            이 프로젝트에서 맡은 직군을 선택해주세요. (최대 {PROJECT_INVITE_MAX_POSITIONS}개)
-          </p>
-          <MultiSelect.Root
-            value={selectedPositions}
-            onValueChange={(value) => setSelectedPositions(value as ProjectPositionValue[])}
-          >
-            <MultiSelect.Trigger disabled={isConfirming}>
-              {selectedPositions.length === 0 ? (
-                <span className="text-text-disabled">{'\uc9c1\uad70\uc744 \uc120\ud0dd\ud574\uc8fc\uc138\uc694'}</span>
-              ) : (
-                selectedPositions.map((position) => (
-                  <MultiSelect.Tag key={position} value={position}>
+          <div className="flex w-full min-w-0 flex-col gap-2">
+            <MultiSelect.Root
+              value={selectedPositions}
+              onValueChange={(value) => setSelectedPositions(value as ProjectPositionValue[])}
+            >
+              <MultiSelect.Trigger disabled={isConfirming}>
+                {selectedPositions.length === 0 ? (
+                  <span className="text-text-disabled">직군을 선택해주세요</span>
+                ) : (
+                  selectedPositions.map((position) => (
+                    <MultiSelect.Tag key={position} value={position}>
+                      {PROJECT_POSITION_LABELS[position]}
+                    </MultiSelect.Tag>
+                  ))
+                )}
+              </MultiSelect.Trigger>
+              <MultiSelect.Content className="w-(--radix-popover-trigger-width)">
+                {PROJECT_POSITIONS.map((position) => (
+                  <MultiSelect.Item
+                    key={position}
+                    value={position}
+                    disabled={isConfirming || (isMaxPositionReached && !selectedPositions.includes(position))}
+                  >
                     {PROJECT_POSITION_LABELS[position]}
-                  </MultiSelect.Tag>
-                ))
-              )}
-            </MultiSelect.Trigger>
-            <MultiSelect.Content className="w-(--radix-popover-trigger-width)">
-              {PROJECT_POSITIONS.map((position) => (
-                <MultiSelect.Item
-                  key={position}
-                  value={position}
-                  disabled={isConfirming || (isMaxPositionReached && !selectedPositions.includes(position))}
-                >
-                  {PROJECT_POSITION_LABELS[position]}
-                </MultiSelect.Item>
-              ))}
-            </MultiSelect.Content>
-          </MultiSelect.Root>
+                  </MultiSelect.Item>
+                ))}
+              </MultiSelect.Content>
+            </MultiSelect.Root>
+            <p className="text-body-sm text-text-subtle leading-normal">
+              최대 {PROJECT_INVITE_MAX_POSITIONS}개까지 등록 가능해요.
+            </p>
+          </div>
         </div>
 
         {!!errorMessage && (
-          <p className="text-body-sm text-text-error px-4" role="alert">
+          <p className="text-body-sm text-text-error" role="alert">
             {errorMessage}
           </p>
         )}
diff --git a/features/project/components/project-invite-handler.tsx b/features/project/components/project-invite-handler.tsx
index 50373a9e..aa763537 100644
--- a/features/project/components/project-invite-handler.tsx
+++ b/features/project/components/project-invite-handler.tsx
@@ -7,9 +7,7 @@ import { saveLoginReturnPath, useLoginGate } from '@/features/auth';
 import { useMyProfile } from '@/features/profile';
 import { ProjectInviteAcceptModal } from '@/features/project/components/project-invite-accept-modal';
 import { ConfirmationDialog } from '@/shared/components/dialog/confirmation-dialog';
-import { SHARE_INVITER_NAME_PARAM } from '@/shared/constants/share-query';
 import { ApiError } from '@/shared/lib/api';
-import { parseShareDisplayName } from '@/shared/lib/parse-share-display-name';
 
 import type { ProjectPositionValue } from '../project.types';
 
@@ -40,11 +38,6 @@ export const ProjectInviteHandler = () => {
 
   const hasSession = profile != null;
 
-  const inviterName = useMemo(
-    () => parseShareDisplayName(searchParams.get(SHARE_INVITER_NAME_PARAM) ?? undefined) ?? '',
-    [searchParams],
-  );
-
   const clearInviteParam = useCallback(() => {
     if (searchParams.get(PROJECT_INVITE_QUERY_KEY) == null) {
       return;
@@ -127,7 +120,6 @@ export const ProjectInviteHandler = () => {
       <ProjectInviteAcceptModal
         key={projectLink}
         open={acceptModalOpen}
-        inviterName={inviterName}
         onOpenChange={handleAcceptOpenChange}
         onConfirm={handleJoin}
         isConfirming={isJoining}
diff --git a/features/review/components/write-review/review-spectrum-slider.tsx b/features/review/components/write-review/review-spectrum-slider.tsx
index b3eb7b5a..a6092cf2 100644
--- a/features/review/components/write-review/review-spectrum-slider.tsx
+++ b/features/review/components/write-review/review-spectrum-slider.tsx
@@ -1,7 +1,5 @@
 'use client';
 
-import { Fragment } from 'react';
-
 import { cn } from '@/shared/lib/cn';
 
 import { REVIEW_DEFAULT_SPECTRUM_STEP, REVIEW_SPECTRUM_STEP_COUNT } from '../../review.constants';
@@ -97,8 +95,11 @@ export const ReviewSpectrumSlider = ({ leftLabel, rightLabel, value, onChange }:
   };
 
   return (
-    <Fragment>
-      <span className="text-detail-sm text-text-subtle shrink-0 font-medium whitespace-nowrap">{leftLabel}</span>
+    <div className="flex w-full flex-col">
+      <div className="flex items-center justify-between gap-2">
+        <span className="text-detail-xs text-text-subtle shrink-0 font-medium">{leftLabel}</span>
+        <span className="text-detail-xs text-text-subtle shrink-0 font-medium">{rightLabel}</span>
+      </div>
 
       <div
         role="slider"
@@ -107,7 +108,7 @@ export const ReviewSpectrumSlider = ({ leftLabel, rightLabel, value, onChange }:
         aria-valuemin={1}
         aria-valuemax={MAX_STEP_INDEX}
         aria-valuenow={value < CENTER_STEP ? value + 1 : value}
-        className="relative flex h-5 w-full cursor-pointer touch-none items-center outline-none select-none"
+        className="relative flex h-7 w-full cursor-pointer touch-none items-center outline-none select-none"
         onPointerDown={handlePointerDown}
         onPointerMove={handlePointerMove}
         onPointerUp={handlePointerUp}
@@ -125,12 +126,10 @@ export const ReviewSpectrumSlider = ({ leftLabel, rightLabel, value, onChange }:
         </div>
         <span
           aria-hidden
-          className="bg-input-surface absolute top-1/2 size-5 -translate-x-1/2 -translate-y-1/2 rounded-full shadow-[0px_4px_16px_rgba(96,96,96,0.3)] transition-[left] duration-75"
+          className="bg-input-surface absolute top-1/2 size-6 -translate-x-1/2 -translate-y-1/2 rounded-full shadow-[0px_4px_16px_rgba(96,96,96,0.3)] transition-[left] duration-75 lg:size-5"
           style={{ left: `${percent}%` }}
         />
       </div>
-
-      <span className="text-detail-sm text-text-subtle shrink-0 font-medium whitespace-nowrap">{rightLabel}</span>
-    </Fragment>
+    </div>
   );
 };
diff --git a/features/review/components/write-review/review-step-spectrum.tsx b/features/review/components/write-review/review-step-spectrum.tsx
index 7b52873c..fdf6ea25 100644
--- a/features/review/components/write-review/review-step-spectrum.tsx
+++ b/features/review/components/write-review/review-step-spectrum.tsx
@@ -33,10 +33,10 @@ export const ReviewStepSpectrum = ({ spectrums, onPrev, onNext }: Props) => {
   };
 
   return (
-    <div className="mt-13 flex w-full max-w-[480px] flex-col">
-      <h3 className="text-heading-sm text-text-basic font-bold">업무 성향 스펙트럼 선택</h3>
+    <div className="mt-4 flex w-full max-w-[480px] flex-col">
+      <h3 className="text-heading-sm text-text-basic font-bold">소프트 스킬 스펙트럼 성향</h3>
 
-      <div className="mt-6 grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-4 gap-y-6">
+      <div className="mt-6 flex flex-col gap-4">
         {spectrums.map((spectrum) => {
           const answer = selectedSpectrums.find((item) => item.spectrumId === spectrum.spectrumId);
 
@@ -52,17 +52,23 @@ export const ReviewStepSpectrum = ({ spectrums, onPrev, onNext }: Props) => {
         })}
       </div>
 
-      <div className="mt-12 flex w-full gap-3">
+      <div className="mt-12 flex w-full gap-4">
         <Button
           type="button"
           variant="tertiary"
-          size="medium"
+          size="large"
           onClick={onPrev}
-          className="border-border-gray-light w-full border"
+          className="border-border-gray-light h-14 min-h-12 w-full self-stretch rounded-md border"
         >
           뒤로가기
         </Button>
-        <Button type="button" size="medium" onClick={onNext} disabled={!canGoNext} className="w-full">
+        <Button
+          type="button"
+          size="large"
+          onClick={onNext}
+          disabled={!canGoNext}
+          className="h-14 min-h-12 w-full self-stretch rounded-md"
+        >
           다음
         </Button>
       </div>
diff --git a/features/review/components/write-review/review-step-tag.tsx b/features/review/components/write-review/review-step-tag.tsx
index 18a56157..1b0a09ed 100644
--- a/features/review/components/write-review/review-step-tag.tsx
+++ b/features/review/components/write-review/review-step-tag.tsx
@@ -36,10 +36,10 @@ export const ReviewStepTag = ({ tags, onPrev, onNext }: Props) => {
   };
 
   return (
-    <div className="mt-13 flex w-full max-w-[480px] flex-col">
+    <div className="mt-4 flex w-full max-w-[480px] flex-col">
       <h3 className="text-heading-sm text-text-basic font-bold">태그 선택(최대 {REVIEW_MAX_TAGS}개)</h3>
 
-      <div className="mt-4 flex flex-wrap gap-2">
+      <div className="mt-6 flex flex-wrap gap-3">
         {tags.map((tag) => {
           const selected = selectedTagIdSet.has(tag.tagId);
           const disabled = !selected && selectedTagIds.length >= REVIEW_MAX_TAGS;
@@ -65,17 +65,23 @@ export const ReviewStepTag = ({ tags, onPrev, onNext }: Props) => {
         })}
       </div>
 
-      <div className="mt-12 flex w-full gap-3">
+      <div className="mt-12 flex w-full gap-4">
         <Button
           type="button"
           variant="tertiary"
-          size="medium"
+          size="large"
           onClick={onPrev}
-          className="border-border-gray-light w-full border"
+          className="border-border-gray-light h-14 min-h-12 w-full self-stretch rounded-md border"
         >
           뒤로가기
         </Button>
-        <Button type="button" size="medium" onClick={onNext} disabled={!canGoNext} className="w-full">
+        <Button
+          type="button"
+          size="large"
+          onClick={onNext}
+          disabled={!canGoNext}
+          className="h-14 min-h-12 w-full self-stretch rounded-md"
+        >
           다음
         </Button>
       </div>
diff --git a/features/review/components/write-review/write-review-flow.tsx b/features/review/components/write-review/write-review-flow.tsx
index d84a79b2..8c47ad0b 100644
--- a/features/review/components/write-review/write-review-flow.tsx
+++ b/features/review/components/write-review/write-review-flow.tsx
@@ -51,19 +51,33 @@ export const WriteReviewFlow = ({ projectId, revieweeId, revieweeName }: Props)
     );
   }
 
+  const stepDescription = {
+    tag: (
+      <>
+        <span className="font-bold">{displayName}</span>님에 태그를 선택해주세요.
+      </>
+    ),
+    spectrum: (
+      <>
+        <span className="font-bold">{displayName}</span>님에 소프트 스킬 스펙트럼을 선택해주세요.
+      </>
+    ),
+    feedback: (
+      <>
+        <span className="font-bold">{displayName}</span>님에 대한 솔직한 후기를 남겨주세요.
+      </>
+    ),
+  }[currentStep];
+
   return (
     <div className="flex w-full max-w-[480px] flex-col items-center">
-      <h1 className="text-heading-lg text-text-basic text-center font-bold">후기 작성</h1>
-      <h2 className="text-body-base text-text-subtle mt-2 mb-6 font-medium">
-        {
-          {
-            tag: `${displayName}님을 잘 나타내는 태그를 선택해주세요.`,
-            spectrum: `${displayName}님의 업무 성향 스펙트럼을 선택해주세요.`,
-            feedback: `${displayName}님에 대한 솔직한 후기를 남겨주세요.`,
-          }[currentStep]
-        }
-      </h2>
-      <StepIndicator steps={REVIEW_STEPS} current={currentStep} aria-label="후기 작성 단계" />
+      <div className="flex w-full flex-col items-center gap-3 pb-6">
+        <div className="flex flex-col items-center gap-2">
+          <h1 className="text-heading-lg text-text-basic text-center font-bold">후기 작성</h1>
+          <p className="text-body-base text-text-subtle text-center font-medium">{stepDescription}</p>
+        </div>
+        <StepIndicator steps={REVIEW_STEPS} current={currentStep} aria-label="후기 작성 단계" />
+      </div>
 
       <FormProvider {...form}>
         <form
@@ -74,9 +88,9 @@ export const WriteReviewFlow = ({ projectId, revieweeId, revieweeName }: Props)
           noValidate
         >
           {isPending ? (
-            <p className="text-body-base text-text-subtle mt-13">불러오는 중...</p>
+            <p className="text-body-base text-text-subtle mt-4">불러오는 중...</p>
           ) : isError || !formData ? (
-            <div className="mt-13 flex flex-col items-center gap-4">
+            <div className="mt-4 flex flex-col items-center gap-4">
               <p className="text-body-base text-text-basic">데이터를 불러오지 못했습니다.</p>
               <Button type="button" variant="secondary" size="medium" onClick={() => void refetch()}>
                 다시 시도
diff --git a/shared/components/dialog/confirmation-dialog.tsx b/shared/components/dialog/confirmation-dialog.tsx
index 6e692cc2..a706e9e1 100644
--- a/shared/components/dialog/confirmation-dialog.tsx
+++ b/shared/components/dialog/confirmation-dialog.tsx
@@ -44,11 +44,11 @@ export const ConfirmationDialog = ({
       <DialogAnimatedPortal
         open={open}
         className={cn(
-          'border-border-gray bg-surface-white fixed top-1/2 left-1/2 z-50 flex w-md max-w-[calc(100vw-32px)] flex-col',
+          'border-border-gray bg-surface-white fixed top-1/2 left-1/2 z-50 flex w-full max-w-[min(28rem,calc(100vw-40px))] flex-col',
           'gap-4 overflow-hidden rounded-xl border p-6 outline-none',
         )}
       >
-        <div className="flex h-[108px] w-full shrink-0 flex-col gap-2 px-4 py-2">
+        <div className="flex min-h-[108px] w-full shrink-0 flex-col justify-center gap-2 px-4 py-2">
           <Dialog.Title className="text-heading-base text-text-basic leading-normal font-bold">{title}</Dialog.Title>
           <Dialog.Description asChild>
             <div className="text-body-base text-text-subtle flex flex-col leading-normal">{description}</div>
diff --git a/shared/components/step-indicator.tsx b/shared/components/step-indicator.tsx
index 49249a8b..bdf803ad 100644
--- a/shared/components/step-indicator.tsx
+++ b/shared/components/step-indicator.tsx
@@ -30,7 +30,7 @@ export const StepIndicator = ({ steps, current, 'aria-label': ariaLabel, classNa
             className="flex min-w-0 flex-1 items-center last:flex-none"
             aria-current={step.id === current ? 'step' : undefined}
           >
-            <div className="flex shrink-0 items-center gap-2">
+            <div className="flex shrink-0 items-center gap-1.5">
               <span
                 className={cn(
                   'text-detail-xs flex size-6 items-center justify-center rounded-full font-normal',
@@ -39,14 +39,19 @@ export const StepIndicator = ({ steps, current, 'aria-label': ariaLabel, classNa
               >
                 {isCompleted ? <CheckIcon className="size-4" aria-hidden /> : index + 1}
               </span>
-              <span className={cn('text-detail-sm font-medium', isActive ? 'text-text-basic' : 'text-text-subtler')}>
+              <span
+                className={cn(
+                  'text-detail-sm shrink-0 font-medium whitespace-nowrap',
+                  isActive ? 'text-text-basic' : 'text-text-subtler',
+                )}
+              >
                 {step.label}
               </span>
             </div>
             {!isLast ? (
               <span
                 className={cn(
-                  'mx-2 h-px flex-1 lg:mx-4',
+                  'mx-2 h-px min-w-4 flex-1 lg:mx-4',
                   isCompleted ? 'bg-element-primary' : 'bg-element-disabled-light',
                 )}
                 aria-hidden
diff --git a/shared/constants/guidance-copy.ts b/shared/constants/guidance-copy.ts
index 90fea604..53f66703 100644
--- a/shared/constants/guidance-copy.ts
+++ b/shared/constants/guidance-copy.ts
@@ -43,8 +43,9 @@ export const GUIDANCE_COPY = {
       cancel: '닫기',
     },
     inviteAccept: {
-      title: '후기 작성',
-      descriptionPrefix: '후기 작성에 참여하시겠습니까?',
+      title: '프로젝트 참여',
+      descriptionPrefix: '이번 프로젝트에서 본인의 역할을 선택해주세요.',
+      helper: '최대 2개까지 등록 가능해요.',
       confirm: '참여하기',
       cancel: '취소',
     },

From 56f45a8881d204253b5db3b770c7c629c809581d Mon Sep 17 00:00:00 2001
From: hjkl <goni1653@hufs.ac.kr>
Date: Wed, 22 Jul 2026 13:25:53 +0900
Subject: [PATCH 2/2] =?UTF-8?q?design:=20=ED=9B=84=EA=B8=B0=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1=20=EC=8A=A4=ED=85=9D3=EC=97=90=EC=84=9C=20=EC=99=84?=
 =?UTF-8?q?=EB=A3=8C=EB=8B=A8=EA=B3=84=EA=B9=8C=EC=A7=80=EC=9D=98=20?=
 =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20ui=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../project-detail-page-content.tsx           |  2 +
 .../components/review-submitted-toast.tsx     | 65 ++++++++++++++
 .../write-review/review-step-feedback.tsx     | 86 +++++++++++--------
 features/review/index.ts                      |  1 +
 features/review/review.constants.ts           |  9 +-
 features/review/review.hooks.ts               |  2 +-
 shared/constants/guidance-copy.ts             |  2 +-
 7 files changed, 125 insertions(+), 42 deletions(-)
 create mode 100644 features/review/components/review-submitted-toast.tsx

diff --git a/features/project/components/project-detail/project-detail-page-content.tsx b/features/project/components/project-detail/project-detail-page-content.tsx
index f3e91360..ef6bd41a 100644
--- a/features/project/components/project-detail/project-detail-page-content.tsx
+++ b/features/project/components/project-detail/project-detail-page-content.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useMyProfile } from '@/features/profile';
+import { ReviewSubmittedToast } from '@/features/review/components/review-submitted-toast';
 import { PageContainer } from '@/shared/components/page-container';
 
 import { ProjectDetailHeading } from './project-detail-heading';
@@ -61,6 +62,7 @@ export const ProjectDetailPageContent = ({ projectId }: Props) => {
         isLeader={isLeader}
         myUserId={myProfile.userId}
       />
+      <ReviewSubmittedToast />
     </PageContainer>
   );
 };
diff --git a/features/review/components/review-submitted-toast.tsx b/features/review/components/review-submitted-toast.tsx
new file mode 100644
index 00000000..30137272
--- /dev/null
+++ b/features/review/components/review-submitted-toast.tsx
@@ -0,0 +1,65 @@
+'use client';
+
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useCallback, useEffect, useState } from 'react';
+
+import { SuccessIcon, XIcon } from '@/shared/assets/icons';
+
+export const REVIEW_SUBMITTED_QUERY_KEY = 'reviewSubmitted';
+
+/** 후기 제출 완료 후 목적지에서 노출하는 하단 토스트 */
+export const ReviewSubmittedToast = () => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const shouldShow = searchParams.get(REVIEW_SUBMITTED_QUERY_KEY) === '1';
+  const [open, setOpen] = useState(shouldShow);
+
+  useEffect(() => {
+    setOpen(shouldShow);
+  }, [shouldShow]);
+
+  const close = useCallback(() => {
+    setOpen(false);
+    if (!shouldShow) {
+      return;
+    }
+    const next = new URLSearchParams(searchParams.toString());
+    next.delete(REVIEW_SUBMITTED_QUERY_KEY);
+    const query = next.toString();
+    router.replace(query ? `${pathname}?${query}` : pathname, { scroll: false });
+  }, [pathname, router, searchParams, shouldShow]);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const timerId = window.setTimeout(close, 4000);
+    return () => window.clearTimeout(timerId);
+  }, [close, open]);
+
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      className="pointer-events-none fixed inset-x-0 bottom-6 z-50 flex justify-center px-5"
+    >
+      <div className="bg-surface-inverse pointer-events-auto flex w-full max-w-[350px] items-center gap-2 rounded-lg px-4 py-3 shadow-[0px_4px_16px_rgba(0,0,0,0.2)]">
+        <SuccessIcon aria-hidden className="size-6 shrink-0" />
+        <p className="text-body-sm text-text-basic-inverse min-w-0 flex-1 font-medium">후기 제출이 완료되었습니다.</p>
+        <button
+          type="button"
+          className="text-text-basic-inverse flex size-5 shrink-0 items-center justify-center"
+          aria-label="알림 닫기"
+          onClick={close}
+        >
+          <XIcon className="size-4" aria-hidden />
+        </button>
+      </div>
+    </div>
+  );
+};
diff --git a/features/review/components/write-review/review-step-feedback.tsx b/features/review/components/write-review/review-step-feedback.tsx
index 4a646e7e..2746b400 100644
--- a/features/review/components/write-review/review-step-feedback.tsx
+++ b/features/review/components/write-review/review-step-feedback.tsx
@@ -22,60 +22,72 @@ export const ReviewStepFeedback = ({ isSubmitting = false, onPrev }: Props) => {
   const errorMessage = formState.errors.feedback?.message;
 
   return (
-    <div className="mt-13 flex w-full max-w-[480px] flex-col">
-      <h3 className="text-heading-sm text-text-basic font-bold">후기 작성</h3>
-      <p className="text-body-sm text-text-subtle mt-2">
-        (필수) 최소 {REVIEW_FEEDBACK_MIN_LENGTH}자 이상 작성해주세요.
-      </p>
+    <div className="mt-4 flex w-full max-w-[480px] flex-col gap-10 pb-10">
+      <div className="flex w-full flex-col gap-2">
+        <h3 className="text-heading-sm text-text-basic font-bold">후기 작성</h3>
+        <p className="text-body-sm text-text-subtle">(필수) 최소 {REVIEW_FEEDBACK_MIN_LENGTH}자이상 작성해주세요.</p>
 
-      <Controller
-        control={control}
-        name="feedback"
-        render={({ field }) => (
-          <Textarea
-            name={field.name}
-            className="min-h-[168px]"
-            wrapperClassName="mt-3"
-            placeholder="ex) 적극적이고 배려심이 깊다."
-            value={field.value}
-            maxLength={REVIEW_FEEDBACK_MAX_LENGTH}
-            error={!!errorMessage}
-            helperText={errorMessage}
-            onChange={field.onChange}
-            onBlur={field.onBlur}
-          />
-        )}
-      />
+        <Controller
+          control={control}
+          name="feedback"
+          render={({ field }) => (
+            <Textarea
+              name={field.name}
+              className="border-input-border text-body-sm placeholder:text-text-subtler min-h-[152px] px-3 py-2"
+              wrapperClassName="mt-0"
+              placeholder="ex) 적극적이고 배려심이 깊다."
+              value={field.value}
+              maxLength={REVIEW_FEEDBACK_MAX_LENGTH}
+              error={!!errorMessage}
+              helperText={errorMessage}
+              onChange={field.onChange}
+              onBlur={field.onBlur}
+            />
+          )}
+        />
+      </div>
 
-      <div className="bg-surface-gray-subtler mt-6 rounded-lg px-4 py-4">
-        <p className="text-body-sm text-text-basic font-medium">이런 내용으로 후기를 작성해보세요.</p>
-        <ul className="mt-3 flex flex-col gap-2">
+      <div className="bg-bg-gray-subtler flex w-full flex-col gap-2 rounded-md px-4 py-6">
+        <div className="flex items-center gap-0.5">
+          <span aria-hidden className="text-body-base leading-none">
+            💡
+          </span>
+          <p className="text-body-base text-text-basic font-bold">이런 내용으로 후기를 작성해보세요.</p>
+        </div>
+        <ul className="flex flex-col pl-5">
           {REVIEW_FEEDBACK_TIPS.map((tip) => (
-            <li key={tip.text} className="flex gap-1.5">
-              <span aria-hidden className="text-text-subtle">
+            <li key={tip.text} className="relative">
+              <span aria-hidden className="text-body-sm text-text-subtle absolute top-0 -left-5">
                 •
               </span>
-              <div className="flex flex-col gap-0.5">
-                <span className="text-body-sm text-text-subtle">{tip.text}</span>
-                <span className="text-body-sm text-text-subtler">예: {tip.example}</span>
-              </div>
+              <p className="text-body-sm text-text-subtle leading-normal">
+                {tip.text}
+                <br />
+                {tip.examplePrefix}
+                {tip.example}
+              </p>
             </li>
           ))}
         </ul>
       </div>
 
-      <div className="mt-8 flex w-full gap-3">
+      <div className="flex w-full gap-4">
         <Button
           type="button"
           variant="tertiary"
-          size="medium"
+          size="large"
           onClick={onPrev}
-          className="border-border-gray-light w-full border"
+          className="border-border-gray-light h-14 min-h-12 w-full self-stretch rounded-md border"
         >
           뒤로가기
         </Button>
-        <Button type="submit" size="medium" disabled={!canSubmit || isSubmitting} className="w-full">
-          후기 제출
+        <Button
+          type="submit"
+          size="large"
+          disabled={!canSubmit || isSubmitting}
+          className="h-14 min-h-12 w-full self-stretch rounded-md"
+        >
+          후기제출
         </Button>
       </div>
     </div>
diff --git a/features/review/index.ts b/features/review/index.ts
index fea165dc..eadf2e0d 100644
--- a/features/review/index.ts
+++ b/features/review/index.ts
@@ -1,4 +1,5 @@
 export { ReviewSubmitDialog } from './components/review-submit-dialog';
+export { ReviewSubmittedToast } from './components/review-submitted-toast';
 export { WriteReviewFlow } from './components/write-review/write-review-flow';
 export { UserReviewCardLoading } from './components/user-review-card-loading';
 export { fetchReviewFormData, fetchReviewValidation, reviewKeys } from './review.api';
diff --git a/features/review/review.constants.ts b/features/review/review.constants.ts
index 9ccb178a..aba79536 100644
--- a/features/review/review.constants.ts
+++ b/features/review/review.constants.ts
@@ -24,14 +24,17 @@ export const REVIEW_FEEDBACK_MAX_LENGTH = 250;
 export const REVIEW_FEEDBACK_TIPS = [
   {
     text: '추상적인 표현보다 구체적인 상황을 담아주세요.',
-    example: '"의견이 갈릴 때마다 양쪽 입장을 정리해줘서 논의가 매끄럽게 진행됐어요."',
+    examplePrefix: 'ex) ',
+    example: '"의견이 갈릴 때마다 양쪽 입장을 정리해줘서 회의가 매끄럽게 진행됐어요."',
   },
   {
-    text: '협업하며 느낀 강점을 알려주세요.',
-    example: '"마감이 촉박한 상황에서도 끝까지 책임지고 자기 파트를 완성했어요."',
+    text: '협업하며 느낀 강점을 작성해주세요.',
+    examplePrefix: 'ex) ',
+    example: '"마감이 촉박한 상황에서도 책임있게 업무를 완수했어요."',
   },
   {
     text: '솔직하지만 다음에 더 나아질 수 있는 방향으로 적어주세요.',
+    examplePrefix: '예) ',
     example: '"일정 공유를 조금만 더 자주 해줬다면 좋았을 것 같아요."',
   },
 ] as const;
diff --git a/features/review/review.hooks.ts b/features/review/review.hooks.ts
index ebec4339..4b3d85fa 100644
--- a/features/review/review.hooks.ts
+++ b/features/review/review.hooks.ts
@@ -137,7 +137,7 @@ export const useWriteReviewFlow = ({ projectId, revieweeId }: UseWriteReviewFlow
         spectrums,
       });
       setSubmitDialogOpen(false);
-      router.push(`/projects/${projectId}`);
+      router.push(`/projects/${projectId}?reviewSubmitted=1`);
     } catch {
       setSubmitError('제출에 실패했습니다. 다시 시도해주세요.');
     }
diff --git a/shared/constants/guidance-copy.ts b/shared/constants/guidance-copy.ts
index 53f66703..f7beaa76 100644
--- a/shared/constants/guidance-copy.ts
+++ b/shared/constants/guidance-copy.ts
@@ -4,7 +4,7 @@
  */
 export const GUIDANCE_COPY = {
   banner: {
-    reviewSubmitted: '후기가 제출되었습니다. 팀원들에게도 후기를 남겨보세요.',
+    reviewSubmitted: '후기 제출이 완료되었습니다.',
     projectCreated: '프로젝트가 생성되었습니다. 초대 링크를 팀원에게 공유해 보세요.',
     inviteAccepted: '프로젝트에 참여했습니다. 팀 확정 후 후기를 작성할 수 있어요.',
     signupComplete: '프로필 설정이 완료되었습니다. 프로젝트를 시작해 보세요.',