feat/#22: start, continue comment 뷰 구현

src/App.tsx

@@ -11,6 +11,8 @@ import { hasActiveSprint } from '@lib/api/sprint';
 import { callApi } from '@lib/apiClient';
 import UserInfoPage from '@pages/UserInfoPage';
 import StopCommentPage from '@pages/StopCommentPage';
+import StartCommentPage from '@pages/StartCommentPage';
+import ContinueCommentPage from '@pages/ContinueCommentPage';
 
 const router = createBrowserRouter([
   {
@@ -24,6 +26,8 @@ const router = createBrowserRouter([
   { path: '/sprint-intro', element: <SprintIntroPage /> },
   { path: '/user-info', element: <UserInfoPage /> },
   { path: '/stop-comment', element: <StopCommentPage /> },
+  { path: '/start-comment', element: <StartCommentPage /> },
+  { path: '/continue-comment', element: <ContinueCommentPage /> }
 ]);
 
 function App() {

src/components/peer-comment/PeerCommentRepeater.tsx

@@ -30,6 +30,8 @@ function PeerCommentRepeater({ content, rows, onRowsChange, peerMembers }: PeerC
     onRowsChange([{ id: only.id, memberIds: [], text: '' }]);
   };
 
+  const isAddDisabled = rows.some((row) => row.memberIds.length === 0 || row.text.length === 0);
+
   return (
     <div className={styles.repeaterRoot}>
       <div className={styles.list}>
@@ -53,6 +55,7 @@ function PeerCommentRepeater({ content, rows, onRowsChange, peerMembers }: PeerC
           size="md"
           theme="white"
           LeftIcon={IconPlus}
+          disabled={isAddDisabled}
           onClick={() => onRowsChange([...rows, createEmptyPeerCommentRow()])}
         >
           추가

src/components/peer-comment/PeerMemberPicker.tsx

@@ -35,6 +35,8 @@ function PeerMemberPicker({
     'aria-labelledby': titleId,
   } as const;
 
+  const isConfirmDisabled = memberIds.length === 0;
+
   return (
     <div className={styles.pickerRoot}>
       <Button
@@ -106,6 +108,7 @@ function PeerMemberPicker({
               size="md"
               rounded="md"
               className={styles.sheetConfirmButton}
+              disabled={isConfirmDisabled}
               onClick={() => setOpen(false)}
             >
               선택 완료

src/pages/ContinueCommentPage.tsx

@@ -0,0 +1,23 @@
+import continueCommentExample from '@assets/continue_comment_example.svg';
+import continueCommentExplanation from '@assets/continue_comment_explanation.svg';
+import { PeerCommentStepTemplate } from '@components';
+
+function ContinueCommentPage() {
+  return (
+    <PeerCommentStepTemplate
+      content={{
+        commentKey: 'continue_comments',
+        title: 'Continue 코멘트 작성',
+        description: '이번 스프린트에서 협업하며 계속했으면 하는 점에 대해 전달해요.',
+        guideImages: [continueCommentExplanation, continueCommentExample],
+        sectionTitle: 'Continue Comment를 전달하고 싶은 동료',
+        questionLabel: '해당 동료가 계속했으면 하는 점은 무엇인가요?',
+        textPlaceholder: '계속했으면 하는 점',
+      }}
+      currentStep={4}
+      nextPath="/next"
+    />
+  );
+}
+
+export default ContinueCommentPage;

src/pages/StartCommentPage.tsx

@@ -0,0 +1,23 @@
+import startCommentExample from '@assets/start_comment_example.svg';
+import startCommentExplanation from '@assets/start_comment_explanation.svg';
+import { PeerCommentStepTemplate } from '@components';
+
+function StartCommentPage() {
+  return (
+    <PeerCommentStepTemplate
+      content={{
+        commentKey: 'start_comments',
+        title: 'Start 코멘트 작성',
+        description: '이번 스프린트에서 협업하며 시작했으면 하는 점에 대해 전달해요.',
+        guideImages: [startCommentExplanation, startCommentExample],
+        sectionTitle: 'Start Comment를 전달하고 싶은 동료',
+        questionLabel: '해당 동료가 시작했으면 하는 점은 무엇인가요?',
+        textPlaceholder: '시작했으면 하는 점',
+      }}
+      currentStep={3}
+      nextPath="/continue-comment"
+    />
+  );
+}
+
+export default StartCommentPage;

src/pages/StopCommentPage.tsx

@@ -1,5 +1,5 @@
-import stopCommentExampleImg from '@assets/stop_comment_example.svg';
-import stopCommentExplanationImg from '@assets/stop_comment_explanation.svg';
+import stopCommentExample from '@assets/stop_comment_example.svg';
+import stopCommentExplanation from '@assets/stop_comment_explanation.svg';
 import { PeerCommentStepTemplate } from '@components';
 
 function StopCommentPage() {
@@ -9,13 +9,13 @@ function StopCommentPage() {
         commentKey: 'stop_comments',
         title: 'Stop 코멘트 작성',
         description: '이번 스프린트에서 협업하며 그만했으면 하는 점에 대해 전달해요.',
-        guideImages: [stopCommentExplanationImg, stopCommentExampleImg],
+        guideImages: [stopCommentExplanation, stopCommentExample],
         sectionTitle: 'Stop Comment를 전달하고 싶은 동료',
         questionLabel: '해당 동료가 그만했으면 하는 점은 무엇인가요?',
         textPlaceholder: '그만했으면 하는 점',
       }}
       currentStep={2}
-      nextPath="/next"
+      nextPath="/start-comment"
     />
   );
 }