From 848b56c98ab2892cb0dc7e7a25bcf915a3a877e1 Mon Sep 17 00:00:00 2001 From: ImxYJL Date: Thu, 15 Aug 2024 14:45:31 +0900 Subject: [PATCH 01/29] =?UTF-8?q?chore:=20LandingPage=EB=A5=BC=20HomePage?= =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/index.tsx | 4 ++-- .../components/CopyTextButton/index.tsx | 0 .../components/CopyTextButton/styles.ts | 0 .../components/FormBody/index.tsx | 0 .../components/FormBody/styles.ts | 0 .../components/FormLayout/index.tsx | 0 .../components/FormLayout/styles.ts | 0 .../components/ReviewAccessForm/index.tsx | 0 .../components/ReviewAccessForm/reviewAccessForm.test.tsx | 0 .../components/ReviewAccessForm/styles.ts | 0 .../components/ReviewGroupDataModal/index.tsx | 0 .../components/ReviewGroupDataModal/styles.ts | 0 .../components/URLGeneratorForm/index.tsx | 0 .../components/URLGeneratorForm/styles.ts | 0 .../pages/{LandingPage => HomePage}/components/index.ts | 0 frontend/src/pages/{LandingPage => HomePage}/index.tsx | 8 ++++---- .../queries/usePostDataForURL.test.tsx | 2 +- .../queries/usePostDataForURL.ts | 0 frontend/src/pages/{LandingPage => HomePage}/styles.ts | 2 +- .../{LandingPage => HomePage}/utils/validateInput.test.ts | 0 .../{LandingPage => HomePage}/utils/validateInput.ts | 0 frontend/src/pages/index.tsx | 2 +- 22 files changed, 9 insertions(+), 9 deletions(-) rename frontend/src/pages/{LandingPage => HomePage}/components/CopyTextButton/index.tsx (100%) rename frontend/src/pages/{LandingPage => HomePage}/components/CopyTextButton/styles.ts (100%) rename frontend/src/pages/{LandingPage => HomePage}/components/FormBody/index.tsx (100%) rename frontend/src/pages/{LandingPage => HomePage}/components/FormBody/styles.ts (100%) rename frontend/src/pages/{LandingPage => HomePage}/components/FormLayout/index.tsx (100%) rename frontend/src/pages/{LandingPage => HomePage}/components/FormLayout/styles.ts (100%) rename frontend/src/pages/{LandingPage => HomePage}/components/ReviewAccessForm/index.tsx (100%) rename frontend/src/pages/{LandingPage => HomePage}/components/ReviewAccessForm/reviewAccessForm.test.tsx (100%) rename frontend/src/pages/{LandingPage => HomePage}/components/ReviewAccessForm/styles.ts (100%) rename frontend/src/pages/{LandingPage => HomePage}/components/ReviewGroupDataModal/index.tsx (100%) rename frontend/src/pages/{LandingPage => HomePage}/components/ReviewGroupDataModal/styles.ts (100%) rename frontend/src/pages/{LandingPage => HomePage}/components/URLGeneratorForm/index.tsx (100%) rename frontend/src/pages/{LandingPage => HomePage}/components/URLGeneratorForm/styles.ts (100%) rename frontend/src/pages/{LandingPage => HomePage}/components/index.ts (100%) rename frontend/src/pages/{LandingPage => HomePage}/index.tsx (84%) rename frontend/src/pages/{LandingPage => HomePage}/queries/usePostDataForURL.test.tsx (91%) rename frontend/src/pages/{LandingPage => HomePage}/queries/usePostDataForURL.ts (100%) rename frontend/src/pages/{LandingPage => HomePage}/styles.ts (75%) rename frontend/src/pages/{LandingPage => HomePage}/utils/validateInput.test.ts (100%) rename frontend/src/pages/{LandingPage => HomePage}/utils/validateInput.ts (100%) diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index ef2fea537..b330c43fb 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -10,7 +10,7 @@ import App from '@/App'; import { DetailedReviewPage, ErrorPage, - LandingPage, + HomePage, ReviewListPage, ReviewWritingCompletePage, ReviewWritingCardFormPage, @@ -52,7 +52,7 @@ const router = createBrowserRouter([ children: [ { path: '', - element: , + element: , }, { path: 'user', diff --git a/frontend/src/pages/LandingPage/components/CopyTextButton/index.tsx b/frontend/src/pages/HomePage/components/CopyTextButton/index.tsx similarity index 100% rename from frontend/src/pages/LandingPage/components/CopyTextButton/index.tsx rename to frontend/src/pages/HomePage/components/CopyTextButton/index.tsx diff --git a/frontend/src/pages/LandingPage/components/CopyTextButton/styles.ts b/frontend/src/pages/HomePage/components/CopyTextButton/styles.ts similarity index 100% rename from frontend/src/pages/LandingPage/components/CopyTextButton/styles.ts rename to frontend/src/pages/HomePage/components/CopyTextButton/styles.ts diff --git a/frontend/src/pages/LandingPage/components/FormBody/index.tsx b/frontend/src/pages/HomePage/components/FormBody/index.tsx similarity index 100% rename from frontend/src/pages/LandingPage/components/FormBody/index.tsx rename to frontend/src/pages/HomePage/components/FormBody/index.tsx diff --git a/frontend/src/pages/LandingPage/components/FormBody/styles.ts b/frontend/src/pages/HomePage/components/FormBody/styles.ts similarity index 100% rename from frontend/src/pages/LandingPage/components/FormBody/styles.ts rename to frontend/src/pages/HomePage/components/FormBody/styles.ts diff --git a/frontend/src/pages/LandingPage/components/FormLayout/index.tsx b/frontend/src/pages/HomePage/components/FormLayout/index.tsx similarity index 100% rename from frontend/src/pages/LandingPage/components/FormLayout/index.tsx rename to frontend/src/pages/HomePage/components/FormLayout/index.tsx diff --git a/frontend/src/pages/LandingPage/components/FormLayout/styles.ts b/frontend/src/pages/HomePage/components/FormLayout/styles.ts similarity index 100% rename from frontend/src/pages/LandingPage/components/FormLayout/styles.ts rename to frontend/src/pages/HomePage/components/FormLayout/styles.ts diff --git a/frontend/src/pages/LandingPage/components/ReviewAccessForm/index.tsx b/frontend/src/pages/HomePage/components/ReviewAccessForm/index.tsx similarity index 100% rename from frontend/src/pages/LandingPage/components/ReviewAccessForm/index.tsx rename to frontend/src/pages/HomePage/components/ReviewAccessForm/index.tsx diff --git a/frontend/src/pages/LandingPage/components/ReviewAccessForm/reviewAccessForm.test.tsx b/frontend/src/pages/HomePage/components/ReviewAccessForm/reviewAccessForm.test.tsx similarity index 100% rename from frontend/src/pages/LandingPage/components/ReviewAccessForm/reviewAccessForm.test.tsx rename to frontend/src/pages/HomePage/components/ReviewAccessForm/reviewAccessForm.test.tsx diff --git a/frontend/src/pages/LandingPage/components/ReviewAccessForm/styles.ts b/frontend/src/pages/HomePage/components/ReviewAccessForm/styles.ts similarity index 100% rename from frontend/src/pages/LandingPage/components/ReviewAccessForm/styles.ts rename to frontend/src/pages/HomePage/components/ReviewAccessForm/styles.ts diff --git a/frontend/src/pages/LandingPage/components/ReviewGroupDataModal/index.tsx b/frontend/src/pages/HomePage/components/ReviewGroupDataModal/index.tsx similarity index 100% rename from frontend/src/pages/LandingPage/components/ReviewGroupDataModal/index.tsx rename to frontend/src/pages/HomePage/components/ReviewGroupDataModal/index.tsx diff --git a/frontend/src/pages/LandingPage/components/ReviewGroupDataModal/styles.ts b/frontend/src/pages/HomePage/components/ReviewGroupDataModal/styles.ts similarity index 100% rename from frontend/src/pages/LandingPage/components/ReviewGroupDataModal/styles.ts rename to frontend/src/pages/HomePage/components/ReviewGroupDataModal/styles.ts diff --git a/frontend/src/pages/LandingPage/components/URLGeneratorForm/index.tsx b/frontend/src/pages/HomePage/components/URLGeneratorForm/index.tsx similarity index 100% rename from frontend/src/pages/LandingPage/components/URLGeneratorForm/index.tsx rename to frontend/src/pages/HomePage/components/URLGeneratorForm/index.tsx diff --git a/frontend/src/pages/LandingPage/components/URLGeneratorForm/styles.ts b/frontend/src/pages/HomePage/components/URLGeneratorForm/styles.ts similarity index 100% rename from frontend/src/pages/LandingPage/components/URLGeneratorForm/styles.ts rename to frontend/src/pages/HomePage/components/URLGeneratorForm/styles.ts diff --git a/frontend/src/pages/LandingPage/components/index.ts b/frontend/src/pages/HomePage/components/index.ts similarity index 100% rename from frontend/src/pages/LandingPage/components/index.ts rename to frontend/src/pages/HomePage/components/index.ts diff --git a/frontend/src/pages/LandingPage/index.tsx b/frontend/src/pages/HomePage/index.tsx similarity index 84% rename from frontend/src/pages/LandingPage/index.tsx rename to frontend/src/pages/HomePage/index.tsx index 37dd6630b..664d4185d 100644 --- a/frontend/src/pages/LandingPage/index.tsx +++ b/frontend/src/pages/HomePage/index.tsx @@ -4,17 +4,17 @@ import ReviewAccessForm from './components/ReviewAccessForm'; import URLGeneratorForm from './components/URLGeneratorForm'; import * as S from './styles'; -const LandingPage = () => { +const HomePage = () => { // NOTE: ReviewAccessForm에서는 Errorboundary를 사용하지 않지만 감싸지 않으면 // Error fallback에서 ReviewAccessForm 컴포넌트가 노출되므로 둘 다 감쌌음 return ( - + - + ); }; -export default LandingPage; +export default HomePage; diff --git a/frontend/src/pages/LandingPage/queries/usePostDataForURL.test.tsx b/frontend/src/pages/HomePage/queries/usePostDataForURL.test.tsx similarity index 91% rename from frontend/src/pages/LandingPage/queries/usePostDataForURL.test.tsx rename to frontend/src/pages/HomePage/queries/usePostDataForURL.test.tsx index 37c4b1b3a..a23a706a2 100644 --- a/frontend/src/pages/LandingPage/queries/usePostDataForURL.test.tsx +++ b/frontend/src/pages/HomePage/queries/usePostDataForURL.test.tsx @@ -2,7 +2,7 @@ import { renderHook, act, waitFor } from '@testing-library/react'; import QueryClientWrapper from '@/queryTestSetup/QueryClientWrapper'; -import { CREATED_GROUP_DATA } from './../../../mocks/mockData/group'; +import { CREATED_GROUP_DATA } from '../../../mocks/mockData/group'; import usePostDataForURL from './usePostDataForURL'; describe('usePostDataForURL', () => { diff --git a/frontend/src/pages/LandingPage/queries/usePostDataForURL.ts b/frontend/src/pages/HomePage/queries/usePostDataForURL.ts similarity index 100% rename from frontend/src/pages/LandingPage/queries/usePostDataForURL.ts rename to frontend/src/pages/HomePage/queries/usePostDataForURL.ts diff --git a/frontend/src/pages/LandingPage/styles.ts b/frontend/src/pages/HomePage/styles.ts similarity index 75% rename from frontend/src/pages/LandingPage/styles.ts rename to frontend/src/pages/HomePage/styles.ts index 457b49bc1..60baaa3ef 100644 --- a/frontend/src/pages/LandingPage/styles.ts +++ b/frontend/src/pages/HomePage/styles.ts @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -export const LandingPage = styled.div` +export const HomePage = styled.div` display: flex; flex-direction: column; gap: 7.7rem; diff --git a/frontend/src/pages/LandingPage/utils/validateInput.test.ts b/frontend/src/pages/HomePage/utils/validateInput.test.ts similarity index 100% rename from frontend/src/pages/LandingPage/utils/validateInput.test.ts rename to frontend/src/pages/HomePage/utils/validateInput.test.ts diff --git a/frontend/src/pages/LandingPage/utils/validateInput.ts b/frontend/src/pages/HomePage/utils/validateInput.ts similarity index 100% rename from frontend/src/pages/LandingPage/utils/validateInput.ts rename to frontend/src/pages/HomePage/utils/validateInput.ts diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx index 88213bab1..8d908ff43 100644 --- a/frontend/src/pages/index.tsx +++ b/frontend/src/pages/index.tsx @@ -1,6 +1,6 @@ export { default as DetailedReviewPage } from './DetailedReviewPage'; export { default as ErrorPage } from './ErrorPage'; -export { default as LandingPage } from './LandingPage'; +export { default as HomePage } from './HomePage'; export { default as LoadingPage } from './LoadingPage'; export { default as ReviewListPage } from './ReviewListPage'; export { default as ReviewWritingCardFormPage } from './ReviewWritingCardFromPage'; From 60f190244839268d21f2f8d2f792871ee5f3fec9 Mon Sep 17 00:00:00 2001 From: ImxYJL Date: Thu, 15 Aug 2024 16:00:04 +0900 Subject: [PATCH 02/29] =?UTF-8?q?refactor:=20=EC=83=88=20HomePage=EC=9D=98?= =?UTF-8?q?=20Form=20=EB=B6=80=EB=B6=84=20=ED=8D=BC=EB=B8=94=EB=A6=AC?= =?UTF-8?q?=EC=8B=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/layouts/Main/styles.ts | 4 - .../HomePage/components/FormLayout/styles.ts | 7 +- .../components/ReviewGroupDataModal/index.tsx | 23 ++---- .../components/URLGeneratorForm/index.tsx | 82 +++++++++++-------- .../components/URLGeneratorForm/styles.ts | 13 +++ frontend/src/pages/HomePage/index.tsx | 5 +- frontend/src/pages/HomePage/styles.ts | 11 ++- .../src/pages/ReviewDashboardPage/index.tsx | 36 ++++++++ .../src/pages/ReviewDashboardPage/styles.ts | 19 +++++ 9 files changed, 139 insertions(+), 61 deletions(-) create mode 100644 frontend/src/pages/ReviewDashboardPage/index.tsx create mode 100644 frontend/src/pages/ReviewDashboardPage/styles.ts diff --git a/frontend/src/components/layouts/Main/styles.ts b/frontend/src/components/layouts/Main/styles.ts index ccd06a345..d999a6c7a 100644 --- a/frontend/src/components/layouts/Main/styles.ts +++ b/frontend/src/components/layouts/Main/styles.ts @@ -4,9 +4,6 @@ export const MainContainer = styled.div` display: flex; align-items: center; justify-content: center; - - margin-top: 6rem; - padding: 0 3rem; `; export const Contents = styled.div` @@ -19,7 +16,6 @@ export const Contents = styled.div` width: 100%; max-width: ${({ theme }) => theme.breakpoints.desktop}; height: 100%; - margin-bottom: 2.4rem; border-radius: 0.5rem; `; diff --git a/frontend/src/pages/HomePage/components/FormLayout/styles.ts b/frontend/src/pages/HomePage/components/FormLayout/styles.ts index 2fd775d20..ebe757f5c 100644 --- a/frontend/src/pages/HomePage/components/FormLayout/styles.ts +++ b/frontend/src/pages/HomePage/components/FormLayout/styles.ts @@ -3,10 +3,11 @@ import styled from '@emotion/styled'; export const FormLayout = styled.form` display: flex; flex-direction: column; - width: 40rem; + + justify-content: center; `; export const Title = styled.h2` - margin-bottom: 2.2rem; - font-size: ${({ theme }) => theme.fontSize.basic}; + margin-bottom: 6.5rem; + font-size: 2.5rem; `; diff --git a/frontend/src/pages/HomePage/components/ReviewGroupDataModal/index.tsx b/frontend/src/pages/HomePage/components/ReviewGroupDataModal/index.tsx index c52621814..985368596 100644 --- a/frontend/src/pages/HomePage/components/ReviewGroupDataModal/index.tsx +++ b/frontend/src/pages/HomePage/components/ReviewGroupDataModal/index.tsx @@ -2,19 +2,17 @@ import { useState } from 'react'; import { AlertModal } from '@/components'; import Checkbox from '@/components/common/Checkbox'; -import { useGroupAccessCode } from '@/hooks'; import { CopyTextButton } from '../index'; import * as S from './styles'; interface URLModalProps { - reviewRequestCode: string; + reviewURL: string; closeModal: () => void; } -const ReviewGroupDataModal = ({ reviewRequestCode, closeModal }: URLModalProps) => { +const ReviewGroupDataModal = ({ reviewURL, closeModal }: URLModalProps) => { const [isChecked, setIsChecked] = useState(false); - const { groupAccessCode } = useGroupAccessCode(); const handleCheckboxClick = () => { setIsChecked(!isChecked); @@ -32,17 +30,12 @@ const ReviewGroupDataModal = ({ reviewRequestCode, closeModal }: URLModalProps) isClosableOnBackground={false} > - 아래 확인 코드와 요청 URL을 확인해주세요. + 아래 요청 URL을 확인해주세요 리뷰 요청 URL - {reviewRequestCode} - - - - 리뷰 확인 코드 - {groupAccessCode} - + {reviewURL} + @@ -50,12 +43,12 @@ const ReviewGroupDataModal = ({ reviewRequestCode, closeModal }: URLModalProps) - URL과 코드를 다른 곳에 저장해두었어요! + URL을 저장해두었어요! - * 창이 닫히면 코드를 다시 확인할 수 없어요! + * 창이 닫히면 URL을 다시 확인할 수 없어요! diff --git a/frontend/src/pages/HomePage/components/URLGeneratorForm/index.tsx b/frontend/src/pages/HomePage/components/URLGeneratorForm/index.tsx index 9e7071f85..a26bf8f00 100644 --- a/frontend/src/pages/HomePage/components/URLGeneratorForm/index.tsx +++ b/frontend/src/pages/HomePage/components/URLGeneratorForm/index.tsx @@ -2,7 +2,6 @@ import { useEffect, useState } from 'react'; import { DataForURL } from '@/apis/group'; import { Button, Input } from '@/components'; -import { useGroupAccessCode } from '@/hooks'; import useModals from '@/hooks/useModals'; import { debounce } from '@/utils/debounce'; @@ -25,13 +24,14 @@ const MODAL_KEYS = { const URLGeneratorForm = () => { const [revieweeName, setRevieweeName] = useState(''); const [projectName, setProjectName] = useState(''); - const [reviewRequestCode, setReviewRequestCode] = useState(''); + const [password, setPassword] = useState(''); + const [reviewURL, setReviewURL] = useState(''); const [revieweeNameErrorMessage, setRevieweeNameErrorMessage] = useState(''); const [projectNameErrorMessage, setProjectNameErrorMessage] = useState(''); + const [passwordErrorMessage, setPasswordErrorMessage] = useState(''); const mutation = usePostDataForURL(); - const { updateGroupAccessCode } = useGroupAccessCode(); const { isOpen, openModal, closeModal } = useModals(); const isFormValid = isValidReviewGroupDataInput(revieweeName) && isValidReviewGroupDataInput(projectName); @@ -42,9 +42,7 @@ const URLGeneratorForm = () => { mutation.mutate(dataForURL, { onSuccess: (data) => { const completeURL = getCompleteURL(data.reviewRequestCode); - - setReviewRequestCode(completeURL); - updateGroupAccessCode(data.groupAccessCode); + setReviewURL(completeURL); resetInputs(); }, @@ -68,6 +66,10 @@ const URLGeneratorForm = () => { setProjectName(event.target.value); }; + const handlePasswordInputChange = (event: React.ChangeEvent) => { + setPassword(event.target.value); + }; + const handleUrlCreationButtonClick = debounce((event: React.MouseEvent) => { event.preventDefault(); postDataForURL(); @@ -87,32 +89,48 @@ const URLGeneratorForm = () => { }, [projectName]); return ( - - - - {revieweeNameErrorMessage} - - - - {projectNameErrorMessage} - - - {isOpen(MODAL_KEYS.confirm) && ( - closeModal(MODAL_KEYS.confirm)} /> - )} - + + + + 리뷰 받을 사람의 이름을 적어주세요 + + {revieweeNameErrorMessage} + + + 함께한 프로젝트 이름을 입력해주세요 + + {projectNameErrorMessage} + + + 리뷰 확인을 위한 비밀번호를 적어주세요 + + {projectNameErrorMessage} + + + {isOpen(MODAL_KEYS.confirm) && ( + closeModal(MODAL_KEYS.confirm)} /> + )} + + ); }; diff --git a/frontend/src/pages/HomePage/components/URLGeneratorForm/styles.ts b/frontend/src/pages/HomePage/components/URLGeneratorForm/styles.ts index 4a4707130..f86b2d727 100644 --- a/frontend/src/pages/HomePage/components/URLGeneratorForm/styles.ts +++ b/frontend/src/pages/HomePage/components/URLGeneratorForm/styles.ts @@ -1,11 +1,24 @@ import styled from '@emotion/styled'; +export const URLGeneratorForm = styled.section` + display: flex; + align-items: center; + justify-content: center; + + padding: 0 9rem; + width: 40%; +`; + export const InputContainer = styled.div` display: flex; flex-direction: column; gap: 0.2rem; `; +export const Label = styled.label` + margin-bottom: 1.2rem; +`; + export const ErrorMessage = styled.p` font-size: 1.3rem; color: ${({ theme }) => theme.colors.red}; diff --git a/frontend/src/pages/HomePage/index.tsx b/frontend/src/pages/HomePage/index.tsx index 664d4185d..68a65c04b 100644 --- a/frontend/src/pages/HomePage/index.tsx +++ b/frontend/src/pages/HomePage/index.tsx @@ -1,17 +1,14 @@ import { ErrorSuspenseContainer } from '@/components'; -import ReviewAccessForm from './components/ReviewAccessForm'; import URLGeneratorForm from './components/URLGeneratorForm'; import * as S from './styles'; const HomePage = () => { - // NOTE: ReviewAccessForm에서는 Errorboundary를 사용하지 않지만 감싸지 않으면 - // Error fallback에서 ReviewAccessForm 컴포넌트가 노출되므로 둘 다 감쌌음 return ( + - ); diff --git a/frontend/src/pages/HomePage/styles.ts b/frontend/src/pages/HomePage/styles.ts index 60baaa3ef..63561642c 100644 --- a/frontend/src/pages/HomePage/styles.ts +++ b/frontend/src/pages/HomePage/styles.ts @@ -2,7 +2,12 @@ import styled from '@emotion/styled'; export const HomePage = styled.div` display: flex; - flex-direction: column; - gap: 7.7rem; - margin-top: 4rem; + height: 100vh; + width: 100vw; +`; + +export const ReviewMeOverview = styled.section` + width: 65%; + height: 100%; + background-color: ${({ theme }) => theme.colors.lightPurple}; `; diff --git a/frontend/src/pages/ReviewDashboardPage/index.tsx b/frontend/src/pages/ReviewDashboardPage/index.tsx new file mode 100644 index 000000000..485a2d01b --- /dev/null +++ b/frontend/src/pages/ReviewDashboardPage/index.tsx @@ -0,0 +1,36 @@ +import { Button } from '@/components'; +import ContentModal from '@/components/common/modals/ContentModal'; // 경로? +import useModals from '@/hooks/useModals'; + +import * as S from './styles'; + +interface ReviewDashboardPageProps { + revieweeName: string; +} + +const MODAL_KEYS = { + contentModal: 'CONTENT_MODAL', +}; + +const ReviewDashboardPage = ({ revieweeName }: ReviewDashboardPageProps) => { + const { openModal, closeModal } = useModals(); + + const handleReviewWritingButtonClick = () => {}; + const handleReviewListButtonClick = () => {}; + //openModal(); + return ( + + {`${revieweeName}의 리뷰 방이에요`} + + + + + + ); +}; + +export default ReviewDashboardPage; diff --git a/frontend/src/pages/ReviewDashboardPage/styles.ts b/frontend/src/pages/ReviewDashboardPage/styles.ts new file mode 100644 index 000000000..761ae529a --- /dev/null +++ b/frontend/src/pages/ReviewDashboardPage/styles.ts @@ -0,0 +1,19 @@ +import styled from '@emotion/styled'; + +export const ReviewDashboardPage = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +`; + +export const RevieweeGuide = styled.p` + font-size: larger; + font-weight: ${({ theme }) => theme.fontWeight.bold}; +`; + +export const ButtonContainer = styled.div` + display: flex; + flex-direction: column; + gap: 1rem; +`; From 5a064a6aaee119de5fce79e58c17f841859f1a2c Mon Sep 17 00:00:00 2001 From: ImxYJL Date: Thu, 15 Aug 2024 16:14:50 +0900 Subject: [PATCH 03/29] =?UTF-8?q?refactor:=20=EB=AC=B8=EC=9E=90=EC=97=B4?= =?UTF-8?q?=20=EA=B8=B8=EC=9D=B4=20=EA=B2=80=EC=A6=9D=20=ED=95=A8=EC=88=98?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=B5=9C=EC=86=8C=20=EA=B8=B8=EC=9D=B4?= =?UTF-8?q?=EB=8F=84=20=EA=B2=80=EC=A6=9D=ED=95=A0=20=EC=88=98=20=EC=9E=88?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/HomePage/utils/validateInput.ts | 20 +++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/frontend/src/pages/HomePage/utils/validateInput.ts b/frontend/src/pages/HomePage/utils/validateInput.ts index 970693dfd..1dfd38550 100644 --- a/frontend/src/pages/HomePage/utils/validateInput.ts +++ b/frontend/src/pages/HomePage/utils/validateInput.ts @@ -7,18 +7,30 @@ export const isAlphanumeric = (input: string) => { return alphanumericRegex.test(input); }; -export const isWithinMaxLength = (input: string, length: number) => { - return input.length <= length; +export const isWithinLengthRange = (input: string, end: number, start: number = 0) => { + const length = input.length; + return length >= start && length <= end; }; const MAX_VALID_REVIEW_GROUP_DATA_INPUT = 50; export const isValidReviewGroupDataInput = (input: string) => { - return isNotEmptyInput(input) && isWithinMaxLength(input, MAX_VALID_REVIEW_GROUP_DATA_INPUT); + return isNotEmptyInput(input) && isWithinLengthRange(input, MAX_VALID_REVIEW_GROUP_DATA_INPUT); }; const MAX_GROUP_ACCESS_CODE_INPUT = 62; export const isValidAccessCodeInput = (input: string) => { - return isNotEmptyInput(input) && isAlphanumeric(input) && isWithinMaxLength(input, MAX_GROUP_ACCESS_CODE_INPUT); + return isNotEmptyInput(input) && isAlphanumeric(input) && isWithinLengthRange(input, MAX_GROUP_ACCESS_CODE_INPUT); +}; + +export const MIN_PASSWORD_INPUT = 4; +export const MAX_PASSWORD_INPUT = 20; + +export const isValidPasswordInput = (input: string) => { + return ( + isNotEmptyInput(input) && + isAlphanumeric(input) && + isWithinLengthRange(input, MAX_GROUP_ACCESS_CODE_INPUT, MIN_PASSWORD_INPUT) + ); }; From 827a481e13c0fc0ec0d5cfa4936c481baad1cacc Mon Sep 17 00:00:00 2001 From: ImxYJL Date: Thu, 15 Aug 2024 16:15:11 +0900 Subject: [PATCH 04/29] =?UTF-8?q?test:=20=EB=B3=80=EA=B2=BD=EB=90=9C=20?= =?UTF-8?q?=EB=AC=B8=EC=9E=90=EC=97=B4=20=EA=B8=B8=EC=9D=B4=20=EA=B2=80?= =?UTF-8?q?=EC=A6=9D=20=ED=95=A8=EC=88=98=EC=97=90=20=EB=8C=80=ED=95=9C=20?= =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../HomePage/utils/validateInput.test.ts | 38 ++++++++++++++----- 1 file changed, 29 insertions(+), 9 deletions(-) diff --git a/frontend/src/pages/HomePage/utils/validateInput.test.ts b/frontend/src/pages/HomePage/utils/validateInput.test.ts index d1a7747ac..ed86dd7cc 100644 --- a/frontend/src/pages/HomePage/utils/validateInput.test.ts +++ b/frontend/src/pages/HomePage/utils/validateInput.test.ts @@ -1,4 +1,4 @@ -import { isNotEmptyInput, isAlphanumeric, isWithinMaxLength } from './validateInput'; +import { isNotEmptyInput, isAlphanumeric, isWithinLengthRange } from './validateInput'; describe('isNotEmptyInput', () => { test.each(['abc', '123', '!@#', '하이'])('빈 문자열이 아닐 경우 true를 반환한다. (input: %s)', (input) => { @@ -26,15 +26,35 @@ describe('isAlphanumeric', () => { ); }); -describe('isWithinMaxLength', () => { - const maxLength = 5; - test('지정한 길이 이하의 입력인 경우 true를 반환한다.', () => { - const inputWithLength5 = '12345'; - expect(isWithinMaxLength(inputWithLength5, maxLength)).toBe(true); +describe('isWithinLengthRange', () => { + test.each([ + ['abc', 5], + ['12345', 5], + ['a', 5], + ])('문자열 길이가 0 이상, %d 이하인 경우 true를 반환한다. (input: %s)', (input, end) => { + expect(isWithinLengthRange(input, end)).toBe(true); + }); + test.each([ + ['abc', 5, 3], + ['12345', 5, 3], + ])('문자열 길이가 %d 이상 %d 이하인 경우 true를 반환한다. (input: %s)', (input, end, start) => { + expect(isWithinLengthRange(input, end, start)).toBe(true); }); - test('지정한 길이를 초과하는 입력인 경우 false를 반환한다.', () => { - const inputOverLength5 = '123456'; - expect(isWithinMaxLength(inputOverLength5, maxLength)).toBe(false); + test.each([ + ['abcdef', 5], + ['longtext', 7], + ])('문자열 길이가 최대값을 초과하는 경우 false를 반환한다. (input: %s)', (input, end) => { + expect(isWithinLengthRange(input, end)).toBe(false); }); + + test.each([ + ['ab', 5, 3], + ['abcdef', 5, 2], + ])( + '문자열 길이가 최소 범위에 미치지 못하는 경우 false를 반환한다. (input: %s, start: %d, end: %d)', + (input, end, start) => { + expect(isWithinLengthRange(input, end, start)).toBe(false); + }, + ); }); From 5fd81d935ce78c2fd0ffdf1ec07460b7a001a79b Mon Sep 17 00:00:00 2001 From: ImxYJL Date: Thu, 15 Aug 2024 17:06:56 +0900 Subject: [PATCH 05/29] =?UTF-8?q?refactor:=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=EC=97=90=20=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=20?= =?UTF-8?q?=EC=9C=A0=ED=9A=A8=EC=84=B1=20=EA=B2=80=EC=82=AC=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/URLGeneratorForm/index.tsx | 57 +++++++++++++++---- .../components/URLGeneratorForm/styles.ts | 5 ++ .../src/pages/HomePage/utils/validateInput.ts | 10 +--- 3 files changed, 53 insertions(+), 19 deletions(-) diff --git a/frontend/src/pages/HomePage/components/URLGeneratorForm/index.tsx b/frontend/src/pages/HomePage/components/URLGeneratorForm/index.tsx index a26bf8f00..95763acf2 100644 --- a/frontend/src/pages/HomePage/components/URLGeneratorForm/index.tsx +++ b/frontend/src/pages/HomePage/components/URLGeneratorForm/index.tsx @@ -6,16 +6,25 @@ import useModals from '@/hooks/useModals'; import { debounce } from '@/utils/debounce'; import usePostDataForURL from '../../queries/usePostDataForURL'; -import { isValidReviewGroupDataInput, isWithinMaxLength } from '../../utils/validateInput'; +import { + isValidReviewGroupDataInput, + isWithinLengthRange, + isAlphanumeric, + MAX_PASSWORD_INPUT, + MAX_VALID_REVIEW_GROUP_DATA_INPUT, + MIN_PASSWORD_INPUT, + isValidPasswordInput, +} from '../../utils/validateInput'; import { FormLayout, ReviewGroupDataModal } from '../index'; import * as S from './styles'; // TODO: 디바운스 시간을 모든 경우에 0.3초로 고정할 것인지(전역 상수로 사용) 논의하기 const DEBOUNCE_TIME = 300; -const MAX_VALID_REVIEW_GROUP_DATA_INPUT = 50; -const LENGTH_ERROR_MESSAGE = `${MAX_VALID_REVIEW_GROUP_DATA_INPUT}자까지 입력할 수 있습니다.`; +const INVALID_CHAR_ERROR_MESSAGE = `영문(대/소문자) 및 숫자만 입력할 수 있습니다`; +const GROUP_DATA_LENGTH_ERROR_MESSAGE = `최대 ${MAX_VALID_REVIEW_GROUP_DATA_INPUT}자까지 입력할 수 있습니다.`; +const PASSWORD_LENGTH_ERROR_MESSAGE = `${MIN_PASSWORD_INPUT}자부터 ${MAX_PASSWORD_INPUT}자까지 입력할 수 있습니다.`; const MODAL_KEYS = { confirm: 'CONFIRM', @@ -34,7 +43,10 @@ const URLGeneratorForm = () => { const mutation = usePostDataForURL(); const { isOpen, openModal, closeModal } = useModals(); - const isFormValid = isValidReviewGroupDataInput(revieweeName) && isValidReviewGroupDataInput(projectName); + const isFormValid = + isValidReviewGroupDataInput(revieweeName) && + isValidReviewGroupDataInput(projectName) && + isValidPasswordInput(password); const postDataForURL = () => { const dataForURL: DataForURL = { revieweeName, projectName }; @@ -77,16 +89,32 @@ const URLGeneratorForm = () => { }, DEBOUNCE_TIME); useEffect(() => { - isWithinMaxLength(revieweeName, MAX_VALID_REVIEW_GROUP_DATA_INPUT) + isWithinLengthRange(revieweeName, MAX_VALID_REVIEW_GROUP_DATA_INPUT) ? setRevieweeNameErrorMessage('') - : setRevieweeNameErrorMessage(LENGTH_ERROR_MESSAGE); + : setRevieweeNameErrorMessage(GROUP_DATA_LENGTH_ERROR_MESSAGE); }, [revieweeName]); useEffect(() => { - isWithinMaxLength(projectName, MAX_VALID_REVIEW_GROUP_DATA_INPUT) + isWithinLengthRange(projectName, MAX_VALID_REVIEW_GROUP_DATA_INPUT) ? setProjectNameErrorMessage('') - : setProjectNameErrorMessage(LENGTH_ERROR_MESSAGE); - }, [projectName]); + : setProjectNameErrorMessage(GROUP_DATA_LENGTH_ERROR_MESSAGE); + }, [revieweeName]); + + useEffect(() => { + // NOTE: URL 요청 버튼 활성화 조건에서는 최소 4자 조건도 체크하지만, + // 여기서(비밀번호 에러 메세지 설정)는 min 값을 검사하지 않음 + // 현재 onFocus 등의 처리가 없어 항상 에러 메세지가 뜨기 때문 + // 추후 textarea처럼 onfocus, onblur에 대한 훅 사용 예정 + if (!isWithinLengthRange(password, MAX_PASSWORD_INPUT)) { + setPasswordErrorMessage(PASSWORD_LENGTH_ERROR_MESSAGE); + return; + } + if (!isAlphanumeric(password)) { + setPasswordErrorMessage(INVALID_CHAR_ERROR_MESSAGE); + return; + } + setPasswordErrorMessage(''); + }, [password]); return ( @@ -115,8 +143,15 @@ const URLGeneratorForm = () => { 리뷰 확인을 위한 비밀번호를 적어주세요 - - {projectNameErrorMessage} + {`${MIN_PASSWORD_INPUT}~${MAX_PASSWORD_INPUT}자의 영문(대/소문자),숫자만 사용가능해요`} + + {passwordErrorMessage} {isOpen(MODAL_KEYS.confirm) && ( - closeModal(MODAL_KEYS.confirm)} /> + closeModal(MODAL_KEYS.confirm)} /> )} diff --git a/frontend/src/pages/HomePage/components/index.ts b/frontend/src/pages/HomePage/components/index.ts index e66aea391..dcc18056d 100644 --- a/frontend/src/pages/HomePage/components/index.ts +++ b/frontend/src/pages/HomePage/components/index.ts @@ -1,6 +1,6 @@ export { default as FormBody } from './FormBody'; export { default as FormLayout } from './FormLayout'; export { default as ReviewAccessForm } from './ReviewAccessForm'; -export { default as ReviewGroupDataModal } from './ReviewGroupDataModal'; +export { default as ReviewURLModal } from './ReviewURLModal'; export { default as URLGeneratorForm } from './URLGeneratorForm'; export { default as CopyTextButton } from './CopyTextButton'; From e19ec0e5d96c7e2154c4ea49e77b37022ecf9068 Mon Sep 17 00:00:00 2001 From: ImxYJL Date: Thu, 15 Aug 2024 19:17:54 +0900 Subject: [PATCH 08/29] =?UTF-8?q?feat:=20=EB=A6=AC=EB=B7=B0=EB=AF=B8=20?= =?UTF-8?q?=EC=86=8C=EA=B0=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80=201=EC=B0=A8?= =?UTF-8?q?=20=ED=8D=BC=EB=B8=94=EB=A6=AC=EC=8B=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/assets/dashboard.svg | 9 +++ frontend/src/assets/downArrow.svg | 10 ++++ frontend/src/assets/overview1.svg | 9 +++ frontend/src/assets/overview2.svg | 9 +++ frontend/src/assets/overview3.svg | 9 +++ frontend/src/assets/overviewTitle.svg | 9 +++ .../components/OverviewItem/index.tsx | 34 +++++++++++ .../components/OverviewItem/styles.ts | 47 +++++++++++++++ .../components/ReviewAccessForm/index.tsx | 3 +- .../components/ReviewMeOverview/index.tsx | 57 +++++++++++++++++++ .../components/ReviewMeOverview/styles.ts | 37 ++++++++++++ .../components/URLGeneratorForm/index.tsx | 8 +-- .../src/pages/HomePage/components/index.ts | 2 + frontend/src/pages/HomePage/index.tsx | 4 +- frontend/src/pages/HomePage/styles.ts | 8 +-- 15 files changed, 237 insertions(+), 18 deletions(-) create mode 100644 frontend/src/assets/dashboard.svg create mode 100644 frontend/src/assets/downArrow.svg create mode 100644 frontend/src/assets/overview1.svg create mode 100644 frontend/src/assets/overview2.svg create mode 100644 frontend/src/assets/overview3.svg create mode 100644 frontend/src/assets/overviewTitle.svg create mode 100644 frontend/src/pages/HomePage/components/OverviewItem/index.tsx create mode 100644 frontend/src/pages/HomePage/components/OverviewItem/styles.ts create mode 100644 frontend/src/pages/HomePage/components/ReviewMeOverview/index.tsx create mode 100644 frontend/src/pages/HomePage/components/ReviewMeOverview/styles.ts diff --git a/frontend/src/assets/dashboard.svg b/frontend/src/assets/dashboard.svg new file mode 100644 index 000000000..a0640874d --- /dev/null +++ b/frontend/src/assets/dashboard.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/src/assets/downArrow.svg b/frontend/src/assets/downArrow.svg new file mode 100644 index 000000000..0ba640187 --- /dev/null +++ b/frontend/src/assets/downArrow.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/frontend/src/assets/overview1.svg b/frontend/src/assets/overview1.svg new file mode 100644 index 000000000..695521773 --- /dev/null +++ b/frontend/src/assets/overview1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/src/assets/overview2.svg b/frontend/src/assets/overview2.svg new file mode 100644 index 000000000..9063e2eec --- /dev/null +++ b/frontend/src/assets/overview2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/src/assets/overview3.svg b/frontend/src/assets/overview3.svg new file mode 100644 index 000000000..431b20ebc --- /dev/null +++ b/frontend/src/assets/overview3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/src/assets/overviewTitle.svg b/frontend/src/assets/overviewTitle.svg new file mode 100644 index 000000000..e5f1f949b --- /dev/null +++ b/frontend/src/assets/overviewTitle.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/src/pages/HomePage/components/OverviewItem/index.tsx b/frontend/src/pages/HomePage/components/OverviewItem/index.tsx new file mode 100644 index 000000000..ab98c978d --- /dev/null +++ b/frontend/src/pages/HomePage/components/OverviewItem/index.tsx @@ -0,0 +1,34 @@ +import React from 'react'; + +import * as S from './styles'; + +export interface OverviewItemStyleProps { + direction: React.CSSProperties['flexDirection']; +} + +interface OverviewItemProps extends OverviewItemStyleProps { + imageSrc: string; + title: string; + description: string[]; +} + +const OverviewItem: React.FC = ({ direction, imageSrc, title, description }) => { + return ( + + + + {title} + + {description.map((line, index) => ( + + {line} + {index < description.length - 1 &&
} + + ))} + + + + ); +}; + +export default OverviewItem; diff --git a/frontend/src/pages/HomePage/components/OverviewItem/styles.ts b/frontend/src/pages/HomePage/components/OverviewItem/styles.ts new file mode 100644 index 000000000..115a4ded2 --- /dev/null +++ b/frontend/src/pages/HomePage/components/OverviewItem/styles.ts @@ -0,0 +1,47 @@ +import styled from '@emotion/styled'; + +import { OverviewItemStyleProps } from './'; + +export const OverviewItem = styled.div` + display: flex; + flex-direction: ${({ direction }) => direction}; + align-items: center; + justify-content: center; + gap: 2rem; + + background-color: white; + + /* NOTE: 투명도가 반영된 색이라 그런지 피그마에서의 색과 다름 */ + /* background-color: ${({ theme }) => theme.colors.sidebarBackground}; */ + + padding: 0 2rem; + + ${({ direction }) => + direction === 'row' + ? ` + width: 68rem; + ` + : ` + width: 30rem; + `} +`; + +export const OverviewItemTitle = styled.p` + font-size: 1.7rem; + font-weight: ${({ theme }) => theme.fontWeight.bold}; +`; + +export const OverviewItemImg = styled.img` + object-fit: contain; +`; + +export const OverviewItemContent = styled.div` + display: flex; + flex-direction: column; + gap: 1.3rem; + padding: 0 2rem; +`; + +export const OverviewItemDescription = styled.div` + margin-bottom: 1.8rem; +`; diff --git a/frontend/src/pages/HomePage/components/ReviewAccessForm/index.tsx b/frontend/src/pages/HomePage/components/ReviewAccessForm/index.tsx index aa37c4725..52447ca7a 100644 --- a/frontend/src/pages/HomePage/components/ReviewAccessForm/index.tsx +++ b/frontend/src/pages/HomePage/components/ReviewAccessForm/index.tsx @@ -6,7 +6,6 @@ import { Input, Button } from '@/components'; import { useGroupAccessCode } from '@/hooks'; import { debounce } from '@/utils/debounce'; -import { isValidAccessCodeInput } from '../../utils/validateInput'; import { FormLayout } from '../index'; import * as S from './styles'; @@ -74,7 +73,7 @@ const ReviewAccessForm = () => { /> - - - - ); -}; - -export default ReviewDashboardPage; diff --git a/frontend/src/pages/ReviewDashboardPage/styles.ts b/frontend/src/pages/ReviewDashboardPage/styles.ts deleted file mode 100644 index 761ae529a..000000000 --- a/frontend/src/pages/ReviewDashboardPage/styles.ts +++ /dev/null @@ -1,19 +0,0 @@ -import styled from '@emotion/styled'; - -export const ReviewDashboardPage = styled.div` - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; -`; - -export const RevieweeGuide = styled.p` - font-size: larger; - font-weight: ${({ theme }) => theme.fontWeight.bold}; -`; - -export const ButtonContainer = styled.div` - display: flex; - flex-direction: column; - gap: 1rem; -`; From 5b80f510b9568690a72ba87864096824aaec6711 Mon Sep 17 00:00:00 2001 From: ImxYJL Date: Fri, 16 Aug 2024 10:40:10 +0900 Subject: [PATCH 10/29] =?UTF-8?q?refactor:=20=EC=8A=A4=ED=83=80=EC=9D=BC?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../HomePage/components/OverviewItem/index.tsx | 2 +- .../HomePage/components/OverviewItem/styles.ts | 15 ++++++++++++++- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/HomePage/components/OverviewItem/index.tsx b/frontend/src/pages/HomePage/components/OverviewItem/index.tsx index ab98c978d..9ac5a0043 100644 --- a/frontend/src/pages/HomePage/components/OverviewItem/index.tsx +++ b/frontend/src/pages/HomePage/components/OverviewItem/index.tsx @@ -15,7 +15,7 @@ interface OverviewItemProps extends OverviewItemStyleProps { const OverviewItem: React.FC = ({ direction, imageSrc, title, description }) => { return ( - + {title} diff --git a/frontend/src/pages/HomePage/components/OverviewItem/styles.ts b/frontend/src/pages/HomePage/components/OverviewItem/styles.ts index 115a4ded2..da5b3dea9 100644 --- a/frontend/src/pages/HomePage/components/OverviewItem/styles.ts +++ b/frontend/src/pages/HomePage/components/OverviewItem/styles.ts @@ -20,9 +20,11 @@ export const OverviewItem = styled.div` direction === 'row' ? ` width: 68rem; + height: 23rem; ` : ` width: 30rem; + height: 45rem; `} `; @@ -31,8 +33,19 @@ export const OverviewItemTitle = styled.p` font-weight: ${({ theme }) => theme.fontWeight.bold}; `; -export const OverviewItemImg = styled.img` +export const OverviewItemImg = styled.img` object-fit: contain; + + ${({ direction }) => + direction === 'row' + ? ` + width: 30rem; + height: 22rem; + ` + : ` + width: 15rem; + height: 20rem; + `} `; export const OverviewItemContent = styled.div` From 1488b6d170f51a61b7d4e680ea58e5316053d223 Mon Sep 17 00:00:00 2001 From: ImxYJL Date: Fri, 16 Aug 2024 10:40:26 +0900 Subject: [PATCH 11/29] =?UTF-8?q?refactor:=20=ED=8F=BC=20=EB=A9=98?= =?UTF-8?q?=ED=8A=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ReviewMeOverview/index.tsx | 16 ++++++---------- .../components/URLGeneratorForm/index.tsx | 6 +++--- 2 files changed, 9 insertions(+), 13 deletions(-) diff --git a/frontend/src/pages/HomePage/components/ReviewMeOverview/index.tsx b/frontend/src/pages/HomePage/components/ReviewMeOverview/index.tsx index 8e7618008..3deecad8d 100644 --- a/frontend/src/pages/HomePage/components/ReviewMeOverview/index.tsx +++ b/frontend/src/pages/HomePage/components/ReviewMeOverview/index.tsx @@ -21,8 +21,8 @@ const ReviewMeOverview = () => { @@ -35,19 +35,15 @@ const ReviewMeOverview = () => { diff --git a/frontend/src/pages/HomePage/components/URLGeneratorForm/index.tsx b/frontend/src/pages/HomePage/components/URLGeneratorForm/index.tsx index 4ec905a91..0d72e89e7 100644 --- a/frontend/src/pages/HomePage/components/URLGeneratorForm/index.tsx +++ b/frontend/src/pages/HomePage/components/URLGeneratorForm/index.tsx @@ -120,7 +120,7 @@ const URLGeneratorForm = () => { - 리뷰 받을 사람의 이름을 적어주세요 + 본인의 이름을 적어주세요 { {projectNameErrorMessage} - 리뷰 확인을 위한 비밀번호를 적어주세요 + 리뷰 확인에 사용할 비밀번호를 적어주세요 {`${MIN_PASSWORD_INPUT}~${MAX_PASSWORD_INPUT}자의 영문(대/소문자),숫자만 사용가능해요`} {passwordErrorMessage} @@ -153,7 +153,7 @@ const URLGeneratorForm = () => { onClick={handleUrlCreationButtonClick} disabled={!isFormValid} > - 리뷰 요청 URL 생성하기 + 리뷰 링크 생성하기 {isOpen(MODAL_KEYS.confirm) && ( closeModal(MODAL_KEYS.confirm)} /> From b720ca058993c3ee611e11ed425205a2fdfaba3c Mon Sep 17 00:00:00 2001 From: ImxYJL Date: Fri, 16 Aug 2024 15:51:04 +0900 Subject: [PATCH 12/29] =?UTF-8?q?feat:=20=EC=9E=85=EB=A0=A5=ED=95=9C=20?= =?UTF-8?q?=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=EB=A5=BC=20=ED=99=95?= =?UTF-8?q?=EC=9D=B8=ED=95=A0=20=EC=88=98=20=EC=9E=88=EB=8A=94=20EyeButton?= =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/assets/eye.svg | 11 ++++++++++ frontend/src/assets/eyeOff.svg | 10 +++++++++ .../src/components/common/EyeButton/index.tsx | 21 +++++++++++++++++++ .../src/components/common/EyeButton/styles.ts | 15 +++++++++++++ frontend/src/components/common/index.tsx | 4 +++- frontend/src/hooks/index.ts | 1 + frontend/src/hooks/useEyeButton.tsx | 16 ++++++++++++++ 7 files changed, 77 insertions(+), 1 deletion(-) create mode 100644 frontend/src/assets/eye.svg create mode 100644 frontend/src/assets/eyeOff.svg create mode 100644 frontend/src/components/common/EyeButton/index.tsx create mode 100644 frontend/src/components/common/EyeButton/styles.ts create mode 100644 frontend/src/hooks/useEyeButton.tsx diff --git a/frontend/src/assets/eye.svg b/frontend/src/assets/eye.svg new file mode 100644 index 000000000..f790cedd6 --- /dev/null +++ b/frontend/src/assets/eye.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/frontend/src/assets/eyeOff.svg b/frontend/src/assets/eyeOff.svg new file mode 100644 index 000000000..7ad3eb558 --- /dev/null +++ b/frontend/src/assets/eyeOff.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/frontend/src/components/common/EyeButton/index.tsx b/frontend/src/components/common/EyeButton/index.tsx new file mode 100644 index 000000000..adc606d70 --- /dev/null +++ b/frontend/src/components/common/EyeButton/index.tsx @@ -0,0 +1,21 @@ +import { useState } from 'react'; + +import EyeIcon from '@/assets/eye.svg'; +import EyeOffIcon from '@/assets/eyeOff.svg'; + +import * as S from './styles'; + +interface EyeButtonProps { + isOff: boolean; + handleEyeButtonToggle: () => void; +} + +const EyeButton = ({ isOff, handleEyeButtonToggle }: EyeButtonProps) => { + return ( + + 비밀번호 공개 버튼 + + ); +}; + +export default EyeButton; diff --git a/frontend/src/components/common/EyeButton/styles.ts b/frontend/src/components/common/EyeButton/styles.ts new file mode 100644 index 000000000..605e557f4 --- /dev/null +++ b/frontend/src/components/common/EyeButton/styles.ts @@ -0,0 +1,15 @@ +import styled from '@emotion/styled'; + +export const EyeButton = styled.button` + display: inline-block; + + position: absolute; + top: 76%; + right: 1rem; + transform: translateY(-50%); + + width: 2rem; + height: 2rem; + + cursor: pointer; +`; diff --git a/frontend/src/components/common/index.tsx b/frontend/src/components/common/index.tsx index abc0cf2b0..eb72af292 100644 --- a/frontend/src/components/common/index.tsx +++ b/frontend/src/components/common/index.tsx @@ -7,7 +7,9 @@ export { default as ReviewDate } from './ReviewDate'; export { default as RevieweeComments } from './RevieweeComments'; export { default as MultilineTextViewer } from './MultilineTextViewer'; export { default as TopButton } from './TopButton'; -export * from './modals'; export { default as LongReviewItem } from './LongReviewItem'; export { default as Checkbox } from './Checkbox'; export { default as CheckboxItem } from './CheckboxItem'; +export { default as EyeButton } from './EyeButton'; + +export * from './modals'; diff --git a/frontend/src/hooks/index.ts b/frontend/src/hooks/index.ts index f4bb36bc7..6ad201cad 100644 --- a/frontend/src/hooks/index.ts +++ b/frontend/src/hooks/index.ts @@ -2,4 +2,5 @@ export { default as useSidebar } from './useSidebar'; export { default as useModalClose } from './useModalClose'; export { default as useGroupAccessCode } from './useGroupAccessCode'; export { default as useSearchParamAndQuery } from './useSearchParamAndQuery'; +export { default as useEyeButton } from './useEyeButton'; export * from './review'; diff --git a/frontend/src/hooks/useEyeButton.tsx b/frontend/src/hooks/useEyeButton.tsx new file mode 100644 index 000000000..e470da2d8 --- /dev/null +++ b/frontend/src/hooks/useEyeButton.tsx @@ -0,0 +1,16 @@ +import { useState } from 'react'; + +const useEyeButton = () => { + const [isOff, setIsOff] = useState(true); + + const handleEyeButtonToggle = () => { + setIsOff(!isOff); + }; + + return { + isOff, + handleEyeButtonToggle, + }; +}; + +export default useEyeButton; From 441cb5199d8be4dc3979e6e4c545a864fde28aae Mon Sep 17 00:00:00 2001 From: ImxYJL Date: Fri, 16 Aug 2024 15:52:01 +0900 Subject: [PATCH 13/29] =?UTF-8?q?refactor:=20URLGeneratorForm=EC=97=90=20E?= =?UTF-8?q?yeButton=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/URLGeneratorForm/index.tsx | 17 ++++++++++++++--- .../components/URLGeneratorForm/styles.ts | 2 ++ 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/frontend/src/pages/HomePage/components/URLGeneratorForm/index.tsx b/frontend/src/pages/HomePage/components/URLGeneratorForm/index.tsx index 0d72e89e7..4d1fbd7b7 100644 --- a/frontend/src/pages/HomePage/components/URLGeneratorForm/index.tsx +++ b/frontend/src/pages/HomePage/components/URLGeneratorForm/index.tsx @@ -1,7 +1,8 @@ import { useEffect, useState } from 'react'; import { DataForURL } from '@/apis/group'; -import { Button, Input } from '@/components'; +import { Button, Input, EyeButton } from '@/components'; +import { useEyeButton } from '@/hooks'; import useModals from '@/hooks/useModals'; import { debounce } from '@/utils/debounce'; @@ -41,6 +42,7 @@ const URLGeneratorForm = () => { const [passwordErrorMessage, setPasswordErrorMessage] = useState(''); const mutation = usePostDataForURL(); + const { isOff, handleEyeButtonToggle } = useEyeButton(); const { isOpen, openModal, closeModal } = useModals(); const isFormValid = @@ -64,6 +66,7 @@ const URLGeneratorForm = () => { const resetInputs = () => { setRevieweeName(''); setProjectName(''); + setPassword(''); }; const getCompleteURL = (reviewRequestCode: string) => { @@ -113,6 +116,7 @@ const URLGeneratorForm = () => { setPasswordErrorMessage(INVALID_CHAR_ERROR_MESSAGE); return; } + setPasswordErrorMessage(''); }, [password]); @@ -126,7 +130,7 @@ const URLGeneratorForm = () => { value={revieweeName} onChange={handleNameInputChange} type="text" - placeholder="행성이" + placeholder="이름" /> {revieweeNameErrorMessage} @@ -144,7 +148,14 @@ const URLGeneratorForm = () => { 리뷰 확인에 사용할 비밀번호를 적어주세요 {`${MIN_PASSWORD_INPUT}~${MAX_PASSWORD_INPUT}자의 영문(대/소문자),숫자만 사용가능해요`} - + + {passwordErrorMessage} - - {errorMessage && {errorMessage}} - - - ); -}; - -export default ReviewAccessForm; diff --git a/frontend/src/pages/HomePage/components/ReviewAccessForm/reviewAccessForm.test.tsx b/frontend/src/pages/HomePage/components/ReviewAccessForm/reviewAccessForm.test.tsx deleted file mode 100644 index 7775cbfff..000000000 --- a/frontend/src/pages/HomePage/components/ReviewAccessForm/reviewAccessForm.test.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { getIsValidGroupAccessCodeApi } from '@/apis/group'; - -describe('getIsValidGroupAccessCodeApi', () => { - it('유효한 확인 코드인 경우 유효성 여부를 참으로 반환한다', async () => { - const validGroupAccessCode = 'group20'; - - const isValid = await getIsValidGroupAccessCodeApi(validGroupAccessCode); - - expect(isValid).toBe(true); - }); -}); diff --git a/frontend/src/pages/HomePage/components/ReviewAccessForm/styles.ts b/frontend/src/pages/HomePage/components/ReviewAccessForm/styles.ts deleted file mode 100644 index a7986a2ae..000000000 --- a/frontend/src/pages/HomePage/components/ReviewAccessForm/styles.ts +++ /dev/null @@ -1,19 +0,0 @@ -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}; -`; From 353b4ad8965dcb3c5a246f9d15e27d5baafadf85 Mon Sep 17 00:00:00 2001 From: ImxYJL Date: Fri, 16 Aug 2024 17:55:04 +0900 Subject: [PATCH 21/29] =?UTF-8?q?fix:=20h3=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/HomePage/components/ReviewURLModal/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/pages/HomePage/components/ReviewURLModal/styles.ts b/frontend/src/pages/HomePage/components/ReviewURLModal/styles.ts index b6b5a49b5..ae545a768 100644 --- a/frontend/src/pages/HomePage/components/ReviewURLModal/styles.ts +++ b/frontend/src/pages/HomePage/components/ReviewURLModal/styles.ts @@ -7,7 +7,7 @@ export const ReviewURLModal = styled.div` height: 18rem; `; -export const ModalTitle = styled.h3` +export const ModalTitle = styled.p` font-weight: ${({ theme }) => theme.fontWeight.bold}; font-size: 2rem; margin-bottom: 4.5rem; From 775b8dcdeb227edcaf5a4c3c5d7b6ab4b0b82a4b Mon Sep 17 00:00:00 2001 From: ImxYJL Date: Fri, 16 Aug 2024 17:55:21 +0900 Subject: [PATCH 22/29] =?UTF-8?q?chore:=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=ED=8C=8C=EC=9D=BC=EC=9D=84=20?= =?UTF-8?q?index=EC=97=90=EC=84=9C=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/HomePage/components/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/pages/HomePage/components/index.ts b/frontend/src/pages/HomePage/components/index.ts index 37a7a328c..106936edc 100644 --- a/frontend/src/pages/HomePage/components/index.ts +++ b/frontend/src/pages/HomePage/components/index.ts @@ -1,6 +1,5 @@ export { default as FormBody } from './FormBody'; export { default as FormLayout } from './FormLayout'; -export { default as ReviewAccessForm } from './ReviewAccessForm'; export { default as ReviewURLModal } from './ReviewURLModal'; export { default as URLGeneratorForm } from './URLGeneratorForm'; export { default as CopyTextButton } from './CopyTextButton'; From 88616ec9625d8e7d0183339990db23c20f26e9f8 Mon Sep 17 00:00:00 2001 From: ImxYJL Date: Sat, 17 Aug 2024 15:14:18 +0900 Subject: [PATCH 23/29] =?UTF-8?q?refactor:=20EyeButton=20=EC=82=AC?= =?UTF-8?q?=EC=9D=B4=EC=A6=88=20=EC=83=81=EC=88=98=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/common/EyeButton/styles.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/common/EyeButton/styles.ts b/frontend/src/components/common/EyeButton/styles.ts index 119357a74..bd70d773d 100644 --- a/frontend/src/components/common/EyeButton/styles.ts +++ b/frontend/src/components/common/EyeButton/styles.ts @@ -1,14 +1,16 @@ import styled from '@emotion/styled'; +const EYE_BUTTON_SIZE = '1.6rem'; + export const EyeButton = styled.button` display: inline-block; position: absolute; - top: calc((100% - 1.6rem) / 2); + top: calc((100% - ${EYE_BUTTON_SIZE}) / 2); right: 1rem; - width: 1.6rem; - height: 1.6rem; + width: ${EYE_BUTTON_SIZE}; + height: ${EYE_BUTTON_SIZE}; cursor: pointer; `; From eed9e44f94c4af1b9244bbf520f6f9ac8f397fe6 Mon Sep 17 00:00:00 2001 From: ImxYJL Date: Sat, 17 Aug 2024 15:14:47 +0900 Subject: [PATCH 24/29] =?UTF-8?q?refactor:=20OverviewItem=EC=9D=98=20?= =?UTF-8?q?=EB=B0=B0=EA=B2=BD=EC=83=89=EC=9D=84=20theme=EC=9D=98=20?= =?UTF-8?q?=EB=B0=B0=EA=B2=BD=EC=83=89=EC=9C=BC=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/HomePage/components/OverviewItem/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/pages/HomePage/components/OverviewItem/styles.ts b/frontend/src/pages/HomePage/components/OverviewItem/styles.ts index da5b3dea9..44f42a1c0 100644 --- a/frontend/src/pages/HomePage/components/OverviewItem/styles.ts +++ b/frontend/src/pages/HomePage/components/OverviewItem/styles.ts @@ -9,7 +9,7 @@ export const OverviewItem = styled.div` justify-content: center; gap: 2rem; - background-color: white; + background-color: ${({ theme }) => theme.colors.white}; /* NOTE: 투명도가 반영된 색이라 그런지 피그마에서의 색과 다름 */ /* background-color: ${({ theme }) => theme.colors.sidebarBackground}; */ From ec62da1fca7b0c539be17535d6d292d3bafd0bb9 Mon Sep 17 00:00:00 2001 From: soosoo22 Date: Mon, 19 Aug 2024 00:20:14 +0900 Subject: [PATCH 25/29] =?UTF-8?q?design:=20theme.ts=EC=97=90=20palePurple?= =?UTF-8?q?=20=EC=83=89=EC=83=81=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/styles/theme.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/styles/theme.ts b/frontend/src/styles/theme.ts index 1892fac28..93bb6f692 100644 --- a/frontend/src/styles/theme.ts +++ b/frontend/src/styles/theme.ts @@ -39,6 +39,7 @@ export const colors: ThemeProperty = { primary: '#7361DF', primaryHover: '#9082E6', lightPurple: '#E6E3F6', + palePurple: '#F5F4FF', black: '#1E2022', white: '#FFFFFF', lightGray: '#F1F2F4', From 99bb08eb389d37fe7c6e7c86d6f7d5afda63b832 Mon Sep 17 00:00:00 2001 From: soosoo22 Date: Mon, 19 Aug 2024 02:05:05 +0900 Subject: [PATCH 26/29] =?UTF-8?q?feat:=20Carousel=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../HomePage/components/Carousel/index.tsx | 67 +++++++++++++++ .../HomePage/components/Carousel/styles.ts | 82 +++++++++++++++++++ 2 files changed, 149 insertions(+) create mode 100644 frontend/src/pages/HomePage/components/Carousel/index.tsx create mode 100644 frontend/src/pages/HomePage/components/Carousel/styles.ts diff --git a/frontend/src/pages/HomePage/components/Carousel/index.tsx b/frontend/src/pages/HomePage/components/Carousel/index.tsx new file mode 100644 index 000000000..8f4f50889 --- /dev/null +++ b/frontend/src/pages/HomePage/components/Carousel/index.tsx @@ -0,0 +1,67 @@ +import { useRef, useState } from 'react'; + +import * as S from './styles'; + +interface Slide { + imageSrc: string; + title: string; + description: string[]; +} + +interface CarouselProps { + slides: Slide[]; + pageWidth: number; + pageHeight: number; + gap: number; + offset: number; +} + +const Carousel = ({ slides, pageWidth, pageHeight, gap, offset }: CarouselProps) => { + const [page, setPage] = useState(0); + const scrollRef = useRef(null); + + const handleScroll = () => { + if (scrollRef.current) { + const scrollLeft = scrollRef.current.scrollLeft; + const newPage = Math.round(scrollLeft / ((pageWidth + gap) * 10)); + setPage(newPage); + } + }; + + const scrollToPage = (pageIndex: number) => { + if (scrollRef.current) { + scrollRef.current.scrollTo({ + left: (pageWidth + gap) * 10 * pageIndex, + behavior: 'smooth', + }); + setPage(pageIndex); + } + }; + + return ( + + + {slides.map((slide, index) => ( + + scrollToPage(index)}> + {slide.title} + {slide.title} + + {slide.description.map((desc, index) => ( + {desc} + ))} + + + + ))} + + + {slides.map((_, index) => ( + scrollToPage(index)} /> + ))} + + + ); +}; + +export default Carousel; diff --git a/frontend/src/pages/HomePage/components/Carousel/styles.ts b/frontend/src/pages/HomePage/components/Carousel/styles.ts new file mode 100644 index 000000000..c4e5b65b6 --- /dev/null +++ b/frontend/src/pages/HomePage/components/Carousel/styles.ts @@ -0,0 +1,82 @@ +import styled from '@emotion/styled'; + +export const Layout = styled.section` + width: 100%; + padding-left: 3rem; +`; + +export const ScrollContainer = styled.div<{ gap: number; offset: number }>` + overflow-x: auto; + display: flex; + gap: ${({ gap }) => `${gap}rem`}; + + height: 100%; + padding: ${({ offset }) => `0 ${offset}rem`}; + + &::-webkit-scrollbar { + display: none; + } +`; + +export const Page = styled.div<{ width: number; height: number }>` + flex-shrink: 0; + width: ${({ width }) => `${width}rem`}; + height: ${({ height }) => `${height}rem`}; +`; + +export const PageItem = styled.div` + cursor: pointer; + + display: flex; + flex-direction: column; + align-items: center; + + height: 100%; + + background-color: ${({ theme }) => theme.colors.white}; + border-radius: 0.8rem; + border-radius: ${({ theme }) => theme.borderRadius.basic}; + box-shadow: 0.8rem 1rem 1.6rem hsl(0deg 0% 0% / 0.25); + + img { + width: 100%; + height: 25rem; + background-color: ${({ theme }) => theme.colors.palePurple}; + border-radius: ${({ theme }) => theme.borderRadius.basic} ${({ theme }) => theme.borderRadius.basic} 0 0; + } +`; + +export const PageTitle = styled.p` + margin: 1rem 0; + font-size: ${({ theme }) => theme.fontSize.mediumSmall}; + font-weight: ${({ theme }) => theme.fontWeight.bold}; +`; + +export const PageDescription = styled.div` + width: 100%; + padding-left: 3rem; +`; + +export const DescriptionItem = styled.p` + margin: 0.5rem 0; + font-size: ${({ theme }) => theme.fontSize.basic}; +`; + +export const IndicatorWrapper = styled.div` + display: flex; + justify-content: center; + margin-top: 1.6rem; +`; + +export const Indicator = styled.div<{ focused: boolean }>` + cursor: pointer; + + width: 1rem; + height: 1rem; + margin: 0 0.5rem; + + background-color: ${({ focused, theme }) => (focused ? theme.colors.black : theme.colors.placeholder)}; + border-radius: 50%; + + transition: background-color 0.3s ease; +`; From 7981a764a4033f1e6d68df73fc878fbef4d47482 Mon Sep 17 00:00:00 2001 From: soosoo22 Date: Mon, 19 Aug 2024 02:07:16 +0900 Subject: [PATCH 27/29] =?UTF-8?q?refactor:=20=EA=B8=B0=EC=A1=B4=20Overview?= =?UTF-8?q?Item=EC=9D=84=20Carousel=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= =?UTF-8?q?=EB=A1=9C=20=EA=B5=90=EC=B2=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ReviewMeOverview/index.tsx | 65 ++++++++----------- .../components/ReviewMeOverview/styles.ts | 25 ++++--- 2 files changed, 39 insertions(+), 51 deletions(-) diff --git a/frontend/src/pages/HomePage/components/ReviewMeOverview/index.tsx b/frontend/src/pages/HomePage/components/ReviewMeOverview/index.tsx index 967ad09eb..f545235c6 100644 --- a/frontend/src/pages/HomePage/components/ReviewMeOverview/index.tsx +++ b/frontend/src/pages/HomePage/components/ReviewMeOverview/index.tsx @@ -1,51 +1,42 @@ -import ArrowIcon from '@/assets/downArrow.svg'; import OverviewImg1 from '@/assets/overview1.svg'; import OverviewImg2 from '@/assets/overview2.svg'; import OverviewImg3 from '@/assets/overview3.svg'; import WritingIcon from '@/assets/overviewTitle.svg'; -import { OverviewItem } from '../index'; +import Carousel from '../Carousel'; import * as S from './styles'; +const OVERVIEW_TITLE = '리뷰미 사용법'; + +const OVERVIEW_SLIDES = [ + { + imageSrc: OverviewImg1, + title: '리뷰 받는 사람 (You)', + description: ['나의 리뷰 링크를 만들어요', '리뷰어에게 리뷰 링크를 보내요'], + }, + { + imageSrc: OverviewImg2, + title: '리뷰 쓰는 사람', + description: ['리뷰 링크에 접속해요', '리뷰 작성하기를 통해 리뷰를 작성해요'], + }, + { + imageSrc: OverviewImg3, + title: '리뷰 받는 사람 (You)', + description: ['리뷰 링크에 접속해요', '리뷰 확인을 위한 비밀번호를 입력해요', '받은 리뷰를 확인해요'], + }, +]; + const ReviewMeOverview = () => { return ( - - - - 리뷰미 사용법 - 리뷰미 사용법 - - - - - - - - - - - - - - - + + + {OVERVIEW_TITLE} + {OVERVIEW_TITLE} + + + ); }; diff --git a/frontend/src/pages/HomePage/components/ReviewMeOverview/styles.ts b/frontend/src/pages/HomePage/components/ReviewMeOverview/styles.ts index bf5a875e8..e6d86e94c 100644 --- a/frontend/src/pages/HomePage/components/ReviewMeOverview/styles.ts +++ b/frontend/src/pages/HomePage/components/ReviewMeOverview/styles.ts @@ -1,23 +1,21 @@ import styled from '@emotion/styled'; export const ReviewMeOverview = styled.section` + position: relative; + + overflow: hidden; + width: 65%; height: 100%; background-color: ${({ theme }) => theme.colors.lightPurple}; - - padding: 5rem 10rem; -`; - -export const RowSectionContainer = styled.div` - display: flex; - justify-content: center; - gap: 5rem; `; export const ColumnSectionContainer = styled.div` display: flex; flex-direction: column; + justify-content: center; + height: 100%; `; export const ArrowWrapper = styled.img` @@ -26,16 +24,15 @@ export const ArrowWrapper = styled.img` export const OverviewTitleContainer = styled.div` display: flex; - justify-content: center; - align-items: center; gap: 1.3rem; + align-items: center; + justify-content: center; - margin-bottom: 3rem; + margin-bottom: 4rem; `; export const OverviewTitle = styled.p` - font-size: 3.8rem; - font-weight: ${({ theme }) => theme.fontWeight.bold}; - margin-top: 1.3rem; + font-size: ${({ theme }) => theme.fontSize.large}; + font-weight: ${({ theme }) => theme.fontWeight.bold}; `; From 8f68b0a69d66acb9bac1251f1163ea1f80ed617d Mon Sep 17 00:00:00 2001 From: soosoo22 Date: Mon, 19 Aug 2024 02:11:27 +0900 Subject: [PATCH 28/29] =?UTF-8?q?design:=20=ED=99=88=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EB=86=92=EC=9D=B4=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/HomePage/styles.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/pages/HomePage/styles.ts b/frontend/src/pages/HomePage/styles.ts index b2924466f..d9dd886f1 100644 --- a/frontend/src/pages/HomePage/styles.ts +++ b/frontend/src/pages/HomePage/styles.ts @@ -3,4 +3,5 @@ import styled from '@emotion/styled'; export const HomePage = styled.div` display: flex; width: 100vw; + height: calc(100vh - 7rem); // NOTE: 7rem은 Topbar 높이 `; From ac3f1b0d97d4e2f83ba6832503aba8127ed3b9d4 Mon Sep 17 00:00:00 2001 From: soosoo22 Date: Mon, 19 Aug 2024 02:12:34 +0900 Subject: [PATCH 29/29] =?UTF-8?q?style:=20css=20=EC=86=8D=EC=84=B1=20?= =?UTF-8?q?=EC=88=9C=EC=84=9C=20=EC=A0=95=EB=A0=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/common/EyeButton/styles.ts | 6 +++--- .../pages/HomePage/components/FormLayout/styles.ts | 1 - .../HomePage/components/ReviewURLModal/styles.ts | 11 +++++------ .../HomePage/components/URLGeneratorForm/styles.ts | 13 ++++++------- 4 files changed, 14 insertions(+), 17 deletions(-) diff --git a/frontend/src/components/common/EyeButton/styles.ts b/frontend/src/components/common/EyeButton/styles.ts index bd70d773d..4cb94b5c7 100644 --- a/frontend/src/components/common/EyeButton/styles.ts +++ b/frontend/src/components/common/EyeButton/styles.ts @@ -3,14 +3,14 @@ import styled from '@emotion/styled'; const EYE_BUTTON_SIZE = '1.6rem'; export const EyeButton = styled.button` - display: inline-block; + cursor: pointer; position: absolute; top: calc((100% - ${EYE_BUTTON_SIZE}) / 2); right: 1rem; + display: inline-block; + width: ${EYE_BUTTON_SIZE}; height: ${EYE_BUTTON_SIZE}; - - cursor: pointer; `; diff --git a/frontend/src/pages/HomePage/components/FormLayout/styles.ts b/frontend/src/pages/HomePage/components/FormLayout/styles.ts index ebe757f5c..a8f8c8bae 100644 --- a/frontend/src/pages/HomePage/components/FormLayout/styles.ts +++ b/frontend/src/pages/HomePage/components/FormLayout/styles.ts @@ -3,7 +3,6 @@ import styled from '@emotion/styled'; export const FormLayout = styled.form` display: flex; flex-direction: column; - justify-content: center; `; diff --git a/frontend/src/pages/HomePage/components/ReviewURLModal/styles.ts b/frontend/src/pages/HomePage/components/ReviewURLModal/styles.ts index c791fdf7d..54047247d 100644 --- a/frontend/src/pages/HomePage/components/ReviewURLModal/styles.ts +++ b/frontend/src/pages/HomePage/components/ReviewURLModal/styles.ts @@ -8,9 +8,9 @@ export const ReviewURLModal = styled.div` `; export const ModalTitle = styled.p` - font-weight: ${({ theme }) => theme.fontWeight.bold}; - font-size: 2rem; margin-bottom: 4.5rem; + font-size: 2rem; + font-weight: ${({ theme }) => theme.fontWeight.bold}; `; export const ReviewURLModalItem = styled.div` @@ -33,13 +33,13 @@ export const Data = styled.span` `; export const CheckContainer = styled.div` - font-size: 1.5rem; - display: flex; gap: 0.6rem; align-items: center; margin-top: 2.5rem; + + font-size: 1.5rem; `; export const Checkbox = styled.input` @@ -54,8 +54,7 @@ export const CheckMessage = styled.p` `; export const WarningMessage = styled.p` + margin-top: 1rem; font-size: smaller; color: ${({ theme }) => theme.colors.red}; - - margin-top: 1rem; `; diff --git a/frontend/src/pages/HomePage/components/URLGeneratorForm/styles.ts b/frontend/src/pages/HomePage/components/URLGeneratorForm/styles.ts index 760d736be..0b45c287e 100644 --- a/frontend/src/pages/HomePage/components/URLGeneratorForm/styles.ts +++ b/frontend/src/pages/HomePage/components/URLGeneratorForm/styles.ts @@ -5,21 +5,20 @@ export const URLGeneratorForm = styled.section` align-items: center; justify-content: center; - padding: 0 9rem; width: 40%; + padding: 0 9rem; `; export const InputContainer = styled.div` + position: relative; display: flex; flex-direction: column; gap: 0.2rem; - - position: relative; `; export const PasswordInputContainer = styled.div` - display: flex; position: relative; + display: flex; `; export const Label = styled.label` @@ -27,13 +26,13 @@ export const Label = styled.label` `; export const InputInfo = styled.p` - font-size: 1.2rem; margin: 0.5rem 0.3rem 0.4rem; + font-size: 1.2rem; `; export const ErrorMessage = styled.p` - font-size: 1.3rem; - color: ${({ theme }) => theme.colors.red}; height: 1.3rem; padding-left: 0.7rem; + font-size: 1.3rem; + color: ${({ theme }) => theme.colors.red}; `;