KDT0_HanEunJi 메종 프란시스 커정 클론코딩

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}

README.md

@@ -1,45 +1,49 @@
-[참고 내용]
+# ⚡️패스트캠퍼스 클론코딩 프로젝트⚡️
 
-👀 자신이 원하는 사이트 레이아웃 클론
-원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요.
-평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요.
-과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
+## ✨ 프로젝트 소개
 
-과제 수행 및 제출 방법
+메종 프란시스 커정 공식 홈페이지를 클론코딩한 프로젝트입니다.
 
-1. 현재 저장소를 로컬에 클론(Clone)합니다.
-2. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, git branch KDT0_이름)
-3. 자신의 본명 브랜치에서 과제를 수행합니다.
-4. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(main 브랜치에 푸시하지 않도록 꼭 주의하세요, git push origin KDT0_이름)
-5. 저장소에서 main 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, main <== KDT0_이름)
+- 원본 홈페이지 : https://www.franciskurkdjian.com/eu-en
+- 구현한 홈페이지 : https://lilviolie.github.io/kurkdjian/
 
+## ✨ 필수 요구사항
 
-- main 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
-- Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요!
-- Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요!
-- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!
+- 과제에 대한 설명을 포함한 `README.md` 파일 제공
+- 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소 명시
+- 과정에서 사용한 프로젝트 폴더/파일 모두 제출
+- 실제 서비스로 배포하고 접근 가능한 배포 링크 추가
 
-필수 요구사항
+## ✨ 기술 스택
 
-- 과제에 대한 설명을 포함한 README.md 파일을 제공하세요!
-- 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요!
-- 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요!
-- 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
+<div style="display:flex;">
+  <img src="https://img.shields.io/badge/html5-E34F26?style=for-the-badge&logo=html5&logoColor=white"> 
+  <img src="https://img.shields.io/badge/css-1572B6?style=for-the-badge&logo=css3&logoColor=white"> 
+  <img src="https://img.shields.io/badge/javascript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black">
+</div>
 
-선택 요구사항
+## ✨ 주요 개발 기능
 
-- < header >, < section > 등 시멘틱 태그를 최대한 활용해보세요.
-- 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요.
-- 부분적으로 BEM 방법론을 도입해보세요.
-- JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!)
-- JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요)
+- 각각의 상품 이미지에 트랜지션 적용
+  <img width="100%" src="https://github.com/lilviolie/git-practice/assets/95364951/8c4f5edc-92cb-47b0-b493-7970397eff5c"/>
+- Intersection Observer API를 이용해 스크롤 애니메이션 적용
+  <img width="100%" src="https://github.com/lilviolie/git-practice/assets/95364951/47dd2311-0e72-40a6-8c68-e8a14e6e7aa8"/>
+- swiper.js를 이용해 슬라이드 구현
+  <img width="100%" src="https://github.com/lilviolie/git-practice/assets/95364951/0c280227-62c7-4286-bbff-9a07cf360106"/>
 
-손쉬운 이미지 추출 방법
+## ✨ 구현하지 못한 기능
 
-사이트 클론에 필요한 이미지를 좀 더 쉽게 추출하기 위해서 Chrome 확장 프로그램인 Image Downloader를 사용하세요.
+- 상단 메뉴에 마우스 호버 시 드롭다운 메뉴가 나타나는 기능
+- 장바구니 기능
 
-1. 원하는 사이트 접속
-2. Image Downloader 확장 프로그램 실행
-3. 다운로드 원하는 이미지 선택
-4. 서브 폴더 이름(Save to subfolder) 명시
-5. 다운로드!
+## ✨ 배운점
+
+- 정말 많은 요소에 트랜지션을 적용하면서 트랜지션에 좀 더 익숙해 질 수 있었습니다. 다음에는 애니메이션 속성을 이용해 더 다양한 디자인을 구현해보고 싶습니다.
+- 자바스크립트에서 제공하는 `IntersectionObserver` API를 사용해 보았습니다. 요소가 뷰포트에 포함되는지의 여부에 따라 더욱 풍부한 트랜지션을 적용할 수 있었습니다.
+- 바닐라 자바스크립트 대신 swiper 라이브러리를 이용하여 더욱 빠르고 간단하게 슬라이드를 구현하는 방법을 알게 되었습니다.
+
+## ✨ 아쉬운점
+
+- 한정된 시간에 비해 구현할 요소가 굉장히 많았던 웹사이트를 선택해서 기간 내에 구현을 마치기 힘들었습니다. 웹사이트를 구성하는 것이 생각보다 훨씬 신경써야 할 게 많았기 때문에 주제 선정에 좀 더 신경써야겠다는 생각이 들었습니다.
+- 헤더 메뉴에 마우스 호버 시 드롭다운 메뉴가 나타나는 기능을 구현하지 못했습니다. 아직 제 수준으로 구현하기에는 어려운 기능이라고 느꼈기에 트랜지션, z-index, 자바스크립트 등에 대해 훨씬 더 많은 공부가 필요하다는 것을 느꼈습니다.
+- 반복되는 코드가 굉장히 많았는데 시간이 부족하다보니 깔끔하게 코드를 작성하는 데 어려움을 겪었습니다. 적절한 시간 분배와 클린코드의 작성에 대한 중요성을 많이 느꼈고, 다음에는 css 전처리기를 사용해서 더 효율적으로 코드를 작성해보고 싶습니다.