[init/#15]: 모바일 뷰를 위한 레이아웃 구현

[hyeonjin6530]

📌 관련 이슈번호

• Closes [ init ] mobile view 세팅 #15

🎟️ PR 유형

어떤 변경 사항이 있나요?

• 새 기능 추가
• 버그 수정
• CSS 등 사용자 UI 디자인 변경
• 리팩토링

Check List

• 🔀 PR 제목의 형식을 잘 작성했나요?
• 🏗️ yarn build는 성공했나요?
• 🧹 불필요한 코드는 제거했나요? (TODO, 주석, clg... etc.)
• ✅ 컨벤션을 지켰나요?
• 💭 이슈는 등록했나요?
• 🏷️ 라벨은 등록했나요?
• 🙇‍♂️ 리뷰어를 지정했나요?

✅ Key Changes

• mobile view setting을 위해 max-width가 768px인 layout을 만들었습니다.
• 더 작은 small moblie(500px)의 경우, 미디어 쿼리를 사용하면 될 거 같습니다!
• Layout의 props에 나중에 헤더의 title 변경에 따른 추가 요소가 있을 것 같아, 보기 쉽게 interface를 활용해 정의하였습니다.

📢 To Reviewers

• 코드 한 번씩 봐주세요☺️

📸 스크린샷

아이폰 6 (375*667) 에서 보이는 화면입니다.

[sinji2102]

확인했습니다 어푸할게요!! 고생햇어용

[daun-up]

저 궁금한 게 있습니다!! 레이아웃을 앱 라우팅 레이아웃에 적용하는 방법이 있는데 (ex. /mobile/page.tsx , /mobile/layout.tsx) 따로 컴포넌트로 레이아웃을 뺀 이유가 있을까요???

[hyeonjin6530]

저 궁금한 게 있습니다!! 레이아웃을 앱 라우팅 레이아웃에 적용하는 방법이 있는데 (ex. /mobile/page.tsx , /mobile/layout.tsx) 따로 컴포넌트로 레이아웃을 뺀 이유가 있을까요???

아!!! pc에 말고 mobile에만 적용해야겠다는 생각에 그렇게 작성했었는데 mobile 폴더 내에서 앱 라우팅 레이아웃을 적용하면 되겠군요!! 좋은 아이디어 정말 감사합니다😍