파일 업로드 파트 구현

[KimKyuHoi]

Pull request

Related issue

• Resolve 파일 전송 기능 구현 #68 @KimKyuHoi

Motivation and context

• 파일을 업로드를 할때 우선적으로 이미지가 보인 후 제거를 할 수 있도록 구현할려고 합니다.
• 코드에서 조금 더 개선될만한 점이라던가 로직적으로 향상될 수 있는 부분이 어떤것들이 있는지 피드백해주시면 감사하겠습니다.
  • 이미지 업로드 같은 경우 아직 api연결전이라 현재 영상 썸네일 같은경우 base64로 변환하였습니다. 이후 상황에따라 수정할 수도 있습니다.

Solution

• chatTextarea컴포넌트를 textarea 스토리북으로 통합시켰습니다.

  • 공용으로 쓰이는 성격이 나타나지 않았기에 textarea내에서 이런 컴포넌트를 만들수 있다라는 예시를 나타내는게 좋다고 판단하여 이동하였습니다.

• overflow된 레이아웃을 수정하였습니다.

Tailwind내에서는 수평 스크롤을 구현할 때 부모·조상 flex 컨테이너에서 min-w-0을 지정하지 않아서 자식이 가로로 오버플로우하는 대신 레이아웃 자체가 확장되어 버리는 문제가 발생합니다.

//app/(main)/[stockSlug]/page.tsx

import { ChatContainer } from '@/src/features/chat';
import { StockDetailLayout } from '@/src/features/stock';

// 주식데이터를 가지고 올수있는 방법이 필요합니다.

export async function generateMetadata({ params }) {
  const { stockSlug } = params;

  return {
    title: `${stockSlug} - 주식 정보`,
    description: `${stockSlug}의 최신 주식 정보를 확인하세요.`,
    keywords: `주식, ${stockSlug}, 주식 정보`,
  };
}

export default function StockDetailsPage({ params }) {
  const { stockSlug } = params;
  // console.log(1, params);

  return (
    <div className="flex bg-gray-700 py-6 px-[30px] h-full w-full min-w-0 min-h-0">
      <div className="pr-2 basis-[45%] flex-shrink-0 min-w-0">
        <StockDetailLayout />
      </div>

      <div className="pl-2 basis-[55%] flex-shrink-0 min-w-0">
        <ChatContainer />
      </div>
    </div>
  );
}

부모의 Layout을 조정하였습니다. 이후 세부 컴포넌트도 layout을 조정하였습니다.

• Video내에서 ThumbNail을 직접 제작할 수 있는 함수를 만들었습니다.
• 파일을 업로드 순서
  • 이미지, 비디오를 다중 선택합니다.
  • 이미지는 용량 20mb, 비디오는 200mb 용량 제한 함수를 통해 유효검증을 합니다.
  • 선택된 이미지와 비디오 중 비디오일 경우 썸네일 제작 함수를 통해서 비디오 썸네일을 생성합니다.
  • 최종적으로 다중선택된 리스트들을 preview-list를 통해 화면에 렌더링 시킵니다.

이후 다뤄야할 것들

• 공용 모달 디자인 컴포넌트를 제작해야합니다.
• 현재 용량 제한을 alert를 통해 나타내고 있습니다.
• 이후 썸네일을 클릭했을때 동영상 같은 경우 영상을 볼 수 있도록 모달창이 필요합니다.
• 썸네일을 클릭했을때 이미지도 볼 수 있도록 모달창이 필요합니다.
• API연결이 필요합니다.
• 채팅내에서 이미지를 전송할때 로직에 대해서 고민해볼 필요가 있음.
• 현재 슬랙 로직
  • 이미지를 선택 업로드시
  • 이미지 pick list내에서 로딩바가 돌면서 이후 모달창에서 이미지 확인이 가능함.
  • 이후 버튼 전송시 로딩없이 이미지, 영상 글이 전부 올라옴.

How has this been tested

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.

[Zero-1016]

고생하셨습니다 !

[Zero-1016]

훅으로 빼면 예쁠것 같습니다!

[handje]

전 좋습니다!