feat: 질문 작성 페이지 제작 중 (#66)

상세 입력 페이지 질문 없는경우 제작
Yapp-17th · Nov 26, 2020 · 98a69b6 · 98a69b6
1 parent 8ed3d22
commit 98a69b6
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 21 deletions.
diff --git a/src/pages/QuestionListPage/IsQuestionList/IsQuestionList.js b/src/pages/QuestionListPage/IsQuestionList/IsQuestionList.js
@@ -4,7 +4,6 @@ import styled from 'styled-components';
 import { Link } from 'react-router-dom';
 import QuestionCardView from '../../../components/QuestionCardView';
 import { getQuestionItemAPI } from '../../../repository/questionListRepository';
-import { QuestionItemMock } from '../../../mocks/QuestionItemMock';
 import Icon from '../../../components/Icon';
 
 const Wrapper = styled.div`

diff --git a/src/pages/QuestionListPage/QuestionListPage.js b/src/pages/QuestionListPage/QuestionListPage.js
@@ -6,7 +6,6 @@ import NoList from './NoList';
 import IsQuestionList from './IsQuestionList';
 import { get } from '../../utils/snippet';
 import ProfileMenuContiner from '../../components/ProfileMenuContainer';
-import { QuestionListMock } from '../../mocks/QuestionListMock';
 
 const ProfileWrapper = styled.div`
     float: right;
@@ -47,9 +46,11 @@ const Select = styled.div`
 export default function QuestionListPage() {
   const authSelector = useSelector(get('auth'));
   const [questionList, setQuestionList] = useState([]);
+  const [loading, setLoading] = useState(false);
   const fetch = async () => {
     getQuestionListAPI().then((response) => {
       setQuestionList(response.data);
+      setLoading(true);
     });
   };
   useEffect(() => {
@@ -58,19 +59,24 @@ export default function QuestionListPage() {
 
   return (
     <>
-      <ProfileWrapper>
-        <ProfileMenuContiner name={authSelector.name} />
-      </ProfileWrapper>
-      <Wrapper>
-        <Title>
-          {authSelector.name}
-          님이 등록한 질문 리스트입니다.
-        </Title>
-        <Select>연습하고 싶은 질문 리스트를 선택해주세요.</Select>
-        {questionList && questionList.length === 0
-          ? <NoList />
-          : <IsQuestionList questionList={questionList} />}
-      </Wrapper>
+      {loading
+        && (
+        <>
+          <ProfileWrapper>
+            <ProfileMenuContiner name={authSelector.name} />
+          </ProfileWrapper>
+          <Wrapper>
+            <Title>
+              {authSelector.name}
+              님이 등록한 질문 리스트입니다.
+            </Title>
+            <Select>연습하고 싶은 질문 리스트를 선택해주세요.</Select>
+            {questionList && questionList.length === 0
+              ? <NoList />
+              : <IsQuestionList questionList={questionList} />}
+          </Wrapper>
+        </>
+        )}
     </>
   );
 }
diff --git a/src/pages/QuestionPage/QuestionPage.js b/src/pages/QuestionPage/QuestionPage.js
@@ -1,7 +1,10 @@
-import React from 'react';
+/* eslint-disable react/prop-types */
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { useSelector } from 'react-redux';
+import Button from '../../components/Button';
 import ProfileMenuContiner from '../../components/ProfileMenuContainer';
+import { getQuestionItemAPI } from '../../repository/questionListRepository';
 import { get } from '../../utils/snippet';
 import Icon from '../../components/Icon';
 
@@ -19,6 +22,14 @@ const Wrapper = styled.div`
     align-items: center;
 `;
 
+const Input = styled.div`
+  display: flex;
+  height: 100vh-137px;
+  align-items: center;
+  justify-content: center;
+  margin-top: 71px;
+`;
+
 const Title = styled.div`
     font-family: AppleSDGothicNeoEB00;
     font-size: 36px;
@@ -30,24 +41,59 @@ const Title = styled.div`
     color: #000000;
 `;
 
-const InputQuestion = styled.div`
+const InputQuestion = styled.input`
   display: flex;
   align-self: center;
   width: 1027px;
-  height: 30px;
+  height: 26px;
   font-size: 24px;
-  padding: 25px;
+  padding: 17px;
   border: none;
   outline: none;
   border-radius: 10px;
   box-shadow: 0 6px 12px 0 rgba(4, 4, 161, 0.04);
   background-color: #f6f6f6;
+`;
+
+const IconWrapper = styled.span`
+  width: 63px;
+  height: 63px;
+  transform:translate(-12px, -2px);
+`;
 
+const Text = styled.div`
+  margin-top: 262px;
+  font-family: AppleSDGothicNeoM00;
+  font-size: 24px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.33;
+  letter-spacing: normal;
+  text-align: center;
+  color: #000000;
+`;
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 261px;
 `;
 
 export default function QuestionPage({ match }) {
   const authSelector = useSelector(get('auth'));
+  const [questions, setQuestions] = useState([]);
+  const [loading, setLoading] = useState(false);
   const { id } = match.params;
+  const fetch = async () => {
+    getQuestionItemAPI(id).then((response) => {
+      //setQuestions(response.data);
+    });
+  };
+  useEffect(() => {
+    fetch();
+    setLoading(true);
+  }, []);
   return (
     <>
       <ProfileWrapper>
@@ -57,9 +103,28 @@ export default function QuestionPage({ match }) {
         <Title>
           면접 질문 작성 및 수정하기
         </Title>
-        <InputQuestion contentEditable="true" />
-        <Icon type="" />
+        <Input>
+          <InputQuestion placeholder="여기에 글자를 입력해주세요." />
+          <IconWrapper>
+            <Icon type="check_rec" />
+          </IconWrapper>
+        </Input>
       </Wrapper>
+      {loading
+        && (
+          <>
+            {questions && questions.length === 0
+              ? (
+                <Text>
+                  등록된 질문이 없습니다.
+                </Text>
+              )
+              : ''}
+            <ButtonWrapper>
+              <Button text="완료" theme="blue" />
+            </ButtonWrapper>
+          </>
+        )}
     </>
   );
 }
diff --git a/src/repository/loginRepository.js b/src/repository/loginRepository.js
@@ -1,3 +1,4 @@
+/* eslint-disable import/prefer-default-export */
 /* eslint-disable no-return-await */
 import api from '../context/serverContext';