From f5a5037f5bcbe95003ed3ba23cb5eb8194a1dfd0 Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Thu, 3 Oct 2024 14:17:49 +0900
Subject: [PATCH] feat: support dropdown prefill

---
 public/assets/check-button.svg              |  5 +++++
 public/assets/check.svg                     |  3 +++
 src/components/Dropdown/Checkbox.tsx        | 19 +++++++------------
 src/components/Dropdown/Dropdown.tsx        | 10 ++++++++++
 src/containers/Explore/ExploreContainer.tsx |  1 +
 5 files changed, 26 insertions(+), 12 deletions(-)
 create mode 100644 public/assets/check-button.svg
 create mode 100644 public/assets/check.svg

diff --git a/public/assets/check-button.svg b/public/assets/check-button.svg
new file mode 100644
index 0000000..b4fa313
--- /dev/null
+++ b/public/assets/check-button.svg
@@ -0,0 +1,5 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="white"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M12.9813 16.5L10.6112 14.1299L11.2038 13.5374L12.9813 15.315L16.7963 11.5L17.3888 12.0925L12.9813 16.5Z" fill="black"/>
+</svg>
+    
\ No newline at end of file
diff --git a/public/assets/check.svg b/public/assets/check.svg
new file mode 100644
index 0000000..e4edc3a
--- /dev/null
+++ b/public/assets/check.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.9813 5.5L0.611237 3.12994L1.20375 2.53742L2.9813 4.31497L6.79627 0.5L7.38878 1.09252L2.9813 5.5Z" fill="black"/>
+</svg>
diff --git a/src/components/Dropdown/Checkbox.tsx b/src/components/Dropdown/Checkbox.tsx
index 7ddc7b0..a92e869 100644
--- a/src/components/Dropdown/Checkbox.tsx
+++ b/src/components/Dropdown/Checkbox.tsx
@@ -13,7 +13,9 @@ const Checkbox: React.FC<CustomCheckboxProps> = ({
 }) => (
   <Container>
     <HiddenCheckbox type="checkbox" checked={checked} onChange={onChange} />
-    <StyledCheckbox isChecked={checked} />
+    <StyledCheckbox isChecked={checked}>
+      {checked && <img src="/assets/check.svg" alt="checkmark" />}
+    </StyledCheckbox>
     <LabelText>{label}</LabelText>
   </Container>
 )
@@ -39,22 +41,15 @@ const HiddenCheckbox = styled.input`
 `
 
 const StyledCheckbox = styled.span<{ isChecked: boolean }>`
-  display: inline-block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid white;
   width: 18px;
   height: 18px;
   background-color: ${({ isChecked }) => (isChecked ? 'white' : 'black')};
-  border: 1px solid white;
   position: relative;
   margin-right: 10px;
-
-  &::after {
-    content: ${({ isChecked }) => (isChecked ? "'✓'" : "''")};
-    color: black;
-    position: absolute;
-    top: -2px;
-    left: 2px;
-    font-size: 14px;
-  }
 `
 
 const LabelText = styled.span`
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index dfe7af1..992bbd8 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -7,6 +7,7 @@ interface DropdownProps {
   options: string[]
   filterType: string
   onSelectionChange: (selectedOptions: string[], filterType: string) => void
+  prefill?: string[]
 }
 
 const Dropdown: React.FC<DropdownProps> = ({
@@ -14,11 +15,20 @@ const Dropdown: React.FC<DropdownProps> = ({
   options,
   filterType,
   onSelectionChange,
+  prefill = [],
 }) => {
   const [selectedOptions, setSelectedOptions] = useState<string[]>([])
   const [isExpanded, setIsExpanded] = useState(false)
+
   const dropdownRef = useRef<HTMLDivElement>(null)
 
+  // If prefill is provided, set the selected options to the prefill
+  useEffect(() => {
+    if (prefill?.length) {
+      setSelectedOptions(prefill)
+    }
+  }, [prefill])
+
   const handleSelect = (option: string) => {
     let newSelectedOptions = []
     if (selectedOptions.includes(option)) {
diff --git a/src/containers/Explore/ExploreContainer.tsx b/src/containers/Explore/ExploreContainer.tsx
index f607f56..5a0f76f 100644
--- a/src/containers/Explore/ExploreContainer.tsx
+++ b/src/containers/Explore/ExploreContainer.tsx
@@ -74,6 +74,7 @@ const ExploreSection: React.FC<ExploreSectionProps> = () => {
           options={ARCHETYPE}
           onSelectionChange={handleFilterChange}
           filterType="archetype"
+          prefill={ARCHETYPE}
         />
         <Dropdown
           title="Comp"