Merge branch 'develop' of https://github.com/woowacourse-teams/2024-r…

…eview-me into fe/feature/266-add-function-to-review-group-data-modal
woowacourse-teams · Aug 9, 2024 · 8303bd8 · 8303bd8
2 parents 473fb88 + ae53d41
commit 8303bd8
Show file tree

Hide file tree

Showing 23 changed files with 608 additions and 46 deletions.
diff --git 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
@@ -22,9 +22,13 @@
       rel="stylesheet"
     />
     <link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-gothic.css" rel="stylesheet" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
+    />
     <title>✉️REVIEW ME</title>
   </head>
-
   <body>
     <div id="root"></div>
   </body>

diff --git a/frontend/src/components/common/Checkbox/index.tsx b/frontend/src/components/common/Checkbox/index.tsx
@@ -10,15 +10,15 @@ export interface CheckboxStyleProps {
   $style?: React.CSSProperties;
 }
 
-interface CheckboxProps extends CheckboxStyleProps {
+export interface CheckboxProps extends CheckboxStyleProps {
   id: string;
   isChecked: boolean;
-  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  onChange: (event: ChangeEvent<HTMLInputElement>, label?: string) => void;
   name?: string;
   isDisabled?: boolean;
 }
 
-const Checkbox = ({ id, name, isChecked, isDisabled, onChange, $style }: CheckboxProps) => {
+const Checkbox = ({ id, name, isChecked, isDisabled = false, onChange, $style }: CheckboxProps) => {
   return (
     <S.CheckboxContainer $style={$style}>
       <S.CheckboxLabel>

diff --git a/frontend/src/components/common/Checkbox/styles.ts b/frontend/src/components/common/Checkbox/styles.ts
@@ -3,13 +3,16 @@ import styled from '@emotion/styled';
 import { CheckboxStyleProps } from './index';
 
 export const CheckboxContainer = styled.div<CheckboxStyleProps>`
+  width: 2.7rem;
+  height: 2.7rem;
+  padding: 0;
+
   background-color: transparent;
   border: none;
 
   input {
-    display: hidden;
-
     position: absolute;
+    display: hidden;
     width: 0;
     height: 0;
   }
@@ -18,10 +21,7 @@ export const CheckboxContainer = styled.div<CheckboxStyleProps>`
 
 export const CheckboxLabel = styled.label`
   cursor: pointer;
-  object-fit: contain;
-
-  img {
-    width: 100%;
-    height: 100%;
-  }
+  display: inline-block;
+  width: 2.7rem;
+  height: 2.7rem;
 `;
diff --git a/frontend/src/components/common/CheckboxItem/index.tsx b/frontend/src/components/common/CheckboxItem/index.tsx
@@ -1,29 +1,16 @@
-import { ChangeEvent } from 'react';
-
-import Checkbox, { CheckboxStyleProps } from '../Checkbox';
+import Checkbox, { CheckboxProps } from '../Checkbox';
 
 import * as S from './styles';
 
-interface CheckboxItemProps extends CheckboxStyleProps {
-  id: string;
+interface CheckboxItemProps extends CheckboxProps {
   label: string;
-  isChecked: boolean;
-  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-  name?: string;
-  isDisabled?: boolean;
 }
-const CheckboxItem = ({ id, name, label, isChecked, onChange, isDisabled = false, $style }: CheckboxItemProps) => {
+
+const CheckboxItem = ({ label, ...rest }: CheckboxItemProps) => {
   return (
     <S.CheckboxItem>
       <S.CheckboxLabel>
-        <Checkbox
-          id={id}
-          name={name}
-          isChecked={isChecked}
-          onChange={onChange}
-          isDisabled={isDisabled}
-          $style={$style}
-        />
+        <Checkbox {...rest} />
         {label}
       </S.CheckboxLabel>
     </S.CheckboxItem>

diff --git a/frontend/src/components/common/CheckboxItem/styles.ts b/frontend/src/components/common/CheckboxItem/styles.ts
@@ -1,10 +1,15 @@
 import styled from '@emotion/styled';
 
-export const CheckboxItem = styled.div``;
+export const CheckboxItem = styled.div`
+  display: flex;
+  margin-bottom: 1rem;
+`;
 
 export const CheckboxLabel = styled.label`
-  font-weight: ${({ theme }) => theme.fontWeight.bold};
   display: flex;
-  align-items: center;
   gap: 0.7rem;
+  align-items: center;
+
+  font-size: ${({ theme }) => theme.fontSize.basic};
+  line-height: 1.5;
 `;
diff --git 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<InputStyleProps>`
   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
@@ -7,8 +7,8 @@ const Logo = () => {
     <S.Logo>
       <img src={LogoIcon} alt="로고 아이콘" />
       <S.LogoText>
-        <span>review</span>
-        <span>me</span>
+        <span>REVIEW</span>
+        <span>ME</span>
       </S.LogoText>
     </S.Logo>
   );

diff --git 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';
 
@@ -58,8 +59,10 @@ const router = createBrowserRouter([
       },
       {
         path: 'user/review-writing/:reviewRequestId',
+        // NOTE: 리뷰 작성 페이지 UI 변경으로 인해 일단 주석 처리
         element: <ReviewWritingPage />,
       },
+      { path: 'user/review-writing-form', element: <ReviewWritingFormPage /> },
       { path: 'user/review-writing-complete', element: <ReviewWritingCompletePage /> },
       {
         path: 'user/review-list',

diff --git 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
@@ -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/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/components/QuestionCard/index.tsx b/frontend/src/pages/ReviewWritingFormPage/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 <S.QuestionCard questionType={questionType}>{question}</S.QuestionCard>;
+};
+
+export default QuestionCard;
diff --git a/frontend/src/pages/ReviewWritingFormPage/components/QuestionCard/styles.ts b/frontend/src/pages/ReviewWritingFormPage/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/pages/ReviewWritingFormPage/components/ReviewWritingCard/index.tsx b/frontend/src/pages/ReviewWritingFormPage/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<ReviewWritingCardProps>) => {
+  return (
+    <S.Container>
+      <S.Header>
+        <S.Title>{title}</S.Title>
+      </S.Header>
+      <S.Main>{children}</S.Main>
+    </S.Container>
+  );
+};
+
+export default ReviewWritingCard;
diff --git a/frontend/src/pages/ReviewWritingFormPage/components/ReviewWritingCard/styles.ts b/frontend/src/pages/ReviewWritingFormPage/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;
+  padding: 1rem 2rem;
+  background-color: ${({ theme }) => theme.colors.lightPurple};
+`;
+
+export const Main = styled.div`
+  padding: 2rem;
+`;
+
+export const Title = styled.span`
+  margin-bottom: 2rem;
+  font-size: ${({ theme }) => theme.fontSize.mediumSmall};
+  font-weight: ${({ theme }) => theme.fontWeight.semibold};
+`;
diff --git a/frontend/src/pages/ReviewWritingFormPage/components/index.tsx b/frontend/src/pages/ReviewWritingFormPage/components/index.tsx
@@ -0,0 +1,2 @@
+export { default as QuestionCard } from './QuestionCard';
+export { default as ReviewWritingCard } from './ReviewWritingCard';