[박상준] Week14

components/Button/Button.styled.ts

@@ -8,7 +8,7 @@ const buttonSize = {
   lg: '40',
 };
 
-export const Cta = styled.span<ButtonProps>`
+export const Cta = styled.button<ButtonProps>`
   cursor: pointer;
   text-decoration: none;
   display: flex;

components/Button/Button.tsx

@@ -6,9 +6,5 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 
 export function Button({ children, size }: ButtonProps) {
-  return (
-    <>
-      <S.Cta size={size}>{children}</S.Cta>
-    </>
-  );
+  return <S.Cta size={size}>{children}</S.Cta>;
 }

components/Card/Card.styled.ts

@@ -24,7 +24,7 @@ export const ItemImg = styled.div<{ image: string }>`
   background-position: center;
 
   &:hover {
-    background-size: 130%;
+    background-size: 150%;
   }
 `;
 
@@ -56,7 +56,6 @@ export const StarIcon = styled.img`
   position: absolute;
   top: 1.5rem;
   right: 1.5rem;
-  z-index: 10;
 `;
 
 export const ItemInfo = styled.div`
@@ -88,6 +87,7 @@ export const ItemDescription = styled.p`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  padding-top: 0.2rem;
 
   a {
     text-decoration: none;

components/Card/Card.tsx

@@ -1,79 +1,71 @@
-import { useEffect, useRef, useState } from 'react';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { changeDate, calculateDate } from '../../util/util';
 import * as S from './Card.styled';
 import KebabMenu from '../KebabMenu/KebabMenu';
-import { Link } from '../../hooks/useGetFolder';
+import { LinkData } from '../../hooks/useGetFolder';
 import Image from 'next/image';
+import Link from 'next/link';
 
-function Card({ item }: { item: Link }) {
+function Card({
+  item,
+  setUrl,
+}: {
+  item: LinkData;
+  setUrl: Dispatch<SetStateAction<string>>;
+}) {
   const [createdAt, setCreatedAt] = useState({ time: 0, result: '' });
   const [fullDate, setFullDate] = useState('');
   const { image_source } = item;
-  const [kebabView, setKebaView] = useState(false);
+  const [kebabView, setKebabView] = useState(false);
   const [like, setLike] = useState(false);
-  const kebabRef = useRef<HTMLObjectElement>(null);
-
-  const { url, description } = item;
+  const { url, description, id } = item;
 
   const createdText = `${createdAt.time} ${createdAt.result} ago`;
 
   useEffect(() => {
     const nowDate = new Date();
-    let createdate = new Date(item.created_at);
+    const createdate = new Date(item.created_at);
     const date = (Number(nowDate) - Number(createdate)) / 1000;
     setCreatedAt(calculateDate(date));
     setFullDate(changeDate(createdate));
   }, [item]);
 
-  useEffect(() => {
-    function handleClickOutside(e: any) {
-      if (
-        kebabView &&
-        kebabRef.current &&
-        !kebabRef.current.contains(e.target)
-      ) {
-        setKebaView(false);
-      }
-    }
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [kebabView]);
-
   return (
-    <S.ItemCard>
-      <S.StarIcon
-        src={like ? '/full_star.svg' : '/star.svg'}
-        alt="별 이미지"
-        onClick={() => {
-          setLike(!like);
-        }}
-      />
-      {image_source ? (
-        <S.ItemImg image={image_source} />
-      ) : (
-        <S.EmptyImg>
-          <Image src="/logo.svg" alt="빈 이미지" width={133} height={24} />
-        </S.EmptyImg>
-      )}
-      <S.ItemInfo>
-        <S.KebabIcon
-          src="/kebab.svg"
-          alt="kebabIcon"
-          onClick={() => setKebaView(!kebabView)}
+    <Link href={url} target="_blank" rel="noreferrer">
+      <S.ItemCard>
+        <S.StarIcon
+          src={like ? '/full_star.svg' : '/star.svg'}
+          alt="별 이미지"
+          onClick={(e) => {
+            setLike(!like);
+            e.preventDefault();
+          }}
         />
-        <S.ItemDate>{createdText}</S.ItemDate>
-        <S.ItemDescription>
-          <a href={url} target="_blank" rel="noreferrer">
+        {image_source ? (
+          <S.ItemImg image={image_source} />
+        ) : (
+          <S.EmptyImg>
+            <Image src="/logo.svg" alt="빈 이미지" width={133} height={24} />
+          </S.EmptyImg>
+        )}
+        <S.ItemInfo>
+          <S.KebabIcon
+            src="/kebab.svg"
+            alt="kebabIcon"
+            onClick={(e) => {
+              setKebabView(!kebabView);
+              e.preventDefault();
+            }}
+          />
+          <S.ItemDate>{createdText}</S.ItemDate>
+          <S.ItemDescription>
             {description ? description : url}
-          </a>
-        </S.ItemDescription>
-        <S.ItemFullDate>{fullDate}</S.ItemFullDate>
-      </S.ItemInfo>
-      {kebabView && <KebabMenu menuRef={kebabRef} />}
-    </S.ItemCard>
+          </S.ItemDescription>
+          <S.ItemFullDate>{fullDate}</S.ItemFullDate>
+        </S.ItemInfo>
+        {kebabView && <KebabMenu url={url} setUrl={setUrl} id={id} />}
+      </S.ItemCard>
+    </Link>
   );
 }
 

components/ContentsContainer.tsx

@@ -2,12 +2,14 @@ import { ReactNode } from 'react';
 import styled from 'styled-components';
 
 const Container = styled.div<{ $empty: number }>`
+  min-height: 40rem;
   gap: 2rem;
   display: grid;
   grid-template-columns: ${(props) =>
     props.$empty > 0 ? 'repeat(3, 1fr)' : 'none'};
   margin: 0 auto;
   position: relative;
+  margin-bottom: 10rem;
 
   @media (max-width: 1199px) {
     grid-template-columns: ${(props) => (props.$empty > 0 ? '1fr 1fr' : '1fr')};

components/FolderButton/FolderButton.styled.ts

@@ -15,6 +15,11 @@ export const FolderName = styled.span<{ $select: string | boolean }>`
   white-space: nowrap;
   color: ${(props) => (props.$select === 'select' ? '#fff' : '#000')};
 
+  &:hover {
+    background-color: var(--Primary);
+    color: #fff;
+  }
+
   @media (max-width: 768px) {
     font-size: 1.2rem;
   }

components/FolderButton/FolderButton.tsx

@@ -4,22 +4,21 @@ import { Folder } from '@/hooks/useGetFolderList';
 
 function FolderButton({
   item,
-  setFolderId,
-  setFolderName,
   isSelected,
   handleMenuClick,
   index,
+  setOnSelect,
 }: {
   item: Folder;
-  setFolderId: React.Dispatch<React.SetStateAction<number>>;
-  setFolderName: React.Dispatch<React.SetStateAction<string>>;
   isSelected: string;
   handleMenuClick: (index: number) => void;
   index: number;
+  setOnSelect: React.Dispatch<
+    React.SetStateAction<{ id: number; name: string }>
+  >;
 }) {
   const changeFolder = () => {
-    setFolderId(item.id);
-    setFolderName(item.name);
+    setOnSelect({ id: item.id, name: item.name });
     handleMenuClick(index);
   };
 

components/FolderButtonContainer/FolderButtonContainer.styled.ts

@@ -12,7 +12,8 @@ export const FolderButtons = styled.div`
   display: flex;
   align-items: center;
   gap: 1.2rem;
-  flex-wrap: wrap;
+  overflow: auto;
+  width: 100%;
 `;
 
 export const TotalFolderButton = styled(FolderName)``;

components/FolderButtonContainer/FolderButtonContainer.tsx

@@ -3,19 +3,21 @@ import * as S from './FolderButtonContainer.styled';
 import FolderButton from '../FolderButton/FolderButton';
 import { useModal } from '../../contexts/ModalContext';
 import { Folders } from '../../hooks/useGetFolderList';
+import ModalPortal from '@/Portal';
+import AddFolderModal from '../Modal/AddFolderModal/AddFolderModal';
 
 function FolderButtonContainer({
   link,
-  setFolderName,
-  setFolderId,
+  setOnSelect,
 }: {
   link: Folders;
-  setFolderName: React.Dispatch<React.SetStateAction<string>>;
-  setFolderId: React.Dispatch<React.SetStateAction<number>>;
+  setOnSelect: React.Dispatch<
+    React.SetStateAction<{ id: number; name: string }>
+  >;
 }) {
   const [linkSelected, setLinkSelected] = useState<string[]>([]);
   const [totalBtn, setTotalBtn] = useState(true);
-  const { openModal } = useModal();
+  const { modalState, openModal } = useModal();
 
   const handleMenuClick = (index: number) => {
     const booleanArr: string[] = new Array(link.length).fill('white');
@@ -27,8 +29,7 @@ function FolderButtonContainer({
   const handleClickTotalButton = () => {
     const totalArr: string[] = new Array(link.length).fill('white');
     setLinkSelected(totalArr);
-    setFolderId(0);
-    setFolderName('');
+    setOnSelect({ id: 0, name: '' });
     setTotalBtn(true);
   };
 
@@ -46,8 +47,7 @@ function FolderButtonContainer({
               <FolderButton
                 item={item}
                 key={item.name}
-                setFolderId={setFolderId}
-                setFolderName={setFolderName}
+                setOnSelect={setOnSelect}
                 isSelected={linkSelected[index]}
                 handleMenuClick={handleMenuClick}
                 index={index}
@@ -59,6 +59,11 @@ function FolderButtonContainer({
         폴더 추가
         <S.PlusIcon />
       </S.AddFolderButton>
+      {modalState.addFolder && (
+        <ModalPortal>
+          <AddFolderModal />
+        </ModalPortal>
+      )}
     </S.FolderMenu>
   );
 }

components/FolderModalContainer/FolderModals.styled.ts

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+export const FolderModal = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1.2rem;
+`;
+
+export const FolderModalIcon = styled.div`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  color: var(--Linkbrary-gray60);
+  font-size: 1.4rem;
+`;

components/FolderModalContainer/FolderModals.tsx

@@ -0,0 +1,62 @@
+import Image from 'next/image';
+import { ReactNode } from 'react';
+import * as S from './FolderModals.styled';
+import { useModal } from '@/contexts/ModalContext';
+import ModalPortal from '@/Portal';
+import ShareModal from '../Modal/ShareModal/ShareModal';
+import EditModal from '../Modal/EditModal/EditModal';
+import DeleteModal from '../Modal/DeleteModal/DeleteModal';
+
+function FolderIcon({
+  image,
+  children,
+  onOpen,
+  state,
+}: {
+  image: string;
+  children: ReactNode;
+  onOpen: (modalName: string) => void;
+  state: string;
+}) {
+  return (
+    <S.FolderModalIcon onClick={() => onOpen(`${state}`)}>
+      <Image src={image} alt={`${image}`} width={20} height={20} />
+      {children}
+    </S.FolderModalIcon>
+  );
+}
+
+function FolderModals({ id, name }: { id: number; name: string }) {
+  const { modalState, openModal, closeModal } = useModal();
+
+  return (
+    <S.FolderModal>
+      <FolderIcon image="/share.svg" onOpen={openModal} state={'share'}>
+        공유
+      </FolderIcon>
+      <FolderIcon image="/pen.svg" onOpen={openModal} state={'edit'}>
+        이름 변경
+      </FolderIcon>
+      <FolderIcon image="/Group36.svg" onOpen={openModal} state={'delete'}>
+        삭제
+      </FolderIcon>
+      {modalState.share && (
+        <ModalPortal>
+          <ShareModal folderName={name} />
+        </ModalPortal>
+      )}
+      {modalState.edit && (
+        <ModalPortal>
+          <EditModal />
+        </ModalPortal>
+      )}
+      {modalState.delete && (
+        <ModalPortal>
+          <DeleteModal folderName={name} folderId={id} />
+        </ModalPortal>
+      )}
+    </S.FolderModal>
+  );
+}
+
+export default FolderModals;

components/Footer/Footer.styled.ts

@@ -3,7 +3,7 @@ import { Description } from '../MainSectionCard/MainSectionCard.styled';
 
 export const Footer = styled.div`
   width: 100%;
-  margin: 6rem auto 0;
+  margin: auto 0;
   background: var(--Footer-black);
   padding: 3.2rem 10.4rem 6.4rem;
   color: #cfcfcf;
@@ -26,7 +26,7 @@ export const Footer__menu = styled.div`
   justify-content: space-between;
 `;
 
-export const FooterDescrption = styled(Description)`
+export const FooterDescription = styled(Description)`
   width: fit-content;
 
   @media (max-width: 768px) {