[DEV-49] feat: tab-sidemenu 기능 구현 #77
Conversation
Walkthrough새로운 React 컴포넌트 Changes
Sequence Diagram(s)sequenceDiagram
participant U as 사용자
participant T as TabInput 컴포넌트
participant CI as onInputChange 콜백
participant CB as onInputBlur 콜백
U->>T: 컴포넌트 렌더링 (tab.text 전달)
T->>T: useEffect 실행, input.focus()
U->>T: 입력값 변경 (onChange 이벤트)
T->>CI: onInputChange(tab.id, 새 값) 호출
U->>T: 입력 필드 포커스 아웃 (onBlur 이벤트)
T->>CB: onInputBlur(tab.id, 현재 값) 호출
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/components/tab-sidemenu.tsx (1)
1-6: 컴포넌트 문서화 개선이 필요합니다.현재 사용 예시는 잘 작성되어 있으나, 컴포넌트의 목적과 프롭스에 대한 설명이 부족합니다. JSDoc 형식으로 문서화를 추가하는 것을 추천드립니다.
다음과 같이 문서화를 추가해보세요:
"use client"; +/** + * Tab 컴포넌트 - 사이드메뉴의 탭 아이템을 표시합니다. + * @component + * @param {object} props + * @param {string} props.text - 탭에 표시될 텍스트 + * @example + * import Tab from "@/components/tab-sidemenu"; + * + * // 사용 예시 + * <Tab text="자바스크립트로 웹 서비스 만들기" /> + */ -// import Tab from "@/components/tab-sidemenu"; -// <Tab text="{넣을 문구}" /> 이런식으로 사용하시면 됩니다. -// 예) <Tab text="자바스크립트로 웹 서비스 만들기" />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/tab-sidemenu.tsx(1 hunks)
🔇 Additional comments (2)
src/components/tab-sidemenu.tsx (2)
7-9: 인터페이스 정의가 명확합니다!
TabProps인터페이스가 간단하고 명확하게 정의되어 있습니다.
19-19: 내보내기 구문이 적절합니다!기본 내보내기를 사용한 것이 이 컴포넌트의 용도에 적합합니다.
src/components/tab-sidemenu.tsx
Outdated
| const Tab = ({ text }: TabProps) => { | ||
| return ( | ||
| <div className="flex h-9 w-full items-center bg-white px-2 text-sm text-[#334155]"> | ||
| · {text} | ||
| </div> | ||
| ); | ||
| }; |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
package.json(1 hunks)
🔇 Additional comments (1)
package.json (1)
73-73:❓ Verification inconclusive
새로 추가된 패키지의 최신 버전을 확인해주세요.
tailwindcss-preset-px-to-rem패키지의 최신 버전과 보안 취약점을 확인하는 것이 좋습니다.
🌐 Web query:
What is the latest version of tailwindcss-preset-px-to-rem?💡 Result:
The latest version of
tailwindcss-preset-px-to-remisn't explicitly mentioned in the provided search results[1][6][8]. While several sources discuss similar Tailwind CSS plugins for px/rem conversion (liketailwindcss-convert-px-to-remat version 1.0.4[2][6][8]), these are different packages fromtailwindcss-preset-px-to-rem.For definitive version information:
- Check npm registry directly:
npm view tailwindcss-preset-px-to-rem version- Visit its Yarn package page: https://classic.yarnpkg.com/en/package/tailwindcss-preset-px-to-rem[1]
The search results only confirm that:
- It's actively maintained as of 2025 (based on Tailwind v4 compatibility mentions)[9]
- Supports base font size configuration via
remDivider(default: 20px)[1]- Handles spacing, font sizes, and border radius conversions[1]
Citations:
- 1: https://classic.yarnpkg.com/en/package/tailwindcss-preset-px-to-rem
- 2: https://npmjs.com/package/tailwindcss-convert-px-to-rem
- 3: tailwindlabs/tailwindcss#7785
- 4: https://github.com/odestry/tailwindcss-rem-to-px
- 5: https://tailwindcss.com/docs/upgrade-guide
- 6: https://classic.yarnpkg.com/en/package/tailwindcss-convert-px-to-rem
- 7: tailwindlabs/tailwindcss#1232
- 8: https://github.com/eugenepro2/tailwindcss-convert-px-to-rem/blob/main/package.json
- 9: https://tailwindcss.com/blog/tailwindcss-v4
- 10: https://www.npmjs.com/search?q=keywords%3Aconvert+px+to+rem
최신 버전 및 보안 취약점 확인 필요
현재
package.json의 해당 의존성은"tailwindcss-preset-px-to-rem": "^1.2.1"로 명시되어 있습니다.
검색 결과에서 최신 버전 번호가 명시적으로 제공되지 않았으므로, 아래의 절차를 통해 직접 최신 정보를 확인해주시기 바랍니다:
버전 확인:
- npm 레지스트리에서
npm view tailwindcss-preset-px-to-rem version명령어로 최신 버전 번호를 확인하세요.- 혹은 Yarn 패키지 페이지를 방문하여 확인할 수 있습니다.
보안 취약점 점검:
- 해당 패키지의 보안 이슈가 있는지 npm audit 등 관련 도구를 이용해 점검하시기 바랍니다.
package.json
Outdated
| "tailwindcss-preset-px-to-rem": "^1.2.1", | ||
| "typescript": "^5", | ||
| "@tanstack/react-query-devtools": "^5.66.0" |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/components/tab-sidemenu.tsx (2)
7-16: 인터페이스 문서화 개선이 필요합니다.인터페이스에 JSDoc 주석을 추가하여 더 자세한 설명을 제공하면 좋을 것 같습니다.
다음과 같이 개선해보세요:
+/** + * 탭 아이템의 기본 구조를 정의합니다. + */ export interface TabItem { id: number; text: string; } +/** + * TabInput 컴포넌트의 props를 정의합니다. + * @param tab - 편집할 탭 아이템 + * @param onInputChange - 입력값 변경 시 호출되는 콜백 + * @param onInputBlur - 포커스가 해제될 때 호출되는 콜백 + */ interface TabInputProps { tab: TabItem; onInputChange: (id: number, newValue: string) => void; onInputBlur: (id: number, text: string) => void; }
26-56: 컴포넌트 구현이 잘 되었습니다만, 몇 가지 개선사항이 있습니다.
- 구현이 React 모범 사례를 잘 따르고 있고, 접근성 속성도 적절히 사용되었습니다.
- 이전 리뷰 의견을 반영하여 점(·) 문자를 상수로 분리하면 좋겠습니다.
다음과 같이 개선해보세요:
+const DOT_SYMBOL = "·"; + export function TabInput({ tab, onInputChange, onInputBlur }: TabInputProps) { const inputRef = useRef<HTMLInputElement>(null); useEffect(() => { if (inputRef.current) { inputRef.current.focus(); } }, [tab.text]); return ( <div role="group" aria-label="Editable Tab" className={containerStyle()}> - <span className="mr-2">· </span> + <span className="mr-2">{DOT_SYMBOL} </span> <input ref={inputRef} placeholder="목표를 입력해주세요"
| const containerStyle = cva( | ||
| "flex items-center bg-white rounded px-2 text-[#334155] h-36 w-full", | ||
| ); | ||
|
|
||
| // 인풋 자체 스타일 | ||
| const inputStyle = cva("flex-1 bg-transparent outline-none"); |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
📑 작업 개요
✨ 작업 이유
📌 작업 내용
2025.02.13 수정
div에서 input으로 수정했습니다.
목표를 추가하면, input이 열립니다.
input에 내용을 기입하면, input이 고정됩니다.
input에 들어가 있던 내용을 모두 지우면, input이 삭제됩니다.
사용 방법
🖥️ 실행 화면
2025-02-13.163154.mp4
🤝🏻 해당 부분을 중점적으로 리뷰해주세요!
2025.02.13 수정
🎟️ 관련 이슈
close:
Summary by CodeRabbit