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

Yapp-17th · Nov 25, 2020 · 8ed3d22 · 8ed3d22
1 parent 2137253
commit 8ed3d22
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 25 deletions.
diff --git a/src/App.js b/src/App.js
@@ -7,6 +7,7 @@ import ConferenceRoom from './pages/ConferenceRoom';
 import NotFound from './pages/404';
 import LoginPage from './pages/LoginPage';
 import QuestionListPage from './pages/QuestionListPage';
+import QuestionPage from './pages/QuestionPage';
 
 export default function App() {
   return (
@@ -15,6 +16,7 @@ export default function App() {
         <Route exact path="/" component={LoginPage} />
         <AuthRoute path="/conference" component={ConferenceButton} />
         <Route path="/questionlist" component={QuestionListPage} />
+        <Route path="/question/:id" component={QuestionPage} />
         <Route path="/room/:roomID" component={ConferenceRoom} />
         <Route component={NotFound} />
       </Switch>

diff --git a/src/components/QuestionCardView/QuestionCardView.js b/src/components/QuestionCardView/QuestionCardView.js
@@ -13,6 +13,7 @@ const Box = styled.div`
   background-color: #ffffff;
   box-sizing: content-box;
   user-select: none;
+  cursor: pointer;
 `;
 
 const Content = styled.div`
@@ -28,7 +29,6 @@ const Number = styled.div`
 `;
 
 const NumberText = styled.div`
-  display: inline-block;
   float: left;
   font-family: TitilliumWeb;
   font-size: 55px;

diff --git a/src/components/StudyCardView/StudyCardView.js b/src/components/StudyCardView/StudyCardView.js
@@ -27,13 +27,13 @@ const Content = styled.div`
     border-radius: 20px;
     background-image: linear-gradient(to bottom, #2323de, #4848da);
     box-shadow: 0 6px 12px 0 rgba(4, 4, 161, 0.1);
-    & > div, & > div > span {
+    &>div, &>div>span {
       color: #ffffff;
     }
-    & > div > div {
+    &>div>div {
       color: #0c0c59;
     }
-    & : nth-child(4) {
+    &:nth-child(4) {
       background: #fcfcfc;
     }
   }

diff --git a/src/pages/QuestionListPage/IsQuestionList/IsQuestionList.js b/src/pages/QuestionListPage/IsQuestionList/IsQuestionList.js
@@ -1,6 +1,7 @@
 /* eslint-disable react/prop-types */
 import React, { useState } from 'react';
 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';
@@ -50,14 +51,16 @@ export default function IsQuestionList({ questionList }) {
     <>
       <Wrapper>
         <ItemWrapper>
-          <AddQuestionList>
-            <IconWrapper>
-              <Icon type="add_black" alt="icon" />
-            </IconWrapper>
-            <AddText>
-              질문 리스트 추가
-            </AddText>
-          </AddQuestionList>
+          <Link to="/question/new" style={{ textDecoration: 'none' }}>
+            <AddQuestionList>
+              <IconWrapper>
+                <Icon type="add_black" alt="icon" />
+              </IconWrapper>
+              <AddText>
+                질문 리스트 추가
+              </AddText>
+            </AddQuestionList>
+          </Link>
         </ItemWrapper>
         {questionList?.map((val) => {
           const [count, setCount] = useState(0);
@@ -66,11 +69,13 @@ export default function IsQuestionList({ questionList }) {
           });
           return (
             <ItemWrapper>
-              <QuestionCardView
-                number={count}
-                title={val.title}
-                description={val.enterprise}
-              />
+              <Link to={`/question/${val.id}`} style={{ textDecoration: 'none' }}>
+                <QuestionCardView
+                  number={count}
+                  title={val.title}
+                  description={val.enterprise}
+                />
+              </Link>
             </ItemWrapper>
           );
         })}

diff --git a/src/pages/QuestionListPage/NoList/NoList.js b/src/pages/QuestionListPage/NoList/NoList.js
@@ -29,6 +29,7 @@ const Button = styled.div`
     background-image: linear-gradient(to bottom, #2323de, #4848da);
     justify-content: center;
     align-items: center;
+    cursor: pointer;
 `;
 const ButtonText = styled.span`
     height: 30px;
@@ -48,12 +49,14 @@ export default function NoList() {
     <>
       <Image src={NoListImage} />
       <Text>등록된 질문 리스트가 없습니다.</Text>
-      <Button>
-        <Icon type="add_white" alt="" />
-        <ButtonText>
-          질문 리스트 등록하기
-        </ButtonText>
-      </Button>
+      <Link to="/question/new" style={{ textDecoration: 'none' }}>
+        <Button>
+          <Icon type="add_white" alt="" />
+          <ButtonText>
+            질문 리스트 등록하기
+          </ButtonText>
+        </Button>
+      </Link>
     </>
   );
 }
diff --git a/src/pages/QuestionListPage/QuestionListPage.js b/src/pages/QuestionListPage/QuestionListPage.js
@@ -46,12 +46,12 @@ const Select = styled.div`
 
 export default function QuestionListPage() {
   const authSelector = useSelector(get('auth'));
-  const [questionList, setQuestionList] = useState();
+  const [questionList, setQuestionList] = useState([]);
   const fetch = async () => {
     getQuestionListAPI().then((response) => {
       setQuestionList(response.data);
     });
-  }
+  };
   useEffect(() => {
     fetch();
   }, []);

diff --git a/src/pages/QuestionPage/QuestionPage.js b/src/pages/QuestionPage/QuestionPage.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import styled from 'styled-components';
+import { useSelector } from 'react-redux';
+import ProfileMenuContiner from '../../components/ProfileMenuContainer';
+import { get } from '../../utils/snippet';
+import Icon from '../../components/Icon';
+
+const ProfileWrapper = styled.div`
+    float: right;
+    margin: 53px 105px 0 0;
+`;
+
+const Wrapper = styled.div`
+    display: flex;
+    width: 100%;
+    height: 100vh-137px;
+    margin-top: 137px;
+    flex-direction: column;
+    align-items: center;
+`;
+
+const Title = styled.div`
+    font-family: AppleSDGothicNeoEB00;
+    font-size: 36px;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: 1.44;
+    letter-spacing: normal;
+    color: #000000;
+`;
+
+const InputQuestion = styled.div`
+  display: flex;
+  align-self: center;
+  width: 1027px;
+  height: 30px;
+  font-size: 24px;
+  padding: 25px;
+  border: none;
+  outline: none;
+  border-radius: 10px;
+  box-shadow: 0 6px 12px 0 rgba(4, 4, 161, 0.04);
+  background-color: #f6f6f6;
+
+`;
+
+export default function QuestionPage({ match }) {
+  const authSelector = useSelector(get('auth'));
+  const { id } = match.params;
+  return (
+    <>
+      <ProfileWrapper>
+        <ProfileMenuContiner name={authSelector.name} />
+      </ProfileWrapper>
+      <Wrapper>
+        <Title>
+          면접 질문 작성 및 수정하기
+        </Title>
+        <InputQuestion contentEditable="true" />
+        <Icon type="" />
+      </Wrapper>
+    </>
+  );
+}
diff --git a/src/pages/QuestionPage/index.js b/src/pages/QuestionPage/index.js
@@ -0,0 +1 @@
+export { default } from './QuestionPage';