Merge pull request #54 from team-pofo/fix/#53/convenience

Fix/#53/convenience
team-pofo · Jan 16, 2025 · ef5ce18 · ef5ce18
2 parents a6d16b8 + 23c8c7e
commit ef5ce18
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 85 deletions.
diff --git a/src/components/Home/HomeSearch.tsx b/src/components/Home/HomeSearch.tsx
@@ -45,12 +45,14 @@ export default function SearchCardContainer({
   handleSearchProject,
 }: handleSearchProjectProps) {
   return (
-    <Styles.SearchContainer>
-      <Styles.SearchCardContainerName>
-        <SearchName />
-        <SearchBtn handleSearchProject={handleSearchProject} />
-      </Styles.SearchCardContainerName>
-      <SelectStackType />
-    </Styles.SearchContainer>
+    <Styles.SearchFixedContainer>
+      <Styles.SearchContainer>
+        <Styles.SearchCardContainerName>
+          <SearchName />
+          <SearchBtn handleSearchProject={handleSearchProject} />
+        </Styles.SearchCardContainerName>
+        <SelectStackType />
+      </Styles.SearchContainer>
+    </Styles.SearchFixedContainer>
   );
 }
diff --git a/src/components/Home/styles.ts b/src/components/Home/styles.ts
@@ -3,6 +3,15 @@ import styled from "@emotion/styled";
 const grey = "#b2c0cc";
 const black = "#09060B";
 
+export const SearchFixedContainer = styled.div`
+  background-color: #fff;
+  position: sticky;
+  top: 80px;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+`;
+
 export const SearchContainer = styled.div`
   max-width: 800px;
   align-items: center;

diff --git a/src/components/SelectStackType/SelectStack.tsx b/src/components/SelectStackType/SelectStack.tsx
@@ -1,22 +1,25 @@
 import { useSelectStacks } from "@/stores/selectStackType/selectStacksStore";
-import { useSelectTypes } from "@/stores/selectStackType/selectTypesStore";
 import * as Style from "./styles";
 import { useEffect } from "react";
 import useDebounce from "./debounce";
 
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
 export default function SelectStack() {
   const {
-    stackToggle,
     stacks,
     searchWord,
     searching,
     selectedStacks,
-    clickStackToggle,
+
     updateSearchWord,
     inputStack,
     clickStack,
   } = useSelectStacks();
-  const { setVisibilityTypeToggle } = useSelectTypes();
 
   const debouncedSearchStackWord = useDebounce(searchWord, 500);
   useEffect(() => {
@@ -25,48 +28,52 @@ export default function SelectStack() {
 
   return (
     <Style.SelectStackTypeCard>
-      <Style.SelectStackTypeBtn
-        onClick={() => {
-          clickStackToggle();
-          setVisibilityTypeToggle(false);
-        }}
-      >
-        기술 스택
-      </Style.SelectStackTypeBtn>
-
-      {stackToggle && (
-        <Style.SelectStackTypeDropdown>
-          <Style.SelectStackNameInput
-            type="text"
-            placeholder="검색"
-            value={searchWord}
-            onChange={(input) => {
-              updateSearchWord(input.target.value);
-            }}
-          ></Style.SelectStackNameInput>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Style.SelectStackTypeBtn>기술 스택</Style.SelectStackTypeBtn>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          style={{
+            width: "var(--radix-dropdown-menu-trigger-width)",
+            border: "none",
+            padding: 0,
+            marginTop: 0,
+            paddingTop: 10,
+          }}
+        >
+          <Style.SelectStackTypeDropdown>
+            <Style.SelectStackNameInput
+              type="text"
+              placeholder="검색"
+              value={searchWord}
+              onChange={(input) => {
+                updateSearchWord(input.target.value);
+              }}
+            ></Style.SelectStackNameInput>
 
-          {searching && stacks.length === 0 && (
-            <p style={{ marginLeft: "10px" }}>검색 결과가 없습니다</p>
-          )}
-          {!searching && (
-            <p style={{ marginLeft: "10px" }}>검색어를 입력해주세요</p>
-          )}
+            {searching && stacks.length === 0 && (
+              <p style={{ marginLeft: "10px" }}>검색 결과가 없습니다</p>
+            )}
+            {!searching && (
+              <p style={{ marginLeft: "10px" }}>검색어를 입력해주세요</p>
+            )}
 
-          {stacks.map((stack, index) => (
-            <div key={index}>
-              <Style.SelectStackTypeLabel>
-                <Style.SelectStackTypeCheckobx
-                  style={{ padding: "10px" }}
-                  type="checkbox"
-                  checked={selectedStacks.includes(stack)}
-                  onChange={() => clickStack(stack)}
-                ></Style.SelectStackTypeCheckobx>
-                {stack}
-              </Style.SelectStackTypeLabel>
-            </div>
-          ))}
-        </Style.SelectStackTypeDropdown>
-      )}
+            {stacks.map((stack, index) => (
+              <div key={index}>
+                <Style.SelectStackTypeLabel>
+                  <Style.SelectStackTypeCheckobx
+                    style={{ padding: "10px" }}
+                    type="checkbox"
+                    checked={selectedStacks.includes(stack)}
+                    onChange={() => clickStack(stack)}
+                  ></Style.SelectStackTypeCheckobx>
+                  {stack}
+                </Style.SelectStackTypeLabel>
+              </div>
+            ))}
+          </Style.SelectStackTypeDropdown>
+        </DropdownMenuContent>
+      </DropdownMenu>
     </Style.SelectStackTypeCard>
   );
 }
diff --git a/src/components/SelectStackType/SelectType.tsx b/src/components/SelectStackType/SelectType.tsx
@@ -1,40 +1,46 @@
 import * as Style from "./styles";
 import { useSelectTypes } from "@/stores/selectStackType/selectTypesStore";
-import { useSelectStacks } from "@/stores/selectStackType/selectStacksStore";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 export default function SelectType() {
-  const { typeToggle, types, selectedTypes, clickTypeToggle, clickType } =
-    useSelectTypes();
-  const { setVisibilityStackToggle } = useSelectStacks();
+  const { types, selectedTypes, clickType } = useSelectTypes();
 
   return (
     <Style.SelectStackTypeCard>
-      <Style.SelectStackTypeBtn
-        onClick={() => {
-          clickTypeToggle();
-          setVisibilityStackToggle(false);
-        }}
-      >
-        프로젝트 구분
-      </Style.SelectStackTypeBtn>
-
-      {typeToggle && (
-        <Style.SelectStackTypeDropdown>
-          {types.map((type, index) => (
-            <div key={index}>
-              <Style.SelectStackTypeLabel>
-                <Style.SelectStackTypeCheckobx
-                  style={{ padding: "10px" }}
-                  type="checkbox"
-                  checked={selectedTypes.includes(type)}
-                  onChange={() => clickType(type)}
-                ></Style.SelectStackTypeCheckobx>
-                {type}
-              </Style.SelectStackTypeLabel>
-            </div>
-          ))}
-        </Style.SelectStackTypeDropdown>
-      )}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Style.SelectStackTypeBtn>카테고리</Style.SelectStackTypeBtn>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          style={{
+            width: "var(--radix-dropdown-menu-trigger-width)",
+            border: "none",
+            padding: 0,
+            marginTop: 0,
+            paddingTop: 10,
+          }}
+        >
+          <Style.SelectStackTypeDropdown>
+            {types.map((type, index) => (
+              <div key={index}>
+                <Style.SelectStackTypeLabel>
+                  <Style.SelectStackTypeCheckobx
+                    style={{ padding: "10px" }}
+                    type="checkbox"
+                    checked={selectedTypes.includes(type)}
+                    onChange={() => clickType(type)}
+                  ></Style.SelectStackTypeCheckobx>
+                  {type}
+                </Style.SelectStackTypeLabel>
+              </div>
+            ))}
+          </Style.SelectStackTypeDropdown>
+        </DropdownMenuContent>
+      </DropdownMenu>
     </Style.SelectStackTypeCard>
   );
 }
diff --git a/src/components/SelectStackType/styles.ts b/src/components/SelectStackType/styles.ts
@@ -34,24 +34,21 @@ export const SelectStackTypeBtn = styled.button`
   width: 100%;
   font-size: 20px;
   cursor: pointer;
-
   &:hover {
     background: rgba(0, 0, 0, 0.1);
   }
 `;
 
 export const SelectStackTypeDropdown = styled.div`
   z-index: 10;
-  margin-top: 10px;
   border: 2px solid ${grey};
   border-radius: 5px;
-  border-width: 2px;
   font-size: 20px;
   padding: 10px;
   height: 400px;
-  overflow-y: scroll;
   background-color: white;
   position: relative;
+  overflow-y: scroll;
   &::-webkit-scrollbar {
     display: none;
   }