+
{galleryInfoValue.open && (
)}
diff --git a/src/components/Skeleton.tsx b/src/components/Skeleton.tsx
index 15ec24fd..24ae15f1 100644
--- a/src/components/Skeleton.tsx
+++ b/src/components/Skeleton.tsx
@@ -1,9 +1,10 @@
import { colors } from '@/styles/colorPalette';
import styled from '@emotion/styled';
-const Skeleton = styled.div<{ width: number; height: number }>`
- width: ${({ width }) => `${width}px`};
- height: ${({ height }) => `${height}px`};
+const Skeleton = styled.div<{ width?: number; height?: number; full?: boolean }>`
+ ${({ width }) => `width: ${width}px`};
+ ${({ height }) => `height: ${height}px`};
+ ${({ full }) => full && `width: 100%; height: 100%;`};
@-webkit-keyframes skeleton-gradient {
0% {
diff --git a/src/components/alert/index.tsx b/src/components/alert/index.tsx
index 3199829d..171359da 100644
--- a/src/components/alert/index.tsx
+++ b/src/components/alert/index.tsx
@@ -9,7 +9,9 @@ interface AlertProps {
title: React.ReactNode;
description?: React.ReactNode;
buttonLabel?: string;
+ buttonCancelLabel?: string;
onClickButton?: () => void;
+ onClickCancelButton?: () => void;
close: () => void;
}
@@ -18,7 +20,9 @@ const Alert = ({
title,
description,
buttonLabel = '확인',
+ buttonCancelLabel,
onClickButton,
+ onClickCancelButton,
close,
}: AlertProps) => {
const { lockScroll, openScroll } = useDisabledScroll();
@@ -28,7 +32,7 @@ const Alert = ({
return () => openScroll();
}, []);
- if (!open) return;
+ if (!open) return null;
return (
@@ -45,9 +49,17 @@ const Alert = ({
<>{description}
)}
-
+
+ {buttonLabel && onClickCancelButton && (
+
+ )}
+
+
+
);
diff --git a/src/components/alert/styles.ts b/src/components/alert/styles.ts
index ae4023aa..a9f8d15c 100644
--- a/src/components/alert/styles.ts
+++ b/src/components/alert/styles.ts
@@ -10,7 +10,7 @@ export const Container = styled.div`
${LayoutMap.absoluteCenter}
padding: 35px;
max-width: 600px;
- min-width: 500px;
+ width: 90vw;
background-color: ${colors.white};
border-radius: 10px;
min-height: 300px;
@@ -35,3 +35,9 @@ export const HeaderBox = styled.div`
width: 100%;
border-bottom: 2px solid ${colors.gray100};
`;
+
+export const ButtonBox = styled.div`
+ ${LayoutMap.displayFlex};
+ justify-content: center;
+ gap : 20px;
+`;
diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx
deleted file mode 100644
index dcbfc5bb..00000000
--- a/src/components/button/index.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ButtonSize, ButtonType } from '@/styles/button';
-import { BoldType } from '@/styles/typography';
-
-import * as S from './styles';
-import { ButtonHTMLAttributes, PropsWithChildren } from 'react';
-
-export interface ButtonProp extends ButtonHTMLAttributes
{
- buttonType?: ButtonType;
- size?: ButtonSize;
- bold?: BoldType;
- leftContent?: React.ReactNode;
- fontSize?: number;
- $active?: boolean;
-}
-
-const Button = ({ leftContent, ...props }: PropsWithChildren) => {
- return (
-
- {leftContent}
-
-
- );
-};
-
-export default Button;
diff --git a/src/components/dropZone/index.tsx b/src/components/dropZone/index.tsx
index 98b37335..c3c5deb5 100644
--- a/src/components/dropZone/index.tsx
+++ b/src/components/dropZone/index.tsx
@@ -3,6 +3,7 @@ import { useDropzone } from 'react-dropzone';
import Icon from '../icon';
import Text from '@/components/Text';
import * as S from './styles';
+import { alertStore } from '@/stores/modal';
interface FileWithPreview extends File {
preview: string;
@@ -16,6 +17,28 @@ interface DropZoneProps {
const DropZone = ({ info, onFileUpload, clearFiles }: DropZoneProps) => {
const [files, setFiles] = useState([]);
+ const open = alertStore((state) => state.open);
+ const checkFileSize = (file: File) => {
+ const MAX_SIZE = 10 * 1024 * 1024; // 10MB
+ if (file.size > MAX_SIZE) {
+ open({
+ title: '등록 불가',
+ description:
+ '파일 크기가 10MB를 초과했습니다. 10MB 이하의 파일만 등록 가능합니다.',
+ buttonLabel: '확인',
+ buttonCancelLabel: '취소',
+ onClickButton: () => {
+ close();
+ },
+ onClickCancelButton: () => {
+ close();
+ },
+ });
+ return false;
+ }
+ return true;
+ };
+
const { getRootProps, getInputProps } = useDropzone({
maxFiles: 1,
accept: {
@@ -24,6 +47,8 @@ const DropZone = ({ info, onFileUpload, clearFiles }: DropZoneProps) => {
'image/jpg': [],
},
onDrop: (acceptedFiles: File[]) => {
+ const validFiles = acceptedFiles.filter(checkFileSize);
+ if (validFiles.length === 0) return;
const previewFiles = acceptedFiles.map((file) =>
Object.assign(file, {
preview: URL.createObjectURL(file),
diff --git a/src/components/icon/index.tsx b/src/components/icon/index.tsx
index bfa03dd2..87db5515 100644
--- a/src/components/icon/index.tsx
+++ b/src/components/icon/index.tsx
@@ -57,7 +57,9 @@ export type IconValues =
| 'info'
| 'couponBackground'
| 'hamburger'
- | 'showFilter';
+ | 'showFilter'
+ | 'triangle'
+ | 'stop' ;
interface IconProps extends HTMLAttributes {
value: IconValues;
@@ -106,6 +108,19 @@ const renderIcon = (
/>
);
+ case 'triangle':
+ return (
+
+ );
+ case 'stop':
+ return (
+
+ );
case 'review':
return (
),
buttonLabel: '확인',
+ buttonCancelLabel:'취소',
onClickButton: () => modalConfirm(data),
+ onClickCancelButton: () => {
+ close();
+ },
});
};
diff --git a/src/pages/review/components/reviewGalleryInfo/styles.ts b/src/pages/review/components/reviewGalleryInfo/styles.ts
index b4cea50b..abf905f9 100644
--- a/src/pages/review/components/reviewGalleryInfo/styles.ts
+++ b/src/pages/review/components/reviewGalleryInfo/styles.ts
@@ -2,36 +2,48 @@ import { containerQuery } from '@/styles/breakpoints';
import { colors } from '@/styles/colorPalette';
import { LayoutMap } from '@/styles/layout';
import styled from '@emotion/styled';
-import { ReivewPageQuerySize } from '../../styles';
+import { reivewPageQuerySize } from '../../styles';
export const Container = styled.div`
${LayoutMap.displayFlex}
max-width: 700px;
- flex: 1;
+ width: 100%;
height: 100%;
border-left: 2px solid ${colors.black};
border-right: 2px solid ${colors.black};
+
justify-content: space-around;
${containerQuery({
- breakpoints: ReivewPageQuerySize.galleryInfo,
+ breakpoints: reivewPageQuerySize.galleryInfo,
containerName: 'gallery-info',
styles: `
border-right: none;
`,
})}
${containerQuery({
- breakpoints: ReivewPageQuerySize.galleryInfoTablet,
+ breakpoints: reivewPageQuerySize.galleryInfoTablet,
containerName: 'gallery-info',
styles: `
border-left: none;
width: 100%
+ padding: 0 20px;
+ `,
+ })}
+ ${containerQuery({
+ breakpoints: reivewPageQuerySize.gridCange,
+ containerName: 'gallery-info',
+ styles: `
+ flex-direction: column;
+ padding: 10px;
+ gap: 10px;
`,
})}
`;
export const InfoBlock = styled.div`
display: flex;
+ width: fit-content;
flex-direction: column;
gap: 10px;
`;
@@ -39,19 +51,34 @@ export const InfoBlock = styled.div`
export const GalleryInfoBox = styled.div`
display: flex;
flex-direction: column;
+
gap: 50px;
-`;
-export const Thumbnail = styled.img`
- width: 250px;
- height: 250px;
+ ${containerQuery({
+ breakpoints: reivewPageQuerySize.gridCange,
+ containerName: 'gallery-info',
+ styles: `
+ flex-direction: row;
+ width: 100%;
+ gap: 0;
+ justify-content: space-around;
+ `,
+ })}
${containerQuery({
- breakpoints: ReivewPageQuerySize.galleryInfoMobile,
+ breakpoints: reivewPageQuerySize.hideRate,
containerName: 'gallery-info',
styles: `
- width: 150px;
- height: 150px;
+ > div:last-of-type {
+ display: none;
+ }
`,
})}
`;
+
+export const Thumbnail = styled.img`
+ width: 100%;
+ max-width: 250px;
+ height: auto;
+ aspect-ratio: 1 / 1;
+`;
diff --git a/src/pages/review/components/reviewInfo/styles.ts b/src/pages/review/components/reviewInfo/styles.ts
index 694237e8..b007ee9b 100644
--- a/src/pages/review/components/reviewInfo/styles.ts
+++ b/src/pages/review/components/reviewInfo/styles.ts
@@ -3,7 +3,7 @@ import { containerQuery } from '@/styles/breakpoints';
import { colors } from '@/styles/colorPalette';
import { LayoutMap } from '@/styles/layout';
import styled from '@emotion/styled';
-import { ReivewPageQuerySize } from '../../styles';
+import { reivewPageQuerySize } from '../../styles';
export const Container = styled.div`
position: relative;
@@ -23,11 +23,11 @@ export const CancelIcon = styled(Icon)`
export const InfoBox = styled.div`
${LayoutMap.displayFlex}
- height: 350px;
+ height: 100%;
width: 100%;
${containerQuery({
- breakpoints: ReivewPageQuerySize.galleryInfoTablet,
+ breakpoints: reivewPageQuerySize.galleryInfoTablet,
containerName: 'gallery-info',
styles: `
flex-direction: column;
@@ -37,7 +37,6 @@ export const InfoBox = styled.div`
export const Line = styled.div`
width: 100vw;
- min-width: 1440px;
border-top: 2px solid ${colors.black};
`;
@@ -50,7 +49,7 @@ export const Title = styled(Text)`
border-bottom: 2px solid ${colors.black};
${containerQuery({
- breakpoints: ReivewPageQuerySize.galleryInfoTablet,
+ breakpoints: reivewPageQuerySize.galleryInfoTablet,
containerName: 'gallery-info',
styles: `
flex-direction: column;
diff --git a/src/pages/review/components/reviewItem/index.tsx b/src/pages/review/components/reviewItem/index.tsx
index aeb55ddb..91bfc794 100644
--- a/src/pages/review/components/reviewItem/index.tsx
+++ b/src/pages/review/components/reviewItem/index.tsx
@@ -1,6 +1,7 @@
-import { NicknameNProfile, StarRate, Text } from '@/components';
-import parseDate from '@/utils/parseDate';
import { Review } from '@/types/review';
+import parseDate from '@/utils/parseDate';
+import { TruncateSentece } from '@/utils/truncateSentence';
+import { NicknameNProfile, StarRate } from '@/components';
import * as S from './styles';
@@ -21,13 +22,15 @@ const ReviewItem = ({
bold="regular"
ellipsis={80}
/>
-
+
+
+
- {content}
+ {TruncateSentece(content, 60)}
-
+
{parseDate(new Date(createAt))}
-
+
);
};
diff --git a/src/pages/review/components/reviewItem/styles.ts b/src/pages/review/components/reviewItem/styles.ts
index aecc13ec..dbb4dd18 100644
--- a/src/pages/review/components/reviewItem/styles.ts
+++ b/src/pages/review/components/reviewItem/styles.ts
@@ -1,13 +1,50 @@
import { Text } from '@/components';
+import { containerQuery } from '@/styles/breakpoints';
import { LayoutMap } from '@/styles/layout';
import styled from '@emotion/styled';
+import { reivewPageQuerySize } from '../../styles';
export const Container = styled.div`
${LayoutMap.displayFlex}
width: 100%;
- gap: 40px;
+
+ container: reivew-item / inline-size;
`;
export const ContentText = styled(Text)`
+ display: flex;
+ padding: 0 20px;
flex: 1;
+ justify-content: center;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ word-break: break-all;
+
+ ${containerQuery({
+ containerName: 'reivew-item',
+ breakpoints: reivewPageQuerySize.reivewItemTablet,
+ styles: `
+ padding: 0;
+ `,
+ })}
+`;
+
+export const StarRateBox = styled.div`
+ ${containerQuery({
+ containerName: 'reivew-item',
+ breakpoints: reivewPageQuerySize.reivewItem,
+ styles: `
+ display: none;
+ `,
+ })}
+`;
+
+export const DateText = styled(Text)`
+ ${containerQuery({
+ containerName: 'reivew-item',
+ breakpoints: reivewPageQuerySize.reivewItemTablet,
+ styles: `
+ display: none;
+ `,
+ })}
`;
diff --git a/src/pages/review/components/reviewList/index.tsx b/src/pages/review/components/reviewList/index.tsx
index f66c4151..b93b90a4 100644
--- a/src/pages/review/components/reviewList/index.tsx
+++ b/src/pages/review/components/reviewList/index.tsx
@@ -4,10 +4,10 @@ import { pageStore } from '@/stores/page';
import { useLayoutEffect } from 'react';
import useGetReviews from '../../hooks/useGetReviews';
import { useParams } from 'react-router-dom';
-import { NoneData, withSuspenseNErrorBoundary } from '@/components';
+import { NoneData, PageButtons, withSuspenseNErrorBoundary } from '@/components';
+import ReviewListFallback from '../fallback/ReviewListFallback';
import * as S from './styles';
-import ReviewListFallback from '../fallback/ReviewListFallback';
const ReviewList = () => {
const { galleryId } = useParams();
@@ -27,11 +27,16 @@ const ReviewList = () => {
return (
- {pages.length === 0 ? (
-
- ) : (
- pages.map(({ reviewId, ...review }) => )
- )}
+
+ {pages.length === 0 ? (
+
+ ) : (
+ pages.map(({ reviewId, ...review }) => (
+
+ ))
+ )}
+
+
);
};
diff --git a/src/pages/review/components/reviewList/styles.ts b/src/pages/review/components/reviewList/styles.ts
index f556bd98..cff11737 100644
--- a/src/pages/review/components/reviewList/styles.ts
+++ b/src/pages/review/components/reviewList/styles.ts
@@ -5,12 +5,18 @@ import styled from '@emotion/styled';
export const Container = styled.div`
${LayoutMap.displayFlex}
flex-direction: column;
- gap: 50px;
- align-items: flex-end;
- width: 100%;
- min-height: 500px;
- padding: 50px 80px;
border-left: 2px solid ${colors.black};
border-right: 2px solid ${colors.black};
+ width: 100%;
+ height: 100%;
+ padding-top: 50px;
+`;
+
+export const ListBox = styled.div`
+ ${LayoutMap.displayFlex}
+ flex-direction: column;
+ width: 100%;
+ gap: 50px;
flex: 1;
+ ${LayoutMap.pageLayout};
`;
diff --git a/src/pages/review/hooks/useGetReviews.ts b/src/pages/review/hooks/useGetReviews.ts
index 31642f86..5b9c3bae 100644
--- a/src/pages/review/hooks/useGetReviews.ts
+++ b/src/pages/review/hooks/useGetReviews.ts
@@ -10,7 +10,7 @@ const useGetReviews = ({
}) => {
return useSuspenseQuery({
queryKey: ['reviews', pageIndex],
- queryFn: () => getReveiws({ galleryId, page: pageIndex, size: 10 }),
+ queryFn: () => getReveiws({ galleryId, page: pageIndex, size: 5 }),
select: (data) => ({
pages: data.pages,
pageParams: data.pageInfo,
diff --git a/src/pages/review/index.tsx b/src/pages/review/index.tsx
index 9fa67f30..c55d4764 100644
--- a/src/pages/review/index.tsx
+++ b/src/pages/review/index.tsx
@@ -1,4 +1,3 @@
-import { PageButtons } from '@/components';
import { ReviewInfo, ReviewList } from './components';
import * as S from './styles';
@@ -8,7 +7,6 @@ const ReviewPage = () => {
-
);
};
diff --git a/src/pages/review/styles.ts b/src/pages/review/styles.ts
index 80744d5d..a24b8139 100644
--- a/src/pages/review/styles.ts
+++ b/src/pages/review/styles.ts
@@ -10,8 +10,12 @@ export const Container = styled.div`
margin: auto;
`;
-export const ReivewPageQuerySize = {
- galleryInfo: 960,
+export const reivewPageQuerySize = {
+ galleryInfo: 905,
galleryInfoTablet: 770,
galleryInfoMobile: 550,
+ reivewItem: 865,
+ reivewItemTablet: 410,
+ gridCange: 450,
+ hideRate: 370,
};
diff --git a/src/pages/signup/components/checkAgree/styles.ts b/src/pages/signup/components/checkAgree/styles.ts
index d0541fd4..44e21062 100644
--- a/src/pages/signup/components/checkAgree/styles.ts
+++ b/src/pages/signup/components/checkAgree/styles.ts
@@ -9,10 +9,11 @@ interface ContainerProps {
export const Container = styled.div
`
${LayoutMap.displayFlex}
position: relative;
- gap: 20px;
- > button {
- position: absolute;
- right: 0;
+ justify-content: space-between;
+
+ > p:nth-of-type(1) {
+ flex: 1;
+ padding-left: 10px;
}
padding-bottom: ${({ isLast, isTotal }) => (isLast ? 0 : isTotal ? '50px' : '20px')};
`;
diff --git a/src/pages/signup/components/signupAgree/index.tsx b/src/pages/signup/components/signupAgree/index.tsx
index 63531fd3..14f89c3d 100644
--- a/src/pages/signup/components/signupAgree/index.tsx
+++ b/src/pages/signup/components/signupAgree/index.tsx
@@ -14,9 +14,10 @@ const SignupAgree = () => {
}, [resetAgreements]);
return (
-
+
약관동의
-
+
+
{agreeInfo.map(({ value, description, ...props }) => {
if (value === 'total')
diff --git a/src/pages/signup/components/signupAgree/styles.ts b/src/pages/signup/components/signupAgree/styles.ts
index 5227130a..88b2ffaf 100644
--- a/src/pages/signup/components/signupAgree/styles.ts
+++ b/src/pages/signup/components/signupAgree/styles.ts
@@ -1,16 +1,18 @@
-import { Text } from '@/components';
import { colors } from '@/styles/colorPalette';
import styled from '@emotion/styled';
export const Container = styled.div`
- width: 600px;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
`;
-export const Title = styled(Text)`
+export const AgreeBox = styled.div`
+ padding: 30px 15px 10px 15px;
+`;
+
+export const Line = styled.div`
width: 100%;
- padding-bottom: 20px;
border-bottom: 1px solid ${colors.white};
-`;
-export const AgreeBox = styled.div`
- padding: 30px 15px;
+ height: 1px;
`;
diff --git a/src/pages/signup/components/signupButtons/index.tsx b/src/pages/signup/components/signupButtons/index.tsx
index a025a6d2..0e725c76 100644
--- a/src/pages/signup/components/signupButtons/index.tsx
+++ b/src/pages/signup/components/signupButtons/index.tsx
@@ -1,8 +1,7 @@
-import { Button } from '@/components';
import { agreeStore } from '@/stores/agree';
+import useCustomNavigate from '@/hooks/useCustomNavigate';
import * as S from './styles';
-import useCustomNavigate from '@/hooks/useCustomNavigate';
interface SignupButtonsProps {
page: string | null;
@@ -13,7 +12,7 @@ const SignupButtons = ({ page }: SignupButtonsProps) => {
const allChecked = agreeStore((state) => state.allChecked);
return (
-
+
{page === '1' ? (
-
+
) : (
-
+
)}
);
diff --git a/src/pages/signup/components/signupButtons/styles.ts b/src/pages/signup/components/signupButtons/styles.ts
index b1d6f0f1..c836a3fa 100644
--- a/src/pages/signup/components/signupButtons/styles.ts
+++ b/src/pages/signup/components/signupButtons/styles.ts
@@ -1,7 +1,21 @@
+import { Button } from '@/components';
import styled from '@emotion/styled';
export const Container = styled.div`
- bottom: 0;
display: flex;
- gap: 40px;
+ width: 100%;
+ justify-content: space-between;
+ gap: 20px;
+
+ @media (max-width: 600px) {
+ flex-direction: column-reverse;
+ align-items: center;
+ gap: 20px;
+ }
+`;
+
+export const StyledButton = styled(Button)`
+ @media (max-width: 600px) {
+ width: 100%;
+ }
`;
diff --git a/src/pages/signup/components/signupForm/index.tsx b/src/pages/signup/components/signupForm/index.tsx
index 6c151dc4..3049929d 100644
--- a/src/pages/signup/components/signupForm/index.tsx
+++ b/src/pages/signup/components/signupForm/index.tsx
@@ -1,8 +1,8 @@
+import { essentiolFormData, optionalFormData } from '@/consts/signup';
+import { RegisterOptions, useFormContext } from 'react-hook-form';
import { SignupFormLayout, SignupTextarea } from '..';
-import { Button, InputField } from '@/components';
import { ExtendedSignupForm } from '@/types/member';
-import { RegisterOptions, useFormContext } from 'react-hook-form';
-import { essentiolFormData, optionalFormData } from '@/consts/signup';
+import { InputField } from '@/components';
import { checkModalStore } from '@/stores/modal';
import { Navigate } from 'react-router-dom';
import SignupCheck from '../signupCheck';
@@ -12,14 +12,16 @@ import * as S from './styles';
const SignupForm = () => {
const open = checkModalStore((state) => state.open);
- useEffect(() => {
- return () => sessionStorage.removeItem('isAgree');
- }, []);
const {
watch,
register,
formState: { errors },
} = useFormContext();
+
+ useEffect(() => {
+ return () => sessionStorage.removeItem('isAgree');
+ }, []);
+
if (!sessionStorage.getItem('isAgree')) return ;
return (
@@ -34,35 +36,28 @@ const SignupForm = () => {
}) => {
if (value === 'email' || value === 'nickname') {
return (
-
-
-
-
+
+ open({
+ title: props.title,
+ content: (
+
+ ),
+ })
+ }
+ />
);
}
if (value === 'passwordConfirm') {
diff --git a/src/pages/signup/components/signupForm/styles.ts b/src/pages/signup/components/signupForm/styles.ts
index 96bd509b..88effc51 100644
--- a/src/pages/signup/components/signupForm/styles.ts
+++ b/src/pages/signup/components/signupForm/styles.ts
@@ -1,40 +1,16 @@
-import { colors } from '@/styles/colorPalette';
-import { LayoutMap } from '@/styles/layout';
import styled from '@emotion/styled';
export const Container = styled.div`
- width: 600px;
+ position: relative;
display: flex;
flex-direction: column;
- position: relative;
+ width: 100%;
gap: 50px;
`;
export const CheckBox = styled.div`
display: flex;
- gap: 60px;
- align-items: end;
- justify-content: space-between;
-`;
-
-export const CheckModalContainer = styled.form`
- ${LayoutMap.displayFlex}
- position: relative;
- align-items: flex-end;
- margin-bottom: 30px;
- padding-bottom: 50px;
- gap: 20px;
-`;
-
-export const CheckModalInput = styled.input`
- border-bottom: 1px solid ${colors.black};
- font-size: 16px;
- padding: 10px;
-`;
-export const CheckInputBox = styled.div`
- ${LayoutMap.displayFlex}
- position: absolute;
- right: 0;
- bottom: 0;
+ width: 100%;
gap: 20px;
+ align-items: end;
`;
diff --git a/src/pages/signup/components/signupFormLayout/styles.ts b/src/pages/signup/components/signupFormLayout/styles.ts
index b56a468f..aa1b5ee2 100644
--- a/src/pages/signup/components/signupFormLayout/styles.ts
+++ b/src/pages/signup/components/signupFormLayout/styles.ts
@@ -1,3 +1,5 @@
import styled from '@emotion/styled';
-export const Container = styled.div``;
+export const Container = styled.div`
+ width: 100%;
+`;
diff --git a/src/pages/signup/components/titleNumber/styles.ts b/src/pages/signup/components/titleNumber/styles.ts
index 14721208..8cb9209a 100644
--- a/src/pages/signup/components/titleNumber/styles.ts
+++ b/src/pages/signup/components/titleNumber/styles.ts
@@ -3,14 +3,14 @@ import styled from '@emotion/styled';
export const Container = styled.div`
position: relative;
+ display: flex;
height: 75px;
width: 55px;
- display: flex;
align-items: end;
justify-content: end;
+
> p {
z-index: var(--lower-zindex);
- margin: 0;
}
`;
diff --git a/src/pages/signup/index.tsx b/src/pages/signup/index.tsx
index dbc33ef8..2af46230 100644
--- a/src/pages/signup/index.tsx
+++ b/src/pages/signup/index.tsx
@@ -16,23 +16,25 @@ const SignupPage = () => {
});
const { mutate: signup, isPending } = usePostSingup({ reset: () => methods.reset() });
const onSubmit = async (data: ExtendedSignupForm) => {
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
const { passwordConfirm, ...formData } = data;
signup(formData);
};
+
return (
-
-
-
- 회원가입
-
-
- {page === '2' ? : }
-
- {isPending && }
+
+
+
+
+ 회원가입
+
+
+ {page === '2' ? : }
+
+
+ {isPending && }
);
diff --git a/src/pages/signup/styles.ts b/src/pages/signup/styles.ts
index 49646366..ab28cab2 100644
--- a/src/pages/signup/styles.ts
+++ b/src/pages/signup/styles.ts
@@ -1,41 +1,41 @@
import { Text } from '@/components';
+import { mediaQueries } from '@/styles/breakpoints';
import { colors } from '@/styles/colorPalette';
+import { LayoutMap } from '@/styles/layout';
import styled from '@emotion/styled';
export const Container = styled.form`
background-color: ${colors.black100};
- width: 100vw;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
- color: ${colors.white};
- gap: 50px;
+ padding-top: 20px;
+ padding-bottom: 20px;
`;
-export const SignupFormBox = styled.div`
- width: 600px;
+
+export const SignupBox = styled.div`
+ ${LayoutMap.pageLayout}
+ color: ${colors.white};
display: flex;
flex-direction: column;
- position: relative;
- gap: 50px;
+ gap: 20px;
+ width: 100vw;
+ max-width: 660px;
`;
-export const TitleBox = styled.div`
- width: 600px;
- display: flex;
- flex-direction: column;
+
+export const TitleBlock = styled.div`
position: relative;
- gap: 50px;
+ display: flex;
+ justify-content: space-between;
+ padding-bottom: 60px;
`;
export const Title = styled(Text)`
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
-`;
+ transform: translateX(-65%);
-export const ButtonBox = styled.div`
- bottom: 0;
- display: flex;
- gap: 40px;
+ ${mediaQueries.mobile(`
+ transform: translateX(0);
+ `)}
`;
diff --git a/src/routes/index.ts b/src/routes/index.ts
index 2708a731..87bc216d 100644
--- a/src/routes/index.ts
+++ b/src/routes/index.ts
@@ -14,6 +14,7 @@ import {
FailPage,
EventPage,
InfoPage,
+ ContactPage,
} from '@/pages';
interface RouteInfo {
@@ -42,6 +43,7 @@ export const routes: RouteInfo[] = [
withAuth: true,
},
{ path: '/info/:galleryId', Element: InfoPage },
+ { path: '/contact', Element: ContactPage, withNav: true },
{ path: '/payment/success/:galleryId/:order', Element: SuccessPage, withAuth: true },
{ path: '/payment/fail', Element: FailPage, withAuth: true },
{ path: '*', Element: ErrorPage },
diff --git a/src/stores/modal.ts b/src/stores/modal.ts
index de527679..8bc6532a 100644
--- a/src/stores/modal.ts
+++ b/src/stores/modal.ts
@@ -28,6 +28,10 @@ export const alertStore = create((set, get) => ({
form.onClickButton?.();
get().close();
},
+ onClickCancelButton: form.onClickCancelButton ? () => {
+ form.onClickCancelButton?.();
+ get().close();
+ } : undefined,
open: true,
},
})),
@@ -177,3 +181,13 @@ export const LoginModalStore = create((set) => ({
open: () => set({ value: { open: true } }),
close: () => set({ value: { open: false } }),
}));
+
+const categoryModalDefalutValue = {
+ open: false,
+};
+
+export const categoryModalStore = create((set) => ({
+ value: categoryModalDefalutValue,
+ open: () => set({ value: { open: true } }),
+ close: () => set({ value: { open: false } }),
+}));
diff --git a/src/styles/breakpoints.ts b/src/styles/breakpoints.ts
index 24ed4043..3f0a6fca 100644
--- a/src/styles/breakpoints.ts
+++ b/src/styles/breakpoints.ts
@@ -24,7 +24,7 @@ export const mediaQueries = {
`,
};
-// 달력있는부분 거기만 설정해도 된다는 느낌 함수로 나와야될 것 같아요
+// 컨테이너 쿼리 함수
export const containerQuery = ({
containerName,
diff --git a/src/styles/button.ts b/src/styles/button.ts
index d6623430..a3591ee5 100644
--- a/src/styles/button.ts
+++ b/src/styles/button.ts
@@ -65,6 +65,7 @@ export const buttonTypeMap = {
color: ${colors.white};
`,
rectangleGray: css`
+ border: 1px solid ${colors.gray200};
background-color: ${colors.gray200};
color: ${colors.gray500};
`,
@@ -107,6 +108,12 @@ export const buttonTypeMap = {
color: ${colors.gray500};
border-radius: 10px;
`,
+ reverseCancelRadius: css`
+ background-color: ${colors.white};
+ border: 2px solid ${colors.gray300};
+ color: ${colors.gray300};
+ border-radius: 10px;
+ `,
onlyText: css`
background-color: inherit;
color: ${colors.white};
@@ -156,6 +163,17 @@ export const buttonActiveMap = {
transform: scale(0.9);
}
`,
+ reverseCancelRadius: css`
+ :hover {
+ background-color: ${colors.gray100};
+ color: ${colors.gray300};
+ }
+ :active {
+ background-color: ${colors.gray100};
+ color: ${colors.gray300};
+ transform: scale(0.9);
+ }
+ `,
reverseRectangleGray: css`
:hover {
background-color: ${colors.gray200};
diff --git a/src/styles/globalFontSize.ts b/src/styles/globalFontSize.ts
new file mode 100644
index 00000000..32fe7170
--- /dev/null
+++ b/src/styles/globalFontSize.ts
@@ -0,0 +1,8 @@
+import { css } from '@emotion/react';
+import { mediaQueries } from './breakpoints';
+
+export const globalFontSize = css`
+ ${mediaQueries.mobile(`
+ font-size: 12px;
+ `)}
+`;
diff --git a/src/styles/globalStyles.ts b/src/styles/globalStyles.ts
index bbf3c341..0d16366c 100644
--- a/src/styles/globalStyles.ts
+++ b/src/styles/globalStyles.ts
@@ -1,10 +1,12 @@
import { css } from '@emotion/react';
-import { colorPalette } from './colorPalette';
import { fontStyles } from './fonts';
+import { colorPalette } from './colorPalette';
+import { globalFontSize } from './globalFontSize';
export default css`
${fontStyles}
${colorPalette}
+
:root {
--background-zindex: -1;
--lower-zindex: 1;
@@ -24,7 +26,9 @@ export default css`
pointer-events: none;
}
- html,
+ html {
+ ${globalFontSize}
+ }
body,
span,
applet,
@@ -148,6 +152,7 @@ export default css`
border-spacing: 0;
}
button {
+ box-sizing: border-box;
border: none;
margin: 0;
padding: 0;
@@ -169,6 +174,9 @@ export default css`
:focus {
outline: none;
}
+ ::-ms-reveal {
+ display: none;
+ }
}
textarea {
all: unset;
diff --git a/src/styles/typography.ts b/src/styles/typography.ts
index 78cd0525..08f84943 100644
--- a/src/styles/typography.ts
+++ b/src/styles/typography.ts
@@ -5,7 +5,7 @@ export const typographyMap = {
font-size: 56px;
`,
t1: css`
- font-size: 36px;
+ font-size: 2.25rem;
`,
t2: css`
font-size: 32px;
@@ -14,7 +14,7 @@ export const typographyMap = {
font-size: 28px;
`,
t4: css`
- font-size: 24px;
+ font-size: 1.5rem;
`,
t5: css`
font-size: 20px;
diff --git a/src/utils/hasInvited.ts b/src/utils/hasInvited.ts
new file mode 100644
index 00000000..3948c8e0
--- /dev/null
+++ b/src/utils/hasInvited.ts
@@ -0,0 +1,16 @@
+const hasInvited = () => {
+ const getExpiration = () => {
+ const now = new Date();
+ return new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000);
+ };
+
+ const items = {
+ invited: true,
+ expiration: getExpiration(),
+ };
+ const setInvited = localStorage.setItem('invited', JSON.stringify(items));
+
+ return { setInvited };
+};
+
+export default hasInvited;