Repository: SOPT-all/36-COLLABORATION-WEB-INTERPARK-TICKET
Pull request #24: feat: Home 전체보기 버튼 컴포넌트 구현 
Author: login: soyyyyy
Labels: name: 소이
name: style
description: 컴포넌트 제작, UI 코드 변경
Created: 2025-05-14T16:02:48Z | Merged: 2025-05-15T17:14:05Z

## 📝 PR 내용 요약

- 홈의 전체 보기 버튼 컴포넌트를 구현했습니다.

## ✅ 작업 상세

- keyword 안에 뮤지컬 랭킹, 할인티켓, 오픈 예정 공연 넣어주시면 됩니다! 

```tsx
<HomeAddButton keyword="할인티켓" />
```

## #️⃣ 연관 이슈

>  #22 

## 🖼️ 변경된 화면 (선택)

![image](https://github.com/user-attachments/assets/d40a6eb3-953c-4985-8b72-573ae171b0ba)


## 💬 기타 논의 사항 (선택)

- 이슈/리뷰 요청/고민 중인 내용 등

## 💬 리뷰 요구사항 (선택)

- 리뷰 시 꼭 봐줬으면 하는 부분이 있다면 작성



Diff:
diff --git a/package.json b/package.json
index b54fdd4..7d94a9e 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.32.0",
     "vite": "^6.3.5",
+    "vite-plugin-svgr": "^4.3.0",
     "vite-plugin-vanilla-extract": "^0.0.0"
   }
 }
diff --git a/src/pages/ComponentTest/ComponentTest.tsx b/src/pages/ComponentTest/ComponentTest.tsx
index 17717c8..d1bfa82 100644
--- a/src/pages/ComponentTest/ComponentTest.tsx
+++ b/src/pages/ComponentTest/ComponentTest.tsx
@@ -1,38 +1,18 @@
-import SeatSelectChip from '@/shared/components/SeatSelectChip/SeatSelectChip';
-import { useState } from 'react';
+import HomeAddButton from "@/shared/components/HomeAddButton/HomeAddButton";
 
 const ComponentTest = () => {
-  const [selectedSeat, setSelectedSeat] = useState<'S' | 'R' | null>(null);
 
   return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '2rem',
-      }}
-    >
       <div
         style={{
           display: 'flex',
           padding: '1rem',
           gap: '0.6rem',
-          backgroundColor: '#3B3D44',
         }}
       >
-        <SeatSelectChip
-          seatType="S"
-          isSelected={selectedSeat === 'S'}
-          onClick={() => setSelectedSeat('S')}
-        />
+        <HomeAddButton keyword="할인티켓" />
 
-        <SeatSelectChip
-          seatType="R"
-          isSelected={selectedSeat === 'R'}
-          onClick={() => setSelectedSeat('R')}
-        />
       </div>
-    </div>
   );
 };
 
diff --git a/src/shared/assets/icon/ic_arrow_right_gray70_16.svg b/src/shared/assets/icon/ic_arrow_right_gray70_16.svg
new file mode 100644
index 0000000..634ab82
--- /dev/null
+++ b/src/shared/assets/icon/ic_arrow_right_gray70_16.svg
@@ -0,0 +1,5 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="ic_arrow_right_gray70_16">
+<path id="Vector 8" d="M5.50006 2L11.1001 7.6L5.50006 13.2" stroke="#575757" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/src/shared/components/HomeAddButton/HomeAddButton.css.ts b/src/shared/components/HomeAddButton/HomeAddButton.css.ts
new file mode 100644
index 0000000..df13393
--- /dev/null
+++ b/src/shared/components/HomeAddButton/HomeAddButton.css.ts
@@ -0,0 +1,28 @@
+import { vars } from '@styles/tokens.css';
+import { fontStyle } from '@/shared/styles/fontStyle';
+import { style } from '@vanilla-extract/css';
+
+export const button = style({
+  display: 'flex',
+  width: '33.8rem',
+  height: '4.4rem',
+  padding: '1.2rem 10.3rem',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gap: '0.3rem',
+  borderRadius: '0.4rem',
+  border: '1px solid',
+  borderColor: vars.color.gray20,
+});
+
+
+export const text = style({
+  color: vars.color.black,
+  ...fontStyle('b7_b_14_1'),
+});
+
+export const ARIcon = style({
+  width: '1.6rem',
+  height: '1.6rem', 
+});
+
diff --git a/src/shared/components/HomeAddButton/HomeAddButton.tsx b/src/shared/components/HomeAddButton/HomeAddButton.tsx
new file mode 100644
index 0000000..2a82370
--- /dev/null
+++ b/src/shared/components/HomeAddButton/HomeAddButton.tsx
@@ -0,0 +1,19 @@
+import * as styles from './HomeAddButton.css';
+import ArrowRight from "@assets/icon/ic_arrow_right_gray70_16.svg";
+
+type KeywordType = '뮤지컬 랭킹' | '할인티켓' | '오픈 예정 공연';
+interface ViewMoreProps {
+  keyword: KeywordType;
+}
+
+const HomeAddButton = ({ keyword }: ViewMoreProps) => {
+
+  return (
+    <button className={styles.button}>
+        <p className={styles.text}>{keyword} 전체보기</p>
+        <img src={ArrowRight} alt='ARIcon' className={styles.ARIcon} />
+    </button>
+  )
+};
+
+export default HomeAddButton;
diff --git a/src/shared/components/SeatSelectChip/SeatSelectChip.tsx b/src/shared/components/SeatSelectChip/SeatSelectChip.tsx
deleted file mode 100644
index 6dbe982..0000000
--- a/src/shared/components/SeatSelectChip/SeatSelectChip.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as styles from './SeatSelectChip.css';
-import SIcon from '@/shared/assets/icon/ic_S_seat.svg';
-import RIcon from '@/shared/assets/icon/ic_R_seat.svg';
-
-type SeatType = 'S' | 'R';
-
-interface Props {
-  seatType: SeatType;
-  isSelected: boolean;
-  onClick?: () => void;
-}
-
-const SeatSelectChip = ({ seatType, isSelected, onClick }: Props) => {
-  const icon = seatType === 'S' ? SIcon : RIcon;
-
-  return (
-    <button
-      type="button"
-      className={styles.seatSelectChip({ isSelected })}
-      onClick={onClick}
-    >
-      <img src={icon} alt={`${seatType}석 아이콘`} />
-      <p className={styles.seatText}>{seatType}석</p>
-    </button>
-  );
-};
-
-export default SeatSelectChip;
diff --git a/vite.config.ts b/vite.config.ts
index 6fc2b7b..c695900 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,9 +1,10 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import svgr from 'vite-plugin-svgr'
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react(), vanillaExtractPlugin()],
+  plugins: [react(), vanillaExtractPlugin(), svgr()],
   resolve: {
     alias: {
       "@": "/src",
diff --git a/yarn.lock b/yarn.lock
index abbb2a8..69f8cd2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10,7 +10,7 @@
     "@jridgewell/gen-mapping" "^0.3.5"
     "@jridgewell/trace-mapping" "^0.3.24"
 
-"@babel/code-frame@^7.27.1":
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.27.1":
   version "7.27.1"
   resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz"
   integrity sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==
@@ -24,7 +24,7 @@
   resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.27.2.tgz"
   integrity sha512-TUtMJYRPyUb/9aU8f3K0mjmjf6M9N5Woshn2CS6nqJSeJtTtQcpLUXjGt9vbF8ZGff0El99sWkLgzwW3VXnxZQ==
 
-"@babel/core@^7.23.9":
+"@babel/core@^7.21.3", "@babel/core@^7.23.9":
   version "7.27.1"
   resolved "https://registry.npmjs.org/@babel/core/-/core-7.27.1.tgz"
   integrity sha512-IaaGWsQqfsQWVLqMn9OB92MNN7zukfVA4s7KKAI0KfrrDsZ0yhi5uV4baBuLuN7n3vsZpwP8asPPcVwApxvjBQ==
@@ -153,7 +153,7 @@
     debug "^4.3.1"
     globals "^11.1.0"
 
-"@babel/types@^7.27.1":
+"@babel/types@^7.21.3", "@babel/types@^7.27.1":
   version "7.27.1"
   resolved "https://registry.npmjs.org/@babel/types/-/types-7.27.1.tgz"
   integrity sha512-+EzkxvLNfiUeKMgy/3luqfsCWFRXLb7U6wNQTk60tovuckwB15B191tJWvpp4HjiQWdJkCxO3Wbvc6jlk3Xb2Q==
@@ -493,6 +493,15 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@rollup/pluginutils@^5.1.3":
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.4.tgz#bb94f1f9eaaac944da237767cdfee6c5b2262d4a"
+  integrity sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    estree-walker "^2.0.2"
+    picomatch "^4.0.2"
+
 "@rollup/rollup-android-arm-eabi@4.40.2":
   version "4.40.2"
   resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.40.2.tgz#c228d00a41f0dbd6fb8b7ea819bbfbf1c1157a10"
@@ -598,6 +607,89 @@
   resolved "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz"
   integrity sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==
 
+"@svgr/babel-plugin-add-jsx-attribute@8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz#4001f5d5dd87fa13303e36ee106e3ff3a7eb8b22"
+  integrity sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==
+
+"@svgr/babel-plugin-remove-jsx-attribute@8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz#69177f7937233caca3a1afb051906698f2f59186"
+  integrity sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==
+
+"@svgr/babel-plugin-remove-jsx-empty-expression@8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz#c2c48104cfd7dcd557f373b70a56e9e3bdae1d44"
+  integrity sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==
+
+"@svgr/babel-plugin-replace-jsx-attribute-value@8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-8.0.0.tgz#8fbb6b2e91fa26ac5d4aa25c6b6e4f20f9c0ae27"
+  integrity sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==
+
+"@svgr/babel-plugin-svg-dynamic-title@8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-8.0.0.tgz#1d5ba1d281363fc0f2f29a60d6d936f9bbc657b0"
+  integrity sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==
+
+"@svgr/babel-plugin-svg-em-dimensions@8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-8.0.0.tgz#35e08df300ea8b1d41cb8f62309c241b0369e501"
+  integrity sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==
+
+"@svgr/babel-plugin-transform-react-native-svg@8.1.0":
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-8.1.0.tgz#90a8b63998b688b284f255c6a5248abd5b28d754"
+  integrity sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==
+
+"@svgr/babel-plugin-transform-svg-component@8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-8.0.0.tgz#013b4bfca88779711f0ed2739f3f7efcefcf4f7e"
+  integrity sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==
+
+"@svgr/babel-preset@8.1.0":
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-8.1.0.tgz#0e87119aecdf1c424840b9d4565b7137cabf9ece"
+  integrity sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==
+  dependencies:
+    "@svgr/babel-plugin-add-jsx-attribute" "8.0.0"
+    "@svgr/babel-plugin-remove-jsx-attribute" "8.0.0"
+    "@svgr/babel-plugin-remove-jsx-empty-expression" "8.0.0"
+    "@svgr/babel-plugin-replace-jsx-attribute-value" "8.0.0"
+    "@svgr/babel-plugin-svg-dynamic-title" "8.0.0"
+    "@svgr/babel-plugin-svg-em-dimensions" "8.0.0"
+    "@svgr/babel-plugin-transform-react-native-svg" "8.1.0"
+    "@svgr/babel-plugin-transform-svg-component" "8.0.0"
+
+"@svgr/core@^8.1.0":
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/@svgr/core/-/core-8.1.0.tgz#41146f9b40b1a10beaf5cc4f361a16a3c1885e88"
+  integrity sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==
+  dependencies:
+    "@babel/core" "^7.21.3"
+    "@svgr/babel-preset" "8.1.0"
+    camelcase "^6.2.0"
+    cosmiconfig "^8.1.3"
+    snake-case "^3.0.4"
+
+"@svgr/hast-util-to-babel-ast@8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-8.0.0.tgz#6952fd9ce0f470e1aded293b792a2705faf4ffd4"
+  integrity sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==
+  dependencies:
+    "@babel/types" "^7.21.3"
+    entities "^4.4.0"
+
+"@svgr/plugin-jsx@^8.1.0":
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-8.1.0.tgz#96969f04a24b58b174ee4cd974c60475acbd6928"
+  integrity sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==
+  dependencies:
+    "@babel/core" "^7.21.3"
+    "@svgr/babel-preset" "8.1.0"
+    "@svgr/hast-util-to-babel-ast" "8.0.0"
+    svg-parser "^2.0.4"
+
 "@swc/core-darwin-arm64@1.11.24":
   version "1.11.24"
   resolved "https://registry.yarnpkg.com/@swc/core-darwin-arm64/-/core-darwin-arm64-1.11.24.tgz#c9fcc9c4bad0511fed26210449556d2b33fb2d9a"
@@ -691,7 +783,7 @@
   dependencies:
     "@tanstack/query-core" "5.75.7"
 
-"@types/estree@1.0.7", "@types/estree@^1.0.6":
+"@types/estree@1.0.7", "@types/estree@^1.0.0", "@types/estree@^1.0.6":
   version "1.0.7"
   resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz"
   integrity sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==
@@ -1130,6 +1222,11 @@ callsites@^3.0.0:
   resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
+camelcase@^6.2.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
+  integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
+
 caniuse-lite@^1.0.30001716:
   version "1.0.30001717"
   resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001717.tgz"
@@ -1212,6 +1309,16 @@ cors@^2.8.5:
     object-assign "^4"
     vary "^1"
 
+cosmiconfig@^8.1.3:
+  version "8.3.6"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-8.3.6.tgz#060a2b871d66dba6c8538ea1118ba1ac16f5fae3"
+  integrity sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==
+  dependencies:
+    import-fresh "^3.3.0"
+    js-yaml "^4.1.0"
+    parse-json "^5.2.0"
+    path-type "^4.0.0"
+
 cross-spawn@^7.0.3, cross-spawn@^7.0.6:
   version "7.0.6"
   resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz"
@@ -1332,6 +1439,14 @@ doctrine@^2.1.0:
   dependencies:
     esutils "^2.0.2"
 
+dot-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
+  integrity sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+
 dunder-proto@^1.0.0, dunder-proto@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz"
@@ -1356,6 +1471,18 @@ encodeurl@^2.0.0:
   resolved "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz"
   integrity sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==
 
+entities@^4.4.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
+  integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
+
+error-ex@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
+  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
+  dependencies:
+    is-arrayish "^0.2.1"
+
 es-abstract@^1.17.5, es-abstract@^1.23.2, es-abstract@^1.23.3, es-abstract@^1.23.5, es-abstract@^1.23.6, es-abstract@^1.23.9:
   version "1.23.9"
   resolved "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.9.tgz"
@@ -1698,6 +1825,11 @@ estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
   resolved "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz"
   integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
 
+estree-walker@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
+  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
+
 esutils@^2.0.2:
   version "2.0.3"
   resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz"
@@ -2061,7 +2193,7 @@ ignore@^5.2.0, ignore@^5.3.1:
   resolved "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz"
   integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==
 
-import-fresh@^3.2.1:
+import-fresh@^3.2.1, import-fresh@^3.3.0:
   version "3.3.1"
   resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz"
   integrity sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==
@@ -2102,6 +2234,11 @@ is-array-buffer@^3.0.4, is-array-buffer@^3.0.5:
     call-bound "^1.0.3"
     get-intrinsic "^1.2.6"
 
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+  integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
+
 is-async-function@^2.0.0:
   version "2.1.1"
   resolved "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz"
@@ -2324,6 +2461,11 @@ json-buffer@3.0.1:
   resolved "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz"
   integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
 
+json-parse-even-better-errors@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
 json-schema-traverse@^0.4.1:
   version "0.4.1"
   resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz"
@@ -2371,6 +2513,11 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
+lines-and-columns@^1.1.6:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
+  integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
+
 locate-path@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz"
@@ -2390,6 +2537,13 @@ loose-envify@^1.4.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
+lower-case@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"
+  integrity sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==
+  dependencies:
+    tslib "^2.0.3"
+
 lru-cache@^10.4.3:
   version "10.4.3"
   resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz"
@@ -2520,6 +2674,14 @@ negotiator@^1.0.0:
   resolved "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz"
   integrity sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==
 
+no-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d"
+  integrity sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==
+  dependencies:
+    lower-case "^2.0.2"
+    tslib "^2.0.3"
+
 node-releases@^2.0.19:
   version "2.0.19"
   resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz"
@@ -2647,6 +2809,16 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
+parse-json@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
+  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-even-better-errors "^2.3.0"
+    lines-and-columns "^1.1.6"
+
 parseurl@^1.3.3:
   version "1.3.3"
   resolved "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz"
@@ -2672,6 +2844,11 @@ path-to-regexp@^8.0.0:
   resolved "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.2.0.tgz"
   integrity sha512-TdrF7fW9Rphjq4RjrW0Kp2AW0Ahwu9sRGTkS6bvDi0SCwZlEZYmcfDbEsTz8RVk0EHIS/Vd1bv3JhG+1xZuAyQ==
 
+path-type@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
+  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
+
 pathe@^2.0.1, pathe@^2.0.3:
   version "2.0.3"
   resolved "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz"
@@ -3088,6 +3265,14 @@ side-channel@^1.1.0:
     side-channel-map "^1.0.1"
     side-channel-weakmap "^1.0.2"
 
+snake-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c"
+  integrity sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==
+  dependencies:
+    dot-case "^3.0.4"
+    tslib "^2.0.3"
+
 source-map-js@^1.0.1, source-map-js@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz"
@@ -3179,6 +3364,11 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+svg-parser@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
+  integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==
+
 tinyglobby@^0.2.13:
   version "0.2.13"
   resolved "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.13.tgz"
@@ -3214,6 +3404,11 @@ tsconfig-paths@^3.15.0:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
+tslib@^2.0.3:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
+
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
   resolved "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz"
@@ -3345,6 +3540,15 @@ vite-node@^3.0.4:
     pathe "^2.0.3"
     vite "^5.0.0 || ^6.0.0"
 
+vite-plugin-svgr@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/vite-plugin-svgr/-/vite-plugin-svgr-4.3.0.tgz#742f16f11375996306c696ec323e4d23f6005075"
+  integrity sha512-Jy9qLB2/PyWklpYy0xk0UU3TlU0t2UMpJXZvf+hWII1lAmRHrOUKi11Uw8N3rxoNk7atZNYO3pR3vI1f7oi+6w==
+  dependencies:
+    "@rollup/pluginutils" "^5.1.3"
+    "@svgr/core" "^8.1.0"
+    "@svgr/plugin-jsx" "^8.1.0"
+
 vite-plugin-vanilla-extract@^0.0.0:
   version "0.0.0"
   resolved "https://registry.npmjs.org/vite-plugin-vanilla-extract/-/vite-plugin-vanilla-extract-0.0.0.tgz"


Reviews:
user: login: mnbvcxzyj
body: 고생하셨습니당 ~~~~ 전체보기 버튼 구현하기의 달인... 

오타 확인 잘 해주세요!!!! 
state: CHANGES_REQUESTED
author_association: MEMBER
submitted_at: 2025-05-15T05:54:08Z
user: login: soyyyyy
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-15T13:08:39Z
user: login: soyyyyy
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-15T13:09:48Z
user: login: soyyyyy
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-15T13:11:54Z
user: login: soyyyyy
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-15T13:12:19Z
user: login: mnbvcxzyj
body: 굿 !!! 리뷰 반영 확인했습니당 고생했어요 !!
state: APPROVED
author_association: MEMBER
submitted_at: 2025-05-15T15:23:59Z
user: login: jllee000
body: 잘했따짱짱맨~~@_@
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-05-15T15:54:52Z

Review comments:
diff_hunk: @@ -0,0 +1,21 @@
+import * as styles from './HomeAddButton.css';
+import ArrowRight from "@assets/icon/ic_arrow_right_gray70_16.svg";
+
+type ViewMoreProps = {
+  keyword: string; // 뮤지컬 랭킹, 할인티켓, 오픈 예정 공연
+};
+
+
+const HomeAddButton = ({ keyword }: ViewMoreProps) => {
+
+  return (
+    <div>
path: src/shared/components/HomeAddButton/HomeAddButton.tsx
user: login: mnbvcxzyj
body: button이 이미 블록 역할을 하기 때문에 div 제거해도 충분합니다 !! 
created_at: 2025-05-15T05:51:32Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,28 @@
+import { vars } from '@styles/tokens.css';
+import { fontStyle } from '@/shared/styles/fontStyle';
+import { style } from '@vanilla-extract/css';
+
+export const button = style({
+  display: 'flex',
+  width: '33.8rem',
+  height: '4.4rem',
+  padding: '1.2rem 11.05re',
path: src/shared/components/HomeAddButton/HomeAddButton.css.ts
user: login: mnbvcxzyj
body: 오타났습니다 !! 
created_at: 2025-05-15T05:51:47Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,28 @@
+import { vars } from '@styles/tokens.css';
+import { fontStyle } from '@/shared/styles/fontStyle';
+import { style } from '@vanilla-extract/css';
+
+export const button = style({
+  display: 'flex',
+  width: '33.8rem',
+  height: '4.4rem',
+  padding: '1.2rem 11.05re',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gap: '0.3rem',
+  borderRadius: '.4rem',
path: src/shared/components/HomeAddButton/HomeAddButton.css.ts
user: login: mnbvcxzyj
body: 여기도 오타있어요!
created_at: 2025-05-15T05:51:54Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,21 @@
+import * as styles from './HomeAddButton.css';
+import ArrowRight from "@assets/icon/ic_arrow_right_gray70_16.svg";
+
+type ViewMoreProps = {
+  keyword: string; // 뮤지컬 랭킹, 할인티켓, 오픈 예정 공연
+};
path: src/shared/components/HomeAddButton/HomeAddButton.tsx
user: login: mnbvcxzyj
body: keyword값이 정해져있다면 

```suggestion
type KeywordType = '뮤지컬 랭킹' | '할인티켓' | '오픈 예정 공연';

interface ViewMoreProps {
  keyword: KeywordType;
}
```
이런식으로 유니온 타입으로 작성해주면 휴먼에러를 방지할 수 있습니닷 
created_at: 2025-05-15T05:53:45Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,21 @@
+import * as styles from './HomeAddButton.css';
+import ArrowRight from "@assets/icon/ic_arrow_right_gray70_16.svg";
+
+type ViewMoreProps = {
+  keyword: string; // 뮤지컬 랭킹, 할인티켓, 오픈 예정 공연
+};
+
+
+const HomeAddButton = ({ keyword }: ViewMoreProps) => {
+
+  return (
+    <div>
path: src/shared/components/HomeAddButton/HomeAddButton.tsx
user: login: soyyyyy
body: 아하 감사합니다!
created_at: 2025-05-15T13:08:39Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,28 @@
+import { vars } from '@styles/tokens.css';
+import { fontStyle } from '@/shared/styles/fontStyle';
+import { style } from '@vanilla-extract/css';
+
+export const button = style({
+  display: 'flex',
+  width: '33.8rem',
+  height: '4.4rem',
+  padding: '1.2rem 11.05re',
path: src/shared/components/HomeAddButton/HomeAddButton.css.ts
user: login: soyyyyy
body: 오류가 안 뜨니까 매우 찾기 힘드네요,,, 감사합니당
created_at: 2025-05-15T13:09:48Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,21 @@
+import * as styles from './HomeAddButton.css';
+import ArrowRight from "@assets/icon/ic_arrow_right_gray70_16.svg";
+
+type ViewMoreProps = {
+  keyword: string; // 뮤지컬 랭킹, 할인티켓, 오픈 예정 공연
+};
path: src/shared/components/HomeAddButton/HomeAddButton.tsx
user: login: soyyyyy
body: 우와 감사합니다

created_at: 2025-05-15T13:11:54Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,28 @@
+import { vars } from '@styles/tokens.css';
+import { fontStyle } from '@/shared/styles/fontStyle';
+import { style } from '@vanilla-extract/css';
+
+export const button = style({
+  display: 'flex',
+  width: '33.8rem',
+  height: '4.4rem',
+  padding: '1.2rem 11.05re',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gap: '0.3rem',
+  borderRadius: '.4rem',
path: src/shared/components/HomeAddButton/HomeAddButton.css.ts
user: login: soyyyyy
body: 아 이거 다른 파일에서도 그냥 소숫점 앞자리 생략한거였는데 앞으론 0. 잘 붙이겠습니다!!!
created_at: 2025-05-15T13:12:19Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,19 @@
+import * as styles from './HomeAddButton.css';
+import ArrowRight from "@assets/icon/ic_arrow_right_gray70_16.svg";
+
+type KeywordType = '뮤지컬 랭킹' | '할인티켓' | '오픈 예정 공연';
+interface ViewMoreProps {
+  keyword: KeywordType;
+}
+
path: src/shared/components/HomeAddButton/HomeAddButton.tsx
user: login: jllee000
body: 타입 제한 걸어두는거 짱짱맨~
created_at: 2025-05-15T15:54:32Z
author_association: MEMBER

PR comments:
user: login: github-actions[bot]
created_at: 2025-05-14T16:03:19Z
body: ### 빌드 결과
빌드 성공 🎉
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-14T16:19:53Z
body: ### 빌드 결과
빌드 성공 🎉
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-15T13:13:26Z
body: ### 빌드 결과
빌드 성공 🎉
author_association: NONE