f-lab-edu/airbnb-clone

위치 기반 숙박 찾기 웹어플레이케션

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

airbnb-clone's Issues

[랜딩페이지] Category UI 초안 적용

svgr 적용

[Tab컴포넌트] zustand 상태 관리 변경

[랜딩페이지] Search Tabs

Tasks

• #22
• #23
• #24
• #25

shadcn-ui 세팅

Image Carousel Component 구현

Tasks

• #27
• #29
• #30
• #28

게스트 인원 선택 UI/UX 버튼 컨트롤 로직

요구 사항

• 1. 성인,어린이 인원수를 합하여 16이 되면 어린이는 -,+ 모두 disabled 처리 되어야 한다, 성인은 + 만 disabled처리 되어야한다.
• 2. 유아의 인원수가 5 가 되면 + 가 disabled 처리 되어야 한다.
• 3. 반려동물도 5가 되면 +가 disabled 처리 되어야 한다.

---

참고 이미지

1. 성인,어린이 인원수를 합하여 16이 되면 disabled처리가 되어야 한다.
   

2. 유아의 인원수가 5 가 되면 + 가 disabled 처리 되어야 한다.

테스트 프레임워크 적용

테스트 프레임워크 선정

선정 기준

• Next.js와 설치 호환성이 좋아야 함
• Test 개발 경험이 없는 개발자의 역량 향상을 위해 시장에서 많이 사용하는 툴 선호
• Community 지원과 참고할 수 있는 문서들이 많은 툴 선호

Next.js 공식문서 테스트 유형 참고

1. Unit Testing
   • Component testing
   • Intergration testing
2. End-to-End(E2E) Testing
3. Snapshot Testing

Next.js 14 App router 에서 제안한 보편적인 툴 <공식문서 참고>

• vitest - Unit Testing
• Jest - Unit Testing, Snapshot Testing
• Playwright - e2e
• Cypress -e2e

Unit Testing Tool NPM trend 비교

결과

• Vitest가 설치 과정이 Jest보다 단순하지만 시장에서 더 많이 사용 되고 있는 툴은 Jest 이므로, Jest를 통해 테스트 작성에 익숙해진 후 Vitest로 전환하거나 추가 해도 좋을 것 같다.
• Nextjs 공식문서에서 Jest는 비동기 서버 컴포넌트를 지원하지 않아 E2E 테스트를 사용하는 것이 좋다고 권장하는데 어떤 의미인지 와닿지 않아 실제 상황에 마주 했을 때 재고민

npm -> yarn migration

[랜딩페이지] 랜덤 숙소 리스트 mock UI

[랜딩페이지] navbar

Query 훅과 MSW 통합으로 모의 API 환경 구축

• MSW 라이브러리 설치
• MSW 서버 설정 파일 생성
• 기본 API 엔드포인트에 대한 모킹 핸들러 구현
• Query 훅에 MSW 모의 데이터 연결
• 테스트 환경에서 모의 데이터 응답 확인

[랜딩페이지] 여행지 검색

[Image Carousel] UI 구현

jest Next14 Image 테스트 warning

Vercel Next 이슈 참고 (vercel/next.js#65161 (comment))

vercel/next.js#65161 (comment)

추천 리스트 구현

• 응답 데이터 DTO 타입화
• API MSW핸들러 구현
• 커스텀 쿼리 훅 생성

[Image Carousel] 동작 로직 구현

[Image Carousel] 컴포넌트 설계 및 구조 적용

theme-color 세팅

[랜딩페이지] 여행인원 선택 Popover 구현 및 상태 관리 로직 연동

[Image Carousel] 테스트 작성

BodyTabs 제네릭 타입 -> 속성에서 타입 받기 변경

질문에 대한 답변을 하자면, 제네릭으로 타입을 넘겨도 되지만, 복잡하기 때문에, 속성을 통해 타입을 받아서 하위 컴포넌트에서 사용하게 하면 될 것 같습니다.

Originally posted by @kimuijung in #40 (comment)

[랜딩페이지] Category 컴포넌트 완성

Tasks

• #27
• #29
• #30
• #28

[랜딩 페이지] 체크인

[랜딩페이지] 체크 아웃

DropDown 공통 컴포넌트 구현

eslint, prettier 세팅

Skeleton 적용

무한 스크롤 시 skeleton적용

• 스켈레톤 UI 컴포넌트 구현
• 애니메이션 적용