Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ Feat ] Default 모달, FullBtn 모달 반응형 #490

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
+51 −9
Open

[ Feat ] Default 모달, FullBtn 모달 반응형 #490

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 27 additions & 5 deletions src/components/commons/modal/DefaultModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import alertDeletePng from '/src/assets/images/alertDelete.png';

import React from 'react';
import { MODAL_SIZES } from './constants';
import { MOBILE_MEDIA_QUERY } from '../../../styles/mediaQuery';

interface ModalPropType {
isModalOpen: boolean;
Expand Down Expand Up @@ -57,15 +58,15 @@ export const DefaultModal = (props: ModalPropType) => {
const getModalImg = () => {
switch (modalImg) {
case 'POST':
return <img src={alertUploadPng} />;
return <ModalImg src={alertUploadPng} />;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P3) 사소한 부분이지만 alt 속성 추가해서 어떤 이미지인지 알려주면 좋을 것 같슴니다 !

case 'SAVE':
return <img src={alertStoragePng} />;
return <ModalImg src={alertStoragePng} />;
case 'CAUTION':
return <img src={alertCautionPng} />;
return <ModalImg src={alertCautionPng} />;
case 'EDIT':
return <img src={alertModifyPng} />;
return <ModalImg src={alertModifyPng} />;
case 'DELETE':
return <img src={alertDeletePng} />;
return <ModalImg src={alertDeletePng} />;
}
};

Expand Down Expand Up @@ -134,6 +135,10 @@ const ModalBtn = styled.button<{ $isLeft: boolean }>`
background-color: ${({ theme }) => theme.colors.mileViolet};
border: ${({ $isLeft }) => ($isLeft ? '1px solid theme.colors.mainViolet' : 'none')};
}

@media ${MOBILE_MEDIA_QUERY} {
${({ theme }) => theme.fonts.mButton1};
}
`;

const ModalWrapper = styled.div<{ $sizeType: string }>`
Expand All @@ -159,6 +164,11 @@ const ModalWrapper = styled.div<{ $sizeType: string }>`

background-color: ${({ theme }) => theme.colors.white};
border-radius: 10px;

@media ${MOBILE_MEDIA_QUERY} {
width: 33.5rem;
padding: 3.2rem;
}
`;

const BtnWrapper = styled.div`
Expand All @@ -172,5 +182,17 @@ const Content = styled.p`
color: ${({ theme }) => theme.colors.gray100};
white-space: pre-wrap;
text-align: center;
word-break: keep-all;
${({ theme }) => theme.fonts.title8};

@media ${MOBILE_MEDIA_QUERY} {
${({ theme }) => theme.fonts.mTitle1};
}
`;

const ModalImg = styled.img`
@media ${MOBILE_MEDIA_QUERY} {
width: 14rem;
height: 12.3rem;
}
`;
16 changes: 16 additions & 0 deletions src/components/commons/modal/FullModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import React from 'react';
import { createPortal } from 'react-dom';

import Spacing from '../Spacing';
import { MOBILE_MEDIA_QUERY } from '../../../styles/mediaQuery';

interface FullModalBtnPropType {
isPrimary: boolean;
Expand Down Expand Up @@ -82,13 +83,22 @@ const ModalWrapper = styled.div`

background-color: ${({ theme }) => theme.colors.white};
border-radius: 10px;

@media ${MOBILE_MEDIA_QUERY} {
width: 33.5rem;
padding: 3.2rem;
}
`;

const Content = styled.p`
color: ${({ theme }) => theme.colors.gray100};
white-space: pre-wrap;
text-align: center;
${({ theme }) => theme.fonts.title8};

@media ${MOBILE_MEDIA_QUERY} {
${({ theme }) => theme.fonts.mSubtitle4};
}
`;

const BtnWrapper = styled.div`
Expand Down Expand Up @@ -121,4 +131,10 @@ const ModalBtn = styled.button<{ $isPrimary: boolean }>`
background-color: ${({ theme }) => theme.colors.mileViolet};
border: ${({ $isPrimary }) => ($isPrimary ? '1px solid theme.colors.mainViolet' : 'none')};
}

@media ${MOBILE_MEDIA_QUERY} {
width: 27.1rem;

${({ theme }) => theme.fonts.mButton1};
}
`;
4 changes: 4 additions & 0 deletions src/components/commons/modal/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,7 @@ export const MODAL_SIZES = {
LARGE: '44.2rem',
DEFAULT: '40rem',
};

export const MOBILE_MODAL_SIZES = {
DEFAULT: '33.5rem'
}
8 changes: 4 additions & 4 deletions src/pages/admin/constants/modal.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
export const MODAL = {
DELETE_MEMBER:
'삭제 시, 해당 멤버와 해당 멤버가 작성한\n글과 댓글도 모두 삭제됩니다. 계속 하시겠습니까?',
'삭제 시, 해당 멤버와 해당 멤버가 작성한 글과 댓글도 모두 삭제됩니다. 계속 하시겠습니까?',
DELETE_GROUP:
'글모임 삭제 시 모임 내 모든 데이터가 삭제되며\n다시 복구할 수 없습니다. 그래도 계속하시겠습니까?',
'글모임 삭제 시 모임 내 모든 데이터가 삭제되며 다시 복구할 수 없습니다. 그래도 계속하시겠습니까?',
DELETE_TOPIC:
'삭제 시, 해당 글감으로 작성된 글도 함께 삭제되며,\n삭제된 글감은 복구할 수 없습니다.\n계속 하시겠습니까?',
PAGE_EXIT_WARN:`입력 중인 내용이 있습니다. \n페이지를 나가시겠습니까?`,
'삭제 시, 해당 글감으로 작성된 글도 함께 삭제되며, 삭제된 글감은 복구할 수 없습니다. 계속 하시겠습니까?',
PAGE_EXIT_WARN: `입력 중인 내용이 있습니다. \n페이지를 나가시겠습니까?`,
};
Loading