Fix/#44: 자유 칩 컴포넌트 수정 및 체크박스 이미지 경로 수정

src/assets/svgs/Union.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+
+const SvgUnion = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={10} height={8} fill="none" {...props}>
+    <path
+      fill="#fff"
+      fillRule="evenodd"
+      d="M8.95 1.514A.75.75 0 0 0 7.73.642l-3.58 5.01-1.889-2.52a.75.75 0 1 0-1.2.9l2.495 3.326a.75.75 0 0 0 .247.22.75.75 0 0 0 .973-.22z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgUnion;

src/assets/svgs/index.ts

@@ -16,3 +16,4 @@ export { default as ImgModalcheck } from './ImgModalcheck';
 export { default as ImgModalexit } from './ImgModalexit';
 export { default as ImgModalexit2 } from './ImgModalexit2';
 export { default as ImgUploadWhite48 } from './ImgUploadWhite48';
+export { default as Union } from './Union';

src/components/common/banner/ToolListBanner.styled.ts

@@ -111,8 +111,8 @@ export const CheckboxLabel = styled.label`
 
 export const CheckboxInput = styled.input`
   position: relative;
-  width: 1.8rem;
-  height: 1.8rem;
+  width: 2rem;
+  height: 2rem;
   margin: 0;
 
   cursor: pointer;
@@ -125,20 +125,6 @@ export const CheckboxInput = styled.input`
     background-color: ${({ theme }) => theme.colors.iris1};
     border: 1px solid ${({ theme }) => theme.colors.iris1};
   }
-
-  &:checked::before {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 0.8178rem;
-    height: 0.7344rem;
-
-    background-image: url('/public/svgs/union.svg');
-    background-position: center;
-    transform: translate(-50%, -50%);
-
-    content: '';
-  }
 `;
 
 export const IconContainer = styled.div`
@@ -147,7 +133,6 @@ export const IconContainer = styled.div`
   justify-content: center;
   width: 2.4rem;
   height: 2.4rem;
-  overflow: hidden;
 
   border-radius: 0.4rem;
 `;

src/components/common/banner/ToolListBanner.tsx

@@ -1,4 +1,4 @@
-import { IcChevronDownBlack16 } from '@assets/svgs';
+import { IcChevronDownBlack16, IcInstaGray20, Union } from '@assets/svgs';
 import React, { useState } from 'react';
 
 import * as S from './ToolListBanner.styled';
@@ -36,10 +36,6 @@ type ToolSelectState = {
   isFreeChecked: boolean;
 };
 
-type HandleCategoryClick = (category: string) => void;
-type HandleToolClick = (toolName: string) => void;
-type HandleFreeCheck = (event: React.ChangeEvent<HTMLInputElement>) => void;
-
 const tools: Tool[] = [
   {
     toolId: 1,
@@ -67,48 +63,63 @@ const tools: Tool[] = [
   },
 ];
 
-const ToolSelect = () => {
-  const [state, setState] = useState<ToolSelectState>({
+const ToolListBanner = () => {
+  const [toolState, setToolState] = useState<ToolSelectState>({
     selectedCategory: null,
     selectedTool: null,
     isFreeChecked: false,
   });
 
+  const { selectedCategory, selectedTool, isFreeChecked } = toolState;
+
   const clearSelectedTool = () => {
-    setState((prev) => ({ ...prev, selectedTool: null }));
+    setToolState((prev) => ({ ...prev, selectedTool: null }));
   };
 
-  const handleCategoryClick: HandleCategoryClick = (category) => {
-    setState((prev) => ({
+  const handleCategoryClick = (category: string) => {
+    setToolState((prev) => ({
       ...prev,
       selectedCategory: prev.selectedCategory === category ? null : category,
     }));
   };
 
-  const handleToolClick: HandleToolClick = (toolName) => {
-    setState((prev) => ({ ...prev, selectedTool: toolName }));
-    // fetchPostList();
+  const handleToolClick = (toolName: string) => {
+    setToolState((prev) => ({
+      ...prev,
+      selectedTool: toolName,
+      isFreeChecked: toolName === '자유' ? true : false,
+    }));
   };
 
-  const handleFreeCheck: HandleFreeCheck = (event) => {
-    setState((prev) => ({ ...prev, isFreeChecked: event.target.checked }));
+  const handleFreeCheck = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const isChecked = event.target.checked;
+    setToolState((prev) => ({
+      ...prev,
+      isFreeChecked: isChecked,
+      selectedTool: isChecked ? '자유' : null,
+      selectedCategory: isChecked ? '자유' : null,
+    }));
   };
 
   return (
     <S.Container>
       <S.TitleBox>
         <S.Title>툴 선택</S.Title>
         <S.Subtitle>
-          {state.selectedTool ? (
+          {selectedTool ? (
             <Chip size="medium" stroke={true}>
               <Chip.RectContainer>
-                <Chip.Icon
-                  src={tools.find((tool) => tool.toolName === state.selectedTool)?.toolLogo || '/svgs/default_logo.svg'}
-                  alt="Custom Icon"
-                  width={2}
-                  height={2}
-                />
-                <Chip.Label>{state.selectedTool}</Chip.Label>
+                {selectedTool === '자유' ? (
+                  <IcInstaGray20 width={20} height={20} />
+                ) : (
+                  <Chip.Icon
+                    src={tools.find((tool) => tool.toolName === selectedTool)?.toolLogo || '/svgs/default_logo.svg'}
+                    alt="Custom Icon"
+                    width={2}
+                    height={2}
+                  />
+                )}
+                <Chip.Label>{selectedTool}</Chip.Label>
                 <button onClick={clearSelectedTool} style={{ display: 'flex', cursor: 'pointer' }}>
                   <Chip.CloseIcon width={20} height={20} />
                 </button>
@@ -126,25 +137,37 @@ const ToolSelect = () => {
               <S.CategoryHeader>
                 <S.CheckboxLabel>
                   <span>{category}</span>
-                  <S.CheckboxInput type="checkbox" checked={state.isFreeChecked} onChange={handleFreeCheck} />
+                  <div style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
+                    <S.CheckboxInput type="checkbox" checked={isFreeChecked} onChange={handleFreeCheck} />
+                    {isFreeChecked && (
+                      <Union
+                        style={{
+                          position: 'absolute',
+                          top: '50%',
+                          left: '50%',
+                          transform: 'translate(-50%, -50%)',
+                        }}
+                      />
+                    )}
+                  </div>
                 </S.CheckboxLabel>
               </S.CategoryHeader>
             ) : (
               <S.CategoryHeader onClick={() => handleCategoryClick(category)}>
                 <span>{category}</span>
                 <IcChevronDownBlack16
                   style={{
-                    transform: state.selectedCategory === category ? 'rotate(180deg)' : 'rotate(0deg)',
+                    transform: selectedCategory === category ? 'rotate(180deg)' : 'rotate(0deg)',
                   }}
                 />
               </S.CategoryHeader>
             )}
-            {state.selectedCategory === category && (
+            {selectedCategory === category && category !== '자유' && (
               <S.ToolList>
                 {tools.map((tool) => (
                   <S.ToolItem
                     key={tool.toolId}
-                    isSelected={state.selectedTool === tool.toolName}
+                    isSelected={selectedTool === tool.toolName}
                     onClick={() => handleToolClick(tool.toolName)}
                   >
                     <img src={tool.toolLogo} alt={tool.toolName} style={{ width: '2rem', height: '2rem' }} />
@@ -160,4 +183,4 @@ const ToolSelect = () => {
   );
 };
 
-export default ToolSelect;
+export default ToolListBanner;