release-1.1.13

apps/web/app/my/edit/page.tsx

@@ -7,7 +7,7 @@ import TabContainer from "components/my/TabContainer";
 import { useGetUserInfo } from "hooks/useGetUserInfo";
 import { uploadProfileImageAPI } from "lib/apis/upload";
 import { updateUserInfo } from "lib/apis/user";
-import { IMAGE_CATEGORY_LIST, PROFILE_EDIT_PAGE_TAB_LIST } from "lib/constants";
+import { PROFILE_EDIT_PAGE_TAB_LIST } from "lib/constants";
 import Path from "lib/Path";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
@@ -17,6 +17,7 @@ import useRegisterService from "services/useRegisterService";
 import styled, { css } from "styled-components";
 import { media } from "styles/media";
 import { Gender } from "types/user";
+import { IMAGE_CATEGORY_LIST } from "types/vote";
 
 function ProfileEditPage() {
   const router = useRouter();

apps/web/app/page.tsx

@@ -3,7 +3,6 @@
 import { useToggle, useOutsideClick } from "@chooz/hooks";
 import { Button, FloatModalTemplate } from "@chooz/ui";
 import { media } from "@chooz/ui/styles/media";
-import Header from "components/common/header/Header";
 import AddDetailModalContainer from "components/select/AddDetailModalContainer";
 import useFlipAnimation, { Drag } from "components/select/hooks/useFlipAnimation";
 import SelectAB from "components/select/SelectAB";
@@ -38,7 +37,7 @@ function SelectPage() {
   if (isError) return <PageInner drag={drag}>에러</PageInner>;
   if (!data) return <PageInner drag={drag}>데이터 없음</PageInner>;
 
-  const { modifiedDate, title, imageA, imageB, titleA, titleB, detail, category } =
+  const { modifiedDate, title, imageA, imageB, titleA, titleB, detail, category, countVoted } =
     mainVoteList[nowShowing] || {};
   return (
     <>
@@ -56,6 +55,7 @@ function SelectPage() {
             targetEl={targetEl}
             title={title}
             date={modifiedDate}
+            countVoted={countVoted}
           />
 
           <SelectAB
@@ -66,7 +66,9 @@ function SelectPage() {
             select={select.choice}
             onMutateVoting={onMutateVoting}
           />
-          <AddDescriptionButton>﹢</AddDescriptionButton>
+          <AddDescriptionButton>
+            <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}`}>
               <DetailButtonInner>
@@ -82,7 +84,6 @@ function SelectPage() {
       {params.get("isSuccess") && (
         <FloatModalTemplate
           onToggleModal={() => {
-            // 메인페이지 url 변경할때 같이 수정해야함
             router.push(`${Path.MAIN_PAGE}?isSuccess=`);
           }}
         >

apps/web/app/search/[keyword]/page.tsx

@@ -1,10 +1,9 @@
 "use client";
 
-import { VoteList } from "components/vote-list";
-
 import useInfiniteSearchResultService from "services/useInfiniteSearchResultService";
 import styled from "styled-components";
 import { media } from "styles/media";
+import { VoteList } from "../components";
 
 function SearchResultPage({ params }: { params: { keyword: string } }) {
   const { voteList, subscribe } = useInfiniteSearchResultService({

apps/web/app/search/components/CategoryContainer.tsx

@@ -1,23 +1,16 @@
 import { media } from "@chooz/ui/styles/media";
 import styled from "styled-components";
-import { IMAGE_CATEGORY_LIST } from "lib/constants";
 import { useState } from "react";
-import { CategoryNameType } from "types/vote";
+import { CategoryNameType, IMAGE_CATEGORY_LIST } from "types/vote";
 import CategoryItem from "./CategoryItem";
 
 // @Todo 공통 컴포넌트로 묶을 수 있다면 묶기
 function CategoryContainer() {
   const [selectedCategory, setSelectedCategory] = useState<CategoryNameType | null>(null);
 
-  const onChangeSelectedCategory = (category: CategoryNameType | null) => {
-    setSelectedCategory(category);
-  };
-
   const onClickCategory = (e: React.MouseEvent<HTMLButtonElement>) => {
     const category = e.currentTarget.name as CategoryNameType;
-    selectedCategory === category
-      ? onChangeSelectedCategory(null)
-      : onChangeSelectedCategory(category);
+    setSelectedCategory(category);
   };
   return (
     <CategorySection>

apps/web/components/vote-list/CategorySelect.tsx → apps/web/app/search/components/CategorySelect.tsx

@@ -1,8 +1,8 @@
-import { CATEGORY_LIST } from "lib/constants";
 import { Select } from "@chooz/ui";
 import styled from "styled-components";
 import { media } from "styles/media";
 import { useToggle } from "@chooz/hooks";
+import { SELECT_BOX_CATEGORY_LIST } from "types/vote";
 
 interface Props {
   categoryOption: string;
@@ -16,7 +16,7 @@ function CategorySelect({ categoryOption, onChangeCategoryOption }: Props) {
       <Select
         defaultValue={categoryOption}
         onChangeSelectedOption={onChangeCategoryOption}
-        options={CATEGORY_LIST}
+        options={SELECT_BOX_CATEGORY_LIST}
         isOpen={isOpen}
         onToggleOpen={onToggleOpen}
       >

apps/web/components/vote-list/VoteItem.tsx → apps/web/app/search/components/VoteItem.tsx

@@ -5,64 +5,69 @@ import NumberOfSolver from "components/common/NumberOfSolver";
 import TargetMessage from "components/common/TargetMessage";
 import { timeDataProcessing } from "lib/utils/timeDataProcessing";
 import Image from "next/image";
+import Link from "next/link";
 import { AIcon, BIcon, BookmarkIcon } from "public/icons";
 import styled, { css } from "styled-components";
 import { Vote } from "types/vote";
+import Path from "lib/Path";
 
 interface Props {
   vote: Vote;
 }
 
 function VoteItem({ vote }: Props) {
-  const { imageA, imageB, titleA, titleB, title, modifiedDate, countVoted } = vote;
+  const { voteId, imageA, imageB, titleA, titleB, title, modifiedDate, countVoted } = vote;
 
   // @Todo Image에 sizes와 priority 추가
   return (
-    <Container>
-      <ABImage>
-        {imageA ? (
-          <ImageWrapper>
-            <Image
-              alt="left image"
-              src={imageA}
-              fill
-              style={{ borderRadius: "8px 0 0 8px", objectFit: "cover" }}
-            />
-          </ImageWrapper>
-        ) : (
-          <AItem>
-            <AIcon />
-            <ItemTitle>{titleA}</ItemTitle>
-          </AItem>
-        )}
-        {imageB ? (
-          <ImageWrapper>
-            <Image
-              alt="right image"
-              src={imageB}
-              fill
-              style={{ borderRadius: "0 8px 8px 0", objectFit: "cover" }}
-            />
-          </ImageWrapper>
-        ) : (
-          <BItem>
-            <BIcon />
-            <ItemTitle>{titleB}</ItemTitle>
-          </BItem>
-        )}
-      </ABImage>
-      <VoteContainer>
-        <MessageBox>
-          <TargetMessage>이 고민을 찾고있는 분이에요!</TargetMessage>
-          <NumberOfSolver>🔥{countVoted}명 해결중!</NumberOfSolver>
-        </MessageBox>
-        <BookmarkIconStyled />
-      </VoteContainer>
-      <TitleContainer>
-        <VoteTitle>{title}</VoteTitle>
-        <VoteModifiedDate>{timeDataProcessing(modifiedDate)}</VoteModifiedDate>
-      </TitleContainer>
-    </Container>
+    <Link href={`${Path.VOTE_DETAIL_PAGE}${voteId}`}>
+      <Container>
+        <ABImage>
+          <GradientBox />
+          {imageA ? (
+            <ImageWrapper>
+              <Image
+                alt="left image"
+                src={imageA}
+                fill
+                style={{ borderRadius: "8px 0 0 8px", objectFit: "cover" }}
+              />
+            </ImageWrapper>
+          ) : (
+            <AItem>
+              <AIcon />
+              <ItemTitle>{titleA}</ItemTitle>
+            </AItem>
+          )}
+          {imageB ? (
+            <ImageWrapper>
+              <Image
+                alt="right image"
+                src={imageB}
+                fill
+                style={{ borderRadius: "0 8px 8px 0", objectFit: "cover" }}
+              />
+            </ImageWrapper>
+          ) : (
+            <BItem>
+              <BIcon />
+              <ItemTitle>{titleB}</ItemTitle>
+            </BItem>
+          )}
+        </ABImage>
+        <VoteContainer>
+          <MessageBox>
+            <TargetMessage>이 고민을 찾고있는 분이에요!</TargetMessage>
+            <NumberOfSolver>🔥{countVoted}명 해결중!</NumberOfSolver>
+          </MessageBox>
+          <BookmarkIconStyled />
+        </VoteContainer>
+        <TitleContainer>
+          <VoteTitle>{title}</VoteTitle>
+          <VoteModifiedDate>{timeDataProcessing(modifiedDate)}</VoteModifiedDate>
+        </TitleContainer>
+      </Container>
+    </Link>
   );
 }
 
@@ -71,19 +76,22 @@ const Container = styled.div`
   ${({ theme }) => theme.textStyle.Font_Minimum}
 `;
 
+const GradientBox = styled.div`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  border-radius: 0 0 8px 8px;
+  z-index: 1;
+  background: linear-gradient(to top, rgba(17, 17, 17, 0.6) 0%, rgba(17, 17, 17, 0) 50%);
+`;
+
 const ABImage = styled.div`
   position: relative;
   display: flex;
   max-width: 560px;
   margin: 0 auto;
-  /*  @todo 음영효과 추가
-  ::after {
-    content: "";
-    z-index: 99;
-    background-image: linear-gradient(to top, rgba(17, 17, 17, 0.6) 50%, rgba(17, 17, 17, 0) 18%);
-    width: 100px;
-    height: 100px;
-  } */
 `;
 
 const ImageWrapper = styled.div`
@@ -99,6 +107,7 @@ const Item = styled.div`
   flex-direction: column;
   padding: 15% 0;
   flex-grow: 1;
+  aspect-ratio: 1;
 `;
 
 const AItem = styled(Item)`
@@ -130,6 +139,7 @@ const VoteContainer = styled.div`
   margin-top: 8px;
   max-width: 560px;
   margin: 8px auto 0;
+  z-index: 2;
   ${media.medium} {
     width: 521px;
     margin: 0 auto;
@@ -154,6 +164,7 @@ const TitleContainer = styled.div`
   justify-content: space-between;
   max-width: 560px;
   margin: 0 auto;
+  z-index: 2;
   ${media.medium} {
     width: 528px;
     margin: 0 auto;

apps/web/app/search/components/index.ts

@@ -0,0 +1,9 @@
+export { default as VoteItem } from "./VoteItem";
+export { default as VoteList } from "./VoteList";
+export { default as CategorySelect } from "./CategorySelect";
+export { default as SortSelect } from "./SortSelect";
+export { default as CategoryContainer } from "./CategoryContainer";
+export { default as CategoryItem } from "./CategoryItem";
+export { default as SearchContainer } from "./SearchContainer";
+export { default as SearchInput } from "./SearchInput";
+export { default as SearchRecommendation } from "./SearchRecommendation";

apps/web/app/search/list/[category]/page.tsx

@@ -1,21 +1,25 @@
 "use client";
 
-import { CategorySelect, SortSelect, VoteList } from "components/vote-list";
+import { CategorySelect, SortSelect, VoteList } from "app/search/components";
 import { SORT_LIST } from "lib/constants";
 import { useState } from "react";
 import useInfiniteVoteListService from "services/useInfiniteVoteListService";
 import styled from "styled-components";
 import { media } from "styles/media";
 import { CategoryNameType } from "types/vote";
 
-function CategoryPage() {
-  const [categoryOption, setCategoryOption] = useState("");
-
-  // @Todo option에 type 지정해주면 select 컴포넌트에서 충돌 발생
+function CategoryPage({ params }: { params: { category: string } }) {
+  const [categoryOption, setCategoryOption] = useState(params.category);
+  /**
+   * @Todo option에 type 지정해주면 select 컴포넌트에서 충돌 발생
+   * @Todo Select 컴포넌트에서 string로 타입을 지정해주니 CategoryNameType를 사용할 수 없음
+   */
   const onChangeCategoryOption = (value: string) => {
     setCategoryOption(value);
   };
-
+  /**
+   * @Todo SORT_LIST 이름만 보고 알기 힘들다.
+   **/
   const [sortOption, setSortOption] = useState(SORT_LIST[0].value);
 
   const onChangeSortOption = (value: string) => {
@@ -24,7 +28,7 @@ function CategoryPage() {
 
   const { voteList, subscribe } = useInfiniteVoteListService({
     size: 3,
-    sortBy: "ByTime",
+    sortBy: sortOption,
     category: categoryOption as CategoryNameType, // @Todo 강제 형변환하지 않고 useSelect에 제네릭으로 넘겨주게 하기
   });