Skip to content

4주차 #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
VsangkyeongV wants to merge 2 commits into
base: main
Choose a base branch
from
Open

4주차 #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6efaf78
캐러셀 만들기
VsangkyeongV Jul 14, 2023
f369ad1
1차pr입니다
VsangkyeongV Jul 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions VsangekyeongV/react-project/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions VsangekyeongV/react-project/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
"@types/node": "^16.18.38",
"@types/react": "^18.2.14",
"@types/react-dom": "^18.2.6",
"axios": "^1.4.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.14.1",
Expand Down
2 changes: 1 addition & 1 deletion VsangekyeongV/react-project/src/components/LoginForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useState, ChangeEvent } from "react";
import { Link, useNavigate } from "react-router-dom";
import { useNavigate } from "react-router-dom";

const LoginForm = () => {
const [buttonEnabled, setButtonEnabled] = useState(false);
Expand Down
48 changes: 17 additions & 31 deletions VsangekyeongV/react-project/src/components/Main/Index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,35 +3,23 @@ import { NoticeCardInterface } from "@/types/NoticeCardInterface";
import "./Main.css";
import NoticeCard from "./NoticeCard";
import "./NoticeCard.css";
import axios from "axios";
import { useEffect, useState } from "react";

const Main = () => {
const title = [
"비밀의 정원: 사랑과 장미의 이야기",
"푸른 바다의 수호자: 해양 보호 활동의 중요성",
"시간을 거슬러: 과거로 돌아가는 탐험",
"무한한 가능성의 문: 꿈을 향한 여정",
"성공을 위한 7가지 습관: 목표 달성을 위한 비결",
"심리학의 신비: 인간 마음의 허상과 진실",
"빛과 어둠의 대결: 미스터리한 우주의 비밀",
"마법의 숲: 요정과 마법사의 이야기",
"사라진 세계: 미래를 위한 모험의 시작",
"소리 없는 외침: 사랑과 갈등이 교차하는 이야기",
];
const makePost = () => {
const posts: NoticeCardInterface[] = [];
for (let i = 1; i < 11; i++) {
const post = {
num: i,
postTitle: title[i - 1],
user: `unknown${i}`,
date: `2023/6/${i}`,
commentNum: Math.floor(Math.random() * 100) + 1,
};
posts.push(post);
}
return posts;
};
const posts = makePost();
const [posts, setPosts] = useState<NoticeCardInterface[]>([]);
useEffect(() => {
axios
.get("https://jsonplaceholder.typicode.com/posts")
.then((response) => {
setPosts(response.data);
console.log("success!", response.data);
})
.catch((error) => {
console.log("some errors", error);
});
}, []);

Comment on lines +10 to +22
Copy link
Contributor

@DeveloperRyou DeveloperRyou Jul 19, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

  const [posts, setPosts] = useState<NoticeCardInterface[]>([]);
  useEffect(() => {
    async function getData() {
      try {
        const response = await axios.get("https://jsonplaceholder.typicode.com/posts");
        setPosts(response.data);
        console.log("success!", response.data);
      }
      catch(error) {
        console.log("some errors", error);
      });
    }
    getData();
  }, []);

이런식으로 진행할 수 있을 것 같습니다!

Copy link
Contributor

@DeveloperRyou DeveloperRyou Jul 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아 이런식으로 진행하면 나중에 좋은점이, getData같은 함수를 따로 빼서 관리할 수 있게 됩니다! axios 요청하는 함수를 따로 파일로 관리할 수 있게 되어 유지보수가 수월해 지겠죠

Copy link
Contributor Author

@VsangkyeongV VsangkyeongV Jul 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

캐러셀은 알려주신 slick라이브러리 사용해서 잘 마무리 했습니다!

return (
<div className="main">
<div className="main-logoPage">
Expand All @@ -40,12 +28,10 @@ const Main = () => {
<div className="main-container dis-col-center">
<div className="main-container-name ">게시글 목록</div>
<div className="main-container-table dis-col">
<div className="dis-row-center main-container-table-bar ">
<div className="dis-row-space main-container-table-bar ">
<div className="card-num dis-col-center">번호</div>
<div className="card-title dis-col-center">제목</div>
<div className="card-user dis-col-center">작성자</div>
<div className="card-date dis-col-center">작성일</div>
<div className="card-commentNum dis-col-center">댓글수</div>
<div className="card-body dis-col-center">본문</div>
</div>
<div className="main-container-table-source">
{posts.map((post, index) => (
Expand Down
8 changes: 8 additions & 0 deletions VsangekyeongV/react-project/src/components/Main/Main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,18 @@
.dis-row {
display: flex;
flex-direction: row;
align-items: center;
}
.dis-row-space {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.dis-col {
display: flex;
flex-direction: column;
align-items: center;
}
.dis-col-center {
display: flex;
Expand Down
6 changes: 3 additions & 3 deletions VsangekyeongV/react-project/src/components/Main/NoticeCard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,16 @@
width: 100px;
height: 70px;
}
.card-title {
.card-body {
width: 800px;
height: 70px;
}
.card-user {
width: 100px;
height: 70px;
}
.card-date {
width: 200px;
.card-title {
width: 300px;
height: 70px;
}
.card-commentNum {
Expand Down
11 changes: 5 additions & 6 deletions VsangekyeongV/react-project/src/components/Main/NoticeCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,11 @@ import { NoticeCardInterface } from "@/types/NoticeCardInterface";

const NoticeCard: React.FC<NoticeCardInterface> = (props) => {
return (
<div className="notice-card dis-row-center">
<div className="card-num dis-col-center">{props.num}</div>
<div className="card-title dis-col-center">{props.postTitle}</div>
<div className="card-user dis-col-center">{props.user}</div>
<div className="card-date dis-col-center">{props.date}</div>
<div className="card-commentNum dis-col-center">{props.commentNum}</div>
<div className="notice-card dis-row-space">
<div className="card-num dis-col-center">{props.id}</div>
{/* <div className="card-user dis-col-center">{props.userId}</div> */}
<div className="card-title dis-col-center">{props.title}</div>
<div className="card-body dis-col-center">{props.body}</div>
</div>
);
};
Expand Down
6 changes: 4 additions & 2 deletions VsangekyeongV/react-project/src/types/NoticeCardInterface.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
export interface NoticeCardInterface {
num: number;
postTitle: string;
id: number;
title: string;
user: string;
date: string;
commentNum: number;
body: string;
userId: number;
}
21 changes: 21 additions & 0 deletions carousel/Carousel.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
.CarouselContainer {
display: flex;
flex-direction: row;
justify-content: start;
align-items: start;
}
.Carousel {
width: 300vw;
height: 300px;
margin-top: 40px;
margin-bottom: 61px;
background-color: #eaeaea;
}
.inner {
width: 1060px;
}

.inner img {
width: 1060px;
height: 300px;
}
41 changes: 41 additions & 0 deletions carousel/infcs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import React from "react";
import Slider from "react-slick";
import "./Carousel.css";
const CenterMode = () => {
const settings = {
className: "center centerMode",
centerMode: true,
infinite: true,
centerPadding: "100px",
slidesToShow: 1,
slidesPerRow: 3,
speed: 500,
};

return (
<div style={{ height: "300px", width: "1920px" }}>
<Slider {...settings}>
<div className="inner" style={{ width: "10%" }}>
<img src="img/fire.jpg"></img>
</div>
<div className="inner" style={{ width: "90%" }}>
<img src="img/fire.jpg"></img>
</div>
<div className="inner" style={{ width: "10%" }}>
<img src="img/fire.jpg"></img>
</div>
<div className="inner">
<img src="img/fire.jpg"></img>
</div>
<div className="inner">
<img src="img/fire.jpg"></img>
</div>
<div className="inner">
<img src="img/fire.jpg"></img>
</div>
</Slider>
</div>
);
};

export default CenterMode;