Merge pull request #132 from Gosrock/dev

Dev
Gosrock · Feb 13, 2022 · 26f2836 · 26f2836
2 parents 4dcbe22 + c61d5a3
commit 26f2836
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 28 deletions.
diff --git a/src/stories/Components/TicketList/Car.svg b/src/stories/Components/TicketList/Car.svg
diff --git a/src/stories/Components/TicketList/QR.svg b/src/stories/Components/TicketList/QR.svg
diff --git a/src/stories/Components/TicketList/TicketList.css b/src/stories/Components/TicketList/TicketList.css
@@ -7,7 +7,9 @@
   font-size: 14px;
   display: flex;
   align-items: center;
-  text-align: center;
+  justify-content: space-between;
+  padding: 15px;
+  box-sizing: border-box;
 }
 
 @media screen and (max-width: 350px) {
@@ -18,9 +20,11 @@
 
 .TicketList-icon {
   position: absolute;
-  right: 5%;
-  width: 49px;
-  height: 49px;
+  width: 121px;
+  height: 121px;
+  opacity: 10%;
+  z-index: 1;
+  right: -4%;
 }
 
 .TicketList-info {
@@ -33,7 +37,7 @@
 
 .TicketList-rec {
   position: absolute;
-  left: calc(10% + 90px);
+  left: 50%;
   width: 2px;
   height: 49px;
   background: #c4c4c4;
@@ -43,3 +47,20 @@
   position: absolute;
   left: 5%;
 }
+
+.TicketList-button-left {
+  width: calc(50% - 0.5px);
+  display: flex;
+  justify-content: left;
+}
+
+.TicketList-button-right {
+  width: calc(50% - 0.5px);
+  display: flex;
+  justify-content: right;
+}
+
+.TicketList-button-left:active,
+.TicketList-button-right:active {
+  transform: scale(1.02);
+}
diff --git a/src/stories/Components/TicketList/TicketList.jsx b/src/stories/Components/TicketList/TicketList.jsx
@@ -2,25 +2,33 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './TicketList.css';
 import { ReactComponent as GosrockLogo } from './GosrockLogo.svg';
-import { StateIcon } from '../StateIcon/StateIcon.jsx';
+import { ReactComponent as Car } from './Car.svg';
+import { ReactComponent as QR } from './QR.svg';
+//import { StateIcon } from '../StateIcon/StateIcon.jsx';
 
-export const TicketList = ({ StateIcon, performdate, bookdate, ...props }) => {
+export const TicketList = ({ onClickQR, ...props }) => {
   return (
     <>
       <button className={'TicketList-item'} {...props}>
-        <div className={'TicketList-ticketState'}>{StateIcon}</div>
+        <div
+          className="TicketList-button-left"
+          onClick={() => {
+            window.open(
+              'https://m.place.naver.com/place/36995079/home?entry=ple',
+              '',
+              '_blank'
+            );
+          }}
+        >
+          <Car />
+          <div style={{ fontWeight: '700', marginLeft: '13px' }}>오시는 길</div>
+        </div>
         <div className={'TicketList-rec'}></div>
-        <div className={'TicketList-info'}>
-          <div>
-            <p>
-              <span style={{ fontWeight: '700' }}>공연일</span> {performdate}
-            </p>
-          </div>
-          <div>
-            <p>
-              <span style={{ fontWeight: '700' }}>예매일</span> {bookdate}
-            </p>
+        <div className="TicketList-button-right" onClick={onClickQR}>
+          <div style={{ fontWeight: '700', marginRight: '13px' }}>
+            QR코드 보기
           </div>
+          <QR />
         </div>
 
         <GosrockLogo className={'TicketList-icon'} />
@@ -29,7 +37,7 @@ export const TicketList = ({ StateIcon, performdate, bookdate, ...props }) => {
   );
 };
 
-TicketList.propTypes = {
+/* TicketList.propTypes = {
   performdate: PropTypes.string.isRequired,
   bookdate: PropTypes.string.isRequired,
   onClick: PropTypes.func,
@@ -38,10 +46,12 @@ TicketList.propTypes = {
       type: PropTypes.oneOf([StateIcon])
     })
   ]).isRequired
+}; */
+
+TicketList.propTypes = {
+  onClickQR: PropTypes.func
 };
 
 TicketList.defaultProps = {
-  onClick: undefined,
-  performdate: '공연일',
-  bookdate: '예매일'
+  onClickQR: undefined
 };
diff --git a/src/stories/Components/TicketList/TicketList.stories.jsx b/src/stories/Components/TicketList/TicketList.stories.jsx
@@ -14,8 +14,8 @@ export default {
   title: 'Components/TicketList',
   component: TicketList,
   argTypes: {
-    TopElement: {
-      control: false
+    /*     TopElement: {
+      control: falses
     },
     StateIcon: {
       options: Object.keys(StateIcons),
@@ -29,7 +29,7 @@ export default {
           입장완료: '입장완료'
         }
       }
-    }
+    } */
   }
 };
 
@@ -42,7 +42,7 @@ const Template = args => (
 export const 예매티켓 = Template.bind({});
 
 예매티켓.args = {
-  performdate: '22.03.10',
-  bookdate: '22.02.14',
-  StateIcon: <StateIcon />
+  //performdate: '22.03.10',
+  //bookdate: '22.02.14',
+  //StateIcon: <StateIcon />
 };