주식 상세 페이지 레이아웃 구성하기

[KimKyuHoi]

Pull request

Related issue

• Resolve 주식 상세 페이지 전체 레이아웃 만들기 #65 @KimKyuHoi

Motivation and context

• App Router내 레이아웃 구성을 해야합니다.

Solution

.
├── (main)
│   ├── [stockSlug]
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── favicon.ico
├── fonts
│   ├── GeistMonoVF.woff
│   └── GeistVF.woff
├── layout.tsx
└── not-found.tsx

• 404페이지나 기타페이지가 있을 경우 layout에 Header가 없어야하므로 default 페이지내에서 header가 없는 layout을 구성하되 추가 메인 페이지내에 새로 구성하여 임시 Header와 레이아웃을 구성하였습니다.
• stockSlug 페이지내에서 Meta데이터를 만들 예정입니다.

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

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

이후 추가 데이터가 있을 경우 추가할 예정입니다.

How has this been tested

• 주식 상세페이지 레이아웃

• 404페이지일 경우

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.

[handje]

이슈에서 Resizable 을 사용한다고 하셨는데 추후에 적용하실 예정이실까요? 지금은 import 만 되어있어서요!

[KimKyuHoi]

이슈에서 Resizable 을 사용한다고 하셨는데 추후에 적용하실 예정이실까요? 지금은 import 만 되어있어서요!

아 제가 잘못 착각해서 메인 레이아웃에 Resizable써버린다고 써놨던 것 같네요. 이슈 수정해놓겠습니다! Resizable은 chat이나 stock쪽에 쓸 것 같습니다!

[KimKyuHoi]

@handje

이슈에서 Resizable 을 사용한다고 하셨는데 추후에 적용하실 예정이실까요? 지금은 import 만 되어있어서요!

요거 이슈 수정 완료했습니다!

[handje]

pl외의 다른 패딩값은 주식과 채팅 동일하게 한번에 적용하시는건 어떠신가요? 이렇게 하신 이유가 있다면 수정하지 않으셔도 됩니다!
저는 와이어프레임 기준 주식차트와 채팅의 양쪽과 아래쪽 패딩이 일치하다고 생각했는데 채팅만 따로 패딩값을 주신게 궁금합니다!

[KimKyuHoi]

아하 요거까진 제가 따로 고려하진 않았었는데 좋은 것 같습니다. 수정하겠습니다. (:

[KimKyuHoi]

@handje

새로운 레이이아웃을 전부 적용과 나머지 컴포넌트 모듈화까지 진행했습니다!

컴포넌트 명 같은 경우에는 제가 고민해봤을때

Layout은 페이지나 섹션의 레이아웃을 정의하기때문에 StockLayout으로

Container는 보통 구성 요소들을 담는 역할을 하는 컴포넌트이기때문에 Chatbox -> ChatContainer로 수정해보았습니다. 한번 컨펌해주시면 감사하겠습니다!

[handje]

깔끔하고 좋네요! 👍 👍

[handje]

🚀 🚀