1
2
3
4
5
6
7
8
const handleClick = (e: React.MouseEvent<HTMLElement>) => {
  console.log(e.target.dataset.id) // error!
  console.log(e.currentTarget.dataset.id) // board-icon
}
<div data-id="board-icon" onClick={(e) => handleClick(e)}>
  <div>A</div>
  <div>B</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
export const SideNavBar = () => {
  const navigate = useNavigate()
  const [boardClicked, setBoardClicked] = useState(false)
  const [documentClicked, setDocumentClicked] = useState(false)
  const [commentClicked, setCommentClicked] = useState(false)

  const handleIconClick = (event) => {
    switch (event.detail) {
      case 1: {
        // TODO 아이콘 파랗게 변하는 효과 적용
        break
      }
      case 2: {
        // TODO 해당 아이콘이 나타내는 페이지로 이동
        break
      }
      default: {
        break
      }
    }
  }

  return (
    <Wrapper>
      <IconBox data-id="board-icon" onClick={handleIconClick}>
        <IconImage src={BoardImg} clicked={boardClicked} />
        <IconName clicked={boardClicked}>Board</IconName>
      </IconBox>
      <IconBox data-id="document-icon" onClick={handleIconClick}>
        <IconImage src={DocumentImg} clicked={documentClicked} />
        <IconName clicked={documentClicked}>My Documents</IconName>
      </IconBox>
      <IconBox data-id="comment-icon" onClick={handleIconClick}>
        <IconImage src={CommentImg} clicked={commentClicked} />
        <IconName clicked={commentClicked}>My Comments</IconName>
      </IconBox>
    </Wrapper>
  )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
export const SideNavBar = () => {
  const [clickedItem, setClickedItem] = useState('')

  const handleClick = (item) => {
    setClickedItem(item)
  }

  return (
    <Wrapper>
      <NavItem
        name="Board"
        route="/board"
        image={BoardImg}
        isClicked={clickedItem === 'Board'}
        onClick={() => handleClick('Board')}
      />
      <NavItem
        name="My Documents"
        route="/document"
        image={DocumentImg}
        isClicked={clickedItem === 'My Documents'}
        onClick={() => handleClick('My Documents')}
      />
      <NavItem
        name="My Comments"
        route="/comment"
        image={CommentImg}
        isClicked={clickedItem === 'My Comments'}
        onClick={() => handleClick('My Comments')}
      />
    </Wrapper>
  )
}

const NavItem = ({ name, route, image, isClicked, onClick }) => {
  const navigate = useNavigate()

  const handleDoubleClick = () => {
    navigate(route)
  }

  return (
    <IconBox onClick={onClick} onDoubleClick={handleDoubleClick}>
      <IconImage src={image} clicked={isClicked} />
      <IconName clicked={isClicked}>{name}</IconName>
    </IconBox>
  )
}

// ...

const IconName = styled.div`
  ${({ clicked }) =>
    clicked &&
    `
    background: red;
  `}
`

const IconImage = styled.img`
  ${({ clicked }) =>
    clicked &&
    `
    background: red;
  `}
`

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
export const SideNavBar = memo(() => {
  // ...

  const navItemList = [
    {
      name: 'Board',
      image: BoardImg,
      clickHandler: () => handleNavItemClick('Board'),
      isClicked: isClicked('Board'),
      route: '/board/list',
    },
    {
      name: 'My Posts',
      image: DocumentImg,
      clickHandler: () => handleNavItemClick('My Posts'),
      isClicked: isClicked('My Posts'),
      route: '/member/posts',
    },
    {
      name: 'My Page',
      image: CommentImg,
      clickHandler: () => handleNavItemClick('My Page'),
      isClicked: isClicked('My Page'),
      route: '/member/info',
    },
    {
      name: 'Home',
      image: HomeImg,
      clickHandler: () => handleNavItemClick('Home'),
      isClicked: isClicked('Home'),
      route: '/',
    },
    {
      name: 'About',
      image: AboutImg,
      clickHandler: () => handleNavItemClick('About'),
      isClicked: isClicked('About'),
      route: '/about',
    },
  ]

  return (
    <Wrapper>
      {navItemList.map((navItem) => (
        <NavItem
          key={navItem.name}
          name={navItem.name}
          image={navItem.image}
          handleClick={navItem.clickHandler}
          isClicked={navItem.isClicked}
          route={navItem.route}
        />
      ))}
    </Wrapper>
  )
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
export const PushLockButton = memo(
  ({
    isPushed,
    clickHandler,
    name,
    buttonRef,
    children,
  }: PushLockButtonProps) => {
    return (
      <PushLockButtonWrapper
        isPushed={isPushed}
        onClick={clickHandler}
        ref={buttonRef}
      >
        {children}
        {name}
      </PushLockButtonWrapper>
    )
  },
)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
export const Button = memo(
  ({ restoreHandler, name, children, type, isDisabled }: ButtonProps) => {
    const [isPushed, setIsPushed] = useState<boolean>(false)

    const handleButtonPush = () => {
      setIsPushed(true)
    }

    const handleButtonRestore = () => {
      if (restoreHandler) {
        restoreHandler()
      }
      setIsPushed(false)
    }

    const handleButtonMouseOut = () => {
      setIsPushed(false)
    }

    return (
      <ButtonWrapper
        isPushed={isPushed}
        onMouseDown={handleButtonPush}
        onMouseUp={handleButtonRestore}
        onMouseOut={handleButtonMouseOut}
        type={type}
        disabled={isDisabled}
      >
        {children}
        {name}
      </ButtonWrapper>
    )
  },
)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import { useState, useEffect } from 'react'
// 요소의 교차 상태를 확인하여 isVisible로 true/false 반환하는 hook
export const useIntersectionObserver = (
  intersectRef: React.RefObject<HTMLDivElement>,
  optionsObject: {
    root: null
    rootMargin: string
    threshold: number
  },
) => {
  const { root = null, rootMargin = '0px', threshold } = optionsObject

  const [isVisible, setIsVisible] = useState<boolean>(false)

  const handleIntersect: IntersectionObserverCallback = (entries) => {
    // 변수 target에 IntersectionObserverEntry 객체 할당
    const target = entries[0]

    // 교차 여부에 따라 isVisible 상태값 변경
    if (target.isIntersecting) {
      setIsVisible(true)
    } else {
      setIsVisible(false)
    }
  }

  useEffect(() => {
    const observer = new IntersectionObserver(handleIntersect, {
      root: root,
      rootMargin: rootMargin,
      threshold: threshold,
    })

    // intersectRef.current가 존재하면 해당 요소를 IntersectionObserver가 observe하도록 함
    if (intersectRef.current) observer.observe(intersectRef.current)

    // unmount될 때 observer의 가시성 변화 주시 대상 해제
    return () => observer.disconnect()
  }, [intersectRef, root, rootMargin, threshold])

  return {
    isVisible,
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import { useReducer, useCallback } from 'react'
import { validator } from 'utils/validation' // id, password, nickname의 유효성 검사 로직

interface State {
  value: string
  isValid: null | boolean
}

interface Action {
  type: string
  value: string
  inputType: string
}
/*
	reducer 함수 선언
  - dispatch 함수에 의해 실행되며 state 업데이트 로직을 담당
  - state, action을 활용하여 새로운(업데이트된) state를 반환
*/
const inputReducer = (state: State = initialState, action: Action): State => {
  switch (action.type) {
    case 'INPUT_CHANGE':
      return {
        value: action.value,
        isValid: validator(action.inputType, action.value) || false,
      }
    case 'INPUT_SET':
      return {
        value: action.value,
        isValid: validator(action.inputType, action.value) || false,
      }
    case 'INPUT_BLUR':
      return {
        value: state.value,
        isValid: validator(action.inputType, state.value) || false,
      }
    default:
      return state
  }
}

// state의 초기값
const initialState: State = {
  value: '',
  isValid: null,
}

export const useValidInput = (inputType: string) => {
  const [inputState, dispatchInput] = useReducer(inputReducer, initialState)
  /* 
		input 값을 담을 state와 state를 업데이트하는 dispatch 함수를
    inputState, dispatchInput에 구조 분해 할당
		- dispatchInput을 통해 액션 객체에 따라 reducer 함수를 실행시켜 state를 업데이트함 
  */

  /* 
	  사용자가 input 값을 입력/수정할 시 실행되는 함수 
	  - inputState를 해당 input 값으로 업데이트하며 그 값의 유효성 여부를 갱신 
  */
  const handleInputChange = useCallback(
    (
      e:
        | React.ChangeEvent<HTMLTextAreaElement>
        | React.ChangeEvent<HTMLInputElement>,
    ) => {
      dispatchInput({ type: 'INPUT_CHANGE', value: e.target.value, inputType })
    },
    [],
  )

  /* 
	  input 컴포넌트에 blur 이벤트 발생 시 실행 
	  - 현재 inputState의 value 값을 검사하여 유효성 여부를 갱신
  */
  const handleInputBlur = useCallback(() => {
    dispatchInput({ type: 'INPUT_BLUR', value: inputState.value, inputType })
  }, [inputState.value])

  /* 
	  매개변수로 받은 값으로 현재 inputState의 value값을 업데이트하며 그 값의 유효성 여부를 갱신
  */
  const handleInputSet = useCallback((inputValue: string) => {
    dispatchInput({ type: 'INPUT_SET', value: inputValue, inputType })
  }, [])

  return {
    inputState,
    handleInputBlur,
    handleResetInput,
    handleInputChange,
    handleInputSet,
  }
}

1
2
3
4
5
6
7
8
9
10
11
export const Layout = memo(({ children }: LayoutProps) => {
  return (
    <LayoutWrapper>
      <Main>
        <SideNavBar />
        <Section>{children}</Section>
      </Main>
      <BottomNavBar />
    </LayoutWrapper>
  )
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
router.get('/list', async (req, res) => {
  const { start, count } = req.query
  try {
    const postList = await Post.findAll({
      order: [['createdAt', 'DESC']],
      include: [
        {
          model: Member,
          as: 'post_writer',
          attributes: ['member_id', 'member_nickname'],
        },
        {
          model: Comment,
          attributes: [
            [
              Sequelize.fn('COUNT', Sequelize.col('comment_idx')),
              'comments_count',
            ],
          ],
        },
      ],
      offset: start ? Number(start) : null,
      limit: count ? Number(count) : null,
      group: ['post_idx'],
    })
    return res.status(StatusCodes.OK).json({
      data: postList.map((post) => {
        return {
          ...post.dataValues,
          // 댓글 안달린 글일 때는 post.dataValues.comments[0] 자체가 없을 수도 있으므로
          // 있을 때만 댓글 갯수 return, 없으면 0 return
          comments_count: post.dataValues.comments[0]
            ? post.dataValues.comments[0].dataValues.comments_count
            : 0,
          // comments 필드 굳이 필요 없으니 undefined 할당 -> response 객체 내에서 아예 사라짐
          comments: undefined,
        }
      }),
    })
  } catch {
    return res
      .status(StatusCodes.INTERNAL_SERVER_ERROR)
      .send(ReasonPhrases.INTERNAL_SERVER_ERROR)
  }
})