feat/환전충전 페이지 구현 #18

JMarketYard · Jan 28, 2025 · 4934ccc · 4934ccc
1 parent 10df33c
commit 4934ccc
Show file tree

Hide file tree

Showing 7 changed files with 473 additions and 12 deletions.
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import styled from 'styled-components';
 import { Icon } from '@iconify/react';
@@ -10,6 +10,14 @@ export default function Modal({
 }: PropsWithChildren<{ onClose: () => void }>) {
   const { clearModals } = useModalContext();
 
+  useEffect(() => {
+    document.body.style.overflow = 'hidden';
+
+    return () => {
+      document.body.style.overflow = 'auto';
+    };
+  }, []);
+
   return ReactDOM.createPortal(
     <ModalOverlay onClick={clearModals}>
       <ModalContent

diff --git a/src/pages/charge/chargePage.tsx b/src/pages/charge/chargePage.tsx
@@ -0,0 +1,190 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Icon } from '@iconify/react';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import Box from '@mui/material/Box';
+import TabPage from './components/tab/TabPage';
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+function CustomTabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
+    </div>
+  );
+}
+
+function a11yProps(index: number) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
+}
+
+function ChargePage() {
+  const [value, setValue] = React.useState(0);
+
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+  };
+
+  return (
+    <Container>
+      <TitleBox>
+        <Titles>
+          <Dot />
+          <Title>티켓 충전/환전</Title>
+        </Titles>
+        <CheckBox>
+          <Short>충전/ 환전 내역 조회하기</Short>
+          <Icon
+            icon="weui:arrow-outlined"
+            style={{
+              width: '23px',
+              height: '25px',
+              cursor: 'pointer',
+              color: '#8F8E94',
+            }}
+          />
+        </CheckBox>
+      </TitleBox>
+      <Line />
+      <Boxs>
+        <Box sx={{ width: '100%' }}>
+          <Box
+            sx={{
+              width: '100%',
+              borderBottom: 1,
+              borderColor: 'divider',
+            }}
+          >
+            <Tabs
+              sx={{
+                width: '100%',
+                '& .MuiTabs-flexContainer': {
+                  justifyContent: 'center',
+                },
+              }}
+              value={value}
+              onChange={handleChange}
+              textColor="secondary"
+              indicatorColor="secondary"
+              aria-label="basic tabs example"
+            >
+              <Tab
+                sx={{
+                  width: '100%',
+                  fontFamily: 'Pretendard',
+                  fontSize: '20px',
+                  fontSeight: '600',
+                  lineHeight: '17.308px',
+                }}
+                label="티켓 충전"
+                {...a11yProps(0)}
+              />
+              <Tab
+                sx={{
+                  width: '100%',
+                  fontFamily: 'Pretendard',
+                  fontSize: '20px',
+                  fontSeight: '600',
+                  lineHeight: '17.308px',
+                }}
+                label="티켓 환전"
+                {...a11yProps(1)}
+              />
+            </Tabs>
+          </Box>
+          <CustomTabPanel value={value} index={0}>
+            <TabPage type={0} />
+          </CustomTabPanel>
+          <CustomTabPanel value={value} index={1}>
+            <TabPage type={1} />
+          </CustomTabPanel>
+        </Box>
+      </Boxs>
+    </Container>
+  );
+}
+
+const Boxs = styled.div`
+  width: 858px;
+  height: 740px;
+  border-radius: 18px;
+  border: 1px solid #c1c1c1;
+  margin-bottom: 250px;
+  padding-top: 15px;
+`;
+
+const Line = styled.div`
+  margin-top: 20px;
+  margin-bottom: 53px;
+  width: 1080px;
+  height: 1px;
+  background-color: black;
+`;
+
+const CheckBox = styled.div`
+  display: flex;
+  column-gap: 30px;
+  align-items: center;
+`;
+
+const Short = styled.div`
+  color: #8f8e94;
+  font-family: Pretendard;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+`;
+
+const Title = styled.div`
+  font-family: Pretendard;
+  font-size: 22px;
+  font-style: normal;
+  font-weight: 600;
+`;
+
+const Dot = styled.div`
+  width: 14px;
+  height: 14px;
+  background-color: #c908ff;
+  border: #c908ff;
+  border-radius: 100%;
+`;
+
+const Titles = styled.div`
+  display: flex;
+  column-gap: 50px;
+  align-items: center;
+`;
+
+const TitleBox = styled.div`
+  margin-top: 63px;
+  width: 1080px;
+  height: 53px;
+  display: flex;
+  justify-content: space-between;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+export default ChargePage;
diff --git a/src/pages/charge/components/ChangeModal.tsx → ...s/charge/components/modal/ChangeModal.tsx b/src/pages/charge/components/ChangeModal.tsx → ...s/charge/components/modal/ChangeModal.tsx
@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import Modal from '../../../components/Modal/Modal';
+import Modal from '../../../../components/Modal/Modal';
 import Checkbox from '@mui/material/Checkbox';
 import { Icon } from '@iconify/react';
 import CircleChecked from '@mui/icons-material/CheckCircleOutline';
 import CircleUnchecked from '@mui/icons-material/RadioButtonUnchecked';
-import { useModalContext } from '../../../components/Modal/context/ModalContext';
+import { useModalContext } from '../../../../components/Modal/context/ModalContext';
 import ChangeOkModal from './ChangeOkModal';
 
 interface ModalProps {

diff --git a/...pages/charge/components/ChangeOkModal.tsx → ...charge/components/modal/ChangeOkModal.tsx b/...pages/charge/components/ChangeOkModal.tsx → ...charge/components/modal/ChangeOkModal.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import Modal from '../../../components/Modal/Modal';
+import Modal from '../../../../components/Modal/Modal';
 import styled from 'styled-components';
-import vector from '../../../assets/Vector.png';
-import ticket from '../../../assets/ticket.svg';
-import { useModalContext } from '../../../components/Modal/context/ModalContext';
+import vector from '../../../../assets/Vector.png';
+import ticket from '../../../../assets/ticket.svg';
+import { useModalContext } from '../../../../components/Modal/context/ModalContext';
 
 interface ModalProps {
   onClose: () => void;

diff --git a/src/pages/charge/components/ChargeModal.tsx → ...s/charge/components/modal/ChargeModal.tsx b/src/pages/charge/components/ChargeModal.tsx → ...s/charge/components/modal/ChargeModal.tsx
@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import Modal from '../../../components/Modal/Modal';
+import Modal from '../../../../components/Modal/Modal';
 import Checkbox from '@mui/material/Checkbox';
 import { Icon } from '@iconify/react';
 import CircleChecked from '@mui/icons-material/CheckCircleOutline';
 import CircleUnchecked from '@mui/icons-material/RadioButtonUnchecked';
 import ChargeOkModal from './ChargeOkModal';
-import { useModalContext } from '../../../components/Modal/context/ModalContext';
+import { useModalContext } from '../../../../components/Modal/context/ModalContext';
 
 interface ModalProps {
   onClose: () => void;

diff --git a/...pages/charge/components/ChargeOkModal.tsx → ...charge/components/modal/ChargeOkModal.tsx b/...pages/charge/components/ChargeOkModal.tsx → ...charge/components/modal/ChargeOkModal.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import Modal from '../../../components/Modal/Modal';
+import Modal from '../../../../components/Modal/Modal';
 import styled from 'styled-components';
-import vector from '../../../assets/Vector.png';
-import { useModalContext } from '../../../components/Modal/context/ModalContext';
+import vector from '../../../../assets/Vector.png';
+import { useModalContext } from '../../../../components/Modal/context/ModalContext';
 
 interface ModalProps {
   onClose: () => void;