From 109cbb78d789e41fdee29d5db0075dde8f1a5fda Mon Sep 17 00:00:00 2001 From: kuum97 Date: Sat, 27 Apr 2024 15:26:34 +0900 Subject: [PATCH 01/18] Create Modal component --- public/favicon.ico | Bin 0 -> 2172 bytes src/globalComponents/Modal.jsx | 29 +++++++++++++++++++++++++++++ src/pages/FolderPage/index.jsx | 2 ++ 3 files changed, 31 insertions(+) create mode 100644 public/favicon.ico create mode 100644 src/globalComponents/Modal.jsx diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..94608439291c43927b25f4092946ebd6383819fc GIT binary patch literal 2172 zcmeH}`&$x*8pm;2$4kzvFh$MUv$>8lXq%T5l|!1B5^wY9vhecgq_E@|$EBjMY~|4- zxF?@!!V+^+5mXLf;6z|2A2A;%TA~PqXtu};kRl=ya6IQ9IQs+k!~6Zb@At>gPj6jn za=e=h$OQlZxFsgUrUL*D8GHLvrvrP*gL{YX!TE0qm#_eU>yiJC1AzR4*Iwy>O^-hZ z=$H7e>>Z9MI06m;uo_+8Du5jpi}dOC^%>r@X2< z9SRDWOXDD-Cq_xJ5w-p1g11W9ij2qS2`XoUG3pQxnGAt_XL_l%+fq2(DJtbP+Yo8r zDcCi3-A2WyQvXGWhAeE`VrG1OgMT^l>c0Q~v|ri8ut2rL`Y#KKjXB7W$?_M$kenCz zDDK3Byi_{4A(2>Xp{o@GQ!BqsjF!F`5^aBv7d{p!G=-ljAxcClZ(c56FV3m{!rw1s zvW3v)@beH({VZ4r<#XzKC)%7@)@#2m2vtGBK$b#Qe$%u~_QidE$WnRTZ^SGQN-&_+ ze}bTnWZgJg>`%psDX^*sRvtHGXizox?{4K-#(Hv!g^ED{g!rf^lAcrjE5D+z>ozPL z87Wj?5T_&}Qki9I=}x1b4kO%Tms`41+)^I2m$1fzPb{yEDleR8;BxmbuA<9vz*@WC zRDgKfMEO22FN8HmO!J|i)SyO8v)omiOQB!9k4cC9vsz?|udvygAd~Htr*}ItR~xX; z4WP{6wX$BICvv&ezFfN%^>JHh0qxyDP*-35QyFtIJ2}O(U^4@=^T4|4U-4MPF-2Lk?a4_u)Z<-)pvYLMr=WdpKhF|QvMFi1@Cw=J!N zXjoPK2yeJADS7o22$t zsdS%Jqu3$*+_cqXHnRV0j20)GebZrQ`NP0EPR)*SK%Q{dtm2OXovS@i{J~e6ZgP}9 zj#=L^4HFySLdr*@9`_Faz^q5Pt?q zsZxL>spe~h#oQ4|G8SV*#m{WaJ!||50hIl6>dTe9JQYgaX`06NDvL#w zSj?#>kOOU5ecwK?=VvzEIp*$#UNm`R;CF$prnU7_8+-V5P3HcxNbiNYfY6HQ39euq z-=gK{7#nikne+Uk4VtNsV4_&!oozQ@Mw0lG0Mxx^4AQMP$g6&S`gyN#EK9meVpQ|K zyzuZ5N8o5|?V&ZqF+}+8uhXx+xxr*e#NhaUPLSh%v~?!qOoL*@nsfETyKR4;o8;;@ zFVH#IG*u4ROl>VYHjCM8{pp%^llJK13vy4c(R<(H^!6v0QLWYbRkUBp8Tl;TNtR_w z8Z5FmLW)eMm717YETQZyj&$tD(N9$o9OgzQIgpRWmO;a%3qOepKR%kea~+tT}N1Xx{ssy%x1yY4Bkz(_V| zh?cUzJV_*14S65-R)eYZPhVDkeBCWfigpzJwrxI?v4cQIN*}!Wx^&$A&<8ZY$r_hG l@c$LyW|)cleu+WY+_P_a(osZx;oh?VNIah$+kY;v=09$Pv3dXi literal 0 HcmV?d00001 diff --git a/src/globalComponents/Modal.jsx b/src/globalComponents/Modal.jsx new file mode 100644 index 000000000..a5d87f01e --- /dev/null +++ b/src/globalComponents/Modal.jsx @@ -0,0 +1,29 @@ +function Modal() { + return ( +
+
+

title

+

subtitle

+
+ + +
+
+ kakao + facebook + link +
+
    +
  • a
    • +
  • b
    • +
  • c
    • +
  • d
    • + +
+ +
+
+ ); +} + +export default Modal; diff --git a/src/pages/FolderPage/index.jsx b/src/pages/FolderPage/index.jsx index d610f4485..8a858283d 100644 --- a/src/pages/FolderPage/index.jsx +++ b/src/pages/FolderPage/index.jsx @@ -6,6 +6,7 @@ import { getFoldersByUserId, getUserById } from "../../services/api"; import useAsync from "../../services/useAsync"; import "../../global.css"; import FoldersController from "./components/FoldersController"; +import Modal from "../../globalComponents/Modal"; function FolderPage() { let userId = 1; @@ -42,6 +43,7 @@ function FolderPage() { userProfileEmail={userProfileData.email} userLogInSuccess={isUserLoggedIn} /> + {isUserLoggedIn ? ( <> From 6b6affe8ecb51a27771bc12ed2a2e86d120c1f51 Mon Sep 17 00:00:00 2001 From: kuum97 Date: Sat, 27 Apr 2024 15:31:20 +0900 Subject: [PATCH 02/18] Rename card's modal to dropdown --- src/pages/FolderPage/components/FolderLinkCard.jsx | 10 +++++----- src/pages/FolderPage/index.jsx | 2 -- src/pages/LinkCard.module.css | 8 ++++---- 3 files changed, 9 insertions(+), 11 deletions(-) diff --git a/src/pages/FolderPage/components/FolderLinkCard.jsx b/src/pages/FolderPage/components/FolderLinkCard.jsx index 972eb0171..77e16fce9 100644 --- a/src/pages/FolderPage/components/FolderLinkCard.jsx +++ b/src/pages/FolderPage/components/FolderLinkCard.jsx @@ -12,13 +12,13 @@ function FolderLinkCard({ link }) { const src = image_source || defaultImage; - const handleToggleModal = (e) => { + const handleToggleDropDown = (e) => { e.preventDefault(); const button = e.currentTarget; const linkInfo = button.closest(`.${styles.linkInfo}`); - const modal = linkInfo.querySelector(`.${styles.modal}`); - modal.classList.toggle(styles.hidden); + const dropdown = linkInfo.querySelector(`.${styles.dropdown}`); + dropdown.classList.toggle(styles.hidden); }; return ( @@ -35,13 +35,13 @@ function FolderLinkCard({ link }) {
{createdTime}
-
{description}
{createdAtFormat}
-
+
diff --git a/src/pages/FolderPage/index.jsx b/src/pages/FolderPage/index.jsx index 8a858283d..d610f4485 100644 --- a/src/pages/FolderPage/index.jsx +++ b/src/pages/FolderPage/index.jsx @@ -6,7 +6,6 @@ import { getFoldersByUserId, getUserById } from "../../services/api"; import useAsync from "../../services/useAsync"; import "../../global.css"; import FoldersController from "./components/FoldersController"; -import Modal from "../../globalComponents/Modal"; function FolderPage() { let userId = 1; @@ -43,7 +42,6 @@ function FolderPage() { userProfileEmail={userProfileData.email} userLogInSuccess={isUserLoggedIn} /> - {isUserLoggedIn ? ( <> diff --git a/src/pages/LinkCard.module.css b/src/pages/LinkCard.module.css index 24d472e13..befb80a5d 100644 --- a/src/pages/LinkCard.module.css +++ b/src/pages/LinkCard.module.css @@ -91,7 +91,7 @@ display: none; } -.modal { +.dropdown { width: 100px; position: absolute; right: -55px; @@ -99,18 +99,18 @@ z-index: 1; } -.modal button { +.dropdown button { padding: 7px 12px; width: 100px; border: none; box-shadow: 0 0 15px 2px var(--gray-400); } -.modal button:first-child { +.dropdown button:first-child { background-color: var(--white); } -.modal button:nth-child(2) { +.dropdown button:nth-child(2) { background-color: var(--gray-400); } From 4d0ad606fe5dea11dd14eb82ff0a827c6829de80 Mon Sep 17 00:00:00 2001 From: kuum97 Date: Sat, 27 Apr 2024 17:54:19 +0900 Subject: [PATCH 03/18] Styled Modal component and add children prop --- src/globalComponents/Modal.jsx | 31 ++++++------------ src/globalComponents/Modal.module.css | 45 +++++++++++++++++++++++++++ src/pages/FolderPage/index.jsx | 2 ++ src/pages/FolderPage/index.module.css | 4 +++ src/pages/LinkCards.module.css | 1 + 5 files changed, 61 insertions(+), 22 deletions(-) create mode 100644 src/globalComponents/Modal.module.css create mode 100644 src/pages/FolderPage/index.module.css diff --git a/src/globalComponents/Modal.jsx b/src/globalComponents/Modal.jsx index a5d87f01e..1faafbc37 100644 --- a/src/globalComponents/Modal.jsx +++ b/src/globalComponents/Modal.jsx @@ -1,26 +1,13 @@ -function Modal() { +import styles from "./Modal.module.css"; + +function Modal({ children }) { return ( -
-
-

title

-

subtitle

-
- - -
-
- kakao - facebook - link -
-
    -
  • a
    • -
  • b
    • -
  • c
    • -
  • d
    • - -
- +
+
+

title

+

subtitle

+ {children} +
); diff --git a/src/globalComponents/Modal.module.css b/src/globalComponents/Modal.module.css new file mode 100644 index 000000000..c05f5bacf --- /dev/null +++ b/src/globalComponents/Modal.module.css @@ -0,0 +1,45 @@ +.background { + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.4); + z-index: 1000; + display: flex; + justify-content: center; + align-items: center; + position: fixed; +} + +.container { + padding: 28px; + background-color: var(--white); + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + border-radius: 15px; + position: relative; +} + +.title { + font-size: 20px; + font-weight: 700; + color: var(--black); +} + +.subTitle { + font-size: 14px; + font-weight: 400; + color: var(--gray-600); +} + +.exitButton { + width: 24px; + height: 24px; + position: absolute; + right: 16px; + top: 16px; + border: none; + border-radius: 9999px; + background-color: var(--gray-400); + color: var(--gray-600); +} diff --git a/src/pages/FolderPage/index.jsx b/src/pages/FolderPage/index.jsx index d610f4485..161966097 100644 --- a/src/pages/FolderPage/index.jsx +++ b/src/pages/FolderPage/index.jsx @@ -6,6 +6,7 @@ import { getFoldersByUserId, getUserById } from "../../services/api"; import useAsync from "../../services/useAsync"; import "../../global.css"; import FoldersController from "./components/FoldersController"; +import Modal from "../../globalComponents/Modal"; function FolderPage() { let userId = 1; @@ -37,6 +38,7 @@ function FolderPage() { return ( <> +
Date: Sun, 28 Apr 2024 17:20:40 +0900 Subject: [PATCH 04/18] Add Modal button event handler --- src/globalComponents/Modal.jsx | 6 ++++-- src/globalComponents/Modal.module.css | 3 +++ src/pages/FolderPage/components/FoldersList.jsx | 13 ++++++++++++- src/pages/FolderPage/index.jsx | 2 -- 4 files changed, 19 insertions(+), 5 deletions(-) diff --git a/src/globalComponents/Modal.jsx b/src/globalComponents/Modal.jsx index 1faafbc37..508b97321 100644 --- a/src/globalComponents/Modal.jsx +++ b/src/globalComponents/Modal.jsx @@ -1,13 +1,15 @@ import styles from "./Modal.module.css"; -function Modal({ children }) { +function Modal({ children, onClick }) { return (

title

subtitle

{children} - +
); diff --git a/src/globalComponents/Modal.module.css b/src/globalComponents/Modal.module.css index c05f5bacf..04a05b20b 100644 --- a/src/globalComponents/Modal.module.css +++ b/src/globalComponents/Modal.module.css @@ -3,6 +3,8 @@ height: 100%; background-color: rgba(0, 0, 0, 0.4); z-index: 1000; + top: 0; + left: 0; display: flex; justify-content: center; align-items: center; @@ -42,4 +44,5 @@ border-radius: 9999px; background-color: var(--gray-400); color: var(--gray-600); + cursor: pointer; } diff --git a/src/pages/FolderPage/components/FoldersList.jsx b/src/pages/FolderPage/components/FoldersList.jsx index 96ec64242..f6d481c9c 100644 --- a/src/pages/FolderPage/components/FoldersList.jsx +++ b/src/pages/FolderPage/components/FoldersList.jsx @@ -1,5 +1,7 @@ +import { useState } from "react"; import styles from "../styles/FoldersList.module.css"; import { FaRegShareSquare, FaPencilAlt, FaRegTrashAlt } from "react-icons/fa"; +import Modal from "../../../globalComponents/Modal"; function FoldersList({ handleClick, @@ -7,6 +9,12 @@ function FoldersList({ selectedFolderName, selectedFolderId, }) { + const [onModal, setOnModal] = useState(false); + + const handleClickModal = () => { + setOnModal(!onModal); + }; + return (
@@ -22,7 +30,10 @@ function FoldersList({ ))} - + + {onModal && }
{selectedFolderName}
diff --git a/src/pages/FolderPage/index.jsx b/src/pages/FolderPage/index.jsx index 161966097..d610f4485 100644 --- a/src/pages/FolderPage/index.jsx +++ b/src/pages/FolderPage/index.jsx @@ -6,7 +6,6 @@ import { getFoldersByUserId, getUserById } from "../../services/api"; import useAsync from "../../services/useAsync"; import "../../global.css"; import FoldersController from "./components/FoldersController"; -import Modal from "../../globalComponents/Modal"; function FolderPage() { let userId = 1; @@ -38,7 +37,6 @@ function FolderPage() { return ( <> -
Date: Sun, 28 Apr 2024 19:29:33 +0900 Subject: [PATCH 05/18] Add folder adding modal --- src/globalComponents/Modal.jsx | 6 ++-- .../FolderPage/components/FoldersList.jsx | 13 ++++++++- .../FolderPage/styles/FoldersList.module.css | 29 +++++++++++++++++++ 3 files changed, 44 insertions(+), 4 deletions(-) diff --git a/src/globalComponents/Modal.jsx b/src/globalComponents/Modal.jsx index 508b97321..c2f8a6ca7 100644 --- a/src/globalComponents/Modal.jsx +++ b/src/globalComponents/Modal.jsx @@ -1,11 +1,11 @@ import styles from "./Modal.module.css"; -function Modal({ children, onClick }) { +function Modal({ children, onClick, title, subTitle }) { return (
-

title

-

subtitle

+

{title}

+ {subTitle &&

{subTitle}

} {children} - {onModal && } + {onModal && ( + +
+ + +
+ + )}
{selectedFolderName}
diff --git a/src/pages/FolderPage/styles/FoldersList.module.css b/src/pages/FolderPage/styles/FoldersList.module.css index ef3d1ec49..693022edc 100644 --- a/src/pages/FolderPage/styles/FoldersList.module.css +++ b/src/pages/FolderPage/styles/FoldersList.module.css @@ -61,6 +61,35 @@ gap: 2px; } +.formContainer { + width: 280px; + display: flex; + flex-direction: column; + gap: 10px; + margin-top: 10px; +} + +.formInput { + width: 100%; + padding: 15px 18px; + border: 1px solid var(--primary); + border-radius: 10px; + color: var(--black); + font-size: 16px; + font-weight: 400; +} + +.formButton { + width: 100%; + padding: 16px 20px; + border-radius: 10px; + border: none; + background: var(--primary-gradient); + font-size: 16px; + font-weight: 600; + color: var(--white); +} + @media (min-width: 768px) and (max-width: 1199px) { .container { width: 705px; From d412c83cfaa03398860607567ec866f63228c971 Mon Sep 17 00:00:00 2001 From: kuum97 Date: Sun, 28 Apr 2024 20:36:44 +0900 Subject: [PATCH 06/18] Add FoldersList modal by several actionTypes --- src/assets/facebook.png | Bin 0 -> 1187 bytes src/assets/kakaotalk.png | Bin 0 -> 967 bytes src/assets/share.png | Bin 0 -> 1371 bytes src/globalComponents/Modal.jsx | 2 +- .../FolderPage/components/FoldersList.jsx | 94 ++++++++++++++---- .../FolderPage/styles/FoldersList.module.css | 24 +++++ 6 files changed, 100 insertions(+), 20 deletions(-) create mode 100644 src/assets/facebook.png create mode 100644 src/assets/kakaotalk.png create mode 100644 src/assets/share.png diff --git a/src/assets/facebook.png b/src/assets/facebook.png new file mode 100644 index 0000000000000000000000000000000000000000..dfa6671e679f5f0f97d47094f30bf69b2093f41b GIT binary patch literal 1187 zcmV;U1YG-xP)@~p5{wQzT=(NE*E5oepny2<7aCQxw^T zSF5;7?O!xqf9UczFiI$u4Q8{JMe*P^j2iv~W3d+HEN^J@5(ebQZyfmj`!Tz{koNC= zW6MDCeFGjB>+twh9R}vmsxI%7$axq57PWRQX$5xk?N{3VU8fs(w`1Vyt$o@eNKt5h zrA^*ibn?dTjv&&v147| z4OfVMH`ETT625bJ836(=P3pequ*K(oIum(ZYEin?aV^hwvD=Oi6*^I{Mi)+i`TJG4 z_u`=Wnd|1{;s?9W$;7qxxM+X17#|jKT#5tKQg*#aXjl@kD>?4kOIDEG7eiutV=I0l z`Cy5%9ttRE?byZa&UXHs;lw#(>m%O?3+GuYiYLOkAC)T8?c!U>AQmDiE!}YFJSs|? z6nv&p>4zX>fs%)3At`pg7tTsPIt|uz#NPStYv#OT?#&TOdE-sS>{;) zP8}>IQmmy#hfrGql*vlV)yYDJA`RV-A&*SNY;JAzsfZop1?M)c3o>vLP%)=}D{)`xh+p5>=TuH(fnVX!>QMOl2020R@RTim=Oh-|j(y7F zKft)G5LvVrh-XpMP?Qy_0{6TuE}5(s`n~;#;uE1L-HR^$_>=$u002ovPDHLkV1kHO BIqd)d literal 0 HcmV?d00001 diff --git a/src/assets/kakaotalk.png b/src/assets/kakaotalk.png new file mode 100644 index 0000000000000000000000000000000000000000..1d92c8da3425d4392ea4d9c8a2dddeee9bb663e2 GIT binary patch literal 967 zcmV;&133JNP)-gP#DHa0ezm`Ep43p;X!ouYISjfBEP6AKa>vEi(= zAc4lhiX$kNZqNoIGrl+L-R=F~H}{9*mt5}lc4qIpZ{EC}d8^=w-M}FFF^YXmT8)6d z8il3r;9g8fuN)LYYw<~IWYtMz;faC}`x7ZAPT^)uR8m36ln33nXV| z$h8z&fg*<$ZjsBmWX&7khPV$iByt*UfW$t-E;4Gwg-Y#q^-hwD0SR0o7X!4HoYF|w zb63|oVZUS48mx6dBookYt?+NwYEactCsL7<^2yRHp|a%c>B@;#A+&?TU5k*yV5~e0 zN`&&nv3(sI?t0|Z9*K=ju+kXqbLl6*!4o(wF$#{lAvf4S7oiNr>u_{8D>zDVxqvRi z_7q)pj{cwJYv@AquJ%SpxC>8qegkjc1Iv`mzJ802nPUUM*)zcP3E*-nI`+XRT&1_H zbJYC6FL>lk7B}-4*xIh&Zg>c|H$|eaz=x1Bz(|i<4OvV<$dh^C;iIC1_24%Ar*{4T z>5GukPwRnYZH#<1#3E;(L(I$9(FjQ4;n$@0lBCn;RX>q=SS(*d0%;61j4U?U&1Uhq z#yL$hK9KZ~x={_z4nhVw;foygO*3(lOu#Y*wXlQBjm+5>Zbx(E_B!guKkt zye}bZ7vaH|)zV>YgGg`*h~Hfv<>7}1r-q_fy?q01gX>iMUf464ZMQ{Ep_`!klpaEw zKNjvxY9ASN8C*ome=Z88fTdmN9J&P75-&m=&H@CVAiFsxM7Pxz6IJ%g%8(VSC$^gl zRX7;2TqL_zt^8PZna9;MCsrk^2DgZsl{}}ZUe7~O$Yop@>|(5)*}%>2y~;9Ug%%{e zVC3#XOCL5+?#>s%8aEfhbt(f)Q+Aky&*K||MHwCDf; literal 0 HcmV?d00001 diff --git a/src/assets/share.png b/src/assets/share.png new file mode 100644 index 0000000000000000000000000000000000000000..7031508cefb302010347f6ea1831632e0ca2fa7c GIT binary patch literal 1371 zcmV-h1*H0kP)Q_GxwW})gd#!JqN?`uiUn1u0I#a5IX*tFbIwgW_ZIvh0Mdh8WF5gAklXDxgTbISF)>jPu#&F>hM43g zOSlcguss4N3BOfURi$=yb@7#z6?1ZO^3?u3ALP{3l*jH6+Z9|Q91h1%v#xs51-eNP zWLc>pq0}?V$T0Dfd^e}R0kXQf`dlC_;aQYL0GpHPn2%z(*VorQ=Lu;k7K`!i?QNx_ zqr+TXU6q;FUZ6iOpFB+m2L~LZ36{+7U$7{mySBDAZzd?UD0T7WsY6UMZ)Jglzp@N_9-(#bA;W_qjwpg~rkurOCK6VOb=iWPkFN#yl0CS5~x>ZA1-0qFA$mqK^y$cmYL zb;C1^wyyHv0ka|O9z;`96Dw9$;1J|ZL4b-dzTnLC0%8JnQ=w_YSfdeQ#;ktd4aC_?*JHmM);r@zo`CCoh;~UJTz*toN%mo?v zz0Vib8-7+5?M4cE&VsfeU#eGMU{4(2;YPojE59JP^HvAv; z2`(QPChtX*pA`~}N_Tg+3#*kvZ$dtdN4|0+UJ) zb5N+Vz&A19d+Y?%ADcrxnqGbn$z2F-T9M|CE|pH?&$9+j4oFF*peW{fxw*M%%c`yI z^Y>kzgKn&dOv8O!H$4kjEzwSQ+DS-ge}6x@eNI~OEGwu`=$bbiu5Yfc{(HwsKue>e zqcQCD)5AS8Gvg`6D*r4(eQIQ6B!=TO7%fb6cEN-qnsuB8MeQ;a3MJSD5d~2qvlf*d z>9#XKDTGMx@9&3irgMC@PbNE{BYR20vndP3Ga;d4!GjLy_%dKE$Xw;eoO3)1R47z6 zH#aLNT(NV|X^>FfLN4w3OYXDzAfZA4IQ@XDRCOstH^qgX?UTnKSb>6dQJ-@1Wdm|| zp|5mo4=JkAwBmww6}v8x3Q&L{title} {subTitle &&

{subTitle}

} {children} -
diff --git a/src/pages/FolderPage/components/FoldersList.jsx b/src/pages/FolderPage/components/FoldersList.jsx index cc7b980d5..6412b9174 100644 --- a/src/pages/FolderPage/components/FoldersList.jsx +++ b/src/pages/FolderPage/components/FoldersList.jsx @@ -1,7 +1,10 @@ import { useState } from "react"; -import styles from "../styles/FoldersList.module.css"; import { FaRegShareSquare, FaPencilAlt, FaRegTrashAlt } from "react-icons/fa"; +import styles from "../styles/FoldersList.module.css"; import Modal from "../../../globalComponents/Modal"; +import kakao from "../../../assets/kakaotalk.png"; +import facebook from "../../../assets/facebook.png"; +import share from "../../../assets/share.png"; function FoldersList({ handleClick, @@ -10,9 +13,15 @@ function FoldersList({ selectedFolderId, }) { const [onModal, setOnModal] = useState(false); + const [actionType, setActionType] = useState(""); + + const handleClickModal = (actionType) => { + if (actionType === "exit") { + return setOnModal(false); + } - const handleClickModal = () => { - setOnModal(!onModal); + setActionType(actionType); + setOnModal(true); }; return ( @@ -30,41 +39,88 @@ function FoldersList({ ))} - - {onModal && ( - -
- - -
- - )}
{selectedFolderName}
{selectedFolderId && (
- - -
)}
+ {onModal && actionType === "add" ? ( + handleClickModal()} title={"폴더 추가"}> +
+ + +
+ + ) : actionType === "share" ? ( + handleClickModal()} + title={"폴더 공유"} + subTitle={"폴더명"} + > +
+
+ kakaoBtn + 카카오톡 +
+
+ facebookBtn + 페이스북 +
+
+ shareBtn + 링크 복사 +
+
+ + ) : actionType === "modify" ? ( + handleClickModal()} title={"폴더 이름 변경"}> +
+ + +
+ + ) : actionType === "delete" ? ( + handleClickModal()} + title={"폴더 삭제"} + subTitle={"폴더명"} + > +
+ +
+ + ) : null}
); } diff --git a/src/pages/FolderPage/styles/FoldersList.module.css b/src/pages/FolderPage/styles/FoldersList.module.css index 693022edc..047d853e3 100644 --- a/src/pages/FolderPage/styles/FoldersList.module.css +++ b/src/pages/FolderPage/styles/FoldersList.module.css @@ -90,6 +90,30 @@ color: var(--white); } +.redBackground { + background: none; + background-color: var(--red); +} + +.shareBox { + width: 280px; + display: flex; + align-items: center; + justify-content: center; + gap: 32px; + margin-top: 10px; +} + +.shareButton { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + font-size: 13px; + font-weight: 400; + color: var(--black); +} + @media (min-width: 768px) and (max-width: 1199px) { .container { width: 705px; From c19a637092f892b6a6e3fd72b4e54db22998047c Mon Sep 17 00:00:00 2001 From: kuum97 Date: Sun, 28 Apr 2024 21:42:41 +0900 Subject: [PATCH 07/18] Add LinkCard modal --- .../FolderPage/components/FolderLinkCard.jsx | 79 ++++++++++++++++--- src/pages/LinkCard.module.css | 61 +++++++++++--- 2 files changed, 118 insertions(+), 22 deletions(-) diff --git a/src/pages/FolderPage/components/FolderLinkCard.jsx b/src/pages/FolderPage/components/FolderLinkCard.jsx index 77e16fce9..45baa412f 100644 --- a/src/pages/FolderPage/components/FolderLinkCard.jsx +++ b/src/pages/FolderPage/components/FolderLinkCard.jsx @@ -3,8 +3,22 @@ import defaultImage from "../../../assets/card-default.png"; import styles from "../../LinkCard.module.css"; import { FaRegStar } from "react-icons/fa6"; import kebab from "../../../assets/kebab.svg"; +import { useState } from "react"; +import Modal from "../../../globalComponents/Modal"; function FolderLinkCard({ link }) { + const [onModal, setOnModal] = useState(false); + const [actionType, setActionType] = useState(""); + + const handleClickModal = (actionType) => { + if (actionType === "exit") { + return setOnModal(false); + } + + setActionType(actionType); + setOnModal(true); + }; + const { url, description, title, created_at, image_source } = link; const createdTime = displayCreatedTime(created_at); @@ -14,6 +28,7 @@ function FolderLinkCard({ link }) { const handleToggleDropDown = (e) => { e.preventDefault(); + e.stopPropagation(); const button = e.currentTarget; const linkInfo = button.closest(`.${styles.linkInfo}`); @@ -22,16 +37,13 @@ function FolderLinkCard({ link }) { }; return ( - -
- {title} - -
+
+ +
+ {title} + +
+
{createdTime}
@@ -42,11 +54,52 @@ function FolderLinkCard({ link }) {
{description}
{createdAtFormat}
- - + +
- + {onModal && actionType === "deleteLink" ? ( + handleClickModal()} + title={"링크 삭제"} + subTitle={url} + > +
+ +
+ + ) : actionType === "addLink" ? ( + handleClickModal()} + title={"폴더에 추가"} + subTitle={"링크 주소"} + > +
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+ +
+ + ) : null} +
); } diff --git a/src/pages/LinkCard.module.css b/src/pages/LinkCard.module.css index befb80a5d..c40ac118b 100644 --- a/src/pages/LinkCard.module.css +++ b/src/pages/LinkCard.module.css @@ -1,9 +1,5 @@ -.linkImageAnchor { - display: inline-block; - text-decoration: none; - margin-bottom: 10px; +.linkContainer { width: 340px; - height: 335px; border: none; border-radius: 15px; box-shadow: 0 0 15px 2px var(--gray-400); @@ -19,13 +15,13 @@ .linkImage { border-radius: 15px 15px 0 0; - width: 100%; - height: 200px; + width: 340px; + height: 100%; object-fit: cover; transition: transform 0.3s ease; } -.linkImageAnchor:hover .linkImage { +.linkImage:hover { transform: scale(1.3); } @@ -96,7 +92,7 @@ position: absolute; right: -55px; top: 35px; - z-index: 1; + z-index: 100; } .dropdown button { @@ -104,6 +100,7 @@ width: 100px; border: none; box-shadow: 0 0 15px 2px var(--gray-400); + cursor: pointer; } .dropdown button:first-child { @@ -114,6 +111,52 @@ background-color: var(--gray-400); } +.formContainer { + width: 280px; + display: flex; + flex-direction: column; + gap: 10px; + margin-top: 10px; +} + +.formButton { + width: 100%; + padding: 16px 20px; + border-radius: 10px; + border: none; + background: var(--primary-gradient); + font-size: 16px; + font-weight: 600; + color: var(--white); +} + +.redBackground { + background: none; + background-color: var(--red); +} + +.inputList { + display: flex; + flex-direction: column; + gap: 8px; +} + +.inputList button { + width: 100%; + text-align: left; + font-size: 16px; + font-weight: 400; + background-color: transparent; + border: none; + border-radius: 8px; + padding: 6px 15px; +} + +.inputList button:active { + background-color: var(--gray-400); + color: var(--primary); +} + @media (min-width: 375px) and (max-width: 767px) { .container, .linkImageAnchor, From 8d4d9cf8a09613874889c67cc62f22214afed17c Mon Sep 17 00:00:00 2001 From: kuum97 Date: Mon, 29 Apr 2024 13:22:42 +0900 Subject: [PATCH 08/18] Repactor share card style --- src/pages/LinkCard.module.css | 2 +- .../SharedPage/components/SharedLinkCard.jsx | 22 ++++++++++--------- 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/src/pages/LinkCard.module.css b/src/pages/LinkCard.module.css index c40ac118b..512d5dfa1 100644 --- a/src/pages/LinkCard.module.css +++ b/src/pages/LinkCard.module.css @@ -36,7 +36,7 @@ position: relative; } -.linkImageAnchor:hover .linkInfo { +.linkContainer:hover .linkInfo { background-color: var(--gray-400); } diff --git a/src/pages/SharedPage/components/SharedLinkCard.jsx b/src/pages/SharedPage/components/SharedLinkCard.jsx index d98fba819..2c12192e0 100644 --- a/src/pages/SharedPage/components/SharedLinkCard.jsx +++ b/src/pages/SharedPage/components/SharedLinkCard.jsx @@ -11,21 +11,23 @@ function SharedLinkCard({ link }) { const src = imageSource || defaultImage; return ( - -
- {title} -
+
+ +
+ {title} +
+
{createdTime}
{description}
{createdAtFormat}
- +
); } From bec021dac5662511b5aadf6a1acd5966104ca370 Mon Sep 17 00:00:00 2001 From: kuum97 Date: Mon, 29 Apr 2024 13:44:35 +0900 Subject: [PATCH 09/18] Repactor FoldersList modal --- src/globalComponents/Modal.jsx | 2 +- .../FolderPage/components/FoldersList.jsx | 119 +++++++++--------- .../{AddLinkForm.jsx => LinkAddForm.jsx} | 6 +- src/pages/FolderPage/index.jsx | 4 +- ...Form.module.css => LinkAddForm.module.css} | 0 5 files changed, 64 insertions(+), 67 deletions(-) rename src/pages/FolderPage/components/{AddLinkForm.jsx => LinkAddForm.jsx} (79%) rename src/pages/FolderPage/styles/{AddLinkForm.module.css => LinkAddForm.module.css} (100%) diff --git a/src/globalComponents/Modal.jsx b/src/globalComponents/Modal.jsx index 82a66fc93..c2f8a6ca7 100644 --- a/src/globalComponents/Modal.jsx +++ b/src/globalComponents/Modal.jsx @@ -7,7 +7,7 @@ function Modal({ children, onClick, title, subTitle }) {

{title}

{subTitle &&

{subTitle}

} {children} -
diff --git a/src/pages/FolderPage/components/FoldersList.jsx b/src/pages/FolderPage/components/FoldersList.jsx index 6412b9174..195bd2e0a 100644 --- a/src/pages/FolderPage/components/FoldersList.jsx +++ b/src/pages/FolderPage/components/FoldersList.jsx @@ -6,6 +6,53 @@ import kakao from "../../../assets/kakaotalk.png"; import facebook from "../../../assets/facebook.png"; import share from "../../../assets/share.png"; +function FolderAddForm() { + return ( +
+ + +
+ ); +} + +function SocialShareBox() { + return ( +
+
+ kakaoBtn + 카카오톡 +
+
+ facebookBtn + 페이스북 +
+
+ shareBtn + 링크 복사 +
+
+ ); +} + +function FolderEditForm() { + return ( +
+ + +
+ ); +} + +function FolderDeleteForm() { + return ( +
+ +
+ ); +} + function FoldersList({ handleClick, folders, @@ -13,14 +60,17 @@ function FoldersList({ selectedFolderId, }) { const [onModal, setOnModal] = useState(false); - const [actionType, setActionType] = useState(""); + const [modalContent, setModalContent] = useState(null); const handleClickModal = (actionType) => { - if (actionType === "exit") { - return setOnModal(false); - } + const actionTypes = { + add: , + share: , + modify: , + delete: , + }; - setActionType(actionType); + setModalContent(actionTypes[actionType]); setOnModal(true); }; @@ -65,62 +115,9 @@ function FoldersList({
)}
- {onModal && actionType === "add" ? ( - handleClickModal()} title={"폴더 추가"}> -
- - -
- - ) : actionType === "share" ? ( - handleClickModal()} - title={"폴더 공유"} - subTitle={"폴더명"} - > -
-
- kakaoBtn - 카카오톡 -
-
- facebookBtn - 페이스북 -
-
- shareBtn - 링크 복사 -
-
- - ) : actionType === "modify" ? ( - handleClickModal()} title={"폴더 이름 변경"}> -
- - -
- - ) : actionType === "delete" ? ( - handleClickModal()} - title={"폴더 삭제"} - subTitle={"폴더명"} - > -
- -
- - ) : null} + {onModal && ( + setOnModal(false)}>{modalContent} + )} ); } diff --git a/src/pages/FolderPage/components/AddLinkForm.jsx b/src/pages/FolderPage/components/LinkAddForm.jsx similarity index 79% rename from src/pages/FolderPage/components/AddLinkForm.jsx rename to src/pages/FolderPage/components/LinkAddForm.jsx index a2111408f..c54a9aefb 100644 --- a/src/pages/FolderPage/components/AddLinkForm.jsx +++ b/src/pages/FolderPage/components/LinkAddForm.jsx @@ -1,7 +1,7 @@ import { FaLink } from "react-icons/fa"; -import styles from "../styles/AddLinkForm.module.css"; +import styles from "../styles/LinkAddForm.module.css"; -function AddLinkForm() { +function LinkAddForm() { return (
@@ -17,4 +17,4 @@ function AddLinkForm() { ); } -export default AddLinkForm; +export default LinkAddForm; diff --git a/src/pages/FolderPage/index.jsx b/src/pages/FolderPage/index.jsx index d610f4485..1bed3b9c7 100644 --- a/src/pages/FolderPage/index.jsx +++ b/src/pages/FolderPage/index.jsx @@ -1,6 +1,6 @@ import Header from "../../globalComponents/Header"; import Footer from "../../globalComponents/Footer"; -import AddLinkForm from "./components/AddLinkForm"; +import LinkAddForm from "./components/LinkAddForm"; import { useEffect, useState } from "react"; import { getFoldersByUserId, getUserById } from "../../services/api"; import useAsync from "../../services/useAsync"; @@ -44,7 +44,7 @@ function FolderPage() { /> {isUserLoggedIn ? ( <> - + ) : ( diff --git a/src/pages/FolderPage/styles/AddLinkForm.module.css b/src/pages/FolderPage/styles/LinkAddForm.module.css similarity index 100% rename from src/pages/FolderPage/styles/AddLinkForm.module.css rename to src/pages/FolderPage/styles/LinkAddForm.module.css From a9d870bf9a2d588e6c42b1c49fcb3de63a2b24c8 Mon Sep 17 00:00:00 2001 From: kuum97 Date: Mon, 29 Apr 2024 16:54:26 +0900 Subject: [PATCH 10/18] Repactor modal's children --- src/globalComponents/Modal.jsx | 4 +- src/globalComponents/Modal.module.css | 12 --- .../FolderPage/components/FoldersList.jsx | 74 ++++++++++++------- .../FolderPage/styles/FoldersList.module.css | 12 +++ 4 files changed, 61 insertions(+), 41 deletions(-) diff --git a/src/globalComponents/Modal.jsx b/src/globalComponents/Modal.jsx index c2f8a6ca7..aba7fa496 100644 --- a/src/globalComponents/Modal.jsx +++ b/src/globalComponents/Modal.jsx @@ -1,11 +1,9 @@ import styles from "./Modal.module.css"; -function Modal({ children, onClick, title, subTitle }) { +function Modal({ children, onClick }) { return (
-

{title}

- {subTitle &&

{subTitle}

} {children} - + <> +

폴더 추가

+
+ + +
+ ); } function SocialShareBox() { return ( -
-
- kakaoBtn - 카카오톡 + <> +

폴더 공유

+

폴더명

+
+
+ kakaoBtn + 카카오톡 +
+
+ facebookBtn + 페이스북 +
+
+ shareBtn + 링크 복사 +
-
- facebookBtn - 페이스북 -
-
- shareBtn - 링크 복사 -
-
+ ); } function FolderEditForm() { return ( -
- - -
+ <> +

폴더 이름 변경

+
+ + +
+ ); } function FolderDeleteForm() { return ( -
- -
+ <> +

폴더 삭제

+

폴더명

+
+ +
+ ); } diff --git a/src/pages/FolderPage/styles/FoldersList.module.css b/src/pages/FolderPage/styles/FoldersList.module.css index 047d853e3..7335c4766 100644 --- a/src/pages/FolderPage/styles/FoldersList.module.css +++ b/src/pages/FolderPage/styles/FoldersList.module.css @@ -114,6 +114,18 @@ color: var(--black); } +.title { + font-size: 20px; + font-weight: 700; + color: var(--black); +} + +.subTitle { + font-size: 14px; + font-weight: 400; + color: var(--gray-600); +} + @media (min-width: 768px) and (max-width: 1199px) { .container { width: 705px; From 88959278b8c5c79aba696d73ecb980c78739051d Mon Sep 17 00:00:00 2001 From: kuum97 Date: Mon, 29 Apr 2024 17:01:53 +0900 Subject: [PATCH 11/18] Repactor FolderLinkCard modal --- .../FolderPage/components/FolderLinkCard.jsx | 91 ++++++++++--------- src/pages/LinkCard.module.css | 12 +++ 2 files changed, 61 insertions(+), 42 deletions(-) diff --git a/src/pages/FolderPage/components/FolderLinkCard.jsx b/src/pages/FolderPage/components/FolderLinkCard.jsx index 45baa412f..b30f9bb1f 100644 --- a/src/pages/FolderPage/components/FolderLinkCard.jsx +++ b/src/pages/FolderPage/components/FolderLinkCard.jsx @@ -6,16 +6,57 @@ import kebab from "../../../assets/kebab.svg"; import { useState } from "react"; import Modal from "../../../globalComponents/Modal"; +function LinkDeleteForm() { + return ( + <> +

링크 삭제

+

url

+
+ +
+ + ); +} + +function LinkAddToFolderForm() { + return ( + <> +

폴더에 추가

+

링크 주소

+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+ +
+ + ); +} + function FolderLinkCard({ link }) { const [onModal, setOnModal] = useState(false); - const [actionType, setActionType] = useState(""); + const [modalContent, setModalContent] = useState(null); const handleClickModal = (actionType) => { - if (actionType === "exit") { - return setOnModal(false); - } + const actionTypes = { + deleteLink: , + addLink: , + }; - setActionType(actionType); + setModalContent(actionTypes[actionType]); setOnModal(true); }; @@ -62,43 +103,9 @@ function FolderLinkCard({ link }) {
- {onModal && actionType === "deleteLink" ? ( - handleClickModal()} - title={"링크 삭제"} - subTitle={url} - > -
- -
- - ) : actionType === "addLink" ? ( - handleClickModal()} - title={"폴더에 추가"} - subTitle={"링크 주소"} - > -
-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
- -
- - ) : null} + {onModal && ( + setOnModal(false)}>{modalContent} + )}
); } diff --git a/src/pages/LinkCard.module.css b/src/pages/LinkCard.module.css index 512d5dfa1..4613f6149 100644 --- a/src/pages/LinkCard.module.css +++ b/src/pages/LinkCard.module.css @@ -157,6 +157,18 @@ color: var(--primary); } +.title { + font-size: 20px; + font-weight: 700; + color: var(--black); +} + +.subTitle { + font-size: 14px; + font-weight: 400; + color: var(--gray-600); +} + @media (min-width: 375px) and (max-width: 767px) { .container, .linkImageAnchor, From 6ea907719b94f0a94c8819c463302fcb0be547c7 Mon Sep 17 00:00:00 2001 From: kuum97 Date: Mon, 29 Apr 2024 17:36:08 +0900 Subject: [PATCH 12/18] Repactor component architecture --- .../{styles => Avatar}/Avatar.module.css | 0 .../{Avatar.jsx => Avatar/index.jsx} | 2 +- .../{styles => Footer}/Footer.module.css | 0 .../{Footer.jsx => Footer/index.jsx} | 2 +- .../{styles => Header}/Header.module.css | 0 .../{Header.jsx => Header/index.jsx} | 6 +++--- src/globalComponents/{ => Modal}/Modal.module.css | 0 .../{Modal.jsx => Modal/index.jsx} | 0 .../{styles => SearchBar}/SearchBar.module.css | 0 .../{SearchBar.jsx => SearchBar/index.jsx} | 2 +- .../FoldersController.module.css | 0 .../index.jsx} | 12 ++++++------ .../index.jsx} | 15 +++++++++------ .../index.jsx} | 4 ++-- .../FoldersList}/FoldersList.module.css | 0 .../{FoldersList.jsx => FoldersList/index.jsx} | 12 ++++++------ .../LinkAddForm}/LinkAddForm.module.css | 0 .../{LinkAddForm.jsx => LinkAddForm/index.jsx} | 2 +- src/pages/FolderPage/index.jsx | 11 +++++------ src/pages/FolderPage/index.module.css | 4 ---- .../index.jsx} | 9 ++++++--- .../{ => SharedLinkCards}/SharedLinkCards.jsx | 6 +++--- .../UserProfileAndTitle.module.css | 0 .../index.jsx} | 4 ++-- src/pages/SharedPage/index.jsx | 12 ++++++------ 25 files changed, 52 insertions(+), 51 deletions(-) rename src/globalComponents/{styles => Avatar}/Avatar.module.css (100%) rename src/globalComponents/{Avatar.jsx => Avatar/index.jsx} (85%) rename src/globalComponents/{styles => Footer}/Footer.module.css (100%) rename src/globalComponents/{Footer.jsx => Footer/index.jsx} (95%) rename src/globalComponents/{styles => Header}/Header.module.css (100%) rename src/globalComponents/{Header.jsx => Header/index.jsx} (80%) rename src/globalComponents/{ => Modal}/Modal.module.css (100%) rename src/globalComponents/{Modal.jsx => Modal/index.jsx} (100%) rename src/globalComponents/{styles => SearchBar}/SearchBar.module.css (100%) rename src/globalComponents/{SearchBar.jsx => SearchBar/index.jsx} (88%) rename src/pages/FolderPage/{styles => components/FolderController}/FoldersController.module.css (100%) rename src/pages/FolderPage/components/{FoldersController.jsx => FolderController/index.jsx} (81%) rename src/pages/FolderPage/components/{FolderLinkCard.jsx => FolderLinkCard/index.jsx} (89%) rename src/pages/FolderPage/components/{FolderLinkCards.jsx => FolderLinkCards/index.jsx} (84%) rename src/pages/FolderPage/{styles => components/FoldersList}/FoldersList.module.css (100%) rename src/pages/FolderPage/components/{FoldersList.jsx => FoldersList/index.jsx} (92%) rename src/pages/FolderPage/{styles => components/LinkAddForm}/LinkAddForm.module.css (100%) rename src/pages/FolderPage/components/{LinkAddForm.jsx => LinkAddForm/index.jsx} (89%) delete mode 100644 src/pages/FolderPage/index.module.css rename src/pages/SharedPage/components/{SharedLinkCard.jsx => SharedLinkCard/index.jsx} (81%) rename src/pages/SharedPage/components/{ => SharedLinkCards}/SharedLinkCards.jsx (68%) rename src/pages/SharedPage/{styles => components/UserProfileAndTitle}/UserProfileAndTitle.module.css (100%) rename src/pages/SharedPage/components/{UserProfileAndTitle.jsx => UserProfileAndTitle/index.jsx} (74%) diff --git a/src/globalComponents/styles/Avatar.module.css b/src/globalComponents/Avatar/Avatar.module.css similarity index 100% rename from src/globalComponents/styles/Avatar.module.css rename to src/globalComponents/Avatar/Avatar.module.css diff --git a/src/globalComponents/Avatar.jsx b/src/globalComponents/Avatar/index.jsx similarity index 85% rename from src/globalComponents/Avatar.jsx rename to src/globalComponents/Avatar/index.jsx index 9dead45a0..10b093ab0 100644 --- a/src/globalComponents/Avatar.jsx +++ b/src/globalComponents/Avatar/index.jsx @@ -1,5 +1,5 @@ import classNames from "classnames"; -import styles from "./styles/Avatar.module.css"; +import styles from "./Avatar.module.css"; function Avatar({ src, size }) { const avatarClass = classNames(styles.avatar, { diff --git a/src/globalComponents/styles/Footer.module.css b/src/globalComponents/Footer/Footer.module.css similarity index 100% rename from src/globalComponents/styles/Footer.module.css rename to src/globalComponents/Footer/Footer.module.css diff --git a/src/globalComponents/Footer.jsx b/src/globalComponents/Footer/index.jsx similarity index 95% rename from src/globalComponents/Footer.jsx rename to src/globalComponents/Footer/index.jsx index 64a96a968..7692f9707 100644 --- a/src/globalComponents/Footer.jsx +++ b/src/globalComponents/Footer/index.jsx @@ -1,5 +1,5 @@ import { FaFacebook, FaInstagram, FaTwitter, FaYoutube } from "react-icons/fa"; -import styles from "./styles/Footer.module.css"; +import styles from "./Footer.module.css"; function Footer() { return ( diff --git a/src/globalComponents/styles/Header.module.css b/src/globalComponents/Header/Header.module.css similarity index 100% rename from src/globalComponents/styles/Header.module.css rename to src/globalComponents/Header/Header.module.css diff --git a/src/globalComponents/Header.jsx b/src/globalComponents/Header/index.jsx similarity index 80% rename from src/globalComponents/Header.jsx rename to src/globalComponents/Header/index.jsx index 74db434c1..79a1bf7e6 100644 --- a/src/globalComponents/Header.jsx +++ b/src/globalComponents/Header/index.jsx @@ -1,6 +1,6 @@ -import mainLogo from "../assets/Linkbrary.png"; -import Avatar from "./Avatar"; -import styles from "./styles/Header.module.css"; +import mainLogo from "../../assets/Linkbrary.png"; +import styles from "./Header.module.css"; +import Avatar from "../Avatar"; function Header({ userAvatarImage, userProfileEmail, userLogInSuccess }) { return ( diff --git a/src/globalComponents/Modal.module.css b/src/globalComponents/Modal/Modal.module.css similarity index 100% rename from src/globalComponents/Modal.module.css rename to src/globalComponents/Modal/Modal.module.css diff --git a/src/globalComponents/Modal.jsx b/src/globalComponents/Modal/index.jsx similarity index 100% rename from src/globalComponents/Modal.jsx rename to src/globalComponents/Modal/index.jsx diff --git a/src/globalComponents/styles/SearchBar.module.css b/src/globalComponents/SearchBar/SearchBar.module.css similarity index 100% rename from src/globalComponents/styles/SearchBar.module.css rename to src/globalComponents/SearchBar/SearchBar.module.css diff --git a/src/globalComponents/SearchBar.jsx b/src/globalComponents/SearchBar/index.jsx similarity index 88% rename from src/globalComponents/SearchBar.jsx rename to src/globalComponents/SearchBar/index.jsx index 8cf6013d5..068cf225e 100644 --- a/src/globalComponents/SearchBar.jsx +++ b/src/globalComponents/SearchBar/index.jsx @@ -1,5 +1,5 @@ import { FaSearch } from "react-icons/fa"; -import styles from "./styles/SearchBar.module.css"; +import styles from "./SearchBar.module.css"; function SearchBar() { return ( diff --git a/src/pages/FolderPage/styles/FoldersController.module.css b/src/pages/FolderPage/components/FolderController/FoldersController.module.css similarity index 100% rename from src/pages/FolderPage/styles/FoldersController.module.css rename to src/pages/FolderPage/components/FolderController/FoldersController.module.css diff --git a/src/pages/FolderPage/components/FoldersController.jsx b/src/pages/FolderPage/components/FolderController/index.jsx similarity index 81% rename from src/pages/FolderPage/components/FoldersController.jsx rename to src/pages/FolderPage/components/FolderController/index.jsx index c3176abd9..047464abc 100644 --- a/src/pages/FolderPage/components/FoldersController.jsx +++ b/src/pages/FolderPage/components/FolderController/index.jsx @@ -1,11 +1,11 @@ -import FolderLinkCards from "./FolderLinkCards"; -import SearchBar from "../../../globalComponents/SearchBar"; import { useEffect, useState } from "react"; import { useSearchParams } from "react-router-dom"; -import { getLinksByUserIdAndFolderId } from "../../../services/api"; -import useAsync from "../../../services/useAsync"; -import FoldersList from "./FoldersList"; -import styles from "../styles/FoldersController.module.css"; +import useAsync from "../../../../services/useAsync"; +import { getLinksByUserIdAndFolderId } from "../../../../services/api"; +import styles from "./FoldersController.module.css"; +import SearchBar from "../../../../globalComponents/SearchBar"; +import FoldersList from "../FoldersList"; +import FolderLinkCards from "../FolderLinkCards"; function FoldersController({ folders, userId }) { const [loading, setLoading] = useState(true); diff --git a/src/pages/FolderPage/components/FolderLinkCard.jsx b/src/pages/FolderPage/components/FolderLinkCard/index.jsx similarity index 89% rename from src/pages/FolderPage/components/FolderLinkCard.jsx rename to src/pages/FolderPage/components/FolderLinkCard/index.jsx index b30f9bb1f..dfceb8d95 100644 --- a/src/pages/FolderPage/components/FolderLinkCard.jsx +++ b/src/pages/FolderPage/components/FolderLinkCard/index.jsx @@ -1,10 +1,13 @@ -import { displayCreatedTime, formatDateString } from "../../../utils/dateUtils"; -import defaultImage from "../../../assets/card-default.png"; -import styles from "../../LinkCard.module.css"; -import { FaRegStar } from "react-icons/fa6"; -import kebab from "../../../assets/kebab.svg"; import { useState } from "react"; -import Modal from "../../../globalComponents/Modal"; +import { + displayCreatedTime, + formatDateString, +} from "../../../../utils/dateUtils"; +import defaultImage from "../../../../assets/card-default.png"; +import kebab from "../../../../assets/kebab.svg"; +import styles from "../../../LinkCard.module.css"; +import { FaRegStar } from "react-icons/fa"; +import Modal from "../../../../globalComponents/Modal"; function LinkDeleteForm() { return ( diff --git a/src/pages/FolderPage/components/FolderLinkCards.jsx b/src/pages/FolderPage/components/FolderLinkCards/index.jsx similarity index 84% rename from src/pages/FolderPage/components/FolderLinkCards.jsx rename to src/pages/FolderPage/components/FolderLinkCards/index.jsx index 14170d6ea..c575c89fd 100644 --- a/src/pages/FolderPage/components/FolderLinkCards.jsx +++ b/src/pages/FolderPage/components/FolderLinkCards/index.jsx @@ -1,5 +1,5 @@ -import FolderLinkCard from "./FolderLinkCard"; -import styles from "../../LinkCards.module.css"; +import styles from "../../../LinkCards.module.css"; +import FolderLinkCard from "../FolderLinkCard"; function FolderLinkCards({ links }) { return ( diff --git a/src/pages/FolderPage/styles/FoldersList.module.css b/src/pages/FolderPage/components/FoldersList/FoldersList.module.css similarity index 100% rename from src/pages/FolderPage/styles/FoldersList.module.css rename to src/pages/FolderPage/components/FoldersList/FoldersList.module.css diff --git a/src/pages/FolderPage/components/FoldersList.jsx b/src/pages/FolderPage/components/FoldersList/index.jsx similarity index 92% rename from src/pages/FolderPage/components/FoldersList.jsx rename to src/pages/FolderPage/components/FoldersList/index.jsx index ca497855c..0c274f342 100644 --- a/src/pages/FolderPage/components/FoldersList.jsx +++ b/src/pages/FolderPage/components/FoldersList/index.jsx @@ -1,10 +1,10 @@ import { useState } from "react"; -import { FaRegShareSquare, FaPencilAlt, FaRegTrashAlt } from "react-icons/fa"; -import styles from "../styles/FoldersList.module.css"; -import Modal from "../../../globalComponents/Modal"; -import kakao from "../../../assets/kakaotalk.png"; -import facebook from "../../../assets/facebook.png"; -import share from "../../../assets/share.png"; +import styles from "./FoldersList.module.css"; +import { FaPencilAlt, FaRegShareSquare, FaRegTrashAlt } from "react-icons/fa"; +import Modal from "../../../../globalComponents/Modal"; +import kakao from "../../../../assets/kakaotalk.png"; +import facebook from "../../../../assets/facebook.png"; +import share from "../../../../assets/share.png"; function FolderAddForm() { return ( diff --git a/src/pages/FolderPage/styles/LinkAddForm.module.css b/src/pages/FolderPage/components/LinkAddForm/LinkAddForm.module.css similarity index 100% rename from src/pages/FolderPage/styles/LinkAddForm.module.css rename to src/pages/FolderPage/components/LinkAddForm/LinkAddForm.module.css diff --git a/src/pages/FolderPage/components/LinkAddForm.jsx b/src/pages/FolderPage/components/LinkAddForm/index.jsx similarity index 89% rename from src/pages/FolderPage/components/LinkAddForm.jsx rename to src/pages/FolderPage/components/LinkAddForm/index.jsx index c54a9aefb..0cc788ea5 100644 --- a/src/pages/FolderPage/components/LinkAddForm.jsx +++ b/src/pages/FolderPage/components/LinkAddForm/index.jsx @@ -1,5 +1,5 @@ import { FaLink } from "react-icons/fa"; -import styles from "../styles/LinkAddForm.module.css"; +import styles from "./LinkAddForm.module.css"; function LinkAddForm() { return ( diff --git a/src/pages/FolderPage/index.jsx b/src/pages/FolderPage/index.jsx index 1bed3b9c7..13d9207cf 100644 --- a/src/pages/FolderPage/index.jsx +++ b/src/pages/FolderPage/index.jsx @@ -1,11 +1,10 @@ -import Header from "../../globalComponents/Header"; -import Footer from "../../globalComponents/Footer"; -import LinkAddForm from "./components/LinkAddForm"; import { useEffect, useState } from "react"; -import { getFoldersByUserId, getUserById } from "../../services/api"; import useAsync from "../../services/useAsync"; -import "../../global.css"; -import FoldersController from "./components/FoldersController"; +import { getFoldersByUserId, getUserById } from "../../services/api"; +import Header from "../../globalComponents/Header"; +import LinkAddForm from "./components/LinkAddForm"; +import FoldersController from "./components/FolderController"; +import Footer from "../../globalComponents/Footer"; function FolderPage() { let userId = 1; diff --git a/src/pages/FolderPage/index.module.css b/src/pages/FolderPage/index.module.css deleted file mode 100644 index 6bb6d5095..000000000 --- a/src/pages/FolderPage/index.module.css +++ /dev/null @@ -1,4 +0,0 @@ -.container { - position: relative; - height: 100vh; -} diff --git a/src/pages/SharedPage/components/SharedLinkCard.jsx b/src/pages/SharedPage/components/SharedLinkCard/index.jsx similarity index 81% rename from src/pages/SharedPage/components/SharedLinkCard.jsx rename to src/pages/SharedPage/components/SharedLinkCard/index.jsx index 2c12192e0..7f4403061 100644 --- a/src/pages/SharedPage/components/SharedLinkCard.jsx +++ b/src/pages/SharedPage/components/SharedLinkCard/index.jsx @@ -1,6 +1,9 @@ -import { displayCreatedTime, formatDateString } from "../../../utils/dateUtils"; -import defaultImage from "../../../assets/card-default.png"; -import styles from "../../LinkCard.module.css"; +import { + displayCreatedTime, + formatDateString, +} from "../../../../utils/dateUtils"; +import defaultImage from "../../../../assets/card-default.png"; +import styles from "../../../LinkCard.module.css"; function SharedLinkCard({ link }) { const { url, description, title, createdAt, imageSource } = link; diff --git a/src/pages/SharedPage/components/SharedLinkCards.jsx b/src/pages/SharedPage/components/SharedLinkCards/SharedLinkCards.jsx similarity index 68% rename from src/pages/SharedPage/components/SharedLinkCards.jsx rename to src/pages/SharedPage/components/SharedLinkCards/SharedLinkCards.jsx index a7bc87c8e..d41dfff52 100644 --- a/src/pages/SharedPage/components/SharedLinkCards.jsx +++ b/src/pages/SharedPage/components/SharedLinkCards/SharedLinkCards.jsx @@ -1,6 +1,6 @@ -import SearchBar from "../../../globalComponents/SearchBar"; -import SharedLinkCard from "./SharedLinkCard"; -import styles from "../../LinkCards.module.css"; +import styles from "../../../LinkCards.module.css"; +import SearchBar from "../../../../globalComponents/SearchBar"; +import SharedLinkCard from "../SharedLinkCard"; function SharedLinkCards({ links }) { return ( diff --git a/src/pages/SharedPage/styles/UserProfileAndTitle.module.css b/src/pages/SharedPage/components/UserProfileAndTitle/UserProfileAndTitle.module.css similarity index 100% rename from src/pages/SharedPage/styles/UserProfileAndTitle.module.css rename to src/pages/SharedPage/components/UserProfileAndTitle/UserProfileAndTitle.module.css diff --git a/src/pages/SharedPage/components/UserProfileAndTitle.jsx b/src/pages/SharedPage/components/UserProfileAndTitle/index.jsx similarity index 74% rename from src/pages/SharedPage/components/UserProfileAndTitle.jsx rename to src/pages/SharedPage/components/UserProfileAndTitle/index.jsx index 1800d31a0..10c052f2e 100644 --- a/src/pages/SharedPage/components/UserProfileAndTitle.jsx +++ b/src/pages/SharedPage/components/UserProfileAndTitle/index.jsx @@ -1,5 +1,5 @@ -import Avatar from "../../../globalComponents/Avatar"; -import styles from "../styles/UserProfileAndTitle.module.css"; +import styles from "./UserProfileAndTitle.module.css"; +import Avatar from "../../../../globalComponents/Avatar"; function UserProfileAndTitle({ userName, folderName, folderImage }) { return ( diff --git a/src/pages/SharedPage/index.jsx b/src/pages/SharedPage/index.jsx index bbe079c7c..079c2d47f 100644 --- a/src/pages/SharedPage/index.jsx +++ b/src/pages/SharedPage/index.jsx @@ -1,11 +1,11 @@ -import Header from "../../globalComponents/Header"; -import Footer from "../../globalComponents/Footer"; -import UserProfileAndTitle from "./components/UserProfileAndTitle"; -import SharedLinkCards from "./components/SharedLinkCards"; import { useEffect, useState } from "react"; -import { getFolder, getUser } from "../../services/api"; -import useAsync from "../../services/useAsync"; import "../../global.css"; +import useAsync from "../../services/useAsync"; +import { getFolder, getUser } from "../../services/api"; +import Header from "../../globalComponents/Header"; +import UserProfileAndTitle from "./components/UserProfileAndTitle"; +import SharedLinkCards from "./components/SharedLinkCards/SharedLinkCards"; +import Footer from "../../globalComponents/Footer"; function SharedPage() { const [isUserLoggedIn, setIsUserLoggedIn] = useState(false); From b46ea0fa2d830dbacffa5180caa26fd615cba83e Mon Sep 17 00:00:00 2001 From: kuum97 Date: Mon, 29 Apr 2024 17:51:36 +0900 Subject: [PATCH 13/18] Add FoldersList modal's children component --- .../Modal/ModalChildren.module.css | 64 ++++++++++++++++ .../FoldersList/FoldersList.module.css | 65 ---------------- .../components/FolderAddForm/index.jsx | 19 +++++ .../components/FolderDeleteForm/index.jsx | 17 +++++ .../components/FolderEditForm/index.jsx | 19 +++++ .../components/SocialShareBox/index.jsx | 29 +++++++ .../components/FoldersList/index.jsx | 76 +------------------ 7 files changed, 152 insertions(+), 137 deletions(-) create mode 100644 src/globalComponents/Modal/ModalChildren.module.css create mode 100644 src/pages/FolderPage/components/FoldersList/components/FolderAddForm/index.jsx create mode 100644 src/pages/FolderPage/components/FoldersList/components/FolderDeleteForm/index.jsx create mode 100644 src/pages/FolderPage/components/FoldersList/components/FolderEditForm/index.jsx create mode 100644 src/pages/FolderPage/components/FoldersList/components/SocialShareBox/index.jsx diff --git a/src/globalComponents/Modal/ModalChildren.module.css b/src/globalComponents/Modal/ModalChildren.module.css new file mode 100644 index 000000000..0a5fa6e44 --- /dev/null +++ b/src/globalComponents/Modal/ModalChildren.module.css @@ -0,0 +1,64 @@ +.formContainer { + width: 280px; + display: flex; + flex-direction: column; + gap: 10px; + margin-top: 10px; +} + +.formInput { + width: 100%; + padding: 15px 18px; + border: 1px solid var(--primary); + border-radius: 10px; + color: var(--black); + font-size: 16px; + font-weight: 400; +} + +.formButton { + width: 100%; + padding: 16px 20px; + border-radius: 10px; + border: none; + background: var(--primary-gradient); + font-size: 16px; + font-weight: 600; + color: var(--white); +} + +.redBackground { + background: none; + background-color: var(--red); +} + +.shareBox { + width: 280px; + display: flex; + align-items: center; + justify-content: center; + gap: 32px; + margin-top: 10px; +} + +.shareButton { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + font-size: 13px; + font-weight: 400; + color: var(--black); +} + +.title { + font-size: 20px; + font-weight: 700; + color: var(--black); +} + +.subTitle { + font-size: 14px; + font-weight: 400; + color: var(--gray-600); +} diff --git a/src/pages/FolderPage/components/FoldersList/FoldersList.module.css b/src/pages/FolderPage/components/FoldersList/FoldersList.module.css index 7335c4766..ef3d1ec49 100644 --- a/src/pages/FolderPage/components/FoldersList/FoldersList.module.css +++ b/src/pages/FolderPage/components/FoldersList/FoldersList.module.css @@ -61,71 +61,6 @@ gap: 2px; } -.formContainer { - width: 280px; - display: flex; - flex-direction: column; - gap: 10px; - margin-top: 10px; -} - -.formInput { - width: 100%; - padding: 15px 18px; - border: 1px solid var(--primary); - border-radius: 10px; - color: var(--black); - font-size: 16px; - font-weight: 400; -} - -.formButton { - width: 100%; - padding: 16px 20px; - border-radius: 10px; - border: none; - background: var(--primary-gradient); - font-size: 16px; - font-weight: 600; - color: var(--white); -} - -.redBackground { - background: none; - background-color: var(--red); -} - -.shareBox { - width: 280px; - display: flex; - align-items: center; - justify-content: center; - gap: 32px; - margin-top: 10px; -} - -.shareButton { - display: flex; - flex-direction: column; - align-items: center; - gap: 10px; - font-size: 13px; - font-weight: 400; - color: var(--black); -} - -.title { - font-size: 20px; - font-weight: 700; - color: var(--black); -} - -.subTitle { - font-size: 14px; - font-weight: 400; - color: var(--gray-600); -} - @media (min-width: 768px) and (max-width: 1199px) { .container { width: 705px; diff --git a/src/pages/FolderPage/components/FoldersList/components/FolderAddForm/index.jsx b/src/pages/FolderPage/components/FoldersList/components/FolderAddForm/index.jsx new file mode 100644 index 000000000..21f3b289c --- /dev/null +++ b/src/pages/FolderPage/components/FoldersList/components/FolderAddForm/index.jsx @@ -0,0 +1,19 @@ +import styles from "../../../../../../globalComponents/Modal/ModalChildren.module.css"; + +function FolderAddForm() { + return ( + <> +

폴더 추가

+
+ + +
+ + ); +} + +export default FolderAddForm; diff --git a/src/pages/FolderPage/components/FoldersList/components/FolderDeleteForm/index.jsx b/src/pages/FolderPage/components/FoldersList/components/FolderDeleteForm/index.jsx new file mode 100644 index 000000000..3ff5fd490 --- /dev/null +++ b/src/pages/FolderPage/components/FoldersList/components/FolderDeleteForm/index.jsx @@ -0,0 +1,17 @@ +import styles from "../../../../../../globalComponents/Modal/ModalChildren.module.css"; + +function FolderDeleteForm() { + return ( + <> +

폴더 삭제

+

폴더명

+
+ +
+ + ); +} + +export default FolderDeleteForm; diff --git a/src/pages/FolderPage/components/FoldersList/components/FolderEditForm/index.jsx b/src/pages/FolderPage/components/FoldersList/components/FolderEditForm/index.jsx new file mode 100644 index 000000000..6c8307384 --- /dev/null +++ b/src/pages/FolderPage/components/FoldersList/components/FolderEditForm/index.jsx @@ -0,0 +1,19 @@ +import styles from "../../../../../../globalComponents/Modal/ModalChildren.module.css"; + +function FolderEditForm() { + return ( + <> +

폴더 이름 변경

+
+ + +
+ + ); +} + +export default FolderEditForm; diff --git a/src/pages/FolderPage/components/FoldersList/components/SocialShareBox/index.jsx b/src/pages/FolderPage/components/FoldersList/components/SocialShareBox/index.jsx new file mode 100644 index 000000000..7f514943f --- /dev/null +++ b/src/pages/FolderPage/components/FoldersList/components/SocialShareBox/index.jsx @@ -0,0 +1,29 @@ +import styles from "../../../../../../globalComponents/Modal/ModalChildren.module.css"; +import kakao from "../../../../../../assets/kakaotalk.png"; +import facebook from "../../../../../../assets/facebook.png"; +import share from "../../../../../../assets/share.png"; + +function SocialShareBox() { + return ( + <> +

폴더 공유

+

폴더명

+
+
+ kakaoBtn + 카카오톡 +
+
+ facebookBtn + 페이스북 +
+
+ shareBtn + 링크 복사 +
+
+ + ); +} + +export default SocialShareBox; diff --git a/src/pages/FolderPage/components/FoldersList/index.jsx b/src/pages/FolderPage/components/FoldersList/index.jsx index 0c274f342..857c3aa75 100644 --- a/src/pages/FolderPage/components/FoldersList/index.jsx +++ b/src/pages/FolderPage/components/FoldersList/index.jsx @@ -2,78 +2,10 @@ import { useState } from "react"; import styles from "./FoldersList.module.css"; import { FaPencilAlt, FaRegShareSquare, FaRegTrashAlt } from "react-icons/fa"; import Modal from "../../../../globalComponents/Modal"; -import kakao from "../../../../assets/kakaotalk.png"; -import facebook from "../../../../assets/facebook.png"; -import share from "../../../../assets/share.png"; - -function FolderAddForm() { - return ( - <> -

폴더 추가

-
- - -
- - ); -} - -function SocialShareBox() { - return ( - <> -

폴더 공유

-

폴더명

-
-
- kakaoBtn - 카카오톡 -
-
- facebookBtn - 페이스북 -
-
- shareBtn - 링크 복사 -
-
- - ); -} - -function FolderEditForm() { - return ( - <> -

폴더 이름 변경

-
- - -
- - ); -} - -function FolderDeleteForm() { - return ( - <> -

폴더 삭제

-

폴더명

-
- -
- - ); -} +import FolderAddForm from "./components/FolderAddForm"; +import SocialShareBox from "./components/SocialShareBox"; +import FolderEditForm from "./components/FolderEditForm"; +import FolderDeleteForm from "./components/FolderDeleteForm"; function FoldersList({ handleClick, From 9e28bd0a4372205046e4f5321ee485e0e0d8a714 Mon Sep 17 00:00:00 2001 From: kuum97 Date: Mon, 29 Apr 2024 17:55:55 +0900 Subject: [PATCH 14/18] Add FolderLinkCard modal's children components --- .../components/LinkAddToFolderForm/index.jsx | 29 +++++++++++++ .../components/LinkDeleteForm/index.jsx | 17 ++++++++ .../components/FolderLinkCard/index.jsx | 42 +------------------ 3 files changed, 48 insertions(+), 40 deletions(-) create mode 100644 src/pages/FolderPage/components/FolderLinkCard/components/LinkAddToFolderForm/index.jsx create mode 100644 src/pages/FolderPage/components/FolderLinkCard/components/LinkDeleteForm/index.jsx diff --git a/src/pages/FolderPage/components/FolderLinkCard/components/LinkAddToFolderForm/index.jsx b/src/pages/FolderPage/components/FolderLinkCard/components/LinkAddToFolderForm/index.jsx new file mode 100644 index 000000000..a336ee38f --- /dev/null +++ b/src/pages/FolderPage/components/FolderLinkCard/components/LinkAddToFolderForm/index.jsx @@ -0,0 +1,29 @@ +import styles from "../../../../../../globalComponents/Modal/ModalChildren.module.css"; + +function LinkAddToFolderForm() { + return ( + <> +

폴더에 추가

+

링크 주소

+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+ +
+ + ); +} + +export default LinkAddToFolderForm; diff --git a/src/pages/FolderPage/components/FolderLinkCard/components/LinkDeleteForm/index.jsx b/src/pages/FolderPage/components/FolderLinkCard/components/LinkDeleteForm/index.jsx new file mode 100644 index 000000000..9dd9633c4 --- /dev/null +++ b/src/pages/FolderPage/components/FolderLinkCard/components/LinkDeleteForm/index.jsx @@ -0,0 +1,17 @@ +import styles from "../../../../../../globalComponents/Modal/ModalChildren.module.css"; + +function LinkDeleteForm() { + return ( + <> +

링크 삭제

+

url

+
+ +
+ + ); +} + +export default LinkDeleteForm; diff --git a/src/pages/FolderPage/components/FolderLinkCard/index.jsx b/src/pages/FolderPage/components/FolderLinkCard/index.jsx index dfceb8d95..0217b23ca 100644 --- a/src/pages/FolderPage/components/FolderLinkCard/index.jsx +++ b/src/pages/FolderPage/components/FolderLinkCard/index.jsx @@ -8,46 +8,8 @@ import kebab from "../../../../assets/kebab.svg"; import styles from "../../../LinkCard.module.css"; import { FaRegStar } from "react-icons/fa"; import Modal from "../../../../globalComponents/Modal"; - -function LinkDeleteForm() { - return ( - <> -

링크 삭제

-

url

-
- -
- - ); -} - -function LinkAddToFolderForm() { - return ( - <> -

폴더에 추가

-

링크 주소

-
-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
- -
- - ); -} +import LinkAddToFolderForm from "./components/LinkAddToFolderForm"; +import LinkDeleteForm from "./components/LinkDeleteForm"; function FolderLinkCard({ link }) { const [onModal, setOnModal] = useState(false); From 73821a0d934b012f710d1a082e3da35afe847e25 Mon Sep 17 00:00:00 2001 From: kuum97 Date: Mon, 29 Apr 2024 17:57:53 +0900 Subject: [PATCH 15/18] Style LinkAddToFolderForm --- .../Modal/ModalChildren.module.css | 22 +++++++ src/pages/LinkCard.module.css | 58 ------------------- 2 files changed, 22 insertions(+), 58 deletions(-) diff --git a/src/globalComponents/Modal/ModalChildren.module.css b/src/globalComponents/Modal/ModalChildren.module.css index 0a5fa6e44..682778be1 100644 --- a/src/globalComponents/Modal/ModalChildren.module.css +++ b/src/globalComponents/Modal/ModalChildren.module.css @@ -62,3 +62,25 @@ font-weight: 400; color: var(--gray-600); } + +.inputList { + display: flex; + flex-direction: column; + gap: 8px; +} + +.inputList button { + width: 100%; + text-align: left; + font-size: 16px; + font-weight: 400; + background-color: transparent; + border: none; + border-radius: 8px; + padding: 6px 15px; +} + +.inputList button:active { + background-color: var(--gray-400); + color: var(--primary); +} diff --git a/src/pages/LinkCard.module.css b/src/pages/LinkCard.module.css index 4613f6149..27a745458 100644 --- a/src/pages/LinkCard.module.css +++ b/src/pages/LinkCard.module.css @@ -111,64 +111,6 @@ background-color: var(--gray-400); } -.formContainer { - width: 280px; - display: flex; - flex-direction: column; - gap: 10px; - margin-top: 10px; -} - -.formButton { - width: 100%; - padding: 16px 20px; - border-radius: 10px; - border: none; - background: var(--primary-gradient); - font-size: 16px; - font-weight: 600; - color: var(--white); -} - -.redBackground { - background: none; - background-color: var(--red); -} - -.inputList { - display: flex; - flex-direction: column; - gap: 8px; -} - -.inputList button { - width: 100%; - text-align: left; - font-size: 16px; - font-weight: 400; - background-color: transparent; - border: none; - border-radius: 8px; - padding: 6px 15px; -} - -.inputList button:active { - background-color: var(--gray-400); - color: var(--primary); -} - -.title { - font-size: 20px; - font-weight: 700; - color: var(--black); -} - -.subTitle { - font-size: 14px; - font-weight: 400; - color: var(--gray-600); -} - @media (min-width: 375px) and (max-width: 767px) { .container, .linkImageAnchor, From cc0a6dae4891bac8c158bc71789bbbec16e97950 Mon Sep 17 00:00:00 2001 From: kuum97 Date: Mon, 29 Apr 2024 19:26:30 +0900 Subject: [PATCH 16/18] Add clipboard copy logic for SocialShareBox --- src/global.css | 4 +++ .../Modal/ModalChildren.module.css | 8 ++++- .../components/SocialShareBox/index.jsx | 35 +++++++++++++++---- 3 files changed, 40 insertions(+), 7 deletions(-) diff --git a/src/global.css b/src/global.css index e1291748d..698cbf86f 100644 --- a/src/global.css +++ b/src/global.css @@ -7,6 +7,10 @@ body { Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; } +button { + cursor: pointer; +} + :root { --primary: #6d5afe; --red: #ff5b56; diff --git a/src/globalComponents/Modal/ModalChildren.module.css b/src/globalComponents/Modal/ModalChildren.module.css index 682778be1..befba1571 100644 --- a/src/globalComponents/Modal/ModalChildren.module.css +++ b/src/globalComponents/Modal/ModalChildren.module.css @@ -41,7 +41,7 @@ margin-top: 10px; } -.shareButton { +.shareButtonWrapper { display: flex; flex-direction: column; align-items: center; @@ -51,6 +51,12 @@ color: var(--black); } +.shareButton { + background: none; + border: none; + border-radius: 100%; +} + .title { font-size: 20px; font-weight: 700; diff --git a/src/pages/FolderPage/components/FoldersList/components/SocialShareBox/index.jsx b/src/pages/FolderPage/components/FoldersList/components/SocialShareBox/index.jsx index 7f514943f..1a680538f 100644 --- a/src/pages/FolderPage/components/FoldersList/components/SocialShareBox/index.jsx +++ b/src/pages/FolderPage/components/FoldersList/components/SocialShareBox/index.jsx @@ -2,23 +2,46 @@ import styles from "../../../../../../globalComponents/Modal/ModalChildren.modul import kakao from "../../../../../../assets/kakaotalk.png"; import facebook from "../../../../../../assets/facebook.png"; import share from "../../../../../../assets/share.png"; +import { useLocation } from "react-router-dom"; function SocialShareBox() { + const location = useLocation(); + + const handleCopyToClipBoard = async () => { + const url = window.location.origin + location.pathname + location.search; + try { + await navigator.clipboard.writeText(url); + alert("클립보드에 복사되었습니다!"); + } catch (error) { + console.error("클립보드 복사 실패:", error); + alert("클립보드 복사에 실패했습니다."); + } + }; + return ( <>

폴더 공유

폴더명

-
- kakaoBtn +
+ 카카오톡
-
- facebookBtn +
+ 페이스북
-
- shareBtn +
+ 링크 복사
From e2c0b25ba2dcf5fed7291f827808aef06ec617a9 Mon Sep 17 00:00:00 2001 From: kuum97 Date: Mon, 29 Apr 2024 19:55:00 +0900 Subject: [PATCH 17/18] Add kakao share feat --- public/index.html | 1 + .../components/SocialShareBox/index.jsx | 39 ++++++++++++++++++- .../components/FoldersList/index.jsx | 2 +- 3 files changed, 39 insertions(+), 3 deletions(-) diff --git a/public/index.html b/public/index.html index 3f2166cc3..74857128d 100644 --- a/public/index.html +++ b/public/index.html @@ -1,6 +1,7 @@ + Linkbrary diff --git a/src/pages/FolderPage/components/FoldersList/components/SocialShareBox/index.jsx b/src/pages/FolderPage/components/FoldersList/components/SocialShareBox/index.jsx index 1a680538f..289cef832 100644 --- a/src/pages/FolderPage/components/FoldersList/components/SocialShareBox/index.jsx +++ b/src/pages/FolderPage/components/FoldersList/components/SocialShareBox/index.jsx @@ -2,11 +2,19 @@ import styles from "../../../../../../globalComponents/Modal/ModalChildren.modul import kakao from "../../../../../../assets/kakaotalk.png"; import facebook from "../../../../../../assets/facebook.png"; import share from "../../../../../../assets/share.png"; +import defaultImg from "../../../../../../assets/card-default.png"; import { useLocation } from "react-router-dom"; +import { useEffect } from "react"; -function SocialShareBox() { +function SocialShareBox({ title }) { const location = useLocation(); + useEffect(() => { + if (window.Kakao && !window.Kakao.isInitialized()) { + window.Kakao.init("a841341da0099a5d1291638b48030745"); + } + }, []); + const handleCopyToClipBoard = async () => { const url = window.location.origin + location.pathname + location.search; try { @@ -18,13 +26,40 @@ function SocialShareBox() { } }; + const handleShareToKakao = (title) => { + window.Kakao.Link.sendDefault({ + objectType: "feed", + content: { + title: title, + description: "유용한 링크를 모은 폴더를 공유합니다.", + imageUrl: defaultImg, + link: { + mobileWebUrl: window.location.href, + webUrl: window.location.href, + }, + }, + buttons: [ + { + title: "웹으로 보기", + link: { + mobileWebUrl: window.location.href, + webUrl: window.location.href, + }, + }, + ], + }); + }; + return ( <>

폴더 공유

폴더명

- 카카오톡 diff --git a/src/pages/FolderPage/components/FoldersList/index.jsx b/src/pages/FolderPage/components/FoldersList/index.jsx index 857c3aa75..37effcbad 100644 --- a/src/pages/FolderPage/components/FoldersList/index.jsx +++ b/src/pages/FolderPage/components/FoldersList/index.jsx @@ -19,7 +19,7 @@ function FoldersList({ const handleClickModal = (actionType) => { const actionTypes = { add: , - share: , + share: , modify: , delete: , }; From 49b8898366afe4e3ec9bb0c8956013c5ef840ef8 Mon Sep 17 00:00:00 2001 From: kuum97 Date: Mon, 29 Apr 2024 20:02:58 +0900 Subject: [PATCH 18/18] Add facebook share feat --- .../components/SocialShareBox/index.jsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/pages/FolderPage/components/FoldersList/components/SocialShareBox/index.jsx b/src/pages/FolderPage/components/FoldersList/components/SocialShareBox/index.jsx index 289cef832..d71248d9e 100644 --- a/src/pages/FolderPage/components/FoldersList/components/SocialShareBox/index.jsx +++ b/src/pages/FolderPage/components/FoldersList/components/SocialShareBox/index.jsx @@ -8,6 +8,11 @@ import { useEffect } from "react"; function SocialShareBox({ title }) { const location = useLocation(); + const currentUrl = + window.location.origin + location.pathname + location.search; + const facebookShareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent( + currentUrl + )}`; useEffect(() => { if (window.Kakao && !window.Kakao.isInitialized()) { @@ -16,9 +21,8 @@ function SocialShareBox({ title }) { }, []); const handleCopyToClipBoard = async () => { - const url = window.location.origin + location.pathname + location.search; try { - await navigator.clipboard.writeText(url); + await navigator.clipboard.writeText(currentUrl); alert("클립보드에 복사되었습니다!"); } catch (error) { console.error("클립보드 복사 실패:", error); @@ -65,9 +69,11 @@ function SocialShareBox({ title }) { 카카오톡
- + + + 페이스북