Skip to content

Commit ca92e6c

Browse files
HyerimKimmHyerimKimm
authored
Merge pull request #446 from codestates-seb/fe/feat/RefactoringAlert#435
[FE] alert, confirm 커스텀 모달창 리팩토링
2 parents 3db5017 + 532bdff commit ca92e6c

File tree

13 files changed

+1162
-770
lines changed

13 files changed

+1162
-770
lines changed

‎client/src/atoms/buttons/ListToggle.js

Lines changed: 51 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,16 @@ import { useSelector } from "react-redux";
33
import { styled } from "styled-components";
44
import tokens from "../../styles/tokens.json";
55
import axios from "axios";
6+
import { AlertModal } from "../modal/Modal";
67

78
const ListToggle = ({ OnOff, videoId }) => {
89
const isDark = useSelector((state) => state.uiSetting.isDark);
910
const token = useSelector((state) => state.loginInfo.accessToken);
1011
const [isOnOff, setOnOff] = useState(OnOff);
12+
const [isModalOpen, setIsModalOpen] = useState({
13+
isModalOpen: false,
14+
content: "",
15+
});
1116

1217
const patchVideoStatus = () => {
1318
return axios
@@ -17,27 +22,53 @@ const ListToggle = ({ OnOff, videoId }) => {
1722
.then((res) => {
1823
setOnOff(!res.data.data);
1924
if (res.data.data) {
20-
alert("강의를 활성화 했습니다.");
25+
setIsModalOpen({
26+
...isModalOpen,
27+
isModalOpen: true,
28+
content: "강의를 활성화 했습니다.",
29+
});
2130
} else {
22-
alert("강의를 비활성화 했습니다.");
31+
setIsModalOpen({
32+
...isModalOpen,
33+
isModalOpen: true,
34+
content: "강의를 비활성화 했습니다.",
35+
});
2336
}
2437
})
2538
.catch((err) => {
26-
console.log(err);
27-
alert("강의 비활성화를 실패했습니다.");
39+
setIsModalOpen({
40+
...isModalOpen,
41+
isModalOpen: true,
42+
content: "강의 비활성화를 실패했습니다.",
43+
});
2844
});
2945
};
3046

3147
return (
32-
<ToggleWrapper
33-
onClick={() => {
34-
patchVideoStatus();
35-
}}
36-
>
37-
<ToggleContainer isDark={isDark} isOnOff={isOnOff}>
38-
<ToggleCircle isOnOff={isOnOff} />
39-
</ToggleContainer>
40-
</ToggleWrapper>
48+
<>
49+
<ToggleWrapper
50+
onClick={() => {
51+
patchVideoStatus();
52+
}}
53+
>
54+
<ToggleContainer isDark={isDark} isOnOff={isOnOff}>
55+
<ToggleCircle isOnOff={isOnOff} />
56+
</ToggleContainer>
57+
</ToggleWrapper>
58+
<AlertModal
59+
isModalOpen={isModalOpen.isModalOpen}
60+
setIsModalOpen={setIsModalOpen}
61+
isBackdropClickClose={false}
62+
content={isModalOpen.content}
63+
buttonTitle="확인"
64+
handleButtonClick={() =>
65+
setIsModalOpen({
66+
...isModalOpen,
67+
isModalOpen: false,
68+
})
69+
}
70+
/>
71+
</>
4172
);
4273
};
4374

@@ -56,10 +87,13 @@ export const ToggleContainer = styled.div`
5687
top: 0;
5788
left: 0; // "rgba(24,35,51,0.7)"
5889
background-color: ${(props) =>
59-
props.isDark && !props.isOnOff ? globalTokens.LightNavy.value
60-
: !props.isDark && !props.isOnOff ? globalTokens.Negative.value
61-
: props.isDark && props.isOnOff ? 'rgba(255,255,255,0.1)'
62-
: 'rgba(0,0,0,0.15)'};
90+
props.isDark && !props.isOnOff
91+
? globalTokens.LightNavy.value
92+
: !props.isDark && !props.isOnOff
93+
? globalTokens.Negative.value
94+
: props.isDark && props.isOnOff
95+
? "rgba(255,255,255,0.1)"
96+
: "rgba(0,0,0,0.15)"};
6397
border-radius: ${globalTokens.BigRadius.value}px;
6498
width: 48px;
6599
height: 24px;

‎client/src/atoms/modal/Modal.js

Lines changed: 141 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -1,124 +1,153 @@
1-
import React from 'react';
2-
import { styled } from 'styled-components';
3-
import tokens from '../../styles/tokens.json';
4-
import { useDispatch, useSelector } from 'react-redux';
5-
import { BodyTextTypo } from '../typographys/Typographys'
6-
import { NegativeTextButton, PositiveTextButton } from '../buttons/Buttons';
1+
import { useSelector } from "react-redux";
2+
import { styled } from "styled-components";
3+
import tokens from "../../styles/tokens.json";
4+
import { BodyTextTypo } from "../typographys/Typographys";
5+
import { NegativeTextButton, PositiveTextButton } from "../buttons/Buttons";
76

8-
const globalTokens = tokens.global;
9-
10-
export const ModalBackdrop = styled.div`
11-
width: 100vw;
12-
height: 100vh;
13-
position: fixed;
14-
z-index: 1001;
15-
top: 0;
16-
left: 0;
17-
display: flex;
18-
flex-direction: column;
19-
justify-content: center;
20-
align-items: center;
21-
background-color: ${(props)=>props.isDark?'rgba(255, 255, 255, 0.25)':'rgba(0, 0, 0, 0.25)'};
22-
opacity: ${(props) => (props.isModalOpen ? `1` : `0`)};
23-
visibility: ${(props) => (props.isModalOpen ? "visible" : "hidden")};
24-
`
25-
export const ModalContainer = styled.div`
26-
width: 320px;
27-
height: 150px;
28-
padding: ${globalTokens.Spacing20.value}px ${globalTokens.Spacing8.value}px;
29-
background-color: ${(props)=>props.isDark?globalTokens.Black.value:globalTokens.White.value};
30-
border-radius: ${globalTokens.BigRadius.value}px;
31-
display: flex;
32-
flex-direction: column;
33-
justify-content: center;
34-
align-items: center;
35-
`
36-
export const ModalContent = styled(BodyTextTypo)`
37-
flex-grow: 1;
38-
display: flex;
39-
flex-direction: column;
40-
justify-content: center;
41-
align-items: center;
42-
`
43-
export const ModalButtonContainer = styled.div`
44-
display: flex;
45-
flex-direction: row;
46-
justify-content: space-around;
47-
align-items: start;
48-
`
49-
export const ModalPositiveButton = styled(PositiveTextButton)`
50-
margin: ${globalTokens.Spacing4.value}px;
51-
padding: 0 ${globalTokens.Spacing24.value}px;
52-
`
53-
export const ModalNegativeButton = styled(NegativeTextButton)`
54-
margin: ${globalTokens.Spacing4.value}px;
55-
padding: 0 ${globalTokens.Spacing24.value}px;
56-
`
577
//예, 아니오를 선택하는 모달
588
export const ConfirmModal = ({
59-
isModalOpen,
60-
setIsModalOpen,
61-
isBackdropClickClose,
62-
content,
63-
negativeButtonTitle,
64-
positiveButtonTitle,
65-
handleNegativeButtonClick,
66-
handlePositiveButtonClick,
9+
isModalOpen,
10+
setIsModalOpen,
11+
isBackdropClickClose,
12+
content,
13+
negativeButtonTitle,
14+
positiveButtonTitle,
15+
handleNegativeButtonClick,
16+
handlePositiveButtonClick,
6717
}) => {
68-
const isDark = useSelector(state=>state.uiSetting.isDark);
18+
const isDark = useSelector((state) => state.uiSetting.isDark);
6919

70-
return (
71-
<ModalBackdrop
72-
isModalOpen={isModalOpen}
20+
return (
21+
<ModalBackdrop
22+
isModalOpen={isModalOpen}
23+
isDark={isDark}
24+
onClick={() => {
25+
isBackdropClickClose && setIsModalOpen(false);
26+
}}
27+
>
28+
<ModalContainer
29+
isDark={isDark}
30+
onClick={(e) => {
31+
e.stopPropagation();
32+
}}
33+
>
34+
<ModalContent isDark={isDark}>{content}</ModalContent>
35+
<ModalButtonContainer>
36+
<ModalPositiveButton
37+
isDark={isDark}
38+
onClick={(e) => {
39+
handlePositiveButtonClick();
40+
}}
41+
>
42+
{positiveButtonTitle}
43+
</ModalPositiveButton>
44+
<ModalNegativeButton
7345
isDark={isDark}
74-
onClick={()=>{ isBackdropClickClose && setIsModalOpen(false) }}>
75-
<ModalContainer isDark={isDark} onClick={(e)=>{e.stopPropagation();}}>
76-
<ModalContent isDark={isDark}>{content}</ModalContent>
77-
<ModalButtonContainer>
78-
<ModalNegativeButton isDark={isDark}
79-
onClick={(e)=>{
80-
handleNegativeButtonClick();
81-
}}>
82-
{negativeButtonTitle}
83-
</ModalNegativeButton>
84-
<ModalPositiveButton isDark={isDark}
85-
onClick={(e)=>{
86-
handlePositiveButtonClick();
87-
}}>
88-
{positiveButtonTitle}
89-
</ModalPositiveButton>
90-
</ModalButtonContainer>
91-
</ModalContainer>
92-
</ModalBackdrop>
93-
);
46+
onClick={(e) => {
47+
handleNegativeButtonClick();
48+
}}
49+
>
50+
{negativeButtonTitle}
51+
</ModalNegativeButton>
52+
</ModalButtonContainer>
53+
</ModalContainer>
54+
</ModalBackdrop>
55+
);
9456
};
57+
9558
//확인 버튼만 있는 모달
9659
export const AlertModal = ({
97-
isModalOpen,
98-
setIsModalOpen,
99-
isBackdropClickClose,
100-
content,
101-
buttonTitle,
102-
handleButtonClick,
60+
isModalOpen,
61+
setIsModalOpen,
62+
isBackdropClickClose,
63+
content,
64+
buttonTitle,
65+
handleButtonClick,
10366
}) => {
104-
const isDark = useSelector(state=>state.uiSetting.isDark);
67+
const isDark = useSelector((state) => state.uiSetting.isDark);
10568

106-
return (
107-
<ModalBackdrop
108-
isModalOpen={isModalOpen}
69+
return (
70+
<ModalBackdrop
71+
isModalOpen={isModalOpen}
72+
isDark={isDark}
73+
onClick={() => {
74+
isBackdropClickClose && setIsModalOpen(false);
75+
}}
76+
>
77+
<ModalContainer
78+
isDark={isDark}
79+
onClick={(e) => {
80+
e.stopPropagation();
81+
}}
82+
>
83+
<ModalContent isDark={isDark}>{content}</ModalContent>
84+
<ModalButtonContainer>
85+
<ModalPositiveButton
86+
type="button"
10987
isDark={isDark}
110-
onClick={()=>{ isBackdropClickClose && setIsModalOpen(false) }}>
111-
<ModalContainer isDark={isDark} onClick={(e)=>{e.stopPropagation();}}>
112-
<ModalContent isDark={isDark}>{content}</ModalContent>
113-
<ModalButtonContainer>
114-
<ModalPositiveButton
115-
type='button'
116-
isDark={isDark}
117-
onClick={handleButtonClick}>
118-
{buttonTitle}
119-
</ModalPositiveButton>
120-
</ModalButtonContainer>
121-
</ModalContainer>
122-
</ModalBackdrop>
123-
);
124-
}
88+
onClick={handleButtonClick}
89+
>
90+
{buttonTitle}
91+
</ModalPositiveButton>
92+
</ModalButtonContainer>
93+
</ModalContainer>
94+
</ModalBackdrop>
95+
);
96+
};
97+
98+
const globalTokens = tokens.global;
99+
100+
export const ModalBackdrop = styled.div`
101+
width: 100vw;
102+
height: 100vh;
103+
position: fixed;
104+
z-index: 1001;
105+
top: 0;
106+
left: 0;
107+
display: flex;
108+
flex-direction: column;
109+
justify-content: center;
110+
align-items: center;
111+
background-color: ${(props) =>
112+
props.isDark ? "rgba(255, 255, 255, 0.25)" : "rgba(0, 0, 0, 0.25)"};
113+
opacity: ${(props) => (props.isModalOpen ? `1` : `0`)};
114+
visibility: ${(props) => (props.isModalOpen ? "visible" : "hidden")};
115+
`;
116+
117+
export const ModalContainer = styled.div`
118+
width: 320px;
119+
height: 150px;
120+
padding: ${globalTokens.Spacing20.value}px ${globalTokens.Spacing8.value}px;
121+
background-color: ${(props) =>
122+
props.isDark ? globalTokens.Black.value : globalTokens.White.value};
123+
border-radius: ${globalTokens.BigRadius.value}px;
124+
display: flex;
125+
flex-direction: column;
126+
justify-content: center;
127+
align-items: center;
128+
`;
129+
130+
export const ModalContent = styled(BodyTextTypo)`
131+
flex-grow: 1;
132+
display: flex;
133+
flex-direction: column;
134+
justify-content: center;
135+
align-items: center;
136+
`;
137+
138+
export const ModalButtonContainer = styled.div`
139+
display: flex;
140+
flex-direction: row;
141+
justify-content: space-around;
142+
align-items: start;
143+
`;
144+
145+
export const ModalPositiveButton = styled(PositiveTextButton)`
146+
margin: ${globalTokens.Spacing4.value}px;
147+
padding: 0 ${globalTokens.Spacing24.value}px;
148+
`;
149+
150+
export const ModalNegativeButton = styled(NegativeTextButton)`
151+
margin: ${globalTokens.Spacing4.value}px;
152+
padding: 0 ${globalTokens.Spacing24.value}px;
153+
`;

0 commit comments

Comments
 (0)