크롬 확장 프로그램 - 로아 돌깎깎

스토어 링크

로아 돌깎깎

---

깃허브 링크

GitHub - ImInnocent/lost-ark-stone: 로스트 아크 돌깎기

---

서비스 설명

대한민국 MMORPG의 희망 '로스트 아크'의 어빌리티 스톤을 세공해보세요.
  - 높은 몰입감을 위한 실제 게임 화면 사용
  - 5개에서 10개까지 조절 가능한 슬롯
  - 기존 텍스트 기반의 시뮬레이터가 아닌 이미지로 된 시뮬레이터
  - 마우스를 올리면 나오는 메뉴 버튼

---

기술 스택

배포: Chrome Extension
프론트엔드: React.js + HTML + CSS + Javascript
빌드: Webpack + Customize-cra

---

주요 구현 사항들

메뉴 태그에 마우스 Hover시, 메뉴창이 옆에서 나오게 하기

// material-ui의 style을 이용한 CSS 적용
  hoverMenu: {
    position: "fixed", 
    right: -225, 
    width: 300, 
    height: 300, 
    
    // 정중앙 정렬을 위한 transform
    top: "50%", 
    transform: 'translate(0, -50%)',
    
    // 다른 element보다 위에 오게
    zIndex: 10,
    
    // 마우스 hover시에 좌측으로 이동
    '&:hover': {
      transition: "transform 0.3s linear",
      transform: `translate(-225px, -50%)`,
    },
    ...
  },