From 54816cb6a2a4304d0b147ec3c763e5da64d0464e Mon Sep 17 00:00:00 2001 From: jeewonMoon Date: Wed, 10 Jul 2024 04:21:28 +0900 Subject: [PATCH 1/2] =?UTF-8?q?design:=20=EC=A0=84=EC=97=AD=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 버튼 관련 기본 스타일을 수정했습니다. - 테마에 텍스트 스타일을 추가했습니다. --- src/components/LoginForm/FormInput.tsx | 1 - src/styles/GlobalStyle.tsx | 3 +++ src/styles/theme/Theme.ts | 7 ++++++- 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/LoginForm/FormInput.tsx b/src/components/LoginForm/FormInput.tsx index 4228b2c..16977d3 100644 --- a/src/components/LoginForm/FormInput.tsx +++ b/src/components/LoginForm/FormInput.tsx @@ -20,7 +20,6 @@ function FormInput({value, setValue, type}: InputProps) { } const InputWrap = styled.input` - border: none; background-color: #a9d0f5; height: 4rem; width: 38rem; diff --git a/src/styles/GlobalStyle.tsx b/src/styles/GlobalStyle.tsx index 9aaeede..e37b293 100644 --- a/src/styles/GlobalStyle.tsx +++ b/src/styles/GlobalStyle.tsx @@ -31,6 +31,9 @@ const GlobalStyle = createGlobalStyle` cursor: pointer; outline: none; border-radius: 2px; + background:transparent; + border:none; + padding:0; } `; diff --git a/src/styles/theme/Theme.ts b/src/styles/theme/Theme.ts index 4bbc7a5..062f09e 100644 --- a/src/styles/theme/Theme.ts +++ b/src/styles/theme/Theme.ts @@ -15,7 +15,7 @@ const colors = { const texts = { title: { - fontSize: '2.1rem', + fontSize: '2rem', fontWeight: '700', color: '#222', }, @@ -24,6 +24,11 @@ const texts = { fontWeight: '600', color: '#333', }, + menuTitle: { + fontSize: '1.3rem', + fontWeight: '600', + color: '#333', + }, content: { fontSize: '1.2rem', fontWeight: '400', From baddbf71eb0b54300e5f369989587727c4fc809c Mon Sep 17 00:00:00 2001 From: jeewonMoon Date: Wed, 10 Jul 2024 04:25:03 +0900 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=EC=82=AC=EC=9D=B4=EB=93=9C?= =?UTF-8?q?=EB=B0=94=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 필요한 아이콘 파일들을 추가했습니다. - 사이드바 자체를 접었다 펼치는 버튼 외에는 동작하지 않습니다. - Menubar.tsx->index.tsx로 파일명 변경했습니다. --- src/assets/img/arrow_right.png | Bin 0 -> 969 bytes src/assets/img/arrow_up.png | Bin 0 -> 950 bytes src/assets/img/btn_main_top_right.png | Bin 0 -> 985 bytes src/assets/img/fav_gray.png | Bin 0 -> 1221 bytes src/assets/img/fav_white.png | Bin 0 -> 1207 bytes src/assets/img/home.png | Bin 0 -> 1082 bytes src/assets/img/logout.png | Bin 0 -> 1135 bytes src/assets/img/main_logo.png | Bin 0 -> 3898 bytes src/assets/img/menu.png | Bin 0 -> 955 bytes src/assets/img/menu2_close.png | Bin 0 -> 940 bytes src/assets/img/menu_close.png | Bin 0 -> 973 bytes src/assets/img/notice.png | Bin 0 -> 1182 bytes src/assets/img/search.png | Bin 0 -> 1152 bytes src/assets/img/setitng.png | Bin 0 -> 1241 bytes src/assets/img/study.svg | 12 ++++ src/assets/img/tab_close.png | Bin 0 -> 949 bytes src/assets/img/tab_close_all.png | Bin 0 -> 990 bytes src/assets/img/to_top.png | Bin 0 -> 2760 bytes src/assets/img/view.svg | 12 ++++ src/components/Menubar/BarTitle.tsx | 55 ++++++++++++++++++ src/components/Menubar/Menu.tsx | 78 ++++++++++++++++++++++++++ src/components/Menubar/MenuItem.tsx | 36 ++++++++++++ src/components/Menubar/Menubar.tsx | 7 --- src/components/Menubar/index.tsx | 51 +++++++++++++++++ src/pages/index/Home.tsx | 17 +++--- 25 files changed, 254 insertions(+), 14 deletions(-) create mode 100644 src/assets/img/arrow_right.png create mode 100644 src/assets/img/arrow_up.png create mode 100644 src/assets/img/btn_main_top_right.png create mode 100644 src/assets/img/fav_gray.png create mode 100644 src/assets/img/fav_white.png create mode 100644 src/assets/img/home.png create mode 100644 src/assets/img/logout.png create mode 100644 src/assets/img/main_logo.png create mode 100644 src/assets/img/menu.png create mode 100644 src/assets/img/menu2_close.png create mode 100644 src/assets/img/menu_close.png create mode 100644 src/assets/img/notice.png create mode 100644 src/assets/img/search.png create mode 100644 src/assets/img/setitng.png create mode 100644 src/assets/img/study.svg create mode 100644 src/assets/img/tab_close.png create mode 100644 src/assets/img/tab_close_all.png create mode 100644 src/assets/img/to_top.png create mode 100644 src/assets/img/view.svg create mode 100644 src/components/Menubar/BarTitle.tsx create mode 100644 src/components/Menubar/Menu.tsx create mode 100644 src/components/Menubar/MenuItem.tsx delete mode 100644 src/components/Menubar/Menubar.tsx create mode 100644 src/components/Menubar/index.tsx diff --git a/src/assets/img/arrow_right.png b/src/assets/img/arrow_right.png new file mode 100644 index 0000000000000000000000000000000000000000..7bf786aecf91ada76ab83d41c4b10730f0598dcf GIT binary patch literal 969 zcmaJ=zi-n(7&U6u(o~Tu!9o{K?n->Nn@)TSyIp9z zv3KAPU_c-tA=nt`PzD$fGk-ycN^ERMoYOdEAXqxz554!k_kH)>^S#DyHnW~#7$#e< z=}kH>(y@GdiT)wF`c9{Nq}nAd+$WJ4AV#%u4}rRC9-t;N?ZYQuP>Ep{fYa`huJK5= zu*;bVhKpUFvKgjSj(yV_A_98o!0{CJ=f_VhaBPL`Y#F@aYiQuqjsny=YP7ARp(WXD z`5`F9G8J$UF+uE(yikr6cA_iOb#e?@FoBSv!d{!|8hb#)0RmebpR@P^4+;V&Z03u_ z;sYS^0uOl+3Sv$u%A2Ch^I-b1G+JQy<)*$fjYW3~J0QfDA&jDki#9nN96&*mq(nm$ za}<#a4?SYWIWOEu6?7C@f#VYgdmvFXdw5I~mO8yo!S!ddUN|iiEf|bV9||0wq?7^; zL1`8(qB%e&y5dG;au=Cr-|I(c06YD0fp*+2aQ D0g^5= literal 0 HcmV?d00001 diff --git a/src/assets/img/arrow_up.png b/src/assets/img/arrow_up.png new file mode 100644 index 0000000000000000000000000000000000000000..72c2308718dfc56c66ada15f87b91f73f2c0b6d9 GIT binary patch literal 950 zcmaJ=O^ee&7!C-Fu2w3G2lq5)_qfehZQ6v!C2blvU`lBV+si`JWZH&qW@0imY4PMi z5y77z{sRAi2YdAgc=6~>5cDV>7AM`d>%khB%m>f&ywCg2JFi;JN4eeoU4~(D)``)k z^G!N-uJ6$QUCH}Jr+cK)BON>>i4#Fa_wWD$D{w}z4IOXxx zgJ6S>NgH1I{ikr;orREZ!x&E^mtNfPAPW_$^$0oyM_r81*HvtdF~RW|hoIgmfm0uO zIEj~N+g2?U69>7_GBlR*Ip6nGQ;$+UmMbR`ArKVJB#WmN!?lgdi zthwG5SJ}$V8X*X2WCKS2Q|Ory4!|;D)!*(#-m16adfUB}w{m%EhR?3`uWMc((ca0H zo2I3kP1{36dp)8}{p~CKNgu?KW$4}X%b>rwec|qThwt)@w>Mta%xCiA@M7=&i?jUM fn>(*RSF~ICKJ&ew`@PWfD0@j(qiMXa^`HL%|3oE$ literal 0 HcmV?d00001 diff --git a/src/assets/img/btn_main_top_right.png b/src/assets/img/btn_main_top_right.png new file mode 100644 index 0000000000000000000000000000000000000000..d21d608840db46a7cb03306777cc827a6ee9f971 GIT binary patch literal 985 zcmaJ=PiWIn7>|r?Wl-2jP(+^@2%=41(sgZOV@;aY6_;7NvK3Ee$y*z`&CM-}n2z_q~2~^=5MJ>>R@| z$;z@`qiZ6L6EpPx=mVdl%NbH?kTtwTx@LeF)yA6$R9v%(YRI&EJ0DS=VWxmnZ;*zu zB3szy%oxK(u20zvlP^TRX|)jno2cn{3j5>DTNXIB!fs>?X!u3ca+dc3w6?cexAxkW zWV40qARoz8z(vFak-P1Ma-^^WU75!5G0%blgtQg**i^%)f+7wO$Z#-a!6gWm1WrgV zX0zF=K!gJ1p~wqjO32D-QHBr@B&bmxsCNPGMVw_%hFTyIroE=5WyD1xb=( z4N*){L@Mlg#Eep2xG+-CQD_B@PaN!lSkc_X9ip(*>2V3JKbG~vVVh{f_{j8mfrD{L zBcNgYAL_bebVzFG#P2_a!+Ot0d<})T6Ik@(wie=4zFZ8DNpMidcze{vY6}w_wy+P1 zYZ~erzFeq4dCVRZD<>19KSTnEX%sZ7YYsC`s}9S%W^Mi^L94&F1g00dR<5&4NTZBcTbz6xtHBt zm$VdVb(;~aX1Y-}1{OgmV-8XLqFehVbJZ^v5eI@_h96`K4$44TaX!~Ioga(`ch3vI z-|zqX|DXSJZ)Zkc>e%Jqg<)7ndWg@W(dWGFJJGji{l18XE_<+G=kzhVBAO86WW5MM zS{27(7K-xJ@o!*1hPi=~FW3d)6-LrkLUb@hRW%SB!}G(q?FMIw^Nd-wd7@#9eZ;+uVu=U_5nkkPl zSw6KD3$5aK$+iuKBrBB)QRyXgbDX4Ov6!O~34OwhV_R0Uw#tMGMpi|GqzTGNsR|A(sTHrleY@S)%T6t?nH1|+l4 z(kD#`9o*PKCzQb?O(@#Bnb-Alvx=FLZtGS_H$XBM0;7s1>lJGgEeK3nvush5V49EP zh)*br%us`|ScHp)xiBB1=|PU;QjtWcHx#A95kA2unp|F&CRM1}O|JZq8)?aP8bLKs zWFDHz2`HybT?Ly7GfHbOeJ%C2xN>VRp_W_{nIWBH{ns%!w@~jm)9t23i|w|D8tQcu zHT5s&uc0g9dLhko`RY%_i!tkI_x{DUhRI&tyU^CTa|6sj=8n!qUA4dF3QyFIO1Z|# z8?)?EDh%Ge{&D+cPyV>^3Fe3|7bmPgah5R=g+)mb}V>z zFWS%k@FQ6IfEzjb$hq8&g*r?8+1|L$UhbIx{*%m!NZ-Xfer)*5;kDAnsVDag_dvE> e>z)Oe?-)iN9*|F6R_;1Kmh|8Vec-mj#PnPRIHZt82`Ti~3Uk?B!Ylp0*+7m{3+ootz+WN)WnQ(*-(AUCxn zQK2F?C$HG5!d3}vt`(3C64qBz04piUwpD^SD#ABF!8yMuRl!uxKsVXI%s|1+P|wiV z#N6CmN5ROz&_Lh7NZ-&%*U;R`*vQJjKmiJrfVLH-q*(>IxIyg#@@$ndN=gc>^!3Zj z%k|2Q_413-^$jg8EkR}&8R-I5=oVMzl_XZ^<`pZ$OmImpPAEg{v+u2}(t{7puX=A(aKG z`a!A1`K3k4z=%sz23b{L$o& z6x?nBIvafW<{smI5r*YzA4Opj7DtQk9IUcA~AGlALUIDbcLLxgNc<$|<& z_9RJ-zcR15X8bT!sAJ@cnZT&f8{Ke2sAE6F$2^5P-Xq5wD;Ps2vx_wId~B=YP3bT$ z>d1F2GSgdsli_2!f*pUiWQym6|IeIxR~}yYQ(8ctd8d?G-`Q!^4tqGdE2ORzDAv4e z;GOkJ&*7%4!yS&)_~um;4@{p@+BidU)e9SeY{#RA8+Qnuy5?lWbC{JaV3$Z%wt&EI z219j$_06YNKKAwyZur4$qIP4#k;;Z0+#UZHwDa#`ocW@$rLA<~v;#*On0OeT?e5w7 TBvXwCRFrtS`njxgN@xNA28ENb literal 0 HcmV?d00001 diff --git a/src/assets/img/home.png b/src/assets/img/home.png new file mode 100644 index 0000000000000000000000000000000000000000..a1bbcb05f070609193f95b4fedcc388876b01475 GIT binary patch literal 1082 zcmaJ=OK1~87~a&Hs$i}4Ek%b_tYDJeP1>Yc8*7?P+d#L5G}_+kKBmpm?9RG7HQNfd z5f6$U6v2a_ASj3j5xfW<6zoAgDu@)sB0hR3mVgH>9-M8H=)t%!JM$0U_x;bgm>%fe zxMBAOilR2A`h<+TlhwG+Oa9-dufHbSE}R_3gJ={NBnwh;70D2!bZHD`prlTodI>uz zY7Nk`!+2Qi=M|&}Bo`BKbd#_ts6C1o69Aj2`uh|x<=p3*>5WAsqF$cknH=Cr;k z3l2^VWR|Qf8Sb^a27`+aG|zHB;o@>mSY(<$Z$bF7vV!eo@GJ#qlq_59py7ZPuUl-Vss8;lV_Mh zp%5s90>~O;xM(!$Y6OFRg7Dju29_MZVehLb2+&q6&BPiqfU79UXadJ*66tCRx>=Pq z>~fh%!5Bv}87{!ODOG@?_fAJ8x4s(-kVnp}4fbdz`%prxILYLA6Fm7A_YIEg^%#M4k4lOaNV-F27>lPX6j=NVMkq7ZGCB(DNoV>WO zaPnE5HPf;8LTg=VD^4Bo?Vc(=-hBV@=2yKQUtc~9Zf%+kAI-0wjTD`RrlmT0Js7C} zIPxM~qDrU136E^w^Lh{JjoUsn9&dPCAN;(tY1$(`L@6BT1(T{y3&aE*F2NG*|KHLu9>x$-c9@D%jer}A6h=v|EanD`l3^w)^1&PVosU-?Y zsp*+{wo31J?^jaDOtDo8H}y5}EpSfF$n>ZxN)4{^3rViZPPR-@vbR&PsjvbXkegbP zs8ErclUHn2VXFi-*9yo63F|8Mv>2~2MaLazl*y`Y4UTL84#CABECEH%ZgC_h&L>|v`++-@<&X&zK> z3U0TU;nb@Sbc{YIT9Kj|CIn17ASOJ~0y*$xpPC0u>qWps9k!IG445IFdb&7W9pfM#EF5PfI#}*`9yj zrE#4_!M8UzWvs1tOU*G`#9dHWxVNvTr=;TBo0+Pceq3Da{{Qh+j>~VJKNoM*DSL84 zP~@!7jyX)1di2`X%w(N@?A*C?|8E>|oYnZiUYJ?(!TYI7QyFKx-Zyi9b5N#a$GOIwnTcI^!c3OYXV=tR?nEm}nyM#jefjm*sE xHJPu~($swGAb#b-g@}`9&;Dha@7BP;%)plt6Ov{W?EoqQJYD@<);T3K0RU1~gKq!; literal 0 HcmV?d00001 diff --git a/src/assets/img/main_logo.png b/src/assets/img/main_logo.png new file mode 100644 index 0000000000000000000000000000000000000000..16c8225941e6f66b3c55df795d0700ac4e914499 GIT binary patch literal 3898 zcmaJ^XH-*ZyJf%u1eGcfX(4n4Qs|**AfYHlsR2O@BtRq~kVFW*7{XAbi3rjZQDjs= zs!}y{6e&aRMU)~%r6>qom~Wi#{xM4tmT3ybbqnh(a!3r7XI;ym!)dZ5*s1`rUB)dSh9n?uZf3~`=# zlRz@gI?%$#EzrwN8w)zC57ec>4+MxfDh5a+61*vJnjYwHUHHNN@EQyP{tcme>4E-} z6x#eE(2zvN0o7F?%5D%12v7s60##Mh)YMc0!XQux7y<)BVaiZVxGD?|fdKz`KnKyt zSa-M;(&(R92PZv{Cza|02ZR0n{Z;%`RY+tHFjQMx`%nW0Q$9c_Qv$rH7@D#-Mf#@# z5=U_(<9(=jk~i>B5#vg_PSpb)Wcr^Hh(7i`zsscGI=_kg?tq!!udt*udl)usD=5SMQ3Kiq+hBHO#fe!d8csv%asRdP2HPF&VsH-BNP!s}T zpbgPdS5-r(Az>(WHKU(gB+2bM5$8?)$;JMci})q?&0&$ zaF>`O5jM1uPnq0Fb~r$5*Gg#3m{3|KS7~_Ud>${t$?6qvS$d>$pBRb&IjP7e&i=Y0 z&Z@n_0EjXXyd8;bLZ&vIQ<7Y`R-i2{}5QIVMP^pTF>**u~Tz@uDS+0d# zxYx`R^?~V%x!G;!3H&55!W~WLpVl?$H>Nq#?A{kX6`dLB?|r~4>zsbCKZB_R*b{ZE zmmZVJV#CyfvD}7HvrNb|53`D%#(Yw3R8TEdG)GTP7QObl*2gA&M(ng8oSR5Dn=W8J zG$`^p2C4%Ka;|dub0#hZ-dJM1Oyg%SRT7X8Hj5kb<5(t1gRLKK6f!OD$E=wf^t>@p z#Z+Dm0Wl?}g{H4yUc76l_kQe^!AQPD+^tHIWy5%3+@Ft~l;eEWGgJ3`7k=>UyKM3M4z!*-rn-)!=Wx&y z9=XvMVBfIOSL4dlABQYeIOQ)Bih69nX-_O!GI!~Pt$iMUY)e}9cW#Nm@+9)XV5j$6L%$rLS>v()C^=SWoJ+2zCU+1*21wc zB3(d>&=8^?xNvk@zlOs@=Tl&SJ5>n-_WupxvRMT>OPaRO|m^J8t;-~Ivma;oKt@B zq1&^5k1&3=KKpq_(uqm|#dNg|1nAl6j=f9RXiR5IE2niDl5>QK{95?R;E160QAp_|_O5Aso+@1`6p@jkabbCI#!= z+0&*QRYp=a2u|K{y!M3r08~Dp<@h^LCakNsnBBk&pC>-&xSX*!Hy?{hdUe7le(z+SG`>}6M*nJ^xfh1P( zbf^8f3ebG2%M`hz=ST>4O)(;M$5nX+#)`&(@7-{`HmN00lRp`n**aD1Lq$B_{_yAI z#1Z0HQ;)zVP+5UDaGrr}E*K|;trBcUdUx%_U_3#h!#U$sdaK+_mF%x#bQg|*+N7A& z(nq{y4wwR#QW3tQfqD@0w%(2%we9LM5C6K=_^Qgl$Hh?jf?ltJS*fQ@VFhcp)9S{_ zJJ^?zHr2lu`s;(RNK-T9^$fVaV2d}M&gM4Z_1&>s(0{d>(E3&5{BM%v4JVD5FEdHYXOt#4+gUTrO7=54 z5mFyBisWqpBLDV3WRWy;&IpLpnS9__J&wk+iYoh)~fjeW|rZ zz*|O4Q(GSTw7$%h9nA?twrmUampW((S+!=68B}$BaAJ7yl(3i3wgisH!6yIZD;FGcuOWhX)SV!a>Z$4GyQmjoPv^4sSXQWyNNA3_r>_TIv0?o#p+Hcfa##W~5 zr?KW3k5!#sH9tn6i-sje2PHEn(8+|m1{T`Szv=0|mUa3VB@(GJ(7%I7$>kx`a%@lviM!WvK~Deq#G zTS1eg3{oJ-@VO@fF& zGed6WtzE&vc{Ar0 zirP7^cdI89gM724ecNUlScvpi(HOr))XDETuM`XTMedcKQhL9QDa&06L8QWO3dX0}^VgZH;`vNLbBd%aIQ$8!@$S z>lF|tp8aM|SslskGPaXgnCE9+y6iqs@nTwc{auj=wlHyPF~;L1N|hY7d6}XIWnlm|AjwIQ{3KZWi#W< zPjH()QD6}_LMOa89t8R1rg3B_TD@h?8?UiQx5c}I((fb(+9f-b%bctd{K7lk&UC6l ztBdGH)DgUW0zYKC0WIuv{92 z8Z1@JEo8l|*)tG*4R2j;LLV{Hwe-pA7V;xFvld>>D+_>Qp;!1JoNu=Nunl{}V^ z1c!lC*DFVxYciTN&q#zws1p^*g$X?2=N{T5_|IHFp#wnwCiU>qWk=SDhY}KhjgW#% z?};ZYy)e($xi)XhxRA>3D`$x*Zx;X}Yd@9s@-+?rh7j$u?V;Me?D`Y`cn#%rk82sq zC8zO#m#QlJ#g(s9x0%4#Twj}sJVvnKD~XLzc;9cRWA%9%zIyKXu~2vQ3zN1HmYWJR+x%8v*&9P*94qxdZtEDwsnJOm#Fo*m${jhv3*HTlTe^ zR_M84+DEWjah@yOESQ-o;>|>9s3w+w=Xd>ZddTCc7`GHdIylJsrc$JmP-H?%O2)^4 ztZv*SJ>GI|&`+u&a&~yUeDTa^6QBYfZ+Qc4)4Uk+xB<_ zxa_vsg6aC(;H?rq=a5)yYVoWIOYk$SWO}E0$@y%PAi9^`uI0G!z8IR*l+ewdj6!3) zII8nGnV;yo!YOwpG5f5{D4dNdD(z04rLO?Kca5I?IX^StjME^0jDPT|tM_odXvX|} z)EnP`=BCiU;KEb3N*cw|af>&G#Fa}4#iAb^EkvTVR$OrAlLT4f3jLG|%A_soqMTrm z6m@Cu^p1mcyrI~B*Ejo1nZEn+t6|pGTOL2U&g~?!u(2fWP2OIt6Mb{|H*1QrKo%KX Gjr<=NZ|Nog literal 0 HcmV?d00001 diff --git a/src/assets/img/menu.png b/src/assets/img/menu.png new file mode 100644 index 0000000000000000000000000000000000000000..03a4e138e8356b1c4952b8038b89d33419ac9755 GIT binary patch literal 955 zcmaJ=zi-n(7`3QCC`u&;hQPwf-4OAw)OBOURF0icOLY{INC_K`eMzj;K4V|7lc`i< zK!X3E3t~qsObiULbV5u>urYN&0*M7ABsiyW%0RGmz8`w;eee73yGPB&t@Yg197R#< z#;)EX^QClLyg>ffzW=t!bOqOXxQzxlwn9j$4(dZ-c-9cMpyf>O9m5JmtpT^w!##6P zwvoqJDTYbBfUqg5vXcasJ%$+c;n4LJ`s=ILG;ke-?usU71{xf>yR#6sXN`_M8{1`v z-nj`XiA)4Mh%JzK`+g)R3O(1A$vQn|X)uT2u|l7k>X}WTp%4O*;fgl5#eprJ;Y*v6 zB;5c4$8#(vu)I*@CAlQX90wL3O`?U)KyK;vMJ%#Y=n=+&%(8JDGjWMQ;gIFa<#MVa z2t|S@MpGYKNzsosG6fw*cIXD!MLtLstv;Gyg(gl1NMm!^~f zP4oXy&s(A++=6F*|0x`GrU7JIFhY~iCKor@NJ9m(7D5Z7u!GQkR>kHBVHAx}0JOFU zx~}h_IGUqPQ#SkvTfPkqU7-n|aa~8=)~c#huWG6&>O5alRZSDBRaNAx<(gQl2^m*M z_QZoe&bZDQS6|6Z8^H@mWF3a?edyFf9e!byj;J&R68Y5;JUit$$r} zc0_t7T`rrJY?f^gebVb8Y3jFkj$V=n!5g~TNj~G r80EKrJ?fOUXUVAKA literal 0 HcmV?d00001 diff --git a/src/assets/img/menu2_close.png b/src/assets/img/menu2_close.png new file mode 100644 index 0000000000000000000000000000000000000000..18fe2074113c8c65cd19e86976772122f76a70a0 GIT binary patch literal 940 zcmaJ=O^ee&7!IuL)`bI;ok0zT|p4`tRvLn z^W}8pw)y}2tL>|Ny3U$?)+IwWb0`*S9vNU@1} zq!=*?BF+|sN;QcbcY+xh;E^Ai@Yjcr5cr-6k4v^}M-4poj}{bn7p zJY-H%2;==s0pZxCe#Cqdf>hBNkSQ}EcY2;e5UpjycvU7|Fez~&NfG5Vr3`4>|Az*_ z8XdC^zVQ1`;kY-Cu++gZnNpWu+;Be)6&VeR9Y$!6kdv&6?J;2_9+L<(x+QSzhaQ>5 zOSEkpRv0rUbg_j@$oZo0dq!Q+8>ooN^%5#8O0!m1@70@4y;;ljA6t+r1rB#s_KrLc8xnd)}JBKuliK!AhX)NI?N+LA_NVxW;v0D3#eIZUp z1OpON#RN<&Y)lLYkWdi=(4`v^g5SV`!~%kInxqT_559M&@B7~O-o3k5U0<7@JvS=| z!n{$@YkW=OxtSCEU-r*0@MV#enygM+tZRitC^&SJ0K>DkNR3!d@8$=R7ldQLZ8TZa zysFsLldJ?I#a_VKf{0t?8FqZYBVViivU~B~tODHL6 z1T@Y6Lp^Vdj#!Nx`TeJG)aV5S)<{GjbkEF+9@sgTogd8MRfb2wW>8q!8w zo!T9b_-w>=j=1TG+++~EfM?c8=-whuIiwyK6s)+Dy`YJDL#{K~3!cb@+zd>v^{;Cl z9r4*o!tv1Z&3NpI&u2a4LtRp@xA=q54872ZKi@ytn-$Q^)WPDf-|+Iw(*DD>-ks^) zr^bW#cTawQH~n_{!pA^A4Iix(eqMV%^g%t);|s#v{;9K19t*q412anN K`m^GV+kXI-pf4r> literal 0 HcmV?d00001 diff --git a/src/assets/img/notice.png b/src/assets/img/notice.png new file mode 100644 index 0000000000000000000000000000000000000000..0dfb387680fcab92e0623e7250299833873d5e7a GIT binary patch literal 1182 zcmeAS@N?(olHy`uVBq!ia0vp^d_XL~!3HGNrubO_DajJoh?3y^w370~qErUQl>DSr z1<%~X^wgl##FWaylc_cg49p6dArU1JzCKpT`MG+DAT@dwxdlMo3=B5*6$OdO*{LN8 zNvY|XdA3ULckfqH$V{%1*XSQL?vFu&J;D8jzb> zlBiITo0C^;Rbi_HHrEQs1_|pcDS(xfWZNo192Makpx~Tel&WB=XP}#GU}m6TW~gUq zY+`P1uA^XNU}&IkV5Dzoq-$tyWo%?+V4wg6Nh+i#(Mch>H3D2mX;thjEr=FDs+o0^GXscbn}XpVJ5hw7AF^F7L;V>=P7_pOiaoz zEwNPsx)kDt+yc06!V;*iRM zRQ;gT;{4L0WMIUlDTAykuyQU+O)SYT3dzsUfrVl~Mt(_taYlZDf^)E`LU?9gN`84U zShcUOm1kaYNn&1ds;7&s5>UThW@d_&v8kz(nTvs;qp7Kjp`ojzg`1nDrG=5DxwD~} zsga2ROs`9Ra%paAUI|QZ3PP_DPQ9RnkXrz>*(J3ovn(~mttdZN0qkL`Ok8epc5}mN z9#n4%ZnqfV)TklMZiRDF|(M5fq_xP)5S5Q z;?|T&_F1hC0>{#?n=~e9sfvkR`?mgicZc~&-<&-S97)NFOSo9_7jQH!YFePNLqnQ( z&x89mpAQ}~vflqUEuB5kD{-|&-^%yD=U@J|OoOXqQO7n*3BHuuW=k@wW{X8kE1klW z@v@?P*22_D3LG0s|FLe?S-dRskVRiRAJ5^2Wtj&GWum4^u^iMi$+nwaT$X?4^B-=x z6&hXrvNuX)zjM6#{qO7fb@MVM+Mdhq*z?w>Wx{mPi0h_%nYQKrzGiavy!ivp1$~cW z^sblQy*blplg@sB`FhDUtGG^WVwt1D*;udDrPS2d_NQy!HpasSFHCq=OPv3_;I);N x?5FB>+w;u^JdDXalT;d4tvayj4c8yB1coMsiO1#I4rzl*3{O`-mvv4FO#nh`l^y^9 literal 0 HcmV?d00001 diff --git a/src/assets/img/search.png b/src/assets/img/search.png new file mode 100644 index 0000000000000000000000000000000000000000..78880d70da497b974f87835278f18507baced5fd GIT binary patch literal 1152 zcmeAS@N?(olHy`uVBq!ia0vp^azHG^!3HFKKIPp6Qj#UE5hcO-X(i=}MX3yqDfvmM z3ZA)%>8U}fi7AzZCsS=07?>3@Ln2Bde0{8v^Ko2Tt~skz|cV7z)0WFNY~KZ%Gk)tz(4^Clz_GsrKDK}xwt{?0`hE?GD=Dctn~HE z%ggo3jrH=2()A53EiFN27#ZmTRp=I1=9MH?=;jqG!%T2VElw`VEGWs$&r<-In3$Ab zT4JjNbScCOxdm`z^NOLt1Pn0!io^naLp=kKmtYEgeeo;J&4sHjE(uCSxEHIz#UYgi zsro^w#rdU0$-sz9QwCX8VC7ttnpl!w6q28x0}I7~jQo=P;*9(P1?ON>h49S0l>G8y zuxejlE6=>*lEl2^R8JRMC7^!2%*+%kCsSibBV!9wM>7KhLqk_bOD7j6OJ{R4BST{& zb7w;nm|mCsATTyCgZF`$d?U4;!=nV$xJ=V`N$qp~HUUa>EZrf&cB7j2Avy!W`u|HxF$~uLgb1)>zx;948B8>)c~m8eMSW`ofiqqsoF@PIc-mj#PnPRIHZt82`Ti~3Uk?B!Ylp0*+7m{3+ootz+WN)WnQ(*-(AUCxn zQK2F?C$HG5!d3}vt`(3C64qBz04piUwpD^SD#ABF!8yMuRl!uxKsVXI%s|1+P|wiV z#N6CmN5ROz&_Lh7NZ-&%*U;R`*vQJjKmiJrfVLH-q*(>IxIyg#@@$ndN=gc>^!3Zj z%k|2Q_413-^$jg8EkR}&8R-I5=oVMzl_XZ^<`pZ$OmImpPAEg{v+u2}(t{7puX=A(aKG z`a!A1`K3k4z=%sz23b{LP(UIa|k68DbXV_;zP_jGX#skl`$ z$Xge#UkW(o z4l=H2p7*0_%gpyPZ~Z*wwey)yQ?&om&;s4(&KEXqi($PMAI%cHfj{hk(f8nw@;hf{ zaI@B_Cvfu|6cXmioUO8@p0mtxa`o%4+%9`qA2)5YGW9)nM!2S-I$$E#wF4_du0IRi z#ii9#$s2s{!1m)}zwb4vo@lf+Savq=k?frAb=mdI);9f;llf-tyvnd&v2f*QQ)P&D_|=-Y3qxnDrO1N$Ff%E0}AVm3PNs zvy#=bfchmq;YT}F?ueXqYI2Z`;D6xz&Cd6O_5p^6i~af+zLiP?6*iu(elF{r5}E+& C#;jog literal 0 HcmV?d00001 diff --git a/src/assets/img/study.svg b/src/assets/img/study.svg new file mode 100644 index 0000000..dff3c4c --- /dev/null +++ b/src/assets/img/study.svg @@ -0,0 +1,12 @@ + + + + diff --git a/src/assets/img/tab_close.png b/src/assets/img/tab_close.png new file mode 100644 index 0000000000000000000000000000000000000000..d63a65cb11c5ca6e887210b3a86e73b9817abc30 GIT binary patch literal 949 zcmaJ=zi-n(7_~rxDyUK=mKGs#awpWr_BlVCSTV)1lO__5A}1mls8q+kBvxvlu`k5Q zh*;Rzm{?d45<=_@Fm!+gf!O#Dm{=GXIj2d=Kx*lHKlI-F-uK;iPn(Uy&D4z)!!Vom znr_nhYBDyi(Eq8~`A(-DQt6Tw?vsfXB1Uy^4}rR84UmZ}XZr9nDlyDu;I_M@YuuA< z>~U6t;bJeKY=$Wv#DQgx5CJ_jaD9dS_5K43Tt{I$IYTf44GrDeEJUqYqixSdcF|!E z?toG(QvnYV3&h@uAIY)8&UIzFPL6pN%pqi?uxF;aMiXc_L?FirX%p(A3VbHD!;j@r`z@g|D!IJD`-^>>p{fvkndA~Hv zJ>-)m*E#2^Yq?1ycma*9qtJbXoN9Mgj=dM|~wT%MZYlWYCwnwLkk zcar6*Y3XLw_QcO}$J0CpH^FHr8?`$nD%nZlQ z#u$bfF3iFrolnqld}xsV=e(8cbUH((E2M;%Nz?EVle2IYfr4YyP!So{+Re8p%P<4L zE>}oJpO;PSa7KjTLdTh^5QN2S(6 z*=#k;jKxk}0@+Ze0uCYu2%Qx-kVA!S>&kQ;9rG+`Lr6nm_f1vwMWA6H0f`ghrjQaq zO60_eWICO`2oi!Q@IrzY6LB#uPb6eP0G*Ge(R^!JF2Z~#7Tqaqoe)pv`DU}pH77Xi z*LX3L$wV57M4Tex!J12qFzyCpT?L2&)3-fhV;4kiYkoj?+U2q=*ju{!=(8uX%_sq5!Y@CcU`ju_%-$Yd$gv_RAQrbgQ^n z#{>s;>;bJLfhF6ua5HG5bzLsF0Wn+?6`;aWK4;sOoQA1nQh;ey(vqS$om2Cf3{=&W zmRBbsR8w6p#OA7lT+-!Q2i(cN+^7*8k4A>bw{IaU?_&qF6PE4%UZlQy9j?{iOR6uI zr)K!*TK~G{?h);sXxVF8y6Lq&a%r#ow5cbbe;ua}qFjKva`EFYVOs9^2cx*SPZVy8}jF?p?j`=y6OMynXn? ko%xORr<*5#&1&n1nEO9Y&3rss{T#ix!t?@srry~21HsuhH2?qr literal 0 HcmV?d00001 diff --git a/src/assets/img/to_top.png b/src/assets/img/to_top.png new file mode 100644 index 0000000000000000000000000000000000000000..e19d3889f85d3ba795017a4f6650e62a9b446821 GIT binary patch literal 2760 zcmaJ@c|6p4A0JI9wc6w;S7Ve4V-7QpVKB^C!;Uh}32B(YFc&j2SRFLdst{4RE2>qZ zsaL2)-~kTEFQ{PES}L;`~30r{9do$@B96JUhnt&bN+s>-^F8&KYS;rDhB`n zz9ZP-NRsvV=Dkfu@-(@J-6C1`@$eozXSP2toDxa{V5w|h8i>H81kgw{3N<36iDnJ} z06}yY51t3{N34ea``MS|gaHTgcpNko8Xg{Q5N>F|4h?|9O-)TVH4q4h1Oeejuy_qDKI%-Wm(+MWs(#O%BOIka0A$8N?(9P;{S&- znP1Ud9*Oo(y#G^}>k`4CK}j?&J1o>s(l~$ZO;;SWO(>1RV~4u1*^Dn$JQm32vAKb4 z4#>tC1#+jesO)g=Cp3|WCa}0X3d@g1z+u1=z5$(1MO&L;c)7)}3n zEGFO7`^=?&I~LP#a-ou7pqp*|uQq=%NoHqr`*mm~hp%H#V@YN`R5H|8$=4JC09gwH z4(r12o6Z^tR&?K6-UM0zSNG9TssGe~!@o(KNNw}ov_4E016y;;3kO|M$A zW#uWS4n3J)Um92z228X>U1|l|fbqu@jKmRdB1=(4Q%iEgVRCtp4rE6jos>=r>fb#} zQR#kf4o`@l@yjve&&Czd-8&2@>EOO=rF;ELKg{n4Gy^aJ5BG14;?=>V?2D!Pg&SgE zy6wq2-%?iT`rPUjrf2r|#wCNuKE)I0*i$vGaY2xGVgvqA{Ah(Irh6dp`ovYihhw70 zGr^=2ufsm7wP@Bkl+VjWnhBSP-63UwnK`%hOMqzG$rUnxh0bssJILD!oDs#}i;bh` z|Dq(Xtbby~XQ7xWdPE@VZCN?ONDNR~FygVR~ZQ1-z27jOY$WZK%;EEGZbG2jmp@ON3HQ^9r z;QZbh-}%3`#4Ig&q}7O!t&SZ!TgHA(qhS)0^RI-Q2$8aiiefac1CnwSm^$Z^<$KmM z8Guu-_hRIZz7ZtD^>3<`GU1$UL%`GgLv2d?lJKeW2z@b89Iq2FpDd+5~LW>pmh(9PgWI)Y;ikWp?uAGC6yG%w&#%2vSBu+n?oey4-35?>M!4 z$75&5=^j~QoU8}9KWCh9?ZVd=feU(<@+iwGWS4dkA448aP_?#iDHF)FnrRCIAGPBh zKc*#nd$iXH*X|Uf3eFC2yxWDzs{MUVLHcgtNfb=GD5CuMa8PGqbe!m|bZdml^DIjK zgfMb9`IT%{LW-wi!F6F@K(DKGsd4AzK3wJ8q=Ex`4Bno(4;He^q-g2jIRHX zs6I0`xbxhJ+mF0@=e6$M_m`d%i&q^k#L1XdRaY+tcNg`R`}_AV?DEPa*WA4ukdwM{ zRUbQX%Eu=sS*fRJssiBMvn%m5*deL;H#tW4BC@8ud|CU(h%9j;HuGRl_FMa=hSN{B zeC)3rVT`YiGym1L*4c-ZNpxFna|@7~yST^aO=1595&0~!9^sG#U0+Oht=wO32+VNZ z@_3u6Lvhpf#D}J2L8ejr>^A+e1?x5adbsItk8UTx#UIOi#?t_*SFhq z(_F~QGe*sJKkFV<%qNg=*_+N;NEss)eEAHq9l~Ll~(n8SZ?J!K~y%Q%W$gctx|KD zR?4%oNqK-SY{$1|IJD^8K07geGdA9M(%1PzkGV#wjdHS;p)7LesGj=JxfdQPbHK+6 zs36DgjQhwq%GfSB+CZMszRQ11ADGhEYIz}1qrtS0hM>ST0_c=2|n)uq>v=F@45siM}D=*GU}#v24brH-dy&_;sE)9h<6 zLwct$v3-*0mK%#)8aHh#V3xw| z8`8ImNs|{~b7^lY2gm3Yj-G*gm^(6F98^N + + + diff --git a/src/components/Menubar/BarTitle.tsx b/src/components/Menubar/BarTitle.tsx new file mode 100644 index 0000000..90a0e27 --- /dev/null +++ b/src/components/Menubar/BarTitle.tsx @@ -0,0 +1,55 @@ +import styled from 'styled-components'; +import Star from '@assets/img/fav_white.png'; +import Search from '@assets/img/search.png'; +import Close from '@assets/img/menu_close.png'; + +interface OpenProps { + setIsOpen: React.Dispatch>; +} + +function BarTitle({setIsOpen}: OpenProps) { + return ( + + 학부생수강시스템 + + + + setIsOpen(false)}> + + + + + ); +} + +const BarTitleContainer = styled.div` + background: rgb(163, 20, 50); + background: linear-gradient( + 90deg, + rgba(163, 20, 50, 1) 0%, + rgba(51, 77, 97, 1) 100% + ); + height: 4rem; + display: flex; + align-items: center; + justify-content: space-around; +`; + +const BarTitleWrap = styled.div` + ${props => props.theme.texts.subtitle}; + font-size: 1.5rem; + color: ${props => props.theme.colors.white}; +`; + +const IconBox = styled.div` + display: flex; + align-items: center; + column-gap: 0.5rem; +`; + +const CloseBtn = styled.button` + display: flex; + align-items: center; +`; + +export default BarTitle; diff --git a/src/components/Menubar/Menu.tsx b/src/components/Menubar/Menu.tsx new file mode 100644 index 0000000..f5cdfdb --- /dev/null +++ b/src/components/Menubar/Menu.tsx @@ -0,0 +1,78 @@ +import styled from 'styled-components'; +import arrow from '@assets/img/arrow_up.png'; +import hyphen from '@assets/img/menu2_close.png'; +import MenuItem from './MenuItem'; +import {useState} from 'react'; + +interface ItemProps { + id: number; + name: string; + type: string; +} + +const menuItems: ItemProps[] = [ + {id: 0, name: '수강신청', type: 'study'}, + {id: 1, name: '관심과목 담기', type: 'study'}, + {id: 2, name: '강의시간표 조회', type: 'view'}, +]; + +function Menu() { + const [focused, setFocused] = useState(null); + + const handleClick = (id: number) => { + setFocused(id); + }; + + return ( + + + 수강 및 변동신청 + + + + + 수강신청 및 기타 + + + {menuItems.map(item => ( + + ))} + + + ); +} + +const MenuContainer = styled.div``; +const MenuTitleBox = styled.div` + height: 4rem; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 15px; + border-bottom: 1px solid ${props => props.theme.colors.neutral4}; +`; +const MenuTitleWrap = styled.div` + ${props => props.theme.texts.menuTitle}; +`; + +const MenuSubtitleBox = styled(MenuTitleBox)` + ${props => props.theme.texts.menuTitle}; + justify-content: flex-start; + column-gap: 1rem; +`; + +const DetailBox = styled.div` + background-color: ${props => props.theme.colors.neutral5}; + display: flex; + flex-direction: column; + align-items: center; +`; + +export default Menu; diff --git a/src/components/Menubar/MenuItem.tsx b/src/components/Menubar/MenuItem.tsx new file mode 100644 index 0000000..80fd08a --- /dev/null +++ b/src/components/Menubar/MenuItem.tsx @@ -0,0 +1,36 @@ +import styled from 'styled-components'; +import View from '@assets/img/view.svg?react'; +import Study from '@assets/img/study.svg?react'; + +interface DetailProps { + id: number; + type: string; + name: string; + isActive: boolean; + onClick: (id: number) => void; +} + +function MenuItem({id, type, name, isActive, onClick}: DetailProps) { + return ( + onClick(id)}> + {type === 'view' ? : } + {name} + + ); +} + +const DetailWrap = styled.button<{isactive: boolean}>` + ${props => props.theme.texts.tableTitle}; + width: 17.5rem; + height: 2.8rem; + display: flex; + align-items: center; + column-gap: 1rem; + padding-left: 10px; + + background-color: ${props => + props.isactive ? props.theme.colors.primary : 'transparent'}; + color: ${props => props.isactive && props.theme.colors.white}; +`; + +export default MenuItem; diff --git a/src/components/Menubar/Menubar.tsx b/src/components/Menubar/Menubar.tsx deleted file mode 100644 index 16e7537..0000000 --- a/src/components/Menubar/Menubar.tsx +++ /dev/null @@ -1,7 +0,0 @@ -function Menubar() { - return ( -
- ); -} - -export default Menubar; \ No newline at end of file diff --git a/src/components/Menubar/index.tsx b/src/components/Menubar/index.tsx new file mode 100644 index 0000000..e08516d --- /dev/null +++ b/src/components/Menubar/index.tsx @@ -0,0 +1,51 @@ +import styled from 'styled-components'; +import {useState} from 'react'; +import BarTitle from './BarTitle'; +import Menu from './Menu'; +import close from '@assets/img/menu_close.png'; + +function Menubar() { + const [isOpen, setIsOpen] = useState(true); + + return ( + + {isOpen ? ( + + + + + ) : ( + + setIsOpen(true)}> + + + + )} + + ); +} + +const BarContainer = styled.div` + height: 100vh; +`; + +const OpendBar = styled.div` + width: 23rem; +`; + +const ClosedBar = styled.div` + width: 2rem; + height: 100%; + background-color: ${props => props.theme.colors.neutral4}; +`; + +const OpenBtn = styled.button` + width: 100%; + height: 4rem; + background-color: ${props => props.theme.colors.primary}; + > img { + transform: rotate(180deg); + } +`; + +export default Menubar; diff --git a/src/pages/index/Home.tsx b/src/pages/index/Home.tsx index 504f956..6dc66f2 100644 --- a/src/pages/index/Home.tsx +++ b/src/pages/index/Home.tsx @@ -1,15 +1,18 @@ import styled from 'styled-components'; +import Menubar from '@components/Menubar'; function Home() { - return ( - - 강의시간표/수업계획서조회 - - ); + return ( + + + 강의시간표/수업계획서조회 + + ); } const Container = styled.div` - ${props=>props.theme.texts.title}; + ${props => props.theme.texts.title}; + display: flex; `; -export default Home; \ No newline at end of file +export default Home;