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';