Skip to content

feat: leading 수정 및 og-image추가#42

Merged
dasosann merged 1 commit intomainfrom
feat/main-api
Mar 13, 2026
Merged

feat: leading 수정 및 og-image추가#42
dasosann merged 1 commit intomainfrom
feat/main-api

Conversation

@dasosann
Copy link
Copy Markdown
Contributor

No description provided.

@qodo-code-review
Copy link
Copy Markdown

Review Summary by Qodo

leading 값 수정 및 메타데이터 베이스 URL 설정

✨ Enhancement

Grey Divider

Walkthroughs

Description
• leading 값을 leading-2에서 leading-[160%]로 수정
• OG 이미지 메타데이터 지원을 위해 metadataBase 추가
• 두 개 컴포넌트에서 일관된 line-height 적용
Diagram
flowchart LR
  A["Leading 스타일 수정"] --> B["leading-2 → leading-[160%]"]
  C["메타데이터 설정"] --> D["metadataBase URL 추가"]
  B --> E["StartExtraInfo.tsx"]
  B --> F["StartOnBoarding.tsx"]
  D --> G["layout.tsx"]
Loading

Grey Divider

File Changes

1. app/extra-info/_components/StartExtraInfo.tsx ✨ Enhancement +1/-1

Leading 값 수정

leading-2 클래스를 leading-[160%]로 변경하여 line-height 개선

app/extra-info/_components/StartExtraInfo.tsx


2. app/onboarding/_components/StartOnBoarding.tsx ✨ Enhancement +1/-1

Leading 값 수정

leading-2 클래스를 leading-[160%]로 변경하여 line-height 개선

app/onboarding/_components/StartOnBoarding.tsx


3. app/layout.tsx ✨ Enhancement +1/-0

메타데이터 베이스 URL 설정

metadataBase를 메타데이터에 추가하여 OG 이미지 및 소셜 공유 메타데이터 지원
• 실제 도메인 주소로 변경 필요한 주석 추가

app/layout.tsx


Grey Divider

Qodo Logo


✨ Describe tool usage guide:

Overview:
The describe tool scans the PR code changes, and generates a description for the PR - title, type, summary, walkthrough and labels. The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on a PR.

When commenting, to edit configurations related to the describe tool (pr_description section), use the following template:

/describe --pr_description.some_config1=... --pr_description.some_config2=...

With a configuration file, use the following template:

[pr_description]
some_config1=...
some_config2=...
Enabling\disabling automation
  • When you first install the app, the default mode for the describe tool is:
pr_commands = ["/describe", ...]

meaning the describe tool will run automatically on every PR.

  • Markers are an alternative way to control the generated description, to give maximal control to the user. If you set:
pr_commands = ["/describe --pr_description.use_description_markers=true", ...]

the tool will replace every marker of the form pr_agent:marker_name in the PR description with the relevant content, where marker_name is one of the following:

  • type: the PR type.
  • summary: the PR summary.
  • walkthrough: the PR walkthrough.
  • diagram: the PR sequence diagram (if enabled).

Note that when markers are enabled, if the original PR description does not contain any markers, the tool will not alter the description at all.

Custom labels

The default labels of the describe tool are quite generic: [Bug fix, Tests, Enhancement, Documentation, Other].

If you specify custom labels in the repo's labels page or via configuration file, you can get tailored labels for your use cases.
Examples for custom labels:

  • Main topic:performance - pr_agent:The main topic of this PR is performance
  • New endpoint - pr_agent:A new endpoint was added in this PR
  • SQL query - pr_agent:A new SQL query was added in this PR
  • Dockerfile changes - pr_agent:The PR contains changes in the Dockerfile
  • ...

The list above is eclectic, and aims to give an idea of different possibilities. Define custom labels that are relevant for your repo and use cases.
Note that Labels are not mutually exclusive, so you can add multiple label categories.
Make sure to provide proper title, and a detailed and well-phrased description for each label, so the tool will know when to suggest it.

Inline File Walkthrough 💎

For enhanced user experience, the describe tool can add file summaries directly to the "Files changed" tab in the PR page.
This will enable you to quickly understand the changes in each file, while reviewing the code changes (diffs).

To enable inline file summary, set pr_description.inline_file_summary in the configuration file, possible values are:

  • 'table': File changes walkthrough table will be displayed on the top of the "Files changed" tab, in addition to the "Conversation" tab.
  • true: A collapsable file comment with changes title and a changes summary for each file in the PR.
  • false (default): File changes walkthrough will be added only to the "Conversation" tab.
Utilizing extra instructions

The describe tool can be configured with extra instructions, to guide the model to a feedback tailored to the needs of your project.

Be specific, clear, and concise in the instructions. With extra instructions, you are the prompter. Notice that the general structure of the description is fixed, and cannot be changed. Extra instructions can change the content or style of each sub-section of the PR description.

Examples for extra instructions:

[pr_description]
extra_instructions="""- The PR title should be in the format: '<PR type>: <title>'
- The title should be short and concise (up to 10 words)
- ...
"""

Use triple quotes to write multi-line instructions. Use bullet points to make the instructions more readable.

More PR-Agent commands

To invoke the PR-Agent, add a comment using one of the following commands:

  • /review: Request a review of your Pull Request.
  • /describe: Update the PR title and description based on the contents of the PR.
  • /improve [--extended]: Suggest code improvements. Extended mode provides a higher quality feedback.
  • /ask <QUESTION>: Ask a question about the PR.
  • /update_changelog: Update the changelog based on the PR's contents.
  • /help_docs <QUESTION>: Given a path to documentation (either for this repository or for a given one), ask a question.
  • /add_docs 💎: Generate docstring for new components introduced in the PR.
  • /generate_labels 💎: Generate labels for the PR based on the PR's contents.
  • /analyze 💎: Automatically analyzes the PR, and presents changes walkthrough for each component.

See the tools guide for more details.
To list the possible configuration parameters, add a /config comment.

See the describe usage page for a comprehensive guide on using this tool.

@qodo-code-review
Copy link
Copy Markdown

qodo-code-review bot commented Mar 13, 2026

Code Review by Qodo

🐞 Bugs (1) 📘 Rule violations (0) 📎 Requirement gaps (0)

Grey Divider


Action required

1. Wrong metadataBase domain 🐞 Bug ✓ Correctness
Description
app/layout.tsx hardcodes metadataBase to https://comatching.com, so relative OpenGraph/Twitter
image URLs like /og-image.png resolve to the wrong host when the app is served from
comatching.site. This breaks link previews/canonical URL resolution for the actual deployment
domain referenced elsewhere in the codebase.
Code

app/layout.tsx[18]

+  metadataBase: new URL("https://comatching.com"), // 실제 도메인 주소로 변경 필요
Evidence
The root metadata defines openGraph.images.url and twitter.images as relative paths, which Next
resolves against metadataBase; therefore a mismatched base domain produces incorrect absolute
URLs. The codebase itself references https://comatching.site/... as the expected frontend URL
pattern, indicating a domain mismatch with the newly hardcoded .com base.

app/layout.tsx[17-45]
lib/actions/loginAction.ts[73-81]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
`metadataBase` is hardcoded to `https://comatching.com`, but the app uses relative OG/Twitter image URLs and the codebase references `https://comatching.site` as the expected frontend domain. This causes OG/Twitter tags to point at the wrong host.

### Issue Context
Next.js resolves relative metadata URLs (like `/og-image.png`) against `metadataBase`. If the deployment host differs (prod/staging/preview), hardcoding the base will break link previews.

### Fix Focus Areas
- app/layout.tsx[17-45]
- lib/actions/loginAction.ts[73-81]

### Implementation notes
- Introduce an env var such as `NEXT_PUBLIC_SITE_URL` (or `SITE_URL`) and set it per environment.
- Set `metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL ?? &quot;http://localhost:3000&quot;)` (or equivalent server-only env) and ensure the value matches the actual deployed frontend domain.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


Grey Divider

ⓘ The new review experience is currently in Beta. Learn more

Grey Divider

Qodo Logo

@gemini-code-assist
Copy link
Copy Markdown
Contributor

Summary of Changes

Hello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 사용자 인터페이스의 텍스트 가독성을 향상시키고 소셜 미디어 공유 시 웹사이트 정보가 더 잘 표시되도록 하는 것을 목표로 합니다. 특정 컴포넌트의 텍스트 줄 간격을 조정하고, Open Graph 메타데이터의 기본 URL을 설정하여 외부 플랫폼에서 콘텐츠가 풍부하게 미리보기 될 수 있도록 준비했습니다.

Highlights

  • 텍스트 줄 간격 조정: StartExtraInfo 및 StartOnBoarding 컴포넌트에서 텍스트의 leading (줄 간격) 스타일을 leading-2에서 leading-[160%]로 변경하여 가독성을 개선했습니다.
  • OG 이미지 메타데이터 추가: app/layout.tsx 파일에 metadataBase 속성을 추가하여 Open Graph (OG) 이미지 및 기타 메타데이터가 올바르게 작동하도록 기본 URL을 설정했습니다.
Changelog
  • app/extra-info/_components/StartExtraInfo.tsx
    • 텍스트 줄 간격 (leading) 스타일을 leading-2에서 leading-[160%]로 변경했습니다.
  • app/layout.tsx
    • metadata 객체에 metadataBase 속성을 추가하여 Open Graph 메타데이터의 기본 URL을 설정했습니다.
  • app/onboarding/_components/StartOnBoarding.tsx
    • 텍스트 줄 간격 (leading) 스타일을 leading-2에서 leading-[160%]로 변경했습니다.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

안녕하세요. 이번 PR에서 leading 스타일을 수정하여 가독성을 개선하고, OG 이미지 공유를 위해 metadataBase를 추가하신 것을 확인했습니다. leading 값 수정은 적절한 변경으로 보입니다. app/layout.tsx에 추가된 metadataBase의 경우, 현재 URL이 하드코딩되어 있어 유지보수성을 높이기 위한 개선 제안을 드렸습니다. 환경 변수를 사용하면 여러 배포 환경에서 더 유연하게 대처할 수 있을 것입니다. 자세한 내용은 코드 리뷰 코멘트를 참고해 주세요.

});

export const metadata: Metadata = {
metadataBase: new URL("https://comatching.com"), // 실제 도메인 주소로 변경 필요
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

metadataBase에 URL을 하드코딩하는 대신 환경 변수를 사용하는 것을 권장합니다. 코드에 남겨주신 주석(// 실제 도메인 주소로 변경 필요)을 고려할 때, 환경별로 다른 도메인을 설정해야 할 수 있습니다. 환경 변수를 사용하면 개발, 스테이징, 프로덕션 환경에 따라 유연하게 URL을 관리할 수 있어 유지보수성이 향상됩니다.

예를 들어, process.env.NEXT_PUBLIC_SITE_URL을 사용하고, 설정되지 않았을 경우를 대비해 기본값을 제공하는 방식이 좋습니다.

Suggested change
metadataBase: new URL("https://comatching.com"), // 실제 도메인 주소로 변경 필요
metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL || "https://comatching.com"), // 실제 도메인 주소로 변경 필요

});

export const metadata: Metadata = {
metadataBase: new URL("https://comatching.com"), // 실제 도메인 주소로 변경 필요
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Action required

1. Wrong metadatabase domain 🐞 Bug ✓ Correctness

app/layout.tsx hardcodes metadataBase to https://comatching.com, so relative OpenGraph/Twitter
image URLs like /og-image.png resolve to the wrong host when the app is served from
comatching.site. This breaks link previews/canonical URL resolution for the actual deployment
domain referenced elsewhere in the codebase.
Agent Prompt
### Issue description
`metadataBase` is hardcoded to `https://comatching.com`, but the app uses relative OG/Twitter image URLs and the codebase references `https://comatching.site` as the expected frontend domain. This causes OG/Twitter tags to point at the wrong host.

### Issue Context
Next.js resolves relative metadata URLs (like `/og-image.png`) against `metadataBase`. If the deployment host differs (prod/staging/preview), hardcoding the base will break link previews.

### Fix Focus Areas
- app/layout.tsx[17-45]
- lib/actions/loginAction.ts[73-81]

### Implementation notes
- Introduce an env var such as `NEXT_PUBLIC_SITE_URL` (or `SITE_URL`) and set it per environment.
- Set `metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL ?? "http://localhost:3000")` (or equivalent server-only env) and ensure the value matches the actual deployed frontend domain.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

@dasosann dasosann merged commit 7b9926a into main Mar 13, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant