release-1.1.5

apps/web/app/register/page.tsx

@@ -2,10 +2,10 @@
 
 import { AgeSelection, GenderSelection, MBTISelection, ProgressBar } from "components";
 import WarningSmallModal from "components/register/WarningSmallModal";
-import useToggle from "hooks/useToggle";
 import useRegisterService from "services/useRegisterService";
 import styled from "styled-components";
 import { media } from "styles/media";
+import { useToggle } from "@chooz/hooks";
 
 function RegisterPage() {
   const {

apps/web/app/select/[id]/detail/page.tsx

@@ -1,13 +1,13 @@
 "use client";
 
+import { useToggle } from "@chooz/hooks";
 import { media } from "@chooz/ui/styles/media";
 import CommentContainer from "components/detail/CommentContainer";
 import DetailAB from "components/detail/DetailAB";
 import FilterBar from "components/detail/FilterBar";
 import VoteAnalyzeBar from "components/detail/VoteAnalyzeBar";
 import VoteToolbar from "components/select/VoteToolbar";
 import useOutSideClick from "hooks/useOutsideClick";
-import useToggle from "hooks/useToggle";
 import { Eximg1, Eximg2 } from "public/images";
 import React, { useState } from "react";
 import styled from "styled-components";

apps/web/app/select/[id]/page.tsx

@@ -1,13 +1,13 @@
 "use client";
 
+import { useToggle } from "@chooz/hooks";
 import { Button, FloatModalTemplate } from "@chooz/ui";
 import { media } from "@chooz/ui/styles/media";
 import AddDetailModal from "components/select/AddDetailModal";
 import useFlipAnimation, { Drag } from "components/select/hooks/useFlipAnimation";
 import SelectAB from "components/select/SelectAB";
 import VoteToolbar from "components/select/VoteToolbar";
 import useOutSideClick from "hooks/useOutsideClick";
-import useToggle from "hooks/useToggle";
 import Image from "next/image";
 import Link from "next/link";
 import { AmplifyIcon } from "public/icons";

apps/web/app/voteList/page.tsx

@@ -1,33 +1,37 @@
 "use client";
 
-import { VoteList } from "components/voteList";
-import { CATEGORY_LIST } from "lib/constants";
-import { FilterIcon } from "public/icons";
+import { CategorySelectBox, SortSelectBox, VoteList } from "components/voteList";
+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 VoteListPage() {
   const { voteList, subscribe } = useInfiniteVoteListService({
     size: 3,
     sortBy: "ByTime",
   });
+  const [selectedCategory, setSelectedCategory] = useState<CategoryNameType>();
+  const onChangeCategory = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelectedCategory(e.target.value as CategoryNameType);
+  };
+  console.log(voteList);
 
   return (
     <PageWrapper>
       <PageInner>
-        <FilterContainer>
-          <CategorySelect>
-            {CATEGORY_LIST.map(({ id, name }) => (
-              <Option key={id}>{name}</Option>
-            ))}
-          </CategorySelect>
-          <FilterBox>
-            <FilterIcon />
-            필터
-          </FilterBox>
-        </FilterContainer>
-        <VoteList voteList={voteList} />
+        <FilterSection>
+          <CategorySelectBox />
+          <RightFilterContainer>
+            <SortSelectBox />
+            <div>
+              <input type="checkbox" />
+              선택만 보기
+            </div>
+          </RightFilterContainer>
+        </FilterSection>
+        <VoteList voteList={voteList} selectedCategory={selectedCategory} />
         <div ref={subscribe} />
       </PageInner>
     </PageWrapper>
@@ -49,15 +53,16 @@ const PageInner = styled.div`
   }
 `;
 
-const FilterContainer = styled.div`
+const FilterSection = styled.div`
   display: flex;
   justify-content: space-between;
 `;
 
-const CategorySelect = styled.select``;
-const Option = styled.option``;
-const FilterBox = styled.div`
+const RightFilterContainer = styled.div`
   display: flex;
+  align-items: center;
+  width: 183px;
+  justify-content: space-between;
 `;
 
 export default VoteListPage;

apps/web/components/post/ImageTitleSection.tsx

@@ -117,12 +117,12 @@ const Container = styled.div`
 const QuestionText = styled.div`
   font-size: 20px;
   font-weight: 700;
-  padding-bottom: 4px;
+  padding-bottom: 8px;
 `;
 
 const SubText = styled.div`
   font-size: 16px;
-  color: ${({ theme }) => theme.palette.border.dark};
+  color: ${({ theme }) => theme.palette.ink.base};
 `;
 
 const InvisibleInput = styled.input`
@@ -132,7 +132,7 @@ const InvisibleInput = styled.input`
 const ImageWrapper = styled.div`
   gap: 12px;
   overflow: hidden;
-  margin-top: 32px;
+  margin-top: 16px;
   width: 100%;
   background: ${({ theme }) => theme.palette.background.hard};
   border-radius: 8px;

apps/web/components/voteList/CategorySelectBox.tsx

@@ -0,0 +1,35 @@
+import { Option, OptionList, SelectButton, useSelect } from "@chooz/ui";
+import useOutSideClick from "hooks/useOutsideClick";
+import { CATEGORY_LIST } from "lib/constants";
+import styled from "styled-components";
+
+// @todo 추후 context api로 변경
+// @todo 재사용 가능한 컴포넌트로 만들기
+function CategorySelectBox() {
+  const { isOpen, onChangeOpen, option, onChangeOption } = useSelect("전체");
+  const { targetEl } = useOutSideClick<HTMLDivElement>(isOpen, onChangeOpen);
+  return (
+    <SelectBox ref={targetEl}>
+      <SelectButton onChangeOpen={onChangeOpen}>
+        <>
+          {option}
+          <span>▴</span>
+        </>
+      </SelectButton>
+      {isOpen ? (
+        <OptionList>
+          {CATEGORY_LIST.map(
+            ({ name }) =>
+              option !== name && (
+                <Option key={`option_list_${name}`} name={name} onChangeOption={onChangeOption} />
+              ),
+          )}
+        </OptionList>
+      ) : null}
+    </SelectBox>
+  );
+}
+
+const SelectBox = styled.div``;
+
+export default CategorySelectBox;

apps/web/components/voteList/SortSelectBox.tsx

@@ -0,0 +1,36 @@
+import { Option, OptionList, SelectButton, useSelect } from "@chooz/ui";
+import useOutSideClick from "hooks/useOutsideClick";
+import { SORT_LIST } from "lib/constants";
+import { SelectDropdownIndicator } from "public/icons";
+import styled from "styled-components";
+
+function SortSelectBox() {
+  const { isOpen, onChangeOpen, option, onChangeOption } = useSelect("최신순");
+  const { targetEl } = useOutSideClick<HTMLDivElement>(isOpen, onChangeOpen);
+  return (
+    <SelectBox ref={targetEl}>
+      <SelectButton onChangeOpen={onChangeOpen}>
+        <>
+          {option}
+          <SelectDropdownIndicator />
+        </>
+      </SelectButton>
+      {isOpen ? (
+        <OptionList>
+          {SORT_LIST.map(
+            ({ name }) =>
+              option !== name && (
+                <Option key={`sort_list_${name}`} name={name} onChangeOption={onChangeOption} />
+              ),
+          )}
+        </OptionList>
+      ) : null}
+    </SelectBox>
+  );
+}
+
+const SelectBox = styled.div`
+  border: solid 1px ${({ theme }) => theme.palette.border.base}; ;
+`;
+
+export default SortSelectBox;

apps/web/components/voteList/index.ts

@@ -1,2 +1,4 @@
 export { default as VoteItem } from "./VoteItem";
 export { default as VoteList } from "./VoteList";
+export { default as CategorySelectBox } from "./CategorySelectBox";
+export { default as SortSelectBox } from "./SortSelectBox";

apps/web/lib/constants.ts

@@ -16,12 +16,17 @@ export const NAVER_LOGIN_REDIRECT_URL =
 
 // export const CATEGORY_NAMES = ["음식", "직업", "연애", "패션", "재미", "기타"];
 export const CATEGORY_LIST = [
+  { id: "NULL", name: "전체" },
   { id: "FOODS", name: "음식" },
   { id: "CAREER", name: "직업" },
   { id: "LOVE", name: "연애" },
   { id: "FASHION", name: "패션" },
   { id: "INTEREST", name: "재미" },
-  { id: "NULL", name: "기타" },
+];
+
+export const SORT_LIST = [
+  { id: "new", name: "최신순" },
+  { id: "popular", name: "인기순" },
 ];
 
 export const AGE_LIST = [

apps/web/next.config.js

@@ -1,5 +1,5 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const withTM = require("next-transpile-modules")(["@chooz/ui"]);
+const withTM = require("next-transpile-modules")(["@chooz/ui", "@chooz/hooks"]);
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {

apps/web/package.json

@@ -10,6 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@chooz/hooks": "workspace:*",
     "@chooz/ui": "workspace:*",
     "@next/font": "^13.1.6",
     "@tanstack/react-query": "^4.20.4",

apps/web/public/icons/index.ts

@@ -1,10 +1,10 @@
 export { default as WarningIcon } from "./WarningIcon.svg";
-export { default as SaveIcon } from "./saveIcon.png";
 export { default as HambergerIcon } from "./hambergerIcon.png";
-export { default as AddIcon } from "./addIcon.png";
 export { default as KakaoIcon } from "./KakaoIcon.svg";
 export { default as NaverIcon } from "./NaverIcon.svg";
-export { default as FilterIcon } from "./FilterIcon.svg";
 export { default as BookmarkIcon } from "./BookmarkIcon.svg";
+export { default as SelectDropdownIndicator } from "./SelectDropdownIndicator.svg";
 export { default as AmplifyIcon } from "./amplifyIcon.png";
+export { default as AddIcon } from "./addIcon.png";
+export { default as SaveIcon } from "./saveIcon.png";
 export { default as Reduction } from "./Reduction.png";

apps/web/tsconfig.json

@@ -30,6 +30,7 @@
     "**/*.json",
     "../../package/ui/styles/theme.ts",
     "../../package/ui/styles/transitions.ts",
-    ".next/types/**/*.ts"
+    ".next/types/**/*.ts",
+    "../../packages/ui/components/selectBox/hooks/useSelect.ts"
   ]
 }

packages/hooks/README.md

@@ -0,0 +1 @@
+# hooks

packages/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./src";

packages/hooks/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@chooz/hooks",
+  "packageManager": "[email protected]",
+  "description": "",
+  "author": "",
+  "license": "ISC",
+  "version": "0.1.0",
+  "main": "index.ts",
+  "dependencies": {
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18",
+    "typescript": "^4.9.4"
+  }
+}

packages/hooks/src/index.ts

@@ -0,0 +1 @@
+export { default as useToggle } from "./useToggle";

packages/hooks/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "target": "esnext",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "module": "esnext",
+    "jsx": "react-jsx",
+    "noEmit": false,
+    "incremental": true,
+    "declaration": true,
+    "declarationMap": true
+  },
+  "exclude": ["**/node_modules", "**/.*/", "dist", "build"]
+}

packages/ui/components/index.ts

@@ -6,3 +6,4 @@ export { default as ModalTemplate } from "./modal/ModalTemplate";
 export { default as Input } from "./input/Input";
 export { default as FloatModalTemplate } from "./modal/FloatModalTemplate";
 export { default as DivideLine } from "./divide/DivideLine";
+export * from "./selectBox";