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

jinjoo-jung · 2024-01-18T05:53:42Z

close #33

Description

쿠폰 아이템 노출 대기, 노출 만료 쿠폰 추가 (컴포넌트로 분리)
선택한 탭 클릭시 색상 변경
일부객실 리스트 목록 레이아웃 구현
-> useRef 사용하여 리스트 영역 밖 클릭시 닫히도록
-> 객실 이름 10글자 까지만 보이고 나머지 ... 처리

유의할 점 및 ETC (Optional)

스크린샷 (Optional)

…nto feature/#33

vercel · 2024-01-18T05:53:49Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
cool-peace	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 19, 2024 7:09am
cool-peace-dev	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 19, 2024 7:09am

…nto feature/#33

JitHoon

고생하셨습니다..!

JitHoon · 2024-01-18T06:59:13Z

src/types/couponList.ts

+}
+
+// api 데이터 타입
+export interface CouponLitResponse {


CouponLitResponse 오타난 것 같습니다!
CouponListResponse

앗 감사합니다 ㅎㅎ

JitHoon · 2024-01-18T07:08:01Z

src/components/CouponList/CouponNav/index.tsx

+  const [resisterDateClick, setResisterDateClick] = useState<string>('1년');
+  const [categoryTab, setCategoryTab] = useState<string>('전체');


타입 추론이 되면서 '1년', '전체'를 보고 개발자도 쉽게 알 수 있는 타입의 경우 타입 명시를 안하셔도 충분할 것 같습니다!

const [resisterDateClick, setResisterDateClick] = useState('1년'); const [categoryTab, setCategoryTab] = useState('전체');

오 ! 그렇군요 감사합니다! 반영하였습니다.

JitHoon · 2024-01-18T07:09:02Z

src/components/CouponList/CouponItem/CouponExpired/index.tsx

@@ -0,0 +1,224 @@
+import styled from '@emotion/styled';
+import theme from '@styles/theme';


개행 부탁드립니다!

// 외부 라이브러리 import import styled from '@emotion/styled'; // 내부 프로젝트 파일 import import theme from '@styles/theme';

JitHoon · 2024-01-18T07:10:15Z

src/components/CouponList/CouponItem/CouponExpired/index.tsx

+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};
+`;


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 컨벤션 통일 부탁드립니다!

JitHoon · 2024-01-18T07:11:56Z

src/components/CouponList/CouponItem/CouponStop/index.tsx

+import { useState } from 'react';
+import styled from '@emotion/styled';
+import theme from '@styles/theme';
+
+import toggleOnIcon from '@assets/icons/ic-couponlist-toggleOn.svg';
+import toggleOffIcon from '@assets/icons/ic-couponlist-toggleOff.svg';
+import { ToggleStyleProps } from '@/types/couponList';


// 외부 라이브러리 import import { useState } from 'react'; import styled from '@emotion/styled'; // 프로젝트 내부 파일 import import toggleOnIcon from '@assets/icons/ic-couponlist-toggleOn.svg'; import toggleOffIcon from '@assets/icons/ic-couponlist-toggleOff.svg'; import { ToggleStyleProps } from '@/types/couponList'; import theme from '@styles/theme';

JitHoon · 2024-01-18T07:13:07Z

src/components/CouponList/CouponItem/CouponWait/index.tsx

+import styled from '@emotion/styled';
+import theme from '@styles/theme';
+
+import centerIcon from '@assets/icons/ic-couponlist-center.svg';


// 외부 라이브러리 import import styled from '@emotion/styled'; // 프로젝트 내부 파일 import import theme from '@styles/theme'; import centerIcon from '@assets/icons/ic-couponlist-center.svg';

앗 제가 theme 파일을 외부로 착각했네요 😂 신경써서 컨벤션 주의하겠습니다~! 모두 수정하였습니다.

진주님 빌드도 실패로 뜨는데 github actions 확인 후 에러 해결 부탁드립니다!

turkey-kim

api 응답 타입까지 추가해주셨네요! 수고많으셨습니다!

turkey-kim · 2024-01-18T09:18:17Z

src/components/CouponList/CouponItem/CouponWait/index.tsx

+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  border-radius: 22.927px;
+  color: ${theme.colors.white};
+  background: #404446;


개행 부탁드립니다!

넵! 수정하였습니다!

dabin-Hailey

조회도 레이아웃 작업 많으셨을텐데 😢 수고하셨습니다!!

dabin-Hailey · 2024-01-18T10:43:25Z

src/components/CouponList/CouponItem/CouponStop/index.tsx

+    setIsToggle(!isToggle);
+  };
+  return (
+    <CouponContainer isToggle={isToggle}>


<CouponContainer $isToggle={isToggle}>

스타일링을 위해 prop을 넘길 때는 prop명에 prefix로 $ 기호를 붙여야되는 걸로 알고있습니다..!
$없이 텍스트로만 작성하면 HTML 요소의 속성이라고 인식하기 때문입니다.
즉, 해당 prop은 HTML 요소의 속성이 아닌 styled를 위해 사용하는 것임을 알려주기 위해 사용한다고 볼 수 있습니다.

참고 자료
styled-component에 props 보낼 때 나오는 warning 해결

헉 그래서 모두 $를 붙이고 계셨군요... 다 모두 $ 기호 붙여서 수정하였습니다!

dabin-Hailey · 2024-01-18T10:49:03Z

src/components/CouponList/CouponNav/index.tsx

            <TabName>전체</TabName>
-            <TabCount>8</TabCount>
+            <TabCount categoryTab={categoryTab === '전체'}>8</TabCount>


이 부분도 접두사 $ 붙여주시면 좋을 것같습니다!
다른 부분에도 style을 위한 prop이 있는지 확인해보시면 좋을 것같습니다!

…nto feature/#33

jinjoo-jung added 7 commits January 16, 2024 17:28

feat: 탭 클릭시 컬러 적용

e249635

feat: 쿠폰 종류 컴포넌트 분리 & 중지 쿠폰 레이아웃

16c759b

feat: 쿠폰 대기, 만료 레이아웃 구현

b9c36af

Merge branch 'dev' of https://github.com/CoolPeace-yanolza/frontend i…

948acbe

…nto feature/#33

add :쿠폰 컴포넌트로 조건 추가

a3c47e6

feat: 객실 리스트 목록 구현

df9ecc3

fix: 일부 객실 리스트 수정

358a3fc

jinjoo-jung added the design 스타일 label Jan 18, 2024

Merge branch 'dev' of https://github.com/CoolPeace-yanolza/frontend i…

d8da4c7

…nto feature/#33

JitHoon requested review from turkey-kim, JitHoon, jiohjung98, dabin-Hailey and ovoxiix January 18, 2024 06:57

vercel bot deployed to Preview – cool-peace-dev January 18, 2024 07:06 View deployment

vercel bot deployed to Preview – cool-peace January 18, 2024 07:06 View deployment

JitHoon approved these changes Jan 18, 2024

View reviewed changes

JitHoon assigned jinjoo-jung Jan 18, 2024

modify: 컨벤션 수정

0ecf139

vercel bot had a problem deploying to Preview – cool-peace January 18, 2024 08:41 Failure

vercel bot had a problem deploying to Preview – cool-peace-dev January 18, 2024 08:41 Failure

modify: 개행 컨벤션 수정

34f4749

vercel bot had a problem deploying to Preview – cool-peace January 18, 2024 08:45 Failure

vercel bot had a problem deploying to Preview – cool-peace-dev January 18, 2024 08:45 Failure

turkey-kim approved these changes Jan 18, 2024

View reviewed changes

dabin-Hailey approved these changes Jan 18, 2024

View reviewed changes

modify: style props prefix $ 추가

d2a0898

vercel bot had a problem deploying to Preview – cool-peace January 19, 2024 05:58 Failure

vercel bot had a problem deploying to Preview – cool-peace-dev January 19, 2024 05:58 Failure

modify: 빌드 에러 수정

feed5a9

vercel bot deployed to Preview – cool-peace January 19, 2024 06:59 View deployment

vercel bot deployed to Preview – cool-peace-dev January 19, 2024 07:00 View deployment

Merge branch 'dev' of https://github.com/CoolPeace-yanolza/frontend i…

4364587

…nto feature/#33

vercel bot deployed to Preview – cool-peace-dev January 19, 2024 07:09 View deployment

vercel bot deployed to Preview – cool-peace January 19, 2024 07:09 View deployment

jinjoo-jung merged commit 3c36cb1 into dev Jan 19, 2024
3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

jinjoo-jung commented Jan 18, 2024

vercel bot commented Jan 18, 2024 •

edited

Loading

JitHoon left a comment

JitHoon Jan 18, 2024

jinjoo-jung Jan 18, 2024

JitHoon Jan 18, 2024

jinjoo-jung Jan 18, 2024

JitHoon Jan 18, 2024

JitHoon Jan 18, 2024

JitHoon Jan 18, 2024

JitHoon Jan 18, 2024

jinjoo-jung Jan 18, 2024

JitHoon Jan 18, 2024

turkey-kim left a comment

turkey-kim Jan 18, 2024

jinjoo-jung Jan 19, 2024

dabin-Hailey left a comment

dabin-Hailey Jan 18, 2024

jinjoo-jung Jan 19, 2024

dabin-Hailey Jan 18, 2024

		const [resisterDateClick, setResisterDateClick] = useState<string>('1년');
		const [categoryTab, setCategoryTab] = useState<string>('전체');

		@@ -0,0 +1,224 @@
		import styled from '@emotion/styled';
		import theme from '@styles/theme';

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

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

Conversation

jinjoo-jung commented Jan 18, 2024

Description

유의할 점 및 ETC (Optional)

스크린샷 (Optional)

vercel bot commented Jan 18, 2024 • edited Loading

JitHoon left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

turkey-kim left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dabin-Hailey left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vercel bot commented Jan 18, 2024 •

edited

Loading