release-1.1.15

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;

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() {
         <PageInner
           className="animate"
           onWheel={onActFlip}
-          onTouchMove={onTouchMoveActFlip}
+          onTouchStart={onTouchStartPosition}
+          onTouchEnd={onTouchMoveActFlip}
           drag={drag}
         >
           <ChipContainer
@@ -95,7 +97,7 @@ function SelectPage() {
       {isModifyModal && (
         <ModifyVoteModal
           onToggleModal={onToggleModifyModal}
-          initialVoteValue={{
+          prevVoteValue={{
             title,
             detail,
             titleA,

apps/web/app/post/page.tsx

@@ -50,8 +50,10 @@ function PostPage() {
 }
 
 const PageWrapper = styled.div`
+  overflow: scroll;
   width: 100%;
   padding-top: 16px;
+  padding-bottom: 20px;
   ${media.medium} {
     padding-top: 40px;
   }
@@ -64,10 +66,8 @@ const PageInner = styled.div`
   max-width: 640px;
   position: relative;
   padding: 30px;
-  height: calc(100vh - 30px - 55px);
   ${media.medium} {
     padding: 40px;
-    height: calc(100vh - 60px - 55px);
   }
 `;
 

apps/web/app/select/components/ModifyVoteModal.tsx

@@ -8,15 +8,15 @@ import { ModifyVote } from "lib/apis/vote";
 interface Props {
   onToggleModal(): void;
   voteId: number;
-  initialVoteValue: ModifyVote;
+  prevVoteValue: ModifyVote;
 }
 
-function ModifyVoteModal({ onToggleModal, voteId, initialVoteValue }: Props) {
-  const { onChangeVote, onChangeVoteByClick, mutateVote, vote } = useModifyVoteService(
+function ModifyVoteModal({ onToggleModal, voteId, prevVoteValue }: Props) {
+  const { onChangeVote, onChangeVoteByClick, mutateVote, vote } = useModifyVoteService({
     onToggleModal,
-    initialVoteValue,
+    prevVoteValue,
     voteId,
-  );
+  });
 
   const { title, detail, titleA, titleB, category } = vote;
 
@@ -42,7 +42,7 @@ function ModifyVoteModal({ onToggleModal, voteId, initialVoteValue }: Props) {
             <Input width="auto" onChange={onChangeVote} name="titleB" value={titleB} />
           </FlexRow>
           <DivideLine />
-          <QuestionText>나이</QuestionText>
+          <QuestionText>카테고리</QuestionText>
           <ChipWrapper>
             {SELECT_BOX_CATEGORY_LIST.map(({ label, value }) => (
               <div key={value}>

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<Drag>(null);
+  const [startTouchPosition, setStartTouchPosition] = useState({
+    y: 0,
+  });
   const lastTouchEventTimeRef = useRef(0);
 
   const onActFlip = (e: React.WheelEvent<HTMLDivElement>) => {
@@ -32,22 +35,29 @@ function useFlipAnimation(onChangeNowShowing: (index: number) => void) {
     }, 850);
   };
 
+  const onTouchStartPosition = (e: React.TouchEvent<HTMLDivElement>) => {
+    setStartTouchPosition({
+      y: e.changedTouches[0].clientY,
+    });
+  };
+
   const onTouchMoveActFlip = (e: React.TouchEvent<HTMLDivElement>) => {
     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;

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) {
       </Button>
 
       <DetailButton width="127px" height="48px" variant="primary" borderRadius="100px">
-        <Link href="select">
+        <Link href={Path.MAIN_PAGE}>
           <DetailButtonInner>
-            <Image alt="자세히 보기" src={AmplifyIcon} width={40} height={40} /> 간단히 보기
+            <Image alt="간단히 보기" src={AmplifyIcon} width={40} height={40} /> 간단히 보기
           </DetailButtonInner>
         </Link>
       </DetailButton>

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<HTMLImageElement>(toggleMenu, onChangeToggleMenu);
+  const [isModifyModal, onToggleModifyModal] = useToggle(false);
+  const [isModifyDeleteButtonBox, onToggleModifyDeleteButtonBox] = useToggle(false);
+  const { targetEl } = useOutsideClick<HTMLImageElement>(
+    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 (
     <>
       <ChipContainer
-        onChangeToggleDetail={onChangeToggleDetail}
-        onChangeToggleMenu={onChangeToggleMenu}
-        toggleMenu={toggleMenu}
+        onToggleModifyModal={onToggleModifyModal}
+        onToggleModifyDeleteButtonBox={onToggleModifyDeleteButtonBox}
+        isModifyDeleteButtonBox={isModifyDeleteButtonBox}
         targetEl={targetEl}
         title={title}
         date={voteCreatedDate}
+        writer={writer}
+        voteId={postId}
         /*
          * @Todo 이렇게 해야하나?
          */
@@ -85,10 +91,10 @@ function VoteContainer({ postId }: { postId: number }) {
         percentageB={percentageB}
       />
       <VoteDetail>{description}</VoteDetail>
-      {toggleDetail && (
+      {isModifyModal && (
         <ModifyVoteModal
-          onToggleModal={onChangeToggleDetail}
-          initialVoteValue={{
+          onToggleModal={onToggleModifyModal}
+          prevVoteValue={{
             title,
             detail: description,
             titleA,

apps/web/components/post/ImageTitleSection.tsx

@@ -30,8 +30,11 @@ function ImageTitleSection({ onChangeVote, onUploadImage, vote, onChangePostStep
 
   const { title, titleA, titleB, imageA, imageB } = vote;
   return (
-    <Template nextButtonText="다음" nextButtonProps={{ onClick: onNextStep, disabled: IsDisabled }}>
-      <Container>
+    <Container>
+      <Template
+        nextButtonText="다음"
+        nextButtonProps={{ onClick: onNextStep, disabled: IsDisabled }}
+      >
         {step === 2 && (
           <TitleBox>
             <QuestionText> 질문을 입력해주세요.(선택)</QuestionText>
@@ -106,8 +109,9 @@ function ImageTitleSection({ onChangeVote, onUploadImage, vote, onChangePostStep
             />
           </InputBox>
         </VoteWrapper>
-      </Container>
-    </Template>
+      </Template>
+      <ButtonSpace />
+    </Container>
   );
 }
 
@@ -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);

apps/web/components/post/TargetSection.tsx

@@ -76,7 +76,6 @@ function TargetSection({
         ))}
       </ChipWrapper>
       <QuestionText>MBTI</QuestionText>
-
       {/* 추가적으로 나중에 밑쪽 화살표 추가하기 */}
       <Select name="filteredMbti" onChange={onChangeVoteBySelect} value={filteredMbti}>
         <option value="" hidden>
@@ -93,6 +92,7 @@ function TargetSection({
           초기화
         </Button>
       </ResetButtonWrapper>
+      <ButtonSpace />
     </Template>
   );
 }
@@ -173,4 +173,10 @@ const ResetButtonWrapper = styled.div`
   padding-top: 32px;
 `;
 
+const ButtonSpace = styled.div`
+  width: 100%;
+  height: 56px;
+  margin-bottom: 30px;
+`;
+
 export default TargetSection;

apps/web/lib/apis/vote.ts

@@ -72,8 +72,8 @@ export const deleteVoteAPI = async (voteId: number) => {
   return response.data;
 };
 
-interface GetVoteByIdResponst {
-  user: {
+interface GetVoteByIdResponse {
+  writer: {
     userImage: string | null;
     userGender: string;
     userAge: number;
@@ -93,7 +93,7 @@ interface GetVoteByIdResponst {
   description: string;
 }
 export const getVoteByIdAPI = async (id: number) => {
-  const response = await axios.get<GetVoteByIdResponst>(`${SERVER_URL}api/votes/${id}`);
+  const response = await axios.get<GetVoteByIdResponse>(`${SERVER_URL}api/votes/${id}`);
   return response.data;
 };
 export interface PostVotingRequest {

apps/web/services/useModifyVoteService.ts

@@ -1,10 +1,17 @@
-import { QueryClient, useMutation } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { modifyVoteAPI, ModifyVote } from "lib/apis/vote";
 import { reactQueryKeys } from "lib/queryKeys";
 import React, { useEffect, useState } from "react";
 
-function useModifyVoteService(onToggle: () => void, initialValue: ModifyVote, voteId: number) {
-  const queryClient = new QueryClient();
+interface Props {
+  onToggleModal: () => void;
+  prevVoteValue: ModifyVote;
+  voteId: number;
+}
+
+function useModifyVoteService({ onToggleModal, prevVoteValue, voteId }: Props) {
+  const queryClient = useQueryClient();
+
   const [vote, setVote] = useState<ModifyVote>({
     title: "",
     detail: "",
@@ -38,22 +45,22 @@ function useModifyVoteService(onToggle: () => void, initialValue: ModifyVote, vo
 
   // @TODO: detail값 추가되면 채워넣기
   useEffect(() => {
-    if (!initialValue) return;
-    const { title, titleA, titleB, category, detail } = initialValue;
+    if (!prevVoteValue) return;
+    const { title, titleA, titleB, category, detail } = prevVoteValue;
     setVote({
       title: title,
       detail,
       category,
       titleA,
       titleB,
     });
-  }, [initialValue]);
+  }, [prevVoteValue]);
 
   const { mutate: mutateVote } = useMutation(() => modifyVoteAPI(vote, voteId || 0), {
     onSuccess: () => {
       alert("내용이 추가하기 성공.");
       queryClient.invalidateQueries(reactQueryKeys.mainVoteList());
-      onToggle();
+      onToggleModal();
     },
   });