/kukka

꾸까 페이지를 클론하는 프로젝트가 담긴 레포지토리 입니다. (컴포넌트형)

Primary LanguageJavaScript

꾸까 클론 과제

서비스 링크: https://console-lo9-kukka.netlify.app/


👏 프로젝트 소개

리액트없이 바닐라 자바스크립트로 꾸까(https://kukka.kr/) 웹 페이지를 구현하는 과제로
크로스 브라우징에 대한 고민을 바탕으로 제작한 프로젝트입니다.


🚀 스택


⚠️ 규칙

  • CSS class명은 BEM 네이밍 규칙을 준수한다

  • Git Team Ground Rule - Git Flow, 모든 팀원이 체크 후 마지막으로 체크한 팀원이 머지한다.


✨ 구현 사항

사용 기술

  • Vanilla JS 사용
  • jQuery 사용 가능
  • 반응형

GNB

  • 스크롤 이동 시 상단 고정
  • 메뉴 hover 시 글자 하단에 밑줄
    • text-decoration 사용 금지
  • GNB 하단 영역에 그림자 효과 - (z-index)
  • 메뉴 아이템 두 가지: 동영상, 플라워클래스
  • 클릭 시 해당 영역으로 스크롤 이동
  • 애니메이션 효과 적용
    • scroll-behavior: smooth 사용 금지

동영상

  • iFrame 사용하여 Youtube 영역 구현
  • 캡션 삽입 & 동영상 제목 클릭 시 링크 이동

플라워클래스

  • 이미지 hover 시 줌 효과
  • 화살표 버튼 클릭 시 1, 2, 3 이미지 돌아가며 교체

배너 영역

  • Bootstrap4 사용해 두 개의 다른 영역 레이아웃 구성
  • 이미지 위에 단색 그라데이션
  • hover 시 이미지 확대
  • 배너 내부 반응형

푸터 영역

  • css로 레이아웃 구현 (IE8)
  • SNS 아이콘 클릭 시 링크 이동

팝업

  • 들어가면 팝업 이미지를 띄움
  • 클릭하면 외부 사이트로 이동

🗺 구현 Preivew

🗒 프로젝트 진행 과정 및 구현 사항

위키 링크


⚙ 설치

# clone the project
$ git clone https://github.com/console-lo9/kukka.git

# install modules
$ cd kukka
$ npm install || yarn

# start with live server

⠀
⠀  You can now view this project in the browser.
⠀  http://localhost:5500/
⠀

🔗 의존성

  "dependencies": {
    "babel-loader": "^8.2.3",
    "node-sass": "^7.0.1",
    "vanilla-framework": "^3.1.0",
    "webpack": "^5.69.1",
    "webpack-cli": "^4.9.2"
  },

📂 파일 구조

    ├── public
    │   └── scripts
    └── src
        ├── assets
        ├── components
        └── styles

💡 과제 후기

프레임워크 없이 Vanilla JS로 컴포넌트를 나눠 작업하는 것을 경험해 볼 수있는 좋은 과제였던 것 같습니다. 또한 IE8 크로스 브라우징을 위해 JS에서 map 이 아닌 for 문을 사용하는 등의 코드 구현으로 크로스 브라우징 방법을 알게 되었습니다.