docs: readme 수정

README.md

@@ -11,8 +11,6 @@
 </div> 
 
 ## 📝 프로젝트 소개
-
----
 웹에이전시 내에서 계약 단계부터 납품 및 하자보수까지의 과정을 클라이언트와 효율적으로 공유 및 관리할 수 있는 웹 서비스입니다.
 
 ### Devlens는!
@@ -32,20 +30,23 @@ Q. 잠깐! 고객사, 개발사, 관리자가 무엇을 의미하나요?
 <br />
 
 ### 화면 구성
-|                   Screen #1                    |                   Screen #2                    |
-|:----------------------------------------------:|:----------------------------------------------:|
-| <img src="src/resources/화면1.png" width="400"/> | <img src="src/resources/화면2.png" width="400"/> |
-|                  프로젝트 생성 페이지                   |                   권한 부여 페이지                    |
-|                   Screen #3                    |                   Screen #4                    |
-| <img src="src/resources/화면3.png" width="400"/> | <img src="src/resources/화면4.png" width="400"/> |
-|                   진행 단계 페이지                    |                  체크리스트 내역 페이지                  |
+|                 사용자 화면 #1 - 메인 대시보드                 |                사용자 화면 #2 - 프로젝트 진행 단계                 |
+|:---------------------------------------------------:|:-----------------------------------------------------:|
+|   <img src="src/resources/대시보드.png" width="400"/>   | <img src="src/resources/프로젝트 진행 단계.png" width="400"/> |
+|                사용자 화면 #3 - 체크리스트 내역                 |                사용자 화면 #4 - 체크리스트 반려 시                 |
+|   <img src="src/resources/화면4.png" width="400"/>    |  <img src="src/resources/체크리스트 반려.png" width="400"/>  |
+|                사용자 화면 #3 - 프로젝트 게시판                 |                  사용자 화면 #4 - 게시글 상세                   |
+| <img src="src/resources/프로젝트 게시판.png" width="400"/> |   <img src="src/resources/게시글 상세.png" width="400"/>   |
+|                   관리자 화면 #1 -대시보드                   |                 관리자 화면 #2 - 회사 생성 페이지                 |
+| <img src="src/resources/관리자_대시보드.png" width="400"/> |    <img src="src/resources/회사생성.png" width="400"/>    |
+|               관리자 화면 #3 - 프로젝트 생성 페이지               |                관리자 화면 #4 - 권한 부여 페이지                |
+|   <img src="src/resources/화면1.png" width="400"/>    |    <img src="src/resources/화면2.png" width="400"/>     |
+
 
 <br />
 
 ## 📍 주요 기능
 
----
-
 ### <대시보드>
   1. 참여한 모든 프로젝트 목록 조회
      - 프로젝트 참여자로 지정된 프로젝트만 조회가 가능합니다.
@@ -151,7 +152,15 @@ Q. 잠깐! 고객사, 개발사, 관리자가 무엇을 의미하나요?
 
 ## ⚙ 기술 스택
 
----
+### Front-end
+<div>
+<img src="src/resources/skill/NextJs.png" width="80">
+<img src="src/resources/skill/TypeScript.png" width="80">
+<img src="src/resources/skill/TailwindCSS.png" width="80">
+<img src="src/resources/skill/ShadcnUI.png" width="80">
+<img src="src/resources/skill/Axios.png" width="80">
+
+</div>
 
 ### Back-end
 <div>
@@ -184,8 +193,6 @@ Q. 잠깐! 고객사, 개발사, 관리자가 무엇을 의미하나요?
 
 ## 🛠️ 프로젝트 아키텍쳐
 
----
-
 <img src="src/resources/project-architecture.png" width="800">
 
 
@@ -194,8 +201,6 @@ Q. 잠깐! 고객사, 개발사, 관리자가 무엇을 의미하나요?
 
 ## 🗂️ 기술 문서
 
----
-
 👉 **API 명세서** : [바로가기](https://docs.google.com/spreadsheets/d/1PqEn59XP4E7UgQDv9gJ4ZIOBvHWXN_rnXk-Hsugjvgo/edit?gid=1624724435#gid=1624724435)
 
 👉 **기능 명세서** : [바로가기](https://www.notion.so/9dba38c13b88444787a0cae943774bcb?pvs=4)