0710 fix : 프론트 에러 및 북마크 수정

front/.gitignore

@@ -1,4 +1,8 @@
 ### react ###
+
+# macOS 시스템 파일
+.DS_Store
+
 .DS_*
 *.log
 logs

front/src/global/global.js

@@ -11,63 +11,63 @@ const GlobalStyle = createGlobalStyle`
     font-family: 'Pretendard';
     font-weight: 900;
     font-style: normal;
-    src: url(${process.env.PUBLIC_URL}/assets/fonts/pretendard/Pretendard-Black.woff2) format('woff2');
+    src: url(${process.env.PUBLIC_URL}/assets/fonts/Pretendard-Black.woff2) format('woff2');
   }
 
   @font-face {
     font-family: 'Pretendard';
     font-weight: 800;
     font-style: normal;
-    src: url(${process.env.PUBLIC_URL}/assets/fonts/pretendard/Pretendard-ExtraBold.woff2) format('woff2');
+    src: url(${process.env.PUBLIC_URL}/assets/fonts/Pretendard-ExtraBold.woff2) format('woff2');
   }
 
   @font-face {
     font-family: 'Pretendard';
     font-weight: 700;
     font-style: normal;
-    src: url(${process.env.PUBLIC_URL}/assets/fonts/pretendard/Pretendard-Bold.woff2) format('woff2');
+    src: url(${process.env.PUBLIC_URL}/assets/fonts/Pretendard-Bold.woff2) format('woff2');
   }
 
   @font-face {
     font-family: 'Pretendard';
     font-weight: 600;
     font-style: normal;
-    src: url(${process.env.PUBLIC_URL}/assets/fonts/pretendard/Pretendard-SemiBold.woff2) format('woff2');
+    src: url(${process.env.PUBLIC_URL}/assets/fonts/Pretendard-SemiBold.woff2) format('woff2');
   }
 
   @font-face {
     font-family: 'Pretendard';
     font-weight: 500;
     font-style: normal;
-    src: url(${process.env.PUBLIC_URL}/assets/fonts/pretendard/Pretendard-Medium.woff2) format('woff2');
+    src: url(${process.env.PUBLIC_URL}/assets/fonts/Pretendard-Medium.woff2) format('woff2');
   }
 
   @font-face {
     font-family: 'Pretendard';
     font-weight: 400;
     font-style: normal;
-    src: url(${process.env.PUBLIC_URL}/assets/fonts/pretendard/Pretendard-Regular.woff2) format('woff2');
+    src: url(${process.env.PUBLIC_URL}/assets/fonts/Pretendard-Regular.woff2) format('woff2');
   }
 
   @font-face {
     font-family: 'Pretendard';
     font-weight: 300;
     font-style: normal;
-    src: url(${process.env.PUBLIC_URL}/assets/fonts/pretendard/Pretendard-Light.woff2) format('woff2');
+    src: url(${process.env.PUBLIC_URL}/assets/fonts/Pretendard-Light.woff2) format('woff2');
   }
 
   @font-face {
     font-family: 'Pretendard';
     font-weight: 200;
     font-style: normal;
-    src: url(${process.env.PUBLIC_URL}/assets/fonts/pretendard/Pretendard-ExtraLight.woff2) format('woff2');
+    src: url(${process.env.PUBLIC_URL}/assets/fonts/Pretendard-ExtraLight.woff2) format('woff2');
   }
 
   @font-face {
     font-family: 'Pretendard';
     font-weight: 100;
     font-style: normal;
-    src: url(${process.env.PUBLIC_URL}/assets/fonts/pretendard/Pretendard-thin.woff2) format('woff2');
+    src: url(${process.env.PUBLIC_URL}/assets/fonts/Pretendard-thin.woff2) format('woff2');
   }
 
   /* 3) 초기 스타일 */

front/src/pages/archive/BookmarkTyped.jsx

@@ -36,8 +36,9 @@ const BookmarkTyped = () => {
     setSelectedCard(null); // 닫기
   };
 
-  const items = [
+  const [items, setItems] = useState([
     {
+      id: 1,
       date: "2025.06.28",
       title: "끝내주는 인생",
       content:
@@ -49,7 +50,27 @@ const BookmarkTyped = () => {
       artist: "John Canada",
       coverUrl: "/assets/images/book-img.jpeg",
     },
-  ];
+  ]);
+
+  // 편집 모드
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [selectedIds, setSelectedIds] = useState([]);
+
+  const handleEditClick = () => {
+    setIsEditMode((prev) => !prev);
+    setSelectedIds([]); // 편집 모드 종료 시 초기화
+  };
+
+  const handleCardSelect = (id) => {
+    if (!isEditMode) return;
+    setSelectedIds((prev) => (prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]));
+  };
+
+  const handleDeleteSelected = () => {
+    const newItems = items.filter((item) => !selectedIds.includes(item.id));
+    setItems(newItems);
+    setSelectedIds([]);
+  };
 
   return (
     <>
@@ -84,13 +105,26 @@ const BookmarkTyped = () => {
               )}
             </S.MenuWrapper>
           </S.FolderTitleRow>
-          <S.EditButton>편집</S.EditButton>
+          {isEditMode ? (
+            <S.EditRow>
+              <S.DeleteButton onClick={handleDeleteSelected}>삭제</S.DeleteButton>
+              <S.SelectedText>{selectedIds.length}개 선택됨</S.SelectedText>
+            </S.EditRow>
+          ) : (
+            <S.EditButton onClick={handleEditClick}>편집</S.EditButton>
+          )}
         </S.ThumbnailBox>
 
         {/* 북마크 카드 리스트 */}
         <S.CardColumn>
           {items.map((item, idx) => (
-            <HistoryCard key={idx} data={item} onClick={() => handleCardClick(item)} />
+            <HistoryCard
+              key={item.id}
+              data={item}
+              onClick={() => (isEditMode ? handleCardSelect(item.id) : handleCardClick(item))}
+              selected={selectedIds.includes(item.id)}
+              isEditMode={isEditMode}
+            />
           ))}
         </S.CardColumn>
         {/* 팝업 */}

front/src/pages/archive/HistoryCard.jsx

@@ -3,7 +3,7 @@ import useClickOutside from "../../modules/hooks/useClickOutside";
 import Card from "./history.card.style";
 import Dropdown from "./dropdown.style";
 
-const HistoryCard = ({ data, onClick }) => {
+const HistoryCard = ({ data, onClick, selected, isEditMode }) => {
   const { date, content, title, author, music, artist } = data;
 
   // 북마크, 좋아요 토글 버튼
@@ -16,7 +16,7 @@ const HistoryCard = ({ data, onClick }) => {
   useClickOutside(dropdownRef, () => setOpenDropdown(false));
 
   return (
-    <Card.Card>
+    <Card.Card selected={selected} onClick={onClick}>
       <Card.Header>
         <Card.Date>{date}</Card.Date>
         <Dropdown.Wrapper ref={dropdownRef} onClick={(e) => e.stopPropagation()}>

front/src/pages/archive/bookmark.section.style.js

@@ -95,6 +95,7 @@ S.ScrollRightBtn = styled.button`
 S.Card = styled.div`
   width: 160px;
   flex-shrink: 0;
+
 `;
 
 S.Image = styled.img`

front/src/pages/archive/bookmark.typed.style.js

@@ -103,6 +103,28 @@ S.CardColumn = styled.div`
   gap: 16px;
 `;
 
+// 편집 모드
+S.EditRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 10px;
+`;
+
+S.DeleteButton = styled.button`
+  background: none;
+  border: none;
+  color: #f96f3d;
+  font-size: 14px;
+  cursor: pointer;
+  padding: 0;
+`;
+
+S.SelectedText = styled.span`
+  font-size: 14px;
+  color: gray;
+`;
+
 // 디테일 팝업
 
 // 전체 배경 어둡게

front/src/pages/archive/history.card.style.js

@@ -5,9 +5,11 @@ const Card = {};
 Card.Card = styled.div`
   background-color: #fff;
   padding: 24px 22px 24px 22px;
-  border: 1px solid #e0e0e0;
+  border: ${({ selected }) => (selected ? "1px solid #f96f3d" : "1px solid #e0e0e0")};
   border-radius: 5px;
   font-family: pretendard;
+  transition: border 0.2s ease;
+  cursor: pointer;
 `;
 
 Card.Header = styled.div`

front/src/pages/main/MainContainer.jsx

@@ -180,7 +180,7 @@ const MainContainer = ({isUpdate, setIsUpdate}) => {
             <M.Line style={{ backgroundColor: "#282828" }} />
           </M.TypingSpeedWrap>
 
-          <M.FadeWrapper fade={fade}>
+          <M.FadeWrapper $fade={fade}>
             <M.ContentBox>
               {currentData && (
                 <M.TypingOverlay aria-hidden>