Skip to content

Commit

Permalink
Merge pull request #446 from codestates-seb/fe/feat/RefactoringAlert#435
Browse files Browse the repository at this point in the history 
[FE] alert, confirm 커스텀 모달창 리팩토링
  • Loading branch information
@HyerimKimm
HyerimKimm authored Sep 19, 2023
2 parents 3db5017 + 532bdff commit ca92e6c
Show file tree
Hide file tree
Showing 13 changed files with 1,162 additions and 770 deletions.
68 changes: 51 additions & 17 deletions client/src/atoms/buttons/ListToggle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,16 @@ import { useSelector } from "react-redux";
import { styled } from "styled-components";
import tokens from "../../styles/tokens.json";
import axios from "axios";
import { AlertModal } from "../modal/Modal";

const ListToggle = ({ OnOff, videoId }) => {
const isDark = useSelector((state) => state.uiSetting.isDark);
const token = useSelector((state) => state.loginInfo.accessToken);
const [isOnOff, setOnOff] = useState(OnOff);
const [isModalOpen, setIsModalOpen] = useState({
isModalOpen: false,
content: "",
});

const patchVideoStatus = () => {
return axios
Expand All @@ -17,27 +22,53 @@ const ListToggle = ({ OnOff, videoId }) => {
.then((res) => {
setOnOff(!res.data.data);
if (res.data.data) {
alert("강의를 활성화 했습니다.");
setIsModalOpen({
...isModalOpen,
isModalOpen: true,
content: "강의를 활성화 했습니다.",
});
} else {
alert("강의를 비활성화 했습니다.");
setIsModalOpen({
...isModalOpen,
isModalOpen: true,
content: "강의를 비활성화 했습니다.",
});
}
})
.catch((err) => {
console.log(err);
alert("강의 비활성화를 실패했습니다.");
setIsModalOpen({
...isModalOpen,
isModalOpen: true,
content: "강의 비활성화를 실패했습니다.",
});
});
};

return (
<ToggleWrapper
onClick={() => {
patchVideoStatus();
}}
>
<ToggleContainer isDark={isDark} isOnOff={isOnOff}>
<ToggleCircle isOnOff={isOnOff} />
</ToggleContainer>
</ToggleWrapper>
<>
<ToggleWrapper
onClick={() => {
patchVideoStatus();
}}
>
<ToggleContainer isDark={isDark} isOnOff={isOnOff}>
<ToggleCircle isOnOff={isOnOff} />
</ToggleContainer>
</ToggleWrapper>
<AlertModal
isModalOpen={isModalOpen.isModalOpen}
setIsModalOpen={setIsModalOpen}
isBackdropClickClose={false}
content={isModalOpen.content}
buttonTitle="확인"
handleButtonClick={() =>
setIsModalOpen({
...isModalOpen,
isModalOpen: false,
})
}
/>
</>
);
};

Expand All @@ -56,10 +87,13 @@ export const ToggleContainer = styled.div`
top: 0;
left: 0; // "rgba(24,35,51,0.7)"
background-color: ${(props) =>
props.isDark && !props.isOnOff ? globalTokens.LightNavy.value
: !props.isDark && !props.isOnOff ? globalTokens.Negative.value
: props.isDark && props.isOnOff ? 'rgba(255,255,255,0.1)'
: 'rgba(0,0,0,0.15)'};
props.isDark && !props.isOnOff
? globalTokens.LightNavy.value
: !props.isDark && !props.isOnOff
? globalTokens.Negative.value
: props.isDark && props.isOnOff
? "rgba(255,255,255,0.1)"
: "rgba(0,0,0,0.15)"};
border-radius: ${globalTokens.BigRadius.value}px;
width: 48px;
height: 24px;
Expand Down
253 changes: 141 additions & 112 deletions client/src/atoms/modal/Modal.js
View file
Original file line number Diff line number Diff line change
@@ -1,124 +1,153 @@
import React from 'react';
import { styled } from 'styled-components';
import tokens from '../../styles/tokens.json';
import { useDispatch, useSelector } from 'react-redux';
import { BodyTextTypo } from '../typographys/Typographys'
import { NegativeTextButton, PositiveTextButton } from '../buttons/Buttons';
import { useSelector } from "react-redux";
import { styled } from "styled-components";
import tokens from "../../styles/tokens.json";
import { BodyTextTypo } from "../typographys/Typographys";
import { NegativeTextButton, PositiveTextButton } from "../buttons/Buttons";

const globalTokens = tokens.global;

export const ModalBackdrop = styled.div`
width: 100vw;
height: 100vh;
position: fixed;
z-index: 1001;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: ${(props)=>props.isDark?'rgba(255, 255, 255, 0.25)':'rgba(0, 0, 0, 0.25)'};
opacity: ${(props) => (props.isModalOpen ? `1` : `0`)};
visibility: ${(props) => (props.isModalOpen ? "visible" : "hidden")};
`
export const ModalContainer = styled.div`
width: 320px;
height: 150px;
padding: ${globalTokens.Spacing20.value}px ${globalTokens.Spacing8.value}px;
background-color: ${(props)=>props.isDark?globalTokens.Black.value:globalTokens.White.value};
border-radius: ${globalTokens.BigRadius.value}px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`
export const ModalContent = styled(BodyTextTypo)`
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`
export const ModalButtonContainer = styled.div`
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: start;
`
export const ModalPositiveButton = styled(PositiveTextButton)`
margin: ${globalTokens.Spacing4.value}px;
padding: 0 ${globalTokens.Spacing24.value}px;
`
export const ModalNegativeButton = styled(NegativeTextButton)`
margin: ${globalTokens.Spacing4.value}px;
padding: 0 ${globalTokens.Spacing24.value}px;
`
//예, 아니오를 선택하는 모달
export const ConfirmModal = ({
isModalOpen,
setIsModalOpen,
isBackdropClickClose,
content,
negativeButtonTitle,
positiveButtonTitle,
handleNegativeButtonClick,
handlePositiveButtonClick,
isModalOpen,
setIsModalOpen,
isBackdropClickClose,
content,
negativeButtonTitle,
positiveButtonTitle,
handleNegativeButtonClick,
handlePositiveButtonClick,
}) => {
const isDark = useSelector(state=>state.uiSetting.isDark);
const isDark = useSelector((state) => state.uiSetting.isDark);

return (
<ModalBackdrop
isModalOpen={isModalOpen}
return (
<ModalBackdrop
isModalOpen={isModalOpen}
isDark={isDark}
onClick={() => {
isBackdropClickClose && setIsModalOpen(false);
}}
>
<ModalContainer
isDark={isDark}
onClick={(e) => {
e.stopPropagation();
}}
>
<ModalContent isDark={isDark}>{content}</ModalContent>
<ModalButtonContainer>
<ModalPositiveButton
isDark={isDark}
onClick={(e) => {
handlePositiveButtonClick();
}}
>
{positiveButtonTitle}
</ModalPositiveButton>
<ModalNegativeButton
isDark={isDark}
onClick={()=>{ isBackdropClickClose && setIsModalOpen(false) }}>
<ModalContainer isDark={isDark} onClick={(e)=>{e.stopPropagation();}}>
<ModalContent isDark={isDark}>{content}</ModalContent>
<ModalButtonContainer>
<ModalNegativeButton isDark={isDark}
onClick={(e)=>{
handleNegativeButtonClick();
}}>
{negativeButtonTitle}
</ModalNegativeButton>
<ModalPositiveButton isDark={isDark}
onClick={(e)=>{
handlePositiveButtonClick();
}}>
{positiveButtonTitle}
</ModalPositiveButton>
</ModalButtonContainer>
</ModalContainer>
</ModalBackdrop>
);
onClick={(e) => {
handleNegativeButtonClick();
}}
>
{negativeButtonTitle}
</ModalNegativeButton>
</ModalButtonContainer>
</ModalContainer>
</ModalBackdrop>
);
};

//확인 버튼만 있는 모달
export const AlertModal = ({
isModalOpen,
setIsModalOpen,
isBackdropClickClose,
content,
buttonTitle,
handleButtonClick,
isModalOpen,
setIsModalOpen,
isBackdropClickClose,
content,
buttonTitle,
handleButtonClick,
}) => {
const isDark = useSelector(state=>state.uiSetting.isDark);
const isDark = useSelector((state) => state.uiSetting.isDark);

return (
<ModalBackdrop
isModalOpen={isModalOpen}
return (
<ModalBackdrop
isModalOpen={isModalOpen}
isDark={isDark}
onClick={() => {
isBackdropClickClose && setIsModalOpen(false);
}}
>
<ModalContainer
isDark={isDark}
onClick={(e) => {
e.stopPropagation();
}}
>
<ModalContent isDark={isDark}>{content}</ModalContent>
<ModalButtonContainer>
<ModalPositiveButton
type="button"
isDark={isDark}
onClick={()=>{ isBackdropClickClose && setIsModalOpen(false) }}>
<ModalContainer isDark={isDark} onClick={(e)=>{e.stopPropagation();}}>
<ModalContent isDark={isDark}>{content}</ModalContent>
<ModalButtonContainer>
<ModalPositiveButton
type='button'
isDark={isDark}
onClick={handleButtonClick}>
{buttonTitle}
</ModalPositiveButton>
</ModalButtonContainer>
</ModalContainer>
</ModalBackdrop>
);
}
onClick={handleButtonClick}
>
{buttonTitle}
</ModalPositiveButton>
</ModalButtonContainer>
</ModalContainer>
</ModalBackdrop>
);
};

const globalTokens = tokens.global;

export const ModalBackdrop = styled.div`
width: 100vw;
height: 100vh;
position: fixed;
z-index: 1001;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: ${(props) =>
props.isDark ? "rgba(255, 255, 255, 0.25)" : "rgba(0, 0, 0, 0.25)"};
opacity: ${(props) => (props.isModalOpen ? `1` : `0`)};
visibility: ${(props) => (props.isModalOpen ? "visible" : "hidden")};
`;

export const ModalContainer = styled.div`
width: 320px;
height: 150px;
padding: ${globalTokens.Spacing20.value}px ${globalTokens.Spacing8.value}px;
background-color: ${(props) =>
props.isDark ? globalTokens.Black.value : globalTokens.White.value};
border-radius: ${globalTokens.BigRadius.value}px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`;

export const ModalContent = styled(BodyTextTypo)`
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`;

export const ModalButtonContainer = styled.div`
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: start;
`;

export const ModalPositiveButton = styled(PositiveTextButton)`
margin: ${globalTokens.Spacing4.value}px;
padding: 0 ${globalTokens.Spacing24.value}px;
`;

export const ModalNegativeButton = styled(NegativeTextButton)`
margin: ${globalTokens.Spacing4.value}px;
padding: 0 ${globalTokens.Spacing24.value}px;
`;
Loading

0 comments on commit ca92e6c

Please sign in to comment.