Skip to content

Commit e2f4731

Browse files
author
jyn
committed
Merge branch 'dev'
2 parents 76cd3ba + 596a67d commit e2f4731

File tree

9 files changed

+280
-4
lines changed

9 files changed

+280
-4
lines changed

‎src/app/(test)/test-calendar/hyun/page.tsx.bak‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
'use client';
2+
3+
import CalendarForForm from '@/shared/components/calendar/components/calendar-for-form';
4+
import { useCalendarStore } from '@/shared/libs/stores/useCalendarStore';
5+
6+
export default function Page() {
7+
const { date, selectedDate } = useCalendarStore();
8+
9+
return (
10+
<div className="bg-green-100">
11+
<div className="text-3xl text-black">date:{date}</div>
12+
<div className="text-3xl text-black">selectedDate:{selectedDate}</div>
13+
14+
{/* 캘린더 컴포넌트 사용 */}
15+
<CalendarForForm />
16+
</div>
17+
);
18+
}

‎src/app/(test)/test-calendar/my/page.tsx.bak‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
'use client';
2+
import { useState } from 'react';
3+
4+
import { mockScheduleData } from '@/features/(test)/mockSchedules';
5+
import CalendarForForm from '@/shared/components/calendar/components/calendar-for-form';
6+
import { useCalendarStore } from '@/shared/libs/stores/useCalendarStore';
7+
8+
const CALENDAR_STYLES = {
9+
calendarWidth: 'md:w-[35.9rem] lg:w-[35rem]',
10+
dayOfWeekStyle: 'md:my-[1.36rem] md:w-[5.128rem] lg:my-0 lg:w-[5rem]',
11+
cellStyle: 'md:my-[1.36rem] md:w-[5.128rem] lg:my-0 lg:w-[5rem]',
12+
} as const;
13+
14+
export default function Page() {
15+
const [selectedId, setSelectedId] = useState<number>();
16+
const mockData = mockScheduleData; // mock data
17+
const { date, selectedDate } = useCalendarStore(); // display data for test
18+
19+
return (
20+
<div className="bg-purple-100">
21+
<div className="text-3xl text-black">date:{date}</div>
22+
<div className="text-3xl text-black">selectedDate:{selectedDate}</div>
23+
<div className="text-3xl text-black">selectedId:{selectedId}</div>
24+
25+
{/* 캘린더 컴포넌트 사용 */}
26+
<CalendarForForm
27+
setSelectedId={setSelectedId}
28+
scheduleArray={mockData}
29+
isForReservation={true}
30+
calendarWidth={CALENDAR_STYLES.calendarWidth}
31+
dayOfWeekStyle={CALENDAR_STYLES.dayOfWeekStyle}
32+
cellStyle={CALENDAR_STYLES.cellStyle}
33+
/>
34+
</div>
35+
);
36+
}

‎src/app/(test)/test-calendar/page.tsx.bak‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
'use client';
2+
3+
import { useRouter } from 'next/navigation';
4+
5+
export default function Page() {
6+
const router = useRouter();
7+
return (
8+
<div className="flex flex-col gap-15 p-[10rem]">
9+
{/* 💥Route to test page */}
10+
<button
11+
className="text-5xl text-purple-400"
12+
onClick={() => router.push('/test-calendar/my')}
13+
>
14+
test my calendar
15+
</button>
16+
<button
17+
className="text-5xl text-green-600"
18+
onClick={() => router.push('/test-calendar/hyun')}
19+
>
20+
test hyun calendar
21+
</button>
22+
<button
23+
className="text-5xl text-blue-400"
24+
onClick={() => router.push('/test-calendar/woo')}
25+
>
26+
test woo calendar
27+
</button>
28+
</div>
29+
);
30+
}

‎src/app/(test)/test-calendar/woo/page.tsx.bak‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
'use client';
2+
3+
import { mockReservationData } from '@/features/(test)/mockReservation';
4+
import CalendarWithReservations from '@/shared/components/calendar/components/calendar-with-reservations';
5+
import { useCalendarStore } from '@/shared/libs/stores/useCalendarStore';
6+
7+
export default function Page() {
8+
const mockData = mockReservationData; // mock data
9+
const { selectedDate, date } = useCalendarStore();
10+
11+
return (
12+
<div className="bg-sub">
13+
<div className="text-3xl">selectedDate:{selectedDate}</div>
14+
<div className="text-3xl">date:{date}</div>
15+
16+
{/* 캘린더 컴포넌트 사용 */}
17+
<CalendarWithReservations reservationArray={mockData} />
18+
</div>
19+
);
20+
}

‎src/app/(test)/test-modal/page.tsx.bak‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
//테스트 파일입니다
2+
'use client';
3+
import { useState } from 'react';
4+
5+
import Modal from '@/shared/components/modal/components';
6+
import Pagination from '@/shared/components/pagination/pagination';
7+
import { Button } from '@/shared/libs/shadcn/components/ui/button';
8+
import { useModalStore } from '@/shared/libs/stores/useModalStore';
9+
10+
export default function Page() {
11+
const [page, setPage] = useState(3);
12+
const [chooseModal, setChooseModal] = useState(1);
13+
14+
const { openModal, closeModal } = useModalStore();
15+
return (
16+
<div className="flex flex-col gap-2.5">
17+
<Pagination totalPages={33} currentPage={page} setPage={setPage} />
18+
<Pagination totalPages={5} currentPage={page} setPage={setPage} />
19+
20+
<Button
21+
className="text-2xl"
22+
onClick={() => {
23+
openModal();
24+
setChooseModal(1);
25+
}}
26+
>
27+
Modal: type-confirm
28+
</Button>
29+
<Button
30+
className="bg-amber-700 text-2xl"
31+
onClick={() => {
32+
openModal();
33+
setChooseModal(2);
34+
}}
35+
>
36+
Modal: type-warning
37+
</Button>
38+
<Button
39+
className="bg-pink-900 text-2xl"
40+
onClick={() => {
41+
openModal();
42+
setChooseModal(3);
43+
}}
44+
>
45+
Modal: type-custom
46+
</Button>
47+
48+
{chooseModal === 1 && (
49+
<Modal type="confirm">
50+
<Modal.Header>수정이 완료되었습니다.</Modal.Header>
51+
<Modal.Button color="blue" ariaLabel="확인 버튼" onClick={closeModal}>
52+
확인
53+
</Modal.Button>
54+
</Modal>
55+
)}
56+
{chooseModal === 2 && (
57+
<Modal type="warning">
58+
<Modal.Header>
59+
저장되지 않았습니다
60+
<br />
61+
정말로 뒤로 가시겠습니까?
62+
</Modal.Header>
63+
<div className="flex gap-2 md:gap-3">
64+
<Modal.Button color="white" ariaLabel="취소" onClick={closeModal}>
65+
취소
66+
</Modal.Button>
67+
<Modal.Button
68+
color="blue"
69+
ariaLabel="확인"
70+
onClick={() => {
71+
setPage(22);
72+
closeModal();
73+
}}
74+
>
75+
확인
76+
</Modal.Button>
77+
</div>
78+
</Modal>
79+
)}
80+
{/* 모달이 하단에서 위로 쑥 올라오는 모션은 못넣을거임.. */}
81+
{chooseModal === 3 && (
82+
<Modal type="custom" extraClassName="w-[38.5rem] h-[54.9rem]">
83+
{/* children */}
84+
<div className="flex-center flex-col text-3xl">
85+
<p>함께 배우면 즐거운 스트릿 댄스</p>
86+
<span>⭐️⭐️⭐️⭐️⭐️</span>
87+
<Modal.Header>소중한 경험을 들려주세요</Modal.Header>
88+
<Modal.Button
89+
color="blue"
90+
ariaLabel="작성하기 버튼"
91+
onClick={closeModal}
92+
>
93+
작성하기
94+
</Modal.Button>
95+
</div>
96+
</Modal>
97+
)}
98+
</div>
99+
);
100+
}

‎src/app/(test)/test-scroll/page.tsx.bak‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
// //테스트 파일입니다. test-scroll
2+
// 'use client';
3+
4+
// import { useRef } from 'react';
5+
6+
// import { getTestApi } from '@/features/(test)/getTestApi';
7+
// import { useItemInfiniteQuery } from '@/shared/libs/hooks/infiniteScroll/useInfiniteQuery';
8+
// import { useInfiniteScroll } from '@/shared/libs/hooks/infiniteScroll/useInfiniteScroll';
9+
10+
// export default function Page() {
11+
// // ✅ 무한 데이터 호출 함수 사용법(useInfiniteQuery 호출)
12+
// // useItemInfiniteQuery로부터 { data, fetchNextPage, hasNextPage, isLoading, isError } 데이터를 받아와서 활용함.
13+
// // useItemInfiniteQuery 호출 시, 매개변수로 keyName,getFn,params를 갖는 객체를 제출함
14+
// // keyName = queryKey에 들어감
15+
// // getFn = queryFn에 들어감(데이터를 불러올 get함수 작성)
16+
// // params = get요청 시 뒤에 붙을 파라미터 항목
17+
// // * 주의! 정해진 문자열 타입의 경우, 단순 문자열로 작성 시 string타입으로 분류되어 에러 발생 가능 -> as const작성하여 리터럴 타입 유지하기
18+
// const { data, fetchNextPage, hasNextPage, isLoading, isError } =
19+
// useItemInfiniteQuery({
20+
// keyName: 'activities',
21+
// getFn: getTestApi,
22+
// params: {
23+
// sort: 'most_reviewed' as const,
24+
// size: 5,
25+
// },
26+
// });
27+
28+
// // ✅ 무한 스크롤 함수 사용법
29+
// // 1. 무한 스크롤 트리거 등록: 아래의 ref가 붙은 트리거가 뷰포인트에 노출되면 다음 데이터를 불러오게 된다.
30+
// const loadMoreRef = useRef<HTMLDivElement | null>(null);
31+
32+
// // ✅
33+
// // 2. useInfiniteScroll 호출하여 무한스크롤 로직 적용
34+
// // 매개변수로 loadMoreRef, isLoading, hasNextPage, fetchNextPage, 50을 제출함
35+
// // loadMoreRef = 트리거 요소
36+
// // isLoading = 아직 앞 요청을 진행중인지(로딩중인지)
37+
// // hasNextPage = 더 이상 불러올 데이터가 없는지
38+
// // fetchNextPage = 다음 데이터를 불러오는 함수(useItemInfiniteQuery로부터 받음)
39+
// // 50 = 트리거 요소의 위치를 기준으로, 몇px 먼저 노출되었을때 fetchNextPage를 호출할지.. 아래 예시는 50px로 적용되는 것임
40+
// useInfiniteScroll(
41+
// loadMoreRef,
42+
// isLoading,
43+
// hasNextPage,
44+
// fetchNextPage,
45+
// 50, // 사전 로딩 거리(px)
46+
// );
47+
48+
// if (isLoading) return <div>로딩 중...</div>;
49+
// if (isError) return <div>에러 발생!</div>;
50+
51+
// // 🐰 참고사항
52+
// // 쿼리키는 queryKey: [keyName, params] 이렇게 설정되어서, 'keyName'캐시 내부의 'params' 캐시키를 갖는 page들이 들어있음.
53+
// // 페이지 단위로 캐싱 되어있기 떄문에, flatMap: 여러 페이지(pages) 각각에 들어있는 activities 배열을 하나의 단일 배열로 이어붙이는(평탄화하는) 작업 필요함
54+
// const test = data?.pages.flatMap((page) => page.activities);
55+
56+
// return (
57+
// <>
58+
// <div className="flex h-[50rem] w-2xl flex-col gap-2 overflow-scroll">
59+
// {test?.map((t) => (
60+
// <div key={t.id} className="rounded-2xl bg-amber-200 p-10">
61+
// <div className="txt-16-medium">{t.title}</div>
62+
// <div className="txt-16-medium">{t.price}</div>
63+
// </div>
64+
// ))}
65+
66+
// {/* 스크롤 트리거 요소 등록: 이 요소가 뷰포트에 노출되면 fetchNextPage가 호출됩니다 */}
67+
// <div ref={loadMoreRef}></div>
68+
// </div>
69+
// </>
70+
// );
71+
// }

‎src/features/activityId/components/map/kakao-map.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const KakaoMap = ({ address }: { address: string | undefined }) => {
1313
lng: 127.03604683616,
1414
});
1515
const [loading, error] = useKakaoLoader({
16-
appkey: process.env.NEXT_PUBLIC_APPKEY!, // 발급 받은 APPKEY
16+
appkey: process.env.NEXT_PUBLIC_KAKAO!, // 발급 받은 APPKEY
1717
});
1818

1919
useEffect(() => {

‎src/features/activityId/libs/hooks/useActivityIdQuery.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { getActivityId } from '@/features/activityId/libs/api/getActivityId';
66
//staleTime - 예약현황 업데이트 빈도: e.g.숙소 앱은 1~3분 & 예약 직전 실시간 확인 refetch()
77
export const useActivityIdQuery = (id: ParamValue) => {
88
return useQuery({
9-
queryKey: ['activityId'],
9+
queryKey: ['activityId', id],
1010
queryFn: () => getActivityId(id),
1111
staleTime: 1000 * 60 * 5,
1212
retry: 1,

‎src/shared/components/calendar/components/calendar-with-reservations.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const CalendarWithReservations = ({
4747
calendarWidth?: string;
4848
dayOfWeekStyle?: string;
4949
cellStyle?: string;
50-
onCellClick?: () => void;
50+
onCellClick?: (dateStr: string) => void;
5151
}) => {
5252
const { year, month, date, setDate, setSelectedDate } = useCalendarStore();
5353
const { thisMonthDays } = getMonthRange(year, month);
@@ -56,7 +56,8 @@ const CalendarWithReservations = ({
5656
setDate(day);
5757
setSelectedDate(year, month, day);
5858
if (onCellClick) {
59-
onCellClick();
59+
const dateStr = formatDateToYMD(new Date(year, month, day));
60+
onCellClick(dateStr);
6061
}
6162
};
6263

0 commit comments

Comments
 (0)