@apt.today/react-seoul-icons 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +195 -40
  2. package/dist/index.d.mts +90 -1
  3. package/dist/index.d.ts +90 -1
  4. package/dist/index.js +268 -0
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +260 -2
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -42,45 +42,177 @@ function App() {
42
42
  }
43
43
  ```
44
44
 
45
- ### 모든 컴포넌트 Import
45
+ ### 전체 Import (네임스페이스)
46
46
 
47
47
  ```tsx
48
48
  import * as SeoulIcons from "@apt.today/react-seoul-icons";
49
49
 
50
50
  function App() {
51
- return <SeoulIcons.GangnamGu className="w-12 h-12" />;
51
+ return (
52
+ <div>
53
+ <SeoulIcons.GangnamGu width={48} />
54
+ <SeoulIcons.JongnoGu className="w-12 h-12" />
55
+ </div>
56
+ );
57
+ }
58
+ ```
59
+
60
+ ### 동적 아이콘 렌더링 (컴포넌트 이름 기반)
61
+
62
+ ```tsx
63
+ import * as SeoulIcons from "@apt.today/react-seoul-icons";
64
+
65
+ const districts = ["GangnamGu", "MapoGu", "JongnoGu"];
66
+
67
+ function App() {
68
+ return (
69
+ <div className="flex gap-4">
70
+ {districts.map((name) => {
71
+ const Icon = SeoulIcons[name as keyof typeof SeoulIcons] as React.FC<
72
+ React.SVGProps<SVGSVGElement>
73
+ >;
74
+ return <Icon key={name} width={48} height={48} />;
75
+ })}
76
+ </div>
77
+ );
78
+ }
79
+ ```
80
+
81
+ ### 행정구역 코드로 아이콘 가져오기 ⭐
82
+
83
+ ```tsx
84
+ import { getIconByCode } from "@apt.today/react-seoul-icons";
85
+
86
+ function App() {
87
+ const GangnamIcon = getIconByCode(11680); // 강남구
88
+ const JungIcon = getIconByCode(11140); // 중구
89
+
90
+ return (
91
+ <div>
92
+ {GangnamIcon && <GangnamIcon width={48} height={48} />}
93
+ {JungIcon && <JungIcon width={48} height={48} />}
94
+ </div>
95
+ );
96
+ }
97
+ ```
98
+
99
+ ### 이름으로 아이콘 가져오기
100
+
101
+ ```tsx
102
+ import { getIconByName } from "@apt.today/react-seoul-icons";
103
+
104
+ // 다양한 형식 지원
105
+ const Icon1 = getIconByName("강남구"); // ✅
106
+ const Icon2 = getIconByName("강남"); // ✅
107
+ const Icon3 = getIconByName("서울특별시 강남구"); // ✅
108
+ const Icon4 = getIconByName("서울 강남구"); // ✅
109
+
110
+ // 중복되는 이름(중구 등)은 region 옵션 필요
111
+ const SeoulJung = getIconByName("중구", { region: "서울" }); // ✅
112
+ const BusanJung = getIconByName("중구", { region: "부산" }); // ✅ (추후 지원)
113
+ ```
114
+
115
+ ### 모든 지역 정보 가져오기
116
+
117
+ ```tsx
118
+ import {
119
+ getAllDistrictInfo,
120
+ getDistrictsByRegion,
121
+ } from "@apt.today/react-seoul-icons";
122
+
123
+ // 모든 지역 정보
124
+ const allDistricts = getAllDistrictInfo();
125
+
126
+ // 서울시만 가져오기
127
+ const seoulDistricts = getDistrictsByRegion("서울");
128
+
129
+ function App() {
130
+ return (
131
+ <div>
132
+ {seoulDistricts.map((district) => {
133
+ const Icon = district.component;
134
+ return (
135
+ <div key={district.code}>
136
+ <Icon width={48} height={48} />
137
+ <span>{district.name}</span>
138
+ <code>{district.code}</code>
139
+ </div>
140
+ );
141
+ })}
142
+ </div>
143
+ );
144
+ }
145
+ ```
146
+
147
+ ## API 레퍼런스
148
+
149
+ ### 아이콘 가져오기
150
+
151
+ | 함수 | 설명 | 반환 타입 |
152
+ | ------------------------------- | ------------------------------- | --------------------------- |
153
+ | `getIconByCode(code)` | 행정구역 코드로 아이콘 가져오기 | `Component \| undefined` |
154
+ | `getIconByName(name, options?)` | 이름으로 아이콘 가져오기 | `Component \| undefined` |
155
+ | `getDistrictInfo(code)` | 행정구역 코드로 정보 가져오기 | `DistrictInfo \| undefined` |
156
+ | `getNameByCode(code)` | 행정구역 코드로 이름 가져오기 | `string \| undefined` |
157
+ | `getAllDistrictInfo()` | 모든 지역 정보 가져오기 | `readonly DistrictInfo[]` |
158
+ | `getDistrictsByRegion(region)` | 특정 시/도의 지역 정보 | `DistrictInfo[]` |
159
+ | `getAllCodes()` | 모든 행정구역 코드 목록 | `number[]` |
160
+ | `isValidCode(code)` | 유효한 코드인지 확인 | `boolean` |
161
+
162
+ ### 타입
163
+
164
+ ```tsx
165
+ import type {
166
+ RegionCode, // "서울" | "부산" | "대구" | ...
167
+ SeoulGuCode, // 11110 | 11140 | ...
168
+ DistrictInfo, // 지역 정보 객체
169
+ SeoulGuIconComponent, // SVG 컴포넌트 타입
170
+ GetIconByNameOptions, // { region?: RegionCode }
171
+ } from "@apt.today/react-seoul-icons";
172
+ ```
173
+
174
+ ### DistrictInfo 타입
175
+
176
+ ```tsx
177
+ interface DistrictInfo {
178
+ code: number; // 행정구역 코드 (예: 11680)
179
+ region: RegionCode; // 시/도 (예: "서울")
180
+ regionFullName: string; // 시/도 전체 이름 (예: "서울특별시")
181
+ name: string; // 구 이름 (예: "강남구")
182
+ shortName: string; // 짧은 이름 (예: "강남")
183
+ component: SeoulGuIconComponent; // React 컴포넌트
52
184
  }
53
185
  ```
54
186
 
55
- ## 지원하는 행정구
56
-
57
- | 컴포넌트명 | 행정구 |
58
- | ---------------- | -------- |
59
- | `DobongGu` | 도봉구 |
60
- | `DongdaemunGu` | 동대문구 |
61
- | `DongjakGu` | 동작구 |
62
- | `EunpyeongGu` | 은평구 |
63
- | `GangbukGu` | 강북구 |
64
- | `GangdongGu` | 강동구 |
65
- | `GangnamGu` | 강남구 |
66
- | `GangseoGu` | 강서구 |
67
- | `GeumcheonGu` | 금천구 |
68
- | `GuroGu` | 구로구 |
69
- | `GwanakGu` | 관악구 |
70
- | `GwangjinGu` | 광진구 |
71
- | `JongnoGu` | 종로구 |
72
- | `JungGu` | 중구 |
73
- | `JungnangGu` | 중랑구 |
74
- | `MapoGu` | 마포구 |
75
- | `NowonGu` | 노원구 |
76
- | `SeochoGu` | 서초구 |
77
- | `SeodaemunGu` | 서대문구 |
78
- | `SeongbukGu` | 성북구 |
79
- | `SeongdongGu` | 성동구 |
80
- | `SongpaGu` | 송파구 |
81
- | `YangcheonGu` | 양천구 |
82
- | `YeongdeungpoGu` | 영등포구 |
83
- | `YongsanGu` | 용산구 |
187
+ ## 행정구역 코드표
188
+
189
+ | 코드 | 행정구 | 컴포넌트명 |
190
+ | ------- | -------- | ---------------- |
191
+ | `11110` | 종로구 | `JongnoGu` |
192
+ | `11140` | 중구 | `JungGu` |
193
+ | `11170` | 용산구 | `YongsanGu` |
194
+ | `11200` | 성동구 | `SeongdongGu` |
195
+ | `11215` | 광진구 | `GwangjinGu` |
196
+ | `11230` | 동대문구 | `DongdaemunGu` |
197
+ | `11260` | 중랑구 | `JungnangGu` |
198
+ | `11290` | 성북구 | `SeongbukGu` |
199
+ | `11305` | 강북구 | `GangbukGu` |
200
+ | `11320` | 도봉구 | `DobongGu` |
201
+ | `11350` | 노원구 | `NowonGu` |
202
+ | `11380` | 은평구 | `EunpyeongGu` |
203
+ | `11410` | 서대문구 | `SeodaemunGu` |
204
+ | `11440` | 마포구 | `MapoGu` |
205
+ | `11470` | 양천구 | `YangcheonGu` |
206
+ | `11500` | 강서구 | `GangseoGu` |
207
+ | `11530` | 구로구 | `GuroGu` |
208
+ | `11545` | 금천구 | `GeumcheonGu` |
209
+ | `11560` | 영등포구 | `YeongdeungpoGu` |
210
+ | `11590` | 동작구 | `DongjakGu` |
211
+ | `11620` | 관악구 | `GwanakGu` |
212
+ | `11650` | 서초구 | `SeochoGu` |
213
+ | `11680` | 강남구 | `GangnamGu` |
214
+ | `11710` | 송파구 | `SongpaGu` |
215
+ | `11740` | 강동구 | `GangdongGu` |
84
216
 
85
217
  ## Props
86
218
 
@@ -111,20 +243,43 @@ function Example() {
111
243
  }
112
244
  ```
113
245
 
114
- ### 동적 아이콘 렌더링
246
+ ### API 응답에서 동적으로 사용
115
247
 
116
248
  ```tsx
117
- import * as SeoulIcons from "@apt.today/react-seoul-icons";
249
+ import { getIconByCode, getIconByName } from "@apt.today/react-seoul-icons";
118
250
 
119
- const districts = ["GangnamGu", "MapoGu", "JongnoGu"];
251
+ // API에서 행정구역 코드를 받은 경우
252
+ function DistrictIcon({ code }: { code: number }) {
253
+ const Icon = getIconByCode(code);
254
+ if (!Icon) return null;
255
+ return <Icon width={48} height={48} />;
256
+ }
257
+
258
+ // API에서 지역명을 받은 경우
259
+ function DistrictIconByName({ name }: { name: string }) {
260
+ // "서울특별시 강남구" 같은 형식도 OK
261
+ const Icon = getIconByName(name);
262
+ if (!Icon) return null;
263
+ return <Icon width={48} height={48} />;
264
+ }
265
+ ```
266
+
267
+ ### 지역 목록 렌더링
268
+
269
+ ```tsx
270
+ import { getAllDistrictInfo } from "@apt.today/react-seoul-icons";
271
+
272
+ function DistrictList() {
273
+ const districts = getAllDistrictInfo();
120
274
 
121
- function Example() {
122
275
  return (
123
- <div className="flex gap-4">
124
- {districts.map((district) => {
125
- const Icon = SeoulIcons[district as keyof typeof SeoulIcons];
126
- return <Icon key={district} className="w-12 h-12" />;
127
- })}
276
+ <div className="grid grid-cols-5 gap-4">
277
+ {districts.map((district) => (
278
+ <div key={district.code} className="flex flex-col items-center">
279
+ <district.component className="w-12 h-12" />
280
+ <span>{district.name}</span>
281
+ </div>
282
+ ))}
128
283
  </div>
129
284
  );
130
285
  }
package/dist/index.d.mts CHANGED
@@ -51,4 +51,93 @@ declare const YeongdeungpoGu: (props: React.SVGProps<SVGSVGElement>) => react_js
51
51
 
52
52
  declare const YongsanGu: (props: React.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
53
53
 
54
- export { DobongGu, DongdaemunGu, DongjakGu, EunpyeongGu, GangbukGu, GangdongGu, GangnamGu, GangseoGu, GeumcheonGu, GuroGu, GwanakGu, GwangjinGu, JongnoGu, JungGu, JungnangGu, MapoGu, NowonGu, SeochoGu, SeodaemunGu, SeongbukGu, SeongdongGu, SongpaGu, YangcheonGu, YeongdeungpoGu, YongsanGu };
54
+ /**
55
+ * 시/도 코드
56
+ */
57
+ type RegionCode = "서울" | "부산" | "대구" | "인천" | "광주" | "대전" | "울산" | "세종";
58
+ /**
59
+ * 서울시 행정구역 코드
60
+ */
61
+ type SeoulGuCode = 11110 | 11140 | 11170 | 11200 | 11215 | 11230 | 11260 | 11290 | 11305 | 11320 | 11350 | 11380 | 11410 | 11440 | 11470 | 11500 | 11530 | 11545 | 11560 | 11590 | 11620 | 11650 | 11680 | 11710 | 11740;
62
+ type SeoulGuIconComponent = React.ComponentType<React.SVGProps<SVGSVGElement>>;
63
+ interface DistrictInfo {
64
+ code: number;
65
+ region: RegionCode;
66
+ regionFullName: string;
67
+ name: string;
68
+ shortName: string;
69
+ component: SeoulGuIconComponent;
70
+ }
71
+ interface GetIconByNameOptions {
72
+ /**
73
+ * 시/도를 지정합니다. 중복되는 이름(예: 중구)을 검색할 때 필요합니다.
74
+ */
75
+ region?: RegionCode;
76
+ }
77
+ /**
78
+ * 행정구역 코드로 아이콘 컴포넌트를 가져옵니다.
79
+ * @param code - 행정구역 코드 (예: 11680 = 강남구, 26110 = 부산 중구)
80
+ * @returns 해당 구의 SVG 아이콘 컴포넌트, 없으면 undefined
81
+ * @example
82
+ * const Icon = getIconByCode(11680);
83
+ * <Icon width={100} height={100} />
84
+ */
85
+ declare function getIconByCode(code: SeoulGuCode): SeoulGuIconComponent;
86
+ declare function getIconByCode(code: number): SeoulGuIconComponent | undefined;
87
+ /**
88
+ * 구 이름으로 아이콘 컴포넌트를 가져옵니다.
89
+ *
90
+ * - 풀네임은 항상 동작: "서울특별시 강남구", "서울 강남구"
91
+ * - 유일한 이름은 그대로 동작: "강남구", "강남"
92
+ * - 중복되는 이름(예: 중구)은 region 옵션 필요
93
+ *
94
+ * @param name - 구 이름
95
+ * @param options - 옵션 (region: 시/도 지정)
96
+ * @returns 해당 구의 SVG 아이콘 컴포넌트, 없거나 중복이면 undefined
97
+ * @example
98
+ * // 유일한 이름
99
+ * getIconByName("강남구")
100
+ * getIconByName("강남")
101
+ *
102
+ * // 풀네임
103
+ * getIconByName("서울특별시 강남구")
104
+ * getIconByName("서울 중구")
105
+ *
106
+ * // 중복되는 이름 (region 필요)
107
+ * getIconByName("중구", { region: "서울" })
108
+ * getIconByName("중구", { region: "부산" })
109
+ */
110
+ declare function getIconByName(name: string, options?: GetIconByNameOptions): SeoulGuIconComponent | undefined;
111
+ /**
112
+ * 모든 행정구역 코드 목록을 반환합니다.
113
+ */
114
+ declare function getAllCodes(): number[];
115
+ /**
116
+ * 유효한 행정구역 코드인지 확인합니다.
117
+ */
118
+ declare function isValidCode(code: number): boolean;
119
+ /**
120
+ * 행정구역 코드로 구 이름을 가져옵니다.
121
+ * @param code - 행정구역 코드
122
+ * @returns 구 이름 (예: "강남구"), 없으면 undefined
123
+ */
124
+ declare function getNameByCode(code: number): string | undefined;
125
+ /**
126
+ * 행정구역 코드로 전체 정보를 가져옵니다.
127
+ * @param code - 행정구역 코드
128
+ * @returns 지역 정보 객체, 없으면 undefined
129
+ */
130
+ declare function getDistrictInfo(code: number): DistrictInfo | undefined;
131
+ /**
132
+ * 모든 지역 정보를 반환합니다.
133
+ */
134
+ declare function getAllDistrictInfo(): readonly DistrictInfo[];
135
+ /**
136
+ * 특정 시/도의 모든 지역 정보를 반환합니다.
137
+ * @param region - 시/도 코드 (예: "서울", "부산")
138
+ */
139
+ declare function getDistrictsByRegion(region: RegionCode): DistrictInfo[];
140
+ declare const seoulGuIconMap: Record<SeoulGuCode, SeoulGuIconComponent>;
141
+ declare const getAllGuInfo: typeof getAllDistrictInfo;
142
+
143
+ export { type DistrictInfo, DobongGu, DongdaemunGu, DongjakGu, EunpyeongGu, GangbukGu, GangdongGu, GangnamGu, GangseoGu, type GetIconByNameOptions, GeumcheonGu, GuroGu, GwanakGu, GwangjinGu, JongnoGu, JungGu, JungnangGu, MapoGu, NowonGu, type RegionCode, SeochoGu, SeodaemunGu, SeongbukGu, SeongdongGu, type SeoulGuCode, type SeoulGuIconComponent, SongpaGu, YangcheonGu, YeongdeungpoGu, YongsanGu, getAllCodes, getAllDistrictInfo, getAllGuInfo, getDistrictInfo, getDistrictsByRegion, getIconByCode, getIconByName, getNameByCode, isValidCode, seoulGuIconMap };
package/dist/index.d.ts CHANGED
@@ -51,4 +51,93 @@ declare const YeongdeungpoGu: (props: React.SVGProps<SVGSVGElement>) => react_js
51
51
 
52
52
  declare const YongsanGu: (props: React.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
53
53
 
54
- export { DobongGu, DongdaemunGu, DongjakGu, EunpyeongGu, GangbukGu, GangdongGu, GangnamGu, GangseoGu, GeumcheonGu, GuroGu, GwanakGu, GwangjinGu, JongnoGu, JungGu, JungnangGu, MapoGu, NowonGu, SeochoGu, SeodaemunGu, SeongbukGu, SeongdongGu, SongpaGu, YangcheonGu, YeongdeungpoGu, YongsanGu };
54
+ /**
55
+ * 시/도 코드
56
+ */
57
+ type RegionCode = "서울" | "부산" | "대구" | "인천" | "광주" | "대전" | "울산" | "세종";
58
+ /**
59
+ * 서울시 행정구역 코드
60
+ */
61
+ type SeoulGuCode = 11110 | 11140 | 11170 | 11200 | 11215 | 11230 | 11260 | 11290 | 11305 | 11320 | 11350 | 11380 | 11410 | 11440 | 11470 | 11500 | 11530 | 11545 | 11560 | 11590 | 11620 | 11650 | 11680 | 11710 | 11740;
62
+ type SeoulGuIconComponent = React.ComponentType<React.SVGProps<SVGSVGElement>>;
63
+ interface DistrictInfo {
64
+ code: number;
65
+ region: RegionCode;
66
+ regionFullName: string;
67
+ name: string;
68
+ shortName: string;
69
+ component: SeoulGuIconComponent;
70
+ }
71
+ interface GetIconByNameOptions {
72
+ /**
73
+ * 시/도를 지정합니다. 중복되는 이름(예: 중구)을 검색할 때 필요합니다.
74
+ */
75
+ region?: RegionCode;
76
+ }
77
+ /**
78
+ * 행정구역 코드로 아이콘 컴포넌트를 가져옵니다.
79
+ * @param code - 행정구역 코드 (예: 11680 = 강남구, 26110 = 부산 중구)
80
+ * @returns 해당 구의 SVG 아이콘 컴포넌트, 없으면 undefined
81
+ * @example
82
+ * const Icon = getIconByCode(11680);
83
+ * <Icon width={100} height={100} />
84
+ */
85
+ declare function getIconByCode(code: SeoulGuCode): SeoulGuIconComponent;
86
+ declare function getIconByCode(code: number): SeoulGuIconComponent | undefined;
87
+ /**
88
+ * 구 이름으로 아이콘 컴포넌트를 가져옵니다.
89
+ *
90
+ * - 풀네임은 항상 동작: "서울특별시 강남구", "서울 강남구"
91
+ * - 유일한 이름은 그대로 동작: "강남구", "강남"
92
+ * - 중복되는 이름(예: 중구)은 region 옵션 필요
93
+ *
94
+ * @param name - 구 이름
95
+ * @param options - 옵션 (region: 시/도 지정)
96
+ * @returns 해당 구의 SVG 아이콘 컴포넌트, 없거나 중복이면 undefined
97
+ * @example
98
+ * // 유일한 이름
99
+ * getIconByName("강남구")
100
+ * getIconByName("강남")
101
+ *
102
+ * // 풀네임
103
+ * getIconByName("서울특별시 강남구")
104
+ * getIconByName("서울 중구")
105
+ *
106
+ * // 중복되는 이름 (region 필요)
107
+ * getIconByName("중구", { region: "서울" })
108
+ * getIconByName("중구", { region: "부산" })
109
+ */
110
+ declare function getIconByName(name: string, options?: GetIconByNameOptions): SeoulGuIconComponent | undefined;
111
+ /**
112
+ * 모든 행정구역 코드 목록을 반환합니다.
113
+ */
114
+ declare function getAllCodes(): number[];
115
+ /**
116
+ * 유효한 행정구역 코드인지 확인합니다.
117
+ */
118
+ declare function isValidCode(code: number): boolean;
119
+ /**
120
+ * 행정구역 코드로 구 이름을 가져옵니다.
121
+ * @param code - 행정구역 코드
122
+ * @returns 구 이름 (예: "강남구"), 없으면 undefined
123
+ */
124
+ declare function getNameByCode(code: number): string | undefined;
125
+ /**
126
+ * 행정구역 코드로 전체 정보를 가져옵니다.
127
+ * @param code - 행정구역 코드
128
+ * @returns 지역 정보 객체, 없으면 undefined
129
+ */
130
+ declare function getDistrictInfo(code: number): DistrictInfo | undefined;
131
+ /**
132
+ * 모든 지역 정보를 반환합니다.
133
+ */
134
+ declare function getAllDistrictInfo(): readonly DistrictInfo[];
135
+ /**
136
+ * 특정 시/도의 모든 지역 정보를 반환합니다.
137
+ * @param region - 시/도 코드 (예: "서울", "부산")
138
+ */
139
+ declare function getDistrictsByRegion(region: RegionCode): DistrictInfo[];
140
+ declare const seoulGuIconMap: Record<SeoulGuCode, SeoulGuIconComponent>;
141
+ declare const getAllGuInfo: typeof getAllDistrictInfo;
142
+
143
+ export { type DistrictInfo, DobongGu, DongdaemunGu, DongjakGu, EunpyeongGu, GangbukGu, GangdongGu, GangnamGu, GangseoGu, type GetIconByNameOptions, GeumcheonGu, GuroGu, GwanakGu, GwangjinGu, JongnoGu, JungGu, JungnangGu, MapoGu, NowonGu, type RegionCode, SeochoGu, SeodaemunGu, SeongbukGu, SeongdongGu, type SeoulGuCode, type SeoulGuIconComponent, SongpaGu, YangcheonGu, YeongdeungpoGu, YongsanGu, getAllCodes, getAllDistrictInfo, getAllGuInfo, getDistrictInfo, getDistrictsByRegion, getIconByCode, getIconByName, getNameByCode, isValidCode, seoulGuIconMap };