Skip to content

Commit

Permalink
Merge pull request #129 from Gosrock/dev
Browse files Browse the repository at this point in the history 
새내기를 위한 모달창 추가
  • Loading branch information
@ImNM
ImNM authored Feb 12, 2022
2 parents f00cac7 + 2707553 commit 04392c7
Show file tree
Hide file tree
Showing 3 changed files with 204 additions and 73 deletions.
7 changes: 6 additions & 1 deletion src/stories/Components/InputForm/InputForm.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,13 @@ export const InputForm = ({ page, value, onChange, resend, ticketCount }) => {
},
studentId: {
type: 'string',
placeholder: 'C2',
placeholder: 'ex. C211000',
limit: 7
},
newbie: {
type: 'string',
placeholder: '이름',
limit: 4
}
};
const [time, setTime] = useState(180);
Expand Down
51 changes: 50 additions & 1 deletion src/stories/Components/Modal/Modal.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.modal-box {
height: 300px;
height: 333px;
width: 88%;
min-width: 314px;
max-width: 335px;
Expand Down Expand Up @@ -75,3 +75,52 @@
/* position: relative; */
/* position: relative; */
}

.newbie-container {
height: 140px;
background-color: #121212;
border-radius: 15px;
justify-content: center;
align-items: center;
display: flex;
}

.newbie-main-grid {
margin-left: 5%;
width: 70%;
display: grid;
gap: 10px;
grid-template-columns: 1fr 1fr;
}

.newbie-left-container {
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
height: 84px;
width: 84px;
background-color: #bf94e4;
border-radius: 15px;
}

.newbie-right-container {
display: flex;
flex-direction: column;
}
.newbie-right-top {
font-size: 24px;
line-height: 24px;

font-weight: 500;
color: #b6b7b8;
text-decoration-color: #bf94e4;
text-decoration-line: line-through;
}

.newbie-right-bottom {
color: #bf94e4;
font-size: 55px;
line-height: 56px;
font-weight: 500;
}
219 changes: 148 additions & 71 deletions src/stories/Components/Modal/Modal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,90 +39,167 @@ export const Modal = ({
toast();
};

const renderTitleSwitch = page => {
switch (page) {
case 'ticketing':
return (
<p>
이제 마지막이에요! <br />
입금을 완료한 후에 진행해 주세요.
</p>
);
case 'list':
return (
<p>
입금계좌 보기
<br />
<br />
</p>
);
case 'newbie':
return (
<>
<p>이제 마지막이에요!</p>
<p
style={{
textDecorationColor: '#BF94E4',
textDecorationLine: 'line-through'
}}
>
입금을 완료한 후에 진행해 주세요.
</p>
</>
);
default:
return;
}
};

return (
<>
<div className="modal-box">
<div className="modal-container">
<div className="title">
{page === 'ticketing' ? (
<p>
이제 마지막이에요! <br />
입금을 완료한 후에 진행해 주세요.
</p>
) : (
<p>
입금계좌 보기
<br />
<br />
</p>
)}
</div>
<div className="description">
{accountName}
<div>
<span style={{ color: '#BF94E4' }}>{accountNumber}</span>
<span
className="copyNumber"
style={{
fontSize: '14px',
padding: '3px 7px',
borderRadius: '5px',
backgroundColor: '#363636',
color: '#b6b7b8',
marginLeft: '8px',
cursor: 'default'
}}
onClick={copyNumber}
>
번호 복사
</span>
<div className="title">{renderTitleSwitch(page)}</div>
{page === 'newbie' ? (
<div className="description">
<div className="newbie-container">
<div className="newbie-main-grid">
<div className="newbie-left-container">
<div
style={{
fontSize: '22px',
fontWeight: '500',
color: 'white'
}}
>
22학번
</div>
<div
style={{
fontSize: '18px',
fontWeight: '500',
color: 'white'
}}
>
새내기는
</div>
</div>
<div className="newbie-right-container">
<p className="newbie-right-top">3000원</p>
<p className="newbie-right-bottom">0원</p>
</div>
</div>
</div>
</div>
</div>
) : (
<div className="description">
{accountName}
<div>
<span style={{ color: '#BF94E4' }}>{accountNumber}</span>
<span
className="copyNumber"
style={{
fontSize: '14px',
padding: '3px 7px',
borderRadius: '5px',
backgroundColor: '#363636',
color: '#b6b7b8',
marginLeft: '8px',
cursor: 'default'
}}
onClick={copyNumber}
>
번호 복사
</span>
</div>
</div>
)}
</div>
<div className="modal-bottom">
<div className="modal-container">
{page === 'ticketing' ? (
<GoFrontButton
arrowCircleBackground={false}
arrowColor="yellow"
fontColor="gray"
label="또는, 카카오페이로 송금하기"
onClick={onClickKakao}
/>
) : (
<GoFrontButton
arrowCircleBackground={false}
arrowColor="yellow"
fontColor="gray"
label="카카오페이로 송금하기"
onClick={onClickKakao}
/>
)}
</div>
{page === 'newbie' ? (
<div
className="modal-bottom"
style={{
height: '1px',
width: '100%',
backgroundColor: '#363636'
borderWidth: '1px',
borderBlockColor: '#363636',
borderTop: 'solid'
}}
></div>
<div className="modal-container">
{page === 'ticketing' ? (
>
<div className="modal-container">
<GoFrontButton
arrowCircleBackground={false}
label="입금 완료"
label="티켓 발급하기"
onClick={onClickPurchased}
/>
) : (
<button className="CloseButton" onClick={onClickClose}>
<span>닫기</span>
<div className="modal--svg" style={{ marginLeft: '11px' }}>
<Close />
</div>
</button>
)}
</div>
</div>
</div>
) : (
<>
<div className="modal-bottom">
<div className="modal-container">
{page === 'ticketing' ? (
<GoFrontButton
arrowCircleBackground={false}
arrowColor="yellow"
fontColor="gray"
label="또는, 카카오페이로 송금하기"
onClick={onClickKakao}
/>
) : (
<GoFrontButton
arrowCircleBackground={false}
arrowColor="yellow"
fontColor="gray"
label="카카오페이로 송금하기"
onClick={onClickKakao}
/>
)}
</div>
<div
style={{
height: '1px',
width: '100%',
backgroundColor: '#363636'
}}
></div>
<div className="modal-container">
{page === 'ticketing' ? (
<GoFrontButton
arrowCircleBackground={false}
label="입금 완료"
onClick={onClickPurchased}
/>
) : (
<button className="CloseButton" onClick={onClickClose}>
<span>닫기</span>
<div className="modal--svg" style={{ marginLeft: '11px' }}>
<Close />
</div>
</button>
)}
</div>
</div>
</>
)}
</div>
<div id="toast"></div>
</>
Expand Down Expand Up @@ -153,7 +230,7 @@ Modal.propTypes = {
/**
* 페이지 : (ticketing / list)
*/
page: PropTypes.oneOf(['ticketing', 'list'])
page: PropTypes.oneOf(['ticketing', 'list', 'newbie'])
};

Modal.defaultProps = {
Expand Down

0 comments on commit 04392c7

Please sign in to comment.