feat: Author Datetime bug: CheckboxCommon

src/components/common/Author/Author.module.scss

@@ -0,0 +1,17 @@
+.authorWarper{
+    @apply flex flex-row items-center;
+    
+    .authorImage{
+        width:3.2rem;
+        height:3.2rem;
+        border-radius:3.2rem;
+    }
+    .authorName{
+        margin-left:1rem;
+        color:var(--text-label);
+        font-family: var(--font-sans);
+        font-size: 1.2rem;
+        line-height: 2rem;
+        font-feature-settings: 'salt' on;
+    }
+}

src/components/common/Author/Author.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import s from './Author.module.scss';
+import classNames from 'classnames';
+
+import Image from "next/image";
+interface Props {
+    image:any,
+    name: string
+}
+
+const Author = ({image,name}:Props) =>{
+
+    return (
+        <div className={classNames(s.authorWarper)}>
+            <Image className={classNames(s.authorImage)}  src={image}  alt=""/>
+            <div className={classNames(s.authorName)}>{name}</div>
+        </div>
+    )
+}
+
+export default Author;

src/components/common/CheckboxCommon/CheckboxCommon.module.scss

@@ -1,12 +1,11 @@
 @import '../../../styles/utilities';
 .checkboxCommonWarper{
     @apply flex flex-col;
-    margin-left:2rem;
+
     .checkboxItem{
         display: block;
         position: relative;
         cursor: pointer;
-        margin-top:2rem;
         border-radius: 0.4rem;
         width:50%;
         &:hover .checkboxInput ~ .checkMark {
@@ -62,5 +61,10 @@
     }
     .checkboxText{
         margin-left:3rem;
+        font-size:1.2rem;
+        line-height: 2rem;
+        font-family: var(--font-sans);
+        color:var(--text-base);
+        letter-spacing: 0.01em;
     }
 }

src/components/common/CheckboxCommon/CheckboxCommon.tsx

@@ -1,4 +1,4 @@
-import React,{useState,useEffect} from 'react';
+import React,{ChangeEvent,useState,useEffect} from 'react';
 import s from './CheckboxCommon.module.scss';
 import classNames from 'classnames';
 
@@ -12,7 +12,7 @@ interface CheckboxProps extends Omit<
 
 const CheckboxCommon = ({onChange,defaultChecked = true,...props}: CheckboxProps) =>{
     
-    const [value, setValue] = useState<boolean>();
+    const [value, setValue] = useState<boolean>(true);
 
     useEffect(()=>{
         onChange && onChange(value)
@@ -31,7 +31,7 @@ const CheckboxCommon = ({onChange,defaultChecked = true,...props}: CheckboxProps
                 <span className={s.checkMark}></span>
              </label>
              <div className={classNames(s.checkboxText)}>
-                <label for="check"> Billing address is same as shipping </label>
+                <label htmlFor="check"> Billing address is same as shipping </label>
              </div>
         </div>
     )

src/components/common/DateTime/DateTime.module.scss

@@ -0,0 +1,9 @@
+.dateTime{
+    color:var(--text-label);
+    text-transform: uppercase;
+    font-size: 1.2rem;
+    line-height: 2rem;
+    letter-spacing: 0.01em;
+    font-feature-settings: 'salt' on;
+    font-family: var(--font-sans);
+}

src/components/common/DateTime/DateTime.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import s from './DateTime.module.scss';
+import classNames from 'classnames';
+
+interface Props {
+    date:string,
+}
+
+const DateTime = ({date}:Props) =>{
+    return (
+      <div  className={classNames(s.dateTime)}>{date}</div>
+    )
+}
+
+export default DateTime;

src/components/common/index.ts

@@ -8,4 +8,6 @@ export { default as ViewAllItem} from './ViewAllItem/ViewAllItem'
 export { default as ItemWishList} from './ItemWishList/ItemWishList'
 export { default as Logo} from './Logo/Logo'
 export { default as Inputcommon} from './InputCommon/InputCommon'
-export { default as CheckboxCommon} from './CheckboxCommon/CheckboxCommon'
+export { default as CheckboxCommon} from './CheckboxCommon/CheckboxCommon'
+export { default as Author} from './Author/Author'
+export { default as DateTime} from './DateTime/DateTime'