[1단계 - 음식점 목록] 윤생(이윤성) 미션 제출합니다.

.prettierrc

@@ -1,3 +1,5 @@
 {
-  "endOfLine": "auto"
+  "endOfLine": "auto",
+  "singleQuote": true,
+  "printWidth": 100
 }

README.md

@@ -1,2 +1,42 @@
 # javascript-lunch
+
 우아한테크코스 레벨1 점심 뭐 먹지 미션
+
+배포 주소 : https://bassyu.github.io/javascript-lunch/
+
+## 시작하기
+
+### 기본 설정
+
+```
+git clone https://github.com/bassyu/javascript-lunch.git
+cd javascript-lunch
+```
+
+### step1
+
+#### 설정
+
+```
+git checkout -b step1
+git pull origin step1
+npm ci
+```
+
+#### 테스트
+
+```
+npm run test-unit
+```
+
+#### 실행
+
+```
+npm run start
+```
+
+#### 빌드
+
+```
+npm run build
+```

__tests__/render.test.js

@@ -1,3 +1,108 @@
 /**
  * @jest-environment jsdom
  */
+
+import '@testing-library/jest-dom';
+import { screen } from '@testing-library/dom';
+import RestaurantListItem from '../src/components/RestaurantListItem';
+import RestaurantList from '../src/pages/RestaurantListPage/RestaurantList';
+import RestaurantFilterContainer from '../src/pages/RestaurantListPage/RestaurantFilterContainer';
+import GNB from '../src/components/GNB';
+import AddRestaurantDrawer from '../src/pages/AddRestaurantDrawer';
+
+describe('컴포넌트 랜더링 테스트', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  describe('RestaurantListItem 랜더링 테스트', () => {
+    test('RestaurantListItem 요소가 필요한 정보를 모두 갖추었는지 테스트', () => {
+      const restaurant = {
+        category: '한식',
+        name: '농민백암순대',
+        distance: 15,
+        description: '선릉에서 제일 유명한 국밥집',
+        link: '',
+      };
+
+      new RestaurantListItem({ $parent: document.body, restaurant }).render();
+      expect(screen.getByText('농민백암순대')).toBeInTheDocument();
+      expect(screen.getByText('선릉에서 제일 유명한 국밥집')).toBeInTheDocument();
+      expect(screen.getByText('캠퍼스부터 15분 내')).toBeInTheDocument();
+    });
+  });
+
+  describe('RestaurantList 랜더링 테스트', () => {
+    test('음식 종류별 필터링한 결과가 잘 출력되는지 테스트', () => {
+      const restaurants = [
+        {
+          category: '한식',
+          name: '농민백암순대',
+          distance: 15,
+          description: '선릉에서 제일 유명한 국밥집',
+          link: '',
+        },
+        {
+          category: '양식',
+          name: '버거킹',
+          distance: 10,
+          description: '햄버거 하면 버거킹',
+          link: '',
+        },
+      ];
+      const category = '양식';
+      const sortBy = 'name';
+
+      new RestaurantList({ $parent: document.body, restaurants, category, sortBy }).render();
+      expect(screen.getByText('버거킹')).toBeInTheDocument();
+      expect(screen.getByText('햄버거 하면 버거킹')).toBeInTheDocument();
+      expect(screen.getByText('캠퍼스부터 10분 내')).toBeInTheDocument();
+      expect(document.querySelectorAll('.restaurant').length).toBe(1);
+    });
+  });
+
+  describe('RestaurantListHeader 테스트', () => {
+    test('선택된 카테고리를 화면에 잘 나타내는지 테스트', () => {
+      const category = '한식';
+      const sortBy = 'distance';
+      new RestaurantFilterContainer({ $parent: document.body, category, sortBy }).render();
+      expect(document.querySelector(`option[value="${category}"]`)).toHaveAttribute('selected');
+      expect(document.querySelector(`option[value="${sortBy}"]`)).toHaveAttribute('selected');
+    });
+  });
+
+  describe('GNB 테스트', () => {
+    test('GNB를 화면에 잘 나타내는지 테스트', () => {
+      new GNB({ $parent: document.body, toggleAddRestaurantDrawer: () => {} }).render();
+      expect(screen.getByText('점심 뭐 먹지')).toBeInTheDocument();
+    });
+  });
+
+  describe('AddRestaurantDrawer 테스트', () => {
+    test('select 태그 렌더링 테스트: 카테고리', () => {
+      new AddRestaurantDrawer({
+        $parent: document.body,
+        toggleAddRestaurantDrawer: () => {},
+      }).render();
+      const categoryElement = document.getElementById('category');
+      const categories = ['한식', '중식', '일식', '양식', '아시안', '기타'];
+      categories.forEach((category) => {
+        expect(categoryElement).toContainHTML(`<option value="${category}">${category}</option>`);
+      });
+    });
+
+    test('select 태그 렌더링 테스트: 거리(도보 x분)', () => {
+      new AddRestaurantDrawer({
+        $parent: document.body,
+        toggleAddRestaurantDrawer: () => {},
+      }).render();
+      const distanceElement = document.getElementById('distance');
+      const distances = [5, 10, 15, 20, 30];
+      distances.forEach((distance) => {
+        expect(distanceElement).toContainHTML(
+          `<option value="${distance}">${distance}분 내</option>`
+        );
+      });
+    });
+  });
+});

__tests__/unit.test.js

@@ -0,0 +1,86 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import '@testing-library/jest-dom';
+import RestaurantList from '../src/pages/RestaurantListPage/RestaurantList';
+
+describe('RestaurantList 기능 테스트', () => {
+  test('이름 순 정렬 기능 테스트', () => {
+    const restaurants = [
+      {
+        category: '한식',
+        name: '농민백암순대',
+        distance: 15,
+        description: '선릉에서 제일 유명한 국밥집',
+        link: '',
+      },
+      {
+        category: '양식',
+        name: '버거킹',
+        distance: 10,
+        description: '햄버거 하면 버거킹',
+        link: '',
+      },
+      {
+        category: '양식',
+        name: '맥도날드',
+        distance: 5,
+        description: '햄버거 하면 두번째는 맥도날드',
+        link: '',
+      },
+    ];
+    const category = '전체';
+    const sortBy = 'name';
+
+    const restaurantList = new RestaurantList({
+      $parent: document.body,
+      restaurants,
+      category,
+      sortBy,
+    }).categorizeRestaurantByOption();
+
+    expect(restaurantList[0].name).toEqual('농민백암순대');
+    expect(restaurantList[1].name).toEqual('맥도날드');
+    expect(restaurantList[2].name).toEqual('버거킹');
+  });
+
+  test('거리 순 정렬 기능 테스트(거리 짧은 순)', () => {
+    const restaurants = [
+      {
+        category: '한식',
+        name: '농민백암순대',
+        distance: 15,
+        description: '선릉에서 제일 유명한 국밥집',
+        link: '',
+      },
+      {
+        category: '양식',
+        name: '버거킹',
+        distance: 10,
+        description: '햄버거 하면 버거킹',
+        link: '',
+      },
+      {
+        category: '양식',
+        name: '맥도날드',
+        distance: 5,
+        description: '햄버거 하면 두번째는 맥도날드',
+        link: '',
+      },
+    ];
+    const category = '전체';
+    const sortBy = 'distance';
+
+    const restaurantList = new RestaurantList({
+      $parent: document.body,
+      restaurants,
+      category,
+      sortBy,
+    }).categorizeRestaurantByOption();
+
+    expect(restaurantList[0].name).toEqual('맥도날드');
+    expect(restaurantList[1].name).toEqual('버거킹');
+    expect(restaurantList[2].name).toEqual('농민백암순대');
+  });
+});

docs/REQUIREMENTS.md

@@ -0,0 +1,97 @@
+# 구현할 기능 목록
+
+## 컴포넌트 구조
+
+```
+앱
+├─ 메인 템플릿
+│   ├─ 헤더
+│   ├─ 음식점 리스트 페이지
+│       ├─ 음식점 리스트 헤더
+│       │   ├─ 카테고리
+│       │   ├─ 정렬
+│       ├─ 음식점 리스트
+│           ├─ 음식점
+│               ├─ 사진
+│               ├─ 이름
+│               ├─ 거리
+│               ├─ 설명
+├─ 모달
+    ├─ 폼
+        ├─ 헤더
+        ├─ 여러가지 인풋
+        ├─ 취소/추가 버튼
+```
+
+## 컴포넌트 상세
+
+### 앱
+
+- 상태
+
+  1. 모달 숨김
+
+- 핸들러
+
+  1. 모달 여닫는 기능
+
+### 메인
+
+- 상태
+
+  1. 모달 숨김
+
+- 핸들러
+
+  1. 모달 여닫는 기능
+
+### 음식점 리스트 페이지
+
+- 상태
+
+  1. 현재 볼 카테고리
+  2. 정렬정보 (이름, 설명, 참고)
+  3. 음식점 정보 리스트
+
+- 핸들러
+
+  1. 카테고리 핸들러
+  2. 정렬정보 핸들러
+
+### 음식점 리스트 헤더
+
+- 상태
+
+  1. 현재 볼 카테고리
+  2. 정렬정보 (이름, 설명, 참고)
+
+- 핸들러
+
+  1. 카테고리 핸들러
+  2. 정렬정보 핸들러
+
+### 음식점 리스트
+
+- 상태
+
+  1. 음식점 정보 리스트
+
+### 음식점
+
+- 상태
+
+  1. 음식점 정보
+
+### 모달
+
+- 상태
+
+  1. 모달 숨김
+  2. 음식점 정보
+
+- 핸들러
+
+  1. 모달 여닫는 기능
+  2. 음식점 추가
+
+## 유틸

index.html

@@ -1,15 +1,12 @@
 <!DOCTYPE html>
 <html lang="ko">
-
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>점심 뭐 먹지</title>
-</head>
-
-<body>
-
-</body>
-
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>점심 뭐 먹지</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
 </html>