[정지성] week14

components/Cardsfolder/index.module.css → components/FolderCards/index.module.css

@@ -6,6 +6,10 @@
   border-radius: 10px;
 }
 
+.card :hover {
+  background-color: var(--gray10);
+}
+
 .card_txt_div_body {
   margin: 0.8rem 0;
   font-size: 1.2rem;
@@ -100,8 +104,7 @@
   text-align: center;
   padding: 0.7rem 0;
 }
-
-.isHovering {
+.options:hover {
   background-color: var(--gray10);
 }
 

components/Cardsfolder/index.tsx → components/FolderCards/index.tsx

@@ -1,27 +1,28 @@
 import { useFetch } from '@/hooks/useFetch';
-import { formatDate, generateTimeText } from '../../hooks/date';
+import { formatDate, generateTimeText } from '../../utils/date';
 import thumbnail from '@/public/thumbnail.svg';
-import styles from '@/components/Cardsfolder/index.module.css';
+import styles from '@/components/FolderCards/index.module.css';
 import starticon from '@/public/staricon.svg';
 import moreoptionicon from '@/public/moreoptionicon.svg';
 import { useState } from 'react';
 import ModalFolder from '@/components/modal/ModalFolder';
 import ModalDelete from '@/components/modal/ModalDelete';
 import Image from 'next/image';
+import Link from 'next/link';
 
 interface Link {
   id: string;
   url: string;
-  image_source?: string; // 이미지 소스는 옵셔널
+  image_source?: string;
+  thumbnail?: string;
   title: string;
   created_at: Date;
   description: string;
 }
 
-function Cardsfolder({ url }: { url: string }) {
-  // props를 비구조화 할당하여 사용
-  const cardData = useFetch<{ data: Link[] }>(url);
-  const [hoverStates, setHoverStates] = useState<boolean[]>([]);
+function FolderCards({ url }: { url: string }) {
+  const card = useFetch<{ data: Link[] }>(url);
+  const cardData = card?.data;
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isModalDeleteOpen, setIsModalDeleteOpen] = useState(false);
   const [popoverStates, setPopoverStates] = useState<{
@@ -30,22 +31,6 @@ function Cardsfolder({ url }: { url: string }) {
   const [selectedCardDescription, setSelectedCardDescription] =
     useState<string>('');
 
-  const handleMouseOver = (index: number) => {
-    setHoverStates((prevStates) => {
-      const updatedStates = [...prevStates];
-      updatedStates[index] = true;
-      return updatedStates;
-    });
-  };
-
-  const handleMouseOut = (index: number) => {
-    setHoverStates((prevStates) => {
-      const updatedStates = [...prevStates];
-      updatedStates[index] = false;
-      return updatedStates;
-    });
-  };
-
   const handleCloseModal = () => {
     setIsModalOpen(false);
   };
@@ -56,6 +41,7 @@ function Cardsfolder({ url }: { url: string }) {
 
   const handleClickButton = () => {
     setIsModalOpen((prev) => !prev);
+    setIsModalDeleteOpen(false);
   };
 
   const handleDeleteClickButton = (linkDescription: string) => {
@@ -71,46 +57,25 @@ function Cardsfolder({ url }: { url: string }) {
     setSelectedCardDescription(linkDescription);
   };
 
-  const handleFavoriteButtonClick = (
-    e: React.MouseEvent<HTMLButtonElement>
-  ) => {
-    e.stopPropagation();
-  };
-
-  if (!cardData) {
-    return null;
-  }
-
   return (
     <div className={styles.card_grid_container}>
-      {cardData.data.length ? (
-        cardData.data.map((link, index) => (
-          <div
-            className={`${styles.card_container} ${
-              hoverStates[index] ? styles.isHovering : ''
-            }`}
-            key={link.id}
-            onMouseOver={() => handleMouseOver(index)}
-            onMouseOut={() => handleMouseOut(index)}
-          >
-            <a href={link.url}>
+      {!cardData ? (
+        <div className={styles.noLinkText}>
+          <p>저장된 링크가 없습니다</p>
+        </div>
+      ) : (
+        cardData.map((link) => (
+          <div className={styles.card_container} key={link.id}>
+            <Link href={link.url}>
               <div className={styles.card}>
                 <div className={styles.card_img_div}>
-                  {link.image_source ? (
-                    <img
-                      src={link.image_source}
-                      className={styles.card_img}
-                      alt={link.title}
-                    />
-                  ) : (
-                    <Image
-                      width="320"
-                      height="200"
-                      src={thumbnail}
-                      className={styles.card_img}
-                      alt={link.title}
-                    />
-                  )}
+                  <Image
+                    width="320"
+                    height="200"
+                    src={link.image_source ? link.image_source : thumbnail}
+                    className={styles.card_img}
+                    alt={link.title}
+                  />
                 </div>
                 <div className={styles.card_txt_div}>
                   <div className={styles.card_txt_div_top}>
@@ -128,7 +93,7 @@ function Cardsfolder({ url }: { url: string }) {
                   </div>
                 </div>
               </div>
-            </a>
+            </Link>
             <button
               className={styles.card_moreoption_icon}
               onClick={() => handleOptionButtonClick(link.id, link.description)}
@@ -149,18 +114,11 @@ function Cardsfolder({ url }: { url: string }) {
                 </div>
               </div>
             )}
-            <button
-              className={styles.card_favorite_icon}
-              onClick={handleFavoriteButtonClick}
-            >
+            <button className={styles.card_favorite_icon}>
               <Image src={starticon} alt="즐겨찾기 별 아이콘" />
             </button>
           </div>
         ))
-      ) : (
-        <div className={styles.noLinkText}>
-          <p>저장된 링크가 없습니다</p>
-        </div>
       )}
       {isModalOpen && (
         <ModalFolder
@@ -183,4 +141,4 @@ function Cardsfolder({ url }: { url: string }) {
   );
 }
 
-export default Cardsfolder;
+export default FolderCards;

components/Folderdata/index.module.css

@@ -17,3 +17,12 @@
   flex-direction: column;
   align-items: center;
 }
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 24.4rem;
+  padding: 2rem 0 6rem;
+  background-color: var(--light-blue);
+}

components/Folderdata/index.tsx

@@ -1,6 +1,6 @@
 import { useFetch } from '@/hooks/useFetch';
 import styles from './index.module.css';
-import styled from 'styled-components';
+import Image from 'next/image';
 
 // Folder 데이터의 타입 정의
 interface Owner {
@@ -20,25 +20,15 @@ interface FolderDataResponse {
 const BASE_URL_FOLDER = 'https://bootcamp-api.codeit.kr/api/sample/folder';
 
 function FolderData() {
-  // useFetch 훅을 이용하여 데이터 가져오기
   const folderData = useFetch<FolderDataResponse>(BASE_URL_FOLDER);
 
-  // styled-components를 사용하여 스타일링된 컴포넌트 생성
-  const Container = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 24.4rem;
-    padding: 2rem 0 6rem;
-    background-color: var(--light-blue);
-  `;
-
   return (
-    <Container>
+    <div className={styles.container}>
       {folderData && (
         <div className={styles.folderInfo}>
-          <img
+          <Image
+            width="60"
+            height="60"
             src={folderData.folder.owner.profileImageSource}
             className={styles.folderProfile}
             alt="프로필"
@@ -49,7 +39,7 @@ function FolderData() {
           <h1 className={styles.folderName}>{folderData.folder.name}</h1>
         </div>
       )}
-    </Container>
+    </div>
   );
 }
 

components/Foldermenu/foldermenu.module.css

@@ -0,0 +1,23 @@
+.folderListContainer {
+  display: flex;
+  justify-content: start;
+  gap: 0.8rem;
+  position: relative;
+  flex-wrap: wrap;
+}
+
+.folderMenuContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 2.4rem;
+  height: 3.2rem;
+  margin-bottom: 2.4rem;
+}
+
+.imageContainer {
+  display: flex;
+  justify-content: center;
+  gap: 1.2rem;
+  height: 1.8rem;
+}