S3) Unit 3. [실습] Styled Component 로 UI 구현하기

📣  자주 사용하는 UI를 Styled Component로 구현해보자

1️⃣  Modal

✔️ 조건

      ✓ Modal 창을 띄워 줄 Open Modal 버튼이 있어야 합니다. (24 ms)
      ✓ 버튼을 클릭하면 Modal 컴포넌트 내부에 Modal배경, Modal창 div 엘리먼트가 렌더링되어야 합니다. (162 ms)
      ✓ Modal창이 렌더링 된 상태에서 버튼을 다시 클릭하면 Modal배경, Modal창 div 엘리먼트가 사라집니다. (84 ms)
      ✓ Modal 창 밖을 클릭하면, Modal배경, Modal창 div 엘리먼트가 사라집니다. (46 ms)

 

✔️ 구현 코드

import { useState, useRef, useEffect } from 'react';
import styled from 'styled-components';

export const ModalContainer = styled.div`
  // TODO : Modal을 구현하는데 전체적으로 필요한 CSS를 구현합니다.
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 100%;
`;

export const ModalBackdrop = styled.div`
  // TODO : Modal이 떴을 때의 배경을 깔아주는 CSS를 구현합니다.
  position: absolute;
  justify-content: center;
  align-items: center;
  background-color: rgb(0,0,0,0.3);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: 100%;
  height: 100%;
`;

export const ModalBtn = styled.button`
  background-color: var(--coz-purple-600);
  text-decoration: none;
  border: none;
  padding: 20px;
  color: white;
  border-radius: 30px;
  cursor: grab;
`;

export const ModalView = styled.div.attrs((props) => ({
  // attrs 메소드를 이용해서 아래와 같이 div 엘리먼트에 속성을 추가할 수 있습니다.
  role: 'dialog',
}))`
  // TODO : Modal창 CSS를 구현합니다.
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  flex-direction: column;
  width: 50%;
  height: 50%;
  border-radius: 20px;
  > .text {
    font-size: 2rem;
    margin-bottom: 10px;
  }
`;

export const ExitBtn = styled(ModalBtn)`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30%;
  height: 30%;
  font-size: 0.8rem;
`

export const Modal = () => {
  const [isOpen, setIsOpen] = useState(false);
  //const modalOutside = useRef();

  const openModalHandler = () => {
    // TODO : isOpen의 상태를 변경하는 메소드를 구현합니다.
    setIsOpen(!isOpen);
  };

//   const handleClickOutside = ({ target }) => {
//     if (isOpen && !modalOutside.current.contains(target)) setIsOpen(false);
//   };

// useEffect(() => {
//   window.addEventListener("click", handleClickOutside);
//   return () => {
//     window.removeEventListener("click", handleClickOutside);
//   };
// }, []);

  return (
    <>
      <ModalContainer>
        <ModalBtn onClick={openModalHandler}>
          {isOpen ? 'Opened!' : 'Open Modal'}
          {/* TODO : 조건부 렌더링을 활용해서 Modal이 열린 상태(isOpen이 true인 상태)일 때는 ModalBtn의 내부 텍스트가 'Opened!' 로 Modal이 닫힌 상태(isOpen이 false인 상태)일 때는 ModalBtn 의 내부 텍스트가 'Open Modal'이 되도록 구현해야 합니다. */}
        </ModalBtn>
        {isOpen ? 
          <ModalBackdrop onClick={openModalHandler}>
            <ModalView onClick={(event) => event.stopPropagation()}>
              <div className="text">안녕하세요. 모달입니다!</div>
              <ExitBtn>Close</ExitBtn>
            </ModalView>
          </ModalBackdrop> 
          : null}
        {/* TODO : 조건부 렌더링을 활용해서 Modal이 열린 상태(isOpen이 true인 상태)일 때만 모달창과 배경이 뜰 수 있게 구현해야 합니다. */}
      </ModalContainer>
    </>
  );
};

➰ 모달 창 바깥 부분을 누르면 모달 창이 꺼져야 하는 부분이 구현하기 까다로웠다.

➰ 지금도 테스트는 통과했지만 깔끔하지 못하다. Close 버튼, 모달 창, 모달 바깥 부분을 눌렀을 때 창이 꺼진다.

➰ 딱 모달 바깥 부분만 눌렀을 때 꺼지게 하는 방법이 있을텐데ㅠ

=> 이런 현상을 이벤트 버블링이라고 하며, stopPropagation을 사용해서 방지할 수 있다!!

(자식을 클릭했는데 뒤에 있는 부모가 클릭됬다고 인식해서 부모에 걸린 이벤트가 발생하는 것이다)

 

✔️ 시연 화면

---

2️⃣  Toggle

✔️ 조건

      ✓ Toggle container를 클릭하면 'toggle--checked' class가 추가되어야 합니다. (29 ms)
      ✓ Toggle switch를 클릭하면 'toggle--checked' class가 추가되어야 합니다. (14 ms)

 

✔️ 구현 코드

import { useState } from 'react';
import styled from 'styled-components';

const ToggleContainer = styled.div`
  position: relative;
  margin-top: 8rem;
  left: 47%;
  cursor: pointer;

  > .toggle-container {
    width: 50px;
    height: 24px;
    border-radius: 30px;
    background-color: #8b8b8b;
    transition: 0.5s;
  } >.toggle--checked {
      background-color: rgb(55, 0, 195);
      transition: 0.5s;
  }
    // TODO : .toggle--checked 클래스가 활성화 되었을 경우의 CSS를 구현합니다.
  

  > .toggle-circle {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #ffffff;
    transition: 0.5s;
  } >.toggle--checked {
      left: 27px;
      transition: 0.5s;
  }
    // TODO : .toggle--checked 클래스가 활성화 되었을 경우의 CSS를 구현합니다.
  
`;

const Desc = styled.div`
  // TODO : 설명 부분의 CSS를 구현합니다.
  width: 100%;
  height: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  
`;

export const Toggle = () => {
  const [isOn, setisOn] = useState(false);

  const toggleHandler = () => {
    // TODO : isOn의 상태를 변경하는 메소드를 구현합니다.
    setisOn(!isOn);
  };

  return (
    <>
      <ToggleContainer
        // TODO : 클릭하면 토글이 켜진 상태(isOn)를 boolean 타입으로 변경하는 메소드가 실행되어야 합니다.
        onClick={toggleHandler}
      >
        {/* TODO : 아래에 div 엘리먼트 2개가 있습니다. 각각의 클래스를 'toggle-container', 'toggle-circle' 로 지정하세요. */}
        {/* TIP : Toggle Switch가 ON인 상태일 경우에만 toggle--checked 클래스를 div 엘리먼트 2개에 모두 추가합니다. 조건부 스타일링을 활용하세요. */}
        <div className={isOn ? "toggle-container toggle--checked" : "toggle-container"} />
        <div className={isOn ? "toggle-circle toggle--checked" : "toggle-circle"} />
      </ToggleContainer>
      {/* TODO : Desc 컴포넌트를 활용해야 합니다. */}
      <Desc>{isOn ? 'Toggle Switch ON' : 'Toggle Switch OFF'}</Desc>
      {/* TIP:  Toggle Switch가 ON인 상태일 경우에 Desc 컴포넌트 내부의 텍스트를 'Toggle Switch ON'으로, 그렇지 않은 경우 'Toggle Switch OFF'가 됩니다. 조건부 렌더링을 활용하세요. */}
    </>
  );
};

 

✔️ 시연 화면

---

3️⃣  Tab

✔️ 조건

    Tab Menu는 map을 이용한 반복을 통해 보여야 합니다.
      ✓ ul 엘리먼트 아래에는 li 엘리먼트가 3개 있어야 합니다. (20 ms)
    Tab Menu 조작을 위한 currentTab 상태가 존재해야 합니다.
      ✓ currentTab 초기값은 0번째 인덱스여야 합니다. (7 ms)
    Tab Menu를 클릭하면 currentTab 상태가 변경되어야 합니다.
      ✓ Tab 메뉴를 클릭하면 selectMenuHandler 함수가 실행되고, 해당 Tab 메뉴의 index 값이 인자로 전달됩니다 (7 ms)
      ✓ 클릭한 Tab 메뉴만 className 이 "submenu focused"로 변경됩니다. (17 ms)

 

✔️ 구현 코드

import { useState } from 'react';
import styled from 'styled-components';

// TODO: Styled-Component 라이브러리를 활용해 TabMenu 와 Desc 컴포넌트의 CSS를 구현합니다.

const TabMenu = styled.ul`
  background-color: #dcdcdc;
  color: rgba(73, 73, 73, 0.5);
  font-weight: bold;
  display: flex;
  flex-direction: row;
  justify-items: center;
  align-items: center;
  list-style: none;
  margin-bottom: 7rem;

  .submenu {
    ${'' /* 기본 Tabmenu 에 대한 CSS를 구현합니다. */}
    width: calc(100% / 3);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;

  }

  .focused {
    ${'' /* 선택된 Tabmenu 에만 적용되는 CSS를 구현합니다.  */}
    background-color: rgb(55, 0, 195);
    color: white;
  }

  & div.desc {
    text-align: center;
  }
`;

const Desc = styled.div`
  text-align: center;
`;

export const Tab = () => {
  // TIP: Tab Menu 중 현재 어떤 Tab이 선택되어 있는지 확인하기 위한
  // currentTab 상태와 currentTab을 갱신하는 함수가 존재해야 하고, 초기값은 0 입니다.
  const [currentTab, setCurrentTab] = useState(0);

  const menuArr = [
    { name: 'Tab1', content: 'Tab menu ONE' },
    { name: 'Tab2', content: 'Tab menu TWO' },
    { name: 'Tab3', content: 'Tab menu THREE' },
  ];

  const selectMenuHandler = (index) => {
    // TIP: parameter로 현재 선택한 인덱스 값을 전달해야 하며, 이벤트 객체(event)는 쓰지 않습니다
    // TODO : 해당 함수가 실행되면 현재 선택된 Tab Menu 가 갱신되도록 함수를 완성하세요.
    setCurrentTab(index);
    //console.log(index);
  };

  return (
    <>
      <div>
        <TabMenu>
          {/*TODO: 아래 하드코딩된 내용 대신에, map을 이용한 반복으로 코드를 수정합니다.*/}
          {/*TIP: li 엘리먼트의 class명의 경우 선택된 tab 은 'submenu focused' 가 되며, 
                  나머지 2개의 tab은 'submenu' 가 됩니다.*/}
          {/* <li className="submenu">{menuArr[0].name}</li>
          <li className="submenu">{menuArr[1].name}</li>
          <li className="submenu">{menuArr[2].name}</li> */}
          {menuArr.map((menu, index) => {
            return(
              <li key={menu.name.slice(3)} className={currentTab === index ? "submenu focused" : "submenu"} onClick={() => selectMenuHandler(index)}>
                {menu.name}
              </li>
            )
          })}
        </TabMenu>
        <Desc>
          {/*TODO: 아래 하드코딩된 내용 대신에, 현재 선택된 메뉴 따른 content를 표시하세요*/}
          <p>{menuArr[currentTab].content}</p>
        </Desc>
      </div>
    </>
  );
};

 

✔️ 시연 화면

---

4️⃣  Tag

✔️ 조건

    Enter 키 테스트
      ✓ 새로운 태그를 추가하는 기능은 Enter 키에 의해 실행되어야 합니다. (20 ms)
      ✓ Enter 키를 누르면 tag 를 추가하는 addTags 함수가 실행되어야 합니다. (10 ms)
      ✓ Enter키를 누르면 실제 태그가 추가되어야 합니다. (96 ms)
      ✓ 아무것도 입력하지 않은 경우, Enter를 눌러도 태그가 추가되지 않아야 합니다. (29 ms)
      ✓ 중복된 값이 이미 존재하는 경우, Enter를 눌러도 태그가 추가되지 않아야 합니다. (39 ms)
      ✓ 새로운 태그가 추가되면 입력창은 초기화되어야 합니다. (9 ms)
    tags의 화면 출력과 제거 기능 테스트
      ✓ tags 배열의 모든 태그가 화면에 보여져야 합니다. (19 ms)
      ✓ tag 를 삭제할 수 있는 아이콘(x)이 있어야 하며, 해당 아이콘(x)을 클릭하면 removeTags 함수가 실행되어야 합니다. (4 ms)
      ✓ 삭제 아이콘을 누르면 화면에서 Tag가 삭제되어야 합니다. (17 ms)

 

✔️ 구현 코드

import { useState } from 'react';
import styled from 'styled-components';

// TODO: Styled-Component 라이브러리를 활용해 여러분만의 tag 를 자유롭게 꾸며 보세요!

export const TagsInput = styled.div`
  margin: 8rem auto;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  min-height: 48px;
  width: 480px;
  padding: 0 8px;
  border: 1px solid rgb(214, 216, 218);
  border-radius: 6px;

  > ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 8px 0 0 0;

    > .tag {
      width: auto;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      padding: 0 8px;
      font-size: 14px;
      list-style: none;
      border-radius: 6px;
      margin: 0 8px 8px 0;
      background: var(--coz-purple-600);
      > .tag-close-icon {
        display: block;
        width: 16px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        font-size: 14px;
        margin-left: 8px;
        color: var(--coz-purple-600);
        border-radius: 50%;
        background: #fff;
        cursor: pointer;
      }
    }
  }

  > input {
    flex: 1;
    border: none;
    height: 46px;
    font-size: 14px;
    padding: 4px 0 0 0;
    :focus {
      outline: transparent;
    }
  }

  &:focus-within {
    border: 1px solid var(--coz-purple-600);
  }
`;

export const Tag = () => {
  const initialTags = ['CodeStates', 'kimcoding'];

  const [tags, setTags] = useState(initialTags);
  const removeTags = (indexToRemove) => {
    // TODO : 태그를 삭제하는 메소드를 완성하세요.
    const removeArr = tags.filter((tag, index) => {
      return index !== indexToRemove;
    })
    setTags(removeArr);
  };

  const addTags = (event) => {
    // TODO : tags 배열에 새로운 태그를 추가하는 메소드를 완성하세요.
    // 이 메소드는 태그 추가 외에도 아래 3 가지 기능을 수행할 수 있어야 합니다.
    // - 이미 입력되어 있는 태그인지 검사하여 이미 있는 태그라면 추가하지 말기
    // - 아무것도 입력하지 않은 채 Enter 키 입력시 메소드 실행하지 말기
    // - 태그가 추가되면 input 창 비우기
    //console.log(event);
    if(event.key==="Enter" && tags.includes(event.target.value)===false && event.target.value.length !== 0){
      setTags([...tags,event.target.value]);
      event.target.value = '';
    }

  };

  return (
    <>
      <TagsInput>
        <ul id="tags">
          {tags.map((tag, index) => (
            <li key={index} className="tag">
              <span className="tag-title">{tag}</span>
              <span className="tag-close-icon" onClick={() => removeTags(index)}>
                {/* TODO :  tag-close-icon이 tag-title 오른쪽에 x 로 표시되도록 하고,
                            삭제 아이콘을 click 했을 때 removeTags 메소드가 실행되어야 합니다. */}
                            x
              </span>
            </li>
          ))}
        </ul>
        <input
          className="tag-input"
          type="text"
          onKeyUp={(e) => {
            {
              /* 키보드의 Enter 키에 의해 addTags 메소드가 실행되어야 합니다. */
              addTags(e)
            }
          }}
          placeholder="Press enter to add tags"
        />
      </TagsInput>
    </>
  );
};

 

✔️ 시연 화면

---

5️⃣  Autocomplete

✔️ 조건

   input 기능 테스트
      ✓ input 엘리먼트에 onChange 이벤트 핸들러가 불려와야 합니다. (9 ms)
      ✓ input 값을 삭제할 수 있는 버튼이 있어야 합니다. (5 ms)
      ✓ 삭제 버튼 클릭 시 input value가 삭제되어야 합니다. (47 ms)
    drop down 기능 테스트
      ✓ input 값이 포함 된 자동 완성 추천 drop down 리스트가 보여야 합니다. (8 ms)
      ✓ drop down 항목을 마우스로 클릭 시, input 값 변경에 따라 drop down 목록이 변경되어야 합니다. (52 ms)
      ✓ drop down 항목을 마우스로 클릭 시, input 값이 변경되어야 합니다. (45 ms)
      ✓ drop down 항목을 마우스로 클릭 시, input 값이 이미 있어도 input 값이 drop down 항목의 값으로 변경되어야 합니다. (33 ms)

 

✔️ 구현 코드

import { useState, useEffect } from 'react';
import styled from 'styled-components';

const deselectedOptions = [
  'rustic',
  'antique',
  'vinyl',
  'vintage',
  'refurbished',
  '신품',
  '빈티지',
  '중고A급',
  '중고B급',
  '골동품'
];

/* TODO : 아래 CSS를 자유롭게 수정하세요. */
const boxShadow = '0 4px 6px rgb(32 33 36 / 28%)';
const activeBorderRadius = '1rem 1rem 0 0';
const inactiveBorderRadius = '1rem 1rem 1rem 1rem';

export const InputContainer = styled.div`
  margin-top: 8rem;
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  padding: 1rem;
  border: 1px solid rgb(223, 225, 229);
  border-radius: ${inactiveBorderRadius};
  z-index: 3;
  box-shadow: 0;

  &:focus-within {
    box-shadow: ${boxShadow};
  }

  > input {
    flex: 1 0 0;
    background-color: transparent;
    border: none;
    margin: 0;
    padding: 0;
    outline: none;
    font-size: 16px;
  }

  > div.delete-button {
    cursor: pointer;
  }
`;

export const DropDownContainer = styled.ul`
  background-color: #ffffff;
  display: block;
  margin-left: auto;
  margin-right: auto;
  list-style-type: none;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 0px;
  margin-top: -1px;
  padding: 0.5rem 0;
  border: 1px solid rgb(223, 225, 229);
  border-radius: 0 0 1rem 1rem;
  box-shadow: ${boxShadow};
  z-index: 3;

  > li {
    padding: 0 1rem;
  }
`;

export const Autocomplete = () => {
  /**
   * Autocomplete 컴포넌트는 아래 3가지 state가 존재합니다. 필요에 따라서 state를 더 만들 수도 있습니다.
   * - hasText state는 input값의 유무를 확인할 수 있습니다.
   * - inputValue state는 input값의 상태를 확인할 수 있습니다.
   * - options state는 input값을 포함하는 autocomplete 추천 항목 리스트를 확인할 수 있습니다.
   */
  const [hasText, setHasText] = useState(false);
  let [inputValue, setInputValue] = useState('');
  const [options, setOptions] = useState(deselectedOptions);

  // useEffect를 아래와 같이 활용할 수도 있습니다.
  useEffect(() => {
    if (inputValue === '') {
      setHasText(false);
    }

  }, [inputValue]);

  // TODO : input과 dropdown 상태 관리를 위한 handler가 있어야 합니다.
  const handleInputChange = (event) => {
    /**
     * handleInputChange 함수는
     * - input값 변경 시 발생되는 change 이벤트 핸들러입니다.
     * - input값과 상태를 연결시킬 수 있게 controlled component로 만들 수 있고
     * - autocomplete 추천 항목이 dropdown으로 시시각각 변화되어 보여질 수 있도록 상태를 변경합니다.
     *
     * handleInputChange 함수를 완성하여 아래 3가지 기능을 구현합니다.
     *
     * onChange 이벤트 발생 시
     * 1. input값 상태인 inputValue가 적절하게 변경되어야 합니다.
     * 2. input값 유무 상태인 hasText가 적절하게 변경되어야 합니다.
     * 3. autocomplete 추천 항목인 options의 상태가 적절하게 변경되어야 합니다.
     * Tip : options의 상태에 따라 dropdown으로 보여지는 항목이 달라집니다.
     */
    setInputValue(event.target.value);
    setHasText(true);
  };

  const handleDropDownClick = (clickedOption) => {
    /**
     * handleDropDownClick 함수는
     * - autocomplete 추천 항목을 클릭할 때 발생되는 click 이벤트 핸들러입니다.
     * - dropdown에 제시된 항목을 눌렀을 때, input값이 해당 항목의 값으로 변경되는 기능을 수행합니다.
     *
     * handleInputChange 함수를 완성하여 아래 기능을 구현합니다.
     *
     * onClick 이벤트 발생 시
     * 1. input값 상태인 inputValue가 적절하게 변경되어야 합니다.
     * 2. autocomplete 추천 항목인 options의 상태가 적절하게 변경되어야 합니다.
     */
    setInputValue(deselectedOptions[clickedOption]);
  };

  const handleDeleteButtonClick = () => {
    /**
     * handleDeleteButtonClick 함수는
     * - input의 오른쪽에 있는 X버튼 클릭 시 발생되는 click 이벤트 핸들러입니다.
     * - 함수 작성을 완료하여 input값을 한 번에 삭제하는 기능을 구현합니다.
     *
     * handleDeleteButtonClick 함수를 완성하여 아래 기능을 구현합니다.
     *
     * onClick 이벤트 발생 시
     * 1. input값 상태인 inputValue가 빈 문자열이 되어야 합니다.
     */
    setInputValue('');
  };

  // Advanced Challenge: 상하 화살표 키 입력 시 dropdown 항목을 선택하고, Enter 키 입력 시 input값을 선택된 dropdown 항목의 값으로 변경하는 handleKeyUp 함수를 만들고,
  // 적절한 컴포넌트에 onKeyUp 핸들러를 할당합니다. state가 추가로 필요한지 고민하고, 필요 시 state를 추가하여 제작하세요.

  return (
    <div className='autocomplete-wrapper'>
      <InputContainer>
        {/* TODO : input 엘리먼트를 작성하고 input값(value)을 state와 연결합니다. handleInputChange 함수와 input값 변경 시 호출될 수 있게 연결합니다. */}
        <input onChange={handleInputChange} value={inputValue} type="text"></input>
        {/* TODO : 아래 div.delete-button 버튼을 누르면 input 값이 삭제되어 dropdown이 없어지는 handler 함수를 작성합니다. */}
        <div className='delete-button' onClick={handleDeleteButtonClick}>&times;</div>
      </InputContainer>
      {/* TODO : input 값이 없으면 dropdown이 보이지 않아야 합니다. 조건부 렌더링을 이용해서 구현하세요. */}
      {inputValue ? <DropDown options={options} handleComboBox={handleDropDownClick} input={inputValue} /> : null}
    </div>
  );
};

export const DropDown = ({ options, handleComboBox, input }) => {
  return (
    <DropDownContainer>
      {/* TODO : input 값에 맞는 autocomplete 선택 옵션이 보여지는 역할을 합니다. */}
      {options && options.map((option, index) => {
        if(option.includes(input)){
          return <li key={index} onClick={() => handleComboBox(index)}>{option}</li>
        }
      })}
    </DropDownContainer>
  );
};

 

✔️ 시연 화면

---

6️⃣  ClickToEdit

✔️ 조건

    input 창 클릭 기능 테스트
      ✓ 입력 가능 상태로 변경할 수 있는 onClick 이벤트 핸들러가 span 엘리먼트에 있어야 합니다. (4 ms)
      ✓ 포커스가 제외되는 이벤트 onBlur의 핸들러가 input 엘리먼트에 있어야 합니다. (5 ms)
      ✓ 텍스트 영역을 클릭하면 입력 가능 상태로 변경되어야 합니다. (4 ms)
      ✓ 입력 가능 상태일 때 변화가 감지되면 새로운 값을 설정하는 메소드가 실행되어야 합니다. (5 ms)
      ✓ 입력 가능 상태일 때 input이 아닌 다른 곳을 클릭하면 입력 불가 상태가 되어야 합니다. (9 ms)
      ✓ 입력 가능 상태일 때 input이 아닌 다른 곳을 클릭하면 input의 값이 span에 담겨야 합니다. (10 ms)

 

✔️ 구현 코드

import { useEffect, useState, useRef } from 'react';
import styled from 'styled-components';

export const InputBox = styled.div`
  text-align: center;
  display: inline-block;
  width: 150px;
  height: 30px;
  border: 1px #bbb dashed;
  border-radius: 10px;
  margin-left: 1rem;
`;

export const InputEdit = styled.input`
  text-align: center;
  display: inline-block;
  width: 150px;
  height: 30px;
`;

export const InputView = styled.div`
  text-align: center;
  align-items: center;
  margin-top: 3rem;

  div.view {
    margin-top: 3rem;
  }
`;

export const MyInput = ({ value, handleValueChange }) => {
  const inputEl = useRef(null);
  const [isEditMode, setEditMode] = useState(false);
  const [newValue, setNewValue] = useState(value);

  useEffect(() => {
    if (isEditMode) {
      inputEl.current.focus();
    }
  }, [isEditMode]);

  useEffect(() => {
    setNewValue(value);
  }, [value]);

  const handleClick = () => {
    // TODO : isEditMode 상태를 변경합니다.
    setEditMode(!isEditMode);
  };

  const handleBlur = () => {
    // TODO : Edit가 불가능한 상태로 변경합니다.
    setEditMode(false);
    handleValueChange(newValue);
  };

  const handleInputChange = (e) => {
    // TODO : 저장된 value를 업데이트합니다.
    setNewValue(e.target.value);
  };

  return (
    <InputBox>
      {isEditMode ? (
        <InputEdit
          type='text'
          value={newValue}
          ref={inputEl}
          // TODO : 포커스를 잃으면 Edit가 불가능한 상태로 변경되는 메소드가 실행되어야 합니다.
          onBlur={handleBlur} // 포커스 해재 -> onBlur
          // TODO : 변경 사항이 감지되면 저장된 value를 업데이트 되는 메소드가 실행되어야 합니다.
          onChange={handleInputChange}l
        />
      ) : (
        <span 
        // TODO : 클릭하면 Edit가 가능한 상태로 변경되어야 합니다.
        onClick={handleClick}
        >{newValue}</span>
      )}
    </InputBox>
  );
}

const cache = {
  name: '김코딩',
  age: 20
};

export const ClickToEdit = () => {
  const [name, setName] = useState(cache.name);
  const [age, setAge] = useState(cache.age);

  return (
    <>
      <InputView>
        <label>이름</label>
        <MyInput value={name} handleValueChange={(newValue) => setName(newValue)} />
      </InputView>
      <InputView>
        <label>나이</label>
        <MyInput value={age} handleValueChange={(newValue) => setAge(newValue)} />
      </InputView>
      <InputView>
        <div className='view'>이름 {name} 나이 {age}</div>
      </InputView>
    </>
  );
};

 

✔️ 시연 화면

---

📚 참고자료 https://infiduk.github.io/2022/09/08/react-onclick.html

INFIDUK Blog