[김미소] week11

src/components/common/Header.tsx

@@ -1,26 +1,26 @@
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation } from 'react-router-dom';
 import {
   Email,
   HeaderControl,
   HeaderInner,
   HeaderLogo,
   HeaderUserInfo,
   HeaderWrap,
-} from "./headerStyle";
-import { Profile } from "../../styles/commonStyle";
-import LinkButton from "./atoms/LinkButton";
-import useFetch from "../../hook/useFetch";
-import { USERLOGINAPI } from "../../constant/api";
-import { IHeaderUserLoginInfoApi } from "./interface";
-import { useEffect, useState } from "react";
-const logo = "/assets/logo/logo.svg";
+} from './headerStyle';
+import { Profile } from '../../styles/commonStyle';
+import LinkButton from './atoms/LinkButton';
+import useFetch from '../../hook/useFetch';
+import { USERLOGINAPI } from '../../constant/api';
+import { IHeaderUserLoginInfoApi } from './interface';
+import { useEffect, useState } from 'react';
+const logo = '/assets/logo/logo.svg';
 
 function Header() {
   const { pathname } = useLocation();
   const { value } = useFetch<IHeaderUserLoginInfoApi>(USERLOGINAPI);
   const [fixed, setFixed] = useState(true);
   useEffect(() => {
-    if (pathname === "/folder") {
+    if (pathname === '/folder') {
       setFixed(false);
     }
   }, [pathname]);
@@ -40,7 +40,7 @@ function Header() {
               <Email>{userInfo?.email}</Email>
             </HeaderUserInfo>
           ) : (
-            <LinkButton $link={"/signin"} $linkClass={"link--gradient large"}>
+            <LinkButton $link={'/signin'} $linkClass={'link--gradient large'}>
               로그인
             </LinkButton>
           )}

src/components/common/atoms/Button.tsx

@@ -1,41 +1,29 @@
-import { ButtonModule } from "./buttonStyle";
+import { ButtonModule } from './buttonStyle';
 interface IButtonModule {
   children: React.ReactNode;
   $btnClass: string;
   $BeforButtonIcon?: string;
   $id?: string;
   $afterButtonIcon?: string;
-  $type?: "button" | "reset" | "submit" | undefined;
-  clickEvent?: (value?: any, index?: number) => void;
-  $clickEventName?: string;
-  $clickIndex?: number | undefined;
+  $type?: 'button' | 'reset' | 'submit' | undefined;
+  onclick?: () => void;
 }
 
 export default function Button({
-  $id,
   children,
   $btnClass,
-  $type = "button",
-  $BeforButtonIcon = "",
-  $afterButtonIcon = "",
-  clickEvent,
-  $clickEventName,
-  $clickIndex,
+  $type = 'button',
+  $BeforButtonIcon = '',
+  $afterButtonIcon = '',
+  onclick,
 }: IButtonModule) {
-  const buttonHenlerEvent = () => {
-    if (!clickEvent) return;
-    if ($clickEventName === "bookmarkId") {
-      clickEvent($id, $clickIndex);
-    }
-  };
-
   return (
     <ButtonModule
       className={$btnClass}
       type={$type}
       $BeforButtonIcon={$BeforButtonIcon}
       $afterButtonIcon={$afterButtonIcon}
-      onClick={buttonHenlerEvent}
+      onClick={onclick}
     >
       {children}
     </ButtonModule>

src/components/common/atoms/CheckBox.tsx

@@ -0,0 +1,33 @@
+import { CheckBoxWrap } from './checkBoxStyle';
+import { IModal } from '../modal/interface';
+
+interface ICheckBoxData {
+  $data: IModal['$modalData'];
+}
+
+function CheckBox({ $data }: ICheckBoxData) {
+  if (typeof $data) {
+    return (
+      <CheckBoxWrap className="chk--list-type1">
+        {$data &&
+          $data.data.map((list: any) => (
+            <div className="inner" key={list.id}>
+              <input type="checkbox" id={list.id} />
+              <label htmlFor={list.id}>
+                <strong>{list.name}</strong>
+                <span>{list.link.count}개 링크</span>
+              </label>
+            </div>
+          ))}
+      </CheckBoxWrap>
+    );
+  } else {
+    return (
+      <div>
+        <input type="text" />
+        <label htmlFor=""></label>
+      </div>
+    );
+  }
+}
+export default CheckBox;

src/components/common/atoms/Input.tsx

@@ -1,32 +1,64 @@
-import Button from "./Button";
-import { InputModule } from "./inputStyle";
+import { ChangeEvent, ReactNode, useEffect, useRef, useState } from 'react';
+import Button from './Button';
+import { InputModule } from './inputStyle';
 interface IButtonModule {
   $type?: string;
   $inputClass?: string;
   $btnShow?: boolean;
-  $btnText?: string;
   $placeholder?: string;
   $beforeBgIcon?: string;
   $btnClass?: string;
+  children?: ReactNode;
+  $clickEvent?: string;
+  onchange?: (value: string) => void;
 }
+
 function Input({
   $btnShow = false,
-  $type = "text",
+  $type = 'text',
   $inputClass,
   $placeholder,
-  $btnText,
-  $beforeBgIcon = "",
-  $btnClass = "",
+  $beforeBgIcon = '',
+  $btnClass = '',
+  children,
+  $clickEvent,
+  onchange,
 }: IButtonModule) {
+  const [value, setValue] = useState('');
+  const refInput = useRef(null);
+  const handleChangInput = (e: ChangeEvent<HTMLInputElement>) => {
+    const { value } = e.target;
+    setValue(value);
+
+    if (onchange) {
+      // value값 전달
+      onchange(value);
+    }
+  };
+
+  const handleButtonEvent = (text: string) => {
+    if (!$clickEvent) return;
+    if ($clickEvent === 'reset') {
+      setValue('');
+    }
+  };
+
   return (
     <>
       <InputModule
         type={$type}
         className={$inputClass}
         placeholder={$placeholder}
+        value={value}
+        onChange={handleChangInput}
         $beforeBgIcon={$beforeBgIcon}
+        ref={refInput}
       />
-      {$btnShow && <Button $btnClass={$btnClass}>{$btnText}</Button>}
+      {$btnShow && (
+        <Button $btnClass={$btnClass} onclick={() => handleButtonEvent(value)}>
+          {children}
+        </Button>
+      )}
     </>
   );
 }

src/components/common/atoms/buttonStyle.ts

@@ -1,7 +1,10 @@
-import styled from "styled-components";
-import { theme } from "../../../styles/theme";
+import styled from 'styled-components';
+import { theme } from '../../../styles/theme';
 
-export const ButtonModule = styled.button<{$afterButtonIcon:string, $BeforButtonIcon:string}>`
+export const ButtonModule = styled.button<{
+  $afterButtonIcon: string;
+  $BeforButtonIcon: string;
+}>`
   &.button {
     &--outlined {
       padding: 0 12px;
@@ -25,41 +28,71 @@ export const ButtonModule = styled.button<{$afterButtonIcon:string, $BeforButton
     &--icon-before {
       display: inline-block;
       padding-left: 22px;
-      background: url(${({$BeforButtonIcon}) => $BeforButtonIcon || ''}) no-repeat left center;
+      background: url(${({ $BeforButtonIcon }) => $BeforButtonIcon || ''})
+        no-repeat left center;
       background-size: 18px 18px;
     }
     &--icon-after {
       display: inline-block;
       padding-right: 20px;
-      background: url(${({$afterButtonIcon}) => $afterButtonIcon || ''}) no-repeat right center;
+      background: url(${({ $afterButtonIcon }) => $afterButtonIcon || ''})
+        no-repeat right center;
       background-size: 18px 18px;
     }
     &--gradient {
+      width: 100%;
       color: #fff;
       font-weight: 600;
-      text-align:center;
-      background:${theme.bgColor.gradient};
+      text-align: center;
+      background: ${theme.bgColor.gradient};
       border-radius: 8px;
-      &.full {
-       width: 100% !important; 
+      /* &.full {
+        width: 100% !important;
       }
       &.large {
         width: 128px;
-        font-size: 18px;
-        line-height: 53px;
-        font-weight: 600;
         @media screen and (max-width: ${theme.screenSize.moLarge}) {
           width: 80px;
-          font-size: 14px;
-          line-height: 37px;
         }
       }
       &.mideum {
         width: 80px;
-        font-size: 14px;
-        line-height: 37px;
-        font-weight: 600;
+      } */
+    }
+    &--red {
+      width: 100%;
+      color: ${theme.color.white};
+      border-radius: 8px;
+      background-color: ${theme.color.red};
+    }
+    &--modal-close {
+      position: absolute;
+      width: auto;
+      top: 16px;
+      right: 16px;
+    }
+    &--sns-share {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      .share--text {
+        padding-top: 10px;
       }
     }
   }
-`
+
+  &.large {
+    font-size: 18px;
+    line-height: 53px;
+    font-weight: 600;
+    @media screen and (max-width: ${theme.screenSize.moLarge}) {
+      font-size: 14px;
+      line-height: 37px;
+    }
+  }
+  &.mideum {
+    font-size: 14px;
+    line-height: 37px;
+    font-weight: 600;
+  }
+`;

src/components/common/atoms/checkBoxStyle.ts

@@ -0,0 +1,56 @@
+import styled from 'styled-components';
+import { theme } from '../../../styles/theme';
+
+export const CheckBoxWrap = styled.div`
+  &.chk {
+    &--list {
+      &-type1 {
+        max-height: 240px;
+        overflow-y: auto;
+        text-align: left;
+        .inner {
+          cursor: pointer;
+          input {
+            display: none !important;
+          }
+          label {
+            position: relative;
+            display: block;
+            padding: 0 8px;
+            line-height: 40px;
+            &::after {
+              content: '';
+              display: none;
+              position: absolute;
+              top: 13px;
+              right: 8px;
+              width: 14px;
+              height: 14px;
+              background: url('/assets/icon/icon_check.svg');
+            }
+            strong {
+              font-size: 16px;
+            }
+            span {
+              font-size: 14px;
+              color: ${theme.color.gray9};
+              padding-left: 8px;
+            }
+          }
+          input:checked + label {
+            background-color: ${theme.color.grayf};
+            &::after {
+              display: block;
+            }
+            strong {
+              color: ${theme.color.primary};
+            }
+          }
+          &:hover {
+            background-color: ${theme.color.grayf};
+          }
+        }
+      }
+    }
+  }
+`;