[창훈] assignment 기능구현

[anotheranotherhoon]

pre-onboarding-7th-2-1-9

Description

차량 대여를 위해 차량 목록을 불러와서 표시해주는 서비스입니다.
상태관리 라이브러리로 Recoil을 css라이브러리로 tailwind를 사용하였습니다.

Demo Page

배포 페이지

Assignment 1

• Figma 상의 디자인 및 기능 구현

  • 모바일 웹 기준으로 제작
  • 450px ~ 360px까지 고려해서 제작
    

• 필수 요구 사항

  • Figma 상의 디자인 및 기능 구현

Assignment 2

pre-onboarding-7th-2-1-9/src/container/Main.js

Lines 10 to 33 in 79faf69

	const segment = useRecoilValue(segmentParameter)
	const CarsLoadable = useRecoilValueLoadable(carList(segment))
	let Cars = []
	let content = null
	switch (CarsLoadable.state) {
	case 'hasValue':
	Cars = CarsLoadable.contents
	if (Cars.length === 0) {
	content = <PageState state={'empty'} />
	} else {
	content = (Cars?.map((car, index) => (
	<CarItem key={index} car={car} />
	)))
	}
	break;
	case 'hasError':
	content = <PageState state={'error'} />
	break;
	case 'loading':
	content = <Loading />
	break;
	default:
	content = <Loading />
	}

• 차량 리스트

  const segment = useRecoilValue(segmentParameter)
  const CarsLoadable = useRecoilValueLoadable(carList(segment))

segment의 값이 바뀔 때마다 차량리스트를 GET하는 함수에 파라미터를 바꿔준다. useEffect에 의존성배열에 segment를 넣어준 것 처럼 작동하며
segment의 초기 값이 null 이므로 최초에는 모든 차량 리스트를 가져온다.

• 차량이 없을 때 처리

if (Cars.length === 0) {
content = <PageState state={'empty'} />
}

차량리스트에서 빈 배열일 경우 차량 데이터가 없다는 메세지를 보여준다.

• 차량 불러오는 중 처리

// CarsLoadable은 hasValue, hasError, loading 상태를 가진다. 
case 'loading':
  content = <Loading />

loading 상태일 경우 Loading 컴포넌트를 보여준다.

Assignment 3

• 차랑 상세

pre-onboarding-7th-2-1-9/src/container/CarDetail.js

Line 14 in 79faf69

const CarLoadable = useRecoilValueLoadable(filteredCarList(id))

pre-onboarding-7th-2-1-9/src/recoil/carList.js

Lines 12 to 19 in 79faf69

	export const filteredCarList = selectorFamily({
	key: 'filteredCarList',
	get:(id) => async () => {
	const response = await fetchCarList()
	const filteredCar = response.filter((car)=>car.id === Number(id))
	return filteredCar[0]
	}
	})

  const { state } = useLocation()

const handleClickCarInfo = () => {
    navigate(`/car/${car.id}`, {
      state: car
    })
  } 

차량의 id로 차량 하나의 데이터를 가져오는 API가 없어서 차량 클릭시 /car/${car.id} 로 네비게이트 하면서 두 번째 인자로 차량의 정보를 함께 보내주려고 했으나 클릭이 아닌 해당 URL에 직접 이동하려 할 경우 SEO 이슈가 발생할 것이라 판단되어, 전체 데이터에서 데이터를 필터하는 방법을 채택하였다.
차량 전체 리스트를 가져오는 useRecoilValueLoadable의 로직과 같다.

Assignment 4 (추가 구현 사항)

• SEO 구현
  

  pre-onboarding-7th-2-1-9/src/utils/setMetaTags.js

  Lines 1 to 15 in 79faf69

  	export const setMetaTags = (brand, name, amount,imageUrl) => {
  	// console.log(brand, name, amount, imageUrl)
  	document
  	.querySelector(`meta[property='og:title']`)
  	.setAttribute('content', `${brand} ${name}`)
  	document
  	.querySelector(`meta[property='og:description']`)
  	.setAttribute('content', `월 ${amount} 원`)
  	document
  	.querySelector(`meta[property='og:image']`)
  	.setAttribute('content', `${imageUrl}`)
  	document
  	.querySelector(`meta[property='og:url']`)
  	.setAttribute('content', window.location.href)
  	}

메타 태그를 동적으로 바꾸는 함수를 이용하였고 개발자 도구에서는 잘 적용되었으나, SNS에서는 적용하지 못 했다.

[tirhande]

Assignment 2

• recoil 쓰셔서 상태 관리 하신점이 좋네요!!! 👍
• 그리고 switch로 컴포넌트 변경하는것도 참신해서 좋아요!

[jun-05]

• tailwind나 recoil 등, 새로운거 찾아서 쓰시는게 대단하신거 같아요.
• 전체적으로 잘 구현하신거 같습니다!
• 아쉬운건 CSS를 max-width라도 잡아줬으면 어땠을까 하는 생각이 있었네요.

[songseul]

• recoil로 상태 관리 하는 점이 인상 깊어요!!
• switch를 사용 하시거나 필터로 값을 뿌리는 방법들 이전 과제에서 사용 하신 방법 말도로 시도 하시는 점이 좋은 방향 같습니다
• 피씨에서도 봤을때 전체 너비를 잡아 주시면 좋을것 같아요

[im-binary]

• 차량을 불러올 때나 없을 때 에러나 switch 문으로 처리를 잘 하신 것 같습니다!
• recoil을 쓰니까 확실히 타 상태관리 라이브러리보다 가독성이 좋은 것 같네용
• SEO 구현하기 위한 노력 멋있으십니다..!

아 궁금한 게 있는데,

 let Cars = [] 

배열을 선언할 때 let으로 선언하고 변수 이름이 대문자로 시작하는 이유가 있을까요?!

[anotheranotherhoon]

car 로 바꾸는 편이 좋을 것 같네요! 감사합니다.

[NR0617]

차량이 없을때 state를 props로 넘겨주는 방법을 사용한게 재미있어요
switch case문을 사용하기 적절한 부분이라고 생각합니다 저도 다음에 사용해보고싶어요!