모바일 환경에서 StarRatingInput 호버 문제 수정 (#550)

* refactor: 디자인시스템 1.3.0 버전업 * refactor: 모바일 환경에서 StarRatingInput 호버 문제 수정
woowacourse-teams · Sep 11, 2023 · 8645b1a · 8645b1a
1 parent 72933a0
commit 8645b1a
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 11 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -42,7 +42,7 @@
     "@tanstack/react-query": "^4.29.19",
     "axios": "^1.4.0",
     "dotenv": "^16.3.1",
-    "hang-log-design-system": "^1.3.0",
+    "hang-log-design-system": "^1.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.1",

diff --git a/frontend/src/components/trip/TripItemAddModal/StarRatingInput/StarRatingInput.tsx b/frontend/src/components/trip/TripItemAddModal/StarRatingInput/StarRatingInput.tsx
@@ -6,10 +6,11 @@ import type { StarRatingData, TripItemFormData } from '@type/tripItem';
 
 interface StarRatingInputProps {
   rating: StarRatingData | null;
+  isMobile: boolean;
   updateInputValue: <K extends keyof TripItemFormData>(key: K, value: TripItemFormData[K]) => void;
 }
 
-const StarRatingInput = ({ rating, updateInputValue }: StarRatingInputProps) => {
+const StarRatingInput = ({ rating, isMobile, updateInputValue }: StarRatingInputProps) => {
   const handleRatingChange = (rate: StarRatingData) => {
     const newRate = rate || null;
     updateInputValue('rating', newRate);
@@ -22,6 +23,7 @@ const StarRatingInput = ({ rating, updateInputValue }: StarRatingInputProps) =>
 
   return (
     <StarRating
+      isMobile={isMobile}
       label="별점"
       size={32}
       gap={8}

diff --git a/frontend/src/components/trip/TripItemAddModal/TripItemAddModal.tsx b/frontend/src/components/trip/TripItemAddModal/TripItemAddModal.tsx
@@ -93,6 +93,7 @@ const TripItemAddModal = ({
               <StarRatingInput
                 rating={tripItemInformation.rating}
                 updateInputValue={updateInputValue}
+                isMobile={isMobile}
               />
               <ExpenseInput
                 initialExpenseValue={tripItemInformation.expense}

diff --git a/frontend/src/stories/trip/StarRatingInput.stories.tsx b/frontend/src/stories/trip/StarRatingInput.stories.tsx
@@ -11,14 +11,15 @@ const meta = {
   component: StarRatingInput,
   args: {
     rating: 0,
+    isMobile: false,
   },
 } satisfies Meta<typeof StarRatingInput>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  render: () => {
+  render: ({ ...args }) => {
     const [value, setValue] = useState<StarRatingData>(0);
 
     const updateInputValue = <K extends keyof TripItemFormData>(
@@ -28,6 +29,12 @@ export const Default: Story = {
       setValue(value as StarRatingData);
     };
 
-    return <StarRatingInput rating={value} updateInputValue={updateInputValue} />;
+    return (
+      <StarRatingInput
+        isMobile={args.isMobile}
+        rating={value}
+        updateInputValue={updateInputValue}
+      />
+    );
   },
 };