Restructure project (#124)

front/src/components/editable-cell/EditableFullName.tsx

@@ -0,0 +1,77 @@
+import styled from '@emotion/styled';
+import { ChangeEvent, useRef, useState } from 'react';
+import EditableCellWrapper from './EditableCellWrapper';
+import PersonChip from '../chips/PersonChip';
+
+type OwnProps = {
+  firstname: string;
+  lastname: string;
+  changeHandler: (firstname: string, lastname: string) => void;
+};
+
+const StyledContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  & > input:last-child {
+    padding-left: ${(props) => props.theme.spacing(2)};
+    border-left: 1px solid ${(props) => props.theme.primaryBorder};
+  }
+`;
+
+const StyledEditInplaceInput = styled.input`
+  width: 45%;
+  border: none;
+  outline: none;
+  height: 18px;
+
+  &::placeholder {
+    font-weight: bold;
+    color: ${(props) => props.theme.text20};
+  }
+`;
+
+function EditableFullName({ firstname, lastname, changeHandler }: OwnProps) {
+  const firstnameInputRef = useRef<HTMLInputElement>(null);
+  const [firstnameValue, setFirstnameValue] = useState(firstname);
+  const [lastnameValue, setLastnameValue] = useState(lastname);
+  const [isEditMode, setIsEditMode] = useState(false);
+
+  return (
+    <EditableCellWrapper
+      onOutsideClick={() => setIsEditMode(false)}
+      onInsideClick={() => setIsEditMode(true)}
+      isEditMode={isEditMode}
+      editModeContent={
+        <StyledContainer>
+          <StyledEditInplaceInput
+            autoFocus
+            placeholder="Firstname"
+            ref={firstnameInputRef}
+            value={firstnameValue}
+            onChange={(event: ChangeEvent<HTMLInputElement>) => {
+              setFirstnameValue(event.target.value);
+              changeHandler(event.target.value, lastnameValue);
+            }}
+          />
+          <StyledEditInplaceInput
+            autoFocus
+            placeholder={'Lastname'}
+            ref={firstnameInputRef}
+            value={lastnameValue}
+            onChange={(event: ChangeEvent<HTMLInputElement>) => {
+              setLastnameValue(event.target.value);
+              changeHandler(firstnameValue, event.target.value);
+            }}
+          />
+        </StyledContainer>
+      }
+      nonEditModeContent={
+        <PersonChip name={firstnameValue + ' ' + lastnameValue} />
+      }
+    ></EditableCellWrapper>
+  );
+}
+
+export default EditableFullName;