Skip to content

[#37] fix #28수정사항에서 누락된것 추가 #38

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

Closed
wants to merge 6 commits into from
Closed

[#37] fix #28수정사항에서 누락된것 추가 #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8ffcd0a
[#27] list페이지 styled-components로 변경, 카드 arrow버튼 간단하게 구현
nidor022 Aug 13, 2025
d663eea
[#27] list페이지 styled-components로 변경, 카드 arrow버튼 간단하게 구현
nidor022 Aug 13, 2025
0961f62
Revert "[#27] list페이지 styled-components로 변경, 카드 arrow버튼 간단하게 구현"
nidor022 Aug 14, 2025
d35aaaf
[#27] pr수정사항 적용, freatures경로 추가
nidor022 Aug 14, 2025
55150b3
Merge remote-tracking branch 'origin/feature/#12' into feature/#27
nidor022 Aug 14, 2025
bccf3f2
[#37] 함수명 handle~구조로 변경, 함수 간략화
nidor022 Aug 14, 2025
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
2 changes: 1 addition & 1 deletion src/app.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import ContentLayout from "./layouts/content-layout";
import OnboardingLayout from "./layouts/onboarding-layout";
import CreatePostPage from "./pages/create-post-page";
import MainPage from "./pages/main-page";
import MessagePage from "./pages/message-list";
import MessagePage from "./pages/rolling-paper-list-page";
import RecipientPostPage from "./pages/recipient-post-page";
import SendMessagePage from "./pages/send-message-page";
import TestPage from "./pages/test-page";
Expand Down
Empty file added src/features/rolling-paper/components/rolling-paper-list.jsx
View file
Open in desktop
Empty file.
266 changes: 156 additions & 110 deletions src/pages/message-list.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,128 +10,174 @@ import ToggleButton from "../components/button/toggle-button";

import React, { useEffect, useState } from "react";
import axiosInstance from "../api/axios-instance";
import styled from "styled-components";

/* styled components */
const TopContainer = styled.div`
text-align: center;
`;

const CardSection = styled.section`
justify-self: center;
`;

const CardTitle = styled.h2`
text-align: left;
`;

const CardContainer = styled.div`
border: 1px solid red;
display: grid;
grid-template-columns: 275px 275px 275px 275px;
gap: 20px;
width: fit-content;

position: relative;
overflow: visible;
`;

const CardItem = styled.div`
width: 275px;
height: 260px;
border: 1px solid red;
`;

const NextBtnWpr = styled.div`
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
z-index: 10;
`;

const PrevBtnWpr = styled.div`
position: absolute;
left: -20px;
top: 50%;
transform: translateY(-50%);
z-index: 10;
`;

const MakingBtn = styled(PrimaryButton)`
margin-top: 64px;
font-weight: 400;
padding: 14px 60px;
`;

/* 그냥 출력 테스트용 */
const testData = [
{ id: 1, to: "test1", messageCount: 1 },
{ id: 2, to: "test2", messageCount: 5 },
{ id: 3, to: "test3", messageCount: 10 },
{ id: 4, to: "test4", messageCount: 2 },
{ id: 5, to: "test5", messageCount: 3 },
{ id: 6, to: "test6", messageCount: 1 },
];

function ShowMessageList() {
// const [imageUrl, setImageUrl] = useState(null);
const [pprCurrentPage, setPprCurrentPage] = useState(0); // 인기카드
const [currentPage, setCurrentPage] = useState(0); // 일반카드
const [pprShowCards, setPprShowCards] = useState([]);
const [showCards, setShowCards] = useState([]);
const cardCount = 4;

/* axios로 데이터 가져온다고 가정 */
// axiosInstance
// .get("/18-3/recipients/?limit=5&offset=20")
// .then((res) => {
// console.log(res.data);
// })
// .catch(console.error);

const totalPages = Math.ceil(testData.length / cardCount);

const cardConStyle = {
border: "1px solid red",
display: "grid",
gridTemplateColumns: "275px 275px 275px 275px",
gap: "20px",
width: "fit-content",

position: "relative",
overflow: "visible",
};

const cardStyle = {
width: "275px",
height: "260px",
border: "1px solid red",
};

const testStyle = {
textAlign: "center",
};

const sectionStyle = {
justifySelf: "center",
};

const buttonStyle = {
marginTop: "64px",
fontWeight: "400",
padding: "14px 60px",
};

const htStyle = {
textAlign: "left",
};

const rButton = {
position: "absolute",
right: -20, // 필요시 조정
top: "50%",
transform: "translateY(-50%)",
zIndex: 20,
useEffect(() => {
const strtPageNum = currentPage * cardCount;
const endPageNum = strtPageNum + cardCount;

const pprStrtPageNum = pprCurrentPage * cardCount;
const pprEndPageNum = pprStrtPageNum + cardCount;

/* createdAt(생성된 시점)에 따라서 정렬 */
setShowCards(testData.slice(strtPageNum, endPageNum));

/* 여기서 messageCount(메시지수)에 따라서 정렬 */
setPprShowCards(testData.slice(pprStrtPageNum, pprEndPageNum));
}, [pprCurrentPage, currentPage]);

const nextPage = (mode = null) => {
if (mode) {
console.log("pprnext");
if (pprCurrentPage < totalPages - 1) {
setPprCurrentPage((pprCurrentNum) => pprCurrentNum + 1);
}
} else {
console.log("justnext");
if (currentPage < totalPages - 1) {
setCurrentPage((currentNum) => currentNum + 1);
}
}
};

const lButton = {
position: "absolute",
left: -20, // 필요시 조정
top: "50%",
transform: "translateY(-50%)",
zIndex: 20,
const prevPage = (mode = null) => {
if (mode) {
console.log("pprprev");
if (pprCurrentPage > 0) {
setPprCurrentPage((pprCurrentNum) => pprCurrentNum - 1);
}
} else {
console.log("justprev");
if (currentPage > 0) {
setCurrentPage((currentNum) => currentNum - 1);
}
}
};

useEffect(() => {
axiosInstance
.get("/18-3/recipients/?limit=5&offset=20")
.then((res) => {
console.log(res.data);
})
.catch(console.error);
}, []);

return (
<div style={testStyle}>
<TopContainer>
/* navi 들어갈 자리 */
<article>
<section style={sectionStyle}>
<h2 style={htStyle}>인기 롤링 페이퍼 🔥</h2>
<div className="card-container" style={cardConStyle}>
<div className="card" style={cardStyle}></div>
<div className="card" style={cardStyle}></div>
<div className="card" style={cardStyle}></div>
<div className="card" style={cardStyle}></div>
<div style={rButton}>
<ArrowButton direction={ARROW_BUTTON_DIRECTION.right} />
</div>
</div>
</section>
<section style={sectionStyle}>
<h2 style={htStyle}>최근에 만든 롤링 페이퍼 ⭐</h2>
<div className="card-container" style={cardConStyle}>
<div className="card" style={cardStyle}></div>
<div className="card" style={cardStyle}></div>
<div className="card" style={cardStyle}></div>
<div className="card" style={cardStyle}></div>
<div style={lButton}>
<ArrowButton direction={ARROW_BUTTON_DIRECTION.left} />
</div>
</div>
</section>
<CardSection>
<CardTitle>인기 롤링 페이퍼 🔥</CardTitle>
<CardContainer>
{pprShowCards.map((item) => (
<CardItem key={item.id}>{item.to}</CardItem> // 테스트용
))}
{pprCurrentPage > 0 ? (
<PrevBtnWpr onClick={() => prevPage("ppr")}>
<ArrowButton direction={ARROW_BUTTON_DIRECTION.left} />
</PrevBtnWpr>
) : null}
{pprCurrentPage < totalPages - 1 ? (
<NextBtnWpr onClick={() => nextPage("ppr")}>
<ArrowButton direction={ARROW_BUTTON_DIRECTION.right} />
</NextBtnWpr>
) : null}
</CardContainer>
</CardSection>

<CardSection>
<CardTitle>최근에 만든 롤링 페이퍼 ⭐</CardTitle>
<CardContainer>
{showCards.map((item) => (
<CardItem key={item.id}>{item.to}</CardItem> // 테스트용
))}
{currentPage > 0 ? (
<PrevBtnWpr onClick={() => prevPage()}>
<ArrowButton direction={ARROW_BUTTON_DIRECTION.left} />
</PrevBtnWpr>
) : null}
{currentPage < totalPages - 1 ? (
<NextBtnWpr onClick={() => nextPage()}>
<ArrowButton direction={ARROW_BUTTON_DIRECTION.right} />
</NextBtnWpr>
) : null}
</CardContainer>
</CardSection>
</article>
<PrimaryButton
size={BUTTON_SIZE.large}
style={buttonStyle}
title="나도 만들어보기"
/>
</div>
<MakingBtn size={BUTTON_SIZE.large} title="나도 만들어보기" />
</TopContainer>
);

/* axios 사용 예시코드 */
// useEffect(() => {
// axiosInstance
// .get("/background-images/")
// .then((res) => {
// if (res.data && res.data.imageUrls && res.data.imageUrls.length > 0) {
// setImageUrl(res.data.imageUrls[0]);
// }
// })
// .catch(console.error);
// }, []);

// return (
// <div>
// {imageUrl ? (
// <img src={imageUrl} alt="background" style={{ maxWidth: "100%" }} />
// ) : (
// <p>이미지를 불러오는 중입니다...</p>
// )}
// </div>
// );
}

export default ShowMessageList;
Loading