[김수정] assignment 기능구현

[crystal993]

배포 링크

B2C Car Sharing Site 바로가기

• aws s3로 배포했습니다

Description

차량 대여를 위해 차량 목록을 불러오는 사이트입니다.

사용 Tools

구현 목록

Assignment 1: heavy_check_mark:

• 필수 요구 사항
  • Figma 상의 디자인 및 기능 구현
    • 차량 리스트
      • 차량이 없을 때 처리
      • 차량 불러오는 중 처리
    • 차량 상세

- 추가 구현 사항 ✖️

• SEO
  • 카카오톡, 페이스북에 공유 시 아래의 내용이 미리보기로 노출되도록 해야 함
    • 제목: car.brand + car.name
    • 내용: 월 car.amount 원
    • 사진: 차량 사진

Assignment 1

• Figma 상의 디자인 및 기능 구현
  • 모바일 웹 기준으로 제작
  • 450px ~ 360px까지 고려해서 제작
• 필수 요구 사항
  • Figma 상의 디자인 및 기능 구현

Chrome	Whale

Assignment 2

• 차량 리스트

차량이 없을 때	차량을 불러올 때

차량이 없을 때, 차량을 불러올 때

• CarList.jsx
  

  pre-onboarding-7th-2-1-9/src/components/main/CarList.jsx

  Lines 8 to 39 in 4790248

  	const CarList = () => {
  	const state = useCarState();
  	const getAllCarList = useAllCarList();
  	const { carList, isLoading } = state;
  	useEffect(() => {
  	getAllCarList();
  	}, []);
  	if (isLoading) {
  	return (
  	<Wrapper>
  	<MsgBox txt={'불러오는 중'} />
  	</Wrapper>
  	);
  	} else if (carList.length === 0) {
  	return (
  	<Wrapper>
  	<MsgBox txt={'차량이 없습니다.'} />
  	</Wrapper>
  	);
  	}
  	return (
  	<>
  	{carList &&
  	carList.map(car => {
  	return (
  	<>
  	<CarItem car={car} key={car.id} />
  	</>
  	);
  	})}

차량을 불러올 때와 차량이 없을 때 텍스트를 다르게 해서 MsgBox 컴포넌트를 재사용했습니다.
Context API에서 전역으로 관리하는 isloading 변수가 true일 때 불러오는 중을 표시하고,
Context API에서 전역으로 관리하는 carList 변수의 배열의 길이가 0일 때 차량이 없습니다를 표시합니다.

Assignment 3

• 차량 상세
  

Assignment 4 (추가 구현 사항) - SEO

pre-onboarding-7th-2-1-9/src/components/metaTag/SEOMetaTag.jsx

Lines 1 to 22 in 0878117

	import React from 'react';
	import { Helmet } from 'react-helmet-async';
	import { useLocation } from 'react-router-dom';
	import { convertAmount } from '../../utils/function/convertAmount';
	const SEOMetaTag = () => {
	const { state } = useLocation();
	if (state)
	return (
	<Helmet>
	<title>{`${state.attribute.brand} ${state.attribute.name}`}</title>
	<meta property="og:type" content="website" />
	<meta property="og:title" content={`${state.attribute.brand} ${state.attribute.name}`} />
	<meta property="og:description" content={`월 ${convertAmount(state.amount)} 원`} />
	<meta property="og:image" content={state.attribute.imageUrl} />
	<link rel="canonical" href={state.url} />
	</Helmet>
	);
	};
	export default SEOMetaTag;

• react-helmet을 적용하면 메타태그들과 title이 동적으로 바뀌는 것을 볼 수 있었습니다.
• SNS 공유 할 때는 SNS 크롤러 봇이 CSR의 메타태그들을 인식하지 못했습니다.
• nextjs나 cloudfront + Lambda로 SEO를 적용해볼 예정입니다.

Assignment 5 (추가 구현 사항)

5-1. 태그 스와이퍼 기능 구현

pre-onboarding-7th-2-1-9/src/components/main/SwiperTags.jsx

Lines 10 to 43 in 4790248

	const SwiperTags = props => {
	const { segment, fuelType } = useCarState();
	return (
	<Wrapper>
	<Swiper slidesPerView={5} spaceBetween={1} initialSlide={1} centeredSlides={true}>
	{segmentOption &&
	segmentOption.map((option, idx) => (
	<SwiperSlide key={idx}>
	<Button
	key={idx}
	value={option.value}
	content={option.name}
	active={option.value === segment ? 'active' : ''}
	onClick={props.onSegClickHandler}
	/>
	</SwiperSlide>
	))}
	{fuelTypeOption &&
	fuelTypeOption.map((option, idx) => (
	<SwiperSlide key={idx}>
	<Button
	key={idx}
	value={option.value}
	content={option.name}
	active={option.value === fuelType ? 'active' : ''}
	onClick={props.onFuelClickHandler}
	/>
	</SwiperSlide>
	))}
	</Swiper>
	</Wrapper>
	);
	};

• Swiper.js 리액트 버전을 사용하여 구현하였습니다.
• 한 슬라이드에 5개가 보이도록 구현하고, 초기값을 3번째 인덱스에 존재하는 태그로 지정해주었습니다.

5-2. 각종 util함수와 상수들

차종, 연료 변환

실제로 서버 API로 응답받는 데이터와 요구사항으로 주어지는 화면상의 데이터 형태가 달랐습니다.
사용자가 보기 쉽게 구현해야만 했습니다.

segmentOption, fuelTypeOption 함수

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

Lines 1 to 9 in 4790248

	const segmentOption = [
	{ value: '', name: '전체' },
	{ value: 'C', name: '소형' },
	{ value: 'D', name: '중형' },
	{ value: 'E', name: '대형' },
	{ value: 'SUV', name: 'SUV' },
	];
	export default segmentOption;

• option을 value, name으로 나눠서 API로 받아오는 값을 value, 화면상에 보여지는 값을 name으로 분류하여 파일을 만들어서 따로 관리하였습니다.

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

Lines 1 to 22 in 4790248

	import fuelTypeOption from '../constant/fuelTypeOption';
	import segmentOption from '../constant/segmentOption';
	export const segConvertName = segVal => {
	const result = segmentOption.filter(seg => {
	if (seg.value === segVal) {
	return seg.name;
	}
	return null;
	});
	return result[0].name;
	};
	export const fuelConvertName = fuelVal => {
	const result = fuelTypeOption.filter(fuel => {
	if (fuel.value === fuelVal) {
	return fuel.name;
	}
	return null;
	});
	return result[0].name;
	};

• segment와 fuelType option의 value를 이름으로 변환해주는 함수이다.
• 서버에서 받은 값을 화면 상에 UI로 보기 쉽게 변환해주는 함수입니다.
• segVal은 서버에서 받아오는 segment값이므로 segmentOption 배열에 filter로 value와 일치하면 name을 반환하게끔 코드를 짰습니다.

돈 단위 변환

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

Lines 1 to 3 in 4790248

	export const convertAmount = amount => {
	return amount.toLocaleString('ko-KR');
	};

이용 가능 날짜 변환

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

Lines 1 to 9 in 4790248

	const days = ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'];
	export const convertUsableDate = dates => {
	const startDate = new Date(dates);
	const month = startDate.getMonth() + 1;
	const date = startDate.getDate();
	const dayName = days[startDate.getDay()];
	return month + '월 ' + date + '일' + ` (${dayName}) 부터`;
	};

하루 이내일 때 변환

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

Lines 1 to 13 in 4790248

	export const IsCreatedWithinDay = curDate => {
	const today = new Date();
	const resultDate = new Date(curDate);
	const timeGap = (today - resultDate) / (60 * 60 * 1000);
	// Time (minutes * seconds * millisecond)
	if (timeGap >= -24 && timeGap <= 24) {
	// 하루 이내일 때
	return true;
	} else {
	return false;
	}
	};

[tirhande]

Assignment 5

• Swiper 라이브러리 쓰신게 인상 깊어요!!
  라이브러리 안쓰고 css로 조정했는데 폰으로 접속해보면 잘되는데
  PC에서 스와이프하기가 조금 애매하더라구요ㅠㅠ (Shift + 스크롤 해야지만 되는..)

• 하루 이내 변환 함수도 boolean 값으로 리턴하는 것이 좋네요!!

[songseul]

• 컴포넌트 별 재사용 가능하도록 스타일 컴포넌트로 props로 전달 하여 사용 하신 점이 대단 한것 같아용
• 값의 이름을 변환 해주거나, 타입을 확인하는 함수를 전역에 따로 작성하셔서 사용 하신 점도 좋은것 같습니다
• 스와이퍼 사용은 좋았는데 앞에 있는 버튼이 중간까지 당겨져 오는것 같아서 너비 설정을 조금 더 해주시면 사용 할때 더 편할것 같습니다.

[jun-05]

• MsgBox 처럼 생각해보면 재활용 가능한 컴포넌트인데, 저는 왜 다시 만들었나 싶네요.
• 스와이프 같은 라이브러리가 어떻게 사용되는지 알 수 있었고, 엄청 부드럽게 움직이고 스크롤바도 자동적으로 처리해주니 신기했습니다
• 아쉬운 점은, 같은 태그를 누를시 재로딩은 없어도 되지 않나 싶었고, 상세 페이지 -> 리스트 페이지로 이동시 데이터 처리 에러가 있는거 같아요.

[crystal993]

뒤로가기 눌렀을 때 리스트는 초기화 되는데, 태그 초기화를 깜빡했네요 ㅜ 태그까지 초기화해서 에러 해결했습니다! 코멘트 남겨주셔서 감사합니다!

[anotheranotherhoon]

• 단연 스와이프를 사용하여 메뉴 슬라이드를 만드신 점이 가장 인상적이네요.

[NR0617]

스와이퍼 기능이 있어서 보기 좋아요!
컴포넌트를 잘 나누셔서 코드 가독성이 좋아요