허들레이아웃 구현

[handje]

Pull request

Related issue

Resolve #63 @handje

Motivation and context

• 허들 전체화면 레이아웃 구현

Solution

• avatar, toggle 사용
• 세부적인 추가 화면(화면공유 모달, 스레드)은 추후에 구현 예정입니다.
• toggle은 대부분 컨트롤에 사용되어 그에 맞게 스타일링을 수정하였습니다.

@KimKyuHoi 아래는 수정된 내용에 대한 설명입니다.

useReducer사용

• 각 control을 type case로 사용
• 하나의 객체로 상태 관리

export const huddleControlReducer = (
  state: Record<HuddleControl, boolean>,
  action: HuddleControlAction,
) => {
  switch (action.type) {
    case 'mic':
      return { ...state, mic: !state.mic };
    case 'video':
      return { ...state, video: !state.video };
    case 'screen':
      return { ...state, screen: !state.screen };
  }
};

조건부렌더링 아이콘 객체로 관리 후, group컴포넌트에서 사용

• item 컴포넌트의 모듈화를 위해 children으로 아이콘을 렌더링
• 정해진 값이기에 const로 선언
• control이 늘어난다면 해당변수(controlIconList)에 추가하여 사용
• key값을 가져가기위해 배열이 아닌 객체로 선언

const controlIconList = {
  mic: { on: <Mic />, off: <MicOff /> },
  video: { on: <Video />, off: <VideoOff /> },
  screen: { on: <ScreenShare />, off: <ScreenShareOff /> },
} as const;

How has this been tested

/huddle 경로에서 테스트 가능합니다. 해당 페이지는 레이아웃 구현 후 삭제 예정입니다.

1. 전체화면
   

2. 토글 버튼 선택
   

3. 화면이 작아질 경우 아바타 배치
   

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the docs/CONTRIBUTING.md document.
• I have added tests to cover my changes.
• All new and existing tests passed.

[netlify]

✅ Deploy Preview for cosmic-caramel-c18fcd ready!

Name	Link
🔨 Latest commit	45703e7
🔍 Latest deploy log	https://app.netlify.com/sites/cosmic-caramel-c18fcd/deploys/67a41fd35e062a00080930d5
😎 Deploy Preview	https://deploy-preview-133--cosmic-caramel-c18fcd.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[handje]

Item컴포넌트 분리 및, Reducer적용 하였습니다. 더 좋은 방법이 있다면 말씀해주세요 :)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
c-sharp	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 9, 2025 9:10am

[netlify]

✅ Deploy Preview for jootalkpia ready!

Name	Link
🔨 Latest commit	8cc9ae3
🔍 Latest deploy log	https://app.netlify.com/sites/jootalkpia/deploys/67a870cd155df100087d7e2f
😎 Deploy Preview	https://deploy-preview-133--jootalkpia.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.