diff --git a/frontend/.gitignore b/frontend/.gitignore index cba405ade..090910b92 100644 --- a/frontend/.gitignore +++ b/frontend/.gitignore @@ -3,5 +3,4 @@ dist yarn-error.log .env -# Sentry Config File .env.sentry-build-plugin diff --git a/frontend/public/index.html b/frontend/public/index.html index 643d7f8a9..c48027eb0 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -22,9 +22,13 @@ rel="stylesheet" /> + ✉️REVIEW ME -
diff --git a/frontend/src/components/QuestionCard/index.tsx b/frontend/src/components/QuestionCard/index.tsx new file mode 100644 index 000000000..c6cdf009e --- /dev/null +++ b/frontend/src/components/QuestionCard/index.tsx @@ -0,0 +1,14 @@ +import { QuestionCardStyleType } from '@/types'; + +import * as S from './styles'; + +interface QuestionCardProps { + questionType: QuestionCardStyleType; + question: string; +} + +const QuestionCard = ({ questionType, question }: QuestionCardProps) => { + return {question}; +}; + +export default QuestionCard; diff --git a/frontend/src/components/QuestionCard/styles.ts b/frontend/src/components/QuestionCard/styles.ts new file mode 100644 index 000000000..3969216f1 --- /dev/null +++ b/frontend/src/components/QuestionCard/styles.ts @@ -0,0 +1,8 @@ +import styled from '@emotion/styled'; + +import { QuestionCardStyleType } from '@/types'; + +export const QuestionCard = styled.span<{ questionType: QuestionCardStyleType }>` + font-size: ${({ theme }) => theme.fontSize.basic}; + color: ${({ questionType, theme }) => (questionType === 'guideline' ? theme.colors.placeholder : theme.colors.black)}; +`; diff --git a/frontend/src/components/ReviewWritingCard/index.tsx b/frontend/src/components/ReviewWritingCard/index.tsx new file mode 100644 index 000000000..4927eb9e0 --- /dev/null +++ b/frontend/src/components/ReviewWritingCard/index.tsx @@ -0,0 +1,20 @@ +import { EssentialPropsWithChildren } from '@/types'; + +import * as S from './styles'; + +interface ReviewWritingCardProps { + title: string; +} + +const ReviewWritingCard = ({ title, children }: EssentialPropsWithChildren) => { + return ( + + + {title} + + {children} + + ); +}; + +export default ReviewWritingCard; diff --git a/frontend/src/components/ReviewWritingCard/styles.ts b/frontend/src/components/ReviewWritingCard/styles.ts new file mode 100644 index 000000000..6a7dff1f5 --- /dev/null +++ b/frontend/src/components/ReviewWritingCard/styles.ts @@ -0,0 +1,23 @@ +import styled from '@emotion/styled'; + +export const Container = styled.div` + display: flex; + flex-direction: column; +`; + +export const Header = styled.div` + width: 100%; + height: 5rem; + background-color: ${({ theme }) => theme.colors.lightPurple}; + + padding: 1rem; +`; + +export const Main = styled.div` + padding: 1rem; +`; + +export const Title = styled.span` + margin-bottom: 2rem; + font-size: ${({ theme }) => theme.fontSize.mediumSmall}; +`; diff --git a/frontend/src/components/common/Input/styles.ts b/frontend/src/components/common/Input/styles.ts index f40e38561..c80facd4a 100644 --- a/frontend/src/components/common/Input/styles.ts +++ b/frontend/src/components/common/Input/styles.ts @@ -9,6 +9,7 @@ export const Input = styled.input` border-radius: ${({ theme }) => theme.borderRadius.basic}; padding: 1.2rem 1.6rem; + font-size: 1.3rem; ::placeholder { diff --git a/frontend/src/components/layouts/Topbar/components/Logo/index.tsx b/frontend/src/components/layouts/Topbar/components/Logo/index.tsx index 0cd627e4c..196ac3d28 100644 --- a/frontend/src/components/layouts/Topbar/components/Logo/index.tsx +++ b/frontend/src/components/layouts/Topbar/components/Logo/index.tsx @@ -7,8 +7,8 @@ const Logo = () => { 로고 아이콘 - review - me + REVIEW + ME ); diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 50a986ca3..2e1e80e48 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -15,6 +15,7 @@ import LandingPage from './pages/LandingPage'; import ReviewListPage from './pages/ReviewListPage'; import ReviewWritingPage from './pages/ReviewWriting'; import ReviewWritingCompletePage from './pages/ReviewWritingCompletePage'; +import ReviewWritingFormPage from './pages/ReviewWritingFormPage'; import globalStyles from './styles/globalStyles'; import theme from './styles/theme'; @@ -54,7 +55,9 @@ const router = createBrowserRouter([ }, { path: 'user/review-writing/:reviewRequestId', - element: , + // NOTE: 리뷰 작성 페이지 UI 변경으로 인해 일단 주석 처리 + // element: , + element: , }, { path: 'user/review-writing-complete', element: }, { diff --git a/frontend/src/pages/LandingPage/components/FormLayout/styles.ts b/frontend/src/pages/LandingPage/components/FormLayout/styles.ts index eea9210cd..2fd775d20 100644 --- a/frontend/src/pages/LandingPage/components/FormLayout/styles.ts +++ b/frontend/src/pages/LandingPage/components/FormLayout/styles.ts @@ -3,12 +3,10 @@ import styled from '@emotion/styled'; export const FormLayout = styled.form` display: flex; flex-direction: column; - width: 40rem; `; export const Title = styled.h2` - font-size: ${({ theme }) => theme.fontSize.basic}; - margin-bottom: 2.2rem; + font-size: ${({ theme }) => theme.fontSize.basic}; `; diff --git a/frontend/src/pages/LandingPage/components/ReviewAccessForm/styles.ts b/frontend/src/pages/LandingPage/components/ReviewAccessForm/styles.ts index 88d472e8f..a7986a2ae 100644 --- a/frontend/src/pages/LandingPage/components/ReviewAccessForm/styles.ts +++ b/frontend/src/pages/LandingPage/components/ReviewAccessForm/styles.ts @@ -3,21 +3,17 @@ import styled from '@emotion/styled'; export const ReviewAccessFormContent = styled.div` display: flex; flex-direction: column; - width: 100%; `; export const ReviewAccessFormBody = styled.div` display: flex; justify-content: space-between; - width: 100%; `; export const ErrorMessage = styled.p` + padding-left: 0.7rem; font-size: 1.3rem; - color: ${({ theme }) => theme.colors.red}; - - padding-left: 0.7rem; `; diff --git a/frontend/src/pages/LandingPage/components/ReviewGroupDataModal/styles.ts b/frontend/src/pages/LandingPage/components/ReviewGroupDataModal/styles.ts index 611fb167c..9159800d6 100644 --- a/frontend/src/pages/LandingPage/components/ReviewGroupDataModal/styles.ts +++ b/frontend/src/pages/LandingPage/components/ReviewGroupDataModal/styles.ts @@ -7,8 +7,8 @@ export const ReviewGroupDataModal = styled.div` `; export const ReviewGroupDataTitle = styled.h3` - font-weight: ${({ theme }) => theme.fontWeight.bold}; font-size: 2rem; + font-weight: ${({ theme }) => theme.fontWeight.bold}; `; export const ReviewGroupDataContainer = styled.div` @@ -19,9 +19,8 @@ export const ReviewGroupDataContainer = styled.div` export const ReviewGroupDataItem = styled.div` display: flex; - justify-content: space-between; gap: 2.1rem; - + justify-content: space-between; font-size: 1.5rem; `; @@ -35,21 +34,19 @@ export const Data = styled.span` export const CheckContainer = styled.div` display: flex; - font-size: 1.5rem; `; export const Checkbox = styled.input` - height: 1rem; + cursor: pointer; width: 1rem; + height: 1rem; margin-right: 0.5rem; - - cursor: pointer; `; export const CheckMessage = styled.p``; export const Warning = styled.p` - color: ${({ theme }) => theme.colors.red}; font-size: smaller; + color: ${({ theme }) => theme.colors.red}; `; diff --git a/frontend/src/pages/LandingPage/styles.ts b/frontend/src/pages/LandingPage/styles.ts index 942e32173..457b49bc1 100644 --- a/frontend/src/pages/LandingPage/styles.ts +++ b/frontend/src/pages/LandingPage/styles.ts @@ -4,6 +4,5 @@ export const LandingPage = styled.div` display: flex; flex-direction: column; gap: 7.7rem; - margin-top: 4rem; `; diff --git a/frontend/src/pages/ReviewWritingFormPage/index.tsx b/frontend/src/pages/ReviewWritingFormPage/index.tsx new file mode 100644 index 000000000..56b25570e --- /dev/null +++ b/frontend/src/pages/ReviewWritingFormPage/index.tsx @@ -0,0 +1,76 @@ +import { useEffect, useRef, useState } from 'react'; + +import { Button } from '@/components'; +import QuestionCard from '@/components/QuestionCard'; +import ReviewWritingCard from '@/components/ReviewWritingCard'; +import { ButtonStyleType } from '@/types'; + +import * as S from './styles'; + +const REVIEWEE = '쑤쑤'; + +const QUESTIONS = [ + { + title: `💡${REVIEWEE}와 함께 한 기억을 떠올려볼게요.`, + question: `프로젝트 기간 동안, ${REVIEWEE}의 강점이 드러났던 순간을 선택해주세요. (1~2개)`, + }, + { + title: `선택한 순간들을 바탕으로 ${REVIEWEE}에 대한 리뷰를 작성해볼게요.`, + question: `커뮤니케이션, 협업 능력에서 어떤 부분이 인상 깊었는지 선택해주세요. (1개 이상)`, + }, + { + title: ``, + question: `앞으로의 성장을 위해서 ${REVIEWEE}가 어떤 목표를 설정하면 좋을까요?`, + }, +]; + +const ReviewWritingFormPage = () => { + const [currentIndex, setCurrentIndex] = useState(0); + const [slideWidth, setSlideWidth] = useState(0); + + const wrapperRef = useRef(null); + + useEffect(() => { + if (wrapperRef.current) setSlideWidth(wrapperRef.current.clientWidth); + }, [wrapperRef]); + + const handlePrev = () => { + if (currentIndex > 0) { + setCurrentIndex(currentIndex - 1); + } + }; + + const handleNext = () => { + if (currentIndex < QUESTIONS.length - 1) { + setCurrentIndex(currentIndex + 1); + } + }; + + const buttons = [ + { styleType: 'secondary' as ButtonStyleType, onClick: handlePrev, text: '이전' }, + { styleType: 'primary' as ButtonStyleType, onClick: handleNext, text: '다음' }, + ]; + + return ( + + + {QUESTIONS.map(({ question, title }, index) => ( + + + + + + ))} + + + {buttons.map((button, index) => ( + + ))} + + + ); +}; + +export default ReviewWritingFormPage; diff --git a/frontend/src/pages/ReviewWritingFormPage/styles.ts b/frontend/src/pages/ReviewWritingFormPage/styles.ts new file mode 100644 index 000000000..892e83837 --- /dev/null +++ b/frontend/src/pages/ReviewWritingFormPage/styles.ts @@ -0,0 +1,32 @@ +import styled from '@emotion/styled'; + +export const CardLayout = styled.div` + position: relative; + overflow: hidden; + width: ${({ theme }) => theme.formWidth}; + + border-radius: ${({ theme }) => theme.borderRadius.basic}; + border: 0.1rem solid ${({ theme }) => theme.colors.lightPurple}; +`; + +export const SliderContainer = styled.div<{ translateX: number }>` + transform: ${({ translateX }) => `translateX(-${translateX}px)`}; + display: flex; + width: 100%; + transition: transform 0.5s ease-in-out; +`; + +export const Slide = styled.div` + flex: 0 0 100%; + box-sizing: border-box; +`; + +export const ButtonContainer = styled.div` + display: flex; + justify-content: flex-end; + gap: 2rem; + + button { + width: 10rem; + } +`; diff --git a/frontend/src/styles/globalStyles.ts b/frontend/src/styles/globalStyles.ts index ab7bb52e7..a5d49ab33 100644 --- a/frontend/src/styles/globalStyles.ts +++ b/frontend/src/styles/globalStyles.ts @@ -10,7 +10,7 @@ const globalStyles = css` } body { - font-family: 'NanumGothic', 'Noto Sans', sans-serif; + font-family: 'Pretendard-Regular', 'NanumGothic', 'Noto Sans', sans-serif; margin: 0; padding: 0; box-sizing: border-box; diff --git a/frontend/src/styles/theme.ts b/frontend/src/styles/theme.ts index edd81e507..2e0b9a84e 100644 --- a/frontend/src/styles/theme.ts +++ b/frontend/src/styles/theme.ts @@ -17,6 +17,7 @@ export const breakpoints: ThemeProperty = { export const fontSize: ThemeProperty = { small: '1.4rem', basic: '1.6rem', + mediumSmall: '2.0rem', medium: '2.4rem', large: '3.2rem', h2: '4.8rem', diff --git a/frontend/src/types/styles.ts b/frontend/src/types/styles.ts index b2924777a..d6e9a447b 100644 --- a/frontend/src/types/styles.ts +++ b/frontend/src/types/styles.ts @@ -1 +1,3 @@ export type ButtonStyleType = 'primary' | 'secondary' | 'disabled'; + +export type QuestionCardStyleType = 'normal' | 'guideline';