diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 2501089b1..fda66e3ad 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -15,7 +15,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",
@@ -13217,9 +13217,9 @@
       }
     },
     "node_modules/hang-log-design-system": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/hang-log-design-system/-/hang-log-design-system-1.3.0.tgz",
-      "integrity": "sha512-OiTWhbwdVyB+42tQviY9e7CF1Of6DoQ0Qi1VjWMASfiYKCju0dghqU3B3FTTZsdA4pEScFIToXonQVOGObn3Gg==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/hang-log-design-system/-/hang-log-design-system-1.3.1.tgz",
+      "integrity": "sha512-mS9RYT1oP4Dy4ELz0m1zHuV1/nhx509UPe2LJFhldfjpykIBAHb0FpSj0V0gUrXT0XV9hE77PdsBsy+L1C39/w==",
       "dependencies": {
         "@emotion/react": "^11.11.1",
         "@emotion/styled": "^11.11.0",
@@ -30753,9 +30753,9 @@
       }
     },
     "hang-log-design-system": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/hang-log-design-system/-/hang-log-design-system-1.3.0.tgz",
-      "integrity": "sha512-OiTWhbwdVyB+42tQviY9e7CF1Of6DoQ0Qi1VjWMASfiYKCju0dghqU3B3FTTZsdA4pEScFIToXonQVOGObn3Gg==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/hang-log-design-system/-/hang-log-design-system-1.3.1.tgz",
+      "integrity": "sha512-mS9RYT1oP4Dy4ELz0m1zHuV1/nhx509UPe2LJFhldfjpykIBAHb0FpSj0V0gUrXT0XV9hE77PdsBsy+L1C39/w==",
       "requires": {
         "@emotion/react": "^11.11.1",
         "@emotion/styled": "^11.11.0",
diff --git a/frontend/package.json b/frontend/package.json
index c18aba5f3..e61a44a88 100644
--- 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
index e1f44f3aa..56959fdcb 100644
--- 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
index 85e3d3316..1d56154c2 100644
--- 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
index 750ae01ec..886e1bbec 100644
--- a/frontend/src/stories/trip/StarRatingInput.stories.tsx
+++ b/frontend/src/stories/trip/StarRatingInput.stories.tsx
@@ -11,6 +11,7 @@ const meta = {
   component: StarRatingInput,
   args: {
     rating: 0,
+    isMobile: false,
   },
 } satisfies Meta<typeof StarRatingInput>;
 
@@ -18,7 +19,7 @@ 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}
+      />
+    );
   },
 };