release-1.1.14

choooz · Jul 9, 2023 · b326b51 · b326b51 · vercel · Jul 9, 2023
2 parents 437d3dd + ef162cf
commit b326b51
Show file tree

Hide file tree

Showing 17 changed files with 171 additions and 112 deletions.
diff --git a/README.md b/README.md
@@ -1 +1,16 @@
-# Chooz!
+<img width="1680" alt="image" src="https://github.com/choooz/client/assets/57664427/0fd4a240-f868-4118-b63b-2eac8212ea9c">
+
+<img width="1680" alt="image" src="https://github.com/choooz/client/assets/57664427/fa468901-9cfe-45e9-968c-e103320a94e6">
+
+<img width="1680" alt="image" src="https://github.com/choooz/client/assets/57664427/42d88d68-2bef-4fc1-a7d4-a00d6d33ddcc">
+
+<img width="1663" alt="image" src="https://github.com/choooz/client/assets/57664427/2b24a9c4-b350-44d6-b23d-bcf130acc77a">
+
+![회원가입](https://github.com/choooz/client/assets/57664427/e638d516-e8ee-42cc-8677-27cc294b30c8)
+
+![투표 등록](https://github.com/choooz/client/assets/57664427/6208c5c1-f63b-4121-b754-22b2ac304f98)
+![통계](https://github.com/choooz/client/assets/57664427/9734f859-60f3-4cac-a7f5-89a6d15dbe64)
+![검색](https://github.com/choooz/client/assets/57664427/188c85e4-f360-4de8-8ba6-0571c5de2569)
+![유저 정보](https://github.com/choooz/client/assets/57664427/ebf6b0f6-45d9-404b-b654-5c4c8d57b10c)
+<img width="1648" alt="image" src="https://github.com/choooz/client/assets/57664427/8beea0b9-148b-4573-a8d8-a09a349e5a9a">
+<img width="1679" alt="image" src="https://github.com/choooz/client/assets/57664427/441f5cee-67bc-4525-9178-9ad95c352d57">
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -56,10 +56,10 @@ function RootLayout({
 const Applayout = styled.div`
   display: flex;
   flex-direction: column;
-  height: 100vh;
   padding: 0 16px;
   flex: 1;
   overflow: hidden;
+  height: calc(100vh - 55px);
 `;
 
 export default RootLayout;
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
@@ -1,44 +1,54 @@
 "use client";
 
 import { useToggle, useOutsideClick } from "@chooz/hooks";
-import { Button, FloatModalTemplate } from "@chooz/ui";
+import { Button } from "@chooz/ui";
 import { media } from "@chooz/ui/styles/media";
-import AddDetailModalContainer from "components/select/AddDetailModalContainer";
-import useFlipAnimation, { Drag } from "components/select/hooks/useFlipAnimation";
-import SelectAB from "components/select/SelectAB";
-import VoteToolbar from "components/select/VoteToolbar";
+import ModifyVoteModal from "app/select/components/ModifyVoteModal";
+import ChipContainer from "app/select/components/ChipContainer";
 import Path from "lib/Path";
 import Image from "next/image";
 import Link from "next/link";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useSearchParams } from "next/navigation";
 import { AmplifyIcon } from "public/icons";
-import { Success } from "public/images";
 import React from "react";
 import useInfiniteMainListService from "services/useInfiniteMainListService";
 import useMutateVotingService from "services/useMutateVotingService";
 import styled, { css } from "styled-components";
+import SelectAorBContainer from "./select/components/SelectAorBContainer";
+import PostCompleteComponent from "./select/components/PostCompleteComponent";
+import useFlipAnimation, { Drag } from "./select/hooks/useFlipAnimation";
 
-/**
- * @TODO: 현재 드래그 빠바박 여러번 하면 카드가 여러번 넘어가는 문제가 있음
- */
 function SelectPage() {
   const searchParams = useSearchParams();
   const params = new URLSearchParams(searchParams);
-  const router = useRouter();
+  const [isModifyModal, onToggleModifyModal] = useToggle(false);
+  const [isModifyDeleteButtonBox, onToggleModifyDeleteButtonBox] = useToggle(false);
+  const { targetEl } = useOutsideClick<HTMLImageElement>(
+    isModifyDeleteButtonBox,
+    onToggleModifyDeleteButtonBox,
+  );
   const { data, isError, isLoading, mainVoteList, nowShowing, onChangeNowShowing } =
-    useInfiniteMainListService(20, "ByTime");
-  const [toggleDetail, onChangeToggleDetail] = useToggle(false);
-  const [toggleMenu, onChangeToggleMenu] = useToggle(false);
-  const { targetEl } = useOutsideClick<HTMLImageElement>(toggleMenu, onChangeToggleMenu);
+    useInfiniteMainListService({ size: 5, sortBy: "ByTime" });
   const { onActFlip, drag, onTouchMoveActFlip } = useFlipAnimation(onChangeNowShowing);
   const { select, onMutateVoting } = useMutateVotingService(mainVoteList[nowShowing]?.voteId);
+  const {
+    modifiedDate,
+    title,
+    imageA,
+    imageB,
+    titleA,
+    titleB,
+    detail,
+    category,
+    countVoted,
+    writer,
+    voteId,
+  } = mainVoteList[nowShowing] || {};
 
   if (isLoading) return <PageInner drag={drag}>로딩중</PageInner>;
   if (isError) return <PageInner drag={drag}>에러</PageInner>;
   if (!data) return <PageInner drag={drag}>데이터 없음</PageInner>;
 
-  const { modifiedDate, title, imageA, imageB, titleA, titleB, detail, category, countVoted } =
-    mainVoteList[nowShowing] || {};
   return (
     <>
       <PageWrapper>
@@ -48,52 +58,43 @@ function SelectPage() {
           onTouchMove={onTouchMoveActFlip}
           drag={drag}
         >
-          <VoteToolbar
-            onChangeToggleDetail={onChangeToggleDetail}
-            onChangeToggleMenu={onChangeToggleMenu}
-            toggleMenu={toggleMenu}
+          <ChipContainer
+            onToggleModifyModal={onToggleModifyModal}
+            onToggleModifyDeleteButtonBox={onToggleModifyDeleteButtonBox}
+            isModifyDeleteButtonBox={isModifyDeleteButtonBox}
             targetEl={targetEl}
             title={title}
             date={modifiedDate}
             countVoted={countVoted}
+            writer={writer}
+            voteId={voteId}
           />
-
-          <SelectAB
+          <SelectAorBContainer
             imageA={imageA || ""}
             titleA={titleA || ""}
             imageB={imageB || ""}
             titleB={titleB || ""}
             select={select.choice}
             onMutateVoting={onMutateVoting}
           />
-          <AddDescriptionButton>
+          <CreateVoteButton>
             <Link href={`${Path.POST_PAGE}`}>﹢</Link>
-          </AddDescriptionButton>
-          <DetailButton width="127px" height="48px" variant="primary" borderRadius="100px">
-            <Link href={`${Path.VOTE_DETAIL_PAGE}${mainVoteList[nowShowing].voteId}`}>
+          </CreateVoteButton>
+          <DetailViewButton width="127px" height="48px" variant="primary" borderRadius="100px">
+            <Link href={`${Path.VOTE_DETAIL_PAGE}${voteId}`}>
               <DetailButtonInner>
                 <Image alt="자세히 보기" src={AmplifyIcon} width={40} height={40} /> 자세히 보기
               </DetailButtonInner>
             </Link>
-          </DetailButton>
+          </DetailViewButton>
         </PageInner>
         <FirstPageBase className="animate2" drag={drag} />
         <SecondPageBase className="animate3" drag={drag} />
       </PageWrapper>
-
-      {params.get("isSuccess") && (
-        <FloatModalTemplate
-          onToggleModal={() => {
-            router.push(`${Path.MAIN_PAGE}?isSuccess=`);
-          }}
-        >
-          <Image alt="체크" src={Success} width={56} height={56} />
-          <GuideText>선택결정이 등록되었어요.</GuideText>
-        </FloatModalTemplate>
-      )}
-      {toggleDetail && (
-        <AddDetailModalContainer
-          onToggleModal={onChangeToggleDetail}
+      {params.get("isSuccess") && <PostCompleteComponent />}
+      {isModifyModal && (
+        <ModifyVoteModal
+          onToggleModal={onToggleModifyModal}
           initialVoteValue={{
             title,
             detail,
@@ -200,7 +201,7 @@ const SecondPageBase = styled(FirstPageBase)`
     `}
 `;
 
-const AddDescriptionButton = styled.div`
+const CreateVoteButton = styled.div`
   position: absolute;
   bottom: 30px;
   right: 30px;
@@ -217,13 +218,7 @@ const AddDescriptionButton = styled.div`
   cursor: pointer;
 `;
 
-const GuideText = styled.div`
-  color: ${({ theme }) => theme.palette.background.white};
-  ${({ theme }) => theme.textStyle.Title_Large}
-  font-weight: 700;
-`;
-
-const DetailButton = styled(Button)`
+const DetailViewButton = styled(Button)`
   position: absolute;
   bottom: -24px;
   right: 50%;

diff --git a/apps/web/components/select/VoteToolbar.tsx → ...b/app/select/components/ChipContainer.tsx b/apps/web/components/select/VoteToolbar.tsx → ...b/app/select/components/ChipContainer.tsx
@@ -1,30 +1,45 @@
 import NumberOfSolver from "components/common/NumberOfSolver";
 import TargetMessage from "components/common/TargetMessage";
+import { useGetUserInfo } from "hooks/useGetUserInfo";
+import { deleteVoteAPI } from "lib/apis/vote";
 import Image from "next/image";
 import { HambergerIcon, SaveIcon } from "public/icons";
 import React from "react";
 import styled from "styled-components";
-import MenuBox from "./MenuBox";
+import { Writer } from "types/vote";
+import ModifyDeleteButtonBox from "./ModifyDeleteButtonBox";
 
 interface Props {
-  onChangeToggleDetail(): void;
-  onChangeToggleMenu(): void;
-  toggleMenu: boolean;
+  onToggleModifyModal(): void;
+  onToggleModifyDeleteButtonBox(): void;
+  isModifyDeleteButtonBox: boolean;
   targetEl: React.RefObject<HTMLImageElement>;
   title: string;
   date: string;
   countVoted: number;
+  writer: Writer;
+  voteId: number;
 }
 
-function VoteToolbar({
-  onChangeToggleDetail,
-  onChangeToggleMenu,
+function ChipContainer({
+  onToggleModifyModal,
+  onToggleModifyDeleteButtonBox,
   title,
-  toggleMenu,
+  isModifyDeleteButtonBox,
   targetEl,
   date,
   countVoted,
+  writer,
+  voteId,
 }: Props) {
+  const { userInfo } = useGetUserInfo();
+
+  const amIWriter = userInfo?.userId === writer?.userid;
+
+  const onDeleteVote = async () => {
+    await deleteVoteAPI(voteId);
+  };
+
   return (
     <>
       <TagRow>
@@ -34,28 +49,28 @@ function VoteToolbar({
         </FlexRow>
         <FlexRow>
           <Image src={SaveIcon} alt="저장하기" width={32} height={32} />
-          <Image
-            ref={targetEl}
-            src={HambergerIcon}
-            alt="매뉴"
-            width={32}
-            height={32}
-            onClick={onChangeToggleMenu}
-          />
+          {amIWriter && (
+            <Image
+              ref={targetEl}
+              src={HambergerIcon}
+              alt="매뉴"
+              width={32}
+              height={32}
+              onClick={onToggleModifyDeleteButtonBox}
+            />
+          )}
         </FlexRow>
       </TagRow>
       <TitleRow>
         {title}
         <DateText>{date.slice(0, 10)}</DateText>
       </TitleRow>
-      {toggleMenu && (
-        <MenuBox
+      {isModifyDeleteButtonBox && (
+        <ModifyDeleteButtonBox
           top="70px"
           right="41px"
-          isDelete
-          isModify
-          onDelete={() => void 0}
-          onModify={onChangeToggleDetail}
+          onDelete={onDeleteVote}
+          onModify={onToggleModifyModal}
         />
       )}
     </>
@@ -92,4 +107,4 @@ const FlexRow = styled.div`
   gap: 4px;
 `;
 
-export default VoteToolbar;
+export default ChipContainer;
diff --git a/apps/web/components/select/MenuBox.tsx → ...lect/components/ModifyDeleteButtonBox.tsx b/apps/web/components/select/MenuBox.tsx → ...lect/components/ModifyDeleteButtonBox.tsx
@@ -2,27 +2,21 @@ import React from "react";
 import styled, { css } from "styled-components";
 
 interface Props {
-  isModify?: boolean;
   onModify?: () => void;
-  isDelete?: boolean;
   onDelete?: () => void;
   top?: string;
   right?: string;
 }
 
-function MenuBox({ isModify, onModify, isDelete, onDelete, top = "0", right = "0px" }: Props) {
+function ModifyDeleteButtonBox({ onModify, onDelete, top = "0", right = "0px" }: Props) {
   return (
     <Container top={top} right={right}>
-      {isModify && (
-        <MenuText className="modify" onClick={onModify}>
-          수정하기
-        </MenuText>
-      )}
-      {isDelete && (
-        <MenuText className="delete" onClick={onDelete}>
-          삭제하기
-        </MenuText>
-      )}
+      <MenuText className="modify" onClick={onModify}>
+        수정하기
+      </MenuText>
+      <MenuText className="delete" onClick={onDelete}>
+        삭제하기
+      </MenuText>
     </Container>
   );
 }
@@ -59,4 +53,4 @@ const MenuText = styled.div`
   }
 `;
 
-export default MenuBox;
+export default ModifyDeleteButtonBox;
diff --git a/...onents/select/AddDetailModalContainer.tsx → ...app/select/components/ModifyVoteModal.tsx b/...onents/select/AddDetailModalContainer.tsx → ...app/select/components/ModifyVoteModal.tsx
@@ -11,7 +11,7 @@ interface Props {
   initialVoteValue: ModifyVote;
 }
 
-function AddDetailModalContainer({ onToggleModal, voteId, initialVoteValue }: Props) {
+function ModifyVoteModal({ onToggleModal, voteId, initialVoteValue }: Props) {
   const { onChangeVote, onChangeVoteByClick, mutateVote, vote } = useModifyVoteService(
     onToggleModal,
     initialVoteValue,
@@ -153,4 +153,4 @@ const Chip = styled.label`
   }
 `;
 
-export default AddDetailModalContainer;
+export default ModifyVoteModal;
diff --git a/apps/web/app/select/components/PostCompleteComponent.tsx b/apps/web/app/select/components/PostCompleteComponent.tsx
@@ -0,0 +1,29 @@
+import { FloatComponentTemplate } from "@chooz/ui";
+import Path from "lib/Path";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { Success } from "public/images";
+import styled from "styled-components";
+
+function PostCompleteComponent() {
+  const router = useRouter();
+
+  return (
+    <FloatComponentTemplate
+      onToggleModal={() => {
+        router.push(`${Path.MAIN_PAGE}?isSuccess=`);
+      }}
+    >
+      <Image alt="체크" src={Success} width={56} height={56} />
+      <GuideText>선택결정이 등록되었어요.</GuideText>
+    </FloatComponentTemplate>
+  );
+}
+
+const GuideText = styled.div`
+  color: ${({ theme }) => theme.palette.background.white};
+  ${({ theme }) => theme.textStyle.Title_Large}
+  font-weight: 700;
+`;
+
+export default PostCompleteComponent;
diff --git a/apps/web/components/select/SelectAB.tsx → ...select/components/SelectAorBContainer.tsx b/apps/web/components/select/SelectAB.tsx → ...select/components/SelectAorBContainer.tsx
@@ -14,7 +14,7 @@ interface Props {
   onMutateVoting: (select: AorB) => void;
 }
 
-function SelectAB({ titleA, titleB, imageA, imageB, select, onMutateVoting }: Props) {
+function SelectAorBContainer({ titleA, titleB, imageA, imageB, select, onMutateVoting }: Props) {
   const getAB = (direction: Direction) => {
     return direction === "left" ? "A" : "B";
   };
@@ -156,4 +156,4 @@ const VoteImageWrapper = styled.div`
     height: 340px;
   }
 `;
-export default SelectAB;
+export default SelectAorBContainer;