웹프레임워크1 나야채소팀 : Artory

*저희 Artory를 실행해보기 위해서는 6. 프로젝트 시작 부분으로 가주세요.

👋 1. 프로젝트에 오신 것을 환영합니다 👋

Artory는 사용자들이 전시에 대한 개인의 경험을 기록하고 감정 기반으로 소통할 수 있는 플랫폼입니다.

리액트(React)를 활용하여 개발되었으며, 프론트엔드 기능에 중점을 두어 사용자 경험을 제공합니다. *프론트 프로젝트이기에 현재 백엔드 로직과 데이터베이스는 구현되어 있지 않습니다.

✨ 2. 주요 기능 (Main Features) ✨

1. 맞춤 전시 추천 기능

   • 온보딩 설문을 바탕으로 사용자에게 적합한 전시를 추천해줍니다.

2. 감정 기반의 커뮤니티 기능

   • 다른 사용자가 업로드한 작품을 감상하고 감정 기반의 피드백을 남길 수 있습니다.

3. 체계적인 전시 기록 기능

   • 사용자는 자신의 예술 작품을 업로드하고 공유할 수 있습니다.

👥 3. 팀원 소개 (Team Members)

김혜진	이주연	임혜정	정예빈
@khyaejin	@Juye0nLee	@frombunny	@benniejung

📚 4. 기술 스택 📚

• 💻 React: 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리
• 🛠 JavaScript: 동적인 웹 페이지를 구현하기 위한 프로그래밍 언어
• 🎨 HTML5 & CSS3: 웹 페이지의 구조와 스타일을 정의

📂 5. 프로젝트 구조 📂

• 📁 public: 정적 파일 및 기본 HTML 템플릿
• 📁 src: 메인 소스 디렉토리
  • 📂 components: 재사용 가능한 리액트 컴포넌트
  • 📂 pages: 각 페이지별 컴포넌트
  • 📂 assets: 이미지 및 스타일 파일
  • 📂 utils: 유틸리티 함수

🚀 6. 시작하기 🚀

1. 레포지토리 클론하기:

   • git clone https://github.com/HSU-Web-Framework1-Artory/Artory.git

2. 프로젝트 디렉토리로 이동:

   • cd Artory

3. 의존성 설치:

   • npm install

4. 애플리케이션 실행:

   • npm start

5. 실행 시 문제가 발생한다면, 다음 라이브러리들을 직접 설치해 주세요:

# 날짜 관리 라이브러리
npm install moment@^2.30.1

# React 라이브러리
npm install react@^18.3.1 react-dom@^18.3.1

# React Modal (모달 창 구현)
npm install react-modal@^3.16.1

# React Router (페이지 간 라우팅)
npm install react-router-dom@^6.26.2

# React Scripts (React 프로젝트 빌드 및 실행 스크립트)
npm install [email protected]

# Styled Components (CSS-in-JS 스타일링 라이브러리)
npm install styled-components@^6.1.13

# Swiper (전시 페이지용)
npm install swiper

# 날짜 선택 컴포넌트 (My Story 페이지용)
npm install react-datepicker

# 카카오 소셜 로그인
npm install @kakao/kakao-js-sdk

⭐ 7. README 소개 ⭐

이 README는 Artory 프로젝트의 주요 기능, 기술 스택, 설정 방법에 대한 간결한 개요를 제공합니다.

✨ Special Thanks ✨
Special thanks to the P-ND team for their continuous support! 🚀
For more details, check out the GitHub repository.