Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
leegiseo00 committed May 8, 2024
2 parents 60ec11d + 0e31581 commit af59f44
Show file tree
Hide file tree
Showing 15 changed files with 233 additions and 76 deletions.
27 changes: 27 additions & 0 deletions 2024-05-08.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
# 📍14차 회의
+ 날짜 : 2024-05-08
+ 장소 : 미래관 424

---

# 📍회의 내용
+ 각자 개발한 것 공유
+ 모달 설정할 때 DB에서 리뷰데이터를 가져오기 함
+ AWS 가입

## 📍개인 별 개발 성과
+ 유현석:
+ 이기서: DB에서 50자 이상, 최근 작성된 리뷰들 필터링해서 가져오기, 가져온 데이터를 추천하는 알고리즘 구현완료
+ 박정빈: DB 스키마 구성, 블러 박스 생성, 모달창 생성
+ 남혜영: 에디터 라이브러리를 어느 정도 마무리했으나 저장에 대한 구현을 제대로 하지 못함

## 📍교수님 피드백
+ 이기서: DB에서 작성날짜 기준 최근 가져온 리뷰들이 연관성이 없는 리뷰들만 있다면?? -> 상대적으로 비교하여 정렬 후 상위값만 포스팅하는 것은 한계가 있음, 절대적인 유사도 수치 기준이 필요함 절대적인 유사도 수치가 넘는 리뷰가 20개 미만이라면?? -> 절대적 유사도 수치를 넘는 유사한 리뷰가 20개가 될 때까지 이전 과정 반복
+ 접근성을 고려하여 휴대폰 웹에서도 사용할 수 있도록 만들자
+ 저장 기능을 구현할 때 제대로 되는지, 임시저장 시 어떻게 저장할 것인지, 누군가 보고 있을 때 수정이 들어간다면 어떻게 할 것인지

## 📍다음 미팅까지 목표
+ 유현석:
+ 이기서: 교수님 피드백 적용, 웹사이트에 포스팅 구현, 프로시져 구현(가져왔던 리뷰들은 DB에서 가져올 때 제외)
+ 박정빈: 모달-DB 연결 , 추천알고리즘 무한스크롤에 적용
+ 남혜영: 저장 기능이 제대로 기능하도록 오류 해결
15 changes: 12 additions & 3 deletions back/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -94,10 +94,8 @@ app.post('/api/filter', (req, res) => {
res.status(500).json({ error: '데이터베이스에 필터를 저장하는 중 오류가 발생했습니다.' });
}else{
res.json({result});

}
})

});

//signIn 기능
Expand All @@ -117,7 +115,18 @@ app.post('/api/signIn', (req, res) => {
});
});


app.post('/api/library',(req,res)=>{
const {UID} = req.body;
connection.query('SELECT * FROM posts WHERE UID=? ORDER BY create_at DESC',[UID],(error,result)=>{
if(error){
res.status(500).json({ error: '데이터베이스에서 데이터를 가져오는 중 오류가 발생했습니다.' });
}
else{
//console.log({result});
res.json({result});
}
})
})


//react에서 route 사용하기 - 맨 밑에 둘 것
Expand Down
14 changes: 14 additions & 0 deletions front/src/components/MoreButton.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from "react";
import styles from "../css/MoreButton.module.css"
function MoreButton({nav}){
// const moreButton = document.querySelector(`.${styles.MoreButton}`)
// moreButton.addEventListener('click',()=>{})
return (<>
<div className={styles.MoreButton}>

</div>

</>);
}

export default MoreButton;
57 changes: 54 additions & 3 deletions front/src/components/MorePage.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,57 @@
function MorePage(){// 더보기 페이지
//
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import styles from "../css/MorePage.module.css";
import MoreButton from "./MoreButton";
function MorePage() {
const UID = useSelector(state => state.UID);
const [posts, setPosts] = useState([]);

useEffect(() => {//화면이 렌더 될 때 글 목록을 가져온다.
if (UID !== '') {
fetch("/api/library", {
method: "POST",
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({UID: UID})
})
.then(res => res.json())
.then(data => {
setPosts(data.result);
})
.catch(error => {
console.error("Error:", error);
});
}
}, []);

return (
<>
<div className={styles.box}>
{/* Functional buttons */}
<div className={styles.buttonBox}>
{/* 정보수정,공지사항,문의하기,로그아웃 */}
<div></div><div></div><div></div><div></div>

</div>
{/* Written Posts */}
<div className={styles.libraryBox}>
<h2>내 서재</h2>
<div className={styles.postsContainer}>
{posts.map(post => (
<div key={post.postID} className={styles.postBox}>
{post.title} {/* Assuming posts have a title property */}
</div>
))}
</div>
</div>
{/* Drafts */}
<div className={styles.libraryBox}>
{/* Other components for drafts could be similar */}
</div>
</div>
</>
);
}

export default MorePage;
export default MorePage;
48 changes: 23 additions & 25 deletions front/src/components/NavButton.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,19 +25,25 @@ function NavButton(props) {
const nav = props.nav; //{filter , post , library , more , logo}
const navigate = useNavigate();

// 페이지 이동 함수
function switchPage() {
if (nav === "filter") {
return;
} else if (nav === "logo"){
navigate(`/`);
} else {
if(UID==='')openModal();
else navigate(`/${nav}`);


}
// NavButton click handler
function onclickHandler() {
if (nav === "filter" && UID!=="") {
openModal();
return;
} else if (nav === "logo"){
navigate(`/`);
} else {//비회원 post 기능 허용할지 의논필요
if(UID==='')openModal2();
else navigate(`/${nav}`);
}
}
function openModal(){
console.log("open modal ")
setIsOpen(true);}
function openModal2() {
console.log("signIn please..")
setIsOpen2(true);
}

function selectImage(){//nav 에 따라 이미지 변경 require로 동적 처리 하려했는데 실패해서 정적처리한 후 일일히 지정
if(nav==='filter') return filterImg;
Expand All @@ -61,16 +67,7 @@ function NavButton(props) {

}, []);

function openModal() {
if(UID===''){
console.log("signIn please..")
setIsOpen2(true);
}
else if(nav==='filter'){
console.log("open modal ")
setIsOpen(true);
}
}

function afterOpenModal() {
//modal 이 열리고 난 이후 적용시킬 것을 적으면 된다~
//subtitle.style.color = '#f00';
Expand Down Expand Up @@ -115,12 +112,13 @@ function NavButton(props) {
console.error('Error:', error);
});
};

const toSignIn = ()=>{
navigate('/signIn');
}
return (
<>
<span id={styles.buttonBody} onClick={()=>{switchPage();openModal();}}>
<span id={styles.buttonBody} onClick={onclickHandler}>
<img id={styles.img}src={image} alt={nav}/>
<span id={styles.buttonName}>{nav==='logo'?null:nav}</span>
</span>
Expand All @@ -131,7 +129,7 @@ function NavButton(props) {
onAfterOpen={afterOpenModal}
onRequestClose={()=>{closeModal(1)}}
style={customStyles}
contentLabel="Example Modal"
contentLabel="Filter Modal"
>
<button onClick={()=>{closeModal(1)}}>close</button>
<h2 ref={(_subtitle) => (subtitle = _subtitle)}>{subtitle}</h2>
Expand All @@ -152,7 +150,7 @@ function NavButton(props) {
isOpen={isOpen2}
onRequestClose={()=>{closeModal(2)}}
style={customStyles}
contentLabel="Example Modal"
contentLabel="SignIn Modal"
>
<button onClick={()=>{closeModal(2)}}>close</button>
<h3>로그인을 하여 기능을 사용해보세요</h3>
Expand Down
6 changes: 4 additions & 2 deletions front/src/components/PostFragment.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import React from "react";
import styles from '../css/PostFragment.module.css';
import { useNavigate } from "react-router-dom";
import parse from 'html-react-parser';

function PostFragment(props){
const navigate = useNavigate();
return (<>
<article onClick={() =>{navigate(`/post/${props.postId}`,{state:{postId:props.postId}})}}>
<article onClick={() =>{navigate(`/post/${props.postId}`)}}>
<div className={styles.fragmentBody}>
{props.post}
{parse(props.post)}
</div>
</article>
</>);
Expand Down
28 changes: 15 additions & 13 deletions front/src/components/PostPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import TextEditor from './TextEditor';
import '../css/PostPage.css';
import { useSelector } from 'react-redux';
/*
editor 라이브러리를 위해 수정함.
다음과 같이 설치해야 정상적으로 작동함.
Expand All @@ -13,6 +14,7 @@ npm add file:./ckeditor5
function PostPage() {
const navigate = useNavigate();

const UID = useSelector(state => state.UID);
const [editorData, setEditorData] = useState('');
const [title, setTitle] = useState('');
const [bookSearch, setBookSearch] = useState('');
Expand All @@ -35,27 +37,29 @@ function PostPage() {
const currentDate = new Date();

// 연도, 월, 일, 시간, 분, 초를 추출
const year = currentDate.getFullYear();
const month = String(currentDate.getMonth() + 1).padStart(2, '0');
const year = currentDate.getFullYear() % 100;
const month = String(currentDate.getMonth() + 1);
const day = String(currentDate.getDate()).padStart(2, '0');
const hours = String(currentDate.getHours()).padStart(2, '0');
const minutes = String(currentDate.getMinutes()).padStart(2, '0');
const seconds = String(currentDate.getSeconds()).padStart(2, '0');

// 연도, 월, 일, 시간, 분, 초를 조합하여 postId 생성
const postId = `${day}${hours}${minutes}${seconds}`;
const postId = `${UID}${year}${month}${day}${hours}${minutes}${seconds}`;
//postId 시간을 받아서 ->...
// 나갔다가 다시 들어오면 내용 없음.

const cr_at = year + '-' + month + '-' + day;

const exam = '000000';

//저장 구현 시작.
const postData = {
postId: postId,
body: editorData,
UID: year,
status: month,
create_at: minutes,
UID: UID,
status: 'posting',
create_at: cr_at,
isbn: exam,
title: title,
};
Expand Down Expand Up @@ -102,28 +106,26 @@ function PostPage() {

return (
<div className="post-page-container">
<div className="title-button-container">
<input
type="text"
placeholder="제목을 입력하세요..."
value={title}
onChange={handleTitleChange}
className="title-input"
/>
<input
<div className="ck-editor__editable">
<TextEditor setData={setEditorData}/>
</div>
<input
type="text"
placeholder="책 검색..."
value={bookSearch}
onChange={handleBookSearchChange}
className="book-search-input"
/>
<div className="button-container">
<div className="button-container">
<button className="post-button" onClick={handleSaveDraft}>임시 저장</button>
<button className="post-button" onClick={handlePost}>포스팅</button>
</div>
</div>
<div className="ck-editor__editable">
<TextEditor setData={setEditorData}/>
</div>
</div>
);
Expand Down
19 changes: 6 additions & 13 deletions front/src/components/PostViewPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,11 @@ import ScrollView from "./ScrollView";
import styles from "../css/PostViewPage.module.css";
import React from 'react';
import { useEffect,useState } from 'react';
import { useLocation,Link, json } from 'react-router-dom';
//import parse from 'html-react-parser'; // HTML 문자열을 React 구성 요소로 변환
import { useParams,Link } from 'react-router-dom';
import parse from 'html-react-parser'; // HTML 문자열을 React 구성 요소로 변환

function PostViewPage() {

const location = useLocation();
const { state } = location;
const postId = state ? state.postId : null; // state가 null이 아닌지 확인
const {postId}=useParams();
const [blurBoxDisplay,setBlurBoxDisplay] = useState("flex");
const [buttonDisplay,setButtonDisplay] = useState("block");
const[data,setData]=useState({});
Expand All @@ -21,14 +18,13 @@ function PostViewPage() {
fetch(`http://localhost:8080/api/post/${postId}`)
.then(res => res.json())
.then(json => {
console.log(json[0]);
console.log("data:",json[0]);
setData(json[0]);
})
.catch(error => console.log(error));
}
}, [postId]);

//console.log(data.body);

function changeBlurBoxState(){
setBlurBoxDisplay(blurBoxDisplay==="flex"?"none":"flex");
Expand All @@ -39,13 +35,10 @@ function PostViewPage() {

return (
<>
<div>
{/*parse(data.body)*/}
{/* data.body 에 html 정보가 저장될 예정, 정보를 변환시켜야함 <div dangerouslySetInnerHTML={{ __html: data.body }} /> */}
</div>
<article>
<div className={styles.postBox}>
{data.body}
{console.log(data.body)}
{parse(data.body)}
{/* data.body 에 html 정보가 저장될 예정, 정보를 변환시켜야함 */}
</div>
</article>
Expand Down
2 changes: 1 addition & 1 deletion front/src/components/ScrollView.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ function ScrollView() {//무한스크롤
.then(json=>{
const newFragments = [];
for (let i = index; i < index + count; i++) {
newFragments.push(<PostFragment key={i} postId={json[i].postId} post={json[i].body}/>);//postID만 가지고 검색할 예정
newFragments.push(<PostFragment key={i} postId={json[i].postID} post={json[i].body}/>);//postID만 가지고 검색할 예정
}
setFragments(prevFragments => [...prevFragments, ...newFragments]); // 기존 fragments에 새로운 fragments를 추가
index+=count;}
Expand Down
2 changes: 1 addition & 1 deletion front/src/components/ToolBar.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ function ToolBar(){
{/*툴바의 오른쪽 구역*/}
<div id={styles.rBox} className={styles.box}>
<NavButton nav={"post"}/>
<NavButton nav={"library"}/>
{/* <NavButton nav={"library"}/> */}
<NavButton nav={"more"}/>
</div>
</div>
Expand Down
Empty file.
Loading

0 comments on commit af59f44

Please sign in to comment.