📅 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 연동 (사용자 정보, 질문, 답변 불러오기)
- 아이콘 컴포넌트 분리 및 공유 기능 구현
- 질문, 답변 렌더링 및 좋아요/싫어요 기능 구현
- 질문 작성하기 버튼 퍼블리싱
$ git clone https://github.com/FE14-part2-team5-OpenMind/OpenMind_Team5.git
$ npm install
$ npm run dev
node_modules/
public/
src/
assets/
font/
actor/
pretendard/
icons/
images/
components/
Modal/
common/
hooks/
pages/
services/
styles/
App.css
App.jsx
index.css
main.jsx
reset.css
.gitignore
eslint.config.js
index.html
package-lock.json
package.json
README.md
vite.config.js
• 프로젝트의 의존성 패키지들이 저장되는 디렉토리입니다.
• npm install 명령어를 통해 설치된 모든 라이브러리들이 이곳에 위치합니다.
• 애플리케이션의 정적 파일들이 위치하는 폴더입니다.
• index.html 파일을 비롯한 이미지, 아이콘, 폰트 파일들이 포함됩니다.
• 애플리케이션의 주요 소스 코드들이 위치하는 디렉토리입니다.
• React 컴포넌트, 스타일 파일, 유틸리티 함수 등이 이곳에 포함됩니다.
• 애플리케이션에서 사용하는 이미지, 폰트 등과 같은 정적 자원이 저장되는 폴더입니다.
• font/: 애플리케이션에서 사용하는 폰트 파일들
• actor/: actor 폰트 관련 파일들
• pretendard/: pretendard 폰트 관련 파일들
• icons/: 애플리케이션에서 사용하는 아이콘 파일들
• images/: 이미지 파일들이 위치합니다.
• 재사용 가능한 React 컴포넌트들이 위치하는 폴더입니다.
• Modal/: 모달 컴포넌트 관련 코드
• common/: 공통 UI 컴포넌트들
• React의 커스텀 훅들이 위치하는 폴더입니다.
• 상태 관리, 데이터 fetching 등의 로직을 처리하는 훅들이 포함됩니다.
• 애플리케이션의 각 페이지 컴포넌트들이 위치하는 폴더입니다.
• API 통신, 데이터 처리 로직을 처리하는 서비스 코드들이 위치하는 폴더입니다.
• CSS 파일들이 위치하는 폴더입니다. 전체적인 스타일, 레이아웃을 정의합니다.
• 애플리케이션의 루트 컴포넌트입니다. 전체 구조와 레이아웃을 정의합니다.
• React 애플리케이션의 진입점 파일입니다. App.jsx 컴포넌트를 렌더링합니다.
• 프로젝트의 의존성, 스크립트, 설정 등이 포함된 메타데이터 파일입니다.
• 의존성의 정확한 버전 정보를 기록하는 파일입니다. 팀원 간 동일한 버전의 패키지를 사용하도록 보장합니다.
• Git에서 추적하지 않을 파일들을 정의한 파일입니다. 예: node_modules/, 빌드 결과물 등.
• 코드 품질을 유지하기 위해 ESLint의 규칙을 설정하는 파일입니다.
• 애플리케이션의 루트 HTML 템플릿입니다. React 애플리케이션이 렌더링될 DOM을 포함합니다.
• 프로젝트에 대한 설명, 설치 방법, 사용법 등을 제공하는 파일입니다.
• Vite의 빌드 및 개발 서버 설정을 정의한 파일입니다.
