From ab0dee3b9636af59aebb38da7e0cddd7b1d05e90 Mon Sep 17 00:00:00 2001 From: 14Kgun Date: Fri, 8 Sep 2023 21:41:27 +0900 Subject: [PATCH] Style: Button and WhiteContainer --- src/components/Button/index.tsx | 31 +++------ .../ModalPopup/Body/BodyChatReportDone.tsx | 8 ++- .../Body/BodyChatReportSelectType.tsx | 20 +++--- .../Body/BodyChatReportSelectUser.tsx | 20 +++--- .../ModalPopup/Body/BodyRoomSelection.tsx | 16 +++-- src/components/ModalPopup/ModalChatCancel.tsx | 20 +++--- .../ModalPopup/ModalChatPayment.tsx | 20 +++--- .../ModalPopup/ModalChatSaveAccount.tsx | 20 +++--- .../ModalPopup/ModalChatSettlement.tsx | 20 +++--- .../ModalPopup/ModalMypageModify.tsx | 20 +++--- src/components/ModalPopup/ModalTerms.tsx | 64 ++++++++++++------- src/components/ModalRoomOptions/Date.tsx | 2 +- src/components/ModalRoomOptions/MaxPeople.tsx | 2 +- src/components/ModalRoomOptions/Name.tsx | 2 +- src/components/ModalRoomOptions/Place.jsx | 22 ++++--- src/components/ModalRoomOptions/Time.tsx | 22 ++++--- src/components/Skeleton/AlertProvider.tsx | 8 ++- .../WhiteContainerSuggestLogin.tsx | 8 ++- src/components/WhiteContainer/index.tsx | 19 ++---- src/pages/Addroom/FullParticipation.tsx | 12 ++-- src/pages/Addroom/index.tsx | 8 ++- src/pages/Error/index.tsx | 16 +++-- src/pages/Event/Event2023Spring.tsx | 18 ++++-- .../EventSection/EventSection2023Fall.tsx | 18 ++++++ .../EventSection2023Spring.tsx} | 12 ++-- src/pages/Home/EventSection/index.tsx | 17 +++++ src/pages/Home/InfoSection.tsx | 24 ++++--- src/pages/Home/index.tsx | 2 + src/pages/Login/index.jsx | 16 +++-- src/pages/Mypage/index.tsx | 2 +- src/pages/Myroom/R2Myroom.jsx | 8 ++- src/pages/Search/SideResult.jsx | 2 +- src/pages/Search/index.jsx | 8 ++- src/tools/loadenv.ts | 1 + 34 files changed, 309 insertions(+), 199 deletions(-) create mode 100644 src/pages/Home/EventSection/EventSection2023Fall.tsx rename src/pages/Home/{EventSection.tsx => EventSection/EventSection2023Spring.tsx} (88%) create mode 100644 src/pages/Home/EventSection/index.tsx diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index ae27859dc..262ef6467 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -1,33 +1,25 @@ -import { ReactNode } from "react"; +import { HTMLProps, ReactNode } from "react"; import useHoverProps from "hooks/theme/useHoverProps"; -import theme, { Font } from "tools/theme"; +import theme from "tools/theme"; type ButtonType = "purple" | "purple_inset" | "gray" | "white"; type ButtonProps = { type?: ButtonType; disabled?: boolean; - width?: string; - padding?: string | number; - radius?: number; - font?: Font; - onClick?: () => void; className?: string; children?: ReactNode; -}; +} & HTMLProps; const Button = ({ type, disabled = false, - width, - padding, - radius, - font, - onClick, className, children, + onClick, + ...divProps }: ButtonProps) => { const [hoverProps, isHover, isClicked] = useHoverProps(); @@ -71,23 +63,20 @@ const Button = ({ } }; - const style: CSS = { - ...font, - width: width, - padding: padding, - borderRadius: radius, + const style = { transitionDuration: theme.duration, + textAlign: "center" as const, ...theme.cursor(disabled), - textAlign: "center", ...getColor(), }; return (
{children}
diff --git a/src/components/ModalPopup/Body/BodyChatReportDone.tsx b/src/components/ModalPopup/Body/BodyChatReportDone.tsx index e56667d70..a5b592524 100644 --- a/src/components/ModalPopup/Body/BodyChatReportDone.tsx +++ b/src/components/ModalPopup/Body/BodyChatReportDone.tsx @@ -23,9 +23,11 @@ const BodyChatReportDone = ({ onChangeIsOpen }: BodyChatReportDoneProps) => { diff --git a/src/components/ModalPopup/ModalChatCancel.tsx b/src/components/ModalPopup/ModalChatCancel.tsx index ffdecb0ff..59191a7fc 100644 --- a/src/components/ModalPopup/ModalChatCancel.tsx +++ b/src/components/ModalPopup/ModalChatCancel.tsx @@ -87,20 +87,24 @@ const ModalChatCancel = ({ roomId, ...modalProps }: ModalChatCancelProps) => { > diff --git a/src/components/WhiteContainer/index.tsx b/src/components/WhiteContainer/index.tsx index eb2396e5d..a43cd4e37 100644 --- a/src/components/WhiteContainer/index.tsx +++ b/src/components/WhiteContainer/index.tsx @@ -3,29 +3,22 @@ import { ReactNode } from "react"; import theme from "tools/theme"; type WhiteContainerProps = { - padding?: CSS["padding"]; - margin?: CSS["margin"]; - style?: CSS; - children: ReactNode; + className?: string; + children?: ReactNode; }; -const WhiteContainer = ({ - padding = "24px", - margin = "0 0 15px", - style, - children, -}: WhiteContainerProps) => ( +const WhiteContainer = ({ className, children }: WhiteContainerProps) => (
{children}
diff --git a/src/pages/Addroom/FullParticipation.tsx b/src/pages/Addroom/FullParticipation.tsx index fd76dc38c..8ba696259 100644 --- a/src/pages/Addroom/FullParticipation.tsx +++ b/src/pages/Addroom/FullParticipation.tsx @@ -13,14 +13,14 @@ const FullParticipation = () => { 방 개설하기 - +
참여할 수 있는 방 개수는{" "} 최대 5개 입니다.
- +
이미 5개의 방에 참여 중이며 방 개설이 제한됩니다. 추가적으로 방 개설을 원하는 경우 참여 중인 방에서 정산을 완료하거나{" "} @@ -30,9 +30,11 @@ const FullParticipation = () => { diff --git a/src/pages/Addroom/index.tsx b/src/pages/Addroom/index.tsx index 6681b6ab6..a6a1c8939 100644 --- a/src/pages/Addroom/index.tsx +++ b/src/pages/Addroom/index.tsx @@ -139,9 +139,11 @@ const AddRoom = () => { @@ -163,9 +165,11 @@ const Event2023Spring = () => { > diff --git a/src/pages/Home/EventSection/EventSection2023Fall.tsx b/src/pages/Home/EventSection/EventSection2023Fall.tsx new file mode 100644 index 000000000..f4e8e459e --- /dev/null +++ b/src/pages/Home/EventSection/EventSection2023Fall.tsx @@ -0,0 +1,18 @@ +import AdaptiveDiv from "components/AdaptiveDiv"; +import Title from "components/Title"; +import WhiteContainer from "components/WhiteContainer"; + +import theme from "tools/theme"; + +const EventSection2023Fall = () => { + return ( + + + 추석 이벤트 + + + + ); +}; + +export default EventSection2023Fall; diff --git a/src/pages/Home/EventSection.tsx b/src/pages/Home/EventSection/EventSection2023Spring.tsx similarity index 88% rename from src/pages/Home/EventSection.tsx rename to src/pages/Home/EventSection/EventSection2023Spring.tsx index 3e48251e8..2469aa494 100644 --- a/src/pages/Home/EventSection.tsx +++ b/src/pages/Home/EventSection/EventSection2023Spring.tsx @@ -7,7 +7,7 @@ import WhiteContainer from "components/WhiteContainer"; import theme from "tools/theme"; -const EventSection = () => { +const EventSection2023Spring = () => { return ( @@ -48,9 +48,11 @@ const EventSection = () => { <Link to="/event/2023spring" style={{ textDecoration: "none" }}> <Button type="purple" - padding="14px 0 13px" - radius={12} - font={theme.font16_bold} + css={{ + padding: "14px 0 13px", + borderRadius: "12px", + ...theme.font16_bold, + }} > 이벤트 확인하기 </Button> @@ -60,4 +62,4 @@ const EventSection = () => { ); }; -export default EventSection; +export default EventSection2023Spring; diff --git a/src/pages/Home/EventSection/index.tsx b/src/pages/Home/EventSection/index.tsx new file mode 100644 index 000000000..2334eb0ad --- /dev/null +++ b/src/pages/Home/EventSection/index.tsx @@ -0,0 +1,17 @@ +import EventSection2023Fall from "./EventSection2023Fall"; +import EventSection2023Spring from "./EventSection2023Spring"; + +import { eventMode } from "tools/loadenv"; + +const EventSection = () => { + switch (eventMode) { + case "2023spring": + return <EventSection2023Spring />; + case "2023fall": + return <EventSection2023Fall />; + default: + return null; + } +}; + +export default EventSection; diff --git a/src/pages/Home/InfoSection.tsx b/src/pages/Home/InfoSection.tsx index ec21fc3a3..e97dbbcb6 100644 --- a/src/pages/Home/InfoSection.tsx +++ b/src/pages/Home/InfoSection.tsx @@ -120,9 +120,11 @@ const InfoSection = () => { <Link to="/addroom" css={{ textDecoration: "none" }}> <Button type="purple" - padding="12px 20px 11px" - radius={8} - font={theme.font16_bold} + css={{ + padding: "12px 20px 11px", + borderRadius: "8px", + ...theme.font16_bold, + }} > 방 개설하기 </Button> @@ -131,9 +133,11 @@ const InfoSection = () => { <LinkLogin> <Button type="purple" - padding="12px 20px 11px" - radius={8} - font={theme.font16_bold} + css={{ + padding: "12px 20px 11px", + borderRadius: "8px", + ...theme.font16_bold, + }} > 로그인 </Button> @@ -142,9 +146,11 @@ const InfoSection = () => { <Link to="/search" css={{ textDecoration: "none" }}> <Button type="white" - padding="12px 20px 11px" - radius={8} - font={theme.font16_bold} + css={{ + padding: "12px 20px 11px", + borderRadius: "8px", + ...theme.font16_bold, + }} > 방 검색하기 </Button> diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index 4913de444..e028f6c6b 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -3,6 +3,7 @@ import { useHistory, useParams } from "react-router-dom"; import Footer from "components/Footer"; import { ModalPrivacyPolicy } from "components/ModalPopup"; +import EventSection from "./EventSection"; import InfoSection from "./InfoSection"; import RoomSection from "./RoomSection"; @@ -17,6 +18,7 @@ const Home = () => { <> <InfoSection /> <div css={{ marginTop: "-10px" }} /> + <EventSection /> <RoomSection roomId={roomId} /> <Footer /> <ModalPrivacyPolicy diff --git a/src/pages/Login/index.jsx b/src/pages/Login/index.jsx index ca9610334..8ef174d26 100644 --- a/src/pages/Login/index.jsx +++ b/src/pages/Login/index.jsx @@ -56,9 +56,11 @@ const Login = () => { <div style={{ display: "flex", columnGap: "12px" }}> <Button type="white" - padding="13px 24px 14px" - radius={12} - font={theme.font14} + css={{ + padding: "13px 24px 14px", + borderRadius: "12px", + ...theme.font14, + }} onClick={onClickBack} > 이전 페이지 @@ -68,9 +70,11 @@ const Login = () => { > <Button type="purple" - padding="13px 24px 14px" - radius={12} - font={theme.font14_bold} + css={{ + padding: "13px 24px 14px", + borderRadius: "12px", + ...theme.font14_bold, + }} > 로그인 </Button> diff --git a/src/pages/Mypage/index.tsx b/src/pages/Mypage/index.tsx index ffd62d8cc..fd8ddf88e 100644 --- a/src/pages/Mypage/index.tsx +++ b/src/pages/Mypage/index.tsx @@ -104,7 +104,7 @@ const Mypage = () => { {userId ? ( <> - +
{loginInfo?.profileImgUrl && ( diff --git a/src/pages/Myroom/R2Myroom.jsx b/src/pages/Myroom/R2Myroom.jsx index 1d2a0d7d0..8946dc62c 100644 --- a/src/pages/Myroom/R2Myroom.jsx +++ b/src/pages/Myroom/R2Myroom.jsx @@ -47,7 +47,7 @@ const R2Myroom = (props) => { 내 방 보기
- + 참여 중인 방
@@ -70,7 +70,9 @@ const R2Myroom = (props) => { )) )} - + 과거 참여 방
@@ -120,7 +122,7 @@ const R2Myroom = (props) => { zIndex: theme.zIndex_nav - 1, }} > - +
diff --git a/src/pages/Search/SideResult.jsx b/src/pages/Search/SideResult.jsx index 7cd7c5517..abe652c86 100644 --- a/src/pages/Search/SideResult.jsx +++ b/src/pages/Search/SideResult.jsx @@ -145,7 +145,7 @@ const SideResult = (props) => { onChangeIsOpen={() => setSelectedRoomInfo(null)} roomInfo={selectedRoomInfo} /> - + 검색 결과 {