[김도현] Week13

dist/App.js

@@ -0,0 +1,5 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+const App = () => {
+    return _jsx(_Fragment, {});
+};
+export default App;

dist/Main.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Shared from "./pages/Shared";
+import Folder from "./pages/Folder";
+import { Home } from "./pages/Home";
+function Main() {
+    return (_jsx(BrowserRouter, { children: _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(Home, {}) }), _jsx(Route, { path: "/shared", element: _jsx(Shared, {}) }), _jsx(Route, { path: "/folder", element: _jsx(Folder, {}) })] }) }));
+}
+export default Main;

dist/api/api.js

@@ -0,0 +1,45 @@
+const BASE_URL = "https://bootcamp-api.codeit.kr/api/";
+export const getFolderInfo = async () => {
+    try {
+        const response = await fetch(`${BASE_URL}sample/folder`);
+        const result = await response.json();
+        return result;
+    }
+    catch (error) {
+        console.log(error);
+    }
+};
+export const getUserInfo = async () => {
+    try {
+        const response = await fetch(`${BASE_URL}sample/user`);
+        const result = await response.json();
+        return result;
+    }
+    catch (error) {
+        console.log(error);
+    }
+};
+export const getFolderList = async () => {
+    try {
+        const response = await fetch(`${BASE_URL}users/1/folders`);
+        const result = await response.json();
+        // console.log(result);
+        return result;
+    }
+    catch (error) {
+        console.log(error);
+    }
+};
+export const getAllLinkData = async (id) => {
+    const url = id
+        ? `${BASE_URL}users/1/folders/${id}`
+        : `${BASE_URL}users/1/links`;
+    try {
+        const response = await fetch(url);
+        const result = await response.json();
+        return result;
+    }
+    catch (error) {
+        console.log(error);
+    }
+};

dist/components/Folder/FolderInput.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { styled } from "styled-components";
+import Link from "../../assets/icons/link.svg";
+import { BlueButton } from "../common/BlueButton";
+import { forwardRef } from "react";
+const FolderInput = forwardRef(({ setIsVisible, $isAddLinkVisible }, ref) => {
+    const onAddLinkButtonClick = () => {
+        setIsVisible("폴더 추가");
+    };
+    return (_jsx(BackGround, { ref: ref, "$isAddLinkVisible": $isAddLinkVisible, children: !$isAddLinkVisible ? (_jsx(BackGroundFixed, { children: _jsxs(InputBoxFixed, { children: [_jsx("img", { src: Link, alt: "LinkIcon" }), _jsx(Input, { placeholder: "\uB9C1\uD06C\uB97C \uCD94\uAC00\uD574 \uBCF4\uC138\uC694." }), _jsx(BlueButton, { width: "80px", height: "auto", padding: "10px 16px", margin: "0px", text: "\uCD94\uAC00\uD558\uAE30", fontSize: "", radius: "8px", onBtnHandle: () => onAddLinkButtonClick() })] }) })) : (_jsxs(InputBox, { "$isAddLinkVisible": $isAddLinkVisible, children: [_jsx("img", { src: Link, alt: "LinkIcon" }), _jsx(Input, { placeholder: "\uB9C1\uD06C\uB97C \uCD94\uAC00\uD574 \uBCF4\uC138\uC694." }), _jsx(BlueButton, { width: "80px", height: "auto", padding: "10px 16px", margin: "0px", text: "\uCD94\uAC00\uD558\uAE30", fontSize: "", radius: "8px", onBtnHandle: () => onAddLinkButtonClick() })] })) }));
+});
+export default FolderInput;
+const BackGround = styled.div `
+  background-color: var(--Grey_100);
+  display: flex;
+  justify-content: center;
+  position: relative;
+`;
+const BackGroundFixed = styled.div `
+  background-color: var(--Grey_100);
+  display: flex;
+  justify-content: center;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+`;
+const InputBox = styled.div `
+  width: 800px;
+  padding: 16px 20px;
+  border-radius: 15px;
+  border: 1px solid var(--Linkbrary-primary-color, #6d6afe);
+  background: var(--Linkbrary-white, #fff);
+  margin: 60px auto 90px;
+  display: flex;
+  flex-direction: row;
+
+  @media (max-width: 1124px) {
+    width: 704px;
+  }
+  @media (max-width: 774px) {
+    width: 325px;
+  }
+`;
+const InputBoxFixed = styled(InputBox) `
+  margin: 24px auto;
+
+  @media (max-width: 360px) {
+    margin: 16px auto;
+  }
+`;
+const Input = styled.input `
+  width: 100%;
+  border: none;
+  margin-left: 12px;
+
+  &:focus {
+    outline: none;
+  }
+
+  &::placeholder {
+    color: #9fa6b2;
+    font-family: Pretendard;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+  }
+
+  @media (max-width: 774px) {
+    &::placeholder {
+      font-size: 14px;
+    }
+  }
+`;

dist/components/Folder/FolderTitle.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import share from "../../assets/icons/share.svg";
+import pen from "../../assets/icons/pen.svg";
+import trash from "../../assets/icons/trash.svg";
+const FolderTitle = ({ titleName, setIsModal }) => {
+    return (_jsxs(Container, { children: [_jsx(Title, { children: titleName }), titleName !== "전체" && (_jsxs(OptionBox, { children: [_jsxs(Option, { onClick: () => {
+                            setIsModal("공유");
+                        }, children: [_jsx(OptionIcon, { src: share }), _jsx(OptionText, { children: "\uACF5\uC720" })] }), _jsxs(Option, { onClick: () => {
+                            setIsModal("이름 변경");
+                        }, children: [_jsx(OptionIcon, { src: pen }), _jsx(OptionText, { children: "\uC774\uB984 \uBCC0\uACBD" })] }), _jsxs(Option, { onClick: () => {
+                            setIsModal("삭제");
+                        }, children: [_jsx(OptionIcon, { src: trash }), _jsx(OptionText, { children: "\uC0AD\uC81C" })] })] }))] }));
+};
+const Container = styled.div `
+  width: 1060px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin: 24px auto;
+
+  @media (max-width: 1124px) {
+    width: 704px;
+  }
+  @media (max-width: 774px) {
+    width: 325px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+    margin: 28px auto 20px;
+  }
+`;
+const Title = styled.span `
+  color: #000;
+  font-family: Pretendard;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  letter-spacing: -0.2px;
+`;
+const OptionBox = styled.div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+`;
+const Option = styled.div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+
+  &:hover {
+    cursor: pointer;
+  }
+`;
+const OptionIcon = styled.img `
+  width: 18px;
+  height: 18px;
+`;
+const OptionText = styled.span `
+  color: #9fa6b2;
+  font-family: Pretendard;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+`;
+export default FolderTitle;

dist/components/Folder/Menus.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { getFolderList } from "../../api/api";
+import GlobalStyle from "../common/GlobalStyle";
+import styled from "styled-components";
+import union from "../../assets/icons/Union.svg";
+import { COLORS } from "../../constants/colors";
+import { useGetPromise } from "../../hooks/uesGetPromise";
+const Menus = ({ changeTitle, changeID, setIsVisible }) => {
+    const listsData = useGetPromise(getFolderList);
+    const lists = listsData?.data ?? [];
+    if (lists[0]) {
+        lists[0].name === "전체" || lists.unshift({ id: 0, name: "전체" });
+    }
+    const initialButtonColors = lists.reduce((colors, list) => {
+        colors[list.name] = COLORS.White;
+        return colors;
+    }, {});
+    const [buttonColors, setButtonColors] = useState(initialButtonColors);
+    const handleClick = async (name, id) => {
+        changeTitle(name);
+        changeID(id);
+        setButtonColors((prevColors) => {
+            return {
+                ...initialButtonColors,
+                [name]: prevColors[name] === COLORS.White ? COLORS.Primary : COLORS.White,
+            };
+        });
+    };
+    return (_jsxs(Container, { children: [_jsx(GlobalStyle, {}), _jsx(ButtonDiv, { children: lists.map((val) => (_jsx(Button, { onClick: () => handleClick(val.name, val.id), color: buttonColors[val.name], id: val.name, children: val.name }, val.id))) }), _jsxs(AddFolderDiv, { onClick: () => setIsVisible("폴더 추가"), children: [_jsx(AddFolder, { children: "\uD3F4\uB354 \uCD94\uAC00" }), _jsx("img", { src: union, alt: "unionIcon" })] })] }));
+};
+const Container = styled.div `
+  width: 1080px;
+  margin: 0px auto;
+  display: flex;
+  padding: 8px 12px;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+
+  @media (max-width: 1124px) {
+    width: 704px;
+  }
+  @media (max-width: 774px) {
+    width: 325px;
+    padding: 0px;
+  }
+`;
+const ButtonDiv = styled.div `
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  flex-wrap: wrap;
+  gap: 12px 8px;
+`;
+const Button = styled.button `
+  min-width: max-content;
+  padding: 8px 12px;
+  border-radius: 5px;
+  border: 1px solid ${COLORS.Primary};
+  background-color: ${({ color }) => color || COLORS.White};
+  color: ${({ color = COLORS.White }) => color === COLORS.White ? "#000000" : "#FFFFFF"};
+  transition: all 0.3s ease-in-out;
+
+  &:hover {
+    cursor: pointer;
+  }
+`;
+const AddFolderDiv = styled.div `
+  margin: 8px;
+  display: flex;
+  flex-direction: row;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  @media (max-width: 774px) {
+    display: none;
+  }
+`;
+const AddFolder = styled.span `
+  color: #6d6afe;
+  text-align: center;
+  font-family: Pretendard;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: -0.3px;
+  margin-right: 4px;
+`;
+export default Menus;

dist/components/common/BlueButton.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { styled } from "styled-components";
+import { COLORS } from "../../constants/colors";
+export const BlueButton = ({ text, width, height, margin, padding, fontSize, radius, onBtnHandle, }) => {
+    return (_jsx(Button, { width: width, height: height, margin: margin, padding: padding, color: COLORS.White, fontSize: fontSize, radius: radius, onClick: () => (onBtnHandle ? onBtnHandle() : null), children: text }));
+};
+const Button = styled.button `
+  display: block;
+  width: ${({ width }) => width || "auto"};
+  min-width: max-content;
+  height: ${({ height }) => height || "auto"};
+  border: 0px;
+  border-radius: ${({ radius }) => radius || "0px"};
+  margin: ${({ margin }) => margin || "auto"};
+  padding: ${({ padding }) => padding || "auto"};
+  background: linear-gradient(91deg, #6d6afe 0.12%, #6ae3fe 101.84%);
+  cursor: pointer;
+
+  color: ${({ color }) => color};
+  font-size: ${({ fontSize }) => fontSize || "14px"};
+  font-weight: 600;
+  line-height: 21.6px;
+`;