-
-
+
-
- {/* TODO: history.push('mypage') */}
-
{}}>마이페이지 +history.push('/mypage')}>마이페이지 -
dispatch(setLogout())}>로그아웃 diff --git a/src/components/Question/QuestionItem/QuestionItem.js b/src/components/Question/QuestionItem/QuestionItem.js index d6838bd..c835f3f 100644 --- a/src/components/Question/QuestionItem/QuestionItem.js +++ b/src/components/Question/QuestionItem/QuestionItem.js @@ -4,7 +4,6 @@ import { useDrag, useDrop } from 'react-dnd'; import styled from 'styled-components'; import PropTypes from 'prop-types'; import Icon from '@components/Icon'; -import { deleteQuestionItemAPI } from '@repository/questionListRepository'; const Wrapper = styled.div` display: flex; @@ -56,7 +55,7 @@ const IconWrapper = styled.span` align-items: center; margin-left: auto; margin-right: 46px; - ${({ clicked }) => (clicked && 'transform: rotate(180deg)')} + ${({ clicked }) => clicked && 'transform: rotate(180deg)'} `; const AnswerBox = styled.div` @@ -91,7 +90,16 @@ const ContenText = styled.textarea` `; export default function QuestionItem({ - id, title, text, index, moveCard, handleQuestion, + id, + title, + text, + index, + moveCard, + handleQuestion, + setQuestions, + questions, + setDeletedItems, + tempId, }) { const [clicked, setClicked] = useState(false); const ref = useRef(null); @@ -133,9 +141,21 @@ export default function QuestionItem({ }; const handleDelete = () => { - deleteQuestionItemAPI(id).then(() => { - window.location.reload(false); + const processQuestions = questions.filter((val) => { + if (val.id !== id || val.tempId !== tempId) { + return val; + } + return undefined; }); + + if (id) { + setDeletedItems((items) => { + const temp = [...items, id]; + return temp; + }); + } + + setQuestions(processQuestions); }; return ( @@ -160,18 +180,27 @@ export default function QuestionItem({ } QuestionItem.propTypes = { - id: PropTypes.number.isRequired, + id: PropTypes.number, title: PropTypes.string, text: PropTypes.string, index: PropTypes.number.isRequired, moveCard: PropTypes.func.isRequired, handleQuestion: PropTypes.func, + setQuestions: PropTypes.func, + questions: PropTypes.array, + setDeletedItems: PropTypes.func, + tempId: PropTypes.number, }; QuestionItem.defaultProp = { - id: 1, + id: undefined, title: 'Sample Title', text: 'Sample Question', index: 1, moveCard: () => {}, + handleQuestion: () => {}, + setQuestions: '', + questions: [], + setDeletedItems: () => {}, + tempId: undefined, }; diff --git a/src/components/Question/QuestionList/QuestionList.js b/src/components/Question/QuestionList/QuestionList.js index c959216..1c3555f 100644 --- a/src/components/Question/QuestionList/QuestionList.js +++ b/src/components/Question/QuestionList/QuestionList.js @@ -1,18 +1,28 @@ import React, { useCallback } from 'react'; + import update from 'immutability-helper'; import PropTypes from 'prop-types'; import QuestionItem from '@components/Question/QuestionItem'; -export default function QuestionList({ questions, setQuestions }) { - const moveCard = useCallback((dragIndex, hoverIndex) => { - const dragCard = questions[dragIndex]; - setQuestions(update(questions, { - $splice: [ - [dragIndex, 1], - [hoverIndex, 0, dragCard], - ], - })); - }, [questions]); +export default function QuestionList({ + questions, + setQuestions, + setDeletedItems, +}) { + const moveCard = useCallback( + (dragIndex, hoverIndex) => { + const dragCard = questions[dragIndex]; + setQuestions( + update(questions, { + $splice: [ + [dragIndex, 1], + [hoverIndex, 0, dragCard], + ], + }), + ); + }, + [questions], + ); const handleQuestion = (e, title) => { const newQestion = questions.map((val) => { @@ -32,13 +42,17 @@ export default function QuestionList({ questions, setQuestions }) { const renderCard = (card, index) => (); return ( @@ -51,8 +65,10 @@ export default function QuestionList({ questions, setQuestions }) { QuestionList.propTypes = { questions: PropTypes.array, setQuestions: PropTypes.func, + setDeletedItems: () => {}, }; QuestionList.defaultProp = { questions: [], + setDeletedItems: () => {}, }; diff --git a/src/components/QuestionCardView/QuestionCardView.js b/src/components/QuestionCardView/QuestionCardView.js index 9811767..fc61d15 100644 --- a/src/components/QuestionCardView/QuestionCardView.js +++ b/src/components/QuestionCardView/QuestionCardView.js @@ -10,7 +10,7 @@ const Box = styled.div` height: 270px; border-radius: 10px; box-shadow: 0 6px 12px 0 rgba(4, 4, 161, 0.1); - border: solid ${({ clicked }) => (clicked ? '3px #5f5fd9;' : '1px #f6f6f6;')}; + border: solid ${({ clicked }) => (clicked ? '3px #5f5fd9;' : '1px #f6f6f6;')}; background-color: #ffffff; box-sizing: content-box; user-select: none; @@ -23,14 +23,23 @@ const Content = styled.div` `; const IconBox = styled.div` - width: 20px; - height: 7px; - margin: 23px 26px 0 0; + width: 40px; + height: 30px; + margin: 0px 26px 0 0; margin-left: auto; - background-color: red; + display: flex; + align-items: flex-end; + justify-content: space-around; z-index: 10; `; +const IconEach = styled.div` + width: 7px; + height: 7px; + border-radius: 7px; + background-color: #9e9e9e; +`; + const Number = styled.div` width: 100%; height: 83px; @@ -104,7 +113,7 @@ const SubTitle = styled.div` max-width: 250px; max-height: 30px; overflow: hidden; - text-overflow:ellipsis; + text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; font-family: AppleSDGothicNeoB00; @@ -118,62 +127,78 @@ const SubTitle = styled.div` color: #000000; `; -const Delete = styled.div` - display: flex; - align-items: center; - position: absolute; - left: 165px; - top: 40px; +const List = styled.ul` width: 143px; - height: 86px; + padding: 18.5px 0px 18.5px 0px; + position: absolute; + top: 30px; + right: 25px; + z-index: 101; + background-color: #fff; + transition: 0.25s ease all; + transform: scale(0); + transform-origin: 0 1; border-radius: 10px; box-shadow: 0 12px 24px 0 rgba(4, 4, 161, 0.15); - background-color: #ffffff; - z-index: 1000; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + transform: ${({ isOpen }) => isOpen && 'scale(1)'}; +`; + +const Item = styled.li` + width: 87px; + padding-top: 12.5px; + padding-bottom: 12.5px; + display: flex; + align-items: center; + justify-content: flex-start; `; -const DeleteText = styled.div` - margin-left: 28px; +const Each = styled.div` + width: 100%; + user-select: none; font-family: AppleSDGothicNeoM00; font-size: 20px; - font-weight: normal; - font-stretch: normal; - font-style: normal; - line-height: 1.3; - letter-spacing: normal; - text-align: left; - color: #f2886b; + color: #9e9e9e; + &:hover { + color: #f2886b; + text-decoration: none; + } `; export default function QuestionCardView({ - id, number, title, description, handleDelete, + id, + number, + title, + description, + handleDelete, }) { - const [clicked, setClicked] = useState(false); + const [isOpen, setIsOpen] = useState(false); const history = useHistory(); - const handleClick = (e) => { - if (e.target === e.currentTarget) { - setClicked(!clicked); - } - }; const handleMove = (e) => { if (e.target === e.currentTarget) { history.push(`/question/${id}`); } }; - + const toggle = (set) => setIsOpen(set); return ( <> - - ); } diff --git a/src/components/Sidebar/Sidebar.js b/src/components/Sidebar/Sidebar.js index 50c2883..ebf3ecd 100644 --- a/src/components/Sidebar/Sidebar.js +++ b/src/components/Sidebar/Sidebar.js @@ -1,8 +1,11 @@ /* eslint-disable indent */ import React, { useState } from 'react'; import { useHistory } from 'react-router-dom'; +import { useDispatch } from 'react-redux'; import styled from 'styled-components'; +import { setLogout } from '@store/Auth/auth'; + import LogoWithTitle from '@assets/images/witherview_logo_title.png'; import Logo from '@assets/images/witherview_logo.png'; import SidebarButton from './SidebarButton'; @@ -59,6 +62,7 @@ const WrapBottomButton = styled.div` `; export default function Sidebar() { + const dispatch = useDispatch(); const history = useHistory(); const [click, setClick] = useState(0); const [hover, setHover] = useState(false); @@ -91,21 +95,21 @@ export default function Sidebar() {+ toggle(true)}> + ++ + + - toggle(false)}>
+
-
+
handleDelete()}>삭제 +
+
- { clicked && ( - -handleDelete(e, id)}> - - )}- 삭제 - -{number} @@ -184,16 +209,12 @@ export default function QuestionCardView({ - <TitleText> - {title} - </TitleText> + <TitleText>{title}</TitleText> <Icon type="post" alt="" /> {description} handleClick(0)} + func={() => handleClick(0)} type={click === 0 ? 'bubble_black' : 'bubble_white'} clicked={click === 0} hover={hover} title="혼자연습" /> handleClick(1)} + func={() => handleClick(1)} type={click === 1 ? 'sound_black' : 'sound_white'} clicked={click === 1} hover={hover} title="면접스터디" /> handleClick(2)} + func={() => handleClick(2)} type={click === 2 ? 'profile_black' : 'profile_white'} clicked={click === 2} hover={hover} @@ -114,7 +118,7 @@ export default function Sidebar() { handleClick(3)} + func={() => dispatch(setLogout())} type={click === 3 ? 'exit_blue' : 'exit_white'} clicked={click === 3} hover={hover} diff --git a/src/components/Sidebar/SidebarButton/SidebarButton.js b/src/components/Sidebar/SidebarButton/SidebarButton.js index 67444c3..4dc4dad 100644 --- a/src/components/Sidebar/SidebarButton/SidebarButton.js +++ b/src/components/Sidebar/SidebarButton/SidebarButton.js @@ -30,14 +30,10 @@ const WrapText = styled.div` `; export default function SidebarButton({ - type, - clicked, - handleClick, - hover, - title, + type, clicked, func, hover, title, }) { return ( - + {hover && {title} }diff --git a/src/hooks/useMediaRecorder.js b/src/hooks/useMediaRecorder.js index 566d0ce..3a00d9b 100644 --- a/src/hooks/useMediaRecorder.js +++ b/src/hooks/useMediaRecorder.js @@ -2,15 +2,9 @@ import { useCallback, useEffect, useRef, useState, } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; -import { get } from '@utils/snippet'; +import { useDispatch } from 'react-redux'; -import { setLocalBlob, setUploadedLocation } from '@store/Train/train'; - -import { - postVideoApi, - getVideoApi, -} from '@repository/requestVideoRepository'; +import { setLocalBlob } from '@store/Train/train'; export default function useReactMediaRecorder({ audio = true, @@ -21,7 +15,6 @@ export default function useReactMediaRecorder({ mediaRecorderOptions = null, }) { const dispatch = useDispatch(); - const { selectedQnaId } = useSelector(get('auth')); const mediaRecorder = useRef(null); const mediaChunks = useRef([]); const mediaChunkEach = useRef([]); @@ -126,9 +119,10 @@ export default function useReactMediaRecorder({ const blobProperty = { type: chunk.type, ...(blobPropertyBag - || (video || screen ? { type: 'video/mp4' } : { type: 'audio/wav' })), + || (video || screen ? { type: 'video/webm;codecs=vp8,opus' } : { type: 'audio/wav' })), }; const blob = new Blob(mediaChunks.current, blobProperty); + console.log(blob); const url = URL.createObjectURL(blob); setStatus('stopped'); @@ -137,28 +131,6 @@ export default function useReactMediaRecorder({ onStop(url, blob); - // TODO: 혼자연습하기 체크리스트에서 재생할 수 있도록 해야 함 - const blobData = new Blob(mediaChunks.current, { - type: 'video/webm;codecs=vp8,opus', - }); - const formData = new FormData(); - formData.append('videoFile', blobData); - formData.append('questionListId', selectedQnaId); - - // TODO: 서버의 Response를 기다리는 로딩 상황임을 알려주는 Progress Bar 혹은 Spinner가 렌더링 되게끔 하는 상태를 추가해야 함 - await postVideoApi(formData) - .then((response) => { - const { id } = response.data; - getVideoApi().then((res) => { - const { savedLocation } = res.data.find((elem) => elem.id === id); - const uploadedLocation = `${savedLocation.substring(0, 27)}videos/${savedLocation.substring(27)}`; - dispatch(setUploadedLocation({ uploadedLocation })); - }); - }) - .catch((err) => { - alert(err); - }); - mediaChunks.current = []; mediaChunkEach.current = []; }; diff --git a/src/mocks/EvaluationListMock.js b/src/mocks/EvaluationListMock.js index 979f3b6..6618353 100644 --- a/src/mocks/EvaluationListMock.js +++ b/src/mocks/EvaluationListMock.js @@ -2,31 +2,31 @@ const Evaluation = { evaluationList1: [ { id: 0, - text: '목소리가 작지 않았다.', + text: '묻는 말에 알맞은 대답을 했다.(동문서답 하지 않았다.)', }, { id: 1, - text: '복장이 단정하며 청결하였다.', + text: '두괄식으로 처음부터 하고자 하는 말을 요약해서 전달했다.', }, { id: 2, - text: '말하는 태도와 표정의 관리가 일관적이었다.', + text: '추상적인(열심히 했다 등) 답변을 하지 않았다.', }, { id: 3, - text: '눈빛의 흔들림이 없었다.', + text: '똑같은 단어, 문장을 반복하지 않았다.', }, { id: 4, - text: '카메라 혹은 화면을 제대로 응시했다.', + text: '구체적인 예화, 사례, 근거를 통해 설명했다.', }, { id: 5, - text: '불필요한 추임새를 하지 않았다.', + text: '불필요한 추임새(어..음..)을 하지 않았다.', }, { id: 6, - text: '고개를 흔들거리거나 몸을 좌우로 흔들지 않았다.', + text: '목소리가 작지 않았다.', }, { id: 7, @@ -36,15 +36,15 @@ const Evaluation = { evaluationList2: [ { id: 8, - text: '똑같은 단어, 문장을 반복하지 않았다.', + text: '복장이 단정하고 청결하다.', }, { id: 9, - text: '구체적인 예화, 사례, 근거를 통해 설명했다.', + text: '얼굴과 몸을 좌우로 흔들지 않았다.', }, { id: 10, - text: '두괄식으로 처음부터 하고자 하는 말을 요약해서 전달했다.', + text: '눈동자의 흔들림이 없이 카메라 혹은 화면을 똑바로 응시했다.', }, ], evaluationList3: [ @@ -54,7 +54,7 @@ const Evaluation = { }, { id: 12, - text: '조명이 어둡지않고 이목구비가 잘 보인다.', + text: '조명이 어둡지 않고 이목구비가 잘 보인다.', }, { id: 13, diff --git a/src/pages/AloneQuestionCheckList/AloneQuestionCheckList.js b/src/pages/AloneQuestionCheckList/AloneQuestionCheckList.js index dc3428f..cebc411 100644 --- a/src/pages/AloneQuestionCheckList/AloneQuestionCheckList.js +++ b/src/pages/AloneQuestionCheckList/AloneQuestionCheckList.js @@ -1,10 +1,20 @@ +/* eslint-disable react/prop-types */ import React, { useState, useEffect, useCallback, useRef, } from 'react'; -import PropTypes from 'prop-types'; + +import axios from 'axios'; import styled from 'styled-components'; import { useHistory } from 'react-router-dom'; -import { useSelector } from 'react-redux'; +import { useSelector, useDispatch } from 'react-redux'; + +import { postVideoApi, getVideoApi } from '@repository/requestVideoRepository'; +import { + setUploadedLocation, + setToggleTrain, + setIsLoading, +} from '@store/Train/train'; + import { get } from '@utils/snippet'; import Button from '@components/Button'; import Icon from '@components/Icon'; @@ -62,38 +72,38 @@ const VideoContainer = styled.figure` `; const ControlWrapper = styled.div` - overflow:hidden; - background-color:#ffffff; - width:100%; - position:relative; - border-radius:10px; - margin-top:10px; - padding:10px; - box-sizing:border-box; - - &[data-state=hidden] { - display:none; + overflow: hidden; + background-color: #ffffff; + width: 100%; + position: relative; + border-radius: 10px; + margin-top: 10px; + padding: 10px; + box-sizing: border-box; + + &[data-state="hidden"] { + display: none; } - &[data-state=visible] { - display:block; + &[data-state="visible"] { + display: block; } `; const ButtonWrapper = styled.button` - display:block; - height:100%; - float:left; - border:none; - cursor:pointer; - background:transparent; - margin:0; - padding:0; - + display: block; + height: 100%; + float: left; + border: none; + cursor: pointer; + background: transparent; + margin: 0; + padding: 0; + &:focus { outline: none; } &:hover { - opacity:0.5; + opacity: 0.5; } `; @@ -106,22 +116,22 @@ const ProgressWrapper = styled.div` padding: 0; & progress { - display:block; - width:100%; - margin-top:1.125rem; - border:none; - overflow:hidden; - -moz-border-radius:2px; - -webkit-border-radius:2px; - border-radius:2px; - color:#6e6eff; - cursor:pointer; + display: block; + width: 100%; + margin-top: 1.125rem; + border: none; + overflow: hidden; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + border-radius: 2px; + color: #6e6eff; + cursor: pointer; &::-moz-progress-bar { - background-color:#6e6eff; + background-color: #6e6eff; } &::-webkit-progress-value { - background-color:#6e6eff; + background-color: #6e6eff; } &::-webkit-progress-bar { background-color: #d3d3d3; @@ -198,6 +208,11 @@ const CheckListContainer = styled.div` } `; +const CheckListTitle = styled.h2` + font-size: 1.5em; + margin-bottom: 30px; +`; + const CheckPoint = styled.div` left: calc(${({ point }) => `${point}% - 9px`}); `; @@ -214,22 +229,31 @@ const SmallCheckList = styled.div` } `; -export default function AloneQuestionCheckList({ src }) { +export default function AloneQuestionCheckList({ match }) { + const { id } = match.params; + const dispatch = useDispatch(); const history = useHistory(); - const { localBlob } = useSelector(get('train')); - const [nextActionBtn, setNextActionBtn] = useState(1); + const { localBlob, historyId } = useSelector(get('train')); const [playPauseBtn, setPlayPauseBtn] = useState(true); const [checkListArray, setCheckListArray] = useState(Array(14).fill(false)); const video = useRef(); const videoControls = useRef(); const playpause = useRef(); const progress = useRef(); + useEffect(() => { + dispatch(setToggleTrain({ toggleTrain: true })); video.current.controls = false; videoControls.current.setAttribute('data-state', 'visible'); + + return () => dispatch(setToggleTrain({ toggleTrain: false })); }, []); - const loadVideoMetaData = useCallback(() => progress.current.setAttribute('max', video.current.duration), []); + const loadVideoMetaData = useCallback( + () => progress.current.setAttribute('max', video.current.duration), + [], + ); + const changeButtonState = useCallback(() => { if (video.current.paused || video.current.ended) { playpause.current.setAttribute('data-state', 'play'); @@ -239,7 +263,9 @@ export default function AloneQuestionCheckList({ src }) { }, []); const onPlay = useCallback(() => changeButtonState(), []); + const onPause = useCallback(() => changeButtonState(), []); + const onPlayPause = useCallback(() => { if (video.current.paused || video.current.ended) { video.current.play(); @@ -260,28 +286,70 @@ export default function AloneQuestionCheckList({ src }) { }, []); const onProgressClck = useCallback((evt) => { - const pos = ( - evt.pageX - (progress.current.offsetLeft + progress.current.offsetParent.offsetLeft) - ) / progress.current.offsetWidth; + const pos = (evt.pageX + - (progress.current.offsetLeft + + progress.current.offsetParent.offsetLeft)) + / progress.current.offsetWidth; video.current.currentTime = pos * video.current.duration; }, []); - const onCheck = useCallback((evt) => { - const newCheckList = checkListArray.map( - (item, idx) => (idx === parseInt(evt.target.parentNode.id, 10) ? !item : item), - ); - setCheckListArray(newCheckList); - }, [checkListArray]); + const onCheck = useCallback( + (evt) => { + const newCheckList = checkListArray.map((item, idx) => (idx === parseInt(evt.target.parentNode.id, 10) ? !item : item)); + setCheckListArray(newCheckList); + }, + [checkListArray], + ); + + const selfTraingAgain = useCallback(() => { + history.push(`/question/${id}`); + }, [id]); const initCheckList = useCallback(() => { - setNextActionBtn(3); setCheckListArray(Array(14).fill(false)); - }, [nextActionBtn]); + }, []); + + const saveInterviewVideo = useCallback(() => { + const formData = new FormData(); + // TODO: Repository 만들기 + axios({ + method: 'get', + responseType: 'blob', + url: localBlob, + }).then((responseFirst) => { + dispatch(setIsLoading({ isLoading: true })); + const blob = responseFirst.data; + + formData.append('videoFile', blob); + formData.append('historyId', historyId); + postVideoApi(formData) + .then((responseSecond) => { + getVideoApi().then((resp) => { + dispatch(setIsLoading({ isLoading: false })); + const { savedLocation } = resp.data.find( + (elem) => elem.id === responseSecond.data.id, + ); + dispatch(setUploadedLocation({ savedLocation })); + // TODO: 모달로 바꾸기? + alert('저장 완료!'); + }); + }) + .catch((err) => { + dispatch(setIsLoading({ isLoading: false })); + alert(err); + }); + }); + }, [localBlob]); return ( - history.push('/self-training')} /> + history.push('/self')} + /> 면접이 종료 되었습니다. 체크리스트를 통해 스스로 평가를 해보세요. @@ -289,43 +357,91 @@ export default function AloneQuestionCheckList({ src }) { - - - 태도 및 비언어
+답변내용 및 목소리 체크! -
{EvaluationListMock.evaluationList1.map(({ id, text }) => (
-
-
+ {text}
))}
@@ -333,22 +449,30 @@ export default function AloneQuestionCheckList({ src }) {
- 답변 내용
+비언어 내용 체크! -
{EvaluationListMock.evaluationList2.map(({ id, text }) => (
-
-
+ {text}
))}
- 영상 환경 체크
+영상 환경 체크! -
{EvaluationListMock.evaluationList3.map(({ id, text }) => (
-
-
+ {text}
))}
@@ -360,11 +484,3 @@ export default function AloneQuestionCheckList({ src }) {
+ + ); +} diff --git a/src/pages/InterviewStudyEntry/InterviewStudyEntry.stories.js b/src/pages/InterviewStudyEntry/InterviewStudyEntry.stories.js new file mode 100644 index 0000000..6f5c3f5 --- /dev/null +++ b/src/pages/InterviewStudyEntry/InterviewStudyEntry.stories.js @@ -0,0 +1,10 @@ +import React from 'react'; + +import InterviewStudyEntry from './InterviewStudyEntry'; + +export default { + title: 'page/InterviewStudyEntry', + component: InterviewStudyEntry, +}; + +export const StudyEntry = () =>+ ++ ++ ++ +{roomTitle} +{dateInfoText} +{description} ++ + + ++ ; diff --git a/src/pages/InterviewStudyEntry/UsersSection.js b/src/pages/InterviewStudyEntry/UsersSection.js new file mode 100644 index 0000000..d6af975 --- /dev/null +++ b/src/pages/InterviewStudyEntry/UsersSection.js @@ -0,0 +1,86 @@ +import React from 'react'; + +import ProfileIcon from '@components/ProfileIcon/ProfileIcon'; +import ToggleButton from '@components/ToggleButton/ToggleButton'; + +import S from './InterviewStudy.style'; + +export default function UsersSection() { + const FIRST_COLUMN = 88; + const SECOND_COLUMN = 420; + const THIRD_COLUMN = 627; + const FOURTH_COLUMN = 1023; + + return ( + + + ); +} diff --git a/src/pages/InterviewStudyEntry/index.js b/src/pages/InterviewStudyEntry/index.js new file mode 100644 index 0000000..f2ba9de --- /dev/null +++ b/src/pages/InterviewStudyEntry/index.js @@ -0,0 +1 @@ +export { default } from './InterviewStudyEntry'; diff --git a/src/pages/LandingPage/LandingFooter.js b/src/pages/LandingPage/LandingFooter.js index 51a9a52..d10a5e2 100644 --- a/src/pages/LandingPage/LandingFooter.js +++ b/src/pages/LandingPage/LandingFooter.js @@ -20,8 +20,8 @@ const WrapLeft = styled.img` `; const WrapContainer = styled.div` - max-width: 1820px; - width: 80%; + max-width: 1700px; + width: 85%; display: flex; align-items: center; justify-content: space-between; diff --git a/src/pages/LandingPage/LandingHeader.js b/src/pages/LandingPage/LandingHeader.js index 385ef29..6c0c7b3 100644 --- a/src/pages/LandingPage/LandingHeader.js +++ b/src/pages/LandingPage/LandingHeader.js @@ -27,8 +27,8 @@ const WrapLeft = styled.img` `; const WrapContainer = styled.div` - width: 80%; - max-width: 1820px; + width: 90%; + max-width: 1700px; display: flex; align-items: center; justify-content: space-between; @@ -46,13 +46,13 @@ const WrapTextButton = styled.div` `; const WrapRightInner = styled.div` - width: 60%; + width: 50%; display: flex; align-items: center; justify-content: flex-end; `; -const scrollToRef = (ref) => window.scrollTo(0, ref.current.offsetTop - 140); +const scrollToRef = (ref) => window.scrollTo(0, ref.current.offsetTop - 130); export default function LandingHeader({ topRef, diff --git a/src/pages/LandingPage/LandingMiddleOne.js b/src/pages/LandingPage/LandingMiddleOne.js index 8518991..13b33c5 100644 --- a/src/pages/LandingPage/LandingMiddleOne.js +++ b/src/pages/LandingPage/LandingMiddleOne.js @@ -19,17 +19,27 @@ const Wrapper = styled.div` `; const WrapContainer = styled.div` + @media only screen and (max-width: 1870px) { + margin-bottom: 0px; + } + min-height: 600px; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-around; - margin-top: 50px; + margin-top: 75px; + margin-bottom: 50px; `; const WrapBottomContent = styled.div` - width: 90%; + @media only screen and (max-width: 1870px) { + min-height: 400px; + justify-content: center; + } + + width: 100%; display: flex; flex-wrap: wrap; align-items: center; diff --git a/src/pages/LandingPage/LandingMiddleThree.js b/src/pages/LandingPage/LandingMiddleThree.js index ff94743..129302a 100644 --- a/src/pages/LandingPage/LandingMiddleThree.js +++ b/src/pages/LandingPage/LandingMiddleThree.js @@ -1,4 +1,4 @@ -import React, { useEffect, useState, useRef } from 'react'; +import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; @@ -12,15 +12,16 @@ import CircleButton from './components/CircleButton'; const Wrapper = styled.div` @media only screen and (max-width: 1870px) { - min-height: 600px; + min-height: 400px; } width: 100%; user-select: none; - min-height: 1000px; + min-height: 1200px; display: flex; flex-direction: column; justify-content: center; align-items: center; + overflow: hidden; `; const WrapContainer = styled.div` @@ -31,7 +32,7 @@ const WrapContainer = styled.div` } position: relative; min-height: 1000px; - max-width: 1800px; + max-width: 1400px; width: 80%; display: flex; align-items: center; @@ -40,13 +41,18 @@ const WrapContainer = styled.div` const WrapImage = styled.img` @media only screen and (max-width: 1870px) { + height: 480px; + bottom: 100px; + right: -70px; + } + @media only screen and (max-width: 1400px) { display: none; position: relative; bottom: auto; height: 0px; } position: absolute; - right: 115px; + right: -100px; height: 680px; bottom: 170px; `; @@ -54,23 +60,24 @@ const WrapImage = styled.img` const WrapPadding = styled.div` @media only screen and (max-width: 1870px) { padding-top: 0px; + padding-left: 0px; } padding-bottom: 100px; `; const WrapStaticImage = styled.img` @media only screen and (max-width: 1870px) { - display: none; - position: relative; - bottom: auto; - height: 0px; + height: 480px; + right: -260px; + top: 0px; } - z-index: -1; + z-index: -2; + overflow: auto; height: 700px; position: absolute; top: 50px; - right: 0px; + right: -450px; `; const WrapCarousel = styled.div` @@ -115,7 +122,6 @@ const THIRD_TEXT = { }; export default function LandingMiddleThree({ myRefStudy }) { - const intervalId = useRef(null); const [state, setState] = useState(FIRST_STEP); const handleClick = (val) => setState(val); @@ -133,10 +139,10 @@ export default function LandingMiddleThree({ myRefStudy }) { }; useEffect(() => { - intervalId.current = setInterval(() => { + const interval = setInterval(() => { setState((stat) => (stat + 1) % 3); }, 6000); - return clearInterval(intervalId); + return () => clearInterval(interval); }, []); return ( diff --git a/src/pages/LandingPage/LandingMiddleTwo.js b/src/pages/LandingPage/LandingMiddleTwo.js index 269f342..bb5bce6 100644 --- a/src/pages/LandingPage/LandingMiddleTwo.js +++ b/src/pages/LandingPage/LandingMiddleTwo.js @@ -10,6 +10,7 @@ const Wrapper = styled.div` @media only screen and (max-width: 1870px) { min-height: 400px; } + width: 100%; user-select: none; min-height: 700px; @@ -25,9 +26,10 @@ const WrapContainer = styled.div` min-height: 400px; justify-content: flex-end; } + position: relative; min-height: 600px; - max-width: 1600px; + max-width: 1400px; width: 80%; display: flex; align-items: center; @@ -45,10 +47,11 @@ const WrapPadding = styled.div` const WrapImage = styled.img` @media only screen and (max-width: 1870px) { height: 550px; + left: -105px; bottom: -90px; } - @media only screen and (max-width: 1280px) { + @media only screen and (max-width: 1400px) { display: none; position: relative; bottom: auto; diff --git a/src/pages/LandingPage/LandingPage.js b/src/pages/LandingPage/LandingPage.js index 20ceb08..3613924 100644 --- a/src/pages/LandingPage/LandingPage.js +++ b/src/pages/LandingPage/LandingPage.js @@ -1,7 +1,6 @@ import React, { useRef } from 'react'; import styled from 'styled-components'; - import LandingHeader from './LandingHeader'; import LandingTop from './LandingTop'; import LandingMiddleOne from './LandingMiddleOne'; diff --git a/src/pages/LandingPage/LandingTop.js b/src/pages/LandingPage/LandingTop.js index afef738..8475029 100644 --- a/src/pages/LandingPage/LandingTop.js +++ b/src/pages/LandingPage/LandingTop.js @@ -14,7 +14,7 @@ const Wrapper = styled.div` } width: 100%; user-select: none; - height: 950px; + height: 940px; background-color: #f9f9ff; padding-top: 140px; display: flex; @@ -34,10 +34,9 @@ const WrapContainer = styled.div` const WrapContent = styled.div` @media only screen and (max-width: 1820px) { - width: 100%; - } - @media only screen and (max-width: 1500px) { + justify-content: center; padding-top: 0px; + width: 100%; } padding-top: 100px; display: flex; @@ -46,11 +45,10 @@ const WrapContent = styled.div` const WrapImage = styled.img` @media only screen and (max-width: 1820px) { - height: 600px; + height: 500px; } - @media only screen and (max-width: 1500px) { - display: none; + @media only screen and (max-width: 1400px) { position: relative; bottom: auto; height: 0px; diff --git a/src/pages/LandingPage/components/TextBoxC.js b/src/pages/LandingPage/components/TextBoxC.js index d90f0cb..9c94f31 100644 --- a/src/pages/LandingPage/components/TextBoxC.js +++ b/src/pages/LandingPage/components/TextBoxC.js @@ -4,8 +4,13 @@ import PropTypes from 'prop-types'; import styled from 'styled-components'; const Wrapper = styled.div` + @media only screen and (max-width: 1870px) { + margin: 25px; + margin-bottom: 75px; + } + height: 310px; - width: 470px; + width: 480px; position: relative; display: flex; flex-direction: column; diff --git a/src/pages/LoginPage/LoginPage.js b/src/pages/LoginPage/LoginPage.js index f7a1bc3..8cbdca0 100644 --- a/src/pages/LoginPage/LoginPage.js +++ b/src/pages/LoginPage/LoginPage.js @@ -3,6 +3,7 @@ import React, { useState } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { Redirect } from 'react-router-dom'; import styled from 'styled-components'; + import witherviewLogo from '@assets/images/witherview_logo_title_dark.png'; import { get } from '@utils/snippet'; import { setLogin } from '@store/Auth/auth'; @@ -22,6 +23,9 @@ const Wrapper = styled.div` `; const WrapContent = styled.div` + @media only screen and (max-height: 1080px) { + height: 800px; + } height: 900px; display: flex; flex-direction: column; @@ -112,21 +116,31 @@ const WrapAnker = styled.span` } `; +const EMPTY_FORM = { + email: '', + password: '', +}; + +const TEST_FORM = { + email: 'test@test.com', + password: '123456', +}; + export default function LoginPage() { const dispatch = useDispatch(); const authSelector = useSelector(get('auth')); - const [loginForm, setLoginForm] = useState({ - email: '', - password: '', - }); + const [loginForm, setLoginForm] = useState(EMPTY_FORM); + const [toggleCheck, setToggleCheck] = useState(false); const handleInput = (e) => { + setLoginForm({}); setLoginForm({ ...loginForm, [e.target.name]: e.target.value, }); }; + const handleLogin = () => { LoginApi(JSON.stringify(loginForm)) .then((response) => { @@ -140,9 +154,18 @@ export default function LoginPage() { }); }; + const handleCheck = (e) => { + const isChecked = e.target.checked; + setToggleCheck(isChecked); + if (isChecked) { + return setLoginForm(TEST_FORM); + } + return setLoginForm(EMPTY_FORM); + }; + return (+ +사용자 정보 +스터디 참가 횟수 +신뢰도 +참가 희망 ++ ++ ++ ++ + +이용재
++ ++ 유통 + ++ 데이터 분석 + ++ ++ 10번 + ++ ++ ++ 35% + + ++ + ++ ++ + +김찬호
++ ++ 화학 + ++ 데이터 분석 + ++ ++ 12번 + ++ ++ ++ 100% + + ++ - {authSelector.isLogin && } + {authSelector.isLogin && } @@ -152,6 +175,9 @@ export default function LoginPage() { 이메일 주소 비밀번호 {/* TODO: 이부분 동작하도록 만들어야 함 아마 로그인 유지가 아니라 이메일 유지로 바뀔듯 */} - {/* TODO: onClick history.push로 이동하는 부분으로 변경 */}- 로그인 상태 유지 ++ 테스트 계정 사용 {}}> diff --git a/src/pages/MyPage/MyPage.js b/src/pages/MyPage/MyPage.js index b19b84d..8141737 100644 --- a/src/pages/MyPage/MyPage.js +++ b/src/pages/MyPage/MyPage.js @@ -1,89 +1,127 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; import Icon from '@components/Icon'; import ProfileEdit from '@components/ProfileEdit'; +import { getUserApi } from '@repository/loginRepository'; import S from './MyPage.style'; import Box from './Box'; export default function MyPage() { const name = sessionStorage.getItem('name'); const email = sessionStorage.getItem('email'); + const [info, setInfo] = useState([]); + const fetch = async () => { + getUserApi().then((response) => { + const { data } = response; + setInfo([ + { + "type": "sound_big", + "title": "면접스터디 횟수", + "count": data?.groupStudyCnt, + }, + { + "type": "bubble_big", + "title": "혼자연습 횟수", + "count": data?.selfPracticeCnt, + }, + { + "type": "memo_big", + "title": "질문 리스트 갯수", + "count": data?.questionListCnt, + }, + { + "type": "star_big", + "title": "면접 평균 점수", + "count": data?.interviewScore, + }, + { + "type": "thumb_up_big", + "title": "합격 횟수", + "count": data?.passCnt, + }, + { + "type": "thumb_down_big", + "title": "불합격 횟수", + "count": data?.failCnt, + }, + ]); + }); + }; + useEffect(() => { + fetch(); + }, []); + return ( <> - - +- -- -- -- - -- -- {name} - -- - 화학 / 데이터 분석 - -- 신뢰도 - -- -- 82% -- -- -- 이메일 주소 - -- {email} - -- 관심 산업 - -- -- 화학 - -- 금융 - -- -- 휴대전화 - -- 01012345678 - -- 관심 직무 - -- -- 데이터 분석 - -- 유통 - -- -- - - - - - + ); } diff --git a/src/pages/QuestionListPage/IsQuestionList/IsQuestionList.js b/src/pages/QuestionListPage/IsQuestionList/IsQuestionList.js index ee6fd9f..f01f11a 100644 --- a/src/pages/QuestionListPage/IsQuestionList/IsQuestionList.js +++ b/src/pages/QuestionListPage/IsQuestionList/IsQuestionList.js @@ -21,7 +21,7 @@ const ItemWrapper = styled.div` `; const AddQuestionList = styled.div` - display:flex; + display: flex; flex-direction: column; width: 334px; height: 270px; @@ -35,7 +35,7 @@ const IconWrapper = styled.div` `; const AddText = styled.div` - margin-top:30px; + margin-top: 30px; font-family: AppleSDGothicNeoB00; font-size: 24px; font-weight: normal; @@ -57,19 +57,17 @@ export default function IsQuestionList({ questionList, handleDelete }) {+ ++ ++ + ++ ++ {name} + ++ + 화학 / 데이터 분석 + ++ 신뢰도 + ++ ++ 96% ++ ++ ++ 이메일 주소 + ++ {email} + ++ 관심 산업 + ++ ++ 화학 + ++ 금융 + ++ ++ 휴대전화 + ++ 01012345678 + ++ 관심 직무 + ++ ++ 데이터 분석 + ++ 유통 + ++ {info?.map(val=>{ + return ++ })} + - 질문 리스트 추가 - +질문 리스트 추가 - {questionList?.map((val) => { + {questionList?.map((val, index) => { const [count, setCount] = useState(0); getQuestionItemAPI(val.id).then((response) => { setCount(response.data.length); }); return ( -+ { getQuestionListAPI().then((response) => { + console.log(response.data); setQuestionList(response.data); setLoading(true); }); }; + useEffect(() => { fetch(); }, []); - const handleDelete = (e, id) => { - if (e.target === e.currentTarget) { - deleteQuestionListAPI(id).then(() => { - window.location.reload(false); - }); - } + const handleDelete = async (e, id) => { + await deleteQuestionListAPI(id).then(async () => { + setLoading(false); + await fetch(); + }); }; return ( <> - {loading - && ( + {loading && ( @@ -82,13 +86,18 @@ export default function QuestionListPage() { 님이 등록한 질문 리스트입니다. - {questionList && questionList.length === 0 - ? - : } + {questionList && questionList.length === 0 ? ( + + ) : ( + + )} @@ -175,39 +224,48 @@ export default function QuestionPage({ match }) { diff --git a/src/pages/SelfTrainEntry/index.js b/src/pages/SelfTrainEntry/index.js deleted file mode 100644 index d22c741..0000000 --- a/src/pages/SelfTrainEntry/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './SelfTrainEntry'; diff --git a/src/pages/SelfTrainEntry/SelectCard.js b/src/pages/SelfTrainEntryPage/SelectCard.js similarity index 100% rename from src/pages/SelfTrainEntry/SelectCard.js rename to src/pages/SelfTrainEntryPage/SelectCard.js diff --git a/src/pages/SelfTrainEntry/SelfTrainEntry.js b/src/pages/SelfTrainEntryPage/SelfTrainEntryPage.js similarity index 54% rename from src/pages/SelfTrainEntry/SelfTrainEntry.js rename to src/pages/SelfTrainEntryPage/SelfTrainEntryPage.js index c01210f..a94864e 100644 --- a/src/pages/SelfTrainEntry/SelfTrainEntry.js +++ b/src/pages/SelfTrainEntryPage/SelfTrainEntryPage.js @@ -1,7 +1,11 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import styled from 'styled-components'; +import { useHistory } from 'react-router-dom'; +import { useSelector, useDispatch } from 'react-redux'; +import { get } from '@utils/snippet'; +import { handleReset } from '@store/Time/time'; import TextBox from '@components/TextBox'; import Button from '@components/Button'; import SelectCard from './SelectCard'; @@ -19,30 +23,46 @@ const WrapContent = styled.div` `; const WrapCardSection = styled.div` + @media only screen and (max-height: 1080px) { + padding: 0px; + } + @media only screen and (min-height: 1600px) { + @media only screen and (max-width: 1080px) { + flex-direction: column; + padding: 0px; + } + } + display: flex; padding: 80px; `; -// TODO: 이부분 API 처리를 통해 redux에서 상태 들고 와야 함 -const NAME = '홍길동'; - const SELECT_NOTHING = 0; const GUIDE_BUTTON = 1; const ADD_QUESTION_BUTTON = 2; -export default function SelfTrainEntry() { +export default function SelfTrainEntryPage() { + const dispatch = useDispatch(); + const history = useHistory(); const [clicked, setClicked] = useState(SELECT_NOTHING); + const { name } = useSelector(get('auth')); + + useEffect(() => { + dispatch(handleReset({ keepTrain: false })); + }, []); const handleToggle = (select) => { if (select === clicked) return setClicked(SELECT_NOTHING); return setClicked(select); }; + const isGuide = clicked === GUIDE_BUTTON; + return (- - {loading - && ( - <> - {questionList && questionList.length === 0 - ? ( -- 면접 질문 작성 및 수정하기 - +면접 질문 작성 및 수정하기 -+ - + - 등록된 질문이 없습니다. - - ) - : ( -- - )} -- -- -- - - - - )} + {loading && ( + <> + {questionList && questionList.length === 0 ? ( +등록된 질문이 없습니다. + ) : ( ++ + )} ++ ++ ++ + + + + )}@@ -57,7 +77,16 @@ export default function SelfTrainEntry() { func={() => handleToggle(ADD_QUESTION_BUTTON)} /> - +; +export const SelfTrainEntryPageDefault = () => ; export const SelectCardDefault = () => ( <> diff --git a/src/pages/SelfTrainEntryPage/index.js b/src/pages/SelfTrainEntryPage/index.js new file mode 100644 index 0000000..4e44952 --- /dev/null +++ b/src/pages/SelfTrainEntryPage/index.js @@ -0,0 +1 @@ +export { default } from './SelfTrainEntryPage'; diff --git a/src/pages/SelfTrainPage/SelfTrainPage.js b/src/pages/SelfTrainPage/SelfTrainPage.js index 7328d88..d470cd6 100644 --- a/src/pages/SelfTrainPage/SelfTrainPage.js +++ b/src/pages/SelfTrainPage/SelfTrainPage.js @@ -1,3 +1,4 @@ +/* eslint-disable react/prop-types */ import React, { useState, useEffect } from 'react'; import Timeout from 'await-timeout'; @@ -9,12 +10,12 @@ import { startTime, handleReset, handleNextButton, - setStep, handleStepQuestion, } from '@store/Time/time'; -import { get } from '@utils/snippet'; +import { setStep, setHistoryId } from '@store/Train/train'; +import { sortObjectByOrder, get } from '@utils/snippet'; import { getQuestionItemAPI } from '@repository/questionListRepository'; - +import { postPreVideoApi } from '@repository/requestVideoRepository'; import useReactMediaRecorder from '@hooks/useMediaRecorder'; import CamView from '@components/CamView'; @@ -40,36 +41,31 @@ const STEP_START = 3; const STEP_ING = 4; const TOGGLE_SCRIPT = 5; -// TODO: 앞 페이지 완성하면 거기서 상태를 들고오도록 수정 -const COMPANY = '카카오'; -const JOB = '서비스 기획'; - -export default function SelfTrainPage() { +export default function SelfTrainPage({ match }) { + const { id } = match.params; const transition = new Timeout(); const history = useHistory(); const dispatch = useDispatch(); const { width } = useWindowSize(); - const { - status, - startRecording, - stopRecording, - } = useReactMediaRecorder({ + const { status, startRecording, stopRecording } = useReactMediaRecorder({ video: true, }); - - const { name, selectedQnaId } = useSelector(get('auth')); + const { name } = useSelector(get('auth')); + const { time } = useSelector(get('time')); const { - time, qnaStep, step, - } = useSelector(get('time')); + company, job, viewAnswer, qnaStep, step, + } = useSelector( + get('train'), + ); const [questionList, setQuestionList] = useState(QNA_LIST); - const fetch = async (id) => { + const fetch = async (requestId) => { try { - await getQuestionItemAPI(id).then((response) => { - setQuestionList(response.data); + await getQuestionItemAPI(requestId).then((response) => { + setQuestionList(sortObjectByOrder(response.data)); }); } catch (err) { if (err.response.status === 401) { @@ -80,20 +76,23 @@ export default function SelfTrainPage() { }; useEffect(() => { - dispatch(handleReset({ keepTrain: false })); - fetch(selectedQnaId); + fetch(id); }, []); const handleCancel = async () => { await stopRecording(); transition.clear(); + history.push('/self'); dispatch(handleReset({ keepTrain: false })); }; - const handleChecklistPage = async () => { - await stopRecording(); - history.push('/self-checklist'); - dispatch(handleReset({ keepTrain: true })); + const handleChecklistPage = () => { + postPreVideoApi({ questionListId: id }).then((response) => { + dispatch(setHistoryId({ historyId: response.data.id })); + stopRecording(); + history.push(`/self-checklist/${id}`); + dispatch(handleReset({ keepTrain: true })); + }); }; useEffect(() => { @@ -118,6 +117,13 @@ export default function SelfTrainPage() { } }, [step]); + // TODO: questionList의 원소가 1개일 경우에 처리하는 로직인데 바꿔야함;; 더 좋은 방법이 있을듯 + useEffect(() => { + if (qnaStep === 1 && questionList.length === 1) { + handleChecklistPage(); + } + }, [qnaStep]); + const isStepFirst = step === STEP_FIRST; const isLoading = step <= STEP_START; const isBackground = step > STEP_FIRST && step < STEP_ING; @@ -128,7 +134,7 @@ export default function SelfTrainPage() { const textBox = ( handleChecklistPage() : () => { if (step === STEP_START) startRecording(); @@ -192,7 +200,7 @@ export default function SelfTrainPage() { /> )} - {isShowToggle && ( + {isShowToggle && viewAnswer && ( <> 답변 보기 허용 (padding ? 'padding-bottom: 20px' : 'padding-right: 25px')}; `; -export default function SelfTrainSettingPage() { +export default function SelfTrainSettingPage({ match }) { + const { id } = match.params; + const dispatch = useDispatch(); + const { selectedQnaId, job, company } = useSelector(get('train')); + const { standardTime } = useSelector(get('train')); + + const history = useHistory(); + + const fetch = async () => { + getQuestionListAPI().then((response) => { + const exactData = response.data.filter( + (each) => each.id === Number(id), + )[0]; + dispatch(setCompany({ company: exactData.title })); + dispatch(setJob({ job: exactData.job })); + }); + }; + + useEffect(() => { + fetch(); + }, []); + return ( @@ -66,18 +93,33 @@ export default function SelfTrainSettingPage() { 답변 보기 허용 -+ dispatch(setViewAnswer({ viewAnswer: true }))} + funcDecative={() => dispatch(setViewAnswer({ viewAnswer: false }))} + /> 기업 이름 -+ dispatch(setCompany({ company: e.target.value }))} + width={967} + /> - +직무 이름 -+ dispatch(setJob({ job: e.target.value }))} + width={967} + /> -
+