fix: update useRouter import and adjust UI styling

[YuHyeonWook]

Overview

• Removed unnecessary .js extension from useRouter import statement to align with Next.js best practices.
• Corrected to right-0 so that the right property of className works correctly.

PR Checklist

• [x] I did below actions if need

1. I read the Contributing Guide
2. I added documents and tests.

[coauthors[bot]]

People can be co-author:

Candidate	Reasons	Count	Add this as commit message
@YuHyeonWook	https://github.com/toss/suspensive/pull/1274	1	Co-authored-by: YuHyeonWook <110236953+YuHyeonWook@users.noreply.github.com>
@codecov-commenter	https://github.com/toss/suspensive/pull/1274#issuecomment-2351523310	1	Co-authored-by: codecov-commenter <65553080+codecov-commenter@users.noreply.github.com>
@manudeli	https://github.com/toss/suspensive/pull/1274#pullrequestreview-2305362498	1	Co-authored-by: manudeli <61593290+manudeli@users.noreply.github.com>

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: bd7917400bacc5f04450afa5b0b4e406fdd9704e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
suspensive.org	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 15, 2024 1:32pm
v1.suspensive.org	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 15, 2024 1:32pm
visualization.suspensive.org	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 15, 2024 1:32pm

[vercel[bot]]

@YuHyeonWook is attempting to deploy a commit to the Toss Team on Vercel.

A member of the Team first needs to authorize it.

[codspeed-hq[bot]]

CodSpeed Performance Report

Merging #1274 will create unknown performance changes

_{Comparing YuHyeonWook:fix/router-import-and-ui (bd79174) with main (89f5b5c)}

Summary

:warning: No benchmarks were detected in both the base of the PR and the PR.

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 73.04%. Comparing base (89f5b5c) to head (bd79174). Report is 1 commits behind head on main.

Additional details and impacted files

[](https://app.codecov.io/gh/toss/suspensive/pull/1274?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) ```diff @@ Coverage Diff @@ ## main #1274 +/- ## ======================================= Coverage 73.04% 73.04% ======================================= Files 83 83 Lines 831 831 Branches 182 183 +1 ======================================= Hits 607 607 Misses 200 200 Partials 24 24 ``` | [Components](https://app.codecov.io/gh/toss/suspensive/pull/1274/components?src=pr&el=components&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | Coverage Δ | | |---|---|---| | [@suspensive/utils](https://app.codecov.io/gh/toss/suspensive/pull/1274/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `47.16% <ø> (ø)` | | | [@suspensive/react](https://app.codecov.io/gh/toss/suspensive/pull/1274/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `100.00% <ø> (ø)` | | | [@suspensive/react-dom](https://app.codecov.io/gh/toss/suspensive/pull/1274/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `96.66% <ø> (ø)` | | | [@suspensive/react-native](https://app.codecov.io/gh/toss/suspensive/pull/1274/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `100.00% <ø> (ø)` | | | [@suspensive/react-query](https://app.codecov.io/gh/toss/suspensive/pull/1274/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `72.09% <ø> (ø)` | | | [@suspensive/react-query-4](https://app.codecov.io/gh/toss/suspensive/pull/1274/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `0.00% <ø> (ø)` | | | [@suspensive/react-query-5](https://app.codecov.io/gh/toss/suspensive/pull/1274/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `0.00% <ø> (ø)` | | | [@suspensive/react-query-next-experimental](https://app.codecov.io/gh/toss/suspensive/pull/1274/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `∅ <ø> (∅)` | | | [@suspensive/react-query-next-experimental-4](https://app.codecov.io/gh/toss/suspensive/pull/1274/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `6.15% <ø> (ø)` | | | [@suspensive/jotai](https://app.codecov.io/gh/toss/suspensive/pull/1274/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `0.00% <ø> (ø)` | | | [@suspensive/cache](https://app.codecov.io/gh/toss/suspensive/pull/1274/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `98.01% <ø> (ø)` | | | [@suspensive/react-image](https://app.codecov.io/gh/toss/suspensive/pull/1274/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `80.39% <ø> (ø)` | |