depromeet · donghunee · Jul 9, 2024 · Jul 9, 2024 · Jul 9, 2024 · Jul 9, 2024
diff --git a/src/app/MainPage.tsx b/src/app/MainPage.tsx
@@ -4,6 +4,7 @@ import { useAtom } from "jotai";
 import { messageAtom } from "@/store/messageAtom.tsx";
 import Modal from "@/component/common/modal/Modal";
 import useModal from "@/hooks/useModal";
+import Icon from "@/component/common/Icon/Icon";
 
 function MainPage() {
   const [message] = useAtom(messageAtom);
@@ -15,6 +16,11 @@ function MainPage() {
         <span>welcome to layer 🎇</span>
         <div onClick={() => open({ title: "냠냠", content: "쩝쩝", callBack: () => console.log("확인") })}>{message}</div>
       </div>
+
+      <Icon icon="ic_back" color="red" size={5} onClick={() => console.log("클릭")} />
+      <Icon icon="ic_back" color={"rgba(0,0,0,0.6)"} size={2} />
+      <Icon icon="ic_back" color="#00ff00" size={4} />
+
       <Modal />
     </>
   );

diff --git a/src/assets/svgs/ic_back.svg b/src/assets/svgs/ic_back.svg
diff --git a/src/assets/svgs/index.ts b/src/assets/svgs/index.ts
@@ -0,0 +1,3 @@
+import ic_back from "./ic_back.svg?react";
+
+export { ic_back };
diff --git a/src/component/common/Icon/Icon.tsx b/src/component/common/Icon/Icon.tsx
@@ -0,0 +1,34 @@
+import { memo } from "react";
+
+import * as icons from "@/assets/svgs";
+import { css } from "@emotion/react";
+
+type IconType = keyof typeof icons;
+
+type Props = {
+  icon: IconType;
+  color?: string;
+  size?: string | number;
+  onClick?: () => void;
+};
+
+const DEFAULT_ICON_COLOR = "#000000";
+
+function icon({ icon, color = DEFAULT_ICON_COLOR, size = "0.2rem", onClick }: Props) {
+  const SVGIcon = icons[icon];
+  const widthRem = typeof size === "number" ? `${size}rem` : size;
+
+  return (
+    <SVGIcon
+      onClick={onClick}
+      css={css`
+        color: ${color};
+        cursor: ${onClick ? "pointer" : "default"};
+        width: ${widthRem};
+        height: auto;
+      `}
+    />
+  );
+}
+
+export default memo(icon);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import ic_back from "./ic_back.svg?react";

		export { ic_back };
Copy link Collaborator sean2337 Jul 9, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. 여기에 아이콘을 선언해두고 사용하는 방식이군요!! 궁금한 점이 여기서 import하면 첫 로딩시에 이미지를 서버에서 가져오기 시작하나요? 아니면 아이콘이 써질때 마다 가져와 지는건가요?? 제가 슬랙에 캐싱에 대해서 여쭈어 본 이유가 아이콘이 써질 때마다 가져오는거라면 뒤로가기 이미지 같은 경우는 계속 쓰여 조금 비효율적이니, 해당 부분에 캐싱 코드를 적용한다면 최적화 면에서 좋지 않을까? 했던 생각 때문이었습니다. 이 내용은 후순위인것 같아 나중에 최적화 작업할 때 진행해봐도 좋을 것 같습니다!! donghunee reacted with thumbs up emoji leeminhee119 reacted with eyes emoji Copy link Collaborator Author donghunee Jul 9, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. 제가 알기론 해당 방식으로 svg파일을 import 했을 때는 빌드 시점에 번들링 되고, React Component로 변환되어 사용 됩니다. 그래서 매번 웹서버에서 이미지를 가져오는 방식은 아니라고 알고 있습니다. 만약에 public 폴더에서 svg 파일을 url로 참조 하는 경우에는 이미지가 로드 될 때 마다 매번 웹서버에서 해당 파일을 가져오는 방식으로 알고 있습니다. 그래서 이 경우에는 캐싱이 필요한 경우라고 생각합니다. 그리고 svg 파일을 최적화 시키는 방법 중에 sprite 기법을 사용하는 방법도 있는데, 이는 추후에 디자인 확정된 후에 시도해보면 재밌을 것 같습니다:) leeminhee119 and sean2337 reacted with thumbs up emoji Copy link Member klmhyeonwoo Jul 9, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. 다름이 아니라, 조금의 건의사항입니다! 🙋🏻‍♂️ 아마 저희 서비스에서 `.svg` 파일들을 많이 사용할 것 같은데, 아이콘 파일을 `index.ts` 랑 같은 계층에 두기보다 아이콘 파일 별로 폴더를 만들어 구조화시키면 어떨까요?! 프로젝트를 진행하면서 아이콘 파일들이나, 이미지 파일들을 폴더 별로 정리를 하지 않으면 나중에는 찾기가 엄청 힘들다는 단점이 있더라구요 🫨 donghunee reacted with thumbs up emoji Copy link Collaborator Author donghunee Jul 9, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. 좋은 의견 감사합니다~!! 리뷰 바탕으로 svg폴더 구조를 관심사 별로 나눌 수 있도록 바꿨습니다:)