Feature/#45 shared components update UI

jobdri/app/page.tsx

@@ -1,6 +1,8 @@
 import IconBox from "@/components/common/icons/IconBox";
 import CheckBox from "@/components/common/icons/CheckBox";
 import Header from "@/components/common/header/Header";
+import { Footer } from "@/components/common/footer";
+import { DropDown } from "@/components/common/dropdown";
 import { Lnb } from "@/components/common/lnb";
 import {
   Button,
@@ -11,10 +13,20 @@ import {
   TextButton,
 } from "@/components/common/buttons";
 import { Toast, ToastFrame } from "@/components/common/toast";
-import { ChipRound, ChipRoundSelected, ChipQnumber } from "@/components/common/chips";
+import {
+  ChipQnumber,
+  ChipRound,
+  ChipRoundSelected,
+  ChipTag,
+} from "@/components/common/chips";
 import ChipMainDemo from "@/components/common/chips/ChipMainDemo";
 import ModalLinkInputDemo from "@/components/common/modal/ModalLinkInputDemo";
+import { ModalNotice } from "@/components/common/modal";
 import { CompleteBadge } from "@/components/common/badges";
+import {
+  ProgressPanelRow,
+  ProgressSidebar,
+} from "@/components/common/progress";
 import { Tooltip, TooltipModify } from "@/components/common/tooltip";
 import { TabMenuThree, TabMenuTwo } from "@/components/common/tabs";
 import { CreditHeader, CreditRow } from "@/components/common/credit";
@@ -23,6 +35,7 @@ import {
   InputAutoGrow,
   InputFile,
   InputMain,
+  InputModalQuestion,
   InputMultiLine,
   InputMultiLine1000,
   InputSingleLine,
@@ -51,6 +64,31 @@ export default function Home() {
           <Header />
         </div>
       </Section>
+      <Section title="Footer">
+        <div className="w-full">
+          <Footer />
+        </div>
+      </Section>
+      <Section title="DropDown">
+        <div className="flex items-start gap-8">
+          <DropDown />
+        </div>
+      </Section>
+      <Section title="Progress — PanelRow">
+        <div className="flex flex-col gap-5 rounded-card-s bg-bg-default p-8">
+          <div className="flex items-start gap-8">
+            <span className="w-6 shrink-0 text-h28-bold">3</span>
+            <ProgressPanelRow itemCount={3} />
+          </div>
+          <div className="flex items-start gap-8">
+            <span className="w-6 shrink-0 text-h28-bold">4</span>
+            <ProgressPanelRow itemCount={4} />
+          </div>
+        </div>
+      </Section>
+      <Section title="Progress — Sidebar">
+        <ProgressSidebar />
+      </Section>
       <Section title="Toast">
         <div className="flex w-full max-w-[594px] flex-col gap-5">
           <Toast />
@@ -233,6 +271,9 @@ export default function Home() {
         <ChipRoundSelected label="mid" />
         <ChipRoundSelected label="mid selected" selected />
       </Section>
+      <Section title="ChipTag">
+        <ChipTag label="데이터분석" />
+      </Section>
       <Section title="ChipQnumber">
         <ChipQnumber number={1} showComplete />
         <ChipQnumber number={1} showComplete selected />
@@ -242,6 +283,12 @@ export default function Home() {
       <Section title="Modal — LinkInput">
         <ModalLinkInputDemo />
       </Section>{" "}
+      <Section title="Modal — Notice">
+        <div className="flex flex-wrap items-start gap-9">
+          <ModalNotice />
+          <ModalNotice variant="double" />
+        </div>
+      </Section>
       <Section title="SearchBar">
         <div className="w-[500px]">
           <SearchBar />
@@ -277,6 +324,9 @@ export default function Home() {
           <InputSingleLine placeholder="내용을 입력해주세요." />
         </div>
       </Section>
+      <Section title="InputModalQuestion">
+        <InputModalQuestion />
+      </Section>
       <Section title="InputMultiLine">
         <div className="flex flex-col gap-4 w-[360px]">
           <InputMultiLine placeholder="내용을 입력해주세요." />

jobdri/components/common/LoadMotion.tsx

@@ -5,9 +5,23 @@ import clsx from "clsx";
 
 interface LoadMotionProps {
   className?: string;
+  dotFrameClassName?: string;
+  dotClassName?: string;
+  activeDotClassName?: string;
+  inactiveDotClassName?: string;
+  activeMotionClassName?: string;
+  inactiveMotionClassName?: string;
 }
 
-export default function LoadMotion({ className }: LoadMotionProps) {
+export default function LoadMotion({
+  className,
+  dotFrameClassName,
+  dotClassName,
+  activeDotClassName = "bg-icon-neutral-heavy",
+  inactiveDotClassName = "bg-icon-neutral-assistive",
+  activeMotionClassName = "-translate-y-0.5",
+  inactiveMotionClassName = "translate-y-0",
+}: LoadMotionProps) {
   const [active, setActive] = useState(0);
 
   useEffect(() => {
@@ -17,17 +31,25 @@ export default function LoadMotion({ className }: LoadMotionProps) {
     return () => clearInterval(interval);
   }, []);
   return (
-    <div className={clsx("flex items-end gap-2 h-4", className)}>
+    <div className={clsx("flex items-center gap-1 py-1", className)}>
       {[0, 1, 2].map((i) => (
         <div
           key={i}
           className={clsx(
-            "w-2 h-2 rounded-full transition-all duration-300",
-            active === i
-              ? "bg-icon-neutral-heavy -translate-y-1"
-              : "bg-icon-neutral-assistive translate-y-0",
+            "flex h-1.5 w-1 items-end justify-center",
+            dotFrameClassName,
           )}
-        />
+        >
+          <span
+            className={clsx(
+              "aspect-square h-1 w-1 rounded-full transition-transform duration-300",
+              dotClassName,
+              active === i
+                ? clsx(activeDotClassName, activeMotionClassName)
+                : clsx(inactiveDotClassName, inactiveMotionClassName),
+            )}
+          />
+        </div>
       ))}
     </div>
   );

jobdri/components/common/chips/ChipTag.tsx

@@ -2,17 +2,15 @@
 
 import clsx from "clsx";
 
-interface ChipTagProps {
+export interface ChipTagProps {
   label: string;
-  // 나중에 "active"나 "disabled" 등이 추가될 것을 대비해 유니온 타입으로 유지합니다.
   state?: "default";
   className?: string;
 }
 
-// Record의 키 타입을 ChipTagProps의 state로 지정하여 타입 안정성을 높입니다.
 const styles: Record<NonNullable<ChipTagProps["state"]>, string> = {
   default:
-    "bg-fill-quaternary-default border border-line-neutral-default text-text-neutral-title hover:shadow-chip",
+    "border border-line-neutral-default bg-fill-quaternary-default text-text-neutral-description",
 };
 
 export default function ChipTag({
@@ -23,7 +21,7 @@ export default function ChipTag({
   return (
     <div
       className={clsx(
-        "inline-flex items-center justify-center rounded-chip-m px-1.5 py-1 text-cap12-med transition-all",
+        "inline-flex items-center justify-center gap-2.5 rounded-chip-s px-1.5 py-1 text-cap12-med tracking-normal [font-feature-settings:'liga'_off,'clig'_off]",
         styles[state],
         className,
       )}

jobdri/components/common/chips/index.ts

@@ -2,3 +2,5 @@ export { ChipMain } from "./ChipMain";
 export { ChipRound } from "./ChipRound";
 export { ChipRoundSelected } from "./ChipRoundSelected";
 export { ChipQnumber } from "./ChipQnumber";
+export { default as ChipTag } from "./ChipTag";
+export type { ChipTagProps } from "./ChipTag";

jobdri/components/common/credit/CreditRow.tsx

@@ -1,8 +1,7 @@
 import clsx from "clsx";
 import type { HTMLAttributes } from "react";
 
-import { ChipMain } from "@/components/common/chips";
-import ChipTag from "../chips/ChipTag";
+import { ChipTag } from "@/components/common/chips";
 
 type CreditRowVariant = "white" | "assistive";
 

jobdri/components/common/dropdown/DropDown.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { useId, useState } from "react";
+import clsx from "clsx";
+import Icon from "@/components/common/icons/Icon";
+
+export interface DropDownOption {
+  label: string;
+  value: string;
+}
+
+interface DropDownProps {
+  options?: DropDownOption[];
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  className?: string;
+}
+
+const defaultOptions: DropDownOption[] = [
+  { label: "300자", value: "300" },
+  { label: "500자", value: "500" },
+  { label: "800자", value: "800" },
+  { label: "1,000자", value: "1000" },
+  { label: "1,500자", value: "1500" },
+  { label: "2,000자", value: "2000" },
+];
+
+export default function DropDown({
+  options = defaultOptions,
+  value,
+  defaultValue = "1000",
+  onChange,
+  className,
+}: DropDownProps) {
+  const listboxId = useId();
+  const [open, setOpen] = useState(false);
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const selectedValue = value ?? internalValue;
+  const selectedOption =
+    options.find((option) => option.value === selectedValue) ?? options[0];
+
+  const handleSelect = (nextValue: string) => {
+    setInternalValue(nextValue);
+    onChange?.(nextValue);
+    setOpen(false);
+  };
+
+  return (
+    <div className={clsx("relative inline-flex w-[104px]", className)}>
+      <button
+        type="button"
+        aria-expanded={open}
+        aria-haspopup="listbox"
+        aria-controls={listboxId}
+        onClick={() => setOpen((current) => !current)}
+        className={clsx(
+          "group flex w-[104px] items-center justify-between rounded-cta-s bg-fill-quaternary-default pt-[15px] pr-3 pb-[14px] pl-4 shadow-card transition-shadow hover:shadow-hover",
+          open && "shadow-hover",
+        )}
+      >
+        <span className="text-label14-med tracking-normal text-text-neutral-description [font-feature-settings:'liga'_off,'clig'_off]">
+          {selectedOption.label}
+        </span>
+        <Icon
+          type={open ? "ARROW_UP_M" : "ARROW_DOWN_M"}
+          className="h-6 w-6 shrink-0 text-icon-neutral-assistive group-hover:text-icon-neutral-default"
+        />
+      </button>
+
+      {open && (
+        <div
+          id={listboxId}
+          role="listbox"
+          className="absolute top-[calc(100%+8px)] left-0 z-20 flex w-[104px] flex-col items-start overflow-hidden rounded-cta-s bg-bg-contents-default shadow-hover"
+        >
+          {options.map((option, index) => {
+            const selected = option.value === selectedValue;
+
+            return (
+              <div key={option.value} className="flex w-full flex-col">
+                <button
+                  type="button"
+                  role="option"
+                  aria-selected={selected}
+                  onClick={() => handleSelect(option.value)}
+                  className="flex w-full items-center gap-1.5 self-stretch bg-bg-contents-default px-4 py-3 text-left text-label14-med tracking-normal text-text-neutral-description [font-feature-settings:'liga'_off,'clig'_off] hover:bg-bg-contents-assistive active:bg-bg-default"
+                >
+                  {option.label}
+                </button>
+                {index < options.length - 1 && (
+                  <span className="h-px self-stretch bg-line-neutral-default" />
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

jobdri/components/common/dropdown/index.ts

@@ -0,0 +1,2 @@
+export { default as DropDown } from "./DropDown";
+export type { DropDownOption } from "./DropDown";

jobdri/components/common/footer/Footer.tsx

@@ -0,0 +1,58 @@
+import type { ButtonHTMLAttributes } from "react";
+import clsx from "clsx";
+import { Button } from "@/components/common/buttons";
+
+interface FooterActionProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+  label?: string;
+}
+
+interface FooterProps {
+  backAction?: FooterActionProps;
+  ctaAction?: FooterActionProps;
+  className?: string;
+}
+
+export default function Footer({
+  backAction = {},
+  ctaAction = {},
+  className,
+}: FooterProps) {
+  const {
+    label: backLabel = "뒤로가기",
+    className: backClassName,
+    ...backButtonProps
+  } = backAction;
+  const {
+    label: ctaLabel = "CTA",
+    className: ctaClassName,
+    ...ctaButtonProps
+  } = ctaAction;
+
+  return (
+    <footer
+      className={clsx(
+        "flex w-[1280px] shrink-0 items-center justify-center gap-8 border-t border-line-neutral-default bg-bg-contents-assistive px-[82px] pt-4 pb-8",
+        className,
+      )}
+    >
+      <div className="flex max-w-[1440px] flex-1 items-start justify-between">
+        <Button
+          label={backLabel}
+          styleType="tertiary"
+          size="medium"
+          iconType="ARROW_L"
+          className={backClassName}
+          {...backButtonProps}
+        />
+        <Button
+          label={ctaLabel}
+          styleType="primary"
+          size="medium"
+          className={ctaClassName}
+          {...ctaButtonProps}
+        />
+      </div>
+    </footer>
+  );
+}

jobdri/components/common/footer/index.ts

@@ -0,0 +1 @@
+export { default as Footer } from "./Footer";