[Feat] 이벤트페이지 #174

Young2un · 2024-08-12T16:21:59Z

🚀 작업 내용

이벤트 페이지 오래걸렸네용
탭 클릭 시 해당 이벤트 섹션으로 이동 + active 효과
한번만 받을 수 있는 웰컴쿠폰 (로그인해야함)
하루에 한번 돌릴 수 있는 룰렛 (로그인해야함) -> 쿠폰 발급시 효과 라이브러리 사용
그 외는 그저 퍼블리싱 정도입니당

📝 참고 사항

아직 클릭해서 들어갈 event배너가 없습니다. url로 들어가서 봐주세용
토큰관리 시급,,
뮤테이션 훅으로 빼봤는데 잘했는가 모르겠슴당,,
쿠폰함가기 링크 일단 홈으로 해놨습니다.
하루에 한번 9시에 초기화해서 룰렛 돌아가게 했습니다

🖼️ 스크린샷

🚨 관련 이슈 (이슈 번호)

[Feat] 이벤트페이지 #161

✅ 체크리스트

Code Review 요청
Label 설정
PR 제목 규칙에 맞는지 확인

…161-feat-이벤트페이지

… into 161-feat-이벤트페이지

bokeeeey

완성된 페이지 화면이 퀄리티가 상당하네요
고생하셨습니다 굿굿!

src/api/couponAPI.ts

bokeeeey · 2024-08-12T23:49:08Z

src/api/couponAPI.ts

+export const getCoupon = async (): Promise<CouponResponse[]> => {
+  const token = await getCookie('accessToken');
+
+  try {
+    const response = await fetch(`${BASE_URL}/api/v1/user/coupon`, {
+      cache: 'no-cache',
+      headers: {
+        'Cache-Control': 'no-cache',
+        Authorization: token ? `Bearer ${token}` : '',
+      },
+    });
+    const rawData = await response.json();
+
+    return rawData.data;
+  } catch (error) {
+    throw error;
+  }
+};


Suggested change

export const getCoupon = async (): Promise<CouponResponse[]> => {

const token = await getCookie('accessToken');

try {

const response = await fetch(`${BASE_URL}/api/v1/user/coupon`, {

cache: 'no-cache',

headers: {

'Cache-Control': 'no-cache',

Authorization: token ? `Bearer ${token}` : '',

},

});

const rawData = await response.json();

return rawData.data;

} catch (error) {

throw error;

}

};

export const getCoupon = async (): Promise<CouponResponse[]> => {

const token = await getCookie('accessToken');

try {

const response = await fetch(`${BASE_URL}/api/v1/user/coupon`, {

cache: 'no-cache',

headers: {

'Cache-Control': 'no-cache',

Authorization: token ? `Bearer ${token}` : '',

},

});

const rawData = await response.json();

if (!response.ok) {

throw new Error(rawData.message || "대충 메세지")

}

return rawData.data;

} catch (error) {

throw error;

}

};

여기도 위 함수와 같이 예외처리를 한번 해주시는게 어떠신가요?
사용처에서 toast로 피드백해주면 더 좋을거라 생각합니다

src/app/event/_components/BenefitJoin.tsx

src/app/event/_components/EventTab.tsx

src/app/event/_components/Wheel.tsx

src/app/event/page.tsx

src/constants/route.ts

src/hooks/useCreateCouponMutation.ts

src/types/couponTypes.ts

minjeong9919

고생하셨습니다 👍

public/images/backconfetti.png

public/images/eventTop.png

src/app/event/_components/EventTab.tsx

minjeong9919 · 2024-08-13T04:37:56Z

src/app/event/_components/EventTop.module.scss

+.container {
+  width: 100%;
+  height: 90rem;
+  background: url('../../../../public/images/backconfetti.png'), linear-gradient(to left, #d3e1ff, #fcfcf2);


요거 위에서 import 먼저 하시는건 어떠신가욤??

Suggested change

background: url('../../../../public/images/backconfetti.png'), linear-gradient(to left, #d3e1ff, #fcfcf2);

import backConfetti from '../../../../public/images/backconfetti.png';

background: url(backConfetti), linear-gradient(to left, #d3e1ff, #fcfcf2);

css도 이미지를 import 해올수 있나용???

minjeong9919 · 2024-08-13T04:39:24Z

src/app/event/_components/EventTop.module.scss

+  @include flex-center;
+}
+
+.inner img {


오오 따로 Image 태그에 클래스명 안붙이고 img라고해도 되나요오?! 첨 안 사실

예쓰예쓰~ 아무래도? 이미지 태그니까? 근데 나쁜거 같기동,,?

src/app/event/_components/Wheel.tsx

src/hooks/useCreateCouponMutation.ts

armd482

수고하셨습니다

src/app/event/_components/EventTab.tsx

src/app/event/_components/EventTitle.tsx

src/hooks/useCreateCouponMutation.ts

… into 161-feat-이벤트페이지

ggjiny

고생 많으셨어요!!!! 디자인 센스 쩌러요 프로젝트 퀄리티 업🎀🎀

ggjiny · 2024-08-15T09:15:36Z

src/api/productAPI.ts

음 이게 아마 찜 하트 때문에 필요해서 제가 넣은거 같아요!! 로그인 해야지만 좋아요 상태가 보여서용

ggjiny · 2024-08-15T09:18:21Z

src/app/event/page.tsx

+
+const cn = classNames.bind(styles);
+
+export default function Page() {


이름을 EventPage라고 해도 좋을 것 같아요오

ggjiny · 2024-08-15T09:20:22Z

src/app/event/layout.tsx

+  await queryClient.prefetchQuery({ queryKey: ['coupons'], queryFn: getCoupon });
+  // const couponData = queryClient.getQueryData(['coupons']);
+


페이지말고 레이아웃에서 데이터를 받아오시는군요?! 주석은 지워도 될 것 같아용~

ggjiny · 2024-08-15T09:29:30Z

src/app/event/_components/Wheel.tsx

대박👍👍 혹시 컴포넌트 이름을 룰렛 말고 휠로 하신 이유가 있을까용?? 저는 살짝 헷갈렸는데 가볍게 지나가셔도 됩니당~

ggjiny · 2024-08-15T09:33:06Z

src/app/event/_components/BenefitJoin.tsx

+            <button
+              className={cn('coupon-down')}
+              key={minPrice}
+              type='button'
+              onClick={() => handleClick(price, minPrice)}
+            >
+              <Image className={cn('coupon')} src={couponDownImg} alt='쿠폰이미지' fill />
+              <h3 className={cn('discount')}>{price.toLocaleString()}</h3>
+              <span className={cn('min-price')}>{minPrice}</span>
+            </button>


크기가 커서 버튼 말고 div로 감싸도 될 것 같다는 개인적인 생각입니다~

ggjiny · 2024-08-15T09:37:38Z

src/app/event/_components/EventTab.tsx

+        {EVENT_LIST.map((event) => (
+          <Link
+            key={event.id}
+            href={`#${event.id}`}


오호 id로 해당 섹션으로 이동하는거 좋은 것 같타요! 그냥 스크롤을 쭉 내리면 인터섹션 옵저버로 자동으로 바뀌나요?./ ?

bokeeeey · 2024-08-15T13:50:38Z

src/hooks/useCreateCouponMutation.ts

+import { SetStateAction } from 'react';
+import { toast } from 'react-toastify';
+
+const queryClient = new QueryClient();


영은님 저도 만들어보는중인데 이거 useQueryClient로 사용해도 돼요

어 오 그러네요!!! 굿굿👍👍 반영하겠습니다!!

…161-feat-이벤트페이지

Young2un added 29 commits July 18, 2024 01:52

Feat: 이벤트 윗부분

5464385

Feat: 이벤트 타이틀 컴포넌트 구현

3585ab6

Fix: hasShop 옵셔널로 변경

07b7962

Feat: 가입혜택 하는 중

3434630

Feat: 이벤트 상단고정탭 제작중 (수정 예정)

4c7434b

Feat: 레이아웃 구성 중

5f5dacf

Merge: branch 'develop' of https://github.com/Quad8/quad8-front into …

7ec731b

…161-feat-이벤트페이지

Style: alt 속성 추가

b8c42d7

Style: 오타 수정

4f9dbd0

Feat: 1차 휠 구현

a9f9a2f

Feat: 룰렛 로직까지 구현

da20a7a

Style: 페이지네이션 글씨 크기 수정

0b6cc42

Style: 카테고리 클릭범위 스타일 수정

3913bf6

Style: 오타있길래 수정했슴당

00b884f

Style: 토큰 필요없는 부분이라 삭제

75fb6a3

Feat: 이미지 추가

12651ab

Feat: 룰렛 1일 1회 로직 추가

5aead6f

Chore: 컨페티 라이브러리 설치

ca7fa53

Feat: 이벤트 프리패치, 기타적인거 수정

ca49a68

Style: 오타수정

735f7b8

Style: 오타수정

e3d8034

Merge: branch 'develop' of https://github.com/Quad8/quad8-front into …

f337081

…161-feat-이벤트페이지

Docs: 이미지, 아이콘 추가

2758e85

Feat: 배송비무료 부분 완성

c506339

Refactor: 뮤테이션 커스텀 훅으로 빼고 기타 수정

1c1c547

Feat: 이벤트 마지막부분 수정

59ea522

Feat: 회원가입 쿠폰존 구현

251f43a

Fix: post 시 메세지를 활용할 수 있게 api 변경

ef5ee18

Feat: 스크롤 감지 active

f674c3a

Young2un added the 📖 Page 페이지 제작 label Aug 12, 2024

Young2un and others added 4 commits August 13, 2024 01:41

Style: px 실수 수정

126cb0b

Refactor: 대소문자 수정

ffd4a89

Fix: src/types/CouponTypes.ts 삭제

8008500

Merge: branch '161-feat-이벤트페이지' of https://github.com/Quad8/quad8-front…

2c35cbd

… into 161-feat-이벤트페이지

bokeeeey approved these changes Aug 13, 2024

View reviewed changes

minjeong9919 approved these changes Aug 13, 2024

View reviewed changes

armd482 approved these changes Aug 13, 2024

View reviewed changes

Young2un and others added 7 commits August 14, 2024 00:07

Refactor: 베럴 방식으로 변경

ac1caed

Refactor: 리뷰 반영

607b245

Style: 사소한 단어 수정

676151b

Merge branch 'develop' into 161-feat-이벤트페이지

5f5b68a

Merge: branch '161-feat-이벤트페이지' of https://github.com/Quad8/quad8-front…

245737f

… into 161-feat-이벤트페이지

Merge: 풀당겨온거 머지

f77406b

Style: 대소문자 이슈,,

1d9e9f3

ggjiny approved these changes Aug 15, 2024

View reviewed changes

bokeeeey reviewed Aug 15, 2024

View reviewed changes

Young2un and others added 11 commits August 16, 2024 13:36

Style: type 추가

72afd5a

Fix: 민정님 요청 변경사항

c742f0b

Style: 대소문자 오타 수정

b3f1f28

Refactor: 보경님 리뷰 반영

bbacd7a

Fix: 머지 안되는 이슈

909a0a3

Fix: 풀안되는 이슈

5fddf24

Merge: branch 'develop' of https://github.com/Quad8/quad8-front into …

2fe7576

…161-feat-이벤트페이지

Fix: import 오류 수정

ed83118

Chore: 이거 안올리니까 푸시가 안됨

227db85

Fix: import 이슈

d458106

Merge branch 'develop' into 161-feat-이벤트페이지

a78119b

Young2un merged commit 1819b9d into develop Aug 18, 2024

bokeeeey mentioned this pull request Aug 19, 2024

[Deploy] 새벽에 발생한 build 에러 해결 및 삭제 파일 복구 #179

Merged

3 tasks

Young2un deleted the 161-feat-이벤트페이지 branch October 23, 2024 05:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feat] 이벤트페이지 #174

[Feat] 이벤트페이지 #174

Young2un commented Aug 12, 2024

bokeeeey left a comment

bokeeeey Aug 12, 2024

minjeong9919 left a comment

minjeong9919 Aug 13, 2024

Young2un Aug 13, 2024

minjeong9919 Aug 13, 2024

Young2un Aug 13, 2024

armd482 left a comment

ggjiny left a comment

ggjiny Aug 15, 2024 •

edited

Loading

ggjiny Aug 15, 2024

ggjiny Aug 15, 2024

ggjiny Aug 15, 2024

ggjiny Aug 15, 2024

ggjiny Aug 15, 2024

bokeeeey Aug 15, 2024

Young2un Aug 15, 2024 •

edited

Loading

-  background: url('../../../../public/images/backconfetti.png'), linear-gradient(to left, #d3e1ff, #fcfcf2);
+ import backConfetti from '../../../../public/images/backconfetti.png';
+  background: url(backConfetti), linear-gradient(to left, #d3e1ff, #fcfcf2);


		const cn = classNames.bind(styles);

		export default function Page() {

		await queryClient.prefetchQuery({ queryKey: ['coupons'], queryFn: getCoupon });
		// const couponData = queryClient.getQueryData(['coupons']);

[Feat] 이벤트페이지 #174

[Feat] 이벤트페이지 #174

Conversation

Young2un commented Aug 12, 2024

🚀 작업 내용

📝 참고 사항

🖼️ 스크린샷

🚨 관련 이슈 (이슈 번호)

✅ 체크리스트

bokeeeey left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

minjeong9919 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

armd482 left a comment

Choose a reason for hiding this comment

ggjiny left a comment

Choose a reason for hiding this comment

ggjiny Aug 15, 2024 • edited Loading

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

Young2un Aug 15, 2024 • edited Loading

Choose a reason for hiding this comment

ggjiny Aug 15, 2024 •

edited

Loading

Young2un Aug 15, 2024 •

edited

Loading