diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx index a382241c..6660bbb1 100644 --- a/apps/web/app/layout.tsx +++ b/apps/web/app/layout.tsx @@ -8,6 +8,7 @@ import { GlobalStyles } from "styles/globalStyles"; import StyledComponentsRegistry from "../lib/registry"; import useReplaceUser from "hooks/useReplaceUser"; import Header from "components/common/header/Header"; +import { media } from "styles/media"; function RootLayout({ // Layouts must accept a children prop. @@ -56,10 +57,13 @@ function RootLayout({ const Applayout = styled.div` display: flex; flex-direction: column; - padding: 0 16px; + padding: 13px 16px 0; flex: 1; overflow: hidden; - height: calc(100vh - 55px); + height: calc(100svh - 55px); + ${media.medium} { + padding-top: 37px; + } `; export default RootLayout; diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx index 85c71a7a..24119513 100644 --- a/apps/web/app/page.tsx +++ b/apps/web/app/page.tsx @@ -29,7 +29,8 @@ function SelectPage() { ); const { data, isError, isLoading, mainVoteList, nowShowing, onChangeNowShowing } = useInfiniteMainListService({ size: 5, sortBy: "ByTime" }); - const { onActFlip, drag, onTouchMoveActFlip } = useFlipAnimation(onChangeNowShowing); + const { onActFlip, drag, onTouchStartPosition, onTouchMoveActFlip } = + useFlipAnimation(onChangeNowShowing); const { select, onMutateVoting } = useMutateVotingService(mainVoteList[nowShowing]?.voteId); const { modifiedDate, @@ -55,7 +56,8 @@ function SelectPage() { - 나이 + 카테고리 {SELECT_BOX_CATEGORY_LIST.map(({ label, value }) => (
diff --git a/apps/web/app/select/hooks/useFlipAnimation.ts b/apps/web/app/select/hooks/useFlipAnimation.ts index 9ce44876..97a8211c 100644 --- a/apps/web/app/select/hooks/useFlipAnimation.ts +++ b/apps/web/app/select/hooks/useFlipAnimation.ts @@ -3,6 +3,9 @@ import React, { useRef, useState } from "react"; export type Drag = "up" | "down" | null; function useFlipAnimation(onChangeNowShowing: (index: number) => void) { const [drag, setDrag] = useState(null); + const [startTouchPosition, setStartTouchPosition] = useState({ + y: 0, + }); const lastTouchEventTimeRef = useRef(0); const onActFlip = (e: React.WheelEvent) => { @@ -32,22 +35,29 @@ function useFlipAnimation(onChangeNowShowing: (index: number) => void) { }, 850); }; + const onTouchStartPosition = (e: React.TouchEvent) => { + setStartTouchPosition({ + y: e.changedTouches[0].clientY, + }); + }; + const onTouchMoveActFlip = (e: React.TouchEvent) => { const now = Date.now(); const timeDiff = now - lastTouchEventTimeRef.current; - if (timeDiff < 1000) { - // 이전 이벤트가 1초 내에 발생한 경우 무시 + if (timeDiff < 1500) { + // 이전 이벤트가 1.5초 내에 발생한 경우 무시 return; } lastTouchEventTimeRef.current = now; + //터치의 시작이 끝보다 위면 up, 아래면 down - if (e.touches[0].clientY < e.changedTouches[0].clientY + 300) { + if (e.changedTouches[0].clientY - startTouchPosition.y > 0) { setDrag("up"); setTimeout(() => { - onChangeNowShowing(1); + onChangeNowShowing(-1); }, 750); } - if (e.touches[0].clientY > e.changedTouches[0].clientY - 300) { + if (e.changedTouches[0].clientY - startTouchPosition.y < 0) { setDrag("down"); setTimeout(() => { onChangeNowShowing(1); @@ -59,7 +69,7 @@ function useFlipAnimation(onChangeNowShowing: (index: number) => void) { }, 850); }; - return { onActFlip, drag, onTouchMoveActFlip }; + return { onActFlip, drag, onTouchStartPosition, onTouchMoveActFlip }; } export default useFlipAnimation; diff --git a/apps/web/components/detail/CommentContainer.tsx b/apps/web/components/detail/CommentContainer.tsx index aa6ebaa5..21093297 100644 --- a/apps/web/components/detail/CommentContainer.tsx +++ b/apps/web/components/detail/CommentContainer.tsx @@ -14,6 +14,7 @@ import useMutateCommentService from "services/useMutateCommentService"; import useUpdateCommnetService from "services/useUpdateCommnetService"; import useCommentFilter from "./hooks/useCommentFilter"; import { useGetUserInfo } from "hooks/useGetUserInfo"; +import Path from "lib/Path"; interface Props { postId: number; @@ -82,9 +83,9 @@ function CommentContainer({ postId }: Props) { - + - 자세히 보기 간단히 보기 + 간단히 보기 간단히 보기 diff --git a/apps/web/components/detail/VoteContainer.tsx b/apps/web/components/detail/VoteContainer.tsx index 850a8475..cf2bcd9d 100644 --- a/apps/web/components/detail/VoteContainer.tsx +++ b/apps/web/components/detail/VoteContainer.tsx @@ -13,9 +13,12 @@ import useFilterStatistics from "./hooks/useFilterStatistics"; import VoteAnalyzeBar from "./VoteAnalyzeBar"; function VoteContainer({ postId }: { postId: number }) { - const [toggleDetail, onChangeToggleDetail] = useToggle(false); - const [toggleMenu, onChangeToggleMenu] = useToggle(false); - const { targetEl } = useOutsideClick(toggleMenu, onChangeToggleMenu); + const [isModifyModal, onToggleModifyModal] = useToggle(false); + const [isModifyDeleteButtonBox, onToggleModifyDeleteButtonBox] = useToggle(false); + const { targetEl } = useOutsideClick( + isModifyDeleteButtonBox, + onToggleModifyDeleteButtonBox, + ); const { data: VoteData, isLoading, isError } = useVoteLoadService(postId); const { voteCountQuery, voteStatisticsQuery } = useStatisticsService(postId); const { @@ -49,17 +52,20 @@ function VoteContainer({ postId }: { postId: number }) { totalCountA: filteredTotalCountA, totalCountB: filteredTotalCountB, } = voteFilteredStatisticsQuery.data; - const { title, titleA, titleB, imageA, imageB, description, voteCreatedDate, category } = + const { title, titleA, titleB, imageA, imageB, description, voteCreatedDate, category, writer } = VoteData; + return ( <> {description} - {toggleDetail && ( + {isModifyModal && ( - + + + + + ); } @@ -199,5 +203,9 @@ const VSIcon = styled.div` height: 40px; } `; - +const ButtonSpace = styled.div` + width: 100%; + height: 56px; + margin-bottom: 30px; +`; export default React.memo(ImageTitleSection); diff --git a/apps/web/components/post/TargetSection.tsx b/apps/web/components/post/TargetSection.tsx index af75e077..8bccff74 100644 --- a/apps/web/components/post/TargetSection.tsx +++ b/apps/web/components/post/TargetSection.tsx @@ -76,7 +76,6 @@ function TargetSection({ ))} MBTI - {/* 추가적으로 나중에 밑쪽 화살표 추가하기 */}