주식리스트 테이블 레이아웃 구현

[handje]

Pull request

Related issue

Resolve #90 @handje

Motivation and context

• 디자인시스템 Table을 이용하여 주식 리스트를 보여주는 테이블 구현
• 불필요한 컴포넌트 삭제

Solution

전달사항

• 메인페이지의 임시 버튼을 삭제하였습니다.
• 상세페이지에서 메인으로 돌아오기위한 버튼 또는 로고 클릭 이벤트는 전체 디자인 리팩토링때 진행하겠습니다.
• 불필요한 DataTable컴포넌트는 삭제하였습니다.
• Link태그가 포함될 수 없어 router.push를 사용하였습니다.
• ui확인을 위한 더미데이터는 분리의 필요성이 없다 생각하여 table layout컴포넌트에 포함시켜두었습니다.
• 주식 type은 실제 연결 후, 키값이 변경될 수 있습니다.

파일구조

fsd 패턴에 맞도록 ui / model 을 분리하였습니다. @KimKyuHoi 검색해보며 최대한 폴더를 분리하였지만, 다른 방법이 있으시다면 말씀해주세요!

1. ui : 레이아웃

• stock-detail-layout : 상세페이지에 쓰일 주식 layout
• stock-list-table: 메인페이지에 쓰일 Table 레이아웃

2. model : 구조에 쓰이는 컴포넌트

• stock.types.ts : 주식 타입
• stocks-table.columns.ts : 주식테이블 columns 구조

How has this been tested

1. 각 row 가 클릭됩니다.
   
2. row를 클릭시, 해당 주식 상세페이지로 이동합니다.
   

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.

[KimKyuHoi]

👍 👍 👍

[KimKyuHoi]

그리고 Git Action 내에서 ui>src>components 내에서 type관련이랑 render내에서 쓰면안되는 약간 그런 규칙관련해서 warning이 올라오긴 하는데 한번 파악 해주시면 감사하겠습니다.

[KimKyuHoi]

아 파일명을 stock.type.d.ts만 바꿔주시면 감사하겠습니당

[handje]

@KimKyuHoi 제가 찾아봤을때에는 전역 타입이 아니고 model내부에서의 타입은 .types.ts.를 많이 사용한다해서 파일명으로 사용하긴 했습니다!
혹시 이 부분에 대해 type.d.ts가 더 좋은 네이밍 일까요?

[handje]

그리고 Git Action 내에서 ui>src>components 내에서 type관련이랑 render내에서 쓰면안되는 약간 그런 규칙관련해서 warning이 올라오긴 하는데 한번 파악 해주시면 감사하겠습니다.

render에서 state를 사용한부분이 문제가 있는것같은데 확인해보고 다른 이슈에서 해결하겠습니다!

[KimKyuHoi]

Approve 해놓아서 머지해놓으시면 될것같습니다