Docs: README.md 수정

Readme.md

@@ -1,6 +1,6 @@
 # Field-Passer
 
-### 서울 내 체육 시설 양도 서비스<br />
+### 서울시 내 체육 시설 양도 서비스<br />
 
 커뮤니티형 체육시설 양도 시스템의 불편함을 해소하기 위한 <br />
 구장 양도 플랫폼 **_Field-Passer_**
@@ -39,8 +39,11 @@
     </tr>
     <tr>
       <td align="center" width="200px">
-        <p>강현주1</p>
-        <p>강현주2</p>
+        <p>메인페이지</p>
+        <p>헤더, 푸터, 사이드바</p>
+        <p>게시글 작성 및 수정</p>
+        <p>타임셀렉터</p>
+        <p>공용 모달</p>
       </td>
       <td align="center" width="200px">
         <p>배현수1</p>
@@ -125,9 +128,10 @@ npm run dev
 - GITHUB <br />
   - ISSUE, PR 컨벤션 활용
 - SLACK <br />
-  - github 봇을 활용하여 진행 상황을 공유
+  - 백엔드, UX/UI 디자이너와 소통
+  - github 봇을 활용하여 이슈 및 pr 확인
 - FIGMA <br />
-  - UXUI 팀과 소통
+  - 디자인 확인 및 UX/UI 디자이너와 소통
 
 ## 🔧 주요 기능 설명
 
@@ -143,23 +147,50 @@ npm run dev
 - private route<br />
   로그인 상태 시 접근할 수 있는 페이지를 `privateRoute` 컴포넌트로 감싸 주어 권한을 확인하였습니다.
 
-## 😏 후기
-
-<a href="https://github.com/quokka-eating-carrots"><img src="https://img.shields.io/badge/조민정-5FCA7B?style=flat-round&logo=GitHub&logoColor=white"/></a>
-
-## 프로젝트를 진행하면서 중요하게 생각한 것
-
-1. 반응형 웹 페이지를 자연스럽게 구현하기
-   1. `react-responsive` 를 활용하여 `useScreenHook` 을 작성
-   2. 웹 페이지 크기에 따른 폰트 사이즈, 버튼 크기 등 디자인을 상수로 저장하여 활용
-2. 중복된 코드를 최소화로 하기
-   1. 반복되는 코드는 util, hooks, constants, components로 작성
-3. 다른 사람이 내 코드에 대해 질문할 때 명확하게 대답할 수 있게 하기
-   1. 팀원의 코드를 참고할 때도 왜 그렇게 작성했을지 생각한 후 참고
-   2. 닌자 코드가 되지 않게 조심
-
-## 프로젝트 후기
+## 😏 프로젝트 후기
 
+<table border>
+  <tbody>
+    <tr>
+      <td align="center" width="80px">
+        <img width="100%" src="https://avatars.githubusercontent.com/u/106734517?v=4"  alt="강현주"/>
+        <a href="https://github.com/iziz9"><img src="https://img.shields.io/badge/강현주-5FCA7B?style=flat-round&logo=GitHub&logoColor=white"/></a>
+      </td>
+      <td>
+        맡은 기능을 오류 없이 구현하고 재사용 가능한 코드를 작성하는 것을 목표로 프로젝트를 시작했는데, 기능구현을 끝낸 후 살펴보니 전체적으로 중복코드, 반응형 구현을 위해 지나치게 길게 작성된 코드, 통일성 없는 코드가 많아 리팩토링을 진행하게 되었습니다. <br />
+        먼저 공통적으로 사용되는 기능(모달, 무한스크롤 등)을 커스텀 훅으로 묶어 중복코드를 줄이고, 여러 기능을 하고 있는 함수를 분리하고, 컴포넌트 구조를 변경해 불필요하게 사용되고 있던 상태를 정리하여 코드 가독성을 높였습니다. <br />
+        이런 과정을 통해 클린코드를 고민하고 작성할 수 있는 능력을 키울 수 있었습니다.<br />
+        또한 이전까지의 프로젝트에서는 해보지 못했던 SEO 설정과 로딩속도 개선을 위한 이미지 최적화 등 새로운 시도를 해보며 개발 지식을 쌓을 수 있었습니다. <br />
+        개발 기간이 계획한 기간보다 너무 길어져 아쉬웠지만 개인적으로 역량이 많이 발전했음을 느낀 프로젝트였습니다.
+      </td>
+     </tr>
+    <tr>
+      <td align="center" width="80px">
+        <img width="100%" src="https://avatars.githubusercontent.com/u/114797992?v=4"  alt="배현수"/>
+        <a href="https://github.com/HyunSooBae"><img src="https://img.shields.io/badge/배현수-5FCA7B?style=flat-round&logo=GitHub&logoColor=white"/></a>
+      </td>
+      <td>
+        내용작성하기
+      </td>
+    </tr>
+    <tr>
+      <td align="center" width="80px">
+        <img width="100%" src="https://avatars.githubusercontent.com/u/113992260?v=4"  alt="조민정"/>
+        <a href="https://github.com/quokka-eating-carrots"><img src="https://img.shields.io/badge/조민정-5FCA7B?style=flat-round&logo=GitHub&logoColor=white"/></a>
+      </td>
+      <td>
+        ✨ 프로젝트를 진행하면서 중요하게 생각한 것
+
+1. 반응형 웹 페이지를 자연스럽게 구현하기 <br />
+1. `react-responsive` 를 활용하여 `useScreenHook` 을 작성 <br />
+1. 웹 페이지 크기에 따른 폰트 사이즈, 버튼 크기 등 디자인을 상수로 저장하여 활용
+1. 중복된 코드를 최소화로 하기 <br />
+1. 반복되는 코드는 util, hooks, constants, components로 작성
+1. 다른 사람이 내 코드에 대해 질문할 때 명확하게 대답할 수 있게 하기 <br />
+1. 팀원의 코드를 참고할 때도 왜 그렇게 작성했을지 생각한 후 참고 <br />
+1. 닌자 코드가 되지 않게 조심
+
+✨ 프로젝트 후기 <br />
 오랜 시간 진행해 온 프로젝트인 만큼 완벽하게 끝내고 싶었던 생각이 큰 프로젝트였습니다. 제가 가진 역량을 최대한 활용하여 프로젝트를 완성하려고 노력하였고, 팀원들 역시 처음 진행했을 때보다 더 다양한 방법을 제시해 주시면서 저 역시도 성장할 수 있는 기회였습니다.
 
 프로젝트를 진행하면서 아쉬운 몇 가지를 꼽아 보자면 첫째, `**styled-components` 를 작성하는 스타일이 달랐던 점\**입니다. 우선 저는 class-name을 자주 활용하지 않는 편이었는데 팀원들의 pr을 확인하면서 *아, 이렇게도 작성할 수 있구나\*를 많이 느꼈습니다. 제가 개발하기로 한 기능을 넣으려 다른 팀원의 코드에 추가적으로 작성해야 할 때, 저와는 다른 스타일의 코드를 보고 어려움을 느꼈습니다. 그 후 팀원의 방식이 좋다고 느껴져 제가 작성한 코드에도 활용하려고 노력하였습니다.
@@ -172,12 +203,21 @@ npm run dev
 
 셋째, **팀 프로젝트라서 제가 놓친 부분들을 더 신경 쓸 수 있었다는 점**입니다. 완성을 하는 것에 급급한 저와 달리 웹 최적화에 대한 부분이나, 다른 분들이 구현한 기능에 대해 설명을 들으면서 다른 분이 구현한 기능과 연계되는 기능을 개발할 땐 조금 더 이해를 한 상태에서 구현을 할 수 있었던 점이 좋았습니다.
 
-<br/>
+</td>
+</tr>
+<tr>
+<td align="center" width="80px">
+<img width="100%" src="https://avatars.githubusercontent.com/u/76930602?v=4"  alt="한수산"/>
 <a href="https://github.com/0nesan"><img src="https://img.shields.io/badge/한수산-5FCA7B?style=flat-round&logo=GitHub&logoColor=white"/></a>
-
-## 프로젝트 후기
-
+</td>
+<td>
 평소 생각하지 않았던 디테일들을 팀원들이 구현하는 방식을 통해 알게되었고, 기술적인 면에서 새로운 시도를 해볼 수 있어서 좋았습니다.<br/>
 type interface를 vite-env.d 파일에 모아 import없이 사용한다던지. globalStyles에 css 변수를 생성해 활용한다던지. svg icon을 함수 형태로 활용한다던지 하는 다양한 시도들을 해볼 수 있어서 좋았으며, custom hooks. redux 등 잘 모르고 사용하던 개념이나 도구들에 이해도를 좀 더 가져갈 수 있었던 것 같습니다.
 
-리팩터링 기간을 통해 현재의 코드를 개인적으로 리뷰해 볼 수 있었으며, 그 활동을 통해 어떻게 하면 효율적으로 코드를 작성할지, 클린코드는 어떤건지에 관련한 고민을 해볼 수 있었습니다.
+리팩터링 기간을 통해 현재의 코드를 개인적으로 리뷰해 볼 수 있었으며, 그 활동을 통해 어떻게 하면 효율적으로 코드를 작성할지, 클린코드는 어떤건지에 관련한 고민을 해볼 수 있었습니다.
+
+</td>
+</tr>
+
+  </tbody>
+</table>