+
);
}
diff --git a/src/api/getUserFolder.js b/src/api/getUserFolder.js
index f0ac80b22..e58b22f50 100644
--- a/src/api/getUserFolder.js
+++ b/src/api/getUserFolder.js
@@ -10,3 +10,40 @@ export const getUserFolder = async () => {
const { folder } = await response.json();
return { folder };
};
+
+export const getFolderList = async () => {
+ const response = await fetch(`${BASE_URL}/users/1/folders`, {
+ method: "GET",
+ });
+ if (!response.ok) {
+ throw new Error("폴더정보 불러오기 실패");
+ }
+ const folder = await response.json();
+ return folder;
+};
+
+export const getAllFolderList = async () => {
+ const response = await fetch(`${BASE_URL}/users/1/links`, {
+ method: "GET",
+ });
+ if (!response.ok) {
+ throw new Error("폴더정보 불러오기 실패");
+ }
+ const folder = await response.json();
+ return folder;
+};
+
+export const getFolderListById = async (folderId) => {
+ const response = await fetch(
+ `${BASE_URL}/users/1/links?folderId=${folderId}`,
+ {
+ method: "GET",
+ }
+ );
+ if (!response.ok) {
+ throw new Error("폴더정보 불러오기 실패");
+ }
+ const folder = await response.json();
+ console.log("ddddddddddd:" + { folder });
+ return folder;
+};
diff --git a/src/api/useFolderAsync.js b/src/api/useFolderAsync.js
new file mode 100644
index 000000000..3be8c0e70
--- /dev/null
+++ b/src/api/useFolderAsync.js
@@ -0,0 +1,31 @@
+import { useState, useEffect } from "react";
+import { getFolderList, getAllFolderList } from "./getUserFolder";
+const BASE_URL = "https://bootcamp-api.codeit.kr/api";
+
+export function useFolderAsync() {
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [folderList, setFolderList] = useState(null);
+ const [allFolderList, setAllFolderList] = useState(null);
+
+ useEffect(() => {
+ const fetchData = async () => {
+ try {
+ const folderList = await getFolderList();
+ const allFolderList = await getAllFolderList();
+
+ setFolderList(folderList);
+ setAllFolderList(allFolderList);
+ setLoading(false); // 로딩 상태 변경
+ } catch (error) {
+ // 에러 발생 시 에러 상태 업데이트
+ setError(error);
+ setLoading(false); // 로딩 상태 변경
+ }
+ };
+
+ fetchData(); // fetchData 함수 호출
+ }, []);
+
+ return { folderList, allFolderList, loading, error }; // 상태를 반환
+}
diff --git a/src/colors.css b/src/colors.css
index f62a33fcb..304fc9f4b 100644
--- a/src/colors.css
+++ b/src/colors.css
@@ -16,3 +16,38 @@
--text-content-gray: #666666;
--text-content-black: #333333;
}
+
+.text-gradient-yellow-to-sky {
+ background-image: linear-gradient(to right, #ffd88b, #6fbaff);
+ background-clip: text;
+ -webkit-background-clip: text;
+ color: transparent;
+}
+
+.text-gradient-blue-to-blue {
+ background-image: linear-gradient(to right, #528885, #6d7ccd);
+ background-clip: text;
+ -webkit-background-clip: text;
+ color: transparent;
+}
+
+.text-gradient-green-to-sky {
+ background-image: linear-gradient(to right, #68e8f9, #fe578f);
+ background-clip: text;
+ -webkit-background-clip: text;
+ color: transparent;
+}
+
+.text-gradient-purple-to-pink {
+ background-image: linear-gradient(to right, #6d6afe, #ff9f9f);
+ background-clip: text;
+ -webkit-background-clip: text;
+ color: transparent;
+}
+
+.text-gradient-pink-to-sky {
+ background-image: linear-gradient(to right, #fe8a8a, #a4ceff);
+ background-clip: text;
+ -webkit-background-clip: text;
+ color: transparent;
+}
diff --git a/src/common.css b/src/common.css
new file mode 100644
index 000000000..152735d1d
--- /dev/null
+++ b/src/common.css
@@ -0,0 +1,10 @@
+.btn {
+ background-image: linear-gradient(to right, #6d6afe, #6ae3fe);
+ border-radius: 8px;
+ color: #f5f5f5;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: none;
+ cursor: pointer;
+}
diff --git a/src/components/FolderCardList.js b/src/components/FolderCardList.js
new file mode 100644
index 000000000..902eaffb7
--- /dev/null
+++ b/src/components/FolderCardList.js
@@ -0,0 +1,61 @@
+import "../CardList/CardList.css";
+import { useState, useEffect } from "react";
+import FolderCardListItem from "./FolderCardListItem";
+
+export const FolderCardList = ({ folderId }) => {
+ const [folderInfo, setFolderInfo] = useState(null); // 폴더 정보 상태
+ const BASE_URL = "https://bootcamp-api.codeit.kr/api";
+
+ useEffect(() => {
+ const getFolderListById = async () => {
+ try {
+ let response;
+ if (folderId) {
+ response = await fetch(
+ `${BASE_URL}/users/1/links?folderId=${folderId}`
+ );
+ } else {
+ response = await fetch(`${BASE_URL}/users/1/links`);
+ }
+
+ if (!response.ok) {
+ throw new Error("폴더 정보를 가져오는데 실패했습니다.");
+ }
+
+ const folderData = await response.json();
+ setFolderInfo(folderData); // 폴더 정보 상태 업데이트
+ } catch (error) {
+ console.error(error);
+ setFolderInfo([]); // 에러 발생 시 폴더 정보를 빈 배열로 초기화
+ }
+ };
+ // 폴더 정보 가져오는 함수 호출
+ getFolderListById();
+ }, [folderId]); // folderId가 변경될 때마다 호출
+
+ useEffect(() => {
+ if (folderInfo) {
+ console.log("폴더 정보:", folderInfo);
+ }
+ }, [folderInfo]);
+
+ if (!folderInfo) {
+ return
로딩 중...
;
+ }
+
+ if (folderInfo.data && Array.isArray(folderInfo.data)) {
+ // 폴더 정보가 객체이고 그 안에 data 필드가 있는 경우, data를 사용하여 렌더링합니다.
+ return (
+
+ {folderInfo.data.map((item, index) => (
+
+
+
+ ))}
+
+ );
+ }
+
+ // 폴더 정보가 없거나 잘못된 형태인 경우 에러를 표시합니다.
+ return
폴더 정보를 불러오는 중 문제가 발생했습니다.
;
+};
diff --git a/src/components/FolderCardListItem.js b/src/components/FolderCardListItem.js
new file mode 100644
index 000000000..5acc80ff5
--- /dev/null
+++ b/src/components/FolderCardListItem.js
@@ -0,0 +1,45 @@
+import format from "date-fns/format";
+import { getElapsedTime } from "../util/getClapsedTime";
+import { useState } from "react";
+import KebabButton from "./KebabButton";
+
+function FolderCardListItem({ item }) {
+ const DEFAULT_IMAGE = "../assets/card-default.png";
+ const createdAd = getElapsedTime(item.created_at);
+ const [isHovered, setIsHovered] = useState(false);
+ const linkUrl = item.url;
+ const handleMouseOver = () => setIsHovered(true);
+ const handleMouseLeave = () => setIsHovered(false);
+
+ const handleDelete = () => {};
+
+ const handleAddToFolder = () => {};
+
+ return (
+
+
+
+
+
+
{createdAd}
+
{item.description}
+
+ {format(new Date(item.created_at), "yyyy. MM. dd")}
+
+
+
+ );
+}
+
+export default FolderCardListItem;
diff --git a/src/components/FolderCardListItemStyled.js b/src/components/FolderCardListItemStyled.js
new file mode 100644
index 000000000..fccbdd411
--- /dev/null
+++ b/src/components/FolderCardListItemStyled.js
@@ -0,0 +1,29 @@
+import styled from "styled-components";
+
+export const KebabButton = styled.button`
+ background-image: url("../assets/kebab.png");
+ width: 1.4rem;
+ height: 1.4rem;
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-position: center;
+ position: absolute;
+ top: 13%;
+ right: 7%;
+ z-index: 999;
+`;
+
+export const KebabContainer = styled.div`
+ position: relative;
+`;
+
+export const KebabMenu = styled.div`
+ position: absolute;
+ top: 100%;
+ right: 0;
+ display: none;
+ background-color: #fff;
+ border: 1px solid #ccc;
+ padding: 5px;
+ z-index: 1;
+`;
diff --git a/src/components/FolderList.css b/src/components/FolderList.css
new file mode 100644
index 000000000..01d42449b
--- /dev/null
+++ b/src/components/FolderList.css
@@ -0,0 +1,39 @@
+.FolderList_container {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ padding: 0 32px;
+ row-gap: 32px;
+ align-items: flex-start;
+}
+
+.FolderList_list-container {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ row-gap: 12px;
+}
+
+.FolderList_list_menu-container {
+ display: flex;
+ gap: 8px;
+ column-gap: 8px;
+ align-items: center;
+ flex-wrap: wrap;
+}
+
+.FolderList-button {
+ border-radius: 5px;
+ padding: 6px 10px;
+ border: 1px solid #6d6afe;
+ font-size: 16px;
+ text-align: center;
+ height: 37px;
+ transition: all 0.5s ease-in-out;
+ display: flex;
+ align-items: center;
+}
+
+.box {
+ position: relative;
+}
diff --git a/src/components/FolderList.js b/src/components/FolderList.js
new file mode 100644
index 000000000..5d96d67f8
--- /dev/null
+++ b/src/components/FolderList.js
@@ -0,0 +1,50 @@
+import { useState, useEffect } from "react";
+import SearchBar from "../SearchBar/SearchBar";
+import { useFolderAsync } from "../api/useFolderAsync";
+import FolderListMenu from "./FolderListMenu";
+import "./FolderList.css";
+import { CardList } from "../CardList/CardList";
+import { FolderCardList } from "./FolderCardList";
+function FolderList() {
+ const { folderList, allFolderList, loading, error } = useFolderAsync();
+ const [selectedFolder, setSelectedFolder] = useState(null);
+ const [curFolder, setCurFolder] = useState(null);
+ const [folderId, setFolderId] = useState(null);
+
+ const handleFolderClick = (folder) => {
+ setSelectedFolder(folder);
+ if (folder) {
+ setFolderId(folder.id);
+ } else {
+ setFolderId(null);
+ }
+ };
+
+ useEffect(() => {
+ console.log(selectedFolder);
+ }, [selectedFolder][folderId]);
+
+ return (
+
+
+
+
+
{selectedFolder ? selectedFolder.name : "전체"}
+ {selectedFolder && selectedFolder.name !== "전체" && (
+ <>
+
공유
+
이름 변경
+
삭제
+
+ )}
+
+
+
+ );
+}
+
+export default FolderList;
diff --git a/src/components/FolderListMenu.js b/src/components/FolderListMenu.js
new file mode 100644
index 000000000..b28506ba9
--- /dev/null
+++ b/src/components/FolderListMenu.js
@@ -0,0 +1,37 @@
+import React from "react";
+
+function FolderListMenu({ folderList, onFolderClick, selectedFolder }) {
+ const handleMenuButtonClick = (folder) => {
+ onFolderClick(folder);
+ };
+
+ return (
+ <>
+ {folderList && folderList.data && folderList.data.length > 0 ? (
+
+
+ {folderList &&
+ folderList.data &&
+ folderList.data.map((folder) => (
+
+ ))}
+
+ ) : (
+
저장된 링크가 없습니다.
+ )}
+
+ );
+}
+
+export default FolderListMenu;
diff --git a/src/components/InputAddLink.css b/src/components/InputAddLink.css
new file mode 100644
index 000000000..dda8395cb
--- /dev/null
+++ b/src/components/InputAddLink.css
@@ -0,0 +1,57 @@
+.InputAddLink-form {
+ background-color: var(--light-blue);
+ height: 117px;
+ width: 100%;
+ padding: 24px 32px 40px 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.InputAddLink-form-container {
+ position: relative;
+}
+
+.LinkIcon {
+ position: absolute;
+ top: 36%;
+ left: 5%;
+}
+
+.InputAddLink-input {
+ width: 325px;
+ height: 53px;
+ border-radius: 15px;
+ padding-left: 13%;
+ padding-right: 30%;
+ border: 1px solid blue;
+}
+
+.InputAddLink-btnAdd {
+ width: 80px;
+ height: 37px;
+ border-radius: 5px;
+ position: absolute;
+ top: 15%;
+ right: 3%;
+}
+
+@media (min-width: 768px) {
+ .LinkIcon {
+ left: 3%;
+ }
+ .InputAddLink-input {
+ width: 704px;
+ padding-left: 8%;
+ padding-right: 19%;
+ }
+ .InputAddLink-btnAdd {
+ right: 1%;
+ }
+}
+
+@media (min-width: 1124px) {
+ .InputAddLink-input {
+ width: 760px;
+ }
+}
diff --git a/src/components/InputAddLink.js b/src/components/InputAddLink.js
new file mode 100644
index 000000000..ca105f4d8
--- /dev/null
+++ b/src/components/InputAddLink.js
@@ -0,0 +1,19 @@
+import "./InputAddLink.css";
+import { LINK_ICON } from "./LinkIcon";
+
+function InputAddLink() {
+ return (
+
+ );
+}
+
+export default InputAddLink;
diff --git a/src/components/KebabButton.js b/src/components/KebabButton.js
new file mode 100644
index 000000000..7fc033572
--- /dev/null
+++ b/src/components/KebabButton.js
@@ -0,0 +1,72 @@
+import { useState } from "react";
+import * as S from "./FolderCardListItemStyled";
+import styled from "styled-components";
+import DeleteModal from "./modal/DeleteModal";
+
+function KebabButton({ onAddToFolder, linkUrl }) {
+ const [isMenuOpen, setIsMenuOpen] = useState(false);
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const togleMenu = (event) => {
+ event.stopPropagation(); // 이벤트 전파 중단
+ setIsMenuOpen(!isMenuOpen);
+ };
+
+ const handleDelete = () => {
+ setIsMenuOpen(false);
+ setIsModalOpen(true);
+ };
+
+ const handleModalClose = () => {
+ setIsModalOpen(false);
+ };
+
+ return (
+
+
+ {isMenuOpen && (
+
+ 삭제하기
+
+ 폴더에 추가
+
+
+ )}
+ {isModalOpen && (
+
+ )}
+
+ );
+}
+
+const S_KebabContainer = styled.div`
+ position: relative;
+`;
+
+const S_KebabMenu = styled.div`
+ display: flex;
+ flex-direction: column;
+ width: 100px;
+ height: 64px;
+ box-shadow: 0 0.5rem 2.5rem 0 rgba(0, 0, 0, 0.08);
+ position: absolute;
+ top: calc(100% + 20px); /* 메뉴를 버튼 아래에 위치하고 약간의 여백을 둠 */
+ right: -20%;
+ background-color: white;
+ text-align: center;
+ font-size: 14px;
+`;
+const S_BtnDelete = styled.div`
+ display: flex;
+ height: 32px;
+ align-items: center;
+ justify-content: center;
+`;
+const S_BtnAddToFolder = styled.div`
+ display: flex;
+ height: 32px;
+ align-items: center;
+ justify-content: center;
+ background-color: #e7effb;
+ color: var(--primary);
+`;
+export default KebabButton;
diff --git a/src/components/LinkIcon.js b/src/components/LinkIcon.js
new file mode 100644
index 000000000..c0bf24a4f
--- /dev/null
+++ b/src/components/LinkIcon.js
@@ -0,0 +1 @@
+export const LINK_ICON = "../assets/link.png";
diff --git a/src/components/LinkList.js b/src/components/LinkList.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/Test.js b/src/components/Test.js
new file mode 100644
index 000000000..4c93da411
--- /dev/null
+++ b/src/components/Test.js
@@ -0,0 +1,51 @@
+import "../CardList/CardList.css";
+import { useFolderAsync } from "../api/useFolderAsync";
+// import FolderItem from "../CardList/FolderItem";
+import { getFolderListById } from "../api/getUserFolder";
+import { useState, useEffect } from "react";
+export const FolderCardList = ({ folderId }) => {
+ const [folderInfo, setFolderInfo] = useState({}); // 폴더 정보 상태
+ const BASE_URL = "https://bootcamp-api.codeit.kr/api";
+
+ useEffect(() => {
+ const getFolderListById = async () => {
+ try {
+ let response;
+ if (folderId) {
+ response = await fetch(
+ `${BASE_URL}/users/1/links?folderId=${folderId}`
+ );
+ } else {
+ response = await fetch(`${BASE_URL}/users/1/links`);
+ }
+
+ if (!response.ok) {
+ throw new Error("폴더 정보를 가져오는데 실패했습니다.");
+ }
+
+ const folderData = await response.json();
+ setFolderInfo({ folderData }); // 폴더 정보 상태 업데이트
+ } catch (error) {
+ console.error(error);
+ }
+ };
+ // 폴더 정보 가져오는 함수 호출
+ getFolderListById();
+ }, [folderId]); // folderId가 변경될 때마다 호출
+
+ useEffect(() => {
+ console.log("폴더 정보:", folderInfo.folderData);
+ }, [folderInfo]);
+ return (
+
+ {folderInfo.folderData &&
+ folderInfo.folderData.map((item, index) => (
+
+
{item.title}
+
{item.description}
+ {/* 다른 정보들을 렌더링하는 코드를 추가하세요 */}
+
+ ))}
+
+ );
+};
diff --git a/src/components/Testt.js b/src/components/Testt.js
new file mode 100644
index 000000000..b8edd03cd
--- /dev/null
+++ b/src/components/Testt.js
@@ -0,0 +1,49 @@
+import React from "react";
+
+function Testt({ folderList, onFolderClick }) {
+ const handleMenuButtonClick = (folderId) => {
+ onFolderClick(folderId);
+ };
+
+ return (
+ <>
+ {folderList && folderList.data && folderList.data.length > 0 ? (
+
+
+ {folderList.data.map((folder) => (
+
+ ))}
+
+ ) : (
+
저장된 폴더가 없습니다.
+ )}
+
+ );
+}
+
+// if (Array.isArray(folderInfo)) {
+// // 폴더 정보가 배열인 경우, 바로 렌더링합니다.
+// return (
+//
+// {folderInfo.map((item, index) => (
+//
+//
{item.title}
+//
{item.description}
+//
+// ))}
+//
+// );
+// }
+
+export default Testt;
diff --git a/src/components/modal/DeleteModal.js b/src/components/modal/DeleteModal.js
new file mode 100644
index 000000000..9fb0be58e
--- /dev/null
+++ b/src/components/modal/DeleteModal.js
@@ -0,0 +1,22 @@
+import * as S from "./DeleteModalStyled";
+
+function DeleteModal({ linkUrl, onClose }) {
+ const handleModalBackgroundClick = () => {
+ onClose();
+ };
+ return (
+ <>
+
+
+
+ 링크 삭제
+
+ {linkUrl}
+
+ 삭제하기
+
+
+ );
+}
+
+export default DeleteModal;
diff --git a/src/components/modal/DeleteModalStyled.js b/src/components/modal/DeleteModalStyled.js
new file mode 100644
index 000000000..a73802f19
--- /dev/null
+++ b/src/components/modal/DeleteModalStyled.js
@@ -0,0 +1,64 @@
+import styled from "styled-components";
+
+export const ModalOverlay = styled.div`
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.4); /* 배경 흐림 효과 */
+ z-index: 1000; /* 다른 요소들보다 위에 위치 */
+`;
+
+export const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 320px;
+ height: 193px;
+ background-color: white;
+ border-radius: 15px;
+ padding: 32px 40px;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 1001;
+ gap: 5px;
+`;
+
+export const EixtButton = styled.button`
+ background-image: url("../../assets/Group19.png");
+`;
+
+export const Title = styled.p`
+ font-size: 20px;
+ font-weight: 700;
+`;
+
+export const urlWrapper = styled.div`
+ display: flex;
+ flex-direction: column; /* 세로 방향으로 아이템을 정렬 */
+ width: 100%;
+ overflow-x: hidden; /* 텍스트가 넘치는 부분을 숨김 */
+ overflow: hidden;
+ justify-content: center;
+ text-align: center;
+`;
+
+export const LinkUrl = styled.p`
+ color: var(--gray60);
+ font-size: 14px;
+ white-space: nowrap; /* 텍스트가 한 줄에만 표시되도록 함 */
+ overflow-y: visible; /* 텍스트가 상하로 자유롭게 표시되도록 함 */
+`;
+
+export const DeleteButton = styled.button`
+ background-color: var(--red);
+ color: white;
+ width: 280px;
+ height: 51px;
+ border-radius: 8px;
+ padding: 16px 20px;
+ margin-top: 25px;
+`;
diff --git a/src/global.css b/src/global.css
index f20ab4ae7..627ffe84d 100644
--- a/src/global.css
+++ b/src/global.css
@@ -1,2 +1,3 @@
@import "./colors.css";
@import "./reset.css";
+@import "./common.css";
diff --git a/src/page/Folder.js b/src/page/Folder.js
new file mode 100644
index 000000000..b5ef27895
--- /dev/null
+++ b/src/page/Folder.js
@@ -0,0 +1,17 @@
+import Footer from "../Footer/Footer";
+import NavigationBar from "../NavigationBar/NavigationBar";
+import FolderList from "../components/FolderList";
+import InputAddLink from "../components/InputAddLink";
+
+function Folder() {
+ return (
+ <>
+
+
+
+
+
+ );
+}
+
+export default Folder;
diff --git a/src/page/Folder.module.css b/src/page/Folder.module.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/page/Shared.js b/src/page/Shared.js
new file mode 100644
index 000000000..05de4874e
--- /dev/null
+++ b/src/page/Shared.js
@@ -0,0 +1,18 @@
+import "../App.css";
+import NavigationBar from "../NavigationBar/NavigationBar.js";
+import Profile from "../Profile/Profile.js";
+import { CardList } from "../CardList/CardList.js";
+import Footer from "../Footer/Footer.js";
+
+function Shared() {
+ return (
+ <>
+
+
+
+
+
+ );
+}
+
+export default Shared;