From 2b11bd6d97415bd859c27c77a06c9481ea804ed4 Mon Sep 17 00:00:00 2001 From: ohdong9795 Date: Sun, 28 Apr 2024 20:44:08 +0900 Subject: [PATCH] =?UTF-8?q?[=EC=98=A4=EB=8F=99=ED=98=81]=20Week11?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 30 +-- src/components/common/Input.jsx | 25 +++ src/components/common/Item.js | 203 +++++++++++++----- src/components/common/Modal.jsx | 61 ++++++ src/components/pages/Folder/FolderList.js | 125 ----------- src/components/pages/Folder/LinkAdder.js | 54 ----- src/hooks/useScript.js | 40 ++++ src/images/check.png | Bin 0 -> 348 bytes src/images/close.png | Bin 0 -> 568 bytes src/images/icons/facebookIcon.png | Bin 0 -> 1185 bytes src/images/icons/kakaoIcon.png | Bin 0 -> 978 bytes src/images/icons/shareIcon.png | Bin 0 -> 1316 bytes src/images/kebab.png | Bin 0 -> 188 bytes src/images/star.png | Bin 0 -> 897 bytes src/index.js | 10 +- src/pages/Folder.js | 23 -- src/pages/Folder/AddLinkModal.jsx | 124 +++++++++++ src/pages/Folder/AddModal.jsx | 23 ++ src/pages/Folder/ChangeModal.jsx | 23 ++ src/{components => }/pages/Folder/Content.js | 17 +- src/pages/Folder/DeleteModal.jsx | 36 ++++ src/pages/Folder/Folder.js | 28 +++ .../pages/Folder/FolderBox.js | 0 src/pages/Folder/FolderList.js | 202 +++++++++++++++++ src/{components => }/pages/Folder/Header.js | 4 +- src/{components => }/pages/Folder/Items.js | 6 +- src/pages/Folder/KebbabPopover.js | 40 ++++ src/pages/Folder/LinkAdder.js | 79 +++++++ src/pages/Folder/ShareModal.jsx | 82 +++++++ src/pages/Landing/Landing.jsx | 3 + src/{components => }/pages/Shared/Content.js | 2 +- src/{components => }/pages/Shared/Header.js | 0 .../pages/Shared/SampleItems.js | 2 +- src/pages/{ => Shared}/Shared.js | 16 +- 34 files changed, 940 insertions(+), 318 deletions(-) create mode 100644 src/components/common/Input.jsx create mode 100644 src/components/common/Modal.jsx delete mode 100644 src/components/pages/Folder/FolderList.js delete mode 100644 src/components/pages/Folder/LinkAdder.js create mode 100644 src/hooks/useScript.js create mode 100644 src/images/check.png create mode 100644 src/images/close.png create mode 100644 src/images/icons/facebookIcon.png create mode 100644 src/images/icons/kakaoIcon.png create mode 100644 src/images/icons/shareIcon.png create mode 100644 src/images/kebab.png create mode 100644 src/images/star.png delete mode 100644 src/pages/Folder.js create mode 100644 src/pages/Folder/AddLinkModal.jsx create mode 100644 src/pages/Folder/AddModal.jsx create mode 100644 src/pages/Folder/ChangeModal.jsx rename src/{components => }/pages/Folder/Content.js (73%) create mode 100644 src/pages/Folder/DeleteModal.jsx create mode 100644 src/pages/Folder/Folder.js rename src/{components => }/pages/Folder/FolderBox.js (100%) create mode 100644 src/pages/Folder/FolderList.js rename src/{components => }/pages/Folder/Header.js (88%) rename src/{components => }/pages/Folder/Items.js (87%) create mode 100644 src/pages/Folder/KebbabPopover.js create mode 100644 src/pages/Folder/LinkAdder.js create mode 100644 src/pages/Folder/ShareModal.jsx create mode 100644 src/pages/Landing/Landing.jsx rename src/{components => }/pages/Shared/Content.js (95%) rename src/{components => }/pages/Shared/Header.js (100%) rename src/{components => }/pages/Shared/SampleItems.js (91%) rename src/pages/{ => Shared}/Shared.js (59%) diff --git a/public/index.html b/public/index.html index aa069f27c..7bfe968dc 100644 --- a/public/index.html +++ b/public/index.html @@ -1,43 +1,17 @@ - + - + - - React App
- diff --git a/src/components/common/Input.jsx b/src/components/common/Input.jsx new file mode 100644 index 000000000..9f8db4405 --- /dev/null +++ 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 ; +} diff --git a/src/components/common/Item.js b/src/components/common/Item.js index adb986dd4..8da545d60 100644 --- 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 ( - - + + {editable && } + - - - {description ? ( - description + + + + + {editable ? ( + + kebbab + + {openPopover && } + + ) : ( - <> -
-
- +
)} - + + {description} {dateToString(new Date(createdAt))} - - + + + {openDeleteModal && ( + + )} + {openAddLinkModal && ( + + )} + + ); } diff --git a/src/components/common/Modal.jsx b/src/components/common/Modal.jsx new file mode 100644 index 000000000..2f2377ed1 --- /dev/null +++ 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 ( + + + + Modal close button + + {title} + {children} + + + ); +} diff --git a/src/components/pages/Folder/FolderList.js b/src/components/pages/Folder/FolderList.js deleted file mode 100644 index 0caffaeab..000000000 --- a/src/components/pages/Folder/FolderList.js +++ /dev/null @@ -1,125 +0,0 @@ -import { useState } from 'react'; -import FolderBox from './FolderBox'; -import { styled } from 'styled-components'; -import shareButtonImg from '../../../images/shareButton.png'; -import nameChangeButtonImg from '../../../images/nameChangeButton.png'; -import deleteButtonImg from '../../../images/deleteButton.png'; - -const FlexDiv = styled.div` - display: flex; - justify-content: space-between; - margin-top: 40px; - - @media screen and (min-width: 1124px) { - width: 1060px; - } - - @media screen and (min-width: 769px) and (max-width: 1123px) { - width: 700px; - } - - @media screen and (max-width: 768px) { - max-width: 687px; - } -`; - -const FlexDiv2 = styled.div` - display: flex; - justify-content: space-between; - margin-top: 5px; - margin-bottom: -25px; -`; - -const ColumnFlexDiv = styled.div` - display: flex; - flex-direction: column; - justify-content: center; -`; - -const FolderAdd = styled.span` - display: inline-block; - height: 35px; - cursor: pointer; - font-size: 16px; - line-height: 35px; - - @media screen and (min-width: 769px) { - border-radius: 5px; - padding: 0px 5px; - color: #6d6afe; - } - - @media screen and (max-width: 768px) { - background-color: #6d6afe; - color: white; - position: fixed; - left: 50%; - transform: translate(-50%, 0); - bottom: 101px; - z-index: 9999; - border-radius: 20px; - width: 127px; - text-align: center; - } -`; - -const StyledButton = styled.button` - border: none; - background-color: white; - cursor: pointer; -`; - -function FolderList({ folderData, selectedId, setSelectedId }) { - const [folderName, setFolderName] = useState('전체'); - const { data, loading, error } = folderData; - - return ( - <> - -
- - {!loading && - error === null && - data.map((item) => ( - - ))} -
- 폴더 추가 + - - -

{folderName}

- - {folderName === '전체' ? null : ( -
- - Share Button - - - Name Change Button - - - Delete Button - -
- )} - - - - ); -} - -export default FolderList; diff --git a/src/components/pages/Folder/LinkAdder.js b/src/components/pages/Folder/LinkAdder.js deleted file mode 100644 index 1e922e417..000000000 --- a/src/components/pages/Folder/LinkAdder.js +++ /dev/null @@ -1,54 +0,0 @@ -import { styled } from 'styled-components'; -import linkIcon from '../../../images/icons_link.png'; - -const StyledDiv = styled.div` - width: 100%; - position: relative; -`; - -const LinkInput = styled.input` - box-sizing: border-box; - width: 100%; - height: 69px; - line-height: 69px; - font-size: 16px; - padding-left: 50px; - border: 1px solid #6d6afe; - outline: none; - border-radius: 15px; -`; - -const StyledImg = styled.img` - position: absolute; - top: 25px; - left: 20px; -`; - -const AddButton = styled.button` - display: inline-block; - width: 80px; - height: 37px; - border-radius: 8px; - background: linear-gradient(90deg, rgb(109, 106, 254), rgb(106, 227, 254)); - color: white; - text-align: center; - line-height: 37px; - font-size: 18px; - text-decoration: none; - border: none; - position: absolute; - top: 16px; - right: 20px; -`; - -function LinkAppender() { - return ( - - - - 추가 - - ); -} - -export default LinkAppender; diff --git a/src/hooks/useScript.js b/src/hooks/useScript.js new file mode 100644 index 000000000..1212380c5 --- /dev/null +++ b/src/hooks/useScript.js @@ -0,0 +1,40 @@ +import { useEffect, useState } from 'react'; + +export function useScript(src, option) { + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + let script = document.querySelector(`script[src="${src}"]`); + + if (!script) { + script = document.createElement('script'); + script.src = src; + script.async = true; + if (option) { + const keys = Object.keys(option); + keys.forEach((key) => { + script[key] = option[key]; + }); + } + } + + const handleLoad = () => setLoading(false); + const handleError = () => setError(error); + + script.addEventListener('load', handleLoad); + script.addEventListener('error', handleError); + + document.body.appendChild(script); + + return () => { + if (script) { + script.removeEventListener('load', handleLoad); + script.removeEventListener('error', handleError); + document.body.removeChild(script); + } + }; + }, [src, error, option]); + + return [loading, error]; +} diff --git a/src/images/check.png b/src/images/check.png new file mode 100644 index 0000000000000000000000000000000000000000..5d5517fb2c50d0eee6612c165f8fe16a83c2ab35 GIT binary patch literal 348 zcmeAS@N?(olHy`uVBq!ia0vp^d?3uh1|;P@bT0xa&H|6fVg?3oVGw3ym^DWND9BhG z<_5K3^+(PV=Cw%1ecp z3hx;5COA9_NeFTbV-mc-K-gJ*%7MGLYR{}oNvUgbaN2XaFYVdvo0Ur6#h!T8)>?Q! zI2ps)tNBB1aCo=^5dNB9e!5N)SvhmuU&t1a=iOf{;PalrMc2LZiYG^n_R!<)>aNb zZyo2r*`F>Rc>3`-^SJ79(5x%S+?D$%!V(hwGL!Pk**qipBN&1{nnSI(YYXq?M9|7Fe+$4_S^fu3jZboFyt=akR{09|2@;Q#;t literal 0 HcmV?d00001 diff --git a/src/images/close.png b/src/images/close.png new file mode 100644 index 0000000000000000000000000000000000000000..b0816c65a28095e2ee492ca7645affcaaf465a8c GIT binary patch literal 568 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 AcK`qY literal 0 HcmV?d00001 diff --git a/src/images/icons/shareIcon.png b/src/images/icons/shareIcon.png new file mode 100644 index 0000000000000000000000000000000000000000..358f9c49721cf15ce9ede9506c9ebba749a416eb GIT binary patch literal 1316 zcmV+<1>5?GP)K~#7F&6!I~ z8%G$&XZB%RrNps7MMAu)qz$bV_rR%#q{kMizE#R0w1Ngvsi}}aY7X=O92zM-z$F|? zr5;);wa{A;4~bKAKpZ&4jj5;<2?Mo2va#KU#`bz=`hA;S%W;-?XIUP93GLInKfd{1 zGfRm}an9-7+?)iv^4{JaEtN{RPwMLGC~glA4|ymQ;#*r=q`A3SUs+jUaKBDmiVEIO zW@l$*gxlTSl`SZzLim=J7Cj!1m&V7(naFP)zX$>0MQX8Fl!ymPCX;MzY^*>j%-Ssyu;wGi9+AUcbcyDf?haz7Lb*~%rG=Gl&`kzb1-KOX$jq+udlCwNY=UP zsP{EAG}O!lCoRk_W;Q72+Om(LHKBqi`87twglx~Ohz$nuNC*i~OE5^cC5hcv6zv9;^e+jgT+4@6H#Tlw6M0@R7(_No zvDwIEGJfKb9zDFZ1RixwRtlfJ75-tyI-g3sAKc5ftx`%7;mCL00*}N7CNBY`r@l!g z{ySQ+5)#$ezMPZf;uPoP`s2sZb|NN4fyj~}kcd|bU;X~>QP&iy6f5dJQYc(#gTn-I z`pj^cC}2?vm58_%`eZis`fbM5n{e1pDBq@({n&Kj?uxkR#}O5Hw#yvU|vx{MCN8Z3+F-y7$lcCq0}=kOkOG^*`W5irczwK|(ZNtqvT7 z(o6n(PYSOF8wtso$KS$>Voeu!?+`&DqpSRB2Z;gl-;<_QMJe7fp=T)lB;Gy=qGam0~teXab=g#cq8FU0RGYdL2{MaUqdW*hkUtEMKb}ZiGM>iE4KV zmm=t=0NI9qdmKnqE|=pUk|e2{rmpIx#UJH2wGs8jGU#$`U4bNz(31lqQ%?-ZAp&F$1Ss7)Zmz!%s1o zI5?}&n$VkX|MWl&WZuP&i0Qs>N+tCdfczXP(v+8wD2vUoA~w#`)6)UsLOA^Ce0_UE z;NOIofR+XZ2A<-K)JXWS!xk16bdl({WJbDZGweu(LP58t&E-7W-QBH`bEd(;!E#$y z21TnvbO~jE6BZh-oI0x`T{r`rgzOd|?10V`)(#S7SL=t&F34lcAwnm8#|djg528LD(&y@Q*-KF{vd{1^Scr;;qaWR aZ1O*;euYsl7Jk?O0000 z9OUlAuhnf;lcsPxw4qHxlO$CuUx`=%YZ7E+dXuk>#w({-Oc fGICaqJ6ssob?7Ypm7=HxG@QZH)z4*}Q$iB}s?$4J literal 0 HcmV?d00001 diff --git a/src/images/star.png b/src/images/star.png new file mode 100644 index 0000000000000000000000000000000000000000..8dbacad4b80d7700e1e237ae48d3614adb4f47f7 GIT binary patch literal 897 zcmV-{1AhF8P)j#Z)V;~$p3iL1~r93 zA%SPbsi*=$j;bi-*yCCt<`Foa=9EWl}edhE|&>~LQ%Kdoq@fhLV5u5c1b3a z30GEDmNqvxh3o6O z_r>LM8F2zK1`;?|Hxhqh_L=~dsaC5e5{cw&SY;>)STVM4B>EB=2boHxV(Ui&F+=(Q zCxD4=)N1ts84wPKLkzw@`jOy7gd&kh47`G1yGI2DT*h)GvTLG6bMT@xcc9wA&d&!9|f>NVtL3puqEr+#Z}{R3bb1e4dpEF3mt7Aoclt z$K9MEPtbRVjDd)tP$=9y?1bPFuh;9`+uK_OLRd&U*$8E`*(l+VC!AhQI2^uH1QHO7 zAKY;d;N45`69Nr(;+I&rA|booE~eu%0Kze0djd;83;@Tsl&QXwUltegNM)LhV}&U&mtA#t={sGZFLIp=OBmT{#m+`)~NS;Ge^9 XHcsHHsC)U~00000NkvXXu0mjf5Z{9- literal 0 HcmV?d00001 diff --git a/src/index.js b/src/index.js index 490853c1b..9f2966322 100644 --- a/src/index.js +++ b/src/index.js @@ -2,17 +2,17 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import { BrowserRouter, Route, Routes } from 'react-router-dom'; import NotFound from './pages/NotFound'; -import Folder from './pages/Folder'; -import Shared from './pages/Shared'; +import Folder from './pages/Folder/Folder'; +import Shared from './pages/Shared/Shared'; import './index.css'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( - }/> - }/> - }/> + } /> + } /> + } /> ); diff --git a/src/pages/Folder.js b/src/pages/Folder.js deleted file mode 100644 index 2bf6ad5ae..000000000 --- a/src/pages/Folder.js +++ /dev/null @@ -1,23 +0,0 @@ -import { API_INFO, putParams } from '../common/api'; -import useFetch from '../hooks/useFetch'; -import Footer from '../components/common/Footer'; -import Nav from '../components/common/Nav'; -import Content from '../components/pages/Folder/Content'; -import Header from '../components/pages/Folder/Header'; - -function Folder() { - const { url: getUserUrl, method: getUserMethod } = API_INFO.endpoints.getUser; - const userData = useFetch(API_INFO.baseUrl + putParams(getUserUrl, '1'), getUserMethod); - userData.data = userData.data?.data[0]; - - return ( - <> -