chore: 리드미 작성

README.md

@@ -1,8 +1,29 @@
-# React + Vite
+# DirectByDirect
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+Direct by direct(DBD)은 명령어를 학습하는 교육용 웹 사이트입니다. 
 
-Currently, two official plugins are available:
+주요 목적은 디렉터리와 파일을 생성, 삭제, 이동하는 등, 다양한 명령어를 사용하고 시각화를 통해 개발자가 Direct by direct(DBD)를 더욱 쉽게 이해하도록 돕는 것입니다.
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+또는, DBD를 활용해 개인/팀 프로젝트에서 프로젝트 구조(Project Structure)를 보여주는 것에도 활용될 수 있습니다.
+
+DBD에 명령어를 입력하세요. 명령어가 처리되면 오른쪽 Directory Tree 가 동적으로 업데이트 되어 각 명령의 효과를 반영합니다.
+
+디렉터리와 파일에 대한 개념을 탄탄히 잡으시길 희망합니다. 재밌게 사용해 주시길 바라며, 무언가를 배워가신다면 더 기쁘겠네요.
+
+![ScreenRecording2024-01-22at17 05 11-ezgif com-video-to-gif-converter](https://github.com/SOONG-E/Directbydirect/assets/52056062/6fe563cd-a0a6-4c92-b810-7f4e958d51b2)
+
+**[🔗 DBD 바로가기](direct-by-direct.web.app/)**
+
+## Developer
+
+**[😮 oio337a](https://github.com/oio337a)**
+
+**[😜 jjongs2](https://github.com/jjongs2)**
+
+**[🤓 soong-e](https://github.com/SOONG-E)**
+
+## Tech Stack
+
+<img src="https://img.shields.io/badge/react-61DAFB?style=for-the-badge&logo=react&logoColor=white">
+<img src="https://img.shields.io/badge/tailwindcss-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white">
+<img src="https://img.shields.io/badge/firebase-FFCA28?style=for-the-badge&logo=firebase&logoColor=white">