[오동혁] Week11

codeit-bootcamp-frontend · Apr 28, 2024 · 2b11bd6 · 2b11bd6
1 parent bbd31df
commit 2b11bd6
Show file tree

Hide file tree

Showing 34 changed files with 940 additions and 318 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1,43 +1,17 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="Web site created using create-react-app" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>React App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/src/components/common/Input.jsx b/src/components/common/Input.jsx
@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+const StyledInput = styled.input`
+  box-sizing: border-box;
+  width: ${(props) => props.$width};
+  height: ${(props) => props.$height};
+  margin: ${(props) => props.$margin};
+  border-radius: 8px;
+  border: 1px solid #ccd5e3;
+  padding: 0 15px;
+  font-size: 16px;
+  line-height: 24px;
+
+  &:hover {
+    border: 1px solid #6d6afe;
+  }
+
+  &:focus {
+    outline: 1px solid #6d6afe;
+  }
+`;
+
+export default function Input({ width, height, margin, placeholder }) {
+  return <StyledInput $width={width} $height={height} $margin={margin} placeholder={placeholder} />;
+}
diff --git a/src/components/common/Item.js b/src/components/common/Item.js
@@ -2,101 +2,188 @@ import styled from 'styled-components';
 import { calcDateDiff, dateToString } from '../../common/date';
 import { Link } from 'react-router-dom';
 import noImage from '../../images/noImage.jpg';
+import star from '../../images/star.png';
+import kebbab from '../../images/kebab.png';
 import { handleImageError } from '../../common/error';
-
-const ImgDiv = styled.div``;
-const StyledImg = styled.img``;
-const Time = styled.span``;
-const Detail = styled.span``;
-const CreatedDate = styled.span``;
+import { useEffect, useRef, useState } from 'react';
+import KebbabPopover from '../../pages/Folder/KebbabPopover';
+import DeleteModal from '../../pages/Folder/DeleteModal';
+import AddLinkModal from '../../pages/Folder/AddLinkModal';
 
 const StyledArticle = styled.article`
+  position: relative;
   display: flex;
   flex-direction: column;
   border-radius: 10px;
   box-shadow: 0px 0px 3px #808080;
-  overflow: hidden;
 
   @media screen and (min-width: 769px) {
     max-width: 340px;
+    height: 334px;
   }
 
   @media screen and (max-width: 768px) {
     width: 100%;
+    height: 327px;
   }
 
   &:hover {
     border: 2px solid #6d6afe;
     margin: -2px;
   }
+`;
 
-  ${Time},
-  ${Detail},
-  ${CreatedDate} {
-    margin: 20px 20px 0 20px;
-  }
+const Content = styled.div`
+  box-sizing: border-box;
+  height: 135px;
+  padding: 15px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
 
-  ${ImgDiv} {
-    width: 100%;
-    height: 200px;
-    overflow: hidden;
-  }
+const ImgDiv = styled.div`
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+`;
 
-  ${StyledImg} {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-    &:hover {
-      transform: scale(1.3);
-    }
-  }
-  ${Time} {
-    font-size: 13px;
-    color: #666666;
-  }
-  ${Detail} {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    font-size: 16px;
-    color: black;
-  }
-  ${CreatedDate} {
-    font-size: 14px;
-    color: #333333;
-    margin-bottom: 20px;
+const StyledImg = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  &:hover {
+    transform: scale(1.3);
   }
 `;
 
+const CardHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: 17px;
+`;
+
+const Time = styled.span`
+  font-size: 13px;
+  color: #666666;
+`;
+
+const KebbabButton = styled.button`
+  position: relative;
+  border: none;
+  background: none;
+  cursor: pointer;
+`;
+
+const Detail = styled.span`
+  height: 49px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  font-size: 16px;
+  line-height: 24px;
+  color: black;
+`;
+
+const CreatedDate = styled.span`
+  height: 19px;
+  font-size: 14px;
+  color: #333333;
+`;
+
 const StyledLink = styled(Link)`
   text-decoration: none;
 `;
 
-function Item({ createdAt, url, title, description, imageSource }) {
+const KebbabDiv = styled.div``;
+
+const ModalDiv = styled.div`
+  position: relative;
+`;
+
+const StarImg = styled.img`
+  position: absolute;
+  width: 34px;
+  height: 34px;
+  top: 15px;
+  right: 15px;
+  z-index: 99;
+`;
+
+function Item({ createdAt, url, title, description, imageSource, folderData, editable }) {
+  const [openPopover, setOpenPopover] = useState(false);
+  const [openDeleteModal, setOpenDeleteModal] = useState(false);
+  const [openAddLinkModal, setOpenAddLinkModal] = useState(false);
+  const kebbabRef = useRef();
+
+  useEffect(() => {
+    const handler = (e) => {
+      if (kebbabRef.current && !kebbabRef.current.contains(e.target)) {
+        setOpenPopover(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handler);
+
+    return () => {
+      document.removeEventListener('mousedown', handler);
+    };
+  }, []);
+
   return (
-    <StyledLink to={url} target='_blank'>
-      <StyledArticle>
+    <StyledArticle>
+      {editable && <StarImg src={star} />}
+      <StyledLink to={url} target='_blank'>
         <ImgDiv>
           <StyledImg src={imageSource ? imageSource : noImage} alt={title} onError={handleImageError} />
         </ImgDiv>
-        <Time>{calcDateDiff(new Date(), new Date(createdAt))}</Time>
-        <Detail>
-          {description ? (
-            description
+      </StyledLink>
+      <Content>
+        <CardHeader>
+          <Time>{calcDateDiff(new Date(), new Date(createdAt))}</Time>
+          {editable ? (
+            <KebbabButton onClick={setOpenPopover}>
+              <img src={kebbab} alt='kebbab'></img>
+              <KebbabDiv ref={kebbabRef}>
+                {openPopover && <KebbabPopover handleDelete={setOpenDeleteModal} handleAdd={setOpenAddLinkModal} />}
+              </KebbabDiv>
+            </KebbabButton>
           ) : (
-            <>
-              <br />
-              <br />
-            </>
+            <div></div>
           )}
-        </Detail>
+        </CardHeader>
+        <Detail>{description}</Detail>
         <CreatedDate>{dateToString(new Date(createdAt))}</CreatedDate>
-      </StyledArticle>
-    </StyledLink>
+      </Content>
+      <ModalDiv>
+        {openDeleteModal && (
+          <DeleteModal
+            title='링크 삭제'
+            width='360px'
+            height='193px'
+            padding='32px 40px'
+            setter={setOpenDeleteModal}
+            subtitle={url}
+          />
+        )}
+        {openAddLinkModal && (
+          <AddLinkModal
+            title='폴더에 추가'
+            width='360px'
+            height='auto'
+            padding='32px 40px'
+            setter={setOpenAddLinkModal}
+            url={url}
+            folderData={folderData}
+          />
+        )}
+      </ModalDiv>
+    </StyledArticle>
   );
 }
 

diff --git a/src/components/common/Modal.jsx b/src/components/common/Modal.jsx
@@ -0,0 +1,61 @@
+import styled from 'styled-components';
+import close from '../../images/close.png';
+
+const ModalBack = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 998;
+`;
+
+const ModalDiv = styled.div`
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  box-sizing: border-box;
+  width: ${(props) => props.$width};
+  height: ${(props) => props.$height};
+  border-radius: 15px;
+  padding: ${(props) => props.$padding};
+  background-color: white;
+  z-index: 999;
+`;
+
+const TitleDiv = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  font-size: 20px;
+  font-weight: bold;
+`;
+
+const CloseButton = styled.button`
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  border: none;
+  background: none;
+  cursor: pointer;
+`;
+
+export default function Modal({ title, width, height, padding, setter, children }) {
+  const handleClose = () => {
+    setter?.(false);
+  };
+
+  return (
+    <ModalBack>
+      <ModalDiv $width={width} $height={height} $padding={padding}>
+        <CloseButton onClick={handleClose}>
+          <img src={close} alt='Modal close button' />
+        </CloseButton>
+        <TitleDiv>{title}</TitleDiv>
+        {children}
+      </ModalDiv>
+    </ModalBack>
+  );
+}