[임채민] Week9

package.json

@@ -10,6 +10,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
+    "react-helmet-async": "^2.0.4",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.22.0",
     "react-scripts": "5.0.1",

src/Main.js

@@ -1,15 +1,15 @@
 import Layout from './pages/Layout';
-import Shared from './pages/Shared';
-import Folder from './pages/Folder';
+import SharedPage from './pages/SharedPage';
+import FolderPage from './pages/FolderPage';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
 function Main() {
   return (
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<Layout />}>
-          <Route path="/shared" element={<Shared />} />
-          <Route path="/folder" element={<Folder />} />
+          <Route path="/shared" element={<SharedPage />} />
+          <Route path="/folder" element={<FolderPage />} />
         </Route>
       </Routes>
     </BrowserRouter>

src/components/CardListItem.js

@@ -3,6 +3,31 @@ import noCardImg from '../images/no-image.svg';
 import { Link } from 'react-router-dom';
 // import loadingImg from '../images/loading-spinner.svg';
 
+const Card = ({
+  imageSource,
+  title,
+  timePassed,
+  description,
+  formattedDate,
+  handleImageError,
+}) => {
+  return (
+    <div className="card">
+      <img
+        src={imageSource || noCardImg}
+        alt={title}
+        className="card-image"
+        onError={handleImageError}
+      />
+      <div className="text-container">
+        <span>{timePassed}</span>
+        <p>{description}</p>
+        <p className="date-number">{formattedDate}</p>
+      </div>
+    </div>
+  );
+};
+
 function CardListItem() {
   const data = useFetchCardsData();
   const handleImageError = (e) => {
@@ -22,19 +47,14 @@ function CardListItem() {
           formattedDate,
         }) => (
           <Link to={url} key={id}>
-            <div className="card">
-              <img
-                src={imageSource || noCardImg}
-                alt={title}
-                className="card-image"
-                onError={handleImageError}
-              />
-              <p className="text-container">
-                <span>{timePassed}</span>
-                <p>{description}</p>
-                <p className="date-number">{formattedDate}</p>
-              </p>
-            </div>
+            <Card
+              imageSource={imageSource}
+              title={title}
+              timePasse={timePassed}
+              description={description}
+              formattedDate={formattedDate}
+              handleImageError={handleImageError}
+            />
           </Link>
         )
       )}

src/components/Folder/Card.js

@@ -1,57 +1,36 @@
 import React from 'react';
-import defaultImg from '../../images/non_image.svg';
+import defaultImg from '../../images/no-image.svg';
 import starImg from '../../images/star.svg';
 import kebabImg from '../../images/kebab.svg';
 import { updateStatus } from './cardUpdate';
-import { Link } from 'react-router-dom';
 
-export default function Card({
-  imageSource,
-  createdAt,
-  description,
-  url,
-  folder,
-}) {
+export default function Card({ imageSource, createdAt, description, folder }) {
   const date = new Date(createdAt).toLocaleDateString();
 
   const dataStatus = updateStatus(createdAt);
 
   return (
     <div className="card">
-      <Link to={url}>
-        <section>
-          <div className="card-image">
-            <img
-              src={imageSource ? imageSource : defaultImg}
-              className="card-data-image"
-              alt="card"
-              width="340"
-              height="200"
-            />
-            {folder && (
-              <img
-                className="card-star-button"
-                src={starImg}
-                alt="star"
-                width={34}
-                height={34}
-              />
-            )}
-          </div>
-          <div className="card-content">
-            <div className="card-top-wrapper">
-              <p className="card-date-difference">
-                {createdAt ? dataStatus : null}
-              </p>
-              {folder && (
-                <img src={kebabImg} alt="star" width={21} height={17} />
-              )}
-            </div>
-            <p className="card-description">{description}</p>
-            <p className="card-date">{date}</p>
-          </div>
-        </section>
-      </Link>
+      <img
+        src={imageSource ? imageSource : defaultImg}
+        className="card-image"
+        alt="card"
+      />
+      {folder && (
+        <img
+          className="card-star-button"
+          src={starImg}
+          alt="star"
+          width={34}
+          height={34}
+        />
+      )}
+      <div className="text-container">
+        <span>{createdAt ? dataStatus : null}</span>
+        <p>{description}</p>
+        <p className="date-number">{date}</p>
+        {folder && <img src={kebabImg} alt="star" width={21} height={17} />}
+      </div>
     </div>
   );
 }

src/components/Folder/FolderCards.js

@@ -1,25 +1,26 @@
 import React from 'react';
 import Card from './Card';
 import { NonLink } from '../../style/styledComponents';
+import { Link } from 'react-router-dom';
 
 export const FolderCards = ({ folder }) => {
+  const isExistFolder = folder && folder.length > 0;
   return (
     <>
-      <div className="content-wrapper">
-        {folder && folder.length >= 1 ? (
-          folder.map(
-            (folderData, index) =>
-              index !== 0 && (
-                <Card
-                  key={folderData.id}
-                  imageSource={folderData.image_source}
-                  createdAt={folderData.created_at}
-                  description={folderData.description}
-                  url={folderData.url}
-                  folder
-                />
-              )
-          )
+      <div className="cards-container cardlist">
+        {isExistFolder ? (
+          folder.map(({ id, image_source, created_at, description, url }) => (
+            <Link to={url} key={id}>
+              <Card
+                key={id}
+                imageSource={image_source}
+                createdAt={created_at}
+                description={description}
+                url={url}
+                folder
+              />
+            </Link>
+          ))
         ) : (
           <NonLink>저장된 링크가 없습니다</NonLink>
         )}

src/components/Folder/FolderCategory.js

@@ -10,29 +10,27 @@ import {
 
 function FolderCategory({ category, currentCategory, handleCategoryButton }) {
   return (
-    <>
-      <TitleWrapper>
-        <CategoryWrapper>
-          {category &&
-            category.map((categoryData) => (
-              <CategoryButton
-                id={categoryData.id}
-                key={categoryData.id}
-                name="folderId"
-                checked={currentCategory === categoryData.name ? true : null}
-                onClick={handleCategoryButton}
-              >
-                {categoryData.name}
-              </CategoryButton>
-            ))}
-        </CategoryWrapper>
+    <TitleWrapper>
+      <CategoryWrapper>
+        {category &&
+          category.map(({ id, name }) => (
+            <CategoryButton
+              id={id}
+              key={id}
+              name="folderId"
+              checked={currentCategory === name ? true : null}
+              onClick={handleCategoryButton}
+            >
+              {name}
+            </CategoryButton>
+          ))}
+      </CategoryWrapper>
 
-        <AddButtonWrapper>
-          <AddButtonText>폴더 추가</AddButtonText>
-          <AddButtonImage />
-        </AddButtonWrapper>
-      </TitleWrapper>
-    </>
+      <AddButtonWrapper>
+        <AddButtonText>폴더 추가</AddButtonText>
+        <AddButtonImage />
+      </AddButtonWrapper>
+    </TitleWrapper>
   );
 }
 

src/components/Folder/FolderContent.js

@@ -7,14 +7,17 @@ import { FolderTitle } from './FolderTitle';
 import { FolderCards } from './FolderCards';
 
 function FolderContent() {
-  const folderCategory = useFetchFolderCategoryData();
+  const [currentCategory, setCurrentCategory] = useState('전체');
 
-  const folderCards = useFetchFolderCardsData(0);
+  const [folderId, setFolderId] = useState(0);
 
-  const [currentCategory, setCurrentCategory] = useState('전체');
+  const folderCategory = useFetchFolderCategoryData();
+
+  const folderCards = useFetchFolderCardsData(folderId);
 
   const handleCategoryButton = (e) => {
     setCurrentCategory(e.target.innerText);
+    setFolderId(e.target.id);
   };
 
   return (
@@ -23,7 +26,7 @@ function FolderContent() {
       {folderCategory ? (
         <>
           <FolderCategory
-            category={[{ name: '전체', id: '0' }, ...folderCategory]}
+            category={[{ name: '전체', id: 0 }, ...folderCategory]}
             currentCategory={currentCategory}
             handleCategoryButton={handleCategoryButton}
           />