diff --git a/next.config.ts b/next.config.ts
index d6f18b10..51f71152 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,7 +1,15 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  turbopack: {},
+  turbopack: {
+    rules: {
+      "*.svg": {
+        loaders: ["@svgr/webpack"],
+        as: "*.js",
+      },
+    },
+  },
+
   async rewrites() {
     return [
       {
@@ -13,7 +21,8 @@ const nextConfig: NextConfig = {
 
   webpack(config) {
     config.module.rules.push({
-      test: /\.svg$/,
+      test: /\.svg$/i,
+      issuer: /\.[jt]sx?$/,
       use: ["@svgr/webpack"],
     });
     return config;
diff --git a/src/shared/ui/button.tsx b/src/shared/ui/button.tsx
index 80e0df84..266363a8 100644
--- a/src/shared/ui/button.tsx
+++ b/src/shared/ui/button.tsx
@@ -28,7 +28,6 @@ const variants: Record<ButtonVariant, string> = {
   ),
   secondary: cn(
     "px-3 bg-gray-50 text-gray-700 font-semibold shadow-button",
-    "border border-border-secondary",
     "hover:bg-gray-100 hover:shadow-button-hover",
     "disabled:bg-gray-bg disabled:text-gray-100 disabled:border-gray-100",
   ),
diff --git a/src/shared/ui/client-select.tsx b/src/shared/ui/client-select.tsx
deleted file mode 100644
index 702edab6..00000000
--- a/src/shared/ui/client-select.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-"use client";
-
-import Select, { type SelectProps } from "@/src/shared/ui/select";
-
-type ClientSelectProps = SelectProps & {
-  onValueChange?: (value: string) => void;
-};
-
-export default function ClientSelect({
-  onValueChange,
-  ...props
-}: ClientSelectProps) {
-  return (
-    <Select
-      {...props}
-      onChange={(e) => {
-        onValueChange?.(e.target.value);
-      }}
-    />
-  );
-}
diff --git a/src/shared/ui/popover.tsx b/src/shared/ui/popover.tsx
index f30202e0..f426fac0 100644
--- a/src/shared/ui/popover.tsx
+++ b/src/shared/ui/popover.tsx
@@ -1,143 +1,105 @@
 "use client";
 
+import React, { forwardRef, useCallback, useEffect, useRef } from "react";
+import type { ReactNode } from "react";
 import cn from "@/src/shared/lib/cn";
-import React, {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
 
-type TriggerProps = {
-  onClick?: React.MouseEventHandler;
+export interface PopupProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: ReactNode;
   className?: string;
-  "aria-haspopup"?:
-    | boolean
-    | "false"
-    | "true"
-    | "menu"
-    | "listbox"
-    | "tree"
-    | "grid"
-    | "dialog";
-  "aria-expanded"?: boolean;
-};
-
-export interface PopoverProps {
-  trigger: React.ReactNode;
-  children: React.ReactNode;
-  containerClassName?: string;
-  className?: string;
-  align?: "left" | "right" | "center";
-  isOpen?: boolean;
-  onClose?: () => void;
+  align?: "left" | "center" | "right";
   center?: boolean;
+  trigger?: ReactNode;
+  containerClassName?: string;
 }
 
-const Popover = forwardRef<HTMLDivElement, PopoverProps>(
+const Popup = forwardRef<HTMLDivElement, PopupProps>(
   (
     {
-      trigger,
+      isOpen,
+      onClose,
       children,
-      containerClassName,
       className,
       align = "center",
-      isOpen: controlledIsOpen,
-      onClose,
-      center = false,
+      center = true,
+      trigger,
+      containerClassName,
     },
     ref,
   ) => {
-    const containerRef = useRef<HTMLDivElement>(null);
-    const [internalIsOpen, setInternalIsOpen] = useState(false);
-
-    const isOpen =
-      controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen;
+    const overlayRef = useRef<HTMLDivElement>(null);
 
-    const setIsOpen = useCallback(
-      (value: React.SetStateAction<boolean>) => {
-        const newValue = typeof value === "function" ? value(isOpen) : value;
-        if (onClose && !newValue) onClose();
-        setInternalIsOpen(newValue);
+    const handleKeyDown = useCallback(
+      (e: KeyboardEvent) => {
+        if (e.key === "Escape") onClose();
       },
-      [isOpen, onClose],
+      [onClose],
     );
 
     useEffect(() => {
-      const handleClickOutside = (event: MouseEvent) => {
-        if (
-          containerRef.current &&
-          !containerRef.current.contains(event.target as Node)
-        ) {
-          setIsOpen(false);
-        }
-      };
-      document.addEventListener("mousedown", handleClickOutside);
-      return () =>
-        document.removeEventListener("mousedown", handleClickOutside);
-    }, [isOpen, setIsOpen]);
-
-    const renderTrigger = () => {
-      if (React.isValidElement<TriggerProps>(trigger)) {
-        const triggerElement = trigger;
-
-        return React.cloneElement(triggerElement, {
-          onClick: (e: React.MouseEvent) => {
-            triggerElement.props.onClick?.(e);
-            setIsOpen((prev) => !prev);
-          },
-          "aria-haspopup": "true",
-          "aria-expanded": isOpen,
-          className: cn(triggerElement.props.className, "cursor-pointer"),
-        });
+      if (isOpen) {
+        document.addEventListener("keydown", handleKeyDown);
+        document.body.style.overflow = "hidden";
       }
-      return trigger;
-    };
 
-    const alignClass = {
-      left: "left-0",
-      right: "right-0",
-      center: "left-1/2 -translate-x-1/2",
-    };
+      return () => {
+        document.removeEventListener("keydown", handleKeyDown);
+        document.body.style.overflow = "unset";
+      };
+    }, [isOpen, handleKeyDown]);
 
-    const popoverClass = cn(
-      "z-50 overflow-hidden bg-white shadow-[0_10px_40px_rgba(0,0,0,0.08)] border border-gray-100",
-      "animate-in fade-in zoom-in-95 duration-200 ease-out",
-      center
-        ? "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-[24px] p-6 w-[calc(100%-40px)] max-w-[400px]"
-        : cn("absolute mt-2 rounded-2xl p-2", alignClass[align]),
-      className,
-    );
+    const positionClasses = center
+      ? "items-center justify-center"
+      : cn(
+          "items-center",
+          align === "left" && "justify-start",
+          align === "right" && "justify-end",
+          align === "center" && "justify-center",
+        );
 
     return (
-      <div
-        className={cn("relative inline-block", containerClassName)}
-        ref={containerRef}
-      >
-        {renderTrigger()}
+      <>
+        {trigger && (
+          <div className={cn("inline-block", containerClassName)}>
+            {trigger}
+          </div>
+        )}
 
         {isOpen && (
-          <>
-            {center && (
-              <div
-                className="fixed inset-0 z-40 bg-black/40 backdrop-blur-[2px] animate-in fade-in duration-300"
-                onClick={() => setIsOpen(false)}
-              />
+          <div
+            className={cn(
+              "fixed inset-0 z-50 flex p-5 font-sans",
+              positionClasses,
             )}
+          >
+            <div
+              ref={overlayRef}
+              className="fixed inset-0 bg-black/40 backdrop-blur-[2px] animate-in fade-in duration-300"
+              onClick={onClose}
+            />
+
             <div
               ref={ref}
-              role={center ? "dialog" : "menu"}
-              className={popoverClass}
+              role="dialog"
+              aria-modal="true"
+              className={cn(
+                "relative z-50 flex w-[340px] flex-col items-center bg-gray-white rounded-lg shadow-card-hover",
+                "p-[32px_24px] gap-6 transition-all",
+                "animate-in fade-in zoom-in-95 duration-200 ease-out",
+                className,
+              )}
             >
               {children}
             </div>
-          </>
+          </div>
         )}
-      </div>
+      </>
     );
   },
 );
 
-Popover.displayName = "Popover";
-export default Popover;
+Popup.displayName = "Popup";
+
+export default Popup;
diff --git a/src/shared/ui/select.tsx b/src/shared/ui/select.tsx
index f4701584..de871e20 100644
--- a/src/shared/ui/select.tsx
+++ b/src/shared/ui/select.tsx
@@ -1,16 +1,26 @@
+"use client";
+
 import * as React from "react";
 import cn from "@/src/shared/lib/cn";
 
+import ArrowDownIcon from "@/src/shared/ui/icons/arroaw/down.svg";
+import ArrowUpIcon from "@/src/shared/ui/icons/arroaw/up.svg";
+
 export type SelectOption = {
   value: string;
   label: string;
   disabled?: boolean;
 };
 
-export type SelectProps = React.SelectHTMLAttributes<HTMLSelectElement> & {
+export type SelectProps = Omit<
+  React.SelectHTMLAttributes<HTMLSelectElement>,
+  "onChange"
+> & {
   label?: string;
   options?: SelectOption[];
   placeholder?: string;
+  onValueChange?: (value: string) => void;
+  onChange?: React.SelectHTMLAttributes<HTMLSelectElement>["onChange"];
 };
 
 export default function Select({
@@ -22,51 +32,92 @@ export default function Select({
   placeholder,
   disabled,
   className,
+  onChange,
+  onValueChange,
   ...rest
 }: SelectProps) {
   const reactId = React.useId();
   const selectId = id ?? reactId;
   const hasChildren = React.Children.count(children) > 0;
 
+  const [isOpen, setIsOpen] = React.useState(false);
+
   return (
     <div className="flex flex-col gap-2">
       {label ? (
-        <label htmlFor={selectId} className="text-sm">
+        <label htmlFor={selectId} className="text-body2 text-gray-700">
           {label}
         </label>
       ) : null}
 
-      <select
-        id={selectId}
-        name={name}
-        disabled={disabled}
-        className={cn(
-          "h-10 w-full rounded-md border px-3 text-sm",
-          disabled && "cursor-not-allowed opacity-50",
-          className,
-        )}
-        {...rest}
-      >
-        {placeholder ? (
-          <option value="" disabled>
-            {placeholder}
-          </option>
-        ) : null}
+      <div className="relative">
+        <select
+          id={selectId}
+          name={name}
+          disabled={disabled}
+          className={cn(
+            "h-12 w-full",
+            "px-4 pr-10",
+            "rounded-sm",
+            "border border-gray-200",
+            "bg-gray-white text-gray-black",
+            "text-body2",
+            "focus:outline-none ",
+            "disabled:opacity-50 disabled:cursor-not-allowed",
+            "appearance-none",
+            className,
+          )}
+          onMouseDown={() => {
+            if (disabled) return;
+            setIsOpen(true);
+          }}
+          onBlur={() => {
+            setIsOpen(false);
+          }}
+          onChange={(e) => {
+            onChange?.(e);
+            onValueChange?.(e.target.value);
+            setIsOpen(false);
+          }}
+          {...rest}
+        >
+          {placeholder ? (
+            <option value="" disabled hidden>
+              {placeholder}
+            </option>
+          ) : null}
 
-        {hasChildren
-          ? children
-          : options?.map((option) => (
-              <option
-                key={option.value}
-                value={option.value}
-                disabled={option.disabled}
-              >
-                {option.label}
-              </option>
-            ))}
-      </select>
+          {hasChildren
+            ? children
+            : options?.map((option) => (
+                <option
+                  key={option.value}
+                  value={option.value}
+                  disabled={option.disabled}
+                >
+                  {option.label}
+                </option>
+              ))}
+        </select>
+
+        {isOpen ? (
+          <ArrowUpIcon
+            className={cn(
+              "pointer-events-none absolute right-4 top-1/2 -translate-y-1/2",
+              "h-5 w-5",
+              disabled && "opacity-50",
+            )}
+          />
+        ) : (
+          <ArrowDownIcon
+            className={cn(
+              "pointer-events-none absolute right-4 top-1/2 -translate-y-1/2",
+              "h-5 w-5",
+              disabled && "opacity-50",
+            )}
+          />
+        )}
+      </div>
     </div>
   );
 }
-
-// TODO 디자인 도입 시 변경 예정
diff --git a/src/shared/ui/tooltip.tsx b/src/shared/ui/tooltip.tsx
new file mode 100644
index 00000000..0076796f
--- /dev/null
+++ b/src/shared/ui/tooltip.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { useState } from "react";
+import cn from "@/src/shared/lib/cn";
+
+type TooltipProps = {
+  content: React.ReactNode;
+  children: React.ReactNode;
+  className?: string;
+};
+
+export default function Tooltip({
+  content,
+  children,
+  className,
+}: TooltipProps) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <span
+      className="relative inline-flex"
+      onMouseEnter={() => setOpen(true)}
+      onMouseLeave={() => setOpen(false)}
+      onFocus={() => setOpen(true)}
+      onBlur={() => setOpen(false)}
+    >
+      {children}
+
+      {open && (
+        <span
+          role="tooltip"
+          className={cn(
+            "absolute left-1/2 bottom-full mb-2 -translate-x-1/2",
+            "min-w-max whitespace-nowrap",
+            "rounded-sm bg-gray-white px-3 py-2",
+            "text-caption1 text-gray-black",
+            "shadow-[0_4px_4px_rgba(0,0,0,0.25)]",
+            className,
+          )}
+        >
+          {content}
+
+          <span
+            className={cn(
+              "absolute left-1/2 top-full -translate-x-1/2",
+              "h-0 w-0",
+              // 말풍선꼬리 부분 왼쪽 + 오른쪽해서 14px
+              "border-l-[7px] border-r-[7px] border-t-8",
+              "border-l-transparent border-r-transparent border-t-gray-white",
+            )}
+          />
+        </span>
+      )}
+    </span>
+  );
+}
diff --git a/src/stories/Popover.stories.tsx b/src/stories/Popover.stories.tsx
index d7991a52..835c1bf6 100644
--- a/src/stories/Popover.stories.tsx
+++ b/src/stories/Popover.stories.tsx
@@ -8,111 +8,94 @@ const meta: Meta<typeof Popover> = {
   component: Popover,
   tags: ["autodocs"],
   argTypes: {
-    align: {
-      control: "select",
-      options: ["left", "center", "right"],
-      description: "트리거 기준 팝오버 정렬 위치",
-    },
-    center: {
-      control: "boolean",
-      description: "팝오버를 화면 중앙에 표시",
-    },
     isOpen: {
-      control: false,
-      description: "Controlled 모드에서 팝오버 열림 상태",
+      control: "boolean",
+      description: "팝업의 표시 여부",
     },
     onClose: {
-      action: "close",
-      description: "팝오버가 닫힐 때 호출",
+      action: "closed",
+      description: "배경이나 ESC 클릭 시 호출되는 함수",
+    },
+    className: {
+      control: "text",
+      description: "높이(height) 등 디자인 수정을 위한 추가 클래스",
     },
   },
+  decorators: [
+    (Story) => (
+      <div className="h-[400px] w-full">
+        <Story />
+      </div>
+    ),
+  ],
 };
 
 export default meta;
 type Story = StoryObj<typeof Popover>;
 
-export const Default: Story = {
-  args: {
-    trigger: <Button>팝오버 열기</Button>,
-    children: (
-      <div className="inline-flex whitespace-nowrap p-2">
-        가장 기본적인 팝오버 내용입니다.
-      </div>
-    ),
-    align: "left",
-  },
-};
-
-export const DetailedMenu: Story = {
+export const LogoutType: Story = {
   args: {
-    trigger: (
-      <span className="cursor-pointer font-medium text-blue-600 underline hover:text-blue-800">
-        도움말 확인하기
-      </span>
-    ),
+    isOpen: true,
+    className: "h-[350px]",
     children: (
-      <div className="flex w-[220px] flex-col gap-3">
-        <div className="border-b pb-2">
-          <p className="font-bold text-gray-900">정책 신청 가이드</p>
+      <>
+        <div className="flex flex-1 flex-col items-center justify-center gap-2 text-center">
+          <h3 className="text-h3 text-gray-black">로그아웃 하시겠습니까?</h3>
+          <p className="text-body2 text-gray-700">
+            로그아웃 시 맞춤 공고 확인 및<br />
+            커뮤니티 이용이 제한될 수 있습니다.
+          </p>
         </div>
-        <p className="text-sm leading-relaxed text-gray-600">
-          거주 지역과 연령을 입력하면{" "}
-          <span className="font-semibold text-green-600">
-            맞춤형 정부 지원금
-          </span>{" "}
-          목록을 확인할 수 있습니다.
-        </p>
-        <Button className="w-full py-2 text-xs">가이드 전체보기</Button>
-      </div>
+        <div className="flex w-full flex-col gap-3">
+          <Button className="w-full bg-red-default text-gray-white">
+            로그아웃 하기
+          </Button>
+        </div>
+      </>
     ),
-    align: "left",
   },
 };
 
-export const Centered: Story = {
+/**
+ * 2. 공유하기 팝업 디자인 (Height 206px)
+ */
+export const ShareType: Story = {
   args: {
-    trigger: <Button>중앙 팝오버</Button>,
-    center: true,
+    isOpen: true,
+    className: "h-[206px]",
     children: (
-      <div className="w-64 text-center">
-        <p className="mb-2 font-medium">화면 중앙 팝오버</p>
-        <p className="text-sm text-gray-600">
-          기존 Popover API를 유지하면서
-          <br />
-          중앙 배치 옵션만 추가했습니다.
-        </p>
-      </div>
+      <>
+        <div className="flex flex-1 flex-col items-center justify-center gap-2 text-center">
+          <h3 className="text-h3 text-gray-black">공유하기</h3>
+          <p className="text-body2 text-gray-700">
+            이 공고를 친구에게 공유해보세요.
+          </p>
+        </div>
+        <div className="flex w-full gap-3">
+          <Button className="flex-1">링크 복사</Button>
+        </div>
+      </>
     ),
   },
 };
 
-export const Controlled: Story = {
+export const Interactive: Story = {
   render: () => {
     const [isOpen, setIsOpen] = useState(false);
-
     return (
-      <div className="flex flex-col items-center gap-4">
-        <p className="text-sm text-gray-500">
-          외부 상태로 제어됨: {isOpen ? "열림" : "닫힘"}
-        </p>
-
+      <div className="flex justify-center">
+        <Button onClick={() => setIsOpen(true)}>팝업 열기 테스트</Button>
         <Popover
           isOpen={isOpen}
           onClose={() => setIsOpen(false)}
-          trigger={
-            <Button onClick={() => setIsOpen(true)}>외부에서 열기</Button>
-          }
-          center
+          className="h-[250px]"
         >
-          <div className="p-4">
-            <p className="mb-4 text-sm">Controlled Popover (기존 API 기반)</p>
-            <Button
-              className="w-full bg-red-600 py-2 text-white hover:bg-red-700"
-              onClick={() => setIsOpen(false)}
-            >
-              닫기
-            </Button>
+          <div className="flex flex-1 items-center">
+            <p className="text-h4">인터랙티브 팝업입니다.</p>
           </div>
+          <Button onClick={() => setIsOpen(false)} className="w-full">
+            확인
+          </Button>
         </Popover>
       </div>
     );
diff --git a/src/stories/Select.stories.tsx b/src/stories/Select.stories.tsx
index b717b4c1..138a8c64 100644
--- a/src/stories/Select.stories.tsx
+++ b/src/stories/Select.stories.tsx
@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import Select from "@/src/shared/ui/select";
-import ClientSelect from "@/src/shared/ui/client-select";
 
 const meta: Meta<typeof Select> = {
   title: "ui-kit/Select",
@@ -47,19 +46,3 @@ export const Disabled: Story = {
     disabled: true,
   },
 };
-
-/* ---------------- Client Select ---------------- */
-
-export const ClientSelectExample: StoryObj<typeof ClientSelect> = {
-  render: () => (
-    <ClientSelect
-      defaultValue=""
-      placeholder="선택하세요"
-      options={OPTIONS}
-      onValueChange={(value) => {
-        console.log("선택된 값:", value);
-      }}
-    />
-  ),
-  name: "ClientSelect (onValueChange)",
-};