From d9afea2d2e5e96d1c181c5544232e704e40fab20 Mon Sep 17 00:00:00 2001 From: sue Date: Sat, 20 Jan 2024 03:45:09 +0900 Subject: [PATCH 1/6] =?UTF-8?q?Chore:=20=EB=B9=8C=EB=93=9C=20=EC=97=90?= =?UTF-8?q?=EB=9F=AC=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Trip/TripRealtimeEditor.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Trip/TripRealtimeEditor.tsx b/src/components/Trip/TripRealtimeEditor.tsx index 4d810455..895b51e4 100644 --- a/src/components/Trip/TripRealtimeEditor.tsx +++ b/src/components/Trip/TripRealtimeEditor.tsx @@ -56,8 +56,8 @@ const TripRealtimeEditor = () => { const imageUrl = isImageUrlValid ? thumbnailUrl : null; return ( - -
+ +
{imageUrl ? ( Date: Sat, 20 Jan 2024 03:45:47 +0900 Subject: [PATCH 2/6] =?UTF-8?q?Feat:=20=EA=B2=BD=EB=B9=84=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EA=B6=8C=ED=95=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Plan/TripBudget.tsx | 110 ++++++++++++++------------- src/components/Trip/TripSchedule.tsx | 3 - 2 files changed, 58 insertions(+), 55 deletions(-) diff --git a/src/components/Plan/TripBudget.tsx b/src/components/Plan/TripBudget.tsx index 07b33ecf..ee1e5388 100644 --- a/src/components/Plan/TripBudget.tsx +++ b/src/components/Plan/TripBudget.tsx @@ -1,6 +1,7 @@ import { pubUpdateBudget } from '@api/socket'; import Alert from '@components/common/alert/Alert'; import { CloseIcon, SettingIcons } from '@components/common/icons/Icons'; +import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority'; import { socketContext } from '@hooks/useSocket'; import * as Progress from '@radix-ui/react-progress'; import { tripIdState } from '@recoil/socket'; @@ -8,6 +9,7 @@ import { useContext, useState } from 'react'; import { useRecoilValue } from 'recoil'; const TripBudget = () => { + const { tripAuthority } = useGetTripsAuthority(); const { tripBudget } = useContext(socketContext); const tripId = useRecoilValue(tripIdState); @@ -71,63 +73,67 @@ const TripBudget = () => {
목표 경비 - handleSetTargetBudget(inputBudget)} - closeOnConfirm={true} - children={ - + } + content={ +
+
+ setInputBudget(e.target.value)} + /> +
setInputBudget('')}> + {showCloseIcon && ( + + )}
- - - -
- )} - - } - content={ -
-
- setInputBudget(e.target.value)} - /> -
setInputBudget('')}> - {showCloseIcon && }
-
- 원 -
- } - /> + 원 +
+ } + /> + )}
{budget?.budget.toLocaleString() ?? '- '} diff --git a/src/components/Trip/TripSchedule.tsx b/src/components/Trip/TripSchedule.tsx index ad55e20e..c68a60e3 100644 --- a/src/components/Trip/TripSchedule.tsx +++ b/src/components/Trip/TripSchedule.tsx @@ -12,9 +12,6 @@ export const TripSchedule = () => { 5
-
23.12.23 - 23.12.25 From 61031ec055d5d4cd07b882a9a19a6ffa0a4185d3 Mon Sep 17 00:00:00 2001 From: sue Date: Sat, 20 Jan 2024 03:46:23 +0900 Subject: [PATCH 3/6] =?UTF-8?q?Feat:=20=EB=A7=B5=20=EB=A7=88=EC=BB=A4=20?= =?UTF-8?q?=EC=8B=9C=ED=80=80=EC=8A=A4=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/images/FifthMarker.png | Bin 1666 -> 0 bytes src/assets/images/FifthSelectedMarker.png | Bin 1272 -> 0 bytes src/assets/images/FirstMarker.png | Bin 1572 -> 0 bytes src/assets/images/FirstSelectedMarker.png | Bin 1019 -> 0 bytes src/assets/images/FourthMarker.png | Bin 1623 -> 0 bytes src/assets/images/FourthSelectedMarker.png | Bin 1139 -> 0 bytes src/assets/images/SecondMarker.png | Bin 1717 -> 0 bytes src/assets/images/SecondSelectedMarker.png | Bin 1162 -> 0 bytes src/assets/images/ThirdMarker.png | Bin 1711 -> 0 bytes src/assets/images/ThirdSelectedMarker.png | Bin 1254 -> 0 bytes src/components/Plan/TripMap.tsx | 108 +++++++++++---------- src/components/common/icons/Icons.tsx | 49 ++-------- src/utils/getColor.ts | 7 ++ 13 files changed, 72 insertions(+), 92 deletions(-) delete mode 100644 src/assets/images/FifthMarker.png delete mode 100644 src/assets/images/FifthSelectedMarker.png delete mode 100644 src/assets/images/FirstMarker.png delete mode 100644 src/assets/images/FirstSelectedMarker.png delete mode 100644 src/assets/images/FourthMarker.png delete mode 100644 src/assets/images/FourthSelectedMarker.png delete mode 100644 src/assets/images/SecondMarker.png delete mode 100644 src/assets/images/SecondSelectedMarker.png delete mode 100644 src/assets/images/ThirdMarker.png delete mode 100644 src/assets/images/ThirdSelectedMarker.png create mode 100644 src/utils/getColor.ts diff --git a/src/assets/images/FifthMarker.png b/src/assets/images/FifthMarker.png deleted file mode 100644 index 617795ce56b3d98b24c7c8f88a7932e57d347881..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1666 zcmV-|27UR7P)B4I2nm;{U?&LdC^$BBRW5Us+N2RK-ce%w!Yio5ut{}QD2;oS`|8)1L+wEqe zC^C!1La$%HPT@0s!-fs|z`y_}22mh9em4D7LrED&P3<4N24mUy!NU^O=(=pKZP~LPoW~-48^m%>Kr+UEu?R-42I?Mx#**L{JeFfbv)P>JT<) zhq3-Gufa(z$pNq8A~jM;*5MQ_xjrM}BIk?ZQ;n6nu3JG71rnVMk(bV@=@12vCHocW zRgwn}NsgJn4vdhW64yvEu=i|SA6>WSAf;59o}Ny^5WxZz1>j1ceJ~XhNnAOf2}8O{ z%0-1MFkgsn=OeI=5{t!T$R9F0iZew~%+$@&A$sHaZ2_>$5kH2QO7ekD-|@l1n36Ff^vTIdQdL#O6I425LfkT@(ZO7kj6ov0N~8SzxVw$} zLBDHF+7}K)&*vv`_M#7z!1B&hcXf3&f&PU1qe+56i0VQxF_>?n_5Tj@tccR@0ut@E zr93)%LVtpvOyvGBsZIsA?LUKDfPf~;vIbG2V@2hO(tHnYh%n?u*Nzmdo=wnHnc;aw zkMLtYXd|QVhc|t643vmKMGcpfltdv}rSK8UEFyRgwL|)A=QGQt<`uueEho7TV1ei# zft6c3;g4gfR4QCvULJ#1Ft&R2Y8A|Z&dJg~fp$Viso4I_xb6?VP3{N44AGB|^ugRo z=sy#nLK31Q1xlE`=WNGBAT!8h)Y9JjBe@lNhb#m@Al`fEE$#c^2_TU`Kogt<0$O8Z zBh7p@YkSw!)Px<7;yUqRvvt+OhnOVRkRrf>F<`h?bn|yBVZval2G;HNO;>MvoL%;BCmNkBxOgajCV6~hOK|1Z*Au^v-T)IsfItis zh#3Slv%k#T0%TRfcnJxL9*+krp9MVIYW?=zwNmYaYoN2P5v)qJPW3Rz9$~jb|0D*6 zevW=|;wqVGR8+g&o&o|%Pyl@(We}hkmSoOGDDS=lyKXG;6B841Boa};yA|vQpbBET zpIeA@BO6j6t-4$;6$ofhA2djW+R)Gt&DfC@1p)I1lw4d)fh=c-2*P>}ErGKFB(8+< z01gN}H{Js{K|RdtHrV(m_&q7G-JI`Ul)ndL#PRWQ5qd=I2LvF+?}IV|ZUG?^G7LY+ zhOEB6UN`bU!M~pu31ch3%yV;NjC)k<70p6~Fc;4B{{It2ZU6J(Kgc2hc4|6Cng9R* M07*qoM6N<$f+z<1rT_o{ diff --git a/src/assets/images/FifthSelectedMarker.png b/src/assets/images/FifthSelectedMarker.png deleted file mode 100644 index b931eb7b0dcdb5bab5f83bf9681c3b93bc97c38a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1272 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 diff --git a/src/assets/images/FourthMarker.png b/src/assets/images/FourthMarker.png deleted file mode 100644 index f1963795bd5e844e9b503d473731683a8b766e82..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1623 zcmV-d2B`UoP)LGS@v9|$d0u~u43Y;D=K>}_s`|KFKehV6DcZTXUuGw00gIp6v3 zX94B`Aq2}C!(1TG;#+2K!WheKNJMCy&ktq+R_vv2#X) z_V(sBZEbBesBda&5_|US5f-@_39%vsvhNAFIP2@{lW;@ceV{U09pq7ZsT;sLe$g+# zcw!>HaN$BBNs>`gQlbwI4iXuot*y;KGDZPOxg&uKaNLv)3=HsdJBOe3$>JG_!*YC8 zp8u_?!R3GB;^_H)^}_a##UPT=CnhFT;)w^)PoF+**k^M^!WKQU=dn+!T0#LhjuZ9Z z0-7O)N5T3ai~Nh5hWZBt5>gHHE>>i#cPPVJ4K`3-I8+ z+vDW5qMxH%m+e^Rd+6)#SO@1^NhA_7#vJmNT>Rh^4#^ho39%=@4OX?Az4|}6#frtA z_1Jk0!|hi znF2j9jA-Pm(V{ES=8cyA&#i~qfK;+(xxXAqNWoxGLTT`>uC83nAQA#up&(ee=t@Mu z69Tw$03b00v&H>UZwO5Fb8GXQMzSKIj97Gq`i*8IHT1m)bAqmcg8*e(>P$({WLa66 z(1men+68PikOY>#X14NW=3IE0Ii3L@eXm}}SYfAT;rIK=C$eMN3ZFu3kNjOYlYnUt zgvi5YbArfFBQ;Hf8#l$TXa~aQ^O0L-Gb%<;>P!+uhIDfy&AzD$!b=5LDP)LCwgA*V z3NUt|C;`I6P4T(w)vjN$Qk42&0KhvE*Kz&IhQpBp`keBuRH8T)x^Q>-{ac0%JK zIQVVyB&tHkM-^)gjfh~H&&6$K*NDx{&GOluL$3t9upiu@91Y78Hti%iy|-K&H#+LK z{kIEMkw8gIE?BT2QBzZs#@IyJG^-kJ)sR5O`M?|A4^%jjk<7TFxwPKM+W8li~ZVmL$GUb7jWuA=B*=Vl7mPfjcQ1v6jVIy zlzPG}hi{kdM9S0IREPyA^{iYmRvoG-#8es}s60594G#X7|(>gml z$v*BhOxsPtl!&(JSjoVdOUmPEO}I}G7Dxr}ccizieLMN3O+c3A6y}ReWo4y~;hNl3 zI4kh{%THD<7(vy?_VxUU<4u1ZiEOT|U|YR1G{Fp~|6@e^;?)zW&wjk3PoOuXOG`^h z4H@du7*&i7SzE}z0u-vY0V^MlZYvQ<)T4*0qWw>K?_0BiuM3y5Ca=u0(JPrTMn>bJ zzkfvUZ#@vZNL;Xy&K0aFGiZbvOjsGLxOMUdi@=m>d%B#Ftv6A0e0X?RipS#~ssl7l z^I%Qjp=?Nb033!*kr11PO~=AT#mkV2p;^P0iw*W(2 V@UTBV9PR)B002ovPDHLkV1mw)_`U!D diff --git a/src/assets/images/FourthSelectedMarker.png b/src/assets/images/FourthSelectedMarker.png deleted file mode 100644 index 16fcbf5bd6d522fa060dc85642670c8de0e4f601..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1139 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 LNkvXXu0mjf;e8PI diff --git a/src/assets/images/SecondSelectedMarker.png b/src/assets/images/SecondSelectedMarker.png deleted file mode 100644 index d236dc1260312172139cb6c9f194f789eab563a6..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1162 zcmV;51acxXn zdNVYaieNYFNzg+wUXo*%7W!xD&g<`++1Y(FnfG>QwugSO%2eQNefFt>}4`JIV5F)FVu`DjXr)SZ{&AiQDnF2mI1I(YwZk`9p{CN%7yI!!F z!q!?-ed#1&)4;+-;KMWS&GWb;8o7G0Kr$laCmBcr5`oJW>O~3dacw-)waYMep zb?umVX?;&M2E2N>Jf~Ok1kP`cM}YX~l4$YsW8#%yR{I$eGy`%`KoijUo(4!{GP{=F z@do?FB)ksJnT|MjD)E6~pxyUx0}t;FpL;qN7qZ`Cs*PGtaMql#aKX7=Y~!8H?B*oS z?-)fzpjJ7@h#LQqhja35cyUM?zQ7z{TZrHybT$&;+_&ok`L6+-Ac+hVKH;OLyV-R7 zP907(uMZadEJ)t>o4`+^g@a}ilD_2-baFa;UxQME5)z^XGfpSpf)fk9*qLi?qLpB$-X&#^%r-mHj#7j9r4bxseJ^NEAh15xj z)4}lhMOjxAflMPZO1P!ixso_3LI0?l*t|&N|0*O%Ak_c~9P@k&?i}R^JVu+E2u&e9 zeHd5sSj_{lE@PkRhwI~VP`Xza%eHpS%qinNI*utC{_UKuSHLp*CRn2EF*|h4G27)aMIZBnR&KVoGX&Ww~RhDDE-)ph?bO zaaUFwXo57E83?7dn=u8)y6xpT-4NkoUd~>@<|ldZ^i=;rLC%qsFk@<=kOaG(&U4c8 z_sVP@B*OIknmFhQqYg0sX~O+x@#Z~b8eA(0g5^~bnDz2g1rm9y8+$4!8na#lZI_@* zP}p5>s*|>1&o;33w`z$OFJXLy&v)^uYl7z*+(<65;}8kO5l{B=P&E<+9f|ftdBgP~pb`lOkxB$AlPDlknZQ^i2>CyQH|xc5 c2s|@*0x(6Q_f8{pFaQ7m07*qoM6N<$f-XuSS^xk5 diff --git a/src/assets/images/ThirdMarker.png b/src/assets/images/ThirdMarker.png deleted file mode 100644 index a55fa7fc6959db032b9cb66d873de0ec2e307f4f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1711 zcmV;g22lBlP)Zg;oa?K3PDD)MNpKw=|CgIJ1*n5aP#YBT}Gs6-7vG|?D&w3zTP0{$Y= zq=|+IDxeTc6h&-}fJ9mpLa`+k0ZXebZRx%r^YEPM%(5-*bi48;H#;*sbMJT0<2&a9 z{10fF#zx&kHV`NAE;AQmjHMPNB6L5RA4~$w>Q7?<&D?QqZ7rwYzP>&d3$a6gqtP5B;K0XXb8|B{0_>KJ3#0DYg$oz>`OOV=AlNoQmSCLc+UHh13WC@i zI@uJ=%gfV3p^!Ff)-34h>Cu{+ngCsW^ZoRXDUiOXUAr3W&IY&*P-C$_Ix6#@$jQlx z*zNYn;NW1qy1H6M5=y#Tba$9paNzM5?gYt^wFO3lI~)}=o6f(ks;V=QNRV4>nBJV+ zot`yjOlTOzT=C{_#E6_e-lS7S2Ahi|I6BP%r^+1giQf*(Jc1<=aq9F{(gQU`ilR6? z9*>095J_j!6;3BX56-T9)rUd2%8J03rFMAAEr7?MzQDm@OOXVtyyFWm69iB3`mN8Q zut`Wn!e1i6(e)`3f+54aZPAlUnP96OZ?Y|DfeMMkv9JQGdlIl~P)0Hg<|7dr4L4*f zBE0{@9gTt@P%Ow@U0n)hi<+_oSp}t+aY1?*EU*i;=lSk9tm{icKppnyp`fDw5*aIS zPhOR0;UhlWuowsggp!gHjsZHt9Sju>1)j~fny5XY!mlw^CqQmkk|XG@AnYEJVItV) zRCsAUm&+xfTR2*RnZZfU)QHu;3^E1h)>(=Oq{oJc^LJaEVY zy9Sf`xF&0`3A89sEYKcT^&L|%(s;YTHX=4Cb;pA;aQ%$UW>e$wIHf2N(Xc-; zo1WpAK;eLnn)!c$qWnDGL|gl1Ov&LaAZw675h-#9r7p$Cc!-?%@o+MkB$hH-K_)_| zo~aL**&||x2wht~UScaLIRX}-h09U2$Q86OrL7gzp&Ms9?)AScNm3YNf+}hl`;2I3 zXD6kU{xLVJ83m{O?Bbt5PFlK!7CshH;2@^vL<9)ew{LtG2_(=03A|096=ZAy6)mlT znN?KVw{M?XP*9+RzCW-AGvzAW21L)ce9*tQ;RPC#hMYpE-UQ!`=e8)Oi8x1v=EVzfoXu4sTdnd z?5!6s4K-|kNQ;C&he?9cF?ev#8YHkAcOM}FIHKt8I9fu+)YKcA^s~xng&_%7vB1dP z@74FU&n_?uNPhJ^U_JItgMXs zNeNvmj@9C4Y>6@6V>qd98I)g!V#6@s_3zO-47ET-7pPR2X3UtO(s>j&pg{&_(Tqr# zs%pj*m0;?|sPIuQqE}%UJ_s8No2U2e55pOPLFSgU#DBIZ5geAY*-HQb002ovPDHLk FV1l%A8~XqN diff --git a/src/assets/images/ThirdSelectedMarker.png b/src/assets/images/ThirdSelectedMarker.png deleted file mode 100644 index bdfe7cb3f48c4b5afc1ba425f8dbb826240e8c9a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1254 zcmV={e?XO- z%O#g2uBylj5>Tn4b(i(JoC=;KJ)Gh%81EYV=PCx zf}nOmQLes6eXd&+b;J2VOW+^T*p(GG`A=MhVgx$Y#&Z5bF zLBrPRT8cs^vc%$6(OK$>#0RzKB_+jLaL-3=L7%^F)6{T|UbCWivD#F0 z>**2Q-ff3WrYc+GgI}C&HxLzp*^xdb5I=bkh{(*phi4+g;$GeyADE9Mad~IIW)i@p zKfjaL;m?Yn{y*Z#w1Um^+v5Yv2C)t%cUXi00+o0Bdm;dQ`(_{A;B5?G0mAo@=y-ti zWx2^`(!+3qms}gPd|QH~ zU=r4QW~b43J^BDM!m8ksSRn`|8Cvi@Psbz_XN6D(iSB&?8RB75r=UuFW;kScn+f;| z5v;6Rd)~U}=>B&&yg#xtg46|G1ol1+xVQYvY}l3YtHDJ0dAO>9W--r|m?dtTt@jd0%#L)F`^WP( zee53S)C4I_z=k13D;q?&n?@uAZQx=ZmtL;des^D<=5YuR`XA1B4Cw4b!6jC00^9IfM`Wqi(VE_2m$k|npE zwi6Gew7|m5F$IZ=R{(1g8^w{jl(gb?Ks3I3co@4aX>fP1%~5C>1XNvGbW(4gBs8Ky zhBn}Wo+I`GWX|`Gj)KiA=4*hz#(dBy3rp9SCxFnB1Q!L=8z}DraJjTAnhic{t4=uU ztkM;;4f}{Rgs8gJ3099Nh7cgOgsZ`}Gs`R0o)nrYzowKZQ3$Sc)%B5M>C@Kt-oYnn zm5m5#Xr3uPNG@UU0+~p}5XnR!Gl>u)nF;ia_jmT^@J#~_ORqX!0ETQ7lW$Q* QWdHyG07*qoM6N<$g6I}X82|tP diff --git a/src/components/Plan/TripMap.tsx b/src/components/Plan/TripMap.tsx index 7c167103..4c91934c 100644 --- a/src/components/Plan/TripMap.tsx +++ b/src/components/Plan/TripMap.tsx @@ -1,16 +1,7 @@ import { Paths } from '@/@types/service'; import { useEffect, useRef, useState } from 'react'; import { Map, MapMarker, Polyline, useKakaoLoader } from 'react-kakao-maps-sdk'; -import FirstMarker from '@/assets/images/FirstMarker.png'; -import FirstSelectedMarker from '@/assets/images/FirstSelectedMarker.png'; -import SecondMarker from '@/assets/images/SecondMarker.png'; -import ThirdMarker from '@/assets/images/ThirdMarker.png'; -import FourthMarker from '@/assets/images/FourthMarker.png'; -import FifthMarker from '@/assets/images/FifthMarker.png'; -import SecondSelectedMarker from '@/assets/images/SecondSelectedMarker.png'; -import ThirdSelectedMarker from '@/assets/images/ThirdSelectedMarker.png'; -import FourthSelectedMarker from '@/assets/images/FourthSelectedMarker.png'; -import FifthSelectedMarker from '@/assets/images/FifthSelectedMarker.png'; +import { getColor } from '@utils/getColor'; const VITE_KAKAO_MAP_API_KEY = import.meta.env.VITE_KAKAO_MAP_API_KEY; @@ -104,30 +95,38 @@ const TripMap = ({ paths }: { paths: Paths[] }) => { setSelectedMarker(index); }; - // 각 마커에 대한 이미지를 렌더링하는 함수 - const renderMarkerImage = (index: number, isSelected: boolean) => { - let svgComponent; - switch (index % 5) { - case 0: - svgComponent = isSelected ? FirstSelectedMarker : FirstMarker; - break; - case 1: - svgComponent = isSelected ? SecondSelectedMarker : SecondMarker; - break; - case 2: - svgComponent = isSelected ? ThirdSelectedMarker : ThirdMarker; - break; - case 3: - svgComponent = isSelected ? FourthSelectedMarker : FourthMarker; - break; - case 4: - svgComponent = isSelected ? FifthSelectedMarker : FifthMarker; - break; - default: - // 기본 마커 - return 'default_marker_image_url'; + // SVG 문자열을 Data URI로 변환하는 함수 + const getSequenceIconUrl = (number: number) => { + if (selectedMarker === number + 1) { + return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent( + SequenceMarker(number), + )}`; } - return svgComponent; + const svgString = encodeURIComponent(` + + + ${number} + + `); + return `data:image/svg+xml;charset=UTF-8,${svgString}`; + }; + + const SequenceMarker = (number: number) => { + const fillColor = getColor(number); + + return ` + + + + + ${number} + + + + + + + `; }; return ( @@ -136,39 +135,42 @@ const TripMap = ({ paths }: { paths: Paths[] }) => { key={VITE_KAKAO_MAP_API_KEY} center={centerPosition} style={MapStyle} - level={10} + level={4} className="relative object-fill" ref={mapRef}> {paths.map((path, index) => ( -
+
handleMarkerClick(index)} - image={{ - src: renderMarkerImage(index, selectedMarker === index), - size: { - width: 33, - height: 33, - }, - }} - /> - handleMarkerClick(index)} + onClick={() => handleMarkerClick(path.toSeqNum)} image={{ - src: renderMarkerImage(index, selectedMarker === index), + src: getSequenceIconUrl(path.toSeqNum - 1), size: { - width: 33, - height: 33, + width: 24, + height: 24, }, }} /> + {/* 마지막 항목인 경우, 목적지 위치에 마커 추가 */} + {index === paths.length - 1 && ( + handleMarkerClick(path.toSeqNum + 1)} // 마지막 seqNum을 위한 +1 + image={{ + src: getSequenceIconUrl(path.toSeqNum), + size: { + width: 24, + height: 24, + }, + }} + /> + )} = ({ size = 21 }) => { return ( = ({ size = 21 }) => { = ({ size = 21 }) => { ); }; - export const ThumbsUp: React.FC = ({ size = 16, fill = '#1E1E1E', @@ -1589,6 +1589,8 @@ export const SequenceIcon: React.FC = ({ className, number, }) => { + const currentColor = getColor(number || 0); + return ( = ({ preserveAspectRatio="none"> {number !== undefined && ( = ({ dominantBaseline="middle" textAnchor="middle" fontSize="small" + fontWeight="bold" fill="white"> {number} @@ -1674,35 +1677,3 @@ export const PaperIcon: React.FC = ({}) => { ); }; - -export const PlanColorIcon = () => { - return ( - - - - - - - ); -}; diff --git a/src/utils/getColor.ts b/src/utils/getColor.ts new file mode 100644 index 00000000..2fbed7ef --- /dev/null +++ b/src/utils/getColor.ts @@ -0,0 +1,7 @@ +// 번호에 따른 색상을 반환하는 함수 +export const getColor = (num: number) => { + const colors = ['#FF2167', '#7932FF', '#29DDF6', '#FFAC16', '#16E7A9']; + + // 색상 배열에서 번호에 해당하는 색상을 반환 (숫자가 6 이상일 경우에는 색상 순서 반복) + return colors[(num - 1) % colors.length]; +}; From 788c9e1595820978692a0a5adab5d36156e458d3 Mon Sep 17 00:00:00 2001 From: sue Date: Sat, 20 Jan 2024 03:48:33 +0900 Subject: [PATCH 4/6] =?UTF-8?q?Chore:=20=EB=B9=8C=EB=93=9C=20=EC=97=90?= =?UTF-8?q?=EB=9F=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Plan/PlanSectionTop.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Plan/PlanSectionTop.tsx b/src/components/Plan/PlanSectionTop.tsx index 5f99f5d4..114ee5a5 100644 --- a/src/components/Plan/PlanSectionTop.tsx +++ b/src/components/Plan/PlanSectionTop.tsx @@ -13,7 +13,6 @@ import { dayState, dateState } from '@recoil/plan'; import { tripIdState, memberIdState } from '@recoil/socket'; import { calculateDayAndDate } from '@utils/utils'; import { TripSchedule } from '@components/Trip/TripSchedule'; -import { getItem } from '@utils/localStorageFun'; const PlanSectionTop = () => { const navigate = useNavigate(); From bdaab020395444b142603d0525c3d16519fb43f1 Mon Sep 17 00:00:00 2001 From: sue Date: Sat, 20 Jan 2024 18:03:15 +0900 Subject: [PATCH 5/6] =?UTF-8?q?Feat:=20=EB=A7=B5=EB=A7=88=EC=BB=A4=20?= =?UTF-8?q?=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Plan/TripMap.tsx | 139 ++++++++++++++++++++------------ 1 file changed, 89 insertions(+), 50 deletions(-) diff --git a/src/components/Plan/TripMap.tsx b/src/components/Plan/TripMap.tsx index 4c91934c..94dac763 100644 --- a/src/components/Plan/TripMap.tsx +++ b/src/components/Plan/TripMap.tsx @@ -10,13 +10,15 @@ const TripMap = ({ paths }: { paths: Paths[] }) => { const latitude = firstPath?.fromLatitude; const longitude = firstPath?.fromLongitude; - // Kakao Maps SDK 로드 상태 + const mapRef = useRef(null); + const [selectedMarker, setSelectedMarker] = useState(null); + + const defaultPosition = { lat: Number(latitude), lng: Number(longitude) }; + const [_] = useKakaoLoader({ appkey: VITE_KAKAO_MAP_API_KEY, }); - const defaultPosition = { lat: Number(latitude), lng: Number(longitude) }; - const getCenterPosition = () => { if (paths.length === 0) { return defaultPosition; @@ -59,8 +61,6 @@ const TripMap = ({ paths }: { paths: Paths[] }) => { }); } - const mapRef = useRef(null); - // 지도 범위 재설정 함수 const setBounds = () => { if (mapRef.current) { @@ -87,9 +87,6 @@ const TripMap = ({ paths }: { paths: Paths[] }) => { setBounds(); }, [paths]); - // 선택된 마커의 인덱스를 추적하기 위한 상태 - const [selectedMarker, setSelectedMarker] = useState(null); - // 마커를 클릭할 때 호출되는 함수 const handleMarkerClick = (index: number) => { setSelectedMarker(index); @@ -97,36 +94,90 @@ const TripMap = ({ paths }: { paths: Paths[] }) => { // SVG 문자열을 Data URI로 변환하는 함수 const getSequenceIconUrl = (number: number) => { + let svgString; + let width, height; + if (selectedMarker === number + 1) { - return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent( - SequenceMarker(number), - )}`; + width = 32; + height = 39; + svgString = encodeURIComponent(` + + + + + ${number} + + + + + + + + + + + + + + + `); + } else { + width = 24; + height = 24; + svgString = encodeURIComponent(` + + + ${number} + + `); } - const svgString = encodeURIComponent(` - - - ${number} - - `); - return `data:image/svg+xml;charset=UTF-8,${svgString}`; - }; - const SequenceMarker = (number: number) => { - const fillColor = getColor(number); - - return ` - - - - - ${number} - - - - - - - `; + return { + src: `data:image/svg+xml;charset=UTF-8,${svgString}`, + size: { width, height }, + }; }; return ( @@ -146,13 +197,7 @@ const TripMap = ({ paths }: { paths: Paths[] }) => { lng: Number(path.fromLongitude), }} onClick={() => handleMarkerClick(path.toSeqNum)} - image={{ - src: getSequenceIconUrl(path.toSeqNum - 1), - size: { - width: 24, - height: 24, - }, - }} + image={getSequenceIconUrl(path.toSeqNum - 1)} /> {/* 마지막 항목인 경우, 목적지 위치에 마커 추가 */} {index === paths.length - 1 && ( @@ -161,14 +206,8 @@ const TripMap = ({ paths }: { paths: Paths[] }) => { lat: Number(path.toLatitude), lng: Number(path.toLongitude), }} - onClick={() => handleMarkerClick(path.toSeqNum + 1)} // 마지막 seqNum을 위한 +1 - image={{ - src: getSequenceIconUrl(path.toSeqNum), - size: { - width: 24, - height: 24, - }, - }} + onClick={() => handleMarkerClick(path.toSeqNum + 1)} + image={getSequenceIconUrl(path.toSeqNum)} /> )} Date: Sat, 20 Jan 2024 21:51:40 +0900 Subject: [PATCH 6/6] =?UTF-8?q?Feat:=20Plan=20Info=20=EC=86=8C=EC=BC=93=20?= =?UTF-8?q?=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Plan/PlanSchedule.tsx | 29 ++++++++++++++++++++++++++ src/components/Plan/PlanSectionTop.tsx | 4 ++-- 2 files changed, 31 insertions(+), 2 deletions(-) create mode 100644 src/components/Plan/PlanSchedule.tsx diff --git a/src/components/Plan/PlanSchedule.tsx b/src/components/Plan/PlanSchedule.tsx new file mode 100644 index 00000000..4e96dc4f --- /dev/null +++ b/src/components/Plan/PlanSchedule.tsx @@ -0,0 +1,29 @@ +import { UserIcon } from '@components/common/icons/Icons'; +import { socketContext } from '@hooks/useSocket'; +import { useContext } from 'react'; + +const PlanSchedule = () => { + const { tripInfo } = useContext(socketContext); + const trip = tripInfo?.data; + + return ( +
+
+
+
{trip?.tripName}
+
+ + + {trip?.numberOfPeople} + +
+
+
+ + {trip?.startDate} ~ {trip?.endDate} + +
+ ); +}; + +export default PlanSchedule; diff --git a/src/components/Plan/PlanSectionTop.tsx b/src/components/Plan/PlanSectionTop.tsx index 114ee5a5..d8b60ad9 100644 --- a/src/components/Plan/PlanSectionTop.tsx +++ b/src/components/Plan/PlanSectionTop.tsx @@ -12,7 +12,7 @@ import { useRecoilValue, useRecoilState } from 'recoil'; import { dayState, dateState } from '@recoil/plan'; import { tripIdState, memberIdState } from '@recoil/socket'; import { calculateDayAndDate } from '@utils/utils'; -import { TripSchedule } from '@components/Trip/TripSchedule'; +import PlanSchedule from './PlanSchedule'; const PlanSectionTop = () => { const navigate = useNavigate(); @@ -57,7 +57,7 @@ const PlanSectionTop = () => { }} /> - +