From b86457c66e1ab235250a1470ac3863451ee179b6 Mon Sep 17 00:00:00 2001 From: NamKyeongMin Date: Mon, 19 May 2025 00:51:51 +0900 Subject: [PATCH 1/2] =?UTF-8?q?[add]:=20=EA=B3=BC=EC=A0=9C=20=EA=B4=80?= =?UTF-8?q?=EB=A6=AC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20base?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/public/assets/img/edit.png | Bin 0 -> 10159 bytes frontend/src/components/TaskModal.jsx | 62 ++++++++++++ .../src/pages/admin/ManageStudent.module.css | 5 +- frontend/src/pages/admin/ManageTask.jsx | 41 ++++++++ .../src/pages/admin/ManageTask.module.css | 91 ++++++++++++++++++ 5 files changed, 198 insertions(+), 1 deletion(-) create mode 100644 frontend/public/assets/img/edit.png create mode 100644 frontend/src/components/TaskModal.jsx diff --git a/frontend/public/assets/img/edit.png b/frontend/public/assets/img/edit.png new file mode 100644 index 0000000000000000000000000000000000000000..639f11ceea57143af051918dea86cee2d8c9fac5 GIT binary patch literal 10159 zcmeHt`9GBF|NlL=8D=aQOCoB9tVvW(Dq@t%QizHarsb5PMk@+4Lr053(RQezQpdYQ z3(7WAQ&B0}P?j+XZJ4ZsG568!`;mfK~VTFijbAz&p`D1QTRjH=eJ@Ba{IN>Hw2+09&WB{qC>h{9BXcWjL~Z= zQeAY!@|a&8hkDB2-_3a0A~$Nb`w`uoCkq!IZ|^rQ-u_b>Tm5{YSWmS{!}o!k?zwEl zGmNUOp`oYk?s`IZVD7!eO|A0|V;B}MD)X*AG}}vSiM;i|gPx+n=8Gp67fGiOP$HR1 zPxH>cUUo-KhtA+21auieLIxp&!&pKf(Kmg)y%LuabrF{0FWFSr7tv1Yd4bPlFbERm z{|5iZ#{W;T@rabtF160h;LXgHUG;krYMU$Tm?H10^|Zpq{=!Clax>WLJx3gh>ai)Z z?xn7Rck&#p&ql1 zG^%o$om+k*qp!rUr86@(qo5&(-xRj^C6VfjphvzOgXD?wJf0>f~nlh{ocs_GWOFr`@!pk*C z^(a?5=ICNGwa zm?{85ZHH_^7FB3dXZe!ofy@*y4kH5hNNz^oU}H(NWWbY=&790(Y+5+;w_Y73^3#=f zZ2P3&&T{DAW+JW$dsm{w&1yzfzmjt^Tu#I#zq=8Ddi%c`%R%jGTVE5&rdptM3%v8# z+tSsr2G!HtNC|Pu4n56_*^gymAMDO@ZYF5(1CXhkgH9maW06K*~V%bbi$wga~)yX7M4jAGJnUq)JWsNG>{^?;YVs&zT9 z1?Mb&gIVRqIuF@Az8pgNs(%Ts(`tD8JNT~VX4F2dTqXt0E}5)B7Cj0&_gk}D8GRoc zOBy=??5O2r&ZK|Nnf?ZYBCzh~hKQ&`X4!kLsWP_szSN>qH$X=FWcWEx8`EooWy19H z(K_lozu(KGvt;x9LQ>z9@)xQvx}@_Kv6-5QMk<}- zX+w13KqcCda{<~kgQrDL^T#D++L0z8A)etugRudZ@UU=@k^EzDC`)=8 zE!_0aZ8wfUpJ2v3xlb5exjH;9N;tU0HWxXPQY)rVFW6)gYrNY!$Jux5M_V%apCn5E zE_Vm@6a@Arm&M(yAKf>lq4D!R5;IvpI04~)gf~BlyFXz!!t+`3#e_U87rB-q>Yz}= ztg@k0{w%HM|5GH7ZJ376x{VOY&$S@@XJiwPRDWlm^^3n>KiXyN-SjO@m0=P15(o_d zvQCe?+$xgaq*`?EcPC}*-1?J3tp?p@@z|r7dp24qGd#dRiC4f%FN@*c@O+ob0g5Bd zoA6aVA_gUXB14*f%C!Cv#2e?Ymgf>@Wxi+U6;+0Re5bMC0&0hR)FYBN>O_Z2+28Zm zh6JFuV@5|W3NX;}Lyev)qjR9;5(D8zsbgIh>rixSiBt;%HK$B*+0xK%g#^dgcyk1k zxhhFmzgg(bqRRL`$KQxXT~to$vG?;`3X0@^<$Bvo?NkNK$R;g%q<7nKaRD)F%fQW} zq{@Ks@zXVoi8TaQP>Z8{?ZU8l*ObA~@O<{X>h)zt{)DfOcdo`as|S0e)`a0DV?8eK zgRphmlu7h`qdnftIb274R$z*2N`H6Ik6Pu0;pex^M1litJUN1VbPBwTw0DtoW z`GXd}q}E6)RAL>XGQQf9VnVU(VbBi;rL22nTH}*BJx}Jtp0tenNHHlySL&TVc;j?z zDD=_VWU9Wo-43u=s2y_XD(3Gw;#gGAE*Y>=neI){Keo#ny+|_GWSi0Z+sEWBm`DB~ zZ;LdCgSP!arPl>BPXovMeGYxph`(At>iF{V?zfM0IUbT?v$SQ*JMeC6Otee+_6O{U zfq#zaa#p_`GEVblzJV8CVv>2cisH>{53tJe(8$d5p*r+PKjtsoXEk#qwa$=w`GT(A z`2D18$2%J2FFNG8va_5xUT0N!KCfx`(5~Irk^6h@s}fKag=i@E6vW#OUoEP){TY=% zY2591!{(}t(9oMY?lY*dVDqog??-p$ho-Pk?Q!r$ zo~>^>E+|Gb)xp{xwQ*+tp!J?qm##0W0;8xh?Z)NId!XEt!xwuCisEfr?{x732^V-= z9V*$n@S7w6{ao&jX|Si<^+RU2jbt#kabMx_B5#jpBuJ$p``Wu3Ma z7JpeO=nF5Z7ljT-&+)#FJgI(eMVU1tEdqa4UQRRmvbd<;C9pT}m-jW~$;+DKl$AQ} zi-3Y1wmrG0*tzwiM}HVu40-5s8b=l`=59it!*X^%a~D5&WBVZpiD8KULrf~St=+tl&nG~k zWwj;5`BXbu*^z&US=$Fw2NttF44hYG_O_1HZ(NZjXPnltK8K zvvUSIZv-{Rp^zjrp#G0z4AAZb0(;!m}Jd=QZKueeZQ63UkuQY4J<9^n~ zC4EartdZw5&W~OjrquQlD@j{&C+J7ld2i!iVqMM?aoK1qn#4X98#S9igBYIers|=Y zhnQ-#77gp!$(DAMZJ|hC1^w8*G&fCBsLFU;7aYSP2wk>TI-ceD)Calf%>8TY(RIif zQcvk&aCuIDOAayifAyo^>a0u`m7{5v5dke51QL;nsM@Tpsi?l8#NGJ0nJ&lFwX73X z#@3A_%_6{QqBirzHmv6!$wNu+`nGIjuo#CG1F2Fi_HOhbau-2kZiPzBye}A=TWB2!NHw^pJjP4tFleU%+xY)RB zhOg%w+2X`0#0;c1=QszgJMzYaI10WTk5DSOMI=sQoxN&}+%y#%5krib(!+YGWJ|*3 zDl-D9O`DfW8PKtljeXpG|E_l7>I+v3t{^A%N@!diu%2S-5;HrS7_AlsQ4n=!QD!;3pwm^0-AOLyoIWi4SL`iIw zHD1nBe9`j1R*-ZN%_9O+f{?8pdwbVe&c+zg{tcuy^Vu%ub;|`3R(sf4e`qhPuE)Cg zA$@=LJWD63W6ud+nnNhn7t1gmPBZ0}2~%2d#_h#EOM=xFw)CxBm80UyOoLp2V6?X8TGVruLM|-UikHo0%IY5&B_A)0+ zVAV(yFF7h)Z%`Z>l*^OtWVN1VU5Yz|G4LWj_8RIe6BDnKGpg3HNI%U~o!V6;+M{qYX+3TdS@s0AAfp@PH$XVj!gA{FHSMAUHYGBSD>P%hR%tpLR3FmSn@3kw3gL~m8;Wra1BJ^)qwD&Q3$Z_9vl zRXG8*fHl*76@mnw_JOoW9{PVN40xb-` z+w%d+2y8~c0=xBbYBWP28MZeEn$ndT;|`OU!$(?rXM;ks=hKQn*QWJB z-w05K-q9tK2trZ%g;`9g&m{WGAyvk?Yc2g5ur^fliA2bkO@fi>bjdl6xYueWuxp`` zw(Bs7zTtDvm?z8@{+`_qv!A_h8QFy<@m1ykxjZ9AefMO}t><1A5+2X>yN)H2*Is)#M(DyCN^WkJgqj|!sq#hU-rx=NB(dMNH9Ra9^S$-* ze6B#}>musVz+x}j9^4{i-(k$9tsqoq#osM6ls`v9drOnBLl>_(pGMOb$(_zS$ojWd zd|jo1ElYeJI}2~`JbHFZEhvXt!l%lAY)c>As>=8-9p;yd`Rr%OqB=>aQ+7?2KP=22 zY0_3z!{8Rp2@3| zh@9GL8Wapl!H}m)pRnj8Om1+aQo-N>V6Y%_)tPhyxktk5*i|@SGB6lwf5EA0E_mzG z=ye4k&R~f7bMLKE3pJZ>ebcHWwdZ5L8{!Ox;tVcYZ@T!nm}f7oX;3g& z4GS+zs6MQYhf^L4XON9EIAUPx!WHvmgsqj8XxhT@=TQz2&CJ6>k)gXyHa-gHC1&Vg zyg8&A`5Q@>GvLE?f=bugoWg>{SxiP*_n9QYJpGwWsb)v<$CnW70j_N}kRty2FiG=j z@td0@b+&DyKn?0ZmmTCM?QulrIjn3s|0Z=Bb z3!d^Izj*WelCQzO^|o!r#wH0ZCn9wPQJr0zD42mGzF7u!;_=Qm{ZP|ltobWv!lj`` zWmk~~cDc0P8A=3?(Wir#pt?0s8eZ(U(*&iV=~e9MH4La#v8myP^2KZNV-g|9@#D2G zQa-VbE>CW@g?*RR^>SkE4IxbuR^E<$M<`W}b+JqEi}=~FHJ+Eo#zHf~-yQbX?}4Bs zD<|xf8Yo0^nm{arNo9?(@4Z2V?K^TO1{T0T{*|sKWhm52ZeDPaS~-yAhH#YxHBBQ63a-zbk=2TQH2-WmY#APj{Ekmam`zZ8 zlPhq-+3A6sE%^uP6nCOdF~{NnFz#MO>^vbhH-~f^^ly;Gu4-Ei{!)s`g^`>79XSpo z$LCd!Bqd?5wmOHwwo@{Ae=1ke4#WPY&eq%v<=tf=($uBpi}Yi z_)ctv>)U8*Ek1J7zaycg>-$sw_LK%YmHDp>zHaR8lqYV0azzu!ei+L8=S3z=Ff{%r z_T*8)z5_z`rCC{~aPmsC+b?w4@ijcSNfK(UdBejJoUPsxI^?528Wb>J*6>2O;|wtI zJi$ShPO5A@pn(m}-E##8yV9nCxos+lSu13}+L$#n53o$5g)Sa-KSJI~LLCe(yzsyw zw@Q4deV+pCWeu;ZzTr@rDl92$x@5Fro~)s^nu7Ceh>MJNpS)=xpR;%G3qTiKe`F}n zR5t7iN@8c-%CZOa!cCGSEGg$%=@~K2+V;jOK#$Oa6kebG>-H9D6`W}lP$YoT-Bxo` zUp{BwzVA4cISxfM7@nHMZvL6&ghROkl(O-&$^&we30)u_b;=27jzz_7?Mqb7;S!pp$}pQjG<^go5Hm@gZC@opDx;3MEF zkyI?&qk)ajJ#ZC=$_6OLrtX+ELU!%O7Mv?8&Xv3G*z|W2k;4WDoGT)5rAd9;y24&I z{JNnVhe`%wY^T@BtLDjuYa2Ci1J!Vmk$1{f1Np+e2k}%ATmb`7VI9Ic9t^(;JDO;pnFPl#(pnxk|-Q};Z>dP1Ii~4~>ncz^w)5H2n z?AD(x3a%Icg&KcxP7w1P*(EqvD<`$W*30SEV6!+3KLUxl8HTvUZs1!%O;aIit63uH zkD=~8Y8rY731CBYpAD0uktB?`e?ukSkZBUhx+JD#hMi0$v8m@0lsE@hj$j@@wJinN z=BDp!K^6rvP53h4n)*mWBksyP3X#uBM7a3DM``*Iu?t)Rr9#5Bst{0HkX@qvB^DVp z_W6L!hcYruF`ev-EK+7kqn;EE7(jD!@{EY;4hHO3ZI$#A!$01Gg0kLz} zSVZ`6rUZ_PC1E2raCfcBXa~PN%RX1O7Ru4unqCFqQ~-2%a{v8en7nvrr7=D^Ocy4T z-_9L|Bkk~ukrbSjYzQ*E3T@Pa*6r)aIb7C;GqsGt3xy7}Ky~!8Lbe2CP}Yj!Ai2RZ zC{ZDM4GTMpW9vPkyqWEohT>(*5#p+s(eL2}g*^9q5gE5`H-sNwtEP4XRQmj7`77uU zT9Hcu5N^9aLGRy-A2;#I>EKw49NDe&P)oe(ONn@NSpc99eZ<2D0B_tbQdoBxPuNk5 zEtjB*|JW)vB^E;gpMD&o^n3n_@{?lPoIkdkQ{5PZXu74)rCP0Z_(Bp^`LWc1YX+VQ zcmhYoU-ReD9!qMoD$8{A;qY3n^hrV+=!@uwe!h1Xm2QVm=6;mW`Z^=}3PE-NWGg|I z4C976BL;RtEBBJlVE)5F@zc}M%7vK~&^{iXOeCvMaSuh*F){0P5)1m)3NlK(4x1ax zo@3QF-^}-fxOXyutzr;-k?V^qzZl{bkn=+a?nDtwi67!D5 z!|^@pSoe&BuILooOt2 z&x{p{5~oA0)kWA&qu}_sxO})%yaZbW8rk*k*GCFOoZ{}-ZUwGTXLQFL+fT}^gQ57ty-P5>Q9ozJNz6pc576%U;+%>f5{6vnCk3jC| za(p$1K5x>%k~z*63?>a9)Y$chOT3QI#p`VkkO+ru24TUVZvs{gTTphp4!urc?kE2L ziq^rt30p9k8VFhAi|ECi2u|4~joMUXNkAPT@>K|{}^>MO|9FcaM5Rny;Y zPS%$vlRhsXl5bhyq8}A6!Y$_FN65bsuBpPncm58tD9?AnWa?KaiIzw(tr57yCcZ{h z;$iiK{WMo!?s)C%BnTNOHoBY~&D+9lio?G)y^xQOaf|OrVt*OPx`c4^6mAlDJp zPsnKDccuBVfK|^PlBtc*T>2vGVyly|6L|}C24SzY}0ZjWm%dt@SOjfKS;WiZpz~rmJIbJ`c?RGOQH@ zeW9rf+1HA}pTG0_Ne zik-rdVp$Lg=tgH{X`oSU$bTk6>FPw6WZg28fiY~7i9+=+-n@T*20(>qZQzq=7I zaKVGoX8f|F(gFlT?f{9I@DP#-f4v`e`a{G?iXZC`pFzcHf7J~dg5KBR;oXc#MDeR0 zJIDil*6tM(55Ww=h3Q-+901||f@URppQE*kc|`o%4I2@ls- zv_WqL)0pKP)DF&B6Az{EuozXr0SIV2Y>~e@51J|--oe8+tpy4IsyloA1W#Ni~oo@XuqJx7+O{%!K~~1seZl literal 0 HcmV?d00001 diff --git a/frontend/src/components/TaskModal.jsx b/frontend/src/components/TaskModal.jsx new file mode 100644 index 0000000..b3a3b6b --- /dev/null +++ b/frontend/src/components/TaskModal.jsx @@ -0,0 +1,62 @@ +import { useState } from "react"; +import styles from "../pages/admin/ManageTask.module.css"; + +const TaskModal = ({ weekInfo, onClose }) => { + const [topic, setTopic] = useState(""); + const [day, setDay] = useState(""); + const [taskList, setTaskList] = useState([""]); + + const handleTaskChange = (index, value) => { + const newTasks = [...taskList]; + newTasks[index] = value; + setTaskList(newTasks); + }; + + const handleAddTask = () => { + setTaskList([...taskList, ""]); + }; + + return ( +
+
+
+

{weekInfo.week}

+ +
+
+ + setTopic(e.target.value)} + /> + + setDay(e.target.value)} + /> + + {taskList.map((task, i) => ( + handleTaskChange(i, e.target.value)} + /> + ))} + +
+
+ +
+
+
+ ); +}; + +export default TaskModal; diff --git a/frontend/src/pages/admin/ManageStudent.module.css b/frontend/src/pages/admin/ManageStudent.module.css index 014c39f..931680a 100644 --- a/frontend/src/pages/admin/ManageStudent.module.css +++ b/frontend/src/pages/admin/ManageStudent.module.css @@ -21,11 +21,14 @@ color: white; padding: 15px; border-radius: 8px; - border: 1px solid #39ff14; + border: 1px solid var(--fill-gray); text-align: left; font-size: 16px; width: 100%; } +.student_button:hover { + border: 1px solid #39ff14; +} .pagination { margin-top: 60px; display: flex; diff --git a/frontend/src/pages/admin/ManageTask.jsx b/frontend/src/pages/admin/ManageTask.jsx index 713095d..aa9424d 100644 --- a/frontend/src/pages/admin/ManageTask.jsx +++ b/frontend/src/pages/admin/ManageTask.jsx @@ -1,10 +1,51 @@ +import { useState } from "react"; import Header from "../../components/Header"; import style from "./ManageTask.module.css"; +import TaskModal from "../../components/TaskModal"; + +const weekData = [ + { week: "1주차", title: "", tasks: [] }, + { week: "2주차", title: "JS개론/웹개론", tasks: [] }, + { week: "3주차", title: "JS개론/웹개론", tasks: [] }, + { week: "4주차", title: "Comming soon~", tasks: [] }, + { week: "5주차", title: "Comming soon~", tasks: [] }, +]; const ManageTask = () => { + const [selectedWeekIndex, setSelectedWeekIndex] = useState(null); + const [showModal, setShowModal] = useState(false); + + const handleEditClick = (index) => { + setSelectedWeekIndex(index); + setShowModal(true); + }; + + const closeModal = () => setShowModal(false); + return (
+
+ {weekData.map((week, index) => ( +
+ + edit handleEditClick(index)} + /> +
+ ))} +
+ {showModal && ( + + )}
); }; diff --git a/frontend/src/pages/admin/ManageTask.module.css b/frontend/src/pages/admin/ManageTask.module.css index 9099a04..b93d5eb 100644 --- a/frontend/src/pages/admin/ManageTask.module.css +++ b/frontend/src/pages/admin/ManageTask.module.css @@ -4,3 +4,94 @@ flex-direction: column; align-items: center; } +.week_container { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} +.week_block { + display: flex; + align-items: center; + margin: 10px 0; + width: 100%; + justify-content: center; +} +.week_button { + background-color: #444; + color: white; + padding: 14px 16px; + border: none; + border-radius: 8px; + min-width: 250px; + margin-right: 8px; + font-size: 16px; +} +.edit_icon { + width: 20px; + height: 20px; + cursor: pointer; +} +.modal_overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.6); + display: flex; + justify-content: center; + align-items: center; +} +.modal { + background-color: #333; + border: 1px solid #4fff24; + border-radius: 12px; + padding: 20px; + width: 300px; + color: white; + display: flex; + flex-direction: column; + gap: 10px; +} +.modal_header { + display: flex; + justify-content: space-between; + align-items: center; +} +.close_button { + background: none; + border: none; + color: white; + font-size: 20px; + cursor: pointer; +} +.modal_body label { + margin-block: 10px; + display: block; +} +.modal_body input { + width: 100%; + padding: 6px; + margin-bottom: 8px; + background-color: #555; + border: none; + border-radius: 4px; + color: white; +} +.add_button { + background: none; + border: none; + font-size: 24px; + color: white; + cursor: pointer; +} +.save_button { + margin-top: 10px; + padding: 8px 16px; + background-color: #666; + border: none; + border-radius: 6px; + color: white; + cursor: not-allowed; +} From 0ad52c3bb565c3fcdd2edb4c14e983573418910c Mon Sep 17 00:00:00 2001 From: NamKyeongMin Date: Mon, 19 May 2025 01:08:47 +0900 Subject: [PATCH 2/2] =?UTF-8?q?[add]:=20ManageTask=20+=20Modal=20form=20UI?= =?UTF-8?q?=EA=B9=8C=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/admin/ManageTask.jsx | 8 ++++---- frontend/src/pages/admin/ManageTask.module.css | 9 +++++++++ 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/frontend/src/pages/admin/ManageTask.jsx b/frontend/src/pages/admin/ManageTask.jsx index aa9424d..82075dc 100644 --- a/frontend/src/pages/admin/ManageTask.jsx +++ b/frontend/src/pages/admin/ManageTask.jsx @@ -4,9 +4,9 @@ import style from "./ManageTask.module.css"; import TaskModal from "../../components/TaskModal"; const weekData = [ - { week: "1주차", title: "", tasks: [] }, - { week: "2주차", title: "JS개론/웹개론", tasks: [] }, - { week: "3주차", title: "JS개론/웹개론", tasks: [] }, + { week: "1주차", title: "Comming soon~", tasks: [] }, + { week: "2주차", title: "Comming soon~", tasks: [] }, + { week: "3주차", title: "Comming soon~", tasks: [] }, { week: "4주차", title: "Comming soon~", tasks: [] }, { week: "5주차", title: "Comming soon~", tasks: [] }, ]; @@ -29,7 +29,7 @@ const ManageTask = () => { {weekData.map((week, index) => (