Update README.md

README.md

@@ -1,15 +1,103 @@
-<h1><img width ="96" alt="img" src="https://github.com/prgrms-fe-devcourse/NFE1-1-3-MOODI/blob/main/public/logo.svg"> </h1>
 
-🎵 음악과 함께하는 일기 서비스 ✍
+<img width ="96" alt="img" src="https://github.com/prgrms-fe-devcourse/NFE1-1-3-MOODI/blob/main/public/logo.svg"> 
+
+## 프로젝트 소개
+
+<p>
+ 📀 음악과 함께하는 감정 일기 서비스 Moodi<br/>
+    음악으로 하루를 기억하고 그날의 감정을 추억할수 있도록 도와줍니다.✍
+</p>
+
+###### 🔗배포링크 (http://moodi-devcourese-3team.s3-website.ap-northeast-2.amazonaws.com/)
+
+## 팀원 구성
 
 <p>
 <strong>🗓️ 프로젝트 기간 : 2024.10.15 ~ 2024.11.06</strong>
 </p>
 
-## 📖 소개
+<table>
+  <tr>
+    <td align="center">
+      <a href="https://github.com/kangminguu">
+        <img src="https://avatars.githubusercontent.com/u/131148077?v=4" width="100" height="100" alt="강민구">
+        <br>
+        <b>강민구</b>
+      </a>
+      <br>
+      FrontEnd
+    </td>
+    <td align="center">
+      <a href="https://github.com/minjoon97">
+        <img src="https://avatars.githubusercontent.com/u/66014783?v=4" width="100" height="100" alt="김민준">
+        <br>
+        <b>김민준</b>
+      </a>
+      <br>
+      FrontEnd
+    </td>
+    <td align="center">
+      <a href="https://github.com/HelloWook">
+        <img src="https://avatars.githubusercontent.com/u/113816822?v=4" width="100" height="100" alt="남정욱">
+        <br>
+        <b>남정욱</b>
+      </a>
+      <br>
+      FrontEnd, BackEnd
+    </td>
+    <td align="center">
+      <a href="https://github.com/jymaeng1234">
+        <img src="https://avatars.githubusercontent.com/u/102141309?v=4" width="100" height="100" alt="맹주연">
+        <br>
+        <b>맹주연</b>
+      </a>
+      <br>
+      FrontEnd
+    </td>
+    <td align="center">
+      <a href="https://github.com/cmlim0070">
+        <img src="https://avatars.githubusercontent.com/u/87525734?v=4" width="100" height="100" alt="임채민">
+        <br>
+        <b>임채민</b>
+      </a>
+      <br>
+      FrontEnd
+    </td>
+  </tr>
+</table>
+
+## 기술 스택
+ FrontEnd
+
+<p><img src="https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB">
+  <img src="https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white">
+  <img src="https://img.shields.io/badge/styled--components-DB7093?style=for-the-badge&logo=styled-components&logoColor=white"/></p>
+
+ BackEnd
 
-📀 Moodi는 당신의 일기와 감정을 기록하고, AI가 추천하는 음악을 들을 수 있는 서비스 입니다. ✍
 
 ## 주요기능
 
-📙 일기 작성 및 조회 <br/>
+📙 감정 일기 작성 및 조회 <br/>
+🤖 AI를 활용한 음악 추천 <br/>
+🎹 Spotify, Youtube API를 활용한 음악 감상 <br/>
+📈 감정 분석 그래프 조회<br/>
+📅 감정 달력 조회<br/>
+😊 리액션 버튼 기능<br/>
+
+## 프로젝트 구조
+
+![moodi_1](https://github.com/user-attachments/assets/ad2c48f9-3099-43c0-af57-516e0f7402bf)
+![moodi_2](https://github.com/user-attachments/assets/30561f23-e8ce-4249-929f-1c7c12f43a46)
+
+
+## 화면 설계서
+###### 🔗Figma 
+<p> https://www.figma.com/design/HfJRPT9zom9TCqLSSPuSBJ/%5BMoodi%5D-%EC%95%BD%EC%8B%9D%EA%B8%B0%ED%9A%8D%EC%84%9C?node-id=0-1&t=F32FGw7hxbz11Wmv-1 </p>
+
+![image](https://github.com/user-attachments/assets/c6be79d2-52e2-4bfe-8ac1-38271b38393b)
+
+## 폴더구조
+
+
+