refactor(ui): migrate address list component for antd v5

src/App.css

@@ -3,6 +3,7 @@ body {
   font-family: Noto Sans KR, sans-serif;
   min-width: 500px;
   height: 475px;
+  margin: 0;
 }
 
 #root {

src/App.tsx

@@ -1,4 +1,4 @@
-import { Layout as _Layout } from "antd";
+import { ConfigProvider, Layout as _Layout, ThemeConfig } from "antd";
 import { RecoilRoot } from "recoil";
 import styled from "styled-components";
 
@@ -12,14 +12,24 @@ export const Layout = styled(_Layout)`
   overflow: hidden;
 `;
 
+const theme: ThemeConfig = {
+  components: {
+    Collapse: {
+      contentPadding: "0 16px",
+    },
+  },
+};
+
 export const App = () => {
   return (
     <RecoilRoot>
-      <Layout>
-        <Header />
-        <Content />
-        <Footer />
-      </Layout>
+      <ConfigProvider theme={theme}>
+        <Layout>
+          <Header />
+          <Content />
+          <Footer />
+        </Layout>
+      </ConfigProvider>
     </RecoilRoot>
   );
 };

src/components/index.ts

@@ -1,3 +1,2 @@
-export { AddressList } from "./AddressList";
-export { ClickToCopyText } from "./ClickToCopyText";
-export * from "./Layout";
+export { AddressList } from "./ui/AddressList";
+export { ClickToCopyText } from "./ui/ClickToCopyText";

src/components/popup/Content.tsx

@@ -8,7 +8,7 @@ import {
 import { useRecoilValue } from "recoil";
 import styled from "styled-components";
 
-import { AddressList } from "../AddressList";
+import { AddressList } from "../ui/AddressList";
 import { useAddressSearch } from "@/hooks/useAddressSearch";
 import { useSettings } from "@/hooks/useSettings";
 import { addressListState } from "@/states/address";
@@ -130,9 +130,9 @@ export const Content = () => {
       <ListTop addressData={addressList} onResetClick={handleResetClick} />
       <AddressList
         data={addressList}
-        showEngAddr={addressDisplayOptions.engAddrShown}
-        showRoadAddr={addressDisplayOptions.roadAddrShown}
-        showLegacyAddr={addressDisplayOptions.streetNumAddrShown}
+        engAddrShown={addressDisplayOptions.engAddrShown}
+        roadAddrShown={addressDisplayOptions.roadAddrShown}
+        streetNumAddrShown={addressDisplayOptions.streetNumAddrShown}
       />
       {searching ? (
         <Spinner />

src/components/ui/AddressList/index.tsx

@@ -0,0 +1,128 @@
+/**
+ * External modules
+ */
+import { Collapse, Typography } from "antd";
+import type { CollapseProps } from "antd";
+import { useMemo } from "react";
+import styled from "styled-components";
+
+/**
+ * Internal modules
+ */
+// import "./AddressList.css";
+import type { AddressData } from "@/shared/models/address";
+import { ClickToCopyText } from "../ClickToCopyText";
+import { FeedbackPopover } from "../../FeedbackPopover";
+import type { DisplayOptions } from "@/shared/models/settings";
+
+interface Props extends DisplayOptions {
+  data: AddressData[];
+}
+
+const EmptyText = styled(Typography.Paragraph)`
+  text-align: center;
+  margin-top: 2em;
+  margin-bottom: 2em !important;
+  color: rgba(0, 0, 0, 0.6) !important;
+  > span {
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.3) !important;
+  }
+`;
+
+interface RowProps {
+  keyLabel: string;
+  value: string;
+}
+
+const RowWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  & > div.addr-value {
+    flex: 1;
+  }
+  & > .addr-label {
+    flex: 0 0 72px;
+    margin: 0 !important;
+}
+`;
+
+const Row = ({ keyLabel, value }: RowProps) => {
+  return (
+    <RowWrapper>
+      <Typography.Paragraph className="addr-label">
+        {keyLabel}
+      </Typography.Paragraph>
+      <div className="addr-value">
+        <ClickToCopyText>{value}</ClickToCopyText>
+      </div>
+    </RowWrapper>
+  );
+};
+
+const AddressItemWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+interface AddressItemProps extends DisplayOptions {
+  address: AddressData;
+}
+
+const AddressItem = ({
+  address,
+  engAddrShown,
+  roadAddrShown,
+  streetNumAddrShown,
+}: AddressItemProps) => {
+  return (
+    <AddressItemWrapper>
+      <Row keyLabel="우편번호: " value={address.zipNo} />
+      {roadAddrShown ? <Row keyLabel="도로명주소: " value={address.roadAddr} /> : null}
+      {streetNumAddrShown ? <Row keyLabel="지번주소: " value={address.jibunAddr} /> : null}
+      {engAddrShown ? <Row keyLabel="영문주소: " value={address.engAddr} /> : null}
+    </AddressItemWrapper>
+  );
+};
+
+export const AddressList = (props: Props) => {
+  const { data, engAddrShown, roadAddrShown, streetNumAddrShown } = props;
+  const listItems: CollapseProps["items"] = useMemo(
+    () =>
+      data.map((addressData, i) => ({
+        key: i,
+        label: addressData.roadAddr,
+        children: (
+          <AddressItem
+            address={addressData}
+            engAddrShown={engAddrShown}
+            roadAddrShown={roadAddrShown}
+            streetNumAddrShown={streetNumAddrShown}
+          />
+        ),
+      })),
+    [data, engAddrShown, roadAddrShown, streetNumAddrShown],
+  );
+
+  if (!data || !data.length) {
+    return (
+      <EmptyText type="secondary">
+        검색 결과가 없습니다.
+        <br />
+        <span>(검색어 예시: 강남대로, 자양동, 초성 검색 가능)</span>
+        <br />
+        <FeedbackPopover />
+      </EmptyText>
+    );
+  }
+
+  return (
+    <Collapse
+      className="address-list"
+      ghost
+      items={listItems}
+      bordered={false}
+      defaultActiveKey={[0]}
+    />
+  );
+};

src/components/ui/ClickToCopyText.tsx

@@ -0,0 +1,43 @@
+/**
+ * External modules
+ */
+import { useCallback, useState } from "react";
+import styled from "styled-components";
+import { Button, Tooltip } from "antd";
+import copy from "copy-to-clipboard";
+
+const Text = styled(Button)`
+  color: rgba(0, 0, 0, 0.65);
+`;
+
+interface Props {
+  children: string;
+}
+
+export const ClickToCopyText = (props: Props) => {
+  const { children } = props;
+  const [copied, setCopied] = useState(false);
+
+  const handleCopyClick = useCallback(() => {
+    setCopied(true);
+    copy(children);
+  }, [children]);
+
+  const handleOpenChange = useCallback((open: boolean) => {
+    if (!open) {
+      setTimeout(() => setCopied(false), 100);
+    }
+  }, []);
+
+  return (
+    <Tooltip
+      title={!copied ? "클릭해서 복사하기" : "복사완료!"}
+      color={copied ? "green" : "#000"}
+      onOpenChange={handleOpenChange}
+    >
+      <Text type="link" onClick={handleCopyClick}>
+        {children}
+      </Text>
+    </Tooltip>
+  );
+};