프로젝트 소개
익명으로 고민을 나누는 채팅 커뮤니티 서비스 - 오픈마인드
🕰️ 개발 기간
📅 25.03.06 - 25.03.21💫 팀원 소개
이나경 👩🏻💻 이현석 👨💻 정지원 👩💻 차경훈 👨💻 홍승원 👨💻
💼 팀원 역할
이나경 👩🏻💻
- 메인 페이지 (
/) 구현
반응형 레이아웃을 구성하고, 사용자 경험을 고려한 인터페이스 구현- 질문받기 버튼 클릭 시 피드 생성
API와 연결하고, 응답 데이터를 처리하는 로직 구현API 응답으로 받은id와name을로컬 스토리지에 저장하여 세션 유지 및 사용자 식별 기능 추가- 피드 생성 후 반환된
id 값을 활용하여/post/{id}/answer경로로 동적 이동하는 기능 구현- 개별 피드 (질문이 없을 때) 페이지 (
/post/{id}) 구현
- 질문이 존재하지 않을 경우의 상태를 고려하여 적절한
UI/UX설계 및 개발"링크 공유하기" 버튼클릭 시 성공적으로 복사되었음을 알리는 토스트 팝업 UI 구현
이현석 👨💻
- 질문목록 페이지 (
/list) 구현
- 반응형 디자인 구성 및 최신순 정렬 기능 추가
- 로고 클릭 시 메인 페이지로 이동
- 기능 개발
API 응답으로 받은id와name을로컬 스토리지에 저장하여 세션 유지 및 사용자 식별 기능 추가로컬스토리지를 확인하여 값이 없을 경우 경고창을 띄우고, 값이 있을 경우 해당 값을 표시하며, 클릭하면 동적으로/post/{id}/answer경로로 이동하는 기능 구현API 서버에서 데이터를 받아와 카드 프로필을 동적으로 생성하고, 각 카드 프로필을 클릭하면/post/{id}경로로 동적 이동하는 기능 구현- 카드 목록을 최신순과 이름순으로 정렬할 수 있도록 구현하였으며, 기본적으로 최신순으로 정렬됨
- 5개의 페이지 번호를 표시하며,. 오른쪽 화살표(▶) 클릭 시 다음 페이지로 이동하고, 마지막 번호에서 클릭하면 번호가 오른쪽으로 이동. 왼쪽 화살표(◀) 클릭 시 이전 페이지로 이동하며, 첫 번호에서 클릭하면 번호가 왼쪽으로 이동.
정지원 👩💻
- Global 스타일 설정
- 프로젝트 전반의 일관된
UI/UX경험을 위해Global Style을 정의 및 적용- 개별 피드 질문하기 모달창 구현 (
/post/{id})
- 모달창 퍼블리싱 (재사용성을 고려한
TextForm 컴포넌트개발)- 모달창 상태 관리 (X 버튼 및 외부 클릭 시 닫기)
- 입력 여부에 따른 UI 변경 (질문 입력 시 "질문 보내기" 버튼 활성화, 미입력 시 비활성화)
API 연동및 데이터 처리 (질문 생성API 호출및 응답 처리, 에러 핸들링 및 사용자 피드백 제공)- 반응형 UI 적용 (PC, Tablet, Mobile 환경 대응, CSS Media Query 및 Styled-components 활용)
차경훈 👨💻
- 답변완료 페이지 (
/post/{id}/answer) 구현
- 답변 입력 및 "답변 완료" 버튼 활성화 기능
- 작성된 답변 “수정하기” 버튼 클릭 시 수정 가능
- 수정 내용이 없을 경우 “수정 완료” 버튼 비활성화
- “삭제하기” 버튼 클릭 시 받은 질문 및 피드 일괄 삭제
홍승원 👨💻
- 개별 피드 페이지 (
/post/{id}) 구현
API 연동(사용자 정보, 질문, 답변 불러오기)- 아이콘 컴포넌트 분리 및 공유 기능 구현
- 질문, 답변 렌더링 및 좋아요/싫어요 기능 구현
- 질문 작성하기 버튼 퍼블리싱
🚀 기술 스택
🛠 Tools
⚙️ Config
💻 Development
📢 Communication
Getting Started
$ git clone https://github.com/FE14-part2-team5-OpenMind/OpenMind_Team5.git
$ npm install
$ npm run dev📁 디렉토리 구조
📦 FE14-part2-team5-OpenMind
📁 node_modules/ 📁 public/ 📁 src/ 📁 assets/ 📁 font/ 📁 actor/ 📁 pretendard/ 📁 icons/ 📁 images/ 📁 components/ 📁 Modal/ 📁 common/ 📁 hooks/ 📁 pages/ 📁 services/ 📁 styles/ 📄 App.css 📄 index.css 📄 reset.css 📄 App.jsx 📄 main.jsx 📄 index.html .gitignore eslint.config.js package-lock.json package.json README.md vite.config.js
node_modules/
• 프로젝트의 의존성 패키지들이 저장되는 디렉토리입니다.
•npm install명령어를 통해 설치된 모든 라이브러리들이 이곳에 위치합니다.
public/
• 애플리케이션의 정적 파일들이 위치하는 폴더입니다.
src/
• 애플리케이션의 주요 소스 코드들이 위치하는 디렉토리입니다.
• React 컴포넌트, 스타일 파일, 유틸리티 함수 등이 이곳에 포함됩니다.
assets/
• 애플리케이션에서 사용하는 이미지, 폰트 등과 같은 정적 자원이 저장되는 폴더입니다.
•font/: 애플리케이션에서 사용하는 폰트 파일들
•actor/: actor 폰트 관련 파일들
•pretendard/: pretendard 폰트 관련 파일들
•icons/: 애플리케이션에서 사용하는 아이콘 파일들
•images/: 이미지 파일들이 위치합니다.
components/
• 재사용 가능한 React 컴포넌트들이 위치하는 폴더입니다.
•Modal/: 모달 컴포넌트 관련 코드
•common/: 공통 UI 컴포넌트들
hooks/
• React의 커스텀 훅들이 위치하는 폴더입니다.
• 상태 관리, 데이터 fetching 등의 로직을 처리하는 훅들이 포함됩니다.
pages/
• 애플리케이션의 각 페이지 컴포넌트들이 위치하는 폴더입니다.
services/
•
API통신, 데이터 처리 로직을 처리하는 서비스 코드들이 위치하는 폴더입니다.
styles/
• CSS 파일들이 위치하는 폴더입니다. 전체적인 스타일, 레이아웃을 정의합니다.
App.jsx
• 애플리케이션의 루트 컴포넌트입니다. 전체 구조와 레이아웃을 정의합니다.
main.jsx
• React 애플리케이션의 진입점 파일입니다.
App.jsx 컴포넌트를 렌더링합니다.
package.json
• 프로젝트의 의존성, 스크립트, 설정 등이 포함된 메타데이터 파일입니다.
package-lock.json
• 의존성의 정확한 버전 정보를 기록하는 파일입니다. 팀원 간 동일한 버전의 패키지를 사용하도록 보장합니다.
.gitignore
•
Git에서 추적하지 않을 파일들을 정의한 파일입니다. 예:node_modules/, 빌드 결과물 등.
eslint.config.js
• 코드 품질을 유지하기 위해
ESLint의 규칙을 설정하는 파일입니다.
index.html
• 애플리케이션의 루트 HTML 템플릿입니다. React 애플리케이션이 렌더링될 DOM을 포함합니다.
README.md
• 프로젝트에 대한 설명, 설치 방법, 사용법 등을 제공하는 파일입니다.
vite.config.js
•
Vite의 빌드 및 개발 서버 설정을 정의한 파일입니다.
