Today

1. 아웃소싱 프로젝트

현재까지 진행사항

• 기본적인 UI그리기(와이어프레임 베이스)
  

• 캐러셀 구현 => 라이브러리 swiper사용
  공식문서 참고

해당 코드 보기

import styled from 'styled-components';

// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/pagination';

// import required modules
import { Pagination } from 'swiper/modules';

const DetailCarousel = () => {
  const dummy = `https://velog.velcdn.com/images/kgh9393/post/7f78fd8d-95e8-40f7-be28-271cd172f7e5/image.jpeg`;

  return (
    <Section>
      <StSwiper
        slidesPerView={4}
        spaceBetween={30}
        pagination={{
          clickable: true
        }}
        modules={[Pagination]}
        className="mySwiper"
      >
        <SwiperSlide>
          <Img src={dummy} />
        </SwiperSlide>
        <SwiperSlide>
          <Img src={dummy} />
        </SwiperSlide>
        <SwiperSlide>
          <Img src={dummy} />
        </SwiperSlide>
        <SwiperSlide>
          <Img src={dummy} />
        </SwiperSlide>
        <SwiperSlide>
          <Img src={dummy} />
        </SwiperSlide>
        <SwiperSlide>
          <Img src={dummy} />
        </SwiperSlide>
      </StSwiper>
    </Section>
  );
};

export default DetailCarousel;

남은 과제

• 모달형식 구현
  사실 원래는 라우터 돔을 이용하여 디테일 페이지로 이동해야 하는데 회의 간 헤더가 애매해져서 다시 메인페이지에서 구현하는 것으로 바뀌었다.
  메인페이지 사이드 바에서 상세보기 버튼을 누르면 해당 내용의 모달이 나오도록 구현

---

Learn

실수

중간에 사소한 오류(실수?)가 있었는데 아래와 같다.

원인은 onClick이벤트를 마운팅 하면서 바로 실행 되게끔 설정한 것..

수정

<Logo onClick={() => navigate('/')}>logo</Logo>
<Button onClick={() => navigate('/')}>뒤로가기</Button>

어려움

지금까지 프로젝트 진행하면서 어려운 사항은 api불러와서 활용.

좌표를 바탕으로 실제 카카오맵 지도와 연결해서 해당 위치를 표시되게끔 해야하는데 아직 공식문서를 보면서 api활용 하는 법을 모르는 것 같다.

---

주절주절

어렵다..