Skip to content

Commit ba51e8c

Browse files
authored
Merge pull request #40 from CodeItBoost3/feature/main-api
메인 api 연결 완료 및 공지사항 하드코딩
2 parents 8c1f287 + 7469ef2 commit ba51e8c

5 files changed

Lines changed: 74 additions & 109 deletions

File tree

src/components/main/NoticeCard.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Notice from "@/assets/icon/layout/notice.svg";
22

3-
export default function NoticeCard() {
3+
export default function NoticeCard({onClick}) {
44
return (
55
<div className="w-[95%] mt-4 mb-7 h-[9vh] px-[15px] py-[10px] bg-white rounded-[18.51px] shadow-[2.3px_4.6px_13px_0px_rgba(0,0,0,0.08)] border border-darkWhite flex items-center justify-between">
66
<div className="flex items-center gap-3">
@@ -12,7 +12,7 @@ export default function NoticeCard() {
1212
</div>
1313
</div>
1414
<button className="w-[106px] h-[40px] bg-darkViolet hover:bg-darkViolet-hover active:bg-darkViolet-active rounded-full flex items-center justify-center">
15-
<span className="text-white text-base font-normal">자세히</span>
15+
<span className="text-white text-base font-normal" onClick={onClick}>자세히</span>
1616
</button>
1717
</div>
1818
);

src/components/modal/NeedLoginToGuest.jsx

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,19 +23,12 @@ export default function NeedLoginToGuest({onClick}) {
2323
</div>
2424
</div>
2525
<div className="w-full gap-1 mt-3">
26-
<button
27-
type="button"
28-
onClick={() => onClick("login")}
29-
className="flex w-full items-center justify-center gap-2 rounded-md bg-lightViolet hover:bg-lightViolet-hover active:bg-lightViolet-active py-2.5 text-sm font-medium tracking-tight text-black"
30-
>
31-
로그인
32-
</button>
3326
<button
3427
type="button"
3528
onClick={() => onClick("register")}
3629
className="mt-4 flex w-full items-center justify-center gap-2 rounded-md bg-darkViolet hover:bg-darkViolet-hover active:bg-darkViolet-active py-2.5 text-sm font-medium tracking-tight text-white"
3730
>
38-
회원가입
31+
로그인/회원가입 하러가기
3932
</button>
4033
<p className="text-black font-medium text-center mt-5 cursor-pointer" onClick={() => onClick("guest")}>로그인 없이 둘러보기</p>
4134
</div>

src/pages/Main.jsx

Lines changed: 44 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -14,54 +14,6 @@ import CreateGroup from "@/components/modal/CreateGroup";
1414
import NoArticleIcon from "@/assets/icon/main/edit.svg";
1515
import NoGroupImg from "@/assets/icon/group/no-group.svg";
1616

17-
// const groupData = [
18-
// {
19-
// id: 1,
20-
// title: "그룹 1",
21-
// description: "설명 1",
22-
// image: image,
23-
// picturecount: "5",
24-
// emotioncount: "3",
25-
// badgecount: "5",
26-
// days: "D+251"
27-
// },
28-
// {
29-
// id: 2,
30-
// title: "그룹 2",
31-
// description: "설명 2",
32-
// image: image,
33-
// picturecount: "5",
34-
// emotioncount: "3",
35-
// badgecount: "5",
36-
// days: "D+251"
37-
// },
38-
// {
39-
// id: 3,
40-
// title: "그룹 3",
41-
// description: "설명 3",
42-
// image: image,
43-
// picturecount: "5",
44-
// emotioncount: "3",
45-
// badgecount: "5",
46-
// days: "D+251"
47-
// },
48-
// {
49-
// id: 4,
50-
// title: "그룹 4",
51-
// description: "설명 4",
52-
// image: image,
53-
// picturecount: "5",
54-
// emotioncount: "3",
55-
// badgecount: "5",
56-
// days: "D+251"
57-
// },
58-
// ];
59-
60-
const memoryData = [
61-
// { id: 1, title: "글 제목 1", date: "2025.01.21", memory: "8", sympathy: "5", comments: "5" },
62-
// { id: 2, title: "글 제목 2", date: "2025.01.20", memory: "12", sympathy: "7", comments: "9" },
63-
];
64-
6517
export default function Main() {
6618
const [isLogin, setIsLogin] = useState(false);
6719
const [recentPosts, setRecentPosts] = useState([]);
@@ -91,14 +43,14 @@ export default function Main() {
9143
/** 그룹 목록 조회 **/
9244
useEffect(() => {
9345
const fetchGroupList = async () => {
94-
try{
46+
try {
9547
const data = await groupService.getGroupList({
9648
type: "public",
9749
sortBy: "latest",
98-
keyword:"",
50+
keyword: "",
9951
});
10052
setGroupList(data.data || []);
101-
} catch{
53+
} catch {
10254
addToast("그룹 목록 조회에 실패했습니다.");
10355
}
10456
};
@@ -109,24 +61,21 @@ export default function Main() {
10961
/** 내가 작성한 글 목록 조회 **/
11062
useEffect(() => {
11163
const fetchRecentPosts = async () => {
112-
try{
64+
try {
11365
const data = await userService.getMyPosts();
11466
setRecentPosts(data.data || []);
115-
} catch{
67+
} catch {
11668
addToast("최근에 작성한 글 조회에 실패했습니다.");
11769
}
11870
}
11971

12072
fetchRecentPosts();
12173
}, [])
12274

123-
124-
console.log(recentPosts);
12575
const handleLoginModal = (type) => {
12676
switch (type) {
127-
case "login":
128-
break;
12977
case "register":
78+
navigate("/login");
13079
break;
13180
case "guest":
13281
setIsLoginModalOpen(false);
@@ -138,6 +87,10 @@ export default function Main() {
13887
!isLogin ? setIsLoginModalOpen(true) : setIsGroupMakeModalOpen(true)
13988
}
14089

90+
const handleRecentNotice = () => {
91+
navigate("/notice/20")
92+
}
93+
14194
return (
14295
<div className="w-full h-full pt-3 pb-7 overflow-auto">
14396
<div className="flex items-center mb-1">
@@ -148,7 +101,7 @@ export default function Main() {
148101
님, 안녕하세요!
149102
</span>
150103
</div>
151-
<NoticeCard/>
104+
<NoticeCard onClick={handleRecentNotice}/>
152105
<div className="max-w-[95%] flex flex-col gap-3 my-3">
153106
<div className="flex justify-between items-center">
154107
<span className="text-black text-xl font-semibold">
@@ -158,24 +111,24 @@ export default function Main() {
158111
className="cursor-pointer text-normalGray hover:text-normalGray-hover active:text-normalGray-active text-lg">공개 그룹 목록 보러가기</span>
159112
</div>
160113
<div className=" w-full py-3">
161-
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
162-
{groupList.map((group) => (
163-
<PublicGroupCard
164-
key={group.groupId}
165-
id={group.groupId}
166-
title={group.groupName}
167-
description={group.description}
168-
image={group.image}
169-
picturecount={group.postCount}
170-
emotioncount={group.likeCount}
171-
badgecount={group.badgecount}
172-
days={group.dday}
173-
/>
174-
))}
175-
176-
</div>
177-
{groupList.length === 0 && (
178-
<div className="w-full min-h-[45vh] h-auto flex justify-center items-center bg-white rounded-[18.51px] shadow-[2.3px_4.6px_13px_0px_rgba(0,0,0,0.08)] border border-darkWhite">
114+
{groupList.length > 0 ? (
115+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
116+
{groupList.map((group) => (
117+
<PublicGroupCard
118+
key={group.groupId}
119+
id={group.groupId}
120+
title={group.groupName}
121+
description={group.description}
122+
image={group.image}
123+
picturecount={group.postCount}
124+
emotioncount={group.likeCount}
125+
badgecount={group.badgecount}
126+
days={group.dday}
127+
/>
128+
))}
129+
</div>) : (
130+
<div
131+
className="w-full min-h-[45vh] h-auto flex justify-center items-center bg-white rounded-[18.51px] shadow-[2.3px_4.6px_13px_0px_rgba(0,0,0,0.08)] border border-darkWhite">
179132
<div className="flex flex-col items-center justify-center h-full text-center text-gray-500">
180133
<img src={NoGroupImg} alt="No Group" className="w-30 h-30 mb-4"/>
181134
<p className="text-lg font-semibold">등록된 그룹이 없습니다.</p>
@@ -204,30 +157,31 @@ export default function Main() {
204157
</div>
205158
{/* 섹션 1 카드 */}
206159
<div className="h-auto w-full bg-white rounded-[17.33px] p-4 shadow-md flex flex-col gap-5">
207-
{memoryData?.map((item, idx) => (
208-
<MemoryCard
209-
key={item.id}
210-
index={idx}
211-
title={item.title}
212-
date={item.date}
213-
memory={item.memory}
214-
sympathy={item.sympathy}
215-
comments={item.comments}
216-
/>
217-
))}
218-
{memoryData.length === 0 &&
160+
{recentPosts.length > 0 ? (
161+
recentPosts.map((item, idx) => (
162+
<MemoryCard
163+
key={item.id}
164+
index={idx}
165+
title={item.title}
166+
date={item.date}
167+
memory={item.memory}
168+
sympathy={item.sympathy}
169+
comments={item.comments}
170+
/>
171+
))
172+
) : (
219173
<div className="flex flex-col items-center justify-center h-[30vh] text-center text-gray-500">
220174
<img src={NoArticleIcon} alt="No Group" className="w-30 h-30 mb-8"/>
221175
<p className="text-xl font-semibold">최근에 내가 작성한 추억글이 없습니다.</p>
222176
<p className="text-sm text-gray-400 mt-1">조각집에 참여하고 추억글을 작성해보세요!</p>
223177
</div>
224-
}
178+
)}
225179
</div>
226180
</div>
227181
{/* 섹션 2 */}
228182
<MemoryActions widthClass="flex-1" marginTop="mt-[7vh]" onClickGroup={handleGroupRegist}/>
229183
</div>
230-
{isGroupMakeModalOpen && <CreateGroup onClose={() => setIsGroupMakeModalOpen(false)} />}
184+
{isGroupMakeModalOpen && <CreateGroup onClose={() => setIsGroupMakeModalOpen(false)}/>}
231185
{isLoginModalOpen && <NeedLoginToGuest onClick={handleLoginModal}/>}
232186
</div>
233187
);

src/pages/Notice.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,13 +34,13 @@ const noticeData = [
3434
},
3535
{
3636
id: 15,
37-
title: "보안 강화 업데이트 안내",
37+
title: "웹 서비스 보안 업데이트 안내",
3838
createdAt: "2025-01-26",
3939
view: 77,
4040
},
4141
{
4242
id: 16,
43-
title: "설 연휴 배송 일정 안내",
43+
title: "설 연휴 시스템 점검 안내",
4444
createdAt: "2025-01-25",
4545
view: 85,
4646
},
@@ -58,13 +58,13 @@ const noticeData = [
5858
},
5959
{
6060
id: 19,
61-
title: "앱 다운로드 10만 돌파 이벤트",
61+
title: "사이트 방문 10만 돌파 이벤트",
6262
createdAt: "2025-01-22",
6363
view: 100,
6464
},
6565
{
6666
id: 20,
67-
title: "이용 후기 작성 이벤트 안내",
67+
title: "조각집 사용법 보러가기",
6868
createdAt: "2025-01-21",
6969
view: 45,
7070
}

src/pages/NoticeDetail.jsx

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,14 +40,14 @@ const noticeDetailData = [
4040
},
4141
{
4242
id: 15,
43-
title: "보안 강화 업데이트 안내",
43+
title: "웹 서비스 보안 업데이트 안내",
4444
createdAt: "2025-01-26",
4545
view: 77,
4646
content: "안녕하세요, 보안팀입니다.\n\n사용자 여러분의 계정과 개인정보를 더욱 안전하게 보호하기 위해 보안 강화 업데이트를 실시하였습니다. 이번 업데이트에서는 로그인 보안 강화를 위해 2단계 인증 기능을 추가하고, 자동 로그인 시 추가적인 보안 절차를 도입하였습니다.\n\n앞으로도 더욱 강력한 보안 시스템을 구축하여 안전한 서비스 환경을 제공할 수 있도록 노력하겠습니다. 감사합니다."
4747
},
4848
{
4949
id: 16,
50-
title: "설 연휴 배송 일정 안내",
50+
title: "설 연휴 시스템 점검 안내",
5151
createdAt: "2025-01-25",
5252
view: 85,
5353
content: "안녕하세요, 고객 여러분.\n\n설 연휴를 맞이하여 배송 일정에 대한 안내드립니다. 연휴 기간에는 물류센터와 배송업체의 운영이 제한됨에 따라 일부 지역에서는 배송이 지연될 수 있습니다. 이에 따라 원활한 배송을 위해 미리 주문해 주실 것을 권장드립니다.\n\n정확한 배송 일정은 주문 페이지에서 확인 가능하며, 연휴 이후에도 빠른 배송을 위해 최선을 다하겠습니다. 감사합니다."
@@ -68,17 +68,35 @@ const noticeDetailData = [
6868
},
6969
{
7070
id: 19,
71-
title: "앱 다운로드 10만 돌파 이벤트",
71+
title: "사이트 방문 10만 돌파 이벤트",
7272
createdAt: "2025-01-22",
7373
view: 100,
7474
content: "여러분의 성원 덕분에 앱 다운로드 10만 돌파를 달성했습니다!\n\n이를 기념하여 특별한 이벤트를 준비했습니다. 참여자들에게 다양한 경품을 제공하며, 기간 한정으로 특별 혜택도 제공될 예정입니다.\n\n자세한 내용과 참여 방법은 이벤트 페이지를 통해 확인해 주세요. 많은 관심과 참여 부탁드립니다!"
7575
},
7676
{
7777
id: 20,
78-
title: "이용 후기 작성 이벤트 안내",
78+
title: "조각집 사용법 보러가기",
7979
createdAt: "2025-01-21",
8080
view: 45,
81-
content: "안녕하세요, 서비스 운영팀입니다.\n\n더 나은 서비스를 제공하기 위해 이용 후기 작성 이벤트를 진행합니다. 이벤트 기간 동안 후기 작성 시 추첨을 통해 특별한 보상을 드리며, 성실한 후기를 작성하신 분들에게는 추가 혜택도 제공됩니다.\n\n자세한 참여 방법은 이벤트 페이지에서 확인해 주세요. 많은 관심과 참여 부탁드립니다!"
81+
content: "안녕하세요! 조각집에 처음 가입하신 여러분을 환영합니다. 아래 가이드를 참고하여 사용법을 익혀보세요.\n" +
82+
"\n" +
83+
"1. 조각집 가입 및 로그인\n" +
84+
"아이디와 비밀번호를 입력하여 회원가입 및 로그인이 가능합니다.\n" +
85+
"\n" +
86+
"2. 조각집의 주요 메뉴\n" +
87+
"조각집은 다음 4가지 주요 메뉴를 제공합니다.\n" +
88+
"\n" +
89+
"메인 메뉴\n" +
90+
"자신이 작성한 추억글과 등록된 그룹을 확인할 수 있습니다.\n" +
91+
"\n" +
92+
"그룹 메뉴\n" +
93+
"현재 등록된 그룹을 공개 또는 비공개 형태로 볼 수 있습니다.\n" +
94+
"\n" +
95+
"스크랩 메뉴\n" +
96+
"자신이 스크랩한 추억글이나 게시글을 모아볼 수 있습니다.\n" +
97+
"\n" +
98+
"공지사항 메뉴\n" +
99+
"운영진이 게시한 공지사항을 확인할 수 있습니다."
82100
}
83101
];
84102

0 commit comments

Comments
 (0)