Merged
Conversation
This reverts commit 86f4f3f.
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
Warning
|
| Cohort / File(s) | Summary |
|---|---|
App Routing & deps src/app/App.tsx, package.json |
Added routes /manager/social and /manager/social/chat under MobileRouteLayoutWithDocbar; added vaul dependency (^1.1.2). |
Pages src/pages/manager/social/index.tsx, src/pages/manager/social-chat/index.tsx |
New SocialPage with category bar, swipeable list, search popup and FAB; new SocialChatPage with message bubbles, attachment menu toggle, and back navigation. |
Social UI primitives src/shared/ui/common/FloatingActionButton.tsx, src/shared/ui/manager/social/SocialCategory.tsx, src/shared/ui/manager/social/SocialSearch.tsx |
Added FAB, category button (active state), and search trigger button components. |
Social list & interactions src/shared/ui/manager/social/SocialList.tsx |
Added SocialList, SwipeableSocialItem (pointer drag, clamp, snap open), and SocialAction (read/delete actions). |
Drawer primitives (vaul wrappers) src/features/social/ui/drawer.tsx, src/features/social/ui/DrawerHandleBar.tsx, src/features/social/ui/DrawerPeekStrip.tsx |
New Drawer wrapper components: Drawer, DrawerOverlay, DrawerContent, DrawerHeader/Footer/Title/Description, DrawerHandleBar, and DrawerPeekStrip with pointer drag/keyboard open handling. |
Alba find feature src/features/social/ui/AlbaFindDrawer.tsx, src/shared/ui/manager/alba-find/AlbaFindCategoryBar.tsx, src/shared/ui/manager/alba-find/AlbaFindList.tsx, src/shared/ui/manager/alba-find/Albabox.tsx |
Added AlbaFindDrawer with internal mode/filter state, category bar, scrollable list container, and Albabox card component (typed props). |
Feature exports & Storybook src/features/social/index.ts, storybook/stories/Albabox.stories.tsx, storybook/stories/SocialCategory.stories.tsx, storybook/stories/SocialList.stories.tsx |
Exported new social feature modules; added Storybook stories for Albabox, SocialCategory, and SocialList with multiple variants. |
Sequence Diagram(s)
sequenceDiagram
participant User
participant SocialPage
participant DrawerPeekStrip
participant Drawer
participant AlbaFindDrawer
User->>SocialPage: tap/drag peek strip
SocialPage->>DrawerPeekStrip: pointerDown / pointerMove
DrawerPeekStrip->>SocialPage: onRequestOpen()
SocialPage->>Drawer: set open = true (vaul Drawer)
Drawer->>AlbaFindDrawer: render with jobs prop
AlbaFindDrawer->>User: show category bar and job list
User->>AlbaFindDrawer: select filter / open job
Estimated code review effort
🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
- [feat] 근무 스케줄 페이지 구현 #4: Adds routes in
src/app/App.tsx— overlapping routing changes. - [feat] 사장님 메인 페이지 #7: Modifies manager routes and router imports — related to App.tsx edits.
- [feat] 알바생, 사장님 홈 컴포넌트 구현 #9: Adjusts mobile layout/routes under the same layout components — likely overlaps.
Suggested reviewers
- kyeongb-bin
- limtjdghks
Poem
🐰
I hopped a route and found a chat,
A drawer that peeks and jobs to match,
Buttons, bubbles, drag and play,
Stories sing and icons sway,
Crunch a carrot — code delight! 🥕✨
🚥 Pre-merge checks | ✅ 2 | ❌ 1
❌ Failed checks (1 warning)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Docstring Coverage | Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. | Write docstrings for the functions missing them to satisfy the coverage threshold. |
✅ Passed checks (2 passed)
| Check name | Status | Explanation |
|---|---|---|
| Title check | ✅ Passed | The title accurately describes the main changes: implementation of social and alba-search (job-finding) components, which matches the substantial new components added across the codebase. |
| Description check | ✅ Passed | The description follows the template structure with ID, changes, implementation details, demonstration (with 3 images), and notes. However, the ID section is incomplete (shows only placeholder 'ALT-163' without full context) and some sections lack sufficient detail for code review clarity. |
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
✨ Finishing Touches
📝 Generate docstrings
- Create stacked PR
- Commit on current branch
🧪 Generate unit tests (beta)
- Create PR with unit tests
- Commit unit tests in branch
feat/ALT-163
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Comment @coderabbitai help to get the list of available commands and usage tips.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (5)
src/shared/ui/manager/social/SocialSearch.tsx (1)
12-12: Replace hardcoded background color with design token.Line 12 uses a hex literal (
bg-[#e7e7e7]), which makes theme consistency harder. Please switch to the registered Tailwind token (or add one if this exact shade is required).Based on learnings, avoid hardcoding colors in TSX and use Tailwind tokens already defined in
tailwind.config.js.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/shared/ui/manager/social/SocialSearch.tsx` at line 12, In SocialSearch.tsx replace the hardcoded hex class bg-[`#e7e7e7`] on the search input (the JSX element with className starting "h-12 w-full rounded-full...") with the appropriate registered Tailwind color token (for example a neutral/gray token such as bg-neutral-200 or your project’s equivalent); if that exact shade doesn’t exist, add a named color token in tailwind.config.js and use that token in the className instead to avoid hex literals in JSX.src/shared/ui/manager/social/SocialCategory.tsx (1)
10-14: Use semantic color tokens for inactive/hover states.Line 13 hardcodes inactive/hover colors. Please replace with Tailwind tokens (or define missing tokens) to keep manager UI color usage consistent.
Based on learnings, avoid hardcoding colors in TSX and use Tailwind tokens already defined in
tailwind.config.js.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/shared/ui/manager/social/SocialCategory.tsx` around lines 10 - 14, The inactive/hover color values in the className string inside SocialCategory.tsx are hardcoded hexes; replace those hex values with the project's semantic Tailwind color tokens (e.g., bg-<token> and text-<token>, and hover:bg-<token>) used elsewhere in the manager UI so colors come from tailwind.config.js instead of literals; update the branch that currently renders when active is false (the part using 'bg-[`#e9e9e9`] text-text-90 hover:bg-[`#dfdfdf`]') to use the appropriate semantic bg and text classes (or add missing tokens to tailwind.config.js if needed) while keeping the same conditional on the active prop.src/pages/manager/social-chat/index.tsx (1)
28-28: Replace hardcoded chat colors with Tailwind tokens.Several lines use direct hex values (
#e7e7e7,#F4F4F4,#f4f4f4,#d8d8d8). Please map these to existing semantic tokens (or define missing tokens) for consistent theming.Based on learnings, avoid hardcoding colors in TSX and use Tailwind tokens already defined in
tailwind.config.js.Also applies to: 53-53, 77-77, 80-80, 93-93
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/manager/social-chat/index.tsx` at line 28, Replace the hardcoded hex colors in the chat component's className attributes with the project's Tailwind semantic color tokens: find the message container divs (the rounded-[20px] rounded-bl-[4px] bg-[`#e7e7e7`] px-5 py-3 typography-body01-regular text-text-100 and the other occurrences using `#F4F4F4`, `#f4f4f4`, `#d8d8d8`) and swap bg-[#...] and any text- or border-color hex values to the appropriate token names (e.g., bg-token-chat-... or bg-gray-... / text-... as defined in tailwind.config.js); if a matching semantic token doesn't exist, add a descriptive token to tailwind.config.js (with the corresponding hex) and use that token class in the component (update className values accordingly) so all instances use semantic Tailwind tokens instead of raw hex codes.src/pages/manager/social/index.tsx (1)
98-112: Replace these literal colors with semantic tokens.
bg-[#e7e7e7],border-[#d8d8d8],bg-[#f4f4f4], andborder-[#e6e6e6]should come from Tailwind theme tokens so this page stays aligned with the design system.Based on learnings, avoid hardcoding colors in TSX files and prefer the Tailwind tokens registered in
tailwind.config.js.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/manager/social/index.tsx` around lines 98 - 112, The hardcoded hex colors in this component need to be replaced with Tailwind semantic tokens: update the button's className (currently containing bg-[`#e7e7e7`] and border-[`#d8d8d8`]) to use the appropriate theme tokens (e.g., bg-<semantic-token> and border-<semantic-token>), and update the avatar placeholder div (currently bg-[`#f4f4f4`] and border-[`#e6e6e6`]) to use the matching Tailwind tokens; locate these literals in src/pages/manager/social/index.tsx (the button element with SearchIcon and the div with the rounded-full placeholder) and swap each hex value for the corresponding token name defined in tailwind.config.js so the page aligns with the design system.src/shared/ui/manager/social/SocialList.tsx (1)
31-31: Use the existing token for this placeholder background.
bg-[#efefef]already maps to a project token, so please usebg-bg-darkinstead of a literal color class.🎨 Suggested fix
- <div className="h-12 w-12 shrink-0 rounded-full bg-[`#efefef`]" /> + <div className="h-12 w-12 shrink-0 rounded-full bg-bg-dark" />Based on learnings, use
bg-bg-darkfor#efefefinstead of a hardcoded color literal.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/shared/ui/manager/social/SocialList.tsx` at line 31, Replace the hardcoded color utility in the placeholder avatar div by using the project token: locate the placeholder element in SocialList (the div with className containing "h-12 w-12 shrink-0 rounded-full bg-[`#efefef`]") and change the bg-[`#efefef`] class to bg-bg-dark so the component uses the existing design token instead of a literal color.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/pages/manager/social-chat/index.tsx`:
- Around line 50-55: The attachment toggle button that calls setAttachMenuOpen
lacks accessible expansion semantics; update the button rendered in this
component to include aria-expanded={attachMenuOpen} and aria-controls pointing
to a unique id on the menu container (e.g., "attach-menu"), and add that id to
the element that conditionally renders the attachment menu so assistive tech can
correlate the control and content; apply the same change pattern to the other
toggle in this file (the toggle at lines ~76-77) so both buttons use
aria-expanded and aria-controls with matching container ids.
In `@src/pages/manager/social/index.tsx`:
- Around line 87-135: The overlay is a plain div so it lacks dialog semantics,
focus management, and an Escape close path; convert the popup into a proper
modal by giving the panel element role="dialog" and aria-modal="true", add an
explicit close button (with accessible label) inside the panel and wire it to
setSearchPopupOpen(false), implement initial focus (move focus into the panel —
e.g., focus the search input or close button) and trap focus while
searchPopupOpen is true (save/restore previous focus and prevent tabbing out, or
use a focus-trap hook/library), and add a keydown handler (useEffect) that
listens for Escape to call setSearchPopupOpen(false); keep the existing onClick
stopPropagation and preserve navigate('/manager/social/chat') behavior for the
message button.
- Around line 89-94: The dialog div currently uses a fixed width "w-[358px]"
which can overflow on narrow screens; update the element (the div with className
"w-[358px] rounded-[20px] bg-white px-4 pt-[38px] pb-[44px]" that has onClick={e
=> e.stopPropagation()}) to use responsive sizing instead—replace the fixed
width with "w-full max-w-[358px]" so it caps at 358px but fits within small
viewports while keeping existing padding and rounded styling; leave the overlay
onClick (setSearchPopupOpen(false)) and the stopPropagation handler unchanged.
In `@src/shared/ui/common/FloatingActionButton.tsx`:
- Around line 2-10: The FloatingActionButton component currently renders a
button but doesn't accept or forward any event handlers or standard button
attributes, making it non-interactive; update the FloatingActionButton function
to accept props (e.g., props: React.ButtonHTMLAttributes<HTMLButtonElement> or a
specific onClick handler) and spread those onto the rendered <button> so parent
components can pass onClick, aria-, disabled, etc., and keep using PlusIcon as
the img content; ensure the component signature and the button element are
updated to forward props (e.g., ...props).
In `@src/shared/ui/manager/alba-find/Albabox.tsx`:
- Around line 46-50: The bookmark button in Albabox.tsx (the button using
onBookmarkClick and the saved prop) lacks an explicit toggle state; update the
button element to include aria-pressed={saved} so assistive tech recognizes its
pressed/unpressed state (i.e., add the aria-pressed attribute to the same button
that currently sets aria-label based on saved).
In `@src/shared/ui/manager/social/SocialList.tsx`:
- Around line 15-18: SwipeableSocialItemProps currently makes onRead and
onDelete optional but always renders a pointer-drag reveal tray on a
non-focusable div, exposing dead actions; update the SwipeableSocialItem
component so the action tray is only rendered/enabled when at least one of
onRead or onDelete is provided, and when neither exists hide the tray and expose
an accessible, focusable fallback (e.g., a button or link) or disable controls
with proper aria-disabled/aria-hidden attributes; specifically change the logic
around the tray rendering in the SwipeableSocialItem (the non-focusable div and
revealable buttons) to check props.onRead || props.onDelete and ensure keyboard
focusability for any fallback trigger if you keep a reveal affordance.
- Around line 33-47: The text nodes can grow and push the time/unread indicators
out of place; update the two text container divs that render {name} and
{message} in SocialList (the divs with classNames "typography-body01-semibold
text-text-100" and "typography-body02-semibold text-text-100") by adding a
width-shrink helper (min-w-0) on their parent flex children and applying
single-line truncation (e.g., truncate or line-clamp-1 plus
overflow-hidden/whitespace-nowrap) so long names/messages are clamped and don’t
shift the {timeAgo} or unread indicator; ensure these exact elements retain
their typography classes while receiving the min-w-0 and truncation utilities.
---
Nitpick comments:
In `@src/pages/manager/social-chat/index.tsx`:
- Line 28: Replace the hardcoded hex colors in the chat component's className
attributes with the project's Tailwind semantic color tokens: find the message
container divs (the rounded-[20px] rounded-bl-[4px] bg-[`#e7e7e7`] px-5 py-3
typography-body01-regular text-text-100 and the other occurrences using `#F4F4F4`,
`#f4f4f4`, `#d8d8d8`) and swap bg-[#...] and any text- or border-color hex values to
the appropriate token names (e.g., bg-token-chat-... or bg-gray-... / text-...
as defined in tailwind.config.js); if a matching semantic token doesn't exist,
add a descriptive token to tailwind.config.js (with the corresponding hex) and
use that token class in the component (update className values accordingly) so
all instances use semantic Tailwind tokens instead of raw hex codes.
In `@src/pages/manager/social/index.tsx`:
- Around line 98-112: The hardcoded hex colors in this component need to be
replaced with Tailwind semantic tokens: update the button's className (currently
containing bg-[`#e7e7e7`] and border-[`#d8d8d8`]) to use the appropriate theme
tokens (e.g., bg-<semantic-token> and border-<semantic-token>), and update the
avatar placeholder div (currently bg-[`#f4f4f4`] and border-[`#e6e6e6`]) to use the
matching Tailwind tokens; locate these literals in
src/pages/manager/social/index.tsx (the button element with SearchIcon and the
div with the rounded-full placeholder) and swap each hex value for the
corresponding token name defined in tailwind.config.js so the page aligns with
the design system.
In `@src/shared/ui/manager/social/SocialCategory.tsx`:
- Around line 10-14: The inactive/hover color values in the className string
inside SocialCategory.tsx are hardcoded hexes; replace those hex values with the
project's semantic Tailwind color tokens (e.g., bg-<token> and text-<token>, and
hover:bg-<token>) used elsewhere in the manager UI so colors come from
tailwind.config.js instead of literals; update the branch that currently renders
when active is false (the part using 'bg-[`#e9e9e9`] text-text-90
hover:bg-[`#dfdfdf`]') to use the appropriate semantic bg and text classes (or add
missing tokens to tailwind.config.js if needed) while keeping the same
conditional on the active prop.
In `@src/shared/ui/manager/social/SocialList.tsx`:
- Line 31: Replace the hardcoded color utility in the placeholder avatar div by
using the project token: locate the placeholder element in SocialList (the div
with className containing "h-12 w-12 shrink-0 rounded-full bg-[`#efefef`]") and
change the bg-[`#efefef`] class to bg-bg-dark so the component uses the existing
design token instead of a literal color.
In `@src/shared/ui/manager/social/SocialSearch.tsx`:
- Line 12: In SocialSearch.tsx replace the hardcoded hex class bg-[`#e7e7e7`] on
the search input (the JSX element with className starting "h-12 w-full
rounded-full...") with the appropriate registered Tailwind color token (for
example a neutral/gray token such as bg-neutral-200 or your project’s
equivalent); if that exact shade doesn’t exist, add a named color token in
tailwind.config.js and use that token in the className instead to avoid hex
literals in JSX.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 7d6c37bb-fde2-46c0-8074-906515cab5fb
⛔ Files ignored due to path filters (10)
src/assets/icons/Plus.svgis excluded by!**/*.svgsrc/assets/icons/alba/Bookmark.svgis excluded by!**/*.svgsrc/assets/icons/alba/Calendar.svgis excluded by!**/*.svgsrc/assets/icons/alba/Clock.svgis excluded by!**/*.svgsrc/assets/icons/alba/Thumbsup.svgis excluded by!**/*.svgsrc/assets/icons/camera.svgis excluded by!**/*.svgsrc/assets/icons/chevron-left.svgis excluded by!**/*.svgsrc/assets/icons/image.svgis excluded by!**/*.svgsrc/assets/icons/search.svgis excluded by!**/*.svgsrc/assets/icons/socialvector.svgis excluded by!**/*.svg
📒 Files selected for processing (11)
src/app/App.tsxsrc/pages/manager/social-chat/index.tsxsrc/pages/manager/social/index.tsxsrc/shared/ui/common/FloatingActionButton.tsxsrc/shared/ui/manager/alba-find/Albabox.tsxsrc/shared/ui/manager/social/SocialCategory.tsxsrc/shared/ui/manager/social/SocialList.tsxsrc/shared/ui/manager/social/SocialSearch.tsxstorybook/stories/Albabox.stories.tsxstorybook/stories/SocialCategory.stories.tsxstorybook/stories/SocialList.stories.tsx
Comment on lines
+50
to
+55
| <button | ||
| type="button" | ||
| onClick={() => setAttachMenuOpen(prev => !prev)} | ||
| className="h-10 w-10 shrink-0 rounded-[10px] bg-[#F4F4F4] text-4xl text-text-70 leading-none pb-1" | ||
| aria-label="첨부" | ||
| > |
There was a problem hiding this comment.
Add expansion semantics for the attachment menu toggle.
The toggle in Line 50 controls conditional content, but assistive tech cannot infer open/closed state. Add aria-expanded and aria-controls, and an id on the menu container.
♿ Proposed fix
<button
type="button"
onClick={() => setAttachMenuOpen(prev => !prev)}
className="h-10 w-10 shrink-0 rounded-[10px] bg-[`#F4F4F4`] text-4xl text-text-70 leading-none pb-1"
aria-label="첨부"
+ aria-expanded={attachMenuOpen}
+ aria-controls="social-chat-attach-menu"
>
+
</button>
@@
- {attachMenuOpen && (
- <div className="border-t border-line-1 bg-[`#f4f4f4`] pt-10 pb-8">
+ {attachMenuOpen && (
+ <div
+ id="social-chat-attach-menu"
+ className="border-t border-line-1 bg-[`#f4f4f4`] pt-10 pb-8"
+ >Also applies to: 76-77
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/pages/manager/social-chat/index.tsx` around lines 50 - 55, The attachment
toggle button that calls setAttachMenuOpen lacks accessible expansion semantics;
update the button rendered in this component to include
aria-expanded={attachMenuOpen} and aria-controls pointing to a unique id on the
menu container (e.g., "attach-menu"), and add that id to the element that
conditionally renders the attachment menu so assistive tech can correlate the
control and content; apply the same change pattern to the other toggle in this
file (the toggle at lines ~76-77) so both buttons use aria-expanded and
aria-controls with matching container ids.
Comment on lines
+87
to
+135
| {searchPopupOpen && ( | ||
| <div | ||
| className="fixed inset-0 z-50 bg-black/20 px-3 flex items-center justify-center" | ||
| onClick={() => setSearchPopupOpen(false)} | ||
| > | ||
| <div | ||
| className="w-[358px] rounded-[20px] bg-white px-4 pt-[38px] pb-[44px]" | ||
| onClick={e => e.stopPropagation()} | ||
| > | ||
| <button | ||
| type="button" | ||
| className="w-full rounded-[16px] gap-2 bg-[#e7e7e7] h-12 px-5 flex items-center border border-[#d8d8d8]" | ||
| > | ||
| <img src={SearchIcon} alt="search" /> | ||
| <span className="typography-body01-regular text-text-50"> | ||
| 검색 | ||
| </span> | ||
| </button> | ||
|
|
||
| <div className="mt-3"> | ||
| {Array.from({ length: 5 }).map((_, index) => ( | ||
| <div | ||
| key={index} | ||
| className="py-4 border-b border-line-1 flex items-center gap-3" | ||
| > | ||
| <div className="h-12 w-12 rounded-full bg-[#f4f4f4] border border-[#e6e6e6]" /> | ||
| <div className="flex-1"> | ||
| <div className="typography-body01-semibold text-text-100"> | ||
| 나영채 | ||
| </div> | ||
| <div className="typography-body02-regular text-text-100"> | ||
| 근무지 이름 | ||
| </div> | ||
| </div> | ||
| <button | ||
| type="button" | ||
| className="flex items-center justify-center cursor-pointer" | ||
| onClick={() => { | ||
| setSearchPopupOpen(false) | ||
| navigate('/manager/social/chat') | ||
| }} | ||
| > | ||
| <img src={MessageIcon} alt="message" /> | ||
| </button> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
This popup needs real dialog behavior.
It is currently a plain overlay div, so focus stays in the page, background controls remain tabbable, and there is no keyboard-close path. Please add dialog semantics, initial focus, and an explicit close/Escape flow here.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/pages/manager/social/index.tsx` around lines 87 - 135, The overlay is a
plain div so it lacks dialog semantics, focus management, and an Escape close
path; convert the popup into a proper modal by giving the panel element
role="dialog" and aria-modal="true", add an explicit close button (with
accessible label) inside the panel and wire it to setSearchPopupOpen(false),
implement initial focus (move focus into the panel — e.g., focus the search
input or close button) and trap focus while searchPopupOpen is true
(save/restore previous focus and prevent tabbing out, or use a focus-trap
hook/library), and add a keydown handler (useEffect) that listens for Escape to
call setSearchPopupOpen(false); keep the existing onClick stopPropagation and
preserve navigate('/manager/social/chat') behavior for the message button.
Comment on lines
+2
to
+10
| export function FloatingActionButton() { | ||
| return ( | ||
| <button | ||
| type="button" | ||
| className="h-14 w-14 shrink-0 rounded-full bg-main text-4xl text-white leading-none cursor-pointer inline-flex items-center justify-center aspect-square" | ||
| aria-label="추가" | ||
| > | ||
| <img src={PlusIcon} alt="plus" /> | ||
| </button> |
There was a problem hiding this comment.
Floating action button is non-interactive due to missing handler props.
Line 2 and Line 4-10 expose no way to pass onClick (or other button attrs), so this CTA cannot trigger actions from parent pages.
🔧 Proposed fix
+import type { ButtonHTMLAttributes } from 'react'
import PlusIcon from '@/assets/icons/plus.svg'
-export function FloatingActionButton() {
+
+interface FloatingActionButtonProps
+ extends ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export function FloatingActionButton({
+ className = '',
+ ...props
+}: FloatingActionButtonProps) {
return (
<button
type="button"
- className="h-14 w-14 shrink-0 rounded-full bg-main text-4xl text-white leading-none cursor-pointer inline-flex items-center justify-center aspect-square"
+ className={`h-14 w-14 shrink-0 rounded-full bg-main text-4xl text-white leading-none cursor-pointer inline-flex items-center justify-center aspect-square ${className}`}
aria-label="추가"
+ {...props}
>
<img src={PlusIcon} alt="plus" />
</button>
)
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| export function FloatingActionButton() { | |
| return ( | |
| <button | |
| type="button" | |
| className="h-14 w-14 shrink-0 rounded-full bg-main text-4xl text-white leading-none cursor-pointer inline-flex items-center justify-center aspect-square" | |
| aria-label="추가" | |
| > | |
| <img src={PlusIcon} alt="plus" /> | |
| </button> | |
| import type { ButtonHTMLAttributes } from 'react' | |
| import PlusIcon from '@/assets/icons/plus.svg' | |
| interface FloatingActionButtonProps | |
| extends ButtonHTMLAttributes<HTMLButtonElement> {} | |
| export function FloatingActionButton({ | |
| className = '', | |
| ...props | |
| }: FloatingActionButtonProps) { | |
| return ( | |
| <button | |
| type="button" | |
| className={`h-14 w-14 shrink-0 rounded-full bg-main text-4xl text-white leading-none cursor-pointer inline-flex items-center justify-center aspect-square ${className}`} | |
| aria-label="추가" | |
| {...props} | |
| > | |
| <img src={PlusIcon} alt="plus" /> | |
| </button> | |
| ) | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/shared/ui/common/FloatingActionButton.tsx` around lines 2 - 10, The
FloatingActionButton component currently renders a button but doesn't accept or
forward any event handlers or standard button attributes, making it
non-interactive; update the FloatingActionButton function to accept props (e.g.,
props: React.ButtonHTMLAttributes<HTMLButtonElement> or a specific onClick
handler) and spread those onto the rendered <button> so parent components can
pass onClick, aria-, disabled, etc., and keep using PlusIcon as the img content;
ensure the component signature and the button element are updated to forward
props (e.g., ...props).
Comment on lines
+46
to
+50
| <button | ||
| type="button" | ||
| onClick={onBookmarkClick} | ||
| aria-label={saved ? '북마크 해제' : '북마크'} | ||
| > |
There was a problem hiding this comment.
Expose toggle state on bookmark button with aria-pressed.
Line 49 updates label text, but the control is still missing explicit pressed state. Add aria-pressed={saved} so screen readers can interpret it as a toggle.
♿ Proposed fix
<button
type="button"
onClick={onBookmarkClick}
aria-label={saved ? '북마크 해제' : '북마크'}
+ aria-pressed={saved}
>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <button | |
| type="button" | |
| onClick={onBookmarkClick} | |
| aria-label={saved ? '북마크 해제' : '북마크'} | |
| > | |
| <button | |
| type="button" | |
| onClick={onBookmarkClick} | |
| aria-label={saved ? '북마크 해제' : '북마크'} | |
| aria-pressed={saved} | |
| > |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/shared/ui/manager/alba-find/Albabox.tsx` around lines 46 - 50, The
bookmark button in Albabox.tsx (the button using onBookmarkClick and the saved
prop) lacks an explicit toggle state; update the button element to include
aria-pressed={saved} so assistive tech recognizes its pressed/unpressed state
(i.e., add the aria-pressed attribute to the same button that currently sets
aria-label based on saved).
Comment on lines
+15
to
+18
| interface SwipeableSocialItemProps extends SocialProfileProps { | ||
| onRead?: () => void | ||
| onDelete?: () => void | ||
| } |
There was a problem hiding this comment.
Don't surface dead or gesture-only actions.
onRead and onDelete are optional, but the tray is always rendered and only revealable by pointer drag on a non-focusable div. The current page usage in src/pages/manager/social/index.tsx, Lines 67-74, already omits both handlers, so users can reveal buttons that do nothing and keyboard users have no path to them. Either require the handlers, or hide/disable the tray and expose a focusable fallback trigger.
Also applies to: 104-120, 135-148
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/shared/ui/manager/social/SocialList.tsx` around lines 15 - 18,
SwipeableSocialItemProps currently makes onRead and onDelete optional but always
renders a pointer-drag reveal tray on a non-focusable div, exposing dead
actions; update the SwipeableSocialItem component so the action tray is only
rendered/enabled when at least one of onRead or onDelete is provided, and when
neither exists hide the tray and expose an accessible, focusable fallback (e.g.,
a button or link) or disable controls with proper aria-disabled/aria-hidden
attributes; specifically change the logic around the tray rendering in the
SwipeableSocialItem (the non-focusable div and revealable buttons) to check
props.onRead || props.onDelete and ensure keyboard focusability for any fallback
trigger if you keep a reveal affordance.
Comment on lines
+33
to
+47
| <div className="w-full flex flex-col gap-1"> | ||
| <div className="flex justify-between "> | ||
| <div className="typography-body01-semibold text-text-100">{name}</div> | ||
| <div className="typography-body03-regular text-text-70"> | ||
| {timeAgo} | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="flex justify-between"> | ||
| <div className=" typography-body02-semibold text-text-100"> | ||
| {message} | ||
| </div> | ||
| <div | ||
| className={`h-3 w-3 rounded-full ${unread ? 'bg-error' : 'bg-transparent'}`} | ||
| /> |
There was a problem hiding this comment.
Clamp the text rows before long content breaks the item.
Without min-w-0 plus truncation, long names/messages can wrap or shove the time/unread indicator out of place. The preview here looks intended to stay to a single line.
✂️ Suggested fix
- <div className="w-full flex flex-col gap-1">
- <div className="flex justify-between ">
- <div className="typography-body01-semibold text-text-100">{name}</div>
- <div className="typography-body03-regular text-text-70">
+ <div className="min-w-0 w-full flex flex-col gap-1">
+ <div className="flex items-center justify-between gap-2">
+ <div className="min-w-0 flex-1 truncate typography-body01-semibold text-text-100">
+ {name}
+ </div>
+ <div className="shrink-0 typography-body03-regular text-text-70">
{timeAgo}
</div>
</div>
- <div className="flex justify-between">
- <div className=" typography-body02-semibold text-text-100">
+ <div className="flex items-center justify-between gap-2">
+ <div className="min-w-0 flex-1 truncate typography-body02-semibold text-text-100">
{message}
</div>
<div
- className={`h-3 w-3 rounded-full ${unread ? 'bg-error' : 'bg-transparent'}`}
+ className={`h-3 w-3 shrink-0 rounded-full ${unread ? 'bg-error' : 'bg-transparent'}`}
/>
</div>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <div className="w-full flex flex-col gap-1"> | |
| <div className="flex justify-between "> | |
| <div className="typography-body01-semibold text-text-100">{name}</div> | |
| <div className="typography-body03-regular text-text-70"> | |
| {timeAgo} | |
| </div> | |
| </div> | |
| <div className="flex justify-between"> | |
| <div className=" typography-body02-semibold text-text-100"> | |
| {message} | |
| </div> | |
| <div | |
| className={`h-3 w-3 rounded-full ${unread ? 'bg-error' : 'bg-transparent'}`} | |
| /> | |
| <div className="min-w-0 w-full flex flex-col gap-1"> | |
| <div className="flex items-center justify-between gap-2"> | |
| <div className="min-w-0 flex-1 truncate typography-body01-semibold text-text-100"> | |
| {name} | |
| </div> | |
| <div className="shrink-0 typography-body03-regular text-text-70"> | |
| {timeAgo} | |
| </div> | |
| </div> | |
| <div className="flex items-center justify-between gap-2"> | |
| <div className="min-w-0 flex-1 truncate typography-body02-semibold text-text-100"> | |
| {message} | |
| </div> | |
| <div | |
| className={`h-3 w-3 shrink-0 rounded-full ${unread ? 'bg-error' : 'bg-transparent'}`} | |
| /> | |
| </div> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/shared/ui/manager/social/SocialList.tsx` around lines 33 - 47, The text
nodes can grow and push the time/unread indicators out of place; update the two
text container divs that render {name} and {message} in SocialList (the divs
with classNames "typography-body01-semibold text-text-100" and
"typography-body02-semibold text-text-100") by adding a width-shrink helper
(min-w-0) on their parent flex children and applying single-line truncation
(e.g., truncate or line-clamp-1 plus overflow-hidden/whitespace-nowrap) so long
names/messages are clamped and don’t shift the {timeAgo} or unread indicator;
ensure these exact elements retain their typography classes while receiving the
min-w-0 and truncation utilities.
dohy-eon
requested changes
Mar 29, 2026
Member
dohy-eon
left a comment
dohy-eon
left a comment
There was a problem hiding this comment.
Albabox랑 SocialList 같은 도메인 의존적인 UI가 shared/ui에 위치해 있는데 features 레벨로 안옮겨도 될까요?? fsd 아키텍처라서 추후에 다른 곳에서 되는거 아니라면 features로 옮기는게 좋아보여요
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/features/social/ui/DrawerPeekStrip.tsx (1)
73-73: Replace hardcoded color with a Tailwind token.Line 73 uses
bg-[#dcdcdc], which breaks the project token convention. Prefer a registered token (or just keepDrawerHandleBar’s default tokenized background).Based on learnings: In the alter-client repository, avoid hardcoding colors in TSX files and use Tailwind tokens.🎨 Proposed fix
- <DrawerHandleBar size="sm" className="bg-[`#dcdcdc`]" /> + <DrawerHandleBar size="sm" />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/features/social/ui/DrawerPeekStrip.tsx` at line 73, Replace the hardcoded hex color used on DrawerHandleBar in DrawerPeekStrip.tsx: remove or replace the className "bg-[`#dcdcdc`]" on the DrawerHandleBar element so it uses an existing Tailwind design token (or rely on DrawerHandleBar’s default tokenized background) instead of the literal color; update the JSX for the DrawerHandleBar component reference to use the proper token utility class name (or omit className) so the styling follows project token conventions.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/features/social/ui/AlbaFindDrawer.tsx`:
- Around line 16-18: The import for Albabox and AlbaboxProps in
AlbaFindDrawer.tsx is unresolved (TS2307); update the import path/casing to
match the actual exported module name and file location so TypeScript can
resolve it — locate the import statement that references
'@/shared/ui/manager/alba-find/Albabox' and correct it to the exact file/export
name (e.g., adjust folder name, filename casing, or export name) that actually
exports Albabox and AlbaboxProps so the build succeeds.
In `@src/shared/ui/manager/alba-find/AlbaFindCategoryBar.tsx`:
- Around line 26-53: The buttons are using tablist/tab semantics without
implementing tab keyboard/panel behavior; change to accessible toggle buttons
instead: remove role="tablist" from the wrapper and remove role="tab" from each
button, add aria-pressed={mode === 'nearby' } / aria-pressed={mode === 'region'}
to the respective buttons (keep type="button" and onClick={() =>
onModeChange(...)}), and ensure visual selected styling still relies on mode;
this keeps correct semantic/AT support without needing full tab-panel
implementation.
---
Nitpick comments:
In `@src/features/social/ui/DrawerPeekStrip.tsx`:
- Line 73: Replace the hardcoded hex color used on DrawerHandleBar in
DrawerPeekStrip.tsx: remove or replace the className "bg-[`#dcdcdc`]" on the
DrawerHandleBar element so it uses an existing Tailwind design token (or rely on
DrawerHandleBar’s default tokenized background) instead of the literal color;
update the JSX for the DrawerHandleBar component reference to use the proper
token utility class name (or omit className) so the styling follows project
token conventions.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 32567fe7-5100-4af5-958e-1040172ab1e6
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (8)
package.jsonsrc/features/social/index.tssrc/features/social/ui/AlbaFindDrawer.tsxsrc/features/social/ui/DrawerHandleBar.tsxsrc/features/social/ui/DrawerPeekStrip.tsxsrc/features/social/ui/drawer.tsxsrc/shared/ui/manager/alba-find/AlbaFindCategoryBar.tsxsrc/shared/ui/manager/alba-find/AlbaFindList.tsx
✅ Files skipped from review due to trivial changes (3)
- package.json
- src/shared/ui/manager/alba-find/AlbaFindList.tsx
- src/features/social/index.ts
Comment on lines
+16
to
+18
| Albabox, | ||
| type AlbaboxProps, | ||
| } from '@/shared/ui/manager/alba-find/Albabox' |
There was a problem hiding this comment.
Fix unresolved Albabox import (currently breaks TypeScript build).
Line 18 imports @/shared/ui/manager/alba-find/Albabox, but CI reports TS2307 for this module. Please align the import path/casing with the actual file/export name so tsc can resolve it on case-sensitive environments.
🧰 Tools
🪛 GitHub Actions: CI
[error] 18-18: TypeScript (tsc) build failed: TS2307 Cannot find module '@/shared/ui/manager/alba-find/Albabox' or its corresponding type declarations.
🪛 GitHub Check: quality
[failure] 18-18:
Cannot find module '@/shared/ui/manager/alba-find/Albabox' or its corresponding type declarations.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/features/social/ui/AlbaFindDrawer.tsx` around lines 16 - 18, The import
for Albabox and AlbaboxProps in AlbaFindDrawer.tsx is unresolved (TS2307);
update the import path/casing to match the actual exported module name and file
location so TypeScript can resolve it — locate the import statement that
references '@/shared/ui/manager/alba-find/Albabox' and correct it to the exact
file/export name (e.g., adjust folder name, filename casing, or export name)
that actually exports Albabox and AlbaboxProps so the build succeeds.
Comment on lines
+26
to
+53
| <div className="flex gap-1 rounded-xl bg-bg-dark p-1" role="tablist"> | ||
| <button | ||
| type="button" | ||
| role="tab" | ||
| aria-selected={mode === 'nearby'} | ||
| onClick={() => onModeChange('nearby')} | ||
| className={`min-h-11 flex-1 rounded-lg typography-body02-semibold transition-colors ${ | ||
| mode === 'nearby' | ||
| ? 'border border-line-2 bg-white text-text-100 shadow-sm' | ||
| : 'bg-transparent text-text-70' | ||
| }`} | ||
| > | ||
| 주변에서 찾기 | ||
| </button> | ||
| <button | ||
| type="button" | ||
| role="tab" | ||
| aria-selected={mode === 'region'} | ||
| onClick={() => onModeChange('region')} | ||
| className={`min-h-11 flex-1 rounded-lg typography-body02-semibold transition-colors ${ | ||
| mode === 'region' | ||
| ? 'border border-line-2 bg-white text-text-100 shadow-sm' | ||
| : 'bg-transparent text-text-70' | ||
| }`} | ||
| > | ||
| 지역에서 찾기 | ||
| </button> | ||
| </div> |
There was a problem hiding this comment.
Tab semantics are incomplete; use button/toggle semantics or implement full tab pattern.
The current tablist/tab roles advertise tab behavior, but required keyboard/focus/tab-panel semantics are not implemented. This can degrade screen-reader and keyboard UX.
♿ Minimal semantic fix (if no tab panels)
- <div className="flex gap-1 rounded-xl bg-bg-dark p-1" role="tablist">
+ <div className="flex gap-1 rounded-xl bg-bg-dark p-1">
<button
type="button"
- role="tab"
- aria-selected={mode === 'nearby'}
+ aria-pressed={mode === 'nearby'}
onClick={() => onModeChange('nearby')}
@@
<button
type="button"
- role="tab"
- aria-selected={mode === 'region'}
+ aria-pressed={mode === 'region'}
onClick={() => onModeChange('region')}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <div className="flex gap-1 rounded-xl bg-bg-dark p-1" role="tablist"> | |
| <button | |
| type="button" | |
| role="tab" | |
| aria-selected={mode === 'nearby'} | |
| onClick={() => onModeChange('nearby')} | |
| className={`min-h-11 flex-1 rounded-lg typography-body02-semibold transition-colors ${ | |
| mode === 'nearby' | |
| ? 'border border-line-2 bg-white text-text-100 shadow-sm' | |
| : 'bg-transparent text-text-70' | |
| }`} | |
| > | |
| 주변에서 찾기 | |
| </button> | |
| <button | |
| type="button" | |
| role="tab" | |
| aria-selected={mode === 'region'} | |
| onClick={() => onModeChange('region')} | |
| className={`min-h-11 flex-1 rounded-lg typography-body02-semibold transition-colors ${ | |
| mode === 'region' | |
| ? 'border border-line-2 bg-white text-text-100 shadow-sm' | |
| : 'bg-transparent text-text-70' | |
| }`} | |
| > | |
| 지역에서 찾기 | |
| </button> | |
| </div> | |
| <div className="flex gap-1 rounded-xl bg-bg-dark p-1"> | |
| <button | |
| type="button" | |
| aria-pressed={mode === 'nearby'} | |
| onClick={() => onModeChange('nearby')} | |
| className={`min-h-11 flex-1 rounded-lg typography-body02-semibold transition-colors ${ | |
| mode === 'nearby' | |
| ? 'border border-line-2 bg-white text-text-100 shadow-sm' | |
| : 'bg-transparent text-text-70' | |
| }`} | |
| > | |
| 주변에서 찾기 | |
| </button> | |
| <button | |
| type="button" | |
| aria-pressed={mode === 'region'} | |
| onClick={() => onModeChange('region')} | |
| className={`min-h-11 flex-1 rounded-lg typography-body02-semibold transition-colors ${ | |
| mode === 'region' | |
| ? 'border border-line-2 bg-white text-text-100 shadow-sm' | |
| : 'bg-transparent text-text-70' | |
| }`} | |
| > | |
| 지역에서 찾기 | |
| </button> | |
| </div> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/shared/ui/manager/alba-find/AlbaFindCategoryBar.tsx` around lines 26 -
53, The buttons are using tablist/tab semantics without implementing tab
keyboard/panel behavior; change to accessible toggle buttons instead: remove
role="tablist" from the wrapper and remove role="tab" from each button, add
aria-pressed={mode === 'nearby' } / aria-pressed={mode === 'region'} to the
respective buttons (keep type="button" and onClick={() => onModeChange(...)}),
and ensure visual selected styling still relies on mode; this keeps correct
semantic/AT support without needing full tab-panel implementation.
limtjdghks
reviewed
Apr 4, 2026
Comment on lines
+16
to
+18
| Albabox, | ||
| type AlbaboxProps, | ||
| } from '@/shared/ui/manager/alba-find/Albabox' |
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/shared/ui/manager/alba-find/Albabox.tsx (1)
42-42: Prefer explicitaria-hidden="true"over shorthand.While
aria-hiddenwithout a value works, the explicit boolean form is clearer and aligns with ARIA best practices.♿ Proposed fix
- <BookmarkIcon className="h-5 w-4" aria-hidden /> + <BookmarkIcon className="h-5 w-4" aria-hidden="true" />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/shared/ui/manager/alba-find/Albabox.tsx` at line 42, Update the BookmarkIcon usage in Albabox.tsx to use the explicit boolean ARIA attribute: add aria-hidden="true" to the <BookmarkIcon ... /> element (the component referenced as BookmarkIcon) so it reads with an explicit aria-hidden="true" prop rather than the shorthand aria-hidden; keep existing props like className unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/shared/ui/manager/alba-find/Albabox.tsx`:
- Line 42: Update the BookmarkIcon usage in Albabox.tsx to use the explicit
boolean ARIA attribute: add aria-hidden="true" to the <BookmarkIcon ... />
element (the component referenced as BookmarkIcon) so it reads with an explicit
aria-hidden="true" prop rather than the shorthand aria-hidden; keep existing
props like className unchanged.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 2ea51f99-6d86-457e-81c7-1edaf506d637
📒 Files selected for processing (1)
src/shared/ui/manager/alba-find/Albabox.tsx
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
ID
변경 내용
구현 사항
구현 시연 (필요 시)
참고 사항 (필요 시)
Summary by CodeRabbit
New Features
Tests
Chores