Merge pull request #368 from bomin0830/part2-김보민-week11

[김보민] week11

package.json

@@ -6,7 +6,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",

src/components/ErrorComponent/index.js

@@ -0,0 +1 @@
+export * from "./ErrorComponent";

src/components/FolderInfo/index.js

@@ -0,0 +1 @@
+export * from "./FolderInfo";

src/components/FolderTitle/FolderTitle.css

@@ -0,0 +1,18 @@
+.folderTitle-wrapper {
+  display: flex;
+  justify-content: space-between;
+}
+
+.title-button-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+}
+
+.title-button-wrapper p {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+}

src/components/FolderTitle/FolderTitle.js

@@ -0,0 +1,67 @@
+import { useState } from "react";
+import { ModalLayout } from "../ModalLayout";
+import "./FolderTitle.css";
+
+export function FolderTitle({ name }) {
+  const [isOpen, setIsOpen] = useState({
+    share: false,
+    delete: false,
+    nameChange: false,
+  });
+
+  const toggleHandler = (state) => {
+    setIsOpen((prev) => ({
+      ...prev,
+      [state]: !prev[state],
+    }));
+  };
+
+  console.log(isOpen.share);
+  return (
+    <>
+      <div className="folderTitle-wrapper">
+        <div className="folder-name">{name}</div>
+        <div className="title-button-wrapper">
+          <p onClick={() => toggleHandler("share")}>
+            <img src="images/share.svg" alt="share-button"></img>공유
+          </p>
+          <p onClick={() => toggleHandler("nameChange")}>
+            <img src="images/pen.svg" alt="nameChange-button"></img>이름 변경
+          </p>
+          <p onClick={() => toggleHandler("delete")}>
+            <img src="images/Group 36.svg" alt="delete-button"></img>삭제
+          </p>
+        </div>
+      </div>
+      {isOpen.share && (
+        <ModalLayout
+          title="폴더 공유"
+          description={name}
+          toggleHandler={() => toggleHandler("share")}
+        >
+          폴더 공유
+        </ModalLayout>
+      )}
+      {isOpen.delete && (
+        <ModalLayout
+          title="폴더 삭제"
+          description={name}
+          toggleHandler={() => toggleHandler("delete")}
+        >
+          <div className="button delete">삭제하기</div>
+        </ModalLayout>
+      )}
+      {isOpen.nameChange && (
+        <ModalLayout
+          title="폴더 이름 변경"
+          toggleHandler={() => toggleHandler("nameChange")}
+        >
+          <div className="modal-contents">
+            <input></input>
+            <div className="add button">변경하기</div>
+          </div>
+        </ModalLayout>
+      )}
+    </>
+  );
+}

src/components/FolderTitle/index.js

@@ -0,0 +1 @@
+export * from "./FolderTitle";

src/components/Footer/index.js

@@ -0,0 +1 @@
+export * from "./Footer";

src/components/GlobalStyles.js

@@ -1,4 +1,4 @@
-import { createGlobalStyle } from 'styled-components';
+import { createGlobalStyle } from "styled-components";
 
 const GlobalStyles = createGlobalStyle`
   html, body, div, span, applet, object, iframe,
@@ -60,7 +60,11 @@ const GlobalStyles = createGlobalStyle`
     border-width: 0;
     border-style: none;
     border-color: transparent;
+  }
+  * {
+    box-sizing: border-box;
+  }
 }
 `;
 
-export default GlobalStyles;
+export default GlobalStyles;

src/components/Header/Header.js

@@ -0,0 +1,24 @@
+import "./Header.css";
+
+export function Header({ user }) {
+  return (
+    <header className="header">
+      <div className="header-contents">
+        <a href="/">
+          <img src="images/logo.svg" alt="linklabrary로고" />
+        </a>
+        <div className="user-container">
+          <div className="icon">
+            <img src="images/Ellipse21.svg" alt="myicon"></img>
+            <img
+              className="profile"
+              src="images/myprofile.png"
+              alt="myprofile"
+            ></img>
+          </div>
+          <p>{user.email ?? "로그인"}</p>
+        </div>
+      </div>
+    </header>
+  );
+}

src/components/Header/index.js

@@ -0,0 +1 @@
+export * from "./Header";

src/components/LinkInput/LinkInput.css

@@ -0,0 +1,61 @@
+.LinkInput-wrapper {
+  padding: 60px 90px;
+  background-color: #f0f6ff;
+}
+
+.LinkInput {
+  border-radius: 15px;
+  border: 1px solid var(--Linkbrary-primary-color, #6d6afe);
+  background-color: white;
+  width: 800px;
+  margin: 0 auto;
+  padding: 16px 20px;
+  display: flex;
+  justify-content: space-between;
+
+  @media (max-width: 1000px) {
+    width: 100%;
+  }
+}
+
+.LinkInput .input-icon-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+}
+
+.LinkInput input {
+  color: #9fa6b2;
+  font-family: Pretendard;
+  font-size: 16px;
+  font-weight: 400;
+  border-width: 0;
+}
+
+.add-url-button {
+  border-radius: 8px;
+  background: var(
+    --gra-purpleblue-to-skyblue,
+    linear-gradient(91deg, #6d6afe 0.12%, #6ae3fe 101.84%)
+  );
+  color: #f5f5f5;
+  padding: 10px 16px;
+  font-size: 14px;
+}
+
+.modal-contents {
+  width: 100%;
+}
+
+.folder-select-wrapper {
+  max-height: 172px;
+  overflow-y: auto;
+}
+
+.folder-select {
+  font-size: 16px;
+  display: flex;
+  padding: 8px;
+  font-weight: 400;
+}