[재활용프로젝트][리액트] main화면 구성하기

목차

1. 초기 구상의 모습
2. 참고
3. 대충 구성한 초안 모습
4. 사용한 라이브러리(framer motion)
5. 구성 방향
6. logo.tsx
7. DetailMore.tsx

 

초기 구상의 모습

초기 구상한 모습

 

참고

https://kimjy97.github.io/Portfolio/

JongYeon's PORTFOLIO

 

대충 구성한 초안 모습

 

사용한 라이브러리(framer motion)

https://www.framer.com/motion/

Documentation | Framer for Developers

 

애니메이션 느낌의 css로 만들 수 있는 쉽고 간편한 라이브러리이다.

 

구성 방향

정말 간단하다 직관적으로 보이는 것들을 컴포넌트화 시켰고 다음과 같다.

컴포넌트를 간단하게 표시한 모습

 

logo.tsx

cpp

import { motion } from 'framer-motion';
import styles from './MainLogo.module.scss';

function MainLogo() {
  return (
    <motion.div whileHover={{ scale: 1.1 }}>
      <div className={styles['logo-style']}>Sejong Reuse Hub</div>
    </motion.div>
  );
}

export default MainLogo;

 

framer motion을 이용해 생동감을 넣어준 로고 정말 사용하기 편리한 것 같다..

 

DetailMore.tsx

cpp

import { useState, useEffect } from 'react';
import { useAnimate, stagger, motion } from 'framer-motion';
import styles from './DetailMore.module.scss';

const staggerMenuItems = stagger(0.1, { startDelay: 0.15 });

function useMenuAnimation(isOpen: boolean) {
  const [scope, animate] = useAnimate();

  useEffect(() => {
    animate('.arrow', { rotate: isOpen ? 180 : 0 }, { duration: 0.2 });

    animate(
      'ul',
      {
        clipPath: isOpen
          ? 'inset(0% 0% 0% 0% round 10px)'
          : 'inset(10% 50% 90% 50% round 10px)',
      },
      {
        type: 'spring',
        bounce: 0,
        duration: 0.5,
      },
    );

    animate(
      'li',
      isOpen
        ? { opacity: 1, scale: 1, filter: 'blur(0px)' }
        : { opacity: 0, scale: 0.3, filter: 'blur(20px)' },
      {
        duration: 0.2,
        delay: isOpen ? staggerMenuItems : 0,
      },
    );
  }, [isOpen]);

  return scope;
}

function DetailMore() {
  const [visible, setVisible] = useState<boolean>(false);
  const scope = useMenuAnimation(visible);
  return (
    <nav className="menu" ref={scope}>
      <motion.button
        className={styles['button-style']}
        whileTap={{ scale: 0.97 }}
        onClick={() => setVisible(!visible)}
      >
        구성원 보기
        <div className="arrow" style={{ transformOrigin: '50% 55%' }}>
          <svg width="15" height="15" viewBox="0 0 20 20">
            <path d="M0 7 L 20 7 L 10 16" />
          </svg>
        </div>
      </motion.button>
      <ul
        style={{
          pointerEvents: visible ? 'auto' : 'none',
          clipPath: 'inset(10% 50% 90% 50% round 10px)',
        }}
      >
        <li>신혁수 </li>
        <li>안리안 </li>
        <li>강재구 </li>
        <li>안희찬 </li>
        <li>윤덕건 </li>
      </ul>
    </nav>
  );
}

export default DetailMore;

state를 통해 열고 닫히는 버튼을 구현해 보았다.

 

MianMapBack.tsx

cpp

import getGeolocation from 'utils/getGeolocation';
import { useRef } from 'react';
import {
  Map,
  MapMarker,
  MapTypeControl,
  ZoomControl,
} from 'react-kakao-maps-sdk';
import { motion } from 'framer-motion';
import UseKakaoLoader from '../../hooks/useKakoaLoader';
import styles from './MainMapBack.module.scss';

function MainMapBack() {
  UseKakaoLoader();
  const { longitude, latitude } = getGeolocation();
  const mapRef = useRef<kakao.maps.Map>(null);
  return (
    <motion.div whileHover={{ scale: 1.1 }}>
      <Map
        center={{
          lat: latitude,
          lng: longitude,
        }} // 지도의 중심 좌표
        className={styles['map-background']} // 지도 크기
        level={1} // 지도 확대 레벨
        ref={mapRef}
      >
        <MapMarker // 인포윈도우를 생성하고 지도에 표시합니다
          position={{
            // 인포윈도우가 표시될 위치입니다
            lat: latitude,
            lng: longitude,
          }}
        >
          <div style={{ padding: '5px', color: '#000' }}>교환해요</div>
        </MapMarker>
      </Map>
    </motion.div>
  );
}

export default MainMapBack;

 

카카오 api로 맵을 불러오는 것을 알고 싶다면 다음을 참고하자

https://be-senior-developer.tistory.com/57

[재활용 프로젝트][리액트] 카카오 api Typescript 맵 구현