Merge pull request #40 from CodeItBoost3/feature/main-api

메인 api 연결 완료 및 공지사항 하드코딩

Author: choikyungsoo

src/components/main/NoticeCard.jsx

@@ -1,6 +1,6 @@
 import Notice from "@/assets/icon/layout/notice.svg";
 
-export default function NoticeCard() {
+export default function NoticeCard({onClick}) {
   return (
     <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">
       <div className="flex items-center gap-3">
@@ -12,7 +12,7 @@ export default function NoticeCard() {
         </div>
       </div>
       <button className="w-[106px] h-[40px] bg-darkViolet hover:bg-darkViolet-hover active:bg-darkViolet-active rounded-full flex items-center justify-center">
-        <span className="text-white text-base font-normal">자세히</span>
+        <span className="text-white text-base font-normal" onClick={onClick}>자세히</span>
       </button>
     </div>
   );

src/components/modal/NeedLoginToGuest.jsx

@@ -23,19 +23,12 @@ export default function NeedLoginToGuest({onClick}) {
                 </div>
               </div>
               <div className="w-full gap-1 mt-3">
-                <button
-                    type="button"
-                    onClick={() => onClick("login")}
-                    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"
-                >
-                  로그인
-                </button>
                 <button
                     type="button"
                     onClick={() => onClick("register")}
                     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"
                 >
-                  회원가입
+                  로그인/회원가입 하러가기
                 </button>
                 <p className="text-black font-medium text-center mt-5 cursor-pointer" onClick={() => onClick("guest")}>로그인 없이 둘러보기</p>
               </div>

src/pages/Main.jsx

@@ -14,54 +14,6 @@ import CreateGroup from "@/components/modal/CreateGroup";
 import NoArticleIcon from "@/assets/icon/main/edit.svg";
 import NoGroupImg from "@/assets/icon/group/no-group.svg";
 
-// const groupData = [
-//   {
-//     id: 1,
-//     title: "그룹 1",
-//     description: "설명 1",
-//     image: image,
-//     picturecount: "5",
-//     emotioncount: "3",
-//     badgecount: "5",
-//     days: "D+251"
-//   },
-//   {
-//     id: 2,
-//     title: "그룹 2",
-//     description: "설명 2",
-//     image: image,
-//     picturecount: "5",
-//     emotioncount: "3",
-//     badgecount: "5",
-//     days: "D+251"
-//   },
-//   {
-//     id: 3,
-//     title: "그룹 3",
-//     description: "설명 3",
-//     image: image,
-//     picturecount: "5",
-//     emotioncount: "3",
-//     badgecount: "5",
-//     days: "D+251"
-//   },
-//   {
-//     id: 4,
-//     title: "그룹 4",
-//     description: "설명 4",
-//     image: image,
-//     picturecount: "5",
-//     emotioncount: "3",
-//     badgecount: "5",
-//     days: "D+251"
-//   },
-// ];
-
-const memoryData = [
-  // { id: 1, title: "글 제목 1", date: "2025.01.21", memory: "8", sympathy: "5", comments: "5" },
-  // { id: 2, title: "글 제목 2", date: "2025.01.20", memory: "12", sympathy: "7", comments: "9" },
-];
-
 export default function Main() {
   const [isLogin, setIsLogin] = useState(false);
   const [recentPosts, setRecentPosts] = useState([]);
@@ -91,14 +43,14 @@ export default function Main() {
   /** 그룹 목록 조회 **/
   useEffect(() => {
     const fetchGroupList = async () => {
-      try{
+      try {
         const data = await groupService.getGroupList({
           type: "public",
           sortBy: "latest",
-          keyword:"",
+          keyword: "",
         });
         setGroupList(data.data || []);
-      } catch{
+      } catch {
         addToast("그룹 목록 조회에 실패했습니다.");
       }
     };
@@ -109,24 +61,21 @@ export default function Main() {
   /** 내가 작성한 글 목록 조회 **/
   useEffect(() => {
     const fetchRecentPosts = async () => {
-      try{
+      try {
         const data = await userService.getMyPosts();
         setRecentPosts(data.data || []);
-      } catch{
+      } catch {
         addToast("최근에 작성한 글 조회에 실패했습니다.");
       }
     }
 
     fetchRecentPosts();
   }, [])
 
-
-  console.log(recentPosts);
   const handleLoginModal = (type) => {
     switch (type) {
-      case "login":
-        break;
       case "register":
+        navigate("/login");
         break;
       case "guest":
         setIsLoginModalOpen(false);
@@ -138,6 +87,10 @@ export default function Main() {
     !isLogin ? setIsLoginModalOpen(true) : setIsGroupMakeModalOpen(true)
   }
 
+  const handleRecentNotice = () => {
+    navigate("/notice/20")
+  }
+
   return (
       <div className="w-full h-full pt-3 pb-7 overflow-auto">
         <div className="flex items-center mb-1">
@@ -148,7 +101,7 @@ export default function Main() {
         님, 안녕하세요!
         </span>
         </div>
-        <NoticeCard/>
+        <NoticeCard onClick={handleRecentNotice}/>
         <div className="max-w-[95%] flex flex-col gap-3 my-3">
           <div className="flex justify-between items-center">
           <span className="text-black text-xl font-semibold">
@@ -158,24 +111,24 @@ export default function Main() {
                   className="cursor-pointer text-normalGray hover:text-normalGray-hover active:text-normalGray-active text-lg">공개 그룹 목록 보러가기</span>
           </div>
           <div className=" w-full py-3">
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-              {groupList.map((group) => (
-                  <PublicGroupCard
-                      key={group.groupId}
-                      id={group.groupId}
-                      title={group.groupName}
-                      description={group.description}
-                      image={group.image}
-                      picturecount={group.postCount}
-                      emotioncount={group.likeCount}
-                      badgecount={group.badgecount}
-                      days={group.dday}
-                  />
-              ))}
-
-            </div>
-            {groupList.length === 0 && (
-                <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">
+            {groupList.length > 0 ? (
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+                  {groupList.map((group) => (
+                      <PublicGroupCard
+                          key={group.groupId}
+                          id={group.groupId}
+                          title={group.groupName}
+                          description={group.description}
+                          image={group.image}
+                          picturecount={group.postCount}
+                          emotioncount={group.likeCount}
+                          badgecount={group.badgecount}
+                          days={group.dday}
+                      />
+                  ))}
+                </div>) : (
+                <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">
                   <div className="flex flex-col items-center justify-center h-full text-center text-gray-500">
                     <img src={NoGroupImg} alt="No Group" className="w-30 h-30 mb-4"/>
                     <p className="text-lg font-semibold">등록된 그룹이 없습니다.</p>
@@ -204,30 +157,31 @@ export default function Main() {
             </div>
             {/* 섹션 1 카드 */}
             <div className="h-auto w-full bg-white rounded-[17.33px] p-4 shadow-md flex flex-col gap-5">
-              {memoryData?.map((item, idx) => (
-                  <MemoryCard
-                      key={item.id}
-                      index={idx}
-                      title={item.title}
-                      date={item.date}
-                      memory={item.memory}
-                      sympathy={item.sympathy}
-                      comments={item.comments}
-                  />
-              ))}
-              {memoryData.length === 0 &&
+              {recentPosts.length > 0 ? (
+                  recentPosts.map((item, idx) => (
+                      <MemoryCard
+                          key={item.id}
+                          index={idx}
+                          title={item.title}
+                          date={item.date}
+                          memory={item.memory}
+                          sympathy={item.sympathy}
+                          comments={item.comments}
+                      />
+                  ))
+              ) : (
                   <div className="flex flex-col items-center justify-center h-[30vh] text-center text-gray-500">
                     <img src={NoArticleIcon} alt="No Group" className="w-30 h-30 mb-8"/>
                     <p className="text-xl font-semibold">최근에 내가 작성한 추억글이 없습니다.</p>
                     <p className="text-sm text-gray-400 mt-1">조각집에 참여하고 추억글을 작성해보세요!</p>
                   </div>
-              }
+              )}
             </div>
           </div>
           {/* 섹션 2 */}
           <MemoryActions widthClass="flex-1" marginTop="mt-[7vh]" onClickGroup={handleGroupRegist}/>
         </div>
-        {isGroupMakeModalOpen && <CreateGroup onClose={() => setIsGroupMakeModalOpen(false)} />}
+        {isGroupMakeModalOpen && <CreateGroup onClose={() => setIsGroupMakeModalOpen(false)}/>}
         {isLoginModalOpen && <NeedLoginToGuest onClick={handleLoginModal}/>}
       </div>
   );

src/pages/Notice.jsx

@@ -34,13 +34,13 @@ const noticeData = [
   },
   {
     id: 15,
-    title: "보안 강화 업데이트 안내",
+    title: "웹 서비스 보안 업데이트 안내",
     createdAt: "2025-01-26",
     view: 77,
   },
   {
     id: 16,
-    title: "설 연휴 배송 일정 안내",
+    title: "설 연휴 시스템 점검 안내",
     createdAt: "2025-01-25",
     view: 85,
   },
@@ -58,13 +58,13 @@ const noticeData = [
   },
   {
     id: 19,
-    title: "앱 다운로드 10만 돌파 이벤트",
+    title: "사이트 방문 10만 돌파 이벤트",
     createdAt: "2025-01-22",
     view: 100,
   },
   {
     id: 20,
-    title: "이용 후기 작성 이벤트 안내",
+    title: "조각집 사용법 보러가기",
     createdAt: "2025-01-21",
     view: 45,
   }

src/pages/NoticeDetail.jsx

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