fix review

Gosrock · Aug 1, 2022 · 7eb81a4 · 7eb81a4
1 parent 2fa6daa
commit 7eb81a4
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 128 deletions.
diff --git a/src/custom.d.ts → custom.d.ts b/src/custom.d.ts → custom.d.ts
diff --git a/src/apis/UsersApi.tsx b/src/apis/UsersApi.tsx
@@ -0,0 +1,13 @@
+import { axiosPrivate } from './axios';
+import { IUserInfoRes } from './type/userInfo';
+import { TResponseType } from './type/commonResponse';
+
+const UsersApi = {
+  // 유저 정보 가져오기
+  getUsers: async (): Promise<TResponseType<IUserInfoRes>> => {
+    const { data } = await axiosPrivate.get('/users');
+    return data;
+  },
+};
+
+export default UsersApi;
diff --git a/src/assets/icons/ticket-select.png b/src/assets/icons/ticket-select.png
diff --git a/src/components/ticketing/DaySelect.tsx b/src/components/ticketing/DaySelect.tsx
@@ -1,68 +1,47 @@
 import styled from 'styled-components';
+import { ReactComponent as CheckFilled } from '../../assets/icons/checkOk.svg';
+import { ReactComponent as CheckOutlined } from '../../assets/icons/check.svg';
 
 const DaySelect = () => {
   return (
-    <>
-      <Wrapper>
-        <Contents>
-          <input type="checkbox" />
-          <Item>
-            <p>DAY1 : YB</p>
-            <p>9월 1일 목요일</p>
-          </Item>
-        </Contents>
-      </Wrapper>
-      <Wrapper>
-        <Contents>
-          <input type="checkbox" />
-          <Item>
-            <p>DAY2 : OB</p>
-            <p>9월 2일 금요일</p>
-          </Item>
-        </Contents>
-      </Wrapper>
-    </>
+    <Wrapper>
+      <DateButton>
+        <CheckOutlined />
+        <Item>
+          <p>DAY1 : YB</p>
+          <p>9월 1일 목요일</p>
+        </Item>
+      </DateButton>
+      <DateButton>
+        <input type="checkbox" />
+        <Item>
+          <p>DAY2 : OB</p>
+          <p>9월 2일 금요일</p>
+        </Item>
+      </DateButton>
+    </Wrapper>
   );
 };
 export default DaySelect;
 
 const Wrapper = styled.div`
-  width: 98%;
+  & > div:first-child {
+    margin-bottom: 16px;
+  }
+`;
+
+const DateButton = styled.div`
   height: 70px;
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
-
+  justify-content: flex-start;
+  align-items: center;
+  gap: 16px;
   background: ${({ theme }) => theme.palette.mono.black_26};
   border-radius: 18px;
   padding: 18px 18px 18px 16px;
-  margin-bottom: 20px;
-`;
-
-const Contents = styled.div`
-  height: 45px;
-  margin: -10px 0;
-
-  display: flex;
-  flex-direction: row;
-
-  & input {
-    width: 20px;
-    height: 20px;
-    margin-top: 15px;
-  }
 `;
 
 const Item = styled.div`
-  width: 200px;
-  height: 110px;
-  padding: 3px 0px;
-
-  & p {
-    ${({ theme }) => theme.typo.text_14_M};
-    color: ${({ theme }) => theme.palette.mono.font_placeholder};
-    margin-bottom: 5px;
-    margin-left: 20px;
-    font-size: 20px;
-  }
+  ${({ theme }) => theme.typo.text_18_M};
 `;
diff --git a/src/components/ticketing/TicketNum.tsx b/src/components/ticketing/TicketNum.tsx
@@ -1,95 +1,49 @@
 import styled from 'styled-components';
-import TicketImg from '../assets/icons/ticketimg.svg';
-
+import ticketPNG from '../../assets/icons/ticket-select.png';
 const DaySelect = () => {
   return (
-    <>
-      <Wrapper>
-        <Contents>
-          <Item>
-            <p>1매</p>
-          </Item>
-        </Contents>
-      </Wrapper>
-      <Wrapper>
-        <Contents>
-          <Item>
-            <p>1매</p>
-          </Item>
-        </Contents>
-      </Wrapper>
-      <Wrapper>
-        <Contents>
-          <Item>
-            <p>1매</p>
-          </Item>
-        </Contents>
-      </Wrapper>
-    </>
+    <Wrapper>
+      <CountButton>
+        <Ticket>
+          <img src={ticketPNG} />
+        </Ticket>
+        <p>1매</p>
+      </CountButton>
+      <CountButton></CountButton>
+      <CountButton></CountButton>
+    </Wrapper>
   );
 };
 export default DaySelect;
 
 const Wrapper = styled.div`
-  width: 30%;
-  height: 122px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  float: left;
-  margin-right: 10px;
-
-  background: ${({ theme }) => theme.palette.mono.black_26};
-  border-radius: 18px;
-  padding: 18px 18px 18px 16px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-gap: 16px;
 `;
 
-const Contents = styled.div`
-  height: 45px;
-  width: 25px;
-  margin: -10px 0;
+const CountButton = styled.div`
+  height: 120px;
+  padding: 20px;
+  border-radius: 16px;
+  background-color: ${({ theme }) => theme.palette.mono.black_26};
 
   display: flex;
-  flex-direction: row;
-`;
-
-const Item = styled.div`
-  width: 200px;
-  height: 110px;
-  padding: 70px 0px;
-
-  & p {
-    width: 30px;
-    ${({ theme }) => theme.typo.text_14_M};
-    color: ${({ theme }) => theme.palette.mono.white};
-    margin-bottom: 5px;
-    margin-left: 20px;
-    font-size: 20px;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  & > p {
+    text-align: center;
   }
 `;
 
-const Line = styled.hr`
-  width: 0px;
-  height: 110px;
-  margin: 0 12px 0px 7px;
-
-  border: none;
-  border-left: 1px solid ${({ theme }) => theme.palette.mono.black_36};
-`;
-
-const Content = styled.div`
-  height: 110px;
-  padding: 3px 0px;
-
-  & p {
-    ${({ theme }) => theme.typo.text_14_M};
-    color: ${({ theme }) => theme.palette.mono.white};
-    margin-bottom: 16px;
-  }
-  & :last-child {
-    margin: 0;
-  }
-  & span {
-    color: ${({ theme }) => theme.palette.point.red};
+const Ticket = styled.div`
+  height: 45px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  & > img {
+    width: 25px;
+    margin: 0px 2px;
   }
 `;
diff --git a/tsconfig.json b/tsconfig.json
@@ -16,5 +16,5 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": ["src", "src/custom.d.ts"]
+  "include": ["src", "custom.d.ts"]
 }