docs: README 파일 추가

README.md

@@ -1,2 +1,70 @@
-# card-game-mission
-카드 뒤집기 게임을 위한 미션 저장소
+# 🃏카드 뒤집기 미션 1단계
+
+카드 뒤집기 게임 미션을 위한 저장소
+
+# 미션 - 카드 뒤집기
+
+## 🔑 이번 미션에서 학습할 내용
+
+- 자바스크립트 기초
+- html, css 기초
+- 미션 완료 후 테스트 기초, 이벤트 처리, 컴포넌트에 대해서 생각해볼 생각입니다.
+
+## 🔍 진행방식
+
+- 미션은 **기능 요구사항, 프로그래밍 요구사항, 과제 진행 요구사항** 세 가지로 구성되어 있습니다.
+- 바톤 홈페이지에 글을 게시하면 리뷰어가 PR을 확인하고 코드리뷰를 진행할 예정입니다.
+- 요구사항을 만족하기 위해 노력합니다. 기능을 완성시키지 못해도, 요구 사항을 만족시키지 못해도 괜찮습니다. 하지만 과제 진행 요구사항을 만족시키지 못하면 리뷰어께서 PR을 보지 못할 수도 있기 때문에 리뷰가 불가능할 수도 있습니다. 꼭! 제출 전에 확인 부탁드립니다😊
+
+## ✉️ 미션 제출 방법
+
+- 미션 구현을 완료한 후 GitHub을 통해 Pull Request를 올립니다.
+
+## ✔️ 미션 제출 전 체크리스트
+
+- 미션 기능을 구현하고 아래 테스트를 통과하는지 확인해주세요.
+- 아래 첨부된 사진과 같이 테스트가 정상적으로 통과되어야 합니다.
+
+```
+npm install
+
+npm run test
+```
+
+<img width="848" alt="스크린샷 2023-12-27 오후 9 38 27" src="https://github.com/LIN-KHU/javascript-cardgame/assets/103256030/4e9b0737-4e92-4041-9039-fdcf707cbd2c">
+
+---
+
+## 🚀 기능 요구사항
+
+1. 카드 3장(당첨 카드 1장, 꽝 카드 2장)이 화면상에 랜덤하게 배치된다.
+2. 카드를 마우스로 클릭할 시 당첨 결과가 표시된다.
+3. 주어진 파일 내의 Card class를 사용해 코드를 작성한다.
+4. 테스트를 통과할 수 있도록 기능을 구현한다.
+   1. 카드 element는 className속성 값으로 `card`를 가진다.
+   2. `npm run test` 명령어를 입력하여 테스트를 정상적으로 통과하는 지 확인한다.
+
+### 프로그램 실행 결과
+
+<img width="220" alt="스크린샷 2023-12-27 오후 9 14 59" src="https://github.com/LIN-KHU/javascript-cardgame/assets/103256030/1b6a1325-c51b-4786-87bd-c9df74ff1fb6">
+<img width="220" alt="스크린샷 2023-12-27 오후 9 34 57" src="https://github.com/LIN-KHU/javascript-cardgame/assets/103256030/8793a448-9827-4293-87d5-c9b6f2a711d6">
+
+### 1단계에서 학습할 내용
+
+환경설정 (config파일을 제공할 예정), 기초 html, 자바스크립트, 테스트 기초 (cypress)
+
+🎱 프로그래밍 요구사항
+
+- 주어진 html 파일을 활용하여 코드를 작성한다. 임의로 id를 수정하지 않는다.
+- 외부 라이브러리(jQuery, Lodash 등)를 사용하지 않고, 순수 Vanilla JS로만 구현한다.
+
+---
+
+## 📈 과제 진행 요구사항
+
+- 미션은 카드 뒤집기 미션 저장소를 Fork/Clone해 시작한다.
+- 리뷰이분들도 미리 구현할 것에 대해 생각해볼 수 있기 때문에 기능 목록을 작성하지 않는 것보다 꼼꼼하고 단계적으로 코드를 작성하실 수 있을 것 같습니다.
+
+---
+
+피드백은 언제나 환영합니다 언제든 이상한 점이 있다면 바로 문의해주세요