알림톡

src/entities/additional-service/ui/alimtalk/setting-service-row.tsx

@@ -0,0 +1,51 @@
+import { AlimtalkSettingFlagKeys } from "../../model/alimtalk/types";
+
+export interface AlimTalkSettingServiceRowProps {
+  title: string;
+  merchantFlag?: boolean;
+  userFlag?: boolean;
+  setMerchantFlag: (merchantFlag: boolean) => void;
+  setUserFlag: (userFlag: boolean) => void;
+};
+
+export const AlimTalkSettingServiceRow = ({
+  title,
+  merchantFlag,
+  userFlag,
+  setMerchantFlag,
+  setUserFlag
+}: AlimTalkSettingServiceRowProps) => {
+
+  const onChangeMerchantFlag = (value: boolean) => {
+    setMerchantFlag(value);
+  };
+  const onChangeUserFlag = (value: boolean) => {
+    setUserFlag(value);
+  };
+
+  return (
+    <>
+      <div className="service-row">
+        <span>{ title }</span>
+        <div className="switch-group">
+          <label className="settings-switch">
+            <input 
+              type="checkbox"
+              checked={ merchantFlag }
+              onChange={ (e) => onChangeMerchantFlag(e.target.checked) }
+            />
+            <span className="slider"></span>
+          </label>
+          <label className="settings-switch">
+            <input 
+              type="checkbox" 
+              checked={ userFlag } 
+              onChange={ (e) => onChangeUserFlag(e.target.checked) }
+            />
+            <span className="slider"></span>
+          </label>
+        </div>
+      </div>
+    </>
+  )
+};

src/entities/additional-service/ui/list-item.tsx

@@ -231,7 +231,7 @@ export const ListItem = ({
     else {
       return
     }
-    return timeStr
+    return timeStr;
   };
 
   const getTitle = () => {