feat: 슬라이더 방식으로 질문 카드가 자연스럽게 전환되는 기능 추가

frontend/src/index.tsx

@@ -15,6 +15,7 @@ import LandingPage from './pages/LandingPage';
 import ReviewListPage from './pages/ReviewListPage';
 import ReviewWritingPage from './pages/ReviewWriting';
 import ReviewWritingCompletePage from './pages/ReviewWritingCompletePage';
+import ReviewWritingFormPage from './pages/ReviewWritingFormPage';
 import globalStyles from './styles/globalStyles';
 import theme from './styles/theme';
 
@@ -54,7 +55,9 @@ const router = createBrowserRouter([
       },
       {
         path: 'user/review-writing/:reviewRequestId',
-        element: <ReviewWritingPage />,
+        // NOTE: 리뷰 작성 페이지 UI 변경으로 인해 일단 주석 처리
+        // element: <ReviewWritingPage />,
+        element: <ReviewWritingFormPage />,
       },
       { path: 'user/review-writing-complete', element: <ReviewWritingCompletePage /> },
       {

frontend/src/pages/ReviewWritingFormPage/index.tsx

@@ -0,0 +1,76 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { Button } from '@/components';
+import QuestionCard from '@/components/QuestionCard';
+import ReviewWritingCard from '@/components/ReviewWritingCard';
+import { ButtonStyleType } from '@/types';
+
+import * as S from './styles';
+
+const REVIEWEE = '쑤쑤';
+
+const QUESTIONS = [
+  {
+    title: `💡${REVIEWEE}와 함께 한 기억을 떠올려볼게요.`,
+    question: `프로젝트 기간 동안, ${REVIEWEE}의 강점이 드러났던 순간을 선택해주세요. (1~2개)`,
+  },
+  {
+    title: `선택한 순간들을 바탕으로 ${REVIEWEE}에 대한 리뷰를 작성해볼게요.`,
+    question: `커뮤니케이션, 협업 능력에서 어떤 부분이 인상 깊었는지 선택해주세요. (1개 이상)`,
+  },
+  {
+    title: ``,
+    question: `앞으로의 성장을 위해서 ${REVIEWEE}가 어떤 목표를 설정하면 좋을까요?`,
+  },
+];
+
+const ReviewWritingFormPage = () => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [slideWidth, setSlideWidth] = useState(0);
+
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (wrapperRef.current) setSlideWidth(wrapperRef.current.clientWidth);
+  }, [wrapperRef]);
+
+  const handlePrev = () => {
+    if (currentIndex > 0) {
+      setCurrentIndex(currentIndex - 1);
+    }
+  };
+
+  const handleNext = () => {
+    if (currentIndex < QUESTIONS.length - 1) {
+      setCurrentIndex(currentIndex + 1);
+    }
+  };
+
+  const buttons = [
+    { styleType: 'secondary' as ButtonStyleType, onClick: handlePrev, text: '이전' },
+    { styleType: 'primary' as ButtonStyleType, onClick: handleNext, text: '다음' },
+  ];
+
+  return (
+    <S.CardLayout>
+      <S.SliderContainer ref={wrapperRef} translateX={currentIndex * slideWidth}>
+        {QUESTIONS.map(({ question, title }, index) => (
+          <S.Slide key={index}>
+            <ReviewWritingCard title={title}>
+              <QuestionCard questionType="normal" question={question} />
+            </ReviewWritingCard>
+          </S.Slide>
+        ))}
+      </S.SliderContainer>
+      <S.ButtonContainer>
+        {buttons.map((button, index) => (
+          <Button key={index} styleType={button.styleType} onClick={button.onClick}>
+            {button.text}
+          </Button>
+        ))}
+      </S.ButtonContainer>
+    </S.CardLayout>
+  );
+};
+
+export default ReviewWritingFormPage;

frontend/src/pages/ReviewWritingFormPage/styles.ts

@@ -0,0 +1,32 @@
+import styled from '@emotion/styled';
+
+export const CardLayout = styled.div`
+  position: relative;
+  overflow: hidden;
+  width: ${({ theme }) => theme.formWidth};
+
+  border-radius: ${({ theme }) => theme.borderRadius.basic};
+  border: 0.1rem solid ${({ theme }) => theme.colors.lightPurple};
+`;
+
+export const SliderContainer = styled.div<{ translateX: number }>`
+  transform: ${({ translateX }) => `translateX(-${translateX}px)`};
+  display: flex;
+  width: 100%;
+  transition: transform 0.5s ease-in-out;
+`;
+
+export const Slide = styled.div`
+  flex: 0 0 100%;
+  box-sizing: border-box;
+`;
+
+export const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: 2rem;
+
+  button {
+    width: 10rem;
+  }
+`;