Kdt5 jeong tae uk

.eslintrc.cjs

@@ -0,0 +1,34 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: 'airbnb-base',
+  plugins: ['@html-eslint'],
+  overrides: [
+    {
+      files: ['*.html'],
+      parser: '@html-eslint/parser',
+      extends: ['plugin:@html-eslint/recommended'],
+      rules: {
+        '@html-eslint/indent': ['error', 2], // HTML indent를 2space로 고정합니다.
+      },
+    },
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest', // ecma 최신 버전을 사용합니다.
+    sourceType: 'module', // module (import, export) 방식을 사용합니다.
+  },
+  rules: {
+    'no-console': 'warn', // console 사용시 warning이 나타납니다. (production할 떄 지워줘야하니까 warn합니다.)
+    'linebreak-style': 'off', // crlf, lf 상관없도록 변경합니다. (윈도우, 맥 번갈아서 쓰고 있습니다.)
+    semi: ['error', 'never'], // semicolon을 제거합니다.
+    'no-underscore-dangle': ['warn', { allowAfterThis: true }], // this._bar()는 가능하고 그 외는 warning이 나타납니다.
+    'max-len': ['warn', { code: 120, tabWidth: 2 }],
+    'spaced-comment': 'off', // 주석 스타일 강제 취소 (html, css 파일에서 주석을 달면 이 에러가 납니다.)
+    'no-param-reassign': 'off', // DOM을 다루다보면 재할당 할 일이 생긴다고 판단했습니다.
+    'import/extensions': 'warn', // js파일을 spliting하기 위해 on -> warn으로 변경 하였습니다.
+    'prefer-arrow-callback': 'off', // this를 다루게 될 일이 있을 수도 있으니까 off하였습니다.
+    'no-await-in-loop': 'warn',
+  },
+}

.gitignore

@@ -0,0 +1,9 @@
+# Nodejs
+node_modules
+
+# Bundler
+.cache
+.parcel-cache
+
+# Build
+dist

.prettierignore

@@ -0,0 +1,2 @@
+*.html
+*.js

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "singleQuote": true,
+  "semi": false,
+  "useTabs": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 120
+}

README.md

@@ -1,45 +1,52 @@
-# 👀 자신이 원하는 사이트 레이아웃 클론
-
-원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요.  
-평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요.   
-과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
-
-## 과제 수행 및 제출 방법
-
-1. 현재 저장소를 로컬에 클론(Clone)합니다.
-1. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, `git branch KDT0_ParkYoungWoong`)
-1. 자신의 본명 브랜치에서 과제를 수행합니다.
-1. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(`main` 브랜치에 푸시하지 않도록 꼭 주의하세요, `git push origin KDT0_ParkYoungWoong`)
-1. 저장소에서 `main` 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, `main` <== `KDT0_ParkYoungWoong`)
-
-- `main` 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
-- Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요!
-- Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요!
-- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!
-
-## 필수 요구사항
-
-- [ ] 과제에 대한 설명을 포함한 `README.md` 파일을 제공하세요!
-- [ ] 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요!
-- [ ] 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요! 
-- [ ] 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
-
-## 선택 요구사항
-
-- [ ] `<header>`, `<section>` 등 시멘틱 태그를 최대한 활용해보세요.
-- [ ] 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요.
-- [ ] 부분적으로 BEM 방법론을 도입해보세요.
-- [ ] JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!)
-- [ ] JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요)
-- [ ] SCSS 등의 CSS 전처리도구를 도입해보세요.
-- [ ] SCSS 컴파일에 Webpack이나 Parcel 같은 번들러를 활용해보세요.
-
-## 손쉬운 이미지 추출 방법
-
-사이트 클론에 필요한 이미지를 좀 더 쉽게 추출하기 위해서 Chrome 확장 프로그램인 [Image Downloader](https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj?hl=ko)를 사용하세요.
-
-1. 원하는 사이트 접속
-1. Image Downloader 확장 프로그램 실행
-1. 다운로드 원하는 이미지 선택
-1. 서브 폴더 이름(Save to subfolder) 명시
-1. 다운로드!
+# Bluebottle clone
+
+[제출용 과제](https://main--bluebottle-clone.netlify.app/) 보러가기
+
+[블루 보틀 사이트](https://bluebottlecoffee.com/us/eng) 보러가기
+
+# 구조
+```
+KDT5-M1
+├── dist // 이곳에 번들링한 결과물이 쌓입니다.
+├── README.md
+├── index.html // 메인화면을 보여주는 HTML파일입니다.
+├── public
+│   ├── images
+│   └── svg
+└── src
+    ├── header.js
+    ├── interior-view.js
+    ├── main.js // SCSS, JS의 entry입니다.
+    ├── swiper.js
+    ├── view.js
+    └─── scss // <section>별로 SCSS파일을 분리했습니다.
+        ├── _config.scss
+        ├── card-category.scss
+        ├── footer.scss
+        ├── header.scss
+        ├── interior-view.scss
+        ├── left-categories.scss
+        ├── main-view.scss
+        ├── main.scss
+        ├── our-story.scss
+        └── subscription.scss
+```
+# 라이브러리
+- swipersjs
+- eslint
+- parcel
+
+# 언어
+- HTML
+- JavaScript
+- SCSS
+
+# 상세 설명
+
+- header, section 등 **시멘틱 태그**를 최대한 활용했습니다.
+- CSS 전처리도구 **SCSS를 사용**했습니다.
+- **Parcel을 사용하여 번들링** 했습니다.
+- HTML, CSS로 구현하기 힘들다고 생각한 부분은 JavaScript로 구현했습니다.
+- **반응형을 구현하지 않았습니다.** max width가 1278px미만일 경우 원본가 상이한 부분이 생길 수 있습니다.
+- **GNB의 모든 기능이 구현되지 않았습니다**. 원본과 동일하게 동작하지 않을 수 있습니다.
+- 접근성을 고려해서 wai-aria를 최대한 활용했습니다. (bluebottle 웹사이트에 aria관련 속성이 많았습니다.)

devDocs.md

@@ -0,0 +1,108 @@
+# Setting & Linting
+
+## eslint settings
+
+`eslint --init`으로 eslint를 세팅하였고
+추가적으로 `html-eslint`패키지를 사용하였습니다.
+
+[@html-eslint getting started](https://yeonjuan.github.io/html-eslint/docs/getting-started/)와 `/package.json`, `/.eslintrc.cjs`를 참고해주세요!
+
+## Prettier setting
+
+.scss를 제외한 나머지는 prettier를 사용할 수 없도록 막아뒀습니다.
+
+pretter세팅은 `/.pretterrc`, `/.prettierignore`를 참고해주세요!
+
+## Bundler setting (Parcel & SCSS)
+
+번들러는 `parcel`
+CSS 전처리 도구는 `SCSS`를 사용했습니다.
+
+`npm install --save-dev parcel @parcel/transformer-sass`
+
+## Bundler setting (Webpack & SCSS)
+
+parcel대신 webpack으로 번들링을 도전하다가 구조가 마음에 안들어서 포기했습니다.
+
+공부 더 해서 다시 도전해보겠습니다..
+
+관련 내용은 다음에 업데이트하겠습니다 (2023/03/31)
+
+```json
+{
+  "devDependencies": {
+    "html-webpack-plugin": "^5.5.0", // html을 bundling할때 사용합니다.
+    "node-sass": "^8.0.0",
+    "css-loader": "^6.7.3",
+    "sass-loader": "^13.2.2",
+    "style-loader": "^3.3.2",
+    "webpack": "^5.76.3",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.13.1" // dev 서버를 열 떄 사용합니다.
+  }
+}
+```
+
+## Additional settings
+
+vscode를 사용중이시면 .vscode/settings.json에 아래 내용을 추가해주세요.
+
+```json
+{
+  "editor.linkedEditing": true,
+  "editor.minimap.autohide": true,
+  "eslint.enable": true,
+  "eslint.validate": [
+    "javascript", // ...
+    "html" // Add "html" to enable linting `.html` files.
+  ],
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+}
+```
+
+# Style
+
+스타일은 `/src/scss/_config.scss`에 선언되어 있고 아래 내용을 참고했습니다.
+
+## Font
+
+```css
+/* 중후한 헤딩 */
+.font-serif {
+  font-family: Chronicle Text G1 Roman, ui-serif, Georgia, Cambria, Times New Roman, Times, serif;
+}
+/* 고딕한 내용 */
+.font-sans {
+  font-family: Halis GR Regular, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica
+      Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+/* body 폰트 */
+body {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica
+      Neue, sans-serif;
+}
+```
+
+## Color
+
+```css
+/* main background (color-cream) */
+    main {
+      background-color: rgb(253, 251, 247);
+    }
+/* footer background & font black (font-black) */
+    footer {
+      backgound-color: rgb(51, 51, 51)
+    }
+/* blue bottle color (color-bluebottle) */
+    .bluebottle {
+      rgb(0, 169, 224)
+    }
+/* highlight background color (color-begie) */
+    .main {
+      background-color : rgb(249, 246, 240)
+    }
+```