READ ME 작성 & 배경화면 색 수정

README.md

@@ -1,10 +1,88 @@
-## 서비스 소개
+<img width="5120" height="7840" alt="banner" src="https://github.com/user-attachments/assets/f0bb4295-7435-4512-aa20-f08d2bd70d38" />
 
-### 피로인 (Piroin)
 
+
+# PIROIN 📚
 **피로인**은 두 가지 의미를 담은 이름이다.
 
 - **피로그래밍의 사람들** — 이 서비스를 사용하는 모든 피로그래밍 부원, 즉 *피로인*들을 위한 플랫폼
 - **Piroin** — Programming + In 의 합성으로, 피로그래밍 세션에 접속하는 행위 자체를 의미
 
 세션 운영에 필요한 **질문 관리, 진도 체크, 출석 체크, 세션 정보 통합**을 하나의 서비스로 제공하여, 피로그래밍 부원 모두가 세션에만 집중할 수 있는 환경을 만든다.
+
+---
+
+## 🚀 주요 기능
+
+- **✅ 실시간 출결 코드 생성 및 관리**
+- **📚 커리큘럼 및 과제 관리**
+- **💰 보증금 현황 조회 및 관리**
+- **👥 수강생 등록 및 관리**
+- **🖥 운영진 / 부원 모드 분리**
+- **📱 모바일 반응형 UI**
+
+---
+
+## 👤 부원 기능
+
+- #### 로그인
+<img width="782" height="424" alt="Adobe Express - 로그인(부원용)" src="https://github.com/user-attachments/assets/7b8f2546-32cc-4dbf-b1e3-8b8c652d8c67" />
+
+- #### 출석 체크
+<img width="3024" height="1642" alt="Adobe Express - 출석체크 (부원용) 2" src="https://github.com/user-attachments/assets/77779f0d-57ce-4967-8f57-2212f2b6a4cf" />
+
+- #### 과제 체크
+<img width="3024" height="1642" alt="Adobe Express - 과제체크 (부원용) 2" src="https://github.com/user-attachments/assets/713821f0-b7ef-4494-88b7-42bc738e529b" />
+
+- #### 보증금 체크
+<img width="986" height="534" alt="Adobe Express - 보증금체크(부원용)" src="https://github.com/user-attachments/assets/088911f8-16c9-45d6-852d-8eb1f4c38d05" />
+
+- #### Q&A
+<img width="3024" height="1638" alt="Adobe Express - Q A (부원용) 2" src="https://github.com/user-attachments/assets/2090b3fb-4f23-457a-bc15-aa820071027e" />
+
+- #### 커리큘럼
+<img width="2004" height="1080" alt="Adobe Express - 커리큘럼(부원용)" src="https://github.com/user-attachments/assets/086a9951-ff2c-438a-bc1d-ab744816876c" />
+
+
+
+---
+
+## 🛠 운영진 기능
+
+- #### 로그인
+<img width="3024" height="1640" alt="Adobe Express - 로그인(운영진용)" src="https://github.com/user-attachments/assets/d833a92a-c6ab-484e-b214-f2914fa79880" />
+
+- #### 출석 관리
+<img width="3024" height="1640" alt="Adobe Express - 출석관리 (운영진용)" src="https://github.com/user-attachments/assets/2bafa151-8446-4935-a522-6c9d5fcb1414" />
+
+- #### 수강생 관리
+<img width="3024" height="1640" alt="Adobe Express - 수강생관리 (운영진용)" src="https://github.com/user-attachments/assets/7a3e6e59-3061-4c83-b99a-e5837a4b2c20" />
+
+- #### 과제 관리
+<img width="3024" height="1640" alt="Adobe Express - 과제관리 (운영진용) (1)" src="https://github.com/user-attachments/assets/48b9bf75-1e8d-4136-a2b0-16624690669e" />
+
+- #### Q&A 관리
+<img width="1990" height="1080" alt="Adobe Express - Q A(운영진용) (1)" src="https://github.com/user-attachments/assets/1820aa55-70af-4120-8489-d0f56e6550e4" />
+
+- #### 커리큘럼 관리
+<img width="3024" height="1640" alt="Adobe Express - 커리큘럼 (운영진용)" src="https://github.com/user-attachments/assets/bb7cb675-fd65-468f-84db-8786175e5d19" />
+
+
+
+---
+
+## 👩‍💻 Developers
+
+| [<img src="https://github.com/user-attachments/assets/ce54b066-6fa6-4e86-a76a-f2a1abe11fe3" width="180" height="240"/><br/>**양현서**](https://github.com/lilyyang0077)<br/>PM \| BE \| INFRA | [<img src="https://github.com/user-attachments/assets/6d120c58-f5f4-4a81-8162-b7e3b73ac1b2" width="180" height="240"/><br/>**장민지**](https://github.com/plumbestie)<br/>PM \| FE \| DESIGN | [<img src="https://github.com/user-attachments/assets/f8f2b166-ec8c-4e25-a4a2-a15287786fab" width="180" height="240"/><br/>**김서윤**](https://github.com/kdhye1119)<br/>FE \| DESIGN |
+|:---:|:---:|:---:|
+| [<img  src="https://github.com/user-attachments/assets/0cc22948-af79-4346-b13a-4b126e318fe3" width="180" height="240"/><br/>**김경원**](https://github.com/kkw610)<br/>**BE**  | [<img src="https://github.com/user-attachments/assets/fe0eb4a3-c877-4edf-af2a-ebef7bde0f2f" width="180" height="240"/><br/>**안시현**](https://github.com/xihxxn)<br/> **BE \| INFRA** | [<img src="https://github.com/user-attachments/assets/1d954476-c07b-4f1a-a6f8-f1b0b6dba4d7" width="180" height="240"/><br/>**이수종**](https://github.com/issuejong)<br/>**BE** |
+
+---
+
+## 🛠️ 기술 스택
+
+![Frontend](https://img.shields.io/badge/Frontend-React%20%7C%20CSS%20Modules-61DAFB?style=flat-square&logo=react)
+<br>
+![Backend](https://img.shields.io/badge/Backend-Java%20%7C%20Spring%20Boot%20%7C%20PostgreSQL-6DB33F?style=flat-square&logo=spring)
+<br>
+![Infra](https://img.shields.io/badge/Infra-Docker%20%7C%20Vercel-000000?style=flat-square&logo=vercel)

frontend/src/pages/qna/QnAMainPage.js

@@ -44,7 +44,7 @@ function QNAMainPage() {
     if (error) return <div className={styles.page}>오류: {error}</div>;
 
     return (
-        <div className={styles.pageWrapper}>
+
             <div className={styles.page}>
 
                 {/* ── 진행 중인 세션 ── */}
@@ -109,7 +109,7 @@ function QNAMainPage() {
                 )}
 
             </div>
-        </div>
+
     );
 }
 

frontend/src/pages/qna/QnAMainPage.module.css

@@ -1,17 +1,13 @@
 /* ── 페이지 레이아웃 ── */
-.pageWrapper {
-    min-height: 100vh;
-    background: #f2f2f0;
-    padding-top: 1px;
-}
+
 
 .page {
     min-height: 100vh;
     max-width: 880px;
     margin: 0 auto;
     padding: 0 16px;
     box-sizing: border-box;
-    background: #f2f2f0;
+    background: var(--gray20);
 }
 
 /* ── 섹션 공통 ── */
@@ -99,11 +95,19 @@
 
 /* ── 지난 세션 목록 ── */
 .icon {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    font-size: 22px;
+    width: 24px;
+    height: 24px;
+
+    margin-right: 14px;
+    vertical-align: middle;
     position: relative;
-    top: -2px;  
+    top: -2px;
 
-    margin-right: 20px;
     transition: color 0.2s;
 }