Skip to content

Commit

Permalink
Merge pull request #52 from Sopo2023/feature/Updownpage
Browse files Browse the repository at this point in the history
✨ 서버연결
  • Loading branch information
ftery0 authored Apr 6, 2024
2 parents 4352fa5 + 5ec3480 commit 3278209
Show file tree
Hide file tree
Showing 3 changed files with 71 additions and 199 deletions.
180 changes: 30 additions & 150 deletions SOPOLAST/src/Components/Updown/Post/Post.tsx
Original file line number Diff line number Diff line change
@@ -1,58 +1,11 @@
import React, { useState, useEffect } from "react";
import axios from "axios";
import { useNavigate } from "react-router-dom";
import Magnifying from "src/Components/magnifying/Magnifying/Magnifying";
import * as s from "@src/Components/Updown/Post/Post.Style";
import B1CODE from "src/Assets/img/B1CODE.png";
import Magnifying from "src/constants/magnifying/Magnifying/Magnifying";
import * as s from "src/Components/Updown/Post/Post.Style";
import SEOUL from "src/Assets/image/3.png";
import Yogiyo from "src/Assets/image/1.png";
import KOREA from "src/Assets/image/2.png";
import MAC from "src/Assets/img/MAC.JPG";
import { link } from "fs";
import Pagination from "src/Components/Pagination/Pagination";
// const UpdownPost = () => {
// const SERVERURL = `${process.env.REACT_APP_SERVER_URL}`;
// const navigate = useNavigate();
// const [Post, setPost] = useState([]);
// };
// useEffect(() => {
// AddPosts();
// }, []);
// const AddPosts = () => {
// axios
// .get(`${SERVERURL}/posts`)
// .then((response) => {
// const AddPosts = response.data;
// setPost(AddPosts);
// console.log("게시물 목록을 가져왔습니다", AddPosts);
// })
// .catch((error) => {
// console.error("Error:",error);
// });
// }
// const handlePostClick = (postId) => {
// axios
// .post(`${SERVERURL}/senior-to-junior/read`, { postId: postId })
// .then((response) => {
// console.log("게시물 요청이 성공했습니다. 서버 응답:", response.data);
// window.location.href = response.data.redirectTo;
// })
// .catch((error) => {
// console.error("Error:", error);
// });
// GetPost(postId);
// }
// const GetPost = (postId) => {
// axios
// .get(`${SERVERURL}/read/${postId}`)
// .then((response) => {
// const postContent = response.data;
// console.log("게시물 내용을 가져옵니다:", postContent);
// })
// .catch((error) => {
// console.error("Error:", error);
// });
// };
import Pagination from "src/constants/Pagination/Pagination";
interface Post {
id: number;
author: string;
Expand All @@ -67,16 +20,18 @@ export default function UpdownPost() {
const [currentPage, setCurrentPage] = useState<number>(1);
const [postsPerPage] = useState<number>(10);
const [posts, setPosts] = useState<Post[]>([]);
//게시물 가져오기
const [boardList, setBoardList] = useState([]);

const getBoardList = async () => {
const resp = await (await axios.get('SERVER_URL')).data; // 2) 게시글 목록 데이터에 할당
setBoardList(resp.data); // 3) boardList 변수에 할당
console.log(boardList);
}

useEffect(() => {
axios.get<Post[]>("/api/posts").then((response) => {
setPosts(response.data);
});
getBoardList(); // 1) 게시글 목록 조회 함수 호출
}, []);
//현재 페이지의 게시물 가져오기
const indexOfLastPost: number = currentPage * postsPerPage;
const indexOfFirstPost: number = indexOfLastPost - postsPerPage;
const currentPosts: Post[] = posts.slice(indexOfFirstPost, indexOfLastPost);

//페이지네이션 변경 시 이벤트 처리
const paginate = (pageNumber: number) => setCurrentPage(pageNumber);
return (
Expand Down Expand Up @@ -106,99 +61,24 @@ export default function UpdownPost() {
</s.Postimg>
</s.PostWrite>
</s.Post_border>

<s.Post_border>
<s.PostWrite>
<s.PostZonecontrol>
<span>배채희</span>
<span>4개교 연합 해커톤 - SW창업 알고보면 어렵지 않다</span>
<span>
스타트업 창업 상상을 현실로 이끄는 액션 플랜 온택트 코리아
최지연님 <br></br>자신에게 구매욕구가 확실하게 작용하지 않으면
매출로 이어지지 않는다. <br></br>전화 - 고객접접 만들기
어려웠다. 현장 - 못들어오게 함.
</span>
<span>2023.10.28</span>
</s.PostZonecontrol>
<s.Postimg>
<img className="Post_Img" src={KOREA} alt="이미지"></img>
</s.Postimg>
</s.PostWrite>
</s.Post_border>
<s.Post_border>
<s.PostWrite>
<s.PostZonecontrol>
<span>이해준</span>
<span>바인드 컨버런스를 듣고나서.</span>
<span>
오늘은 팀 바인드에서 주최한 컨퍼런스 바코드에 대해 이야기 하려
한다. <br></br>​바코드? 작년겨울 시작 - 주로 일학년을 대상으로
새내기 개발자들에게 꼭 필요한 지식 전하는 컨퍼런스. <br></br>Git
& GitHub / 백엔드 이지민선배
</span>
<span>2023.10.27</span>
</s.PostZonecontrol>
<s.Postimg>
<img className="Post_Img" src={B1CODE} alt="이미지"></img>
</s.Postimg>
</s.PostWrite>
</s.Post_border>
<s.Post_border>
<s.PostWrite>
<s.PostZonecontrol>
<span>박규민</span>
<span>경쟁 서비스 분석 및 비지니스 모델 이해</span>
<span>
경쟁서비스 분석 및 비지니스모델 이해 서울 신학대학교 이형주
교수님<br></br>
독창성,시장성(경쟁서비스에 대한 분석 및 이해가 적절한가?),
사업계획 완성도<br></br>
(제시한 서비스의 사업 모델이 설득력 있는가?) 경쟁서비스 이해
</span>
<span>2023.10.27</span>
</s.PostZonecontrol>
<s.Postimg>
<img className="Post_Img" src={SEOUL} alt="이미지"></img>
</s.Postimg>
</s.PostWrite>
</s.Post_border>
<s.Post_border>
<s.PostWrite>
<s.PostZonecontrol>
<span>전우진</span>
<span>4개교 연합 해커톤 - SW창업 알고보면 어렵지 않다</span>
<span>
1학기, 3월부터 8월까지라는 짧지 않은 시간이 지났기에<br></br>
나는 블로그의 첫글을 회고록으로 시작하고자 한다.<br></br>
회고록을 쓰는가? 라고 묻는다면 난 단연코 '성장' 하기 위해서라고
생각한다.<br></br>
나는 그리 똑똑한 사람이 아니기에 어떤한 일의 모든 감정과, 그
당시 느낀 귀중한 생각을
</span>
<span>2023.10.25</span>
</s.PostZonecontrol>
<s.Postimg>
<img className="Post_Img" src={MAC} alt="이미지"></img>
</s.Postimg>
</s.PostWrite>
</s.Post_border>
<s.Post_border>
<s.PostWrite>
<s.PostZonecontrol>
<span>김호준</span>
<span>바인드 컨퍼런스를 주최하며 느낀점</span>
<span>
연말을 맞이하며 바인드 컨퍼런스를 주최하게 되었습니다.
컨퍼런스를 직접 듣고<br></br>
처음 개최하는 컨퍼런스이기에 발표를 맞게 되어 너무 떨렸습니다.
꽤나 부담감을 느끼는 시간<br></br>
속에서 바인드 컨퍼런스를 하는 날이 밝았습니다.
</span>
<span>2023.10.18</span>
</s.PostZonecontrol>
<s.Postimg>
<img className="Post_Img" src={B1CODE} alt="이미지"></img>
</s.Postimg>
<s.PostWrite
onClick={() => {
navigate("/Updownsub");
}}
>
{boardList.map((board) => (
// 4) map 함수로 데이터 출력
<s.PostZonecontrol>
<span key={board.author}>{board.name}</span>
<span key={board.title}>{board.title}</span>
<span key={board.content}>{board.content}</span>
<span key={board.data}>{board.data}</span>
<s.Postimg>
<img key={board.image}>{board.image}</img>
</s.Postimg>
</s.PostZonecontrol>
))}
</s.PostWrite>
</s.Post_border>
<Pagination
Expand Down
1 change: 1 addition & 0 deletions SOPOLAST/src/Components/Updownsub/postshow.Style.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
import styled from "styled-components";
89 changes: 40 additions & 49 deletions SOPOLAST/src/Components/Updownsub/postshow.tsx
Original file line number Diff line number Diff line change
@@ -1,55 +1,46 @@
import React from "react";
import "./postshow.css";
import Sidename from "src/Components/Sidebar/Side/side";
import TEST6 from "src/Assets/image/1.png";
import Head from "src/Components/head/Head/head";
import React, { useState, useEffect } from "react";
import { useParams } from 'react-router-dom';
import axios from "axios";
import * as s from "src/Components/Updownsub/postshow.Style";
import Sidename from "src/constants/Sidebar/Side/side";
import Head from "src/constants/head/Head/head";

interface Post {
id: number;
author: string;
title: string;
content: string;
date: string;
image: string;
}
const BoardDetail = () => {
const { idx } = useParams(); // /board/:idx와 동일한 변수명으로 데이터를 꺼낼 수 있습니다.
const [loading, setLoading] = useState(true);
const [board, setBoard] = useState([]);
const getBoard = async () => {
const resp = await (await axios.get('SERVER_URL')).data; // 2) 게시글 목록 데이터에 할당
setBoard(resp.data); // 3) boardList 변수에 할당
console.log(board);
}

useEffect(() => {
getBoard(); // 1) 게시글 목록 조회 함수 호출
}, []);

export default function Start() {
return (
<div className="main">
<div className="content">
<Head active={false} />
<Sidename />
<div className="post_design">
<div className="post-written1">
<div className="post_border1">
<span className="title1">4개교 연합 해커톤 프론트엔드</span>
<br></br>
<span className="name1">김가영</span>
<br></br>
<span className="img">
<img className="post_img1" src={TEST6} alt="이미지"></img>
</span>
<span className="detail1">
<div className="minit">경쟁서비스 이해</div>
<br></br>- 같은 고객층에게 비슷한 가격으로 공급하고 있는 자사
서비스와 시슷한 제품과 서비스<br></br>- 기업 관점의 경재자, 시장
관점의 경쟁자<br></br>
<br></br>
기업관점 - (음료) 펩시, 코카콜라, 닥터펩시<br></br>
시장관점 - (갈증해소) 생과일 주스, 물, 콜라, 이온음료<br></br>
<br></br>- 효율성 - 내 제춤 경쟁제품으로 자리매김, 차별성 위한
기준점 방향 제시<br></br>- 내가 공략라는 목표고객 제시, 문제
남겨준 선구자<br></br>- 큰 사업전개를 위해 필요한 파트너(유통,
공급)를 개척해 공유하는 자<br></br>- 내가 돈 벌 수 있는 차별적인
사업 모델에 대해 기반을 제공해주는 개척자<br></br>- 내 사업의
multiple을 만들어 나에게 기어가치 제공, 투자유치 용이 도우미
<br></br>- 일정 시장 검봉 후 해당 제품과 서비스 및 기업을
인수하는 acquirer(사업인수자 등등)<br></br>
<br></br>
<div className="minit2">작성가이드</div>
<br></br>
우리팀 서비스에 대한 경쟁 서비스 3-5 선정<br></br>- 세계적인
서비스 보다 마켓 출시 5년 이내의 서비스 중 선정<br></br>
<br></br>
선쟁 경쟁서비스를 직접 사용한 후 우리팀 서비스와 비교<br></br>-
비교 할 요소는 개요, 주요기능, 강약점, 서비스 목표 및 전략,
서비스 기술<br></br>
</span>
</div>
<div className="Main">
<Head active={true} />
<Sidename />
<div className="Post">
{board.map((board) => (
<div className="Postdetail">
<span key={board.title}>{board.title}</span>
<span key={board.author}>{board.name}</span>
<img key={board.image}>{board.image}</img>
<span key={board.content}>{board.content}</span>
</div>
</div>
))}
</div>
</div>
);
}
};

0 comments on commit 3278209

Please sign in to comment.