Merge pull request #253 from kakao-tech-campus-2nd-step3/Week11

Week11 5

README.md

@@ -1,16 +1,246 @@
-# Team6_FE_Week3
 
-### 6주차 개발 내용
+<div align="center">
 
-1. 로그인 기능 구현
-2. 프로필 질문 UI 구현
-3. Not Found UI 구현
-4. 로딩 컴포넌트 구현
-5. 파일 구조 및 타입 단언 정리
+<h1>Whokie</h1>
 
-### 7주차 개발 내용
+<h3>"쿠키로 친구에게 칭찬을? 오직 Whokie에서!"</h3>
+<br />
 
-1. API 폴더 구조 정리
-2. 쿠키 기록 페이지 로그 섹션 구현
-3. 쿠키 주기(메인) 기능 구현
-4. 마이페이지 기능 부분 구현
+https://github.com/user-attachments/assets/6d708a1a-8909-48ab-9969-1301c9bf743a
+
+
+<br />
+
+타인의 긍정적 평가로 나를 알아갈 수 있는 소셜 미디어 플랫폼
+
+### [🔗 Whokie 바로가기](https://whokie.com/)
+
+
+Whokie와 함께 진정한 나를 알아가보자!
+<br/>
+작은 칭찬이 큰 변화를 만들어내는 긍정의 선순환을 경험해보세요🎀
+
+<br/>
+
+</div>
+
+
+## 목차
+- [1. Whokie 서비스 소개](#1-whokie-소개)
+  - [👉🏻 Whokie 사용 설명서 👈🏻](#-whokie-사용-설명서-보기-)
+- [2. 프로젝트 소개](#2-프로젝트-소개)
+  - [👋🏻 팀원 소개](#-팀원-소개)
+  - [🗓️ 개발 기간](#%EF%B8%8F-개발-기간)
+  - [🏃 프로젝트 개요](#-프로젝트-개요)
+- [3. 프로젝트 구성](#3-프로젝트-구성)
+- [4. 프로젝트 이슈](#4-fe-프로젝트-이슈)
+  - [🛠️ 기술 스택](#%EF%B8%8F-기술-스택)
+  - [🏛️ 아키텍처](#%EF%B8%8F-아키텍처)
+  - [💾 ERD](#-erd)
+- [5. 개발 문화](#5-개발-문화)
+  - [📏 팀 그라운드 룰](https://www.notion.so/13e7e96b7e498104925cf9e3ef479c68)
+  - [💬 커밋 컨벤션](https://www.notion.so/13e7e96b7e4981729498fe6fbd8d2bf8)
+  - [📷 팀 미팅](#-팀-미팅)
+  - [🚨 회의록](https://www.notion.so/13e7e96b7e4981ea9ce8d6e2c5e9f513)
+- [6. 링크 모음](#6-whokie를-자세히-알고-싶다면)
+- [7. 직접 프로젝트 실행하기](#7-직접-프로젝트-실행하기)
+
+# 1. Whokie 소개
+1. 🔒 **로그인 및 회원가입**
+    - 카카오 간편 로그인으로 간단하게 회원가입과 로그인이 가능해요
+    - 내 카카오 프로필과 카카오 친구들을 불러올 수 있어요
+2. 🎫 **마이페이지로 나를 보여줘요**
+    - 마이페이지는 로그인 하지 않은 사람들도 볼 수 있어요
+3. 🍪 **쿠키 주기로 친구에게 칭찬을 해요**
+    - 어떤 친구에게 쿠키를 줄 지 모르겠다면 선택지를 Reload↻ 할 수 있어요
+    - 질문에 적합한 친구가 없다면 질문을 Skip**➔** 할 수 있어요
+4. 🏅 **친구에게 랭킹을 자랑해요**
+    - 내가 쿠키 받은 질문 Top3를 보여줄 수 있어요
+    - 친구의 랭킹을 보면서 친구의 장점을 찾아봐요
+5. 💌 **실시간 쿠키 알림**
+    - 쿠키를 받으면 실시간으로 나에게 알림이 와요
+6. 🔑 **나에게 쿠키를 준 친구에 대한 힌트를 조회해요**
+    - 나에게 누가 쿠키를 줬는지 힌트를 볼 수 있어요
+    - 힌트는 세 개 까지만 제공돼요
+    - 정확한 이름과 정보는 알 수 없어요 힌트로 추측 해볼까요?
+7. 📣 **프로필 질문으로 친구들에게 물어봐요**
+    - 친구들에게 물어보고 싶은 질문은 프로필 질문으로 질문해요
+    - 친구들의 프로필 질문에 익명으로 재밌게 대답해요
+8. 🏫 **그룹에서 친구들과 함께 즐겨요**
+    - 함께 쿠키 주기를 즐기고 싶은 친구들과 그룹을 만들어요
+    - 그룹 랭킹을 보고 우리 그룹의 쿠키 왕을 노려봐요
+9. 💸 **포인트를 차곡차곡 모아봐요**
+    - 친구에게 쿠키를 주면 포인트를 모을 수 있어요
+    - 힌트가 빨리 보고 싶다면 1000원에 100포인트를 구매할 수 있어요
+
+### [👉🏻 Whokie 사용 설명서 보기 👈🏻](https://petal-balaur-9dc.notion.site/Whokie-13e7e96b7e4980798b33e9563846b39d)
+
+<br />
+
+# 2. 프로젝트 소개
+## 👋🏻 팀원 소개
+
+<div align="center">
+
+### FE
+
+|김아진|안희정|정솔빈|
+|:-----:|:---:|:-----:|
+|[<img src="https://github.com/ppochaco.png" width="100px">](https://github.com/ppochaco)|[<img src="https://github.com/anheejeong.png" width="100px">](https://github.com/anheejeong)|[<img src="https://github.com/solempty.png" width="100px">](https://github.com/solempty)|
+|조장|테크리더|타임키퍼|
+
+### BE
+
+|권다운|김건|신형진|유승욱|
+|:-----:|:---:|:-----:|:---:|
+|[<img src="https://github.com/momnpa333.png" width="100px">](https://github.com/momnpa333)|[<img src="https://github.com/gunGeongun.png" width="100px">](https://github.com/gunGeongun)|[<img src="https://github.com/hjinshin.png" width="100px">](https://github.com/hjinshin)|[<img src="https://github.com/yso8296.png" width="100px">](https://github.com/yso8296)|
+|테크리더|리마인더|리액셔너|기획리더|
+
+### [🔗 1인 1역 자세히보기](https://petal-balaur-9dc.notion.site/1-1-13e7e96b7e4981379331d7dd8c3c8b99)
+
+</div>
+
+## 🗓️ 개발 기간
+- 2024.08.19 ~ 2024.11.15
+
+## 🏃 프로젝트 개요
+
+- “타인의 긍정적 평가로 나를 알아갈 수 있는 소셜 미디어 플랫폼”을 구현
+
+저희 서비스의 기획 목적은 타인의 긍정적 평가와 피드백을 통해 사용자 스스로의 강점을 발견하고 자존감을 높이는 것입니다. 사람들이 자신의 매력을 객관적으로 확인할 수 있는 환경을 제공함으로써, 스스로에 대한 이해를 높이고 긍정적인 정체성을 형성하는 데 도움을 주고자 합니다. 또한. 커뮤니티의 응원과 긍정적 피드백을 통해 건강한 소셜 상호작용을 장려하여 사용자 간 긍정적인 영향력을 확산하는 것이 목표입니다.
+
+<br />
+
+
+# 3. 프로젝트 구성
+## 🛠️ 기술 스택
+### FE
+<img width="613" alt="image" src="https://github.com/user-attachments/assets/bee5daa4-8922-4c4a-9504-c7a6e8eb6748">
+
+|패키지 매니저|개발 라이브러리|CSS 프레임워크|개발 환경|
+|:-----:|:---:|:-----:|:-----:|
+|node v22.10.0|react v18.3.1|emotion v11.13.0|eslint v8.57.0|
+|npm v10.9.0|typescript v5.5.3||prettier v3.3.3|
+||||vite v5.4.1|
+
+
+### BE
+![제목 없는 다이어그램 drawio (3) (1)](https://github.com/user-attachments/assets/93417d97-904f-4c2f-8e3e-9010fb51112e)
+
+
+## 🏛️ 아키텍처
+<img width="1152" alt="image (33) (1)" src="https://github.com/user-attachments/assets/7e851684-1330-4295-adaf-b6fbff56d7f1">
+
+## 💾 ERD
+![image (32)](https://github.com/user-attachments/assets/4193e012-a41a-48ef-a113-751d89d8e88f)
+
+<br />
+
+# 4. FE 프로젝트 이슈
+
+1. [페이지 레이아웃](https://github.com/kakao-tech-campus-2nd-step3/Team6_FE/pull/46)
+
+    > 페이지별로 조금씩 달라지는 UI 어떻게 공통화할 수 있을까? 함성함수 컴포넌트 패턴으로 레이아웃을 만들어 페이지의 의존성 낮추기
+    > 
+    
+    페이지 수가 증가함에 따라 비슷한 디자인과 기능을 가진 페이지 레이아웃이 많아져, 유지보수가 어려워지고 생산성이 낮아졌습니다. 이를 해결하기 위해 객체지향의 단일 책임 원칙(SRP)을 만족하도록 합성함수 컴포넌트 설계 방식을 도입했습니다. 각 페이지의 레이아웃을 개별적으로 설계하는 대신, 재사용 가능한 컴포넌트를 만들어 컴포넌트 간의 의존성을 낮추고 UI의 일관성을 높였습니다.
+
+
+2. [에러를 효율적으로 처리하기](https://github.com/kakao-tech-campus-2nd-step3/Team6_FE/pull/87)
+
+    > console.error()는 이제 그만! Error Boundary로 공통 에러는 global 한번에, 커스텀 에러는 필요한 부분에서 바로 처리하기
+    > 
+    
+    global error boundary를 만들어 에러를 중앙 집중식으로 한번에 처리했습니다. 하위 컴포넌트에서 발생한 에러는 직접 캐치해, 사용자에게 입력값을 확인하라는 메세지를 보여주거나 로그인 버튼을 제공할 수 있습니다. 하위 컴포넌트에서 처리하지 않은 에러는 상위의 global error boundary에서 캐치해, 유저가 API를 다시 호출할 수 있는 리셋 버튼을 제공했습니다. 선언적으로 에러를 처리하면서 에러의 발생 흐름과 처리를 명확하게 정의하고, 일관적으로 에러를 관리 가능하게 했습니다.
+
+
+3. [힌트 슬라이드 창](https://github.com/kakao-tech-campus-2nd-step3/Team6_FE/pull/100)
+
+    > React Portal을 사용해 힌트 슬라이드 창 만들기
+    > 
+    
+    Whokie 프로젝트에서는 Chakra UI를 스타일 프레임워크로 사용하고 있습니다. 그러나 Chakra UI의 Drawer 컴포넌트는 기본적으로 포탈이 DOM의 root에 존재하는 문제점이 있었습니다. 이를 해결하기 위해, Drawer가 페이지 레이아웃을 기준으로 렌더링되도록 페이지 레이아웃과 Drawer를 React Portal로 연결했습니다. 이 방식 덕분에 원하는 UI를 사용하면서도, 부모 컴포넌트에서 정의된 상태와 함수에 접근할 수 있어 데이터 흐름을 유지할 수 있게 되었습니다.
+
+
+4. [테이블 생성](https://github.com/kakao-tech-campus-2nd-step3/Team6_FE/pull/149)
+
+    > 테이블은 더 이상 어렵고 복잡하게 만들 필요가 없다! 빠르고 간단하게 테이블 만들기
+    > 
+    
+    기본 테이블 구현은 테이블 태그의 잦은 사용으로 개발 부담이 있으며, 데이터를 받아 이를 기반으로 테이블을 구현할 때 직접 렌더링 하는 것이 성능 저하를 일으킬 수 있습니다. CSS 측면에서는 기본 테이블의 반응형 디자인에 한계가 있으며, 이를 보완하기 위해서는 많은 CSS 작업이 필요합니다. @tanstack/react-table 라이브러리는 가상화(Virtualization)를 통해 데이터 처리에서 필요한 행만 렌더링할 수 있도록 지원하여 메모리 사용량과 렌더링 시간을 줄일 수 있습니다. ColumnDef로 테이블 컬럼의 기본 데이터 모델을 구축한 후 Accessor Column에 데이터 형태의 컬럼을 구현하고, 이후 그에 맞게 테이블을 구현해 코드 라인을 줄여 코드의 간결성과 가독성을 높일 수 있습니다. 반응형 디자인을 자동으로 지원하는 라이브러리로 CSS 작업의 작업 소요 시간을 줄였습니다. 특히 대규모 데이터에서 테이블을 다룰 때 기본 테이블의 단점을 크게 보완할 수 있습니다.
+
+
+5. [채팅 컴포넌트](https://github.com/kakao-tech-campus-2nd-step3/Team6_FE/pull/52)
+
+    > 오른쪽 왼쪽 말풍선, 채팅 말풍선은 어떻게 만드는 걸까? 라이브러리 없이 채팅 컴포넌트 만들기
+    > 
+    
+    채팅창에서 왼쪽, 오른쪽 말풍선이 둘 다 필요하고 말풍선에 화살표 표시와 내용, 날짜 혹은 시간이 차례로 나와야 할 때 어떻게 컴포넌트를 만들면 좋을까 고민했습니다. 컴포넌트를 만들 때 방향을 받아와서 화살표 표시, 내용, 날짜를 flex 순서로 왼쪽 오른쪽 순서를 지정합니다. 화살표 표시를 위한 clip-path 지정을 위해 clippy 서비스를 사용하면 편리하게 polygon을 조작할 수 있고, 이 polygon을 이용해 화살표 CSS를 지정합니다.
+
+
+6. [랭킹 그래프 컴포넌트](https://github.com/kakao-tech-campus-2nd-step3/Team6_FE/pull/14)
+
+    > 랭킹 그래프, 상대적인 값으로 막대 그래프를 만들어보고 싶을 때에는?
+    > 
+    
+    랭킹 그래프와 같이 상대적인 값으로 막대 그래프를 만들고자 할 때가 있습니다. 이럴 때 상대적인 값은 어떻게 퍼센트(%)로 변환해서 CSS에 적용하면 좋을지 고민했습니다. 그래프에서 나타내고자 하는 값들 중 가장 큰 값을 100%로 기준을 잡고 다른 값들을 상대적인 퍼센트로 변환 후 height가 지정되어 있는 상위 컴포넌트에서 해당 퍼센트 만큼의 height로 막대 그래프의 상대적인 값을 보여줄 수 있습니다. 이러한 컴포넌트 사용을 통해 데이터에서 어떤 값을 넣어도 원하는 height만큼 그래프를 사용자에게 보여줄 수 있고, 사용자에게 값의 차이를 직관적으로 제공할 수 있습니다. 새로운 값의 데이터가 추가되더라도 개발자는 기존 구조 변경 없이 쉽게 확장 및 사용이 가능합니다.
+
+
+
+<br />
+
+# 5. 개발 문화
+
+### [📏 팀 그라운드 룰](https://petal-balaur-9dc.notion.site/13e7e96b7e498104925cf9e3ef479c68)
+### [💬 커밋 컨벤션](https://petal-balaur-9dc.notion.site/13e7e96b7e4981729498fe6fbd8d2bf8)
+### 📷 팀 미팅
+<img width="1264" alt="image" src="https://github.com/user-attachments/assets/206e58e3-e9a9-457e-aba0-4ff09f1efec8">
+<img width="1264" alt="image" src="https://github.com/user-attachments/assets/7a75f24f-3032-438e-9e4f-68f141c0faf5">
+<img width="1282" alt="image" src="https://github.com/user-attachments/assets/e7d2c2a7-7fde-4f67-a38a-b3fb75782189">
+
+### [🚨 회의록](https://petal-balaur-9dc.notion.site/13e7e96b7e4981ea9ce8d6e2c5e9f513)
+
+<br />
+
+# 6. Whokie를 자세히 알고 싶다면..
+### [✏️ Whokie 노션 페이지](https://petal-balaur-9dc.notion.site/Whokie-13e7e96b7e4980d8be59d0053ce13ea0?pvs=74)
+### [🎨 디자인 기획](https://www.figma.com/design/sySqClrjHgqffXymF3oSeG/%ED%9B%84%ED%82%A4-%EB%94%94%EC%9E%90%EC%9D%B8?node-id=0-1&t=POFIyKzBi8EJAouF-1)
+
+# 7. 직접 프로젝트 실행하기
+
+### 설치하기
+
+1. Clone Repository
+
+    ```tsx
+    git clone https://github.com/kakao-tech-campus-2nd-step3/Team6_FE.git whokie
+    ```
+
+2. Get in the project folder
+
+    ```tsx
+    cd whokie
+    ```
+
+3. Install dependencies via npm or yarn
+
+    ```tsx
+    npm install
+    ```
+
+    ```tsx
+    yarn
+    ```
+
+
+### Quick start
+
+Run development server
+
+```tsx
+npm start
+```
+
+```tsx
+yarn start
+```