사진 촬영 기능 두 번째 실험

[yonghyeun]

결과물

이전에 실험했던 기능에서 가은님이 피그마에 작성해줬던 형태로 다시 생성해봤습니다. 거지같은 css 는 덤

코드 설명

import StreamingScreen from '@/entities/photo/ui/StreamingScreen';
import CapturedScreen from '@/entities/photo/ui/CapturedScreen';
import PhotoNavBar from '@/entities/photo/ui/PhotoNavBar';
import Button from '@/shared/ui/Button';

import { usePhotoLogic } from '../hooks/domain';

const PhotoApp = () => {
  const {
    photoUrl,
    isCaptured,
    streamingRef,
    photoRef,
    handleCapture,
    handleReCapture,
  } = usePhotoLogic();
  return (
    <div style={wrapperStyle}>
      <PhotoNavBar photoUrl={photoUrl} isCaptured={isCaptured} />
      <div>
        <StreamingScreen ref={streamingRef} isCaptured={isCaptured} />
        <CapturedScreen ref={photoRef} isCaptured={isCaptured} />
      </div>
      <div style={PhotoButtonWrapper}>
        {isCaptured ? (
          <Button onClick={handleReCapture}>다시 촬영</Button>
        ) : (
          <Button onClick={handleCapture}>사진 찍기!</Button>
        )}
      </div>
    </div>
  );
};

export default PhotoApp;

FSD 구조를 생각해서 컴포넌트를 만들 때 PhotoApp 이란 하나의 컴포넌트에서 커스텀훅으로 도메인 로직을 불러오고 entities 에 존재하는 컴포넌트들에게 props 형태로 필요한 로직을 주입하는 형태로 컴포넌트를 생성해봤습니다.

이야기 나눠보고 싶은 것들

조건부 렌더링

조건부 렌더링에 대해서 안좋은 편견을 가지고 있었는데 너무 남발하지만 않으면 나쁘지 않은 거 같기도 합니다.

isCaptured 상태 값에 따라서 버튼을 다르게 렌더링 하는데 저 부분을 원래 조건부 렌더링을 하는 하나의 컴포넌트로 사용할까 ? 도 고민했었습니다.

그런데 그렇게 하다보니 가독성은 좋아지는데 PhotoApp 컴포넌트 자체의 반환값이 코드만 보고 이해하기는 좀 어렵더라고요