From 2a02abdaa396fdc70d9d2c38f2cfd986b4772b70 Mon Sep 17 00:00:00 2001 From: sumi-0011 Date: Sat, 23 Dec 2023 00:11:28 +0900 Subject: [PATCH 1/5] =?UTF-8?q?=F0=9F=8E=A8=20=EA=B3=B5=ED=86=B5=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=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/BottomSheet/BottomSheet.tsx | 9 ++++++--- src/components/Input/Input.tsx | 2 +- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/BottomSheet/BottomSheet.tsx b/src/components/BottomSheet/BottomSheet.tsx index fc01e2cd..2716ea4a 100644 --- a/src/components/BottomSheet/BottomSheet.tsx +++ b/src/components/BottomSheet/BottomSheet.tsx @@ -49,14 +49,17 @@ const headerWrapperCss = css({ paddingTop: '16px', paddingBottom: '12px', '& header': { - position: 'static', + position: 'relative', }, '& section': { gap: '0px', }, '& h2': { - width: '100%', - textAlign: 'center', + position: 'absolute', + left: 0, + right: 0, + margin: '0 auto', + width: 'fit-content', textStyle: 'subtitle1', color: 'text.primary', }, diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx index 160bd1fe..0c93cbc8 100644 --- a/src/components/Input/Input.tsx +++ b/src/components/Input/Input.tsx @@ -48,7 +48,7 @@ export default function Input({ iconName, value, onChange, iconColor, onIconClic

{/* 인풋타이틀 */} {name} - {required && *} + {required && *}

From f91282f7da3b83f639de30788381e834de0a6e17 Mon Sep 17 00:00:00 2001 From: sumi-0011 Date: Sat, 23 Dec 2023 00:12:26 +0900 Subject: [PATCH 2/5] =?UTF-8?q?=E2=9C=A8=20=EC=B9=B4=ED=85=8C=EA=B3=A0?= =?UTF-8?q?=EB=A6=AC=20=EB=B0=94=ED=85=80=EC=8B=9C=ED=8A=B8=20toggle=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/select/CategoryBottomSheet.tsx | 10 ++++ src/app/select/MissionRegistration.tsx | 70 +++++++++++++++++--------- src/hooks/useToggle.ts | 29 +++++++++++ 3 files changed, 86 insertions(+), 23 deletions(-) create mode 100644 src/app/select/CategoryBottomSheet.tsx create mode 100644 src/hooks/useToggle.ts diff --git a/src/app/select/CategoryBottomSheet.tsx b/src/app/select/CategoryBottomSheet.tsx new file mode 100644 index 00000000..bcd369b0 --- /dev/null +++ b/src/app/select/CategoryBottomSheet.tsx @@ -0,0 +1,10 @@ +import { type ComponentProps } from 'react'; +import BottomSheet from '@/components/BottomSheet/BottomSheet'; +import Header from '@/components/Header'; + +interface Props extends Omit, 'headerElement'> {} +function CategoryBottomSheet(props: Props) { + return } {...props}>; +} + +export default CategoryBottomSheet; diff --git a/src/app/select/MissionRegistration.tsx b/src/app/select/MissionRegistration.tsx index 0c7f0111..f48a7e4a 100644 --- a/src/app/select/MissionRegistration.tsx +++ b/src/app/select/MissionRegistration.tsx @@ -2,15 +2,17 @@ import { useState } from 'react'; import Link from 'next/link'; +import CategoryBottomSheet from '@/app/select/CategoryBottomSheet'; import Button from '@/components/Button/Button'; import Input from '@/components/Input/Input'; -import Toggle from '@/components/Toggle/Toggle'; +import useToggle from '@/hooks/useToggle'; import { css } from '@/styled-system/css'; export default function MissionRegistration() { const [missionTitleInput, setMissionTitleInput] = useState(''); const [missionContentInput, setMissionContentInput] = useState(''); + const [isCategoryShowing, toggleCategoryShowing] = useToggle(); // 미션 명 const handleMissionTitleInput = (value: string) => { setMissionTitleInput(value); @@ -52,14 +54,29 @@ export default function MissionRegistration() { onIconClick={onContentCloseIconClick} onChange={handleMissionContentInput} /> +
+

+ 카테고리 * +

+ + +
-

공개 설정

+ {/*

공개 설정

내 미션 현황과 인증 사진을 공유해 보세요.

친구에게 미션 공개하기 -
+
*/}
@@ -71,36 +88,43 @@ export default function MissionRegistration() { ); } + const buttonContainerCss = css({ display: 'flex', justifyContent: 'flex-end', marginTop: '48px', }); -const publicSettingCss = css({ - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - width: '343px', - height: '60px', - borderRadius: '16px', - padding: '16px', - gap: '12px', - backgroundColor: 'bg.surface3', - margin: '0 auto', -}); +// const publicSettingCss = css({ +// display: 'flex', +// justifyContent: 'space-between', +// alignItems: 'center', +// width: '343px', +// height: '60px', +// borderRadius: '16px', +// padding: '16px', +// gap: '12px', +// backgroundColor: 'bg.surface3', +// margin: '0 auto', +// }); + const publicSettingTitleCss = css({ marginTop: '36px', textStyle: 'body2', color: 'text.primary', }); -const publicSettingTextCss = css({ - textStyle: 'body3', - color: 'text.secondary', - marginBottom: '18px', -}); -const subTitlCss = css({ - textStyle: 'subtitle3', - color: 'text.primary', +// const publicSettingTextCss = css({ +// textStyle: 'body3', +// color: 'text.secondary', +// marginBottom: '18px', +// }); +// const subTitlCss = css({ +// textStyle: 'subtitle3', +// color: 'text.primary', +// }); + +const asterisk = css({ + color: 'red.red500', + fontWeight: 'bold', }); diff --git a/src/hooks/useToggle.ts b/src/hooks/useToggle.ts new file mode 100644 index 00000000..be6c91e9 --- /dev/null +++ b/src/hooks/useToggle.ts @@ -0,0 +1,29 @@ +import { useCallback, useState } from 'react'; + +type Return = readonly [boolean, VoidFunction, VoidFunction, VoidFunction]; + +/** + * boolean을 쉽게 다룰 수 있는 hook 입니다 + * + * @param initialValue - 기본 boolean 값 + * @returns [boolean state, toggle func, set true func, set false func] + */ +const useToggle = (initialValue?: boolean): Return => { + const [value, setValue] = useState(initialValue ?? false); + + const setTrue = useCallback(() => { + setValue(true); + }, []); + + const setFalse = useCallback(() => { + setValue(false); + }, []); + + const toggle = useCallback(() => { + setValue((prev) => !prev); + }, []); + + return [value, toggle, setTrue, setFalse]; +}; + +export default useToggle; From 5e08502577624301cbcd71ee11b21ede87b15d75 Mon Sep 17 00:00:00 2001 From: sumi-0011 Date: Sat, 23 Dec 2023 00:45:52 +0900 Subject: [PATCH 3/5] =?UTF-8?q?=E2=9C=A8=20=EC=B9=B4=ED=85=8C=EA=B3=A0?= =?UTF-8?q?=EB=A6=AC=20=EC=84=A0=ED=83=9D=20=EB=B0=94=ED=85=80=EC=8B=9C?= =?UTF-8?q?=ED=8A=B8=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/images/category/etc.png | Bin 0 -> 2621 bytes public/images/category/exercise.png | Bin 0 -> 2855 bytes public/images/category/laptop.png | Bin 0 -> 2235 bytes public/images/category/play-button.png | Bin 0 -> 2858 bytes public/images/category/reading.png | Bin 0 -> 1940 bytes public/images/category/study.png | Bin 0 -> 2608 bytes public/images/category/writting.png | Bin 0 -> 2195 bytes src/app/select/CategoryBottomSheet.tsx | 90 ++++++++++++++++++++++++- src/app/select/MissionRegistration.tsx | 11 ++- 9 files changed, 97 insertions(+), 4 deletions(-) create mode 100644 public/images/category/etc.png create mode 100644 public/images/category/exercise.png create mode 100644 public/images/category/laptop.png create mode 100644 public/images/category/play-button.png create mode 100644 public/images/category/reading.png create mode 100644 public/images/category/study.png create mode 100644 public/images/category/writting.png diff --git a/public/images/category/etc.png b/public/images/category/etc.png new file mode 100644 index 0000000000000000000000000000000000000000..e28f19f7c519e1e278b2a1a59aeeb030b3af5251 GIT binary patch literal 2621 zcmV-D3c~e?P)B$V_`0?XIr%s)^9X>!I@IK42W5=pN5PYv%tvyz) zRvV>~1EyuZM}TZ+EZkPF*Du5SD02olGBR?D<2VnxuDjH-EC!UGunc4O(9qD>!Gi~H zH4Jn2z`!k^LU4fNz%(sv1`Z>@STyGQ-e>yz`^OI*I&@oqqp_(}DlN86lMvJVFAn&N zd=Jb)W({z3bksS2{^H}P`1h-oDnZ30GpINP&KR`XQ`;|Iyi}@I`?l0-ec&K-mSt;j zh5-iEv*WlI&zw2i#KqZEE|;NX+h7w#4h~+0S;(vaB5PIUs#e|~5#ZtM-S}};t4#7y5Aej*oj!>pS^2;ZLwik&(F)0+Y={rbvt=1$D zP>FhY2^5sV02vp3iDHr=$%NERUMsC+7teGhiE^p_8ob)8IgrYoBoE}C7eqTFHHH*- z8HJu09^U^A*Rj{jaG)nkOiJjMnkY7rnQPL|xrm)iV$OL}6xW$$M^gY{^Tfo&x1oT{ z$jR*7xwAevZ}5+mYHhviR$`B5sXeG%x^fWONyrcNk7(9N{9WD8eZRgR;`@*~AbhoU zG)9aQSA?Pa4FdltCJA3|G#V$n={_R{=OMUit$%<tz)~#i2ohBN|o40M9cTGo`i5 z*b@oE+4mbc7v-#!!vbZtav^1`#PGDtw(T7<9?uz|GRu;?-ZnAKqUb%}UkJ zMnREz)ciHi^{2o(O|t`}>}MKW5;N64$37EjwJc}lU3V?{?wkQ)2J%e{!BL7PNsJg2 zP4|YLlqjYCao_;#dVUW~PE1~>upjvF!tOoTzZ*Qy&+T2^k9!M#_uJpYp;tz-P?KvS z--KopGo!8D^zZIP1zjWe8cAam(V$Y#rWJkr#GCN!v%i5xy#eEs@4+KmAJzRT1PJ)s z@C&fx56{8S?YDvDP`Ll|4`|N``r}u>{w2J2_$b^l{|+cuOYq4h%XJ^uWB4_UD2FS^ za%rZkR;>!>08nPVqyw0mIMq(eRBH;F%_guw!0Gx)y%_O0xi~HCpSn5)=gyvkv*%97 z@hy#nGU-P(Y{?ctKMq^J{w)Y5o`z2> zTMVDQdu`m_mn*D$ev@2mS<$64#hiollTj;YEW9U4g5lGo`= zl6qH?goiX#bdE`zx|Q|CU*k~H*`#2?fdIqT25v2VdOH2PGDtc7dEm3PltkLeC_gHx z6OhO&$@&8Q*uNMgEsv1d-bSG@J& zlF5iYO6cP$0nUGA+=DBZy*;f-abGuZiAFP);XfUF1gz+Za@Af?sZ>BRiboBqK-IM% zO|eV@a`rS|Eo6X6e5tZ6(wQ=JPX+v~P0eTI|vi*o;^ zi>){uYBwNXQQF*-KmMP4;)fp}VPDrhY%SCBOHc0?hM!a#a51{{wa7>jE_ zl@z1m3|oYOIK)^La;aD@m(*F2ViCs&0Y?Xtj1%fP)wur4FbRtS9Ougi=uRjog#q5X z>E6o-;7QL5aN~#A5GXo;2vamB0R>uFskGl>;Cm6?=V~E%ZlCeES_s=Xu8lRGr=JPs z^MM8xhSGZidTs1$v!67E$QTrq;%71_+#Y{Iv_A5=R_Nc)O9n8TU;zwq@hcQVEF`FO z2xf_=&czT!rFu!`A{qAEI-8~@!?RT$pPMG;Dvy2@vu{Lh>2a8a6bci0!M#QI?L4uK zQ0qrBRG20n?8@^@dD6yB5F!05@;hNV(N`VU0?W42+nP;gKVwWB++qTsl7` z+E+2n4UkVfP!W+hkDpGFcfEN))ZTeX48R8{(>j@#_8;D8QfGnMQ;~N4c!_%rB=>{C z6g-4i&%g|2@ftF#Ux?-+(*hKX4go_i8R4-xdd0{jD)}WsS4kp*KDfzcT7X12qbx*l z9>yc|Zpb4hB}8Qx(h=f0(iynPrK^+q=f0D#IJSFt8GlJ~92cDo7QChk*kg_P41?%8LATtj1M}~uY@H~65X&9r6){=eDlb-aX fCq3!OhhP2&O(YDb^N`nM00000NkvXXu0mjfvn1Pz literal 0 HcmV?d00001 diff --git a/public/images/category/exercise.png b/public/images/category/exercise.png new file mode 100644 index 0000000000000000000000000000000000000000..4f5b6409fab5a457feafbb2848a75add5c588f54 GIT binary patch literal 2855 zcmV+?3)u9DP))RuU8A zqolmCAP~QqknlkXAQ+-RS_5%f`kc1YnYqKvz4tu!_P_QyXYTF9^xm1`V8~tV&YAPt zXaDwEdp-6g8puEfGLV4`WFQ||5%dAddw;$0w2JmdMzwuMZ1` ziXYE@C8Q&y*%T$_DQyCRK|?ycZ=OPbnyRBIw0k;H3-Ij__hLV3(S>;Z1zI6lHlSyt zTa*NpU?YI0BA8?{P6P`*^&G&c3N(i9%Zg_M_h)ghK{`6QWwBIQ7T}vt-nc>9sj<|C zWRfN+WdQ^&8TKY3b6wmtx-XqdR9j0lcLZ&Y-cQ9Fw1ToMKq>Y0(rOY3z+#(ekv(St z#?9h9ffns3z@>vvXZ0hs&pv&GR#27&=(YDMJ z-b-m*-F;;CjC+V)rInN=1MYn4=BvW?TVtYmkc>$wPK48*gcb$BGDZO{WWYi!# zf0$x1bkEvLpW00;EK3FqRO{MM&r`)~!6`P$z`4YnpGa?732(|0g1tpt1f*%1RL$SHz}GDV?M&NrU6h-u&!Pvh&KJ5COgd&sc_+42Lly>+aih?X*zCXNvQGJ=L?X z=k6RaX5xmD-@3y0k_&>s)I493;=}>@td&>?!ha1Odi%tx^Z&4J-IgXTL;41Mdq=%m zk?%G}>@HC&HAq$gSb>);BRvbkEKKnFYn6U1&V8tUqQ2gF?AqHyukq7zFgp^43Hh)F z<-;kt1YKp-i1W(aCtyvu$55@V&wXe+Em8Ug-1YpOSJ$FFPY;Q4aA9(*7(fMUunY~B z0OljtQ~+(N21TcwCD#A^=;A(hKK#wqKJ9miFH%MK^~z%+HA%ZuS+vTa{Akg-+%LoJJy8e z&`UMiduc^aP^f3Y(n4Qw!Q2GKERpUJn#hlQU11q|_(p*9VEQInZC463FW7A>-bK;)Ce zjr$TsKO)zl&eA~7;}``EH!h_2Zrw(GN?(Ad9Gltb+a?UCjWL-{Iz~B|T?DD-0u%48 z7w;c<^lP`5Y2Rg`JPIp}0H-j1Ob=9$}~p=041gPhNa`oY5`JonlsZT@_@;WHE;GoAC5Ic0-WVm zJSQ?Z3r!+vC+l@V2HD>X$eMP~beWE1r_}mJukrWPU?9>jDTcE#XO~&$-7r>mHI?1x z0jVMEK`DHoNdh|-DUxz)MQ1Wh-rO}jZ*&LJ9aUatQAcwk@& zl4!jE92o$j^974923E{Ibsc%$_#HhBOJnz5%c_gwz1(3sfK)ANxX%e%iVvlDC;>=< zzT$S)u;)PujwwQjZ4KGC>mNJO_%3+Q_#J2B2kT zX|{}auvgKvxsL#>gOi<5z>NVDo_3SPMYpy^mI`wC5xM4^_Kcg1d1_(1fDSDS@bw)J z3=6wQ+T2SzU(h}Kt`#$$4=e^;n^Vys8 z8h<3ooEd8vg|_E{iciq}%(Ukq~qPaC^v2H#iCA4ri0Dd#Z$OYmR#+jg$yuSiq~Db{U* zHLS1%ob@eejH$NZ0{rM=Md{pFG$*v?k$6L@~$4ZNHQ_MvkdR(4vc~8~m5yNDOQML{o zoB>=ShNvyp{AFV1=p`F&>94Bqd&}bG`?uWfw~yW%+6I2xgrVpZHK@S$3D%GnofvIJ zM~QjG(G6#dYXx-vyv=iXE)ku10?gvXNZx=7V67v_6;}P~t;Xp0zPNdFyWes54aoA^ zPk!`u9Z%h_Oye{Usgwsu4YN|J3y{QdR@$im^6Ont#l6guh5P5KCw43_Ps{4WuT&;j zz2EBLAAbDS&5zI$Wl4Z6Z`{9ijN0>es(5~*w9%Og#jVUMAF;SgySQ2}fJA3)=3D() zkpe^pLkJPtZwej0M1JM*c-`tJ&fBzUS-0iM2K2X3(;AL>bNJ_ z3ng?SpO#=R#JV^kXHiK0d;OM8`)MEp8OT5eGLZkR{0F!arRd$UuNeRU002ovPDHLk FV1lv3R%8GG literal 0 HcmV?d00001 diff --git a/public/images/category/laptop.png b/public/images/category/laptop.png new file mode 100644 index 0000000000000000000000000000000000000000..f9643fccec92f9f229ebb9169f7c52135a07f50a GIT binary patch literal 2235 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

r1)F&HNyqnCdSJ;*6@JqUOT|s2$ zX)Ai4;j7x-n#6ro2_<=T@fE7@#G{Yivw^*~*Y?_8dpq0z06wpTr`3wfaR2}S07*qo IM6N<$f@X?eWdHyG literal 0 HcmV?d00001 diff --git a/public/images/category/reading.png b/public/images/category/reading.png new file mode 100644 index 0000000000000000000000000000000000000000..078aaf6bbf824bb78309af00b454a974bbd3cde7 GIT binary patch literal 1940 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 Sz(hI#0000P)Z zG}371KKU0uAMyvon?_#JFlnj?_%wu7ITPaUz|i-u-#e3WBvhyvlYi>de4G55f^U2} zfToBKIhP{^EfjaP{(FA-!u>NE2NkHz+lG52MIOARLqjASL@*cx_lGe2SB|`+!gXD^ zRzBCQaSFuA%rU<+;b&ovVfJ% ze`dPzDhg0Im$3PsIJsm<3jUQI0kUywx^XLF4GQO?rZSiy zxB}w@$DwfrAqp5pl3|z*8dL*YIwV??DwxDz((mdczRT9ESraWc_M$s@$F`sMP7z%4 z&2VZ7&UTTr9Gp!_7=6(oCsRnLGVrT1{Ql7KGiT0(%Z2d5J*j{Zf5o--jc8HJqD7N1OYmU{-rBI%B8BfT+$_s8GHIW9>A z1>_0PgR^Zg+d>Vqa7{BueN!C_!$N#&;%_`)A20WuMRD-%9Z!&Re7At3Z1e&}I9H>p z;GT2voHJ|(wnd~C!O^Pg`UtSLqaHH-0m(%AL^7XS-__NXE%&SicW^T~7d2#>mWt<` zLy4(zUUW__uDQJRKe!9d-FPL?d38N~M?!|+vPNO!U3Yayr+eOlrl@dk(vSxQoK9d4 z6KjqmsERcw5fn|!l5hjhik;4{>Wy3S zzL>Y>ig3cY8nqNC{|9%$xe!gu^($O-wl_fG@~q*6=H0>3(b10^jym|OlelTTz@dX* zgbQ7Sb3HiIgL44eM94MJwUXibwxV;{WcKflk-u>^a6YI#0?snww{%)_4%T%vLM7+2$^3JUk-K%aa6sPFMx!%eQ~+(%^*VWewiFb97hC}2j9bCPXJ+u3PuC16S%?aQuCKYj$?~7Xs!O5letJpZJl$Mkyl$Ngd z{#u%nF`B_r)e>bPr#kl5qrV*aH|9z23ea=TZtsa3d|yn!QH^uNPTbq_XarYmoOO|w zX>aV50Y~W3@0?JkP)FW zK0fg%#sB@al8!f~C=neB6uL7IsVPc3@OGkN(PNBsfRqS?zb2K&UV52p}wjVxl)1tr$%^2|5v19u+ z#lKC{e4uyQfU3}FT1M;y{xjhqWpi<30>=@~IjCn2migVj#e@@@5#Uo#KGjM4y2C!r zPf&iywALg#vs4s1ZtyE;WJ#PmPX|R77Y!OsOBXB1xt}dEoY0I8oh--QsZbfBXWtM>GhPhX+i_BmAwGS?KB9X5=t?a~>_A6$by=TmBbv}NboI4W3W9ZaP2*V=iR z<@CZEw#}Y(O#EJ|Y546uJ33={kEkr*tFQm_ca7=mTEG3shA~uCRaI40Rn_}X{{;&` V>E5U^0|5X4002ovPDHLkV1glW7!?2j literal 0 HcmV?d00001 diff --git a/src/app/select/CategoryBottomSheet.tsx b/src/app/select/CategoryBottomSheet.tsx index bcd369b0..8f107444 100644 --- a/src/app/select/CategoryBottomSheet.tsx +++ b/src/app/select/CategoryBottomSheet.tsx @@ -1,10 +1,96 @@ import { type ComponentProps } from 'react'; +import Image from 'next/image'; import BottomSheet from '@/components/BottomSheet/BottomSheet'; import Header from '@/components/Header'; +import Icon from '@/components/Icon'; +import { css } from '@/styled-system/css'; + +const CATEGORY = [ + { + name: '운동', + image: '/images/category/exercise.png', + }, + { + name: '공부', + image: '/images/category/study.png', + }, + { + name: '글 읽기', + image: '/images/category/reading.png', + }, + { + name: '글 쓰기', + image: '/images/category/writting.png', + }, + { + name: '프로젝트 / 작업', + image: '/images/category/laptop.png', + }, + { + name: '영상 보기 / 팟캐스트 듣기', + image: '/images/category/play-button.png', + }, + { + name: '기타', + image: '/images/category/exercise.png', + }, +]; + +interface Props extends Omit, 'headerElement'> { + selectCategory: string | null; + onSelectCategory: (category: string) => void; +} -interface Props extends Omit, 'headerElement'> {} function CategoryBottomSheet(props: Props) { - return } {...props}>; + const onClick = (name: string) => { + props.onSelectCategory(name); + props.onClickOutside?.(); + }; + + return ( + } {...props}> +

    + {CATEGORY.map((item) => ( +
  • onClick(item.name)}> +
    +
    + {item.name} +
    +
    {item.name}
    +
    +
    {props.selectCategory === item.name && }
    +
  • + ))} +
+ + ); } export default CategoryBottomSheet; + +const categoryListCss = css({ + width: '100%', +}); + +const categoryItemCss = css({ + position: 'relative', + width: '100%', + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + padding: '12px 16px', + color: 'text.secondary', + textStyle: 'subtitle3', + + '& div': { + display: 'flex', + gap: '8px', + alignItems: 'center', + }, +}); + +const imageWrapperCss = css({ + position: 'relative', + width: '28px', + height: '28px', +}); diff --git a/src/app/select/MissionRegistration.tsx b/src/app/select/MissionRegistration.tsx index f48a7e4a..1b836dca 100644 --- a/src/app/select/MissionRegistration.tsx +++ b/src/app/select/MissionRegistration.tsx @@ -13,6 +13,8 @@ export default function MissionRegistration() { const [missionContentInput, setMissionContentInput] = useState(''); const [isCategoryShowing, toggleCategoryShowing] = useToggle(); + const [missionCategory, setMissionCategory] = useState(null); + // 미션 명 const handleMissionTitleInput = (value: string) => { setMissionTitleInput(value); @@ -65,9 +67,14 @@ export default function MissionRegistration() { })} onClick={toggleCategoryShowing} > - toggle + {missionCategory} - + {/*

공개 설정

From 50b029b5fc5af27ff348fda99469f7353f12da65 Mon Sep 17 00:00:00 2001 From: sumi-0011 Date: Sat, 23 Dec 2023 01:13:45 +0900 Subject: [PATCH 4/5] =?UTF-8?q?=E2=9C=A8=20=EA=B3=B5=EA=B0=9C=20=EB=B2=94?= =?UTF-8?q?=EC=9C=84,=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20=EB=B0=94?= =?UTF-8?q?=ED=85=80=EC=8B=9C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/select/CategoryBottomSheet.tsx | 10 ++-- src/app/select/MissionRegistration.tsx | 30 ++++++++++-- src/app/select/PublicBottomSheet.tsx | 56 ++++++++++++++++++++++ src/components/BottomSheet/BottomSheet.tsx | 4 ++ src/components/Header/Header.tsx | 2 +- src/components/Header/TextButtonHeader.tsx | 5 +- 6 files changed, 97 insertions(+), 10 deletions(-) create mode 100644 src/app/select/PublicBottomSheet.tsx diff --git a/src/app/select/CategoryBottomSheet.tsx b/src/app/select/CategoryBottomSheet.tsx index 8f107444..6aadc093 100644 --- a/src/app/select/CategoryBottomSheet.tsx +++ b/src/app/select/CategoryBottomSheet.tsx @@ -37,13 +37,13 @@ const CATEGORY = [ ]; interface Props extends Omit, 'headerElement'> { - selectCategory: string | null; - onSelectCategory: (category: string) => void; + select: string | null; + onSelect: (category: string) => void; } function CategoryBottomSheet(props: Props) { const onClick = (name: string) => { - props.onSelectCategory(name); + props.onSelect(name); props.onClickOutside?.(); }; @@ -58,7 +58,7 @@ function CategoryBottomSheet(props: Props) {
{item.name}
-
{props.selectCategory === item.name && }
+
{props.select === item.name && }
))} @@ -81,6 +81,8 @@ const categoryItemCss = css({ padding: '12px 16px', color: 'text.secondary', textStyle: 'subtitle3', + height: '46px', + cursor: 'pointer', '& div': { display: 'flex', diff --git a/src/app/select/MissionRegistration.tsx b/src/app/select/MissionRegistration.tsx index 1b836dca..339eba77 100644 --- a/src/app/select/MissionRegistration.tsx +++ b/src/app/select/MissionRegistration.tsx @@ -3,6 +3,7 @@ import { useState } from 'react'; import Link from 'next/link'; import CategoryBottomSheet from '@/app/select/CategoryBottomSheet'; +import PublicBottomSheet from '@/app/select/PublicBottomSheet'; import Button from '@/components/Button/Button'; import Input from '@/components/Input/Input'; import useToggle from '@/hooks/useToggle'; @@ -15,6 +16,9 @@ export default function MissionRegistration() { const [isCategoryShowing, toggleCategoryShowing] = useToggle(); const [missionCategory, setMissionCategory] = useState(null); + const [isPublicShowing, togglePublicShowing] = useToggle(); + const [missionPublicSetting, setMissionPublicSetting] = useState(null); + // 미션 명 const handleMissionTitleInput = (value: string) => { setMissionTitleInput(value); @@ -67,13 +71,33 @@ export default function MissionRegistration() { })} onClick={toggleCategoryShowing} > - {missionCategory} + {missionCategory ?? '선택'} + +
+

+ 공개 설정 * +

+ +
diff --git a/src/app/select/PublicBottomSheet.tsx b/src/app/select/PublicBottomSheet.tsx new file mode 100644 index 00000000..899a5294 --- /dev/null +++ b/src/app/select/PublicBottomSheet.tsx @@ -0,0 +1,56 @@ +import React, { type ComponentProps } from 'react'; +import BottomSheet from '@/components/BottomSheet/BottomSheet'; +import Header from '@/components/Header'; +import Icon from '@/components/Icon'; +import { css } from '@/styled-system/css'; + +interface Props extends Omit, 'headerElement'> { + select: string | null; + onSelect: (name: string) => void; +} + +const PUBLIC_LIST = [{ name: '팔로워에게 공개' }, { name: '전체 공개' }, { name: '비공개' }]; + +function PublicBottomSheet(props: Props) { + const onClick = (name: string) => { + props.onSelect(name); + }; + + return ( + } {...props}> +
    + {PUBLIC_LIST.map((item) => ( +
  • onClick(item.name)}> +
    {item.name}
    +
    {props.select === item.name && }
    +
  • + ))} +
+
+ ); +} + +export default PublicBottomSheet; + +const listCss = css({ + width: '100%', +}); + +const itemCss = css({ + position: 'relative', + width: '100%', + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + padding: '12px 16px', + color: 'text.secondary', + textStyle: 'subtitle3', + height: '46px', + cursor: 'pointer', + + '& div': { + display: 'flex', + gap: '8px', + alignItems: 'center', + }, +}); diff --git a/src/components/BottomSheet/BottomSheet.tsx b/src/components/BottomSheet/BottomSheet.tsx index 2716ea4a..b85234d7 100644 --- a/src/components/BottomSheet/BottomSheet.tsx +++ b/src/components/BottomSheet/BottomSheet.tsx @@ -50,6 +50,10 @@ const headerWrapperCss = css({ paddingBottom: '12px', '& header': { position: 'relative', + '& .back-button': { + // TODO : 수정 필요, 중간 발표를 위한 임시방편 + display: 'none', + }, }, '& section': { gap: '0px', diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 5b3e2016..a40e7035 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -29,7 +29,7 @@ function Header({ title, rightElement, onBackAction }: Props) { <>
-

{title}

diff --git a/src/components/Header/TextButtonHeader.tsx b/src/components/Header/TextButtonHeader.tsx index 8d4a47e0..e726c99e 100644 --- a/src/components/Header/TextButtonHeader.tsx +++ b/src/components/Header/TextButtonHeader.tsx @@ -4,13 +4,14 @@ import Header from '@/components/Header/Header'; interface Props extends Omit, 'rightElement'> { rightButtonText?: string; + onButtonClick?: () => void; } -function TextButtonHeader({ rightButtonText = '완료', ...props }: Props) { +function TextButtonHeader({ rightButtonText = '완료', onButtonClick, ...props }: Props) { return (
+ } From 8faf1c033541b1c1da8da7fbf2b76ac530756278 Mon Sep 17 00:00:00 2001 From: sumi-0011 Date: Sat, 23 Dec 2023 01:20:21 +0900 Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=8E=A8=20=EC=A4=80=ED=98=B8=EC=9D=98?= =?UTF-8?q?=20select=20view=EC=97=90=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/select/MissionRegistration.tsx | 63 ++++++++------------------ 1 file changed, 20 insertions(+), 43 deletions(-) diff --git a/src/app/select/MissionRegistration.tsx b/src/app/select/MissionRegistration.tsx index d1b80521..ebcbbbe6 100644 --- a/src/app/select/MissionRegistration.tsx +++ b/src/app/select/MissionRegistration.tsx @@ -7,6 +7,7 @@ import PublicBottomSheet from '@/app/select/PublicBottomSheet'; import Button from '@/components/Button/Button'; import Icon from '@/components/Icon'; import Input from '@/components/Input/Input'; +import useToggle from '@/hooks/useToggle'; import { css } from '@/styled-system/css'; export default function MissionRegistration() { @@ -17,7 +18,7 @@ export default function MissionRegistration() { const [missionCategory, setMissionCategory] = useState(null); const [isPublicShowing, togglePublicShowing] = useToggle(); - const [missionPublicSetting, setMissionPublicSetting] = useState(null); + const [missionPublicSetting, setMissionPublicSetting] = useState('팔로워에게 공개'); // 미션 명 const handleMissionTitleInput = (value: string) => { @@ -60,62 +61,38 @@ export default function MissionRegistration() { onIconClick={onContentCloseIconClick} onChange={handleMissionContentInput} /> -
-

- 카테고리 * -

- - -
-
-

- 공개 설정 * -

- - -
{/* 카테고리 */} 카테고리 *
-

카테고리를 선택해주세요.

+

+ {missionCategory ?? '카테고리를 선택해주세요.'} +

+
{/* 공개설정 */} 공개설정
-

팔로워에게 공개

+

+ {missionPublicSetting} +

+