From ea4e32bd9a6478cb9516f90e2297ce047f79772a Mon Sep 17 00:00:00 2001 From: anttiey Date: Thu, 24 Oct 2024 19:56:53 +0900 Subject: [PATCH 1/8] =?UTF-8?q?:recycle:=20=ED=9A=8C=EA=B3=A0=20=EC=9E=91?= =?UTF-8?q?=EC=84=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=99=80=20=ED=9A=8C?= =?UTF-8?q?=EA=B3=A0=20=EC=A1=B0=ED=9A=8C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/App.tsx | 7 +- .../Header/Header.styles.ts | 0 .../{RetrospectHeader => }/Header/Header.tsx | 2 +- .../RetrospectForm/RetrospectForm.tsx | 9 ++- .../RetrospectHeader/RetrospectHeader.tsx | 32 --------- .../RetrospectView/RetrospectView.styles.ts | 16 ----- .../RetrospectView/RetrospectView.tsx | 35 --------- frontend/src/pages/Retrospect/Retrospect.tsx | 33 --------- .../RetrospectForm/RetrospectForm.styles.ts | 71 +++++++++++++++++++ .../pages/RetrospectForm/RetrospectForm.tsx | 58 +++++++++++++++ .../RetrospectView.styles.ts} | 15 ++++ .../pages/RetrospectView/RetrospectView.tsx | 37 ++++++++++ 12 files changed, 193 insertions(+), 122 deletions(-) rename frontend/src/components/Retrospect/{RetrospectHeader => }/Header/Header.styles.ts (100%) rename frontend/src/components/Retrospect/{RetrospectHeader => }/Header/Header.tsx (77%) delete mode 100644 frontend/src/components/Retrospect/RetrospectHeader/RetrospectHeader.tsx delete mode 100644 frontend/src/components/Retrospect/RetrospectView/RetrospectView.styles.ts delete mode 100644 frontend/src/components/Retrospect/RetrospectView/RetrospectView.tsx delete mode 100644 frontend/src/pages/Retrospect/Retrospect.tsx create mode 100644 frontend/src/pages/RetrospectForm/RetrospectForm.styles.ts create mode 100644 frontend/src/pages/RetrospectForm/RetrospectForm.tsx rename frontend/src/pages/{Retrospect/Retrospect.styles.ts => RetrospectView/RetrospectView.styles.ts} (66%) create mode 100644 frontend/src/pages/RetrospectView/RetrospectView.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 7d785c0d1..02b923456 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -17,7 +17,8 @@ import Main from '@/pages/Main/Main'; import MyPage from '@/pages/MyPage/MyPage'; import PairRoomOnboarding from '@/pages/PairRoomOnboarding/PairRoomOnboarding'; import PrivateRoutes from '@/pages/PrivateRoutes'; -import Retrospect from '@/pages/Retrospect/Retrospect'; +import RetrospectForm from '@/pages/RetrospectForm/RetrospectForm'; +import RetrospectView from '@/pages/RetrospectView/RetrospectView'; import SignUp from '@/pages/SignUp/SignUp'; import HowToPair from '@/components/Landing/HowToPair/HowToPair'; @@ -100,11 +101,11 @@ const App = () => { }, { path: ':accessCode/retrospect', - element: , + element: , }, { path: ':accessCode/retrospectForm', - element: , + element: , }, ], }, diff --git a/frontend/src/components/Retrospect/RetrospectHeader/Header/Header.styles.ts b/frontend/src/components/Retrospect/Header/Header.styles.ts similarity index 100% rename from frontend/src/components/Retrospect/RetrospectHeader/Header/Header.styles.ts rename to frontend/src/components/Retrospect/Header/Header.styles.ts diff --git a/frontend/src/components/Retrospect/RetrospectHeader/Header/Header.tsx b/frontend/src/components/Retrospect/Header/Header.tsx similarity index 77% rename from frontend/src/components/Retrospect/RetrospectHeader/Header/Header.tsx rename to frontend/src/components/Retrospect/Header/Header.tsx index 73ea3ed5e..1c123ff2e 100644 --- a/frontend/src/components/Retrospect/RetrospectHeader/Header/Header.tsx +++ b/frontend/src/components/Retrospect/Header/Header.tsx @@ -12,7 +12,7 @@ const Header = ({ title, buttonText, onButtonClick }: HeaderProps) => { return ( {title} - diff --git a/frontend/src/components/Retrospect/RetrospectForm/RetrospectForm.tsx b/frontend/src/components/Retrospect/RetrospectForm/RetrospectForm.tsx index 592c5afb2..1384d676d 100644 --- a/frontend/src/components/Retrospect/RetrospectForm/RetrospectForm.tsx +++ b/frontend/src/components/Retrospect/RetrospectForm/RetrospectForm.tsx @@ -1,8 +1,8 @@ import Button from '@/components/common/Button/Button'; +import Header from '@/components/Retrospect/Header/Header'; import Question from '@/components/Retrospect/Question/Question'; import SkipModal from '@/components/Retrospect/RetrospectForm/SkipModal/SkipModal'; import TextArea from '@/components/Retrospect/RetrospectForm/Textarea/Textarea'; -import RetrospectHeader from '@/components/Retrospect/RetrospectHeader/RetrospectHeader'; import useModal from '@/hooks/common/useModal'; import usePreventPageRefresh from '@/hooks/common/usePreventPageRefresh'; @@ -21,9 +21,14 @@ const RetrospectForm = ({ accessCode }: RetrospectFormProps) => { const { isModalOpen, openModal, closeModal } = useModal(); usePreventPageRefresh(); + return ( <> - +
{RETROSPECT_QUESTIONS.map((question, index) => ( diff --git a/frontend/src/components/Retrospect/RetrospectHeader/RetrospectHeader.tsx b/frontend/src/components/Retrospect/RetrospectHeader/RetrospectHeader.tsx deleted file mode 100644 index fb7aa45c4..000000000 --- a/frontend/src/components/Retrospect/RetrospectHeader/RetrospectHeader.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import Header from '@/components/Retrospect/RetrospectHeader/Header/Header'; - -interface RetrospectHeaderProps { - readOnly: boolean; - accessCode: string; - onClick?: () => void; -} - -const RetrospectHeader = ({ readOnly, accessCode, onClick }: RetrospectHeaderProps) => { - const getHeaderProps = (readOnly: boolean) => { - if (readOnly) - return { - title: `${accessCode} 에서의 회고입니다!`, - buttonText: '페어룸으로 이동', - onButtonClick: () => { - onClick && onClick(); - }, - }; - else - return { - title: '페어프로그래밍에 대한 회고를 작성해 보세요!', - buttonText: '나중에 작성하기', - onButtonClick: () => { - onClick && onClick(); - }, - }; - }; - - return
; -}; - -export default RetrospectHeader; diff --git a/frontend/src/components/Retrospect/RetrospectView/RetrospectView.styles.ts b/frontend/src/components/Retrospect/RetrospectView/RetrospectView.styles.ts deleted file mode 100644 index 1d57edc21..000000000 --- a/frontend/src/components/Retrospect/RetrospectView/RetrospectView.styles.ts +++ /dev/null @@ -1,16 +0,0 @@ -import styled from 'styled-components'; - -export const Text = styled.pre` - overflow-y: auto; - - width: 100%; - min-height: 10rem; - max-height: 35rem; - margin: 0; - - font-size: ${({ theme }) => theme.fontSize.md}; - font-weight: 300; - white-space: pre-wrap; - font-family: 'Pretendard Variable', sans-serif !important; - word-wrap: break-word; -`; diff --git a/frontend/src/components/Retrospect/RetrospectView/RetrospectView.tsx b/frontend/src/components/Retrospect/RetrospectView/RetrospectView.tsx deleted file mode 100644 index 0b0f92f31..000000000 --- a/frontend/src/components/Retrospect/RetrospectView/RetrospectView.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { useNavigate } from 'react-router-dom'; - -import Question from '@/components/Retrospect/Question/Question'; -import RetrospectHeader from '@/components/Retrospect/RetrospectHeader/RetrospectHeader'; - -import { useGetRetrospectAnswer } from '@/queries/Retrospect/useGetRetrospectAnswer'; - -import { RETROSPECT_QUESTIONS } from '@/constants/retrospect'; - -import * as S from './RetrospectView.styles'; - -interface RetrospectViewProps { - accessCode: string; -} -const RetrospectView = ({ accessCode }: RetrospectViewProps) => { - const navigate = useNavigate(); - const answers = useGetRetrospectAnswer(accessCode || ''); - - return ( - <> - navigate(`/room/${accessCode}`, { state: { valid: true } })} - readOnly={true} - accessCode={accessCode || ''} - /> - {RETROSPECT_QUESTIONS.map((question, index) => ( - - {answers[index]} - - ))} - - ); -}; - -export default RetrospectView; diff --git a/frontend/src/pages/Retrospect/Retrospect.tsx b/frontend/src/pages/Retrospect/Retrospect.tsx deleted file mode 100644 index b80f58e92..000000000 --- a/frontend/src/pages/Retrospect/Retrospect.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { Suspense } from 'react'; -import { useParams } from 'react-router-dom'; - -import Loading from '@/pages/Loading/Loading'; - -import RetrospectForm from '@/components/Retrospect/RetrospectForm/RetrospectForm'; -import RetrospectView from '@/components/Retrospect/RetrospectView/RetrospectView'; - -import * as S from './Retrospect.styles'; - -interface RetrospectProps { - readOnly?: boolean; -} - -const Retrospect = ({ readOnly = true }: RetrospectProps) => { - const { accessCode } = useParams(); - - return ( - - - {readOnly ? ( - }> - - - ) : ( - - )} - - - ); -}; - -export default Retrospect; diff --git a/frontend/src/pages/RetrospectForm/RetrospectForm.styles.ts b/frontend/src/pages/RetrospectForm/RetrospectForm.styles.ts new file mode 100644 index 000000000..f71d00fc5 --- /dev/null +++ b/frontend/src/pages/RetrospectForm/RetrospectForm.styles.ts @@ -0,0 +1,71 @@ +import styled, { css } from 'styled-components'; + +export const Layout = styled.div` + display: flex; + justify-content: center; + + width: 100%; + min-height: calc(100vh - 7rem); + + background-color: ${({ theme }) => theme.color.primary[100]}; +`; + +export const Container = styled.div` + display: flex; + flex-direction: column; + gap: 5rem; + + position: relative; + + width: 60%; + min-width: 76.8rem; + padding: 4rem 4rem 12rem; + + background-color: ${({ theme }) => theme.color.black[10]}; + + @media (max-width: ${({ theme }) => theme.deviceWidth.mobile}) { + width: 100%; + min-width: 0; + padding: 4rem 4rem 12rem; + } +`; + +export const LayoutForm = styled.form` + display: flex; + flex-direction: column; + gap: 4rem; + + width: 100%; +`; + +const positionFixed = css` + position: fixed; + bottom: 0; + left: 50%; + + transform: translate(-50%); +`; + +export const SubmitButton = css` + ${positionFixed} + display: flex; + justify-content: center; + align-items: center; + + width: 60%; + min-width: 76.8rem; + height: 6rem; + border-radius: 0; + + &:active { + ${positionFixed} + } + + &:hover { + ${positionFixed} + } + + @media (max-width: ${({ theme }) => theme.deviceWidth.mobile}) { + width: 100%; + } +`; diff --git a/frontend/src/pages/RetrospectForm/RetrospectForm.tsx b/frontend/src/pages/RetrospectForm/RetrospectForm.tsx new file mode 100644 index 000000000..0642cedf2 --- /dev/null +++ b/frontend/src/pages/RetrospectForm/RetrospectForm.tsx @@ -0,0 +1,58 @@ +import { useParams } from 'react-router-dom'; + +import Button from '@/components/common/Button/Button'; +import Header from '@/components/Retrospect/Header/Header'; +import Question from '@/components/Retrospect/Question/Question'; +import SkipModal from '@/components/Retrospect/RetrospectForm/SkipModal/SkipModal'; +import TextArea from '@/components/Retrospect/RetrospectForm/Textarea/Textarea'; + +import useModal from '@/hooks/common/useModal'; +import usePreventPageRefresh from '@/hooks/common/usePreventPageRefresh'; +import useInputAnswer from '@/hooks/Retrospect/useInputAnswer'; + +import { RETROSPECT_QUESTIONS } from '@/constants/retrospect'; + +import * as S from './RetrospectForm.styles'; + +const RetrospectForm = () => { + const { accessCode } = useParams(); + + const { answers, handleChange, handleSubmit } = useInputAnswer(accessCode || ''); + + const { isModalOpen, openModal, closeModal } = useModal(); + + usePreventPageRefresh(); + + return ( + + +
+ + {RETROSPECT_QUESTIONS.map((question, index) => ( + +