[#21] Create the UI for Question page

src/routes/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { RouteObject } from 'react-router-dom';
 
 import DashBoardScreen from 'screens/Dashboard';
+import QuestionScreen from 'screens/Question';
 import SignInScreen from 'screens/SignIn';
 import SurveyScreen from 'screens/Survey';
 
@@ -11,6 +12,12 @@ export const paths = {
   root: '/',
   signIn: '/sign-in',
   survey: '/surveys/:id',
+  question: '/surveys/:id/questions',
+};
+
+export const questionPath = (): string => {
+  const questionPaths = paths.question.split('/');
+  return questionPaths[questionPaths.length - 1];
 };
 
 const routes: RouteObject[] = [
@@ -25,6 +32,10 @@ const routes: RouteObject[] = [
         path: paths.survey,
         element: <SurveyScreen />,
       },
+      {
+        path: paths.question,
+        element: <QuestionScreen />,
+      },
     ],
   },
   {

src/screens/Question/index.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import TestWrapper from 'tests/TestWrapper';
+
+import QuestionScreen, { questionScreenTestIds } from '.';
+
+describe('QuestionScreen', () => {
+  const TestComponent = (): JSX.Element => {
+    return (
+      <TestWrapper>
+        <QuestionScreen />
+      </TestWrapper>
+    );
+  };
+
+  it('renders Question screen and its components', () => {
+    render(<TestComponent />);
+
+    const currentIndex = screen.getByTestId(questionScreenTestIds.index);
+    const questionTitle = screen.getByTestId(questionScreenTestIds.title);
+    const closeButton = screen.getByTestId(questionScreenTestIds.closeButton);
+    const nextButton = screen.getByTestId(questionScreenTestIds.nextButton);
+
+    expect(currentIndex).toBeVisible();
+    expect(questionTitle).toBeVisible();
+    expect(closeButton).toBeVisible();
+    expect(nextButton).toBeVisible();
+  });
+});

src/screens/Question/index.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import { ReactComponent as ArrowRight } from 'assets/images/icons/arrow-right.svg';
+import { ReactComponent as CloseButton } from 'assets/images/icons/close-btn-white.svg';
+import AppSlider from 'components/AppSlider';
+import MainView from 'components/MainView';
+
+export const questionScreenTestIds = {
+  index: 'question__index',
+  title: 'question__title',
+  closeButton: 'question__close-button',
+  nextButton: 'question__next-button',
+};
+
+const QuestionScreen = (): JSX.Element => {
+  return (
+    <MainView backgroundUrl="https://dhdbhh0jsld0o.cloudfront.net/m/1ea51560991bcb7d00d0_">
+      <div className="flex flex-col h-full">
+        <button className="mt-8 mr-8 p-1 self-end" data-test-id={questionScreenTestIds.closeButton}>
+          <CloseButton />
+        </button>
+        <div className="w-1/2 self-center flex-1 flex flex-col justify-center">
+          <p
+            className="text-small font-extrabold tracking-survey-normal opacity-50 text-white"
+            data-test-id={questionScreenTestIds.index}
+          >
+            1/5
+          </p>
+          <p
+            className="text-x-large font-extrabold tracking-survey-tighest text-white mt-4 mb-8"
+            data-test-id={questionScreenTestIds.title}
+          >
+            How fulfilled did you feel during this WFH period?
+          </p>
+          <AppSlider
+            onValueChanged={() => {
+              // TODO
+            }}
+          />
+        </div>
+        <button
+          type="button"
+          className="w-[56px] h-[56px] mr-8 mb-8 bg-white rounded-full inline-flex items-center justify-center self-end justify-self-end text-black-chinese"
+          data-test-id={questionScreenTestIds.nextButton}
+        >
+          <ArrowRight />
+        </button>
+      </div>
+    </MainView>
+  );
+};
+
+export default QuestionScreen;

src/screens/Survey/index.tsx

@@ -1,12 +1,13 @@
 import React, { useEffect } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 import { ToastContainer, toast } from 'react-toastify';
 
 import { ReactComponent as ArrowBack } from 'assets/images/icons/arrow-back.svg';
 import ElevatedButton from 'components/ElevatedButton';
 import LoadingDialog from 'components/LoadingDialog';
 import MainView from 'components/MainView';
 import { useAppDispatch, useAppSelector } from 'hooks';
+import { questionPath } from 'routes';
 import { getSurveyAsyncThunk } from 'store/reducers/Survey';
 
 import 'react-toastify/dist/ReactToastify.css';
@@ -75,9 +76,11 @@ const SurveyScreen = (): JSX.Element => {
                 {survey?.description}
               </p>
               <div className="pt-8">
-                <ElevatedButton isFullWidth type="submit" data-test-id={surveyScreenTestIds.startSurveyButton}>
-                  Start Survey
-                </ElevatedButton>
+                <Link to={questionPath()}>
+                  <ElevatedButton isFullWidth type="submit" data-test-id={surveyScreenTestIds.startSurveyButton}>
+                    Start Survey
+                  </ElevatedButton>
+                </Link>
               </div>
             </div>
           </div>