최시원 / Singer-Composer

Go to a project
Toggle navigation Toggle navigation pinning
Mukho
c63e3713 1 parent 47b4dc75

Update readme.md and Site name

Inline Side-by-side
Showing 26 changed files with 84 additions and 88 deletions
This file is too large to display.
This file is too large to display.
This file is too large to display.
......@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>묵호 - About</title>
<title>가수와 작곡가의 만남 - About</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="../assets/favicon.ico" />
<!-- Bootstrap icons-->
......@@ -19,7 +19,7 @@
<!-- Navigation-->
<nav class="navbar navbar-light bg-light static-top">
<div class="container">
<a class="navbar-brand" href="/main">묵호의 놀이터</a>
<a class="navbar-brand" href="/main">가수와 작곡가의 만남</a>
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
<li><a href="/about" class="nav-link px-2 link-dark">About</a></li>
<li><a href="/board" class="nav-link px-2 link-dark">게시판</a></li>
......
......@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>묵호 - 게시판</title>
<title>가수와 작곡가의 만남 - 게시판</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="../assets/favicon.ico" />
<!-- Bootstrap icons-->
......@@ -19,7 +19,7 @@
<!-- Navigation-->
<nav class="navbar navbar-light bg-light static-top">
<div class="container">
<a class="navbar-brand" href="/main">묵호의 놀이터</a>
<a class="navbar-brand" href="/main">가수와 작곡가의 만남</a>
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
<li><a href="/about" class="nav-link px-2 link-dark">About</a></li>
<li><a href="/board" class="nav-link px-2 link-dark">게시판</a></li>
......
......@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>묵호 - 로그인</title>
<title>가수와 작곡가의 만남 - 로그인</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="../assets/favicon.ico" />
<!-- Bootstrap icons-->
......@@ -18,7 +18,7 @@
<body>
<nav class="navbar navbar-light bg-light static-top">
<div class="container">
<a class="navbar-brand" href="/main">묵호의 놀이터</a>
<a class="navbar-brand" href="/main">가수와 작곡가의 만남</a>
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
<li><a href="/about" class="nav-link px-2 link-dark">About</a></li>
<li><a href="/board" class="nav-link px-2 link-dark">게시판</a></li>
......
......@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>묵호 - 놀이터</title>
<title>가수와 작곡가의 만남</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="../assets/아이콘.png" />
<!-- Bootstrap icons-->
......@@ -19,7 +19,7 @@
<!-- Navigation-->
<nav class="navbar navbar-light bg-light static-top">
<div class="container">
<a class="navbar-brand" href="/main">묵호의 놀이터</a>
<a class="navbar-brand" href="/main">가수와 작곡가의 만남</a>
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
<li><a href="/about" class="nav-link px-2 link-dark">About</a></li>
<li><a href="/board" class="nav-link px-2 link-dark">게시판</a></li>
......@@ -39,7 +39,7 @@
<div class="col-xl-6">
<div class="text-center text-white">
<!-- Page heading-->
<h1 class="mb-5">묵호가 만든 놀이터다. 작곡가와 가수가 서로 연결되는데 그 목적이 있다.</h1>
<h1 class="mb-5">가수와 작곡가의 만남<br>가수와 작곡가의 협업을 도와주는 사이트입니다.</h1>
<iframe width="560" height="315" src="https://www.youtube.com/embed/wgbr7exUnzE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
......@@ -53,22 +53,22 @@
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex"><i class="bi-window m-auto text-primary"></i></div>
<h3>Fully Responsive</h3>
<p class="lead mb-0">This theme will look great on any device, no matter the size!</p>
<h3>협업을 도와주는 공간</h3>
<p class="lead mb-0">이곳에서 서로의 협업 파트너를 찾아보세요.</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex"><i class="bi-layers m-auto text-primary"></i></div>
<h3>Bootstrap 5 Ready</h3>
<p class="lead mb-0">Featuring the latest build of the new Bootstrap 5 framework!</p>
<h3>게시판</h3>
<p class="lead mb-0">게시판을 통해 다른 사용자들과 교류해보세요. 사진 및 동영상 첨부가 가능합니다.</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-0 mb-lg-3">
<div class="features-icons-icon d-flex"><i class="bi-terminal m-auto text-primary"></i></div>
<h3>Easy to Use</h3>
<p class="lead mb-0">Ready to use with your own content, or customize the source files!</p>
<h3>채팅</h3>
<p class="lead mb-0">채팅을 통해 다른 사용자들과 실시간으로 의견을 나눠보세요.</p>
</div>
</div>
</div>
......
......@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>묵호 - 회원가입</title>
<title>가수와 작곡가의 만남 - 회원가입</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="../assets/favicon.ico" />
<!-- Bootstrap icons-->
......@@ -19,7 +19,7 @@
<!-- Navigation-->
<nav class="navbar navbar-light bg-light static-top">
<div class="container">
<a class="navbar-brand" href="/main">묵호의 놀이터</a>
<a class="navbar-brand" href="/main">가수와 작곡가의 만남</a>
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
<li><a href="/about" class="nav-link px-2 link-dark">About</a></li>
<li><a href="/board" class="nav-link px-2 link-dark">게시판</a></li>
......
# Singer-Composer Matching Website Project
# 누가 내 노래 좀 들어줘요
+ Singer-Composer Matching Website Project
- 누구나, 제한없이, 사용 가능한 '가수-작곡가' 매칭 사이트
+ Developer
- **고승완**(Mukho)
- **배승호**(승호 D. 배)
- **최시원**(Rubyflyer)
+ Git Address: http://khuhub.khu.ac.kr/2017104034/Singer-Composer
---
## 사용 DB 정보
```
{
host: 'localhost',
port : 3306,
user: 'root',
password : '',
database : 'singer_composer'
}
```
sql 사용 파일<br>
>router/login/index.js<br>
>router/register/index.js<br>
>router/board/index.js<br>
>router/profile.index.js
## Usage
+ 게시판
>제목, 내용, 사진 및 동영상 첨부가 가능하다. 공지사항의 경우 운영자만 글쓰기 가능하고, 공통적으로 글 수정의 경우 작성자만, 글 삭제의 경우 운영자와 작성자만 가능하다.
>공지사항: 운영자가 서비스 사용자들에게 공지할 글을 올리는 게시판<br>
>작곡가 구인: 가수가 자신과 협업할 작곡가를 구하는 게시판<br>
>가수 구인: 작곡가가 자신의 곡에 노래를 불러줄 가수를 구하는 게시판<br>
>자유게시판: 모든 사용자들이 자유롭게 이용할 수 있는 게시판<br>
>건의사항: 서비스 사용자들이 운영자들에게 건의할 사항을 올리는 게시판
+ 채팅
>사이트 내 로그인 한 모든 사용자들이 참여하는 채팅 서비스
+ 프로필
>개인의 프로필 사진과 닉네임, 직종, 상태 메시지 변경 가능
---
## Database 명세
## Database 명세(Using MySQL)
```
Database = singer_composer
......@@ -68,6 +66,13 @@ create table picvideo(
---
## 주의 및 안내사항
- 게시판 추가 DB 이름(댓글은 board 대신 comment)
>공지사항: notice_board<br>
>작곡가 구인: composer_board<br>
>가수 구인: singer_board<br>
>자유게시판: free_board<br>
>건의사항: suggestion_board
- type이 운영자인 경우 서버에서 변경
- LF 오류시 Git에 하단 명령어 입력
>git config --global core.autocrlf true
......@@ -80,28 +85,19 @@ create table picvideo(
>SET @COUNT = 0;<br>
>UPDATE board SET idx = @COUNT:=@COUNT+1;
- 게시판 추가 DB 이름(댓글은 board 대신 comment)
>공지사항: notice_board<br>
>작곡가 구인: composer_board<br>
>가수 구인: singer_board<br>
>자유게시판: free_board<br>
>건의사항: suggestion_board
---
### 최종 수정: 2021-12-04 03:57<br>
## Contact
+ http://khuhub.khu.ac.kr/2017104034/Singer-Composer
### 최종 수정: 2021-12-08 21:29<br>
### 수정 내용:
1. 채팅 구현(팝업)
2. 시간 실시간 반영
3. 프로필 사진 추가
4. 프로필 검색 추가
5. 프로필 비주얼 업데이트
6. 채팅(socket) 사용 중 서버 재시작 시 서버 오류 해결
7. 코드 다듬음
8. 버그 수정
9. 댓글 등록, 열람, 삭제 기능 구현 및 버그 픽스
10. 채팅 중 서버 재시작시 기존 참여자들 리셋시킴
11. 요소 좌우 길이 80%로 조절
12. 게시판 [공지사항/작곡가 구인/가수 구인/자유게시판/건의사항]으로 분화
13. 공지사항 게시판에는 운영자만 글쓰기 가능하게 함.
14. 게시판별 게시글 사진 및 동영상 열람기능 추가. 하지만 아직 업로드기능 개발중
15. 게시판별 사진 및 동영상 업로드기능 완료. 게시글 전용 사진/동영상 저장 폴더인 assets/picvid 추가
\ No newline at end of file
1. 프로필 사진/검색 추가
2. 프로필 비주얼 업데이트
3. 채팅(socket) 사용 중 서버 재시작 시 서버 오류 해결
4. 버그 수정
5. 댓글 등록, 열람, 삭제 기능 구현 및 버그 픽스
6. 요소 좌우 길이 80%로 조절
7. 게시판 [공지사항/작곡가 구인/가수 구인/자유게시판/건의사항]으로 분화
8. 공지사항 게시판에는 운영자만 글쓰기 가능하게 함.
9. 게시판별 게시글 사진 및 동영상 열람기능 추가.
10. 게시판별 사진 및 동영상 업로드기능 완료. 게시글 전용 사진/동영상 저장 폴더인 assets/picvid 추가
\ No newline at end of file
......
......@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>묵호 - About</title>
<title>가수와 작곡가의 만남 - About</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="../assets/favicon.ico" />
<!-- Bootstrap icons-->
......@@ -19,7 +19,7 @@
<!-- Navigation-->
<nav class="navbar navbar-light bg-light static-top">
<div class="container">
<a class="navbar-brand" href="/main">묵호의 놀이터</a>
<a class="navbar-brand" href="/main">가수와 작곡가의 만남</a>
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
<li><a href="/about" class="nav-link px-2 link-dark">About</a></li>
<li><a href="/board" class="nav-link px-2 link-dark">게시판</a></li>
......
......@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<title>묵호 - 채팅</title>
<title>가수와 작곡가의 만남 - 채팅</title>
<link rel="stylesheet" href="/css/chat.css">
<script src="/socket.io/socket.io.js"></script>
<script src="/js/chat.js"></script>
......
......@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<title>묵호 - 채팅</title>
<title>가수와 작곡가의 만남 - 채팅</title>
<link rel="stylesheet" href="/css/chat.css">
<script src="/socket.io/socket.io.js"></script>
<script src="/js/command.js"></script>
......
......@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>묵호 - <%= title %></title>
<title>가수와 작곡가의 만남 - <%= title %></title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="../assets/favicon.ico" />
<!-- Bootstrap icons-->
......@@ -20,7 +20,7 @@
<!-- Navigation-->
<nav class="navbar navbar-light bg-light static-top">
<div class="container">
<a class="navbar-brand" href="/main">묵호의 놀이터</a>
<a class="navbar-brand" href="/main">가수와 작곡가의 만남</a>
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
<li><a href="/about" class="nav-link px-2 link-dark">About</a></li>
<li><a href="/board" class="nav-link px-2 link-dark">게시판</a></li>
......
......@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>묵호 - 로그인</title>
<title>가수와 작곡가의 만남 - 로그인</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="../assets/favicon.ico" />
<!-- Bootstrap icons-->
......@@ -19,7 +19,7 @@
<!-- Navigation-->
<nav class="navbar navbar-light bg-light static-top">
<div class="container">
<a class="navbar-brand" href="/main">묵호의 놀이터</a>
<a class="navbar-brand" href="/main">가수와 작곡가의 만남</a>
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
<li><a href="/about" class="nav-link px-2 link-dark">About</a></li>
<li><a href="/board" class="nav-link px-2 link-dark">게시판</a></li>
......
......@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>묵호 - 놀이터</title>
<title>가수와 작곡가의 만남</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="../assets/아이콘.png" />
<!-- Bootstrap icons-->
......@@ -19,7 +19,7 @@
<!-- Navigation-->
<nav class="navbar navbar-light bg-light static-top">
<div class="container">
<a class="navbar-brand" href="/main">묵호의 놀이터</a>
<a class="navbar-brand" href="/main">가수와 작곡가의 만남</a>
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
<li><a href="/about" class="nav-link px-2 link-dark">About</a></li>
<li><a href="/board" class="nav-link px-2 link-dark">게시판</a></li>
......@@ -39,7 +39,7 @@
<div class="col-xl-6">
<div class="text-center text-white">
<!-- Page heading-->
<h1 class="mb-5">묵호가 만든 놀이터다. 작곡가와 가수가 서로 연결되는데 그 목적이 있다.</h1>
<h1 class="mb-5">가수와 작곡가의 만남<br>가수와 작곡가의 협업을 도와주는 사이트입니다.</h1>
<iframe width="560" height="315" src="https://www.youtube.com/embed/wgbr7exUnzE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
......@@ -53,22 +53,22 @@
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex"><i class="bi-window m-auto text-primary"></i></div>
<h3>Fully Responsive</h3>
<p class="lead mb-0">This theme will look great on any device, no matter the size!</p>
<h3>협업을 도와주는 공간</h3>
<p class="lead mb-0">이곳에서 서로의 협업 파트너를 찾아보세요.</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex"><i class="bi-layers m-auto text-primary"></i></div>
<h3>Bootstrap 5 Ready</h3>
<p class="lead mb-0">Featuring the latest build of the new Bootstrap 5 framework!</p>
<h3>게시판</h3>
<p class="lead mb-0">게시판을 통해 다른 사용자들과 교류해보세요. 사진 및 동영상 첨부가 가능합니다.</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-0 mb-lg-3">
<div class="features-icons-icon d-flex"><i class="bi-terminal m-auto text-primary"></i></div>
<h3>Easy to Use</h3>
<p class="lead mb-0">Ready to use with your own content, or customize the source files!</p>
<h3>채팅</h3>
<p class="lead mb-0">채팅을 통해 다른 사용자들과 실시간으로 의견을 나눠보세요.</p>
</div>
</div>
</div>
......
......@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>묵호 - 내 정보</title>
<title>가수와 작곡가의 만남 - 내 정보</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="../assets/favicon.ico" />
<!-- Bootstrap icons-->
......@@ -18,7 +18,7 @@
<body>
<nav class="navbar navbar-light bg-light static-top">
<div class="container">
<a class="navbar-brand" href="/main">묵호의 놀이터</a>
<a class="navbar-brand" href="/main">가수와 작곡가의 만남</a>
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
<li><a href="/about" class="nav-link px-2 link-dark">About</a></li>
<li><a href="/board" class="nav-link px-2 link-dark">게시판</a></li>
......
......@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>묵호 - 내 정보</title>
<title>가수와 작곡가의 만남 - 내 정보</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="../assets/favicon.ico" />
<!-- Bootstrap icons-->
......@@ -19,7 +19,7 @@
<body>
<nav class="navbar navbar-light bg-light static-top">
<div class="container">
<a class="navbar-brand" href="/main">묵호의 놀이터</a>
<a class="navbar-brand" href="/main">가수와 작곡가의 만남</a>
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
<li><a href="/about" class="nav-link px-2 link-dark">About</a></li>
<li><a href="/board" class="nav-link px-2 link-dark">게시판</a></li>
......
......@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>묵호 - 내 정보 수정</title>
<title>가수와 작곡가의 만남 - 내 정보 수정</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="../assets/favicon.ico" />
<!-- Bootstrap icons-->
......@@ -19,7 +19,7 @@
<body>
<nav class="navbar navbar-light bg-light static-top">
<div class="container">
<a class="navbar-brand" href="/main">묵호의 놀이터</a>
<a class="navbar-brand" href="/main">가수와 작곡가의 만남</a>
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
<li><a href="/about" class="nav-link px-2 link-dark">About</a></li>
<li><a href="/board" class="nav-link px-2 link-dark">게시판</a></li>
......
<!DOCTYPE html>
<html>
<head>
<title>묵호 - <%= row.title %></title>
<title>가수와 작곡가의 만남 - <%= row.title %></title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="../assets/favicon.ico" />
<!-- Bootstrap icons-->
......@@ -26,7 +26,7 @@
<!-- Navigation-->
<nav class="navbar navbar-light bg-light static-top">
<div class="container">
<a class="navbar-brand" href="/main">묵호의 놀이터</a>
<a class="navbar-brand" href="/main">가수와 작곡가의 만남</a>
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
<li><a href="/about" class="nav-link px-2 link-dark">About</a></li>
<li><a href="/board" class="nav-link px-2 link-dark">게시판</a></li>
......
......@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>묵호 - 회원가입</title>
<title>가수와 작곡가의 만남 - 회원가입</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="../assets/favicon.ico" />
<!-- Bootstrap icons-->
......@@ -19,7 +19,7 @@
<!-- Navigation-->
<nav class="navbar navbar-light bg-light static-top">
<div class="container">
<a class="navbar-brand" href="/main">묵호의 놀이터</a>
<a class="navbar-brand" href="/main">가수와 작곡가의 만남</a>
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
<li><a href="/about" class="nav-link px-2 link-dark">About</a></li>
<li><a href="/board" class="nav-link px-2 link-dark">게시판</a></li>
......
......@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>묵호 - 프로필 사진 업로드</title>
<title>가수와 작곡가의 만남 - 프로필 사진 업로드</title>
</head>
<body>
<form action = 'upload' method = 'post' enctype="multipart/form-data">
......
<!DOCTYPE html>
<html>
<head>
<title>묵호 - 글쓰기</title>
<title>가수와 작곡가의 만남 - 글쓰기</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="../assets/favicon.ico" />
<!-- Bootstrap icons-->
......@@ -19,7 +19,7 @@
<!-- Navigation-->
<nav class="navbar navbar-light bg-light static-top">
<div class="container">
<a class="navbar-brand" href="/main">묵호의 놀이터</a>
<a class="navbar-brand" href="/main">가수와 작곡가의 만남</a>
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
<li><a href="/about" class="nav-link px-2 link-dark">About</a></li>
<li><a href="/board" class="nav-link px-2 link-dark">게시판</a></li>
......