Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[#33] 쿠폰 조회 레이아웃 추가 & 일부 객실 리스트 목록 추가 #46

Merged
merged 13 commits into from
Jan 19, 2024
Merged

[#33] 쿠폰 조회 레이아웃 추가 & 일부 객실 리스트 목록 추가 #46

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
e249635
feat: 탭 클릭시 컬러 적용
jinjoo-jung Jan 16, 2024
16c759b
feat: 쿠폰 종류 컴포넌트 분리 & 중지 쿠폰 레이아웃
jinjoo-jung Jan 16, 2024
b9c36af
feat: 쿠폰 대기, 만료 레이아웃 구현
jinjoo-jung Jan 16, 2024
948acbe
Merge branch 'dev' of https://github.com/CoolPeace-yanolza/frontend i…
jinjoo-jung Jan 17, 2024
a3c47e6
add :쿠폰 컴포넌트로 조건 추가
jinjoo-jung Jan 17, 2024
df9ecc3
feat: 객실 리스트 목록 구현
jinjoo-jung Jan 17, 2024
358a3fc
fix: 일부 객실 리스트 수정
jinjoo-jung Jan 18, 2024
d8da4c7
Merge branch 'dev' of https://github.com/CoolPeace-yanolza/frontend i…
jinjoo-jung Jan 18, 2024
0ecf139
modify: 컨벤션 수정
jinjoo-jung Jan 18, 2024
34f4749
modify: 개행 컨벤션 수정
jinjoo-jung Jan 18, 2024
d2a0898
modify: style props prefix $ 추가
jinjoo-jung Jan 19, 2024
feed5a9
modify: 빌드 에러 수정
jinjoo-jung Jan 19, 2024
4364587
Merge branch 'dev' of https://github.com/CoolPeace-yanolza/frontend i…
jinjoo-jung Jan 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/assets/icons/ic-couponlist-delete.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/assets/icons/ic-couponlist-right.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
224 changes: 224 additions & 0 deletions src/components/CouponList/CouponItem/CouponExpired/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,224 @@
import styled from '@emotion/styled';
import theme from '@styles/theme';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

개행 부탁드립니다!

// 외부 라이브러리 import
import styled from '@emotion/styled';

// 내부 프로젝트 파일 import
import theme from '@styles/theme';


const CouponExpired = () => {
return (
<CouponContainer>
<CouponHeaderContainer>
<CouponHeader>
<CouponTitle>2024 신년행사</CouponTitle>
<CouponStatus>기간만료</CouponStatus>
</CouponHeader>
<CouponCustomer>모든 고객 10% 할인</CouponCustomer>
</CouponHeaderContainer>
<CouponMain>
<CountWrap>
<CountText>다운로드</CountText>
<CountNumber>50</CountNumber>
</CountWrap>
<CountWrap>
<CountText>사용완료</CountText>
<CountNumber>50</CountNumber>
</CountWrap>
<div>
<ContentWrap>
<ContentTitle>가격</ContentTitle>
<ContentValue>99,999,999원 이상</ContentValue>
</ContentWrap>
<ContentWrap>
<ContentTitle>일정</ContentTitle>
<ContentValue>2박 이상, 일~목</ContentValue>
</ContentWrap>
<ContentWrap>
<ContentTitle>객실</ContentTitle>
<ContentValue>전체</ContentValue>
</ContentWrap>
</div>
</CouponMain>
<DateContainer>
<ExposeDateWrap>
<ExposeDateTitle>노출기간</ExposeDateTitle>
<ExposeValue>2024.01.31 ~ 2024.02.10</ExposeValue>
</ExposeDateWrap>
<ExposeDateWrap>
<RegisterDateTitle>등록일</RegisterDateTitle>
<RegisterDateValue>2024.12.01</RegisterDateValue>
</ExposeDateWrap>
</DateContainer>
<Delete>삭제</Delete>
</CouponContainer>
);
};

export default CouponExpired;

const CouponContainer = styled.div`
position: relative;

width: 290px;
height: 203px;

border-radius: 8px;

background: #ecf0fa;
box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.25);
`;

const CouponHeaderContainer = styled.div`
height: 64px;

padding: 14px 10px 0 12px;
border-bottom: 1px dashed #8f8f8f;

display: flex;
flex-direction: column;
`;

const CouponHeader = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
`;

const CouponTitle = styled.div`
color: #8f8f8f;
font-size: 11px;
font-weight: 600;
`;

const CouponStatus = styled.div`
width: 50px;
height: 22.927px;

display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
border-radius: 22.927px;
color: #757676;
background: ${theme.colors.white};
`;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

const CouponStatus = styled.div`
  width: 50px;
  height: 22.927px;

  border-radius: 22.927px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 10px;
  color: #757676;
  background: ${theme.colors.white};
`;

css 컨벤션 통일 부탁드립니다!


const CouponCustomer = styled.div`
color: #757676;
font-size: 18px;
font-weight: 700;
`;

const CouponMain = styled.div`
padding: 12px 10px 0 12px;

display: flex;
align-items: center;
`;

const CountWrap = styled.div`
width: 58px;
height: 62px;

margin-right: 7.5px;
border-radius: 10px;

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

background-color: ${theme.colors.white};
`;

const CountText = styled.div`
color: #8f8f8f;
text-align: center;
font-size: 11px;
font-weight: 600;
`;

const CountNumber = styled.div`
margin-top: 5px;

color: #757676;
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 700;
`;

const ContentWrap = styled.div`
margin: 8px;

display: flex;
align-items: center;
`;

const ContentTitle = styled.div`
margin-right: 5px;

color: #757676;
font-size: 11px;
font-style: normal;
font-weight: 600;
`;

const ContentValue = styled.div`
color: #8f8f8f;
font-size: 11px;
font-style: normal;
font-weight: 400;
`;

const DateContainer = styled.div`
padding: 9px 0 0 12px;
`;

const ExposeDateWrap = styled.div`
margin-bottom: 4px;

display: flex;
align-items: center;
`;

const ExposeDateTitle = styled.div`
margin-right: 5px;

color: #757676;
font-size: 11px;
font-style: normal;
font-weight: 600;
`;

const ExposeValue = styled.div`
color: #757676;
font-size: 11px;
font-style: normal;
font-weight: 600;
`;

const RegisterDateTitle = styled.div`
margin-right: 5px;

color: #757676;
font-size: 10px;
font-style: normal;
font-weight: 400;
`;

const RegisterDateValue = styled.div`
color: #757676;
font-size: 10px;
font-style: normal;
font-weight: 400;
`;

const Delete = styled.div`
position: absolute;
right: 0;
bottom: 0;

margin-right: 14px;
margin-bottom: 14px;

color: #757676;
font-size: 11px;
cursor: pointer;
`;
Loading