fix: 모달 동작 버튼 추가 및 api이미지 주소 수정

codeit-bootcamp-frontend · Apr 28, 2024 · 193a3af · 193a3af
1 parent 4a373c7
commit 193a3af
Show file tree

Hide file tree

Showing 14 changed files with 98 additions and 30 deletions.
diff --git a/src/api/api.js b/src/api/api.js
@@ -7,6 +7,10 @@ export async function getSampleUser() {
 
 export async function getSampleFolder() {
   const { data } = await axios.get('/sample/folder');
+  for (let i = 1; i < data.folder.count; i++) {
+    data.folder.links[i].image_source = data.folder.links[i].imageSource;
+    delete data.folder.links[i].imageSource;
+  }
   return data;
 }
 

diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx
@@ -5,10 +5,10 @@ import star from '../../assets/star.svg';
 import * as S from './Card.styled';
 import KebabMenu from '../KebabMenu/KebabMenu';
 
-function Card({ item }) {
+function Card({ item, toggleModal }) {
   const [createdAt, setCreatedAt] = useState({});
   const [fullDate, setFullDate] = useState('');
-  const [imageUrl, setImageUrl] = useState('');
+  const [imageUrl] = useState(item.image_source);
   const [kebabView, setKebaView] = useState(false);
 
   const { url, description } = item;
@@ -28,14 +28,6 @@ function Card({ item }) {
     setFullDate(changeDate(createdate));
   }, [item]);
 
-  useEffect(() => {
-    if (item.imageSource) {
-      setImageUrl(item.imageSource);
-    } else if (item.image_source) {
-      setImageUrl(item.image_source);
-    }
-  }, [item]);
-
   return (
     <S.ItemCard>
       <S.StarIcon src={star} alt="starIcon" />
@@ -58,7 +50,7 @@ function Card({ item }) {
         </S.ItemDescription>
         <S.ItemFullDate>{fullDate}</S.ItemFullDate>
       </S.ItemInfo>
-      {kebabView && <KebabMenu />}
+      {kebabView && <KebabMenu toggleModal={toggleModal} item={item} />}
     </S.ItemCard>
   );
 }

diff --git a/src/components/FolderButtonContainer/FolderButtonContainer.jsx b/src/components/FolderButtonContainer/FolderButtonContainer.jsx
@@ -46,7 +46,7 @@ function FolderButtonContainer({
             ))
           : null}
       </S.FolderButtons>
-      <S.AddFolderButton onClick={() => toggleModal('add')}>
+      <S.AddFolderButton onClick={() => toggleModal('addFolder')}>
         폴더 추가
         <S.PlusIcon />
       </S.AddFolderButton>

diff --git a/src/components/KebabMenu/KebabMenu.jsx b/src/components/KebabMenu/KebabMenu.jsx
@@ -1,10 +1,14 @@
 import * as S from './KebabMenu.styled';
 
-function KebabMenu() {
+function KebabMenu({ toggleModal }) {
   return (
     <S.ModalBody>
-      <S.ModalButton>삭제하기</S.ModalButton>
-      <S.ModalButton>폴더에 추가</S.ModalButton>
+      <S.ModalButton onClick={() => toggleModal('deleteLink')}>
+        삭제하기
+      </S.ModalButton>
+      <S.ModalButton onClick={() => toggleModal('add')}>
+        폴더에 추가
+      </S.ModalButton>
     </S.ModalBody>
   );
 }

diff --git a/src/components/KebabMenu/KebabMenu.styled.js b/src/components/KebabMenu/KebabMenu.styled.js
@@ -15,6 +15,7 @@ export const ModalBody = styled.div`
 `;
 
 export const ModalButton = styled.div`
+  cursor: pointer;
   display: flex;
   flex-direction: column;
   align-items: center;

diff --git a/src/components/Modal/AddFolderModal/AddFolderModal.jsx b/src/components/Modal/AddFolderModal/AddFolderModal.jsx
@@ -0,0 +1,25 @@
+import * as S from '../EditModal/EditModal.styled';
+import closeIcon from '../../../assets/close.svg';
+
+function AddFolderModal({ setModal }) {
+  return (
+    <S.Background>
+      <S.Body>
+        <p>폴더 추가</p>
+        <S.ModalForm>
+          <S.ModalInput placeholder="내용 입력" type="text" />
+          <S.ModalButton onClick={(e) => e.preventDefault()}>
+            추가하기
+          </S.ModalButton>
+        </S.ModalForm>
+        <S.CloseIcon
+          src={closeIcon}
+          alt="닫기버튼"
+          onClick={() => setModal(false)}
+        />
+      </S.Body>
+    </S.Background>
+  );
+}
+
+export default AddFolderModal;
diff --git a/src/components/Modal/AddModal/AddModal.jsx b/src/components/Modal/AddModal/AddModal.jsx
@@ -3,9 +3,21 @@ import closeIcon from '../../../assets/close.svg';
 import checkIcon from '../../../assets/check.svg';
 import { useState } from 'react';
 
-function AddModal({ setModal }) {
+function FolderButton({ item }) {
   const [check, setCheck] = useState(false);
 
+  return (
+    <S.FolderButton $check={check} onClick={() => setCheck(!check)}>
+      <S.FolderInfo>
+        <h2>{item.name}</h2>
+        <p>{item.link.count}개의 링크</p>
+      </S.FolderInfo>
+      {check && <img src={checkIcon} alt="체크 아이콘" />}
+    </S.FolderButton>
+  );
+}
+
+function AddModal({ setModal, link }) {
   return (
     <S.Background>
       <S.Body>
@@ -14,13 +26,9 @@ function AddModal({ setModal }) {
           <span>폴더명</span>
         </S.Header>
         <S.FolderContainer>
-          <S.FolderButton check={check} onClick={() => setCheck(!check)}>
-            <S.FolderInfo>
-              <h2>폴더이름</h2>
-              <p>링크 갯수</p>
-            </S.FolderInfo>
-            {check && <img src={checkIcon} alt="체크 아이콘" />}
-          </S.FolderButton>
+          {link.map((item) => (
+            <FolderButton key={item.id} item={item} />
+          ))}
         </S.FolderContainer>
         <S.AddButton>추가하기</S.AddButton>
         <S.CloseIcon

diff --git a/src/components/Modal/AddModal/AddModal.styled.js b/src/components/Modal/AddModal/AddModal.styled.js
@@ -67,7 +67,7 @@ export const FolderButton = styled.div`
   align-items: center;
   gap: 8px;
   border-radius: 8px;
-  background: ${(props) => props.check && 'var(--Background)'};
+  background: ${(props) => props.$check && 'var(--Background)'};
 `;
 
 export const FolderInfo = styled.div`

diff --git a/src/components/Modal/DeleteLinkModal/DeleteLinkModal.jsx b/src/components/Modal/DeleteLinkModal/DeleteLinkModal.jsx
@@ -0,0 +1,22 @@
+import * as S from '../DeleteModal/DeleteModal.styled';
+import closeIcon from '../../../assets/close.svg';
+
+function DeleteLinkModal({ setModal }) {
+  return (
+    <S.Background>
+      <S.Body>
+        <p>링크 삭제</p>
+        <S.ModalButton onClick={(e) => e.preventDefault()}>
+          삭제하기
+        </S.ModalButton>
+        <S.CloseIcon
+          src={closeIcon}
+          alt="닫기버튼"
+          onClick={() => setModal(false)}
+        />
+      </S.Body>
+    </S.Background>
+  );
+}
+
+export default DeleteLinkModal;
diff --git a/src/components/Modal/DeleteModal/DeleteModal.jsx b/src/components/Modal/DeleteModal/DeleteModal.jsx
@@ -1,7 +1,7 @@
 import * as S from './DeleteModal.styled';
 import closeIcon from '../../../assets/close.svg';
 
-function DeleteModal({ children, setModal, folderName }) {
+function DeleteModal({ setModal, folderName }) {
   return (
     <S.Background>
       <S.Body>

diff --git a/src/components/Modal/EditModal/EditModal.jsx b/src/components/Modal/EditModal/EditModal.jsx
@@ -1,7 +1,7 @@
 import * as S from './EditModal.styled';
 import closeIcon from '../../../assets/close.svg';
 
-function EditModal({ children, setModal }) {
+function EditModal({ setModal }) {
   return (
     <S.Background>
       <S.Body>

diff --git a/src/components/Modal/Modals/Modals.jsx b/src/components/Modal/Modals/Modals.jsx
@@ -1,22 +1,26 @@
+import AddFolderModal from '../AddFolderModal/AddFolderModal';
 import AddModal from '../AddModal/AddModal';
+import DeleteLinkModal from '../DeleteLinkModal/DeleteLinkModal';
 import DeleteModal from '../DeleteModal/DeleteModal';
 import EditModal from '../EditModal/EditModal';
 import ShareModal from '../ShareModal/ShareModal';
 import * as S from './Modals.styled';
 
-function Modals({ modalType, setModal, folderName }) {
+function Modals({ modalType, setModal, folderName, link }) {
   return (
     <S.ModalPage>
       {modalType === 'delete' && (
         <DeleteModal setModal={setModal} folderName={folderName} />
       )}
-      {modalType === 'add' && <AddModal setModal={setModal} />}
+      {modalType === 'add' && <AddModal setModal={setModal} link={link} />}
       {modalType === 'edit' && (
         <EditModal setModal={setModal} folderName={folderName} />
       )}
       {modalType === 'share' && (
         <ShareModal setModal={setModal} folderName={folderName} />
       )}
+      {modalType === 'addFolder' && <AddFolderModal setModal={setModal} />}
+      {modalType === 'deleteLink' && <DeleteLinkModal setModal={setModal} />}
     </S.ModalPage>
   );
 }

diff --git a/src/components/Modal/Modals/Modals.styled.js b/src/components/Modal/Modals/Modals.styled.js
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 export const ModalPage = styled.div`
   z-index: 50;
-  position: absolute;
+  position: fixed;
   top: 0;
   width: 100%;
 `;
diff --git a/src/pages/Folder/Folder.jsx b/src/pages/Folder/Folder.jsx
@@ -97,7 +97,14 @@ function Folder() {
         </S.FolderModalContainer>
         <ContentsContainer content={linkList.length}>
           {linkList.length > 0 ? (
-            linkList.map((item) => <Card item={item} key={item.id} />)
+            linkList.map((item) => (
+              <Card
+                item={item}
+                key={item.id}
+                toggleModal={toggleModal}
+                setModal={setModal}
+              />
+            ))
           ) : (
             <S.EmptyFolder>저장된 링크가 없습니다.</S.EmptyFolder>
           )}
@@ -108,6 +115,7 @@ function Folder() {
           modalType={modalType}
           setModal={setModal}
           folderName={folderName}
+          link={link}
         />
       )}
       <Footer />