Fix/191/storybook img

[minkyung5x5]

🔖 Issue Ticket

#191

✍️ Description

• 스토리북 configure 이미지 추가
• 헤더 높이만큼 스크롤 추가되지 않도록 수정

✅ Checklist

PR

• Branch Convention 확인

  feat/ 피쳐, fix/ 버그 수정, refactor/ 개선

• Base Branch 확인
• 적절한 Label 지정
• Assignee 및 Reviewer 지정

Test

• 로컬 작동 확인

Summary by CodeRabbit

• 새로운 기능

  • "Crew Crew" 웹 애플리케이션의 기능을 보여주는 새로운 이미지로 업데이트되었습니다.

• 버그 수정

  • CrewDetailPage, RootLayout, MyPage 컴포넌트에서 min-h-screen 클래스가 제거되어 레이아웃이 개선되었습니다.

• 문서화

  • 이미지 자산과 스타일이 업데이트되어 문서의 시각적 콘텐츠가 새로운 애플리케이션 테마와 일치하게 변경되었습니다.

[coderabbitai]

Walkthrough

이 풀 리퀘스트는 CrewDetailPage, RootLayout, MyPage 컴포넌트의 레이아웃과 스타일링을 수정하고, Configure.mdx 파일의 이미지 자산을 교체하는 내용을 포함하고 있습니다. min-h-screen 클래스가 여러 컴포넌트에서 제거되었고, RootLayout에서는 새로운 <div className="min-h-screen"> 요소로 변경되었습니다. Configure.mdx 파일에서는 새로운 웹 애플리케이션 기능을 나타내는 이미지로 교체되었으며, 스타일링이 일관되게 조정되었습니다.

Changes

파일 경로	변경 요약
src/app/(crew)/crew/detail/[id]/page.tsx	CrewDetailPage에서 min-h-screen 클래스 제거, 동적 임포트 유지.
src/app/(crew)/layout.tsx	RootLayout의 최상위 프래그먼트를 <div className="min-h-screen">로 변경, 내부 구조 간소화.
src/app/(crew)/my-page/layout.tsx	MyPage에서 min-h-screen 클래스 제거.
src/stories/Configure.mdx	이미지 자산 교체 및 스타일링 조정, 새로운 웹 애플리케이션 기능을 나타내는 이미지로 업데이트.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant CrewDetailPage
    participant RootLayout
    participant MyPage

    User->>CrewDetailPage: 요청
    CrewDetailPage->>RootLayout: 레이아웃 구성
    RootLayout->>MyPage: 페이지 내용 렌더링
    MyPage->>User: 페이지 표시

Loading

Possibly related PRs

• Feat/153/detail page loading #155: CrewDetailPage 컴포넌트의 crewDetail 변수 할당 방식 수정과 관련된 변경.
• Feat/92/my gathering page edit #100: GatheringListSection 컴포넌트의 렌더링 로직 및 사용자 피드백 개선과 관련된 변경.
• Fix/youl bug fix : 로고, 파비콘 교체, 헤더 스타일 변경 #171: CrewDetailPage의 레이아웃 및 스타일링 변경과 관련된 헤더 스타일링 수정.
• Fix/youl storybook + 노데이터 문구 수정 #174: 사용자 인터페이스 업데이트 및 빈 데이터 상태 처리 개선과 관련된 변경.

Suggested labels

fix, design, components

Suggested reviewers

• yulrang
• HaeJungg

🐇 변화의 바람이 불어와
새 이미지로 가득 찬 페이지,
레이아웃이 더욱 깔끔해져
우리의 크루가 빛나네!
함께하는 여정, 즐거운 마음으로
새로운 모습으로 만나요! 🌟

Warning

There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure.

🔧 eslint (1.23.1)

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

warning [email protected]: This version is no longer supported. Please see https://eslint.org/version-support for other options.
warning eslint > @humanwhocodes/[email protected]: Use @eslint/config-array instead
warning eslint > @humanwhocodes/config-array > @humanwhocodes/[email protected]: Use @eslint/object-schema instead
warning eslint > file-entry-cache > flat-cache > [email protected]: Rimraf versions prior to v4 are no longer supported
warning eslint > file-entry-cache > flat-cache > rimraf > [email protected]: Glob versions prior to v9 are no longer supported
warning eslint > file-entry-cache > flat-cache > rimraf > glob > [email protected]: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
warning @storybook/nextjs > @storybook/builder-webpack5 > webpack-dev-middleware > [email protected]: this will be v4
warning @storybook/nextjs > @storybook/builder-webpack5 > fork-ts-checker-webpack-plugin > [email protected]: this will be v4
warning @storybook/[email protected]: In Storybook 8, this package functionality has been integrated to a new package called @storybook/test, which uses Vitest APIs for an improved experience. When upgrading to Storybook 8 with 'npx storybook@latest upgrade', you will get prompted and will get an automigration for the new package. Please migrate when you can.
warning @storybook/jest > @storybook/[email protected]: In Storybook 8, this package functionality has been integrated to a new package called @storybook/test, which uses Vitest APIs for an improved experience. When upgrading to Storybook 8 with 'npx storybook@latest upgrade', you will get prompted and will get an automigration for the new package. Please migrate when you can.
warning @storybook/[email protected]: In Storybook 8, this package functionality has been integrated to a new package called @storybook/test, which uses Vitest APIs for an improved experience. When upgrading to Storybook 8 with 'npx storybook@latest upgrade', you will get prompted and will get an automigration for the new package. Please migrate when you can.
warning "@storybook/nextjs > [email protected]" has unmet peer dependency "webpack@^5.0.0".
warning "@storybook/nextjs > [email protected]" has unmet peer dependency "webpack@>=5".
warning "@storybook/nextjs > [email protected]" has unmet peer dependency "webpack@^5.0.0".
warning "@storybook/nextjs > [email protected]" has unmet peer dependency "webpack@>=5".
warning "@storybook/nextjs > @pmmmwh/[email protected]" has unmet peer dependency "webpack@>=4.43.0 <6.0.0".
warning " > @storybook/[email protected]" has unmet peer dependency "webpack@^5.0.0".

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[github-actions]

🚀storybook: https://67206cc6ff9d7a05a3528ff8-ispojtpfrw.chromatic.com/

[coderabbitai]

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (2)

src/app/(crew)/crew/detail/[id]/page.tsx (1)

Line range hint 19-45: overflow 처리 최적화를 위한 제안

현재 구현된 overflow 처리는 작동하지만, 성능 최적화를 위해 다음과 같은 개선을 고려해보세요:

1. 가로 스크롤이 발생하는 컨테이너에 will-change: transform 속성 추가
2. 큰 리스트의 경우 가상화(virtualization) 도입 고려

-    <div className="mx-auto w-full max-w-full overflow-x-hidden">
+    <div className="mx-auto w-full max-w-full overflow-x-hidden will-change-transform">

src/stories/Configure.mdx (1)

85-85: 이미지 스타일링의 일관성 개선이 필요합니다

대부분의 이미지는 objectPosition: 'top'을 사용하지만, gathering 이미지만 objectFit: 'contain'을 사용하고 있습니다. 일관된 사용자 경험을 위해 스타일링을 통일하는 것이 좋겠습니다.

- style={{ width: '100%', height: '250px', objectFit: 'contain', borderRadius: '5px', borderWidth: '2px', borderColor: '#DBEAFE'}}
+ style={{ width: '100%', height: '250px', objectPosition: 'top', borderRadius: '5px', borderWidth: '2px', borderColor: '#DBEAFE'}}

Also applies to: 97-97, 109-109, 121-121, 133-133, 145-145

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 5571c18 and d56b48a.

⛔ Files ignored due to path filters (19)

• src/stories/assets/1-find-crew.png is excluded by !**/*.png
• src/stories/assets/2-login.png is excluded by !**/*.png
• src/stories/assets/3-crew.png is excluded by !**/*.png
• src/stories/assets/4-gathering.png is excluded by !**/*.png
• src/stories/assets/5-my-crew.png is excluded by !**/*.png
• src/stories/assets/6-my-page.png is excluded by !**/*.png
• src/stories/assets/accessibility.png is excluded by !**/*.png
• src/stories/assets/accessibility.svg is excluded by !**/*.svg
• src/stories/assets/addon-library.png is excluded by !**/*.png
• src/stories/assets/assets.png is excluded by !**/*.png
• src/stories/assets/context.png is excluded by !**/*.png
• src/stories/assets/discord.svg is excluded by !**/*.svg
• src/stories/assets/docs.png is excluded by !**/*.png
• src/stories/assets/figma-plugin.png is excluded by !**/*.png
• src/stories/assets/share.png is excluded by !**/*.png
• src/stories/assets/styling.png is excluded by !**/*.png
• src/stories/assets/testing.png is excluded by !**/*.png
• src/stories/assets/theming.png is excluded by !**/*.png
• src/stories/assets/tutorials.svg is excluded by !**/*.svg

📒 Files selected for processing (4)

• src/app/(crew)/crew/detail/[id]/page.tsx (1 hunks)
• src/app/(crew)/layout.tsx (1 hunks)
• src/app/(crew)/my-page/layout.tsx (1 hunks)
• src/stories/Configure.mdx (8 hunks)

🔇 Additional comments (5)

src/app/(crew)/my-page/layout.tsx (1)

6-6: 스크롤 동작 개선을 위한 적절한 변경 확인

min-h-screen 클래스를 제거한 것은 RootLayout으로 이동하여 스크롤 동작을 개선하려는 의도와 일치합니다. 컨테이너의 반응형 디자인과 간격이 잘 유지되어 있습니다.

RootLayout에서 min-h-screen 클래스가 올바르게 구현되었는지 확인하기 위해 다음 스크립트를 실행합니다:

✅ Verification successful

스크롤 동작 개선을 위한 변경이 올바르게 구현되었음을 확인

min-h-screen 클래스가 src/app/(crew)/layout.tsx에 성공적으로 구현되어 있는 것을 확인했습니다. 이는 PR의 목적에 맞게 스크롤 동작을 개선하기 위한 변경이 정확하게 이루어졌음을 보여줍니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: RootLayout에서 min-h-screen 클래스 구현 확인

# RootLayout 파일에서 min-h-screen 클래스 사용 확인
ast-grep --pattern 'className="$_min-h-screen$_"' src/app/(crew)/layout.tsx

Length of output: 258

---

Script:

#!/bin/bash
# Let's try a different approach to find the RootLayout file and check for min-h-screen class

# First, find the correct path for the layout file
fd "layout.tsx" src/app

# Then search for min-h-screen in all layout files
rg "min-h-screen" --type tsx src/app

Length of output: 266

---

Script:

#!/bin/bash
# Let's search for min-h-screen in all layout files without specifying file type
rg "min-h-screen" src/app/layout.tsx src/app/\(crew\)/layout.tsx

Length of output: 125

src/app/(crew)/layout.tsx (1)

12-17: 레이아웃 구조 개선이 잘 이루어졌습니다.

최상위 요소에 min-h-screen 클래스를 적용하고 중첩된 구조를 단순화한 것이 적절해 보입니다. 이는 스크롤 동작을 개선하려는 PR의 목적과도 잘 부합합니다.

스크롤 동작이 의도한 대로 작동하는지 확인하기 위해 관련 컴포넌트들을 검사하겠습니다:

✅ Verification successful

Let me verify the Header component's presenter implementation to ensure the layout changes work well with the header's sticky positioning.

---

레이아웃 구조와 스크롤 동작이 적절하게 구현되었습니다.

Header 컴포넌트가 sticky top-0 클래스를 사용하고 있고, 레이아웃에서 min-h-screen이 적절하게 적용되어 있어 스크롤 동작에 문제가 없을 것으로 판단됩니다. Header의 높이(h-header)도 올바르게 설정되어 있습니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: 다른 레이아웃 컴포넌트에서 min-h-screen 클래스 사용 검사

# 레이아웃 관련 파일들에서 min-h-screen 클래스 사용 확인
echo "레이아웃 컴포넌트에서 min-h-screen 클래스 사용 현황:"
rg -l "min-h-screen" "src/app" "src/components"

# Header 컴포넌트 구현 확인
echo "\nHeader 컴포넌트 구현 확인:"
ast-grep --pattern 'export default function Header() {
  $$$
}'

Length of output: 1310

---

Script:

#!/bin/bash
# HeaderPresenter 컴포넌트 구현 확인
echo "HeaderPresenter 컴포넌트 구현:"
rg -A 5 "HeaderPresenter" src/components/common/header/

# 스크롤 관련 스타일 확인
echo "\n스크롤 관련 스타일:"
rg "overflow|scroll" src/app/(crew)/

Length of output: 2397

src/app/(crew)/crew/detail/[id]/page.tsx (1)

19-19: min-h-screen 클래스 제거가 적절해 보입니다.

상위 레이아웃 컴포넌트에서 min-h-screen을 관리하도록 변경한 것이 스크롤 동작을 개선하는데 도움이 될 것 같습니다.

레이아웃 변경사항을 확인하기 위해 다음 스크립트를 실행합니다:

✅ Verification successful

min-h-screen 클래스 제거가 적절하게 검증되었습니다.

상위 레이아웃 컴포넌트인 src/app/(crew)/layout.tsx에서 min-h-screen 클래스가 올바르게 적용되어 있음을 확인했습니다. 이는 스크롤 동작 개선을 위한 변경사항과 일관성 있게 구현되었습니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: 레이아웃 컴포넌트에서 min-h-screen 클래스 사용을 확인합니다.

# Test: 레이아웃 파일에서 min-h-screen 클래스 검색
rg "min-h-screen" "src/app/(crew)/layout.tsx"

Length of output: 80

src/stories/Configure.mdx (2)

3-8: 이미지 임포트가 잘 구성되어 있습니다!

번호가 매겨진 명확한 네이밍 컨벤션을 따르고 있어 유지보수가 용이해 보입니다.

---

169-171: 애드온 섹션의 이미지 스타일링이 적절합니다

메인 기능을 보여주는 FindCrew 이미지를 재사용하고, 간단한 스타일링을 적용한 것이 적절해 보입니다.

[ChoYenii]

수고 많으셨습니ㅏㄷ!