Merge pull request #136 from Gosrock/dev

Dev
Gosrock · Feb 13, 2022 · 25088a0 · 25088a0
2 parents 275137b + 43af1a4
commit 25088a0
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 5 deletions.
diff --git a/src/stories/Components/Modal/Modal.css b/src/stories/Components/Modal/Modal.css
@@ -98,11 +98,9 @@
 }
 
 .newbie-main-grid {
-  margin-left: 4%;
-  width: 70%;
   display: grid;
   gap: 20px;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 84px 84px;
 }
 
 .newbie-left-container {
@@ -119,6 +117,7 @@
 .newbie-right-container {
   display: flex;
   flex-direction: column;
+  text-align: right;
 }
 .newbie-right-top {
   font-size: 24px;

diff --git a/src/stories/Components/Ticket/Ticket.css b/src/stories/Components/Ticket/Ticket.css
@@ -67,7 +67,10 @@
   position: absolute;
   height: 150%;
   width: 150%;
-  background-image: conic-gradient(#a7fddb 20deg, #66dc80 120deg);
+  background-image: conic-gradient(
+    var(--majorColor) 20deg,
+    var(--minorColor) 120deg
+  );
   border-radius: 12px;
   animation: rotate 2s infinite linear;
   z-index: 5;

diff --git a/src/stories/Components/Ticket/Ticket.jsx b/src/stories/Components/Ticket/Ticket.jsx
@@ -4,8 +4,17 @@ import './Ticket.css';
 import { ReactComponent as GosrockLogo } from './GosrockLogo.svg';
 import { ReactComponent as TicketBackgroud } from './TicketBackground.svg';
 import QRCode from 'qrcode.react';
+import { useEffect } from 'react';
+
+export const Ticket = ({ date, place, payment, enter, QRvalue }) => {
+  if (enter) {
+    document.documentElement.style.setProperty('--majorColor', `#edc967`);
+    document.documentElement.style.setProperty('--minorColor', `#f7ef8a`);
+  } else {
+    document.documentElement.style.setProperty('--majorColor', `#a7fddb`);
+    document.documentElement.style.setProperty('--minorColor', `#66dc80`);
+  }
 
-export const Ticket = ({ date, place, payment, QRvalue }) => {
   return (
     <>
       <div className="ticket-background-wrapper">
@@ -77,12 +86,15 @@ Ticket.propTypes = {
 
   payment: PropTypes.bool,
 
+  enter: PropTypes.bool,
+
   QRvalue: PropTypes.string
 };
 
 Ticket.defaultProps = {
   date: '22.03.10',
   place: '라디오 가가',
   payment: false,
+  enter: false,
   QRvalue: 'https://github.com/Gosrock'
 };
diff --git a/src/stories/Components/Ticket/Ticket.stories.jsx b/src/stories/Components/Ticket/Ticket.stories.jsx
@@ -32,3 +32,12 @@ export const 입금확인후티켓 = Template.bind({});
   payment: true,
   QRvalue: 'https://github.com/Gosrock'
 };
+
+export const 입장후티켓 = Template.bind({});
+입장후티켓.args = {
+  date: '22.03.10',
+  place: '라디오 가가',
+  payment: true,
+  enter: true,
+  QRvalue: 'https://github.com/Gosrock'
+};