[TIL] Day48 #React-Custom-Component

2022.07.01(Fri)

[TIL] Day48
[SEB FE] Day47

☑️ [Pair] React Custom Component

오늘은 오랜만에 React 코드 끄적끄적✍️
몇 일 Express, UI/UX 했다고 벌써 가물가물하다 🫠

✔️ 오늘의 Bare minimum Requirement는 React, Styled Components, Storybook을 활용해서 React-custom-component(Modal, Toggle, Tab, Tag)를 구현해보기 🙌

1. Modal
   : 모달에서 좀 애먹었던 것은 버튼이랑 모달창의 위치 조정..
   ✍️ 삼항연산자를 이용해서 모달창이 열렸을 때와 닫혔을 때 구분해서 보여주기!

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

 // 모달창을 띄워주는 공간
 export const ModalContainer = styled.div`
   position: relative; // 부모 요소인 ModalContainer가 자식 요소인 ModalBackdrop의 기준점이 됨
   height: 100%;
 `;

 // 모달창이 열렸을 때의 배경
 export const ModalBackdrop = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute; // 부모 요소인 ModalContainer를 기준으로 위치 결정
   top: 0; // ModalContainer을 기준으로 top을 딱 붙이는 개념
   left: 0; // 위와 같이 왼쪽, 오른쪽, 아래 모두 ModalContainer에 딱 붙도록!
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.5); // 마지막 자리는 배경색 투명도 설정
 `;

 // 클릭해서 모달창을 여는 버튼
 export const ModalBtn = styled.button`
   // ... CSS 생략 
 	// 아래는 버튼을 가운데 위치하도록 하는 코드
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 `;

 // 모달창
 export const ModalView = styled.div.attrs((props) => ({
   // attrs() 메소드를 이용해서 div element에 속성 추가 가능
   role: "dialog", // dialog -> modal 개념?
 }))`
   // ... CSS 생략
 	// 검색하다가 맘에 든 테두리 그림자 css 쓱싹
   box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
     rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
     rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;

 	// 모달창 안에 있는 닫기 x 아이콘
   > .fa-times-circle {
     margin-bottom: 1rem;
   }
 `;

 export const Modal = () => {
   const [isOpen, setIsOpen] = useState(false); // 모달창 open, close 상태

   const openModalHandler = () => {
     setIsOpen(!isOpen); // 버튼 클릭시 모달창의 상태 바꿔주기
   };

   return (
     <>
       <ModalContainer>
         <ModalBtn onClick={openModalHandler}>
           {isOpen ? "Opened!" : "Open Modal"}
         </ModalBtn>
         {isOpen ? (
           <ModalBackdrop onClick={openModalHandler}>
             <ModalView>
               <i className="fas fa-times-circle" onClick={openModalHandler} />
               Opened Modal!
             </ModalView>
           </ModalBackdrop>
         ) : (
           ""
         )}
       </ModalContainer>
     </>
   );
 };

2. Toggle
   : ✍️ 토글 기능 구현하다가 새로 알게 된 내용은 className에 조건부 스타일링 적용하는 법

 import { useState } from "react";
 import styled from "styled-components";
 
 const ToggleContainer = styled.div`
   position: relative;
   margin-top: 8rem;
   left: 47%;
   cursor: pointer;
   width: 50px;
 
   > .toggle-container {
     width: 45px;
     height: 24px;
     border-radius: 30px;
     background-color: #dad9ff;
     transition: all 1s ease-out; // 애니메이션 효과로 스무스하게 배경색 변경
 
     &.toggle--checked {
       background-color: #4641d9; 
     }
   }
 
   > .toggle-circle {
     position: absolute;
     // ... css 생략
     transition: all 0.5s ease-out; // 애니메이션 효과로 스무스하게 토글 버튼이 움직임
 
     &.toggle--checked {
       left: 24px;
     }
   }
 `;
 
 const Desc = styled.div`
   text-align: center;
   margin-top: 1rem;
 `;
 
 export const Toggle = () => {
   const [isOn, setisOn] = useState(false);
 
   const toggleHandler = () => {
     setisOn(!isOn);
   };
 
   return (
     <>
       <ToggleContainer
         onClick={toggleHandler}
 				{/* 조건부 스타일링 적용 */}
         <div className={`toggle-container ${isOn ? "toggle--checked" : ""}`} />
         <div className={`toggle-circle ${isOn ? "toggle--checked" : ""}`} />
       </ToggleContainer>
       <Desc>{isOn ? "Toggle Switch ON" : "Toggle Switch OFF"}</Desc>
     </>
   );
 };

3. Tab

    import { useState } from "react";
     import styled from "styled-components";
    
    // Tab을 보여주는 자리
    const TabMenu = styled.ul`
      // ... css 생략
    
    	// Tab1, Tab2, Tab3 각각의 Tab
      .submenu {
        display: flex;
        flex: 1 1 0; // Tab끼리 다닥다닥 붙어있는 문제 해결
        height: 100%;
        justify-content: center;
        align-items: center;
      }
    
    	// 선택한 Tabmenu CSS
      .focused {
        background-color: #4374D9;
        color: white;
        flex: 1 1 0;
      }
    
      & div.desc {
        text-align: center;
      }
    `;
    
    const Desc = styled.div`
      text-align: center;
    `;
    
    export const Tab = () => {
      const [isTab, setIsTab] = 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) => {
        setIsTab(index);
      };
    
      return (
        <>
          <div>
            <TabMenu>
              {menuArr.map((item, idx) => (
                <li
                  className={`submenu${isTab === idx ? " focused" : ""}`}
                  key={idx} // map 사용시엔 무조건 key 설정!
                  onClick={() => selectMenuHandler(idx)}
                >
                  {item.name}
                </li>
              ))}
            </TabMenu>
            <Desc>
              <p>{menuArr[isTab].content}</p>
            </Desc>
          </div>
        </>
      );
    };

4. Tag
   : 내 기준 Tag 구현이 제일 뭔가 까다로웠다.. 엔터치면 값이 들어가고, x 버튼을 누르면 삭제되도록 구현하기!

 import { useState } from "react";
 import styled from "styled-components";
 
 export const TagsInput = styled.div`
   // ... CSS 생략
 
   > ul {
     // ... CSS 생략
 
     > .tag {
       // ... CSS 생략
 
 			// 태그 내에 있는 X 태그 취소 아이콘 css
       > .tag-close-icon {
         // ... CSS 생략
         &:hover { // x 아이콘 위에 마우스를 올렸을 때 css
           background-color: #8c8c8c;
           color: white;
         }
       }
     }
   }
 
 	// 태그 추가 input CSS
   > input {
     // ... CSS 생략
     :focus {
       outline: transparent;
     }
   }
   &:focus-within {
     border: 1px solid #4000c7;
   }
 `;
 
 export const Tag = () => {
   const initialTags = ["Coding", "kimcoding"];
 
   const [text, setText] = useState("");
   const [tags, setTags] = useState(initialTags);
 
 	// Tag 삭제
   const removeTags = (indexToRemove) => {
 		// 
     const removes = tags.filter((item, index) => index !== indexToRemove);
     setTags(removes);
   };
 
   const addTags = (event) => {
 		// 이미 태그로 추가되있거나 아무것도 입력되어 있지 않았을 땐 태그 추가 XXX
     if (!tags.includes(event) && event.length !== 0) {
       setTags([...tags, event]); // 기존 태그에 새로운 태그 추가
       setText(""); // 태그 추가 후, input 비우기
     }
   };
 
   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)}
                 >x</span>
               </li>
             ))}
         </ul>
         <input
           className="tag-input"
           type="text"
           value={text}
           onChange={(e) => setText(e.target.value)} // 입력하는 태그 상태 변경 함수
           onKeyUp={(e) => {
             if (e.key === "Enter") { // Enter 버튼을 눌렀을 때
               addTags(e.target.value); // addTags() 실행
             }
           }}
           placeholder="Press enter to add tags"
         />
       </TagsInput>
     </>
   );
 };

➰ Bare minimum Requirement 19/19 Test Pass ✌️

✅ 담주 월욜엔 자동완성 기능과 input 클릭시 내용 수정 기능 구현해보기 🫠

---

벌써 7월이라니.. 2022년이 벌써 절반이 훌쩍 지나갔다.🥲 백수 생활 4개월ing 〰️
요즘 날씨가 더워서 그런지 원래 안 좋았던 집중력이 더더더 안 좋아진 느낌이다,, 더 열심히 뺘샤뺘샤 💪

[🫶 Todo List]
☑️ 프로그래머스 Lv.1_정수 내림차순으로 배치하기
☑️ Coplit 객체 문제 복습
☑️ Udemy 알고리즘&자료구조 강의 (빅오표기법) 듣기
☑️ Udemy React 강의 (Section2) 듣기
☑️ 인프런 한입 리액트 - JS응용 강의 듣기