From 201b96338ff94f8a924a92552fd2bb1d0a1b3a04 Mon Sep 17 00:00:00 2001 From: rbgksqkr Date: Sat, 2 Mar 2024 13:10:53 +0900 Subject: [PATCH 1/7] =?UTF-8?q?fix:=20useLongPress=20=EB=B2=84=EC=A0=84?= =?UTF-8?q?=EC=97=85=EC=9C=BC=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20bind=20?= =?UTF-8?q?=ED=95=A8=EC=88=98=20=EB=B3=80=EA=B2=BD=20(#84)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ReplyComment/ReplyCommentContainer.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/board/postDetail/components/ReplyComment/ReplyCommentContainer.tsx b/src/pages/board/postDetail/components/ReplyComment/ReplyCommentContainer.tsx index cfdc2551..037145c1 100644 --- a/src/pages/board/postDetail/components/ReplyComment/ReplyCommentContainer.tsx +++ b/src/pages/board/postDetail/components/ReplyComment/ReplyCommentContainer.tsx @@ -19,15 +19,15 @@ export const ReplyCommentContainer: React.FC<{ model: Model.Comment }> = observe commentInput.target?.id === model.id ? commentInput.state : InputState.WRITE, ).get(); - const handeLongPress = useCallback(model => () => open(model), [open]); - const bind = useLongPress(handeLongPress(model), { + const handleLongPress = useCallback(model => () => open(model), [open]); + const bind = useLongPress(handleLongPress(model), { cancelOnMovement: true, captureEvent: true, onFinish: ev => ev?.preventDefault(), }); return ( -
  • +
    • ); From 2e764cc0a033652c3e3c43b54ad296e3ccaa8e1f Mon Sep 17 00:00:00 2001 From: rbgksqkr Date: Sat, 2 Mar 2024 13:12:37 +0900 Subject: [PATCH 2/7] =?UTF-8?q?fix:=20=ED=81=B4=EB=A6=AD=20=EC=9D=B4?= =?UTF-8?q?=EB=B2=A4=ED=8A=B8=EB=A5=BC=20Button=20props=EB=A1=9C=20?= =?UTF-8?q?=EB=B0=9B=EA=B8=B0(#84)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Atoms/Button.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Atoms/Button.tsx b/src/components/Atoms/Button.tsx index 949786b5..d567b280 100644 --- a/src/components/Atoms/Button.tsx +++ b/src/components/Atoms/Button.tsx @@ -40,6 +40,7 @@ interface Props extends ButtonUnstyledProps { className?: string; $loading?: boolean; disabled?: boolean; + onClick?: () => void; } export const Button: React.FC = ({ children, ...props }) => ( From 218c17e818fc672d21fc9a89ded3b2cbc1162bab Mon Sep 17 00:00:00 2001 From: rbgksqkr Date: Sat, 2 Mar 2024 13:30:41 +0900 Subject: [PATCH 3/7] =?UTF-8?q?fix:=20=EB=B6=88=ED=95=84=EC=9A=94=ED=95=9C?= =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=20mui=20import=20=EC=A0=9C=EA=B1=B0=20(#8?= =?UTF-8?q?4)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Atoms/Button.tsx | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/src/components/Atoms/Button.tsx b/src/components/Atoms/Button.tsx index d567b280..eafa15aa 100644 --- a/src/components/Atoms/Button.tsx +++ b/src/components/Atoms/Button.tsx @@ -1,4 +1,3 @@ -import { ButtonUnstyled, buttonUnstyledClasses, ButtonUnstyledProps } from '@mui/base'; import { CircularProgress, styled } from '@mui/material'; const CustomButtonRoot = styled('button')` @@ -8,7 +7,7 @@ const CustomButtonRoot = styled('button')` background-color: #312ed7; font-size: 18px; line-height: 21px; - color: ${(props: Props) => props.color || 'white'}; + color: ${(props: ButtonProps) => props.color || 'white'}; transition: all 150ms ease; cursor: pointer; border: none; @@ -17,35 +16,37 @@ const CustomButtonRoot = styled('button')` opacity: 0.9; } - &.${buttonUnstyledClasses.active} { + &:active { opacity: 0.8; } - &.${buttonUnstyledClasses.focusVisible} { + &:focus-visible { box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5); outline: none; } - &.${buttonUnstyledClasses.disabled} { + &:disabled { opacity: 0.5; cursor: not-allowed; background-color: #dadada; } `; -interface Props extends ButtonUnstyledProps { +interface ButtonProps { children?: React.ReactNode; className?: string; $loading?: boolean; disabled?: boolean; onClick?: () => void; + color?: string; } -export const Button: React.FC = ({ children, ...props }) => ( - + +export const Button: React.FC = ({ children, ...props }) => ( + {props.$loading ? : children} - + ); export const NavButton = styled(Button)` @@ -71,7 +72,7 @@ const ClearButtonNative = styled('button')` } `; -export const ClearButton: React.FC = ({ children, ...props }) => ( +export const ClearButton: React.FC = ({ children, ...props }) => ( {props.disabled ? : children} From 2b9f226e7e57b5104b63482c992b7322b2518e40 Mon Sep 17 00:00:00 2001 From: rbgksqkr Date: Sat, 2 Mar 2024 13:32:56 +0900 Subject: [PATCH 4/7] =?UTF-8?q?fix:=20=EB=B2=84=ED=8A=BC=20type=20props=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EC=9C=A0=EC=A7=80=20=EC=B2=B4=ED=81=AC=EB=B0=95=EC=8A=A4=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20import?= =?UTF-8?q?=EB=AC=B8=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Atoms/Button.tsx | 1 + src/pages/auth/signIn/SignInPage.tsx | 12 +----------- 2 files changed, 2 insertions(+), 11 deletions(-) diff --git a/src/components/Atoms/Button.tsx b/src/components/Atoms/Button.tsx index eafa15aa..12f9f9f0 100644 --- a/src/components/Atoms/Button.tsx +++ b/src/components/Atoms/Button.tsx @@ -41,6 +41,7 @@ interface ButtonProps { disabled?: boolean; onClick?: () => void; color?: string; + type?: 'button' | 'submit' | 'reset' | undefined; } export const Button: React.FC = ({ children, ...props }) => ( diff --git a/src/pages/auth/signIn/SignInPage.tsx b/src/pages/auth/signIn/SignInPage.tsx index d97d51e0..959f6682 100644 --- a/src/pages/auth/signIn/SignInPage.tsx +++ b/src/pages/auth/signIn/SignInPage.tsx @@ -1,5 +1,4 @@ import PermIdentityOutlinedIcon from '@mui/icons-material/PermIdentityOutlined'; -import { Checkbox } from '@mui/material'; import { observer } from 'mobx-react-lite'; import { useEffect } from 'react'; import { Controller, useForm } from 'react-hook-form'; @@ -7,16 +6,7 @@ import { useHistory, useLocation } from 'react-router-dom'; import { PasswordInput } from './components'; import { PageUiStoreImpl } from './SignInPageUiStore'; -import { - CheckboxLabel, - Form, - Input, - Link, - LoginButton, - LogoImage, - PageWrapper, - SubLink, -} from './styled'; +import { Form, Input, Link, LoginButton, LogoImage, PageWrapper, SubLink } from './styled'; import { PageStoreHOC } from '@/components'; import { PAGE_URL } from '@/configs/path'; From 5e50046cf60fb8793cb6ff39d6d04d6241b1d667 Mon Sep 17 00:00:00 2001 From: rbgksqkr Date: Sat, 2 Mar 2024 14:34:49 +0900 Subject: [PATCH 5/7] =?UTF-8?q?feat:=20window=20=ED=99=94=EB=A9=B4=20?= =?UTF-8?q?=ED=81=AC=EA=B8=B0=EB=A5=BC=20resize=20=EC=9D=B4=EB=B2=A4?= =?UTF-8?q?=ED=8A=B8=EB=A1=9C=20=EA=B3=84=EC=82=B0=20(#84)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/circle/home/CircleHomePage.tsx | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/src/pages/circle/home/CircleHomePage.tsx b/src/pages/circle/home/CircleHomePage.tsx index 9a0c75ef..5b5284d0 100644 --- a/src/pages/circle/home/CircleHomePage.tsx +++ b/src/pages/circle/home/CircleHomePage.tsx @@ -1,5 +1,5 @@ import { observer } from 'mobx-react-lite'; -import { useEffect } from 'react'; +import { useEffect, useState } from 'react'; import { PageUiStoreImpl } from './CircleHomePageUiStore'; import * as Circle from './components'; @@ -8,13 +8,29 @@ import { H2 } from './styled'; import { BodyScreen, GNB, Header, PageBody, PageStoreHOC } from '@/components'; import { usePageUiStore } from '@/hooks'; +const WEB_WIDTH_CONDITION = 550; +const RESIZE_DELAY = 300; +let timer: string | number | NodeJS.Timeout | undefined; + const CircleHomePage: React.FC = observer(() => { const { fetch, circles, joinedCircles } = usePageUiStore(); + const [screenWidth, setScreenWidth] = useState(window.innerWidth); useEffect(() => { fetch(); }, [fetch]); + useEffect(() => { + const handleWindowResize = () => { + clearTimeout(timer); + timer = setTimeout(function () { + setScreenWidth(window.innerWidth); + }, RESIZE_DELAY); + }; + window.addEventListener('resize', handleWindowResize); + return () => window.removeEventListener('resize', handleWindowResize); + }); + return ( <>
    @@ -25,7 +41,7 @@ const CircleHomePage: React.FC = observer(() => { WEB_WIDTH_CONDITION ? Circle.WebSlider : Circle.Slider} />

    내 동아리

    Date: Sat, 2 Mar 2024 14:35:47 +0900 Subject: [PATCH 6/7] =?UTF-8?q?refactor:=20=ED=99=94=EB=A9=B4=20=ED=81=AC?= =?UTF-8?q?=EA=B8=B0=EC=97=90=20=EB=94=B0=EB=9D=BC=20WebSlider=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../WebSlider/CircleWebSlideCard.tsx | 136 ++++++++++++++++++ .../components/WebSlider/CircleWebSlider.tsx | 22 +++ .../circle/home/components/WebSlider/index.ts | 1 + src/pages/circle/home/components/index.ts | 1 + 4 files changed, 160 insertions(+) create mode 100644 src/pages/circle/home/components/WebSlider/CircleWebSlideCard.tsx create mode 100644 src/pages/circle/home/components/WebSlider/CircleWebSlider.tsx create mode 100644 src/pages/circle/home/components/WebSlider/index.ts diff --git a/src/pages/circle/home/components/WebSlider/CircleWebSlideCard.tsx b/src/pages/circle/home/components/WebSlider/CircleWebSlideCard.tsx new file mode 100644 index 00000000..e120427f --- /dev/null +++ b/src/pages/circle/home/components/WebSlider/CircleWebSlideCard.tsx @@ -0,0 +1,136 @@ +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; +import { memo, useState } from 'react'; +import { generatePath, useHistory } from 'react-router'; + +// import { Icons } from '@/assets'; +import { Article } from '@/assets/icons'; +import { ClearButton } from '@/components'; +import { PAGE_URL } from '@/configs/path'; + +export const CircleWebSlideCard: React.FC<{ model: Model.Circle }> = memo( + ({ model: { id: circleId, mainImage, name, newLineDescription } }) => { + const { push } = useHistory(); + const [isFlipped, setFlip] = useState(false); + const handleClick = () => { + if (isFlipped) setFlip(c => !c); + else push(generatePath(PAGE_URL.CircleJoin, { circleId })); + }; + const handleFlip = (e: React.MouseEvent) => { + e.stopPropagation(); + setFlip(c => !c); + }; + + return ( + + + + + + {name} +

    + + +

    + {name} + + + +
    +     +     + ); + }, +); + +const Card = styled.article` + box-sizing: border-box; + width: 90%; + max-width: 360px; + background: #fff; + border: 1px solid #dadada; + box-shadow: 1px 2px 5px rgb(0 0 0 / 15%); + border-radius: 5px; + overflow: hidden; + text-align: left; +`; + +const Body = styled.div` + position: absolute; + width: 100%; + height: calc(100% - 40px); + transition: transform 0.65s; + transform-style: preserve-3d; + + > div { + position: absolute; + backface-visibility: hidden; + } +`; + +const Cover = styled.div<{ mainImage: string | null }>` + top: 6px; + left: 6px; + width: calc(100% - 12px); + height: calc(100% - 6px); + border-radius: 5px; + + ${({ mainImage }) => + mainImage + ? css` + background: center / contain no-repeat url(${mainImage}); + ` + : css` + background: center / contain no-repeat url('/images/empty.png'); + background-size: 65%; + `} + background-color: #efefef; +`; + +const Name = styled.h3` + margin: 0 35px 0 13px; + line-height: 36px; + font-size: 12px; + font-weight: bold; + backface-visibility: hidden; +`; + +const Inner = styled.div<{ isFlipped: boolean }>` + position: relative; + width: 100%; + padding-bottom: 140%; // 5:7 비율 + + ${Body}, ${Name} { + transform: ${({ isFlipped }) => (isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)')}; + } +`; + +const Content = styled.div` + padding: 13px 9px; + width: 100%; + height: 100%; + background-color: #f8f8f8; + border-radius: 5px; + transform: rotateY(180deg); + overflow: hidden; +`; + +const ContentName = styled.div` + margin-bottom: 9px; + line-height: 18px; + font-size: 15px; + font-weight: bold; +`; + +const Footer = styled.div` + position: absolute; + bottom: 0; + width: 100%; + height: 40px; +`; + +const Icon = styled(Article)` + position: absolute; + top: 9px; + right: 5px; +`; diff --git a/src/pages/circle/home/components/WebSlider/CircleWebSlider.tsx b/src/pages/circle/home/components/WebSlider/CircleWebSlider.tsx new file mode 100644 index 00000000..6aa24ecd --- /dev/null +++ b/src/pages/circle/home/components/WebSlider/CircleWebSlider.tsx @@ -0,0 +1,22 @@ +import styled from '@emotion/styled'; +import { observer } from 'mobx-react-lite'; + +import { ListComponent } from '../CircleListFrame'; +import { CircleSlideCard } from '../Slider/CircleSlideCard'; + +export const CircleWebSlider: ListComponent = observer(({ items }) => { + return ( + + {items.map(item => ( + + ))} + + ); +}); + +const WebScrollWrapper = styled.div` + display: flex; + gap: 20px; + height: 400px; + overflow-x: auto; +`; diff --git a/src/pages/circle/home/components/WebSlider/index.ts b/src/pages/circle/home/components/WebSlider/index.ts new file mode 100644 index 00000000..b519abc6 --- /dev/null +++ b/src/pages/circle/home/components/WebSlider/index.ts @@ -0,0 +1 @@ +export { CircleWebSlider as WebSlider } from './CircleWebSlider'; diff --git a/src/pages/circle/home/components/index.ts b/src/pages/circle/home/components/index.ts index 30471392..1104a3a0 100644 --- a/src/pages/circle/home/components/index.ts +++ b/src/pages/circle/home/components/index.ts @@ -1,4 +1,5 @@ export * from './List'; export * from './Slider'; +export * from './WebSlider'; export { CircleListFrame as ListFrame } from './CircleListFrame'; From 7b8006fddb0549fd6e878dbd9640dbd6b14f1d03 Mon Sep 17 00:00:00 2001 From: rbgksqkr Date: Sat, 2 Mar 2024 14:52:40 +0900 Subject: [PATCH 7/7] =?UTF-8?q?design:=20Web=20=ED=99=98=EA=B2=BD=EC=97=90?= =?UTF-8?q?=20=EB=A7=9E=EA=B2=8C=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EC=88=98=EC=A0=95=20(#84)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Atoms/Button.tsx | 2 +- .../home/components/WebSlider/CircleWebSlideCard.tsx | 4 ++-- .../circle/home/components/WebSlider/CircleWebSlider.tsx | 7 ++++--- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/Atoms/Button.tsx b/src/components/Atoms/Button.tsx index 12f9f9f0..52607ae3 100644 --- a/src/components/Atoms/Button.tsx +++ b/src/components/Atoms/Button.tsx @@ -39,7 +39,7 @@ interface ButtonProps { className?: string; $loading?: boolean; disabled?: boolean; - onClick?: () => void; + onClick?: (e: React.MouseEvent) => void; color?: string; type?: 'button' | 'submit' | 'reset' | undefined; } diff --git a/src/pages/circle/home/components/WebSlider/CircleWebSlideCard.tsx b/src/pages/circle/home/components/WebSlider/CircleWebSlideCard.tsx index e120427f..f627a249 100644 --- a/src/pages/circle/home/components/WebSlider/CircleWebSlideCard.tsx +++ b/src/pages/circle/home/components/WebSlider/CircleWebSlideCard.tsx @@ -3,7 +3,6 @@ import styled from '@emotion/styled'; import { memo, useState } from 'react'; import { generatePath, useHistory } from 'react-router'; -// import { Icons } from '@/assets'; import { Article } from '@/assets/icons'; import { ClearButton } from '@/components'; import { PAGE_URL } from '@/configs/path'; @@ -46,7 +45,8 @@ export const CircleWebSlideCard: React.FC<{ model: Model.Circle }> = memo( const Card = styled.article` box-sizing: border-box; width: 90%; - max-width: 360px; + min-width: 360px; + min-height: 500px; background: #fff; border: 1px solid #dadada; box-shadow: 1px 2px 5px rgb(0 0 0 / 15%); diff --git a/src/pages/circle/home/components/WebSlider/CircleWebSlider.tsx b/src/pages/circle/home/components/WebSlider/CircleWebSlider.tsx index 6aa24ecd..577e4ed5 100644 --- a/src/pages/circle/home/components/WebSlider/CircleWebSlider.tsx +++ b/src/pages/circle/home/components/WebSlider/CircleWebSlider.tsx @@ -1,14 +1,14 @@ import styled from '@emotion/styled'; import { observer } from 'mobx-react-lite'; +import { CircleWebSlideCard } from './CircleWebSlideCard'; import { ListComponent } from '../CircleListFrame'; -import { CircleSlideCard } from '../Slider/CircleSlideCard'; export const CircleWebSlider: ListComponent = observer(({ items }) => { return ( {items.map(item => ( - + ))} ); @@ -16,7 +16,8 @@ export const CircleWebSlider: ListComponent = observer(({ items }) => { const WebScrollWrapper = styled.div` display: flex; + align-items: center; gap: 20px; - height: 400px; overflow-x: auto; + padding: 10px 0px; `;