result 관련 페이지 타입 분리

client/src/component/molecules/QuestionRespond/index.tsx

@@ -1,15 +1,12 @@
 import React from 'react';
+import { Answers } from 'types/type';
 import * as S from './style';
 
-export interface IAnswers {
-  title: string;
-  answers: string[];
-}
-export interface IQuestionRespond extends IAnswers {
+export interface QuestionRespondProps extends Answers {
   className?: string;
 }
 
-function QuestionRespond({ title, answers, className }: IQuestionRespond) {
+function QuestionRespond({ title, answers, className }: QuestionRespondProps) {
   const QuestionRespondComponents = answers.map((questionRespond: string) => (
     <span className="questionRespond">{questionRespond}</span>
   ));

client/src/component/orgamisms/QuestionResult/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import { IAnswers } from 'component/molecules/QuestionRespond';
+import { Answers } from 'types/type';
 import { gql, useMutation, useQuery } from '@apollo/client';
 import { updateUser } from 'graphql/mutations';
 import { getUser } from 'graphql/queries';
@@ -10,7 +10,7 @@ import * as S from './style';
 
 interface IQuestionResult {
   className?: string;
-  answerRespond: IAnswers[];
+  answerRespond: Answers[];
   userId: string;
   surveyCompleted: boolean;
   onCloseResult: () => void;
@@ -30,7 +30,7 @@ function QuestionResult({
 
   const openModal = () => {
     const filterArray: number[] = [];
-    answerRespond.forEach((answer: IAnswers, index: number) => {
+    answerRespond.forEach((answer: Answers, index: number) => {
       if (answer.answers.length < 1 || answer.answers[0].length < 1) {
         filterArray.push(index + 1);
       }
@@ -66,13 +66,18 @@ function QuestionResult({
     `,
   );
 
-  const QuestionRespondList = answerRespond.map((answer: IAnswers) => (
-    answer.title.length > 0 && <S.QuestionRespond
-      key={answer.title}
-      title={answer.title}
-      answers={answer.answers.length > 0 ? answer.answers : ['응답 하지 않음']}
-    />
-  ));
+  const QuestionRespondList = answerRespond.map(
+    (answer: Answers) =>
+      answer.title.length > 0 && (
+        <S.QuestionRespond
+          key={answer.title}
+          title={answer.title}
+          answers={
+            answer.answers.length > 0 ? answer.answers : ['응답 하지 않음']
+          }
+        />
+      ),
+  );
 
   const confirmSubmit = async () => {
     if (!surveyCompleted) {

client/src/page/Result/index.tsx

@@ -1,17 +1,20 @@
 import React from 'react';
-import { IAnswers } from 'component/molecules/QuestionRespond';
+import { Answers } from 'types/type';
 import * as S from './style';
 
-interface IResult {
+export interface ResultProps {
   userId: string;
   surveyCompleted: boolean;
-  answerRespond: IAnswers[];
+  answerRespond: Answers[];
   onCloseResult: () => void;
 }
 
 const Result = ({
-  userId, surveyCompleted, answerRespond, onCloseResult,
-}: IResult) => (
+  userId,
+  surveyCompleted,
+  answerRespond,
+  onCloseResult,
+}: ResultProps) => (
   <S.ResultPage>
     <S.Title>설문 결과</S.Title>
     <S.QuestionResult

client/src/page/Survey/index.tsx

@@ -5,12 +5,12 @@ import { listQuestionnaires, getUser } from 'graphql/queries';
 import { createUser } from 'graphql/mutations';
 import BaseTemplate from 'page/BaseTemplate';
 import LoadingPage from 'page/Loading';
-import { IAnswers } from 'component/molecules/QuestionRespond';
+import { Answers } from 'types/type';
 import Questionnaire from 'component/orgamisms/Questionnaire';
 import ResultComponent from '../Result';
 import * as S from './style';
 
-const firstInput: IAnswers[] = Array(12).fill({ title: '', answers: [] });
+const firstInput: Answers[] = Array(12).fill({ title: '', answers: [] });
 const Survey = ({ className, isLoggedIn }: any) => {
   const { loading, error, data } = useQuery(
     gql`
@@ -44,7 +44,7 @@ const Survey = ({ className, isLoggedIn }: any) => {
 
   const bUserUpdating = useRef<boolean>(false);
   const [page, setPage] = useState<number>(0);
-  const [answerRespond, setanswerRespond] = useState<IAnswers[]>(
+  const [answerRespond, setanswerRespond] = useState<Answers[]>(
     userData?.getUser.items[0]
       ? userData.getUser.items[0].question
       : firstInput,

client/src/types/type.ts

@@ -0,0 +1,4 @@
+export interface Answers {
+  title: string;
+  answers: string[];
+}