Merge pull request #366 from sj0724/part2-박상준-week11

[박상준] Week11

public/5-Weekly-Mission.code-workspace

@@ -0,0 +1,8 @@
+{
+  "folders": [
+	{
+		"path": ".."
+	}
+],
+  "settings": {}
+}

src/App.css

@@ -1,5 +1,5 @@
-@import url("./utils/color.css");
-@import url("./utils/font.css");
+@import url('./utils/color.css');
+@import url('./utils/font.css');
 
 * {
   box-sizing: border-box;

src/App.jsx

@@ -1,10 +1,10 @@
-import { BrowserRouter, Route, Routes } from "react-router-dom";
-import Shared from "./pages/Shared/Shared";
-import Main from "./pages/Main/Main";
-import Layout from "./components/Layout";
-import Folder from "./pages/Folder/Folder";
-import "./App.css";
-import UserContext from "./contexts/UserContext";
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import Shared from './pages/Shared/Shared';
+import Main from './pages/Main/Main';
+import Layout from './components/Layout';
+import Folder from './pages/Folder/Folder';
+import './App.css';
+import UserContext from './contexts/UserContext';
 
 function App() {
   const userId = 1;
@@ -15,9 +15,9 @@ function App() {
         <Routes>
           <Route path="/" element={<Layout />}>
             <Route path="/" element={<Main />} />
-            <Route path="shared" element={<Shared />} />
+            <Route path="/shared" element={<Shared />} />
           </Route>
-          <Route path="folder" element={<Folder />} />
+          <Route path="/folder/:id" element={<Folder />} />
         </Routes>
       </UserContext.Provider>
     </BrowserRouter>

src/api/api.js

@@ -1,12 +1,16 @@
-import axios from "../instance/axiosInstance";
+import axios from '../instance/axiosInstance';
 
 export async function getSampleUser() {
-  const { data } = await axios.get("/sample/user");
+  const { data } = await axios.get('/sample/user');
   return data;
 }
 
 export async function getSampleFolder() {
-  const { data } = await axios.get("/sample/folder");
+  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;
 }
 
@@ -15,8 +19,8 @@ export async function getFolder(id) {
   return data;
 }
 
-export async function getFolderList({ folderId = "", userId }) {
-  const query = `/${userId}/links?folderId=${folderId}`;
+export async function getFolderList(folderId, id) {
+  const query = `/${id}/links?folderId=${folderId}`;
   const { data } = await axios.get(`/users${query}`);
   return data;
 }

src/components/Card/Card.jsx

@@ -1,13 +1,15 @@
-import { useEffect, useState } from "react";
-import { changeDate, calculateDate } from "../../utils/util";
-import kebab from "../../assets/kebab.svg";
-import star from "../../assets/star.svg";
-import * as S from "./Card.styled";
+import { useEffect, useState } from 'react';
+import { changeDate, calculateDate } from '../../utils/util';
+import kebab from '../../assets/kebab.svg';
+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 [fullDate, setFullDate] = useState('');
+  const [imageUrl] = useState(item.image_source);
+  const [kebabView, setKebaView] = useState(false);
 
   const { url, description } = item;
 
@@ -26,28 +28,29 @@ 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 href={url} target="_blank" rel="noreferrer">
+    <S.ItemCard>
       <S.StarIcon src={star} alt="starIcon" />
       {imageUrl ? (
         <S.ItemImg image={imageUrl} alt="itemImage" />
       ) : (
         <S.EmptyImg>이미지가 없습니다.</S.EmptyImg>
       )}
       <S.ItemInfo>
-        <S.KebabIcon src={kebab} alt="kebabIcon" />
+        <S.KebabIcon
+          src={kebab}
+          alt="kebabIcon"
+          onClick={() => setKebaView(!kebabView)}
+        />
         <S.ItemDate>{createdText}</S.ItemDate>
-        <S.ItemDescription>{description ? description : url}</S.ItemDescription>
+        <S.ItemDescription>
+          <a href={url} target="_blank" rel="noreferrer">
+            {description ? description : url}
+          </a>
+        </S.ItemDescription>
         <S.ItemFullDate>{fullDate}</S.ItemFullDate>
       </S.ItemInfo>
+      {kebabView && <KebabMenu toggleModal={toggleModal} item={item} />}
     </S.ItemCard>
   );
 }

src/components/Card/Card.styled.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 
 export const EmptyImg = styled.div`
   height: 100%;
@@ -22,7 +22,7 @@ export const ItemImg = styled.div`
   }
 `;
 
-export const ItemCard = styled.a`
+export const ItemCard = styled.div`
   width: 340px;
   height: 334px;
   display: flex;
@@ -63,6 +63,7 @@ export const ItemInfo = styled.div`
 `;
 
 export const KebabIcon = styled.img`
+  cursor: pointer;
   width: 21px;
   height: 17px;
   flex-shrink: 0;
@@ -80,6 +81,11 @@ export const ItemDescription = styled.p`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+
+  a {
+    text-decoration: none;
+    color: #000;
+  }
 `;
 
 export const ItemFullDate = styled.p`

src/components/ContentsContainer.jsx

@@ -1,23 +1,24 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 
 const Container = styled.div`
   gap: 20px;
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: ${(props) =>
+    props.empty > 0 ? 'repeat(3, 1fr)' : 'none'};
   margin: 0 auto;
   position: relative;
 
   @media (max-width: 1199px) {
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: ${(props) => (props.empty > 0 ? '1fr 1fr' : '1fr')};
   }
 
   @media (max-width: 767px) {
     grid-template-columns: 1fr;
   }
 `;
 
-function ContentsContainer({ children }) {
-  return <Container>{children}</Container>;
+function ContentsContainer({ children, content }) {
+  return <Container empty={content}>{children}</Container>;
 }
 
 export default ContentsContainer;

src/components/FolderButton/FolderButton.jsx

@@ -1,4 +1,4 @@
-import * as S from "./FolderButton.styled";
+import * as S from './FolderButton.styled';
 
 function FolderButton({
   item,
@@ -9,19 +9,14 @@ function FolderButton({
   index,
 }) {
   const changeFolder = () => {
-    if (!item) {
-      setFolderId("");
-      setFolderName("");
-    } else {
-      setFolderId(item.id);
-      setFolderName(item.name);
-    }
+    setFolderId(item.id);
+    setFolderName(item.name);
     handleMenuClick(index);
   };
 
   return (
     <S.FolderName onClick={changeFolder} $select={isSelected}>
-      {item ? item.name : "전체"}
+      {item.name}
     </S.FolderName>
   );
 }

src/components/FolderButton/FolderButton.styled.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 
 export const FolderName = styled.span`
   display: flex;
@@ -7,11 +7,12 @@ export const FolderName = styled.span`
   padding: 8px 12px;
   border-radius: 5px;
   border: 1px solid var(--Primary);
-  background-color: ${(props) => (props.$select ? "var(--Primary)" : "#fff")};
+  background-color: ${(props) => (props.$select ? 'var(--Primary)' : '#fff')};
   cursor: pointer;
   height: 35px;
   font-size: 1rem;
   white-space: nowrap;
+  color: ${(props) => (props.$select ? '#fff' : '#000')};
 
   @media (max-width: 768px) {
     font-size: 1.6rem;

src/components/FolderButtonContainer/FolderButtonContainer.jsx

@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import * as S from './FolderButtonContainer.styled';
+import FolderButton from '../FolderButton/FolderButton';
+
+function FolderButtonContainer({
+  link,
+  setFolderName,
+  setFolderId,
+  toggleModal,
+}) {
+  const [linkSelected, setLinkSelected] = useState(false);
+  const [totalBtn, setTotalBtn] = useState(true);
+
+  const handleMenuClick = (index) => {
+    const booleanArr = [...link].fill(false);
+    booleanArr[index] = true;
+    setLinkSelected(booleanArr);
+    setTotalBtn(false);
+  };
+
+  const setTotal = () => {
+    const totalArr = [...link].fill(false);
+    setLinkSelected(totalArr);
+    setFolderId('');
+    setFolderName('');
+    setTotalBtn(true);
+  };
+
+  return (
+    <S.FolderMenu>
+      <S.FolderButtons>
+        <S.TotalFolderButton onClick={setTotal} $select={totalBtn}>
+          전체
+        </S.TotalFolderButton>
+        {link
+          ? link.map((item, index) => (
+              <FolderButton
+                item={item}
+                key={item.name}
+                setFolderId={setFolderId}
+                setFolderName={setFolderName}
+                isSelected={linkSelected[index]}
+                handleMenuClick={handleMenuClick}
+                index={index}
+              />
+            ))
+          : null}
+      </S.FolderButtons>
+      <S.AddFolderButton onClick={() => toggleModal('addFolder')}>
+        폴더 추가
+        <S.PlusIcon />
+      </S.AddFolderButton>
+    </S.FolderMenu>
+  );
+}
+
+export default FolderButtonContainer;