style: 선물 보따리 채우기 플로우 퍼블리싱

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.1.7",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.474.0",

src/app/constants/constants.ts

@@ -0,0 +1,4 @@
+export const GIFTBAG_NAME_MAX_LENGTH = 20;
+export const GIFT_NAME_MAX_LENGTH = 20;
+
+export const GIFT_SELECT_REASON_MAX_LENGTH = 100;

src/app/gift-upload/page.tsx

@@ -0,0 +1,11 @@
+import GiftForm from "@/components/gift-upload/GiftForm";
+
+const page = () => {
+  return (
+    <>
+      <GiftForm />
+    </>
+  );
+};
+
+export default page;

src/app/giftbag/name/page.tsx

@@ -1,7 +1,5 @@
-import CharacterCountInput from "@/components/common/CharacterCountInput";
 import SelectedGiftBag from "@/components/giftbag/SelectedGiftBag";
-import { Button } from "@/components/ui/button";
-import Link from "next/link";
+import GiftBagForm from "@/components/giftbag/GiftBagForm";
 
 const page = () => {
   return (
@@ -12,13 +10,7 @@ const page = () => {
           선물 보따리의 이름을 적어주세요
         </p>
       </div>
-      <CharacterCountInput
-        maxLength={20}
-        placeholder="빅토리의 생일 선물 보따리"
-      />
-      <Link href="/giftbag/add">
-        <Button size="lg">선물 채우러 가기</Button>
-      </Link>
+      <GiftBagForm />
     </div>
   );
 };

src/app/layout.tsx

@@ -5,14 +5,14 @@ import Header from "@/layout/Header";
 import { Suspense } from "react";
 
 const pretendard = localFont({
-  src: "./fonts/Pretendard.woff",
+  src: "./fonts/PretendardVariable.woff2",
   variable: "--font-pretendard",
-  weight: "100 900",
+  weight: "100 200 300 400 500 600 700 800 900",
 });
 const nanumSquareRound = localFont({
   src: "./fonts/NanumSquareRound.ttf",
   variable: "--font-nanum-square-round",
-  weight: "100 900",
+  weight: "100 200 300 400 500 600 700 800 900",
 });
 
 export const metadata: Metadata = {

src/components/common/CharacterCountInput.tsx

@@ -6,17 +6,21 @@ import { Input } from "@/components/ui/input";
 interface CharacterCountInputProps {
   placeholder: string;
   maxLength: number;
+  onChange?: (value: string) => void; // 입력값을 부모 컴포넌트로 전달
 }
 
 const CharacterCountInput = ({
   placeholder,
   maxLength,
+  onChange,
 }: CharacterCountInputProps) => {
   const [text, setText] = useState("");
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.value.length <= maxLength) {
-      setText(e.target.value);
+    const value = e.target.value;
+    if (value.length <= maxLength && onChange) {
+      setText(value);
+      onChange(value); // 입력값 변경 시 부모 컴포넌트에 전달
     }
   };
 

src/components/common/Chip.tsx

@@ -0,0 +1,19 @@
+interface ChipProps {
+  text: string;
+  isActive: boolean;
+  onClick: () => void;
+}
+
+const Chip = ({ text, isActive, onClick }: ChipProps) => {
+  return (
+    <span
+      onClick={onClick}
+      className={`inline-flex items-center justify-center min-w-[55px] h-[28px] px-3 rounded-[6px] border-[1.4px] cursor-pointer 
+        ${isActive ? "bg-pink-500 border-pink-500 text-white" : "bg-white hover:bg-pink-500 hover:border-pink-500 hover:text-white"}`}
+    >
+      <p className="m-0 text-xs">{text}</p>
+    </span>
+  );
+};
+
+export default Chip;

src/components/common/ErrorMessage.tsx

@@ -0,0 +1,9 @@
+interface ErrorMessageProps {
+  message: string;
+}
+
+const ErrorMessage = ({ message }: ErrorMessageProps) => {
+  return <p className="text-symantic-negative text-xs mt-1">{message}</p>;
+};
+
+export default ErrorMessage;

src/components/gift-upload/ChipList.tsx

@@ -0,0 +1,28 @@
+import Chip from "../common/Chip";
+
+interface ChipListProps {
+  chipText: string[];
+  selectedChipIndex: number;
+  onChipClick: (index: number) => void;
+}
+
+const ChipList = ({
+  chipText,
+  selectedChipIndex,
+  onChipClick,
+}: ChipListProps) => {
+  return (
+    <div className="flex gap-[7px] whitespace-nowrap">
+      {chipText.map((text, index) => (
+        <Chip
+          key={index}
+          text={text}
+          isActive={index === selectedChipIndex}
+          onClick={() => onChipClick(index)}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default ChipList;

src/components/gift-upload/CustomTextArea.tsx

@@ -0,0 +1,32 @@
+import { Textarea } from "../ui/textarea";
+
+interface CustomTextAreaProps {
+  placeholder: string;
+  maxLength: number;
+  text: string;
+  onTextChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+}
+
+const CustomTextArea = ({
+  placeholder,
+  maxLength,
+  text,
+  onTextChange,
+}: CustomTextAreaProps) => {
+  return (
+    <div className="relative">
+      <Textarea
+        placeholder={placeholder}
+        className="min-h-[135px] h-[135px] resize-none bg-white placeholder:text-gray-300"
+        value={text}
+        onChange={onTextChange}
+        maxLength={maxLength}
+      />
+      <span className="absolute bottom-2 right-2 text-gray-400 text-[10px]">
+        {text.length} / {maxLength}
+      </span>
+    </div>
+  );
+};
+
+export default CustomTextArea;

src/components/gift-upload/GiftForm.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useState } from "react";
+import CharacterCountInput from "../common/CharacterCountInput";
+import { Button } from "../ui/button";
+import InputLink from "./InputLink";
+import InputReason from "./InputReason";
+import UploadImageList from "./UploadImageList";
+import ErrorMessage from "../common/ErrorMessage";
+import { GIFT_NAME_MAX_LENGTH } from "@/app/constants/constants";
+
+const GiftForm = () => {
+  const [imageCount, setImageCount] = useState(0);
+  const [giftName, setGiftName] = useState("");
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  const handleSubmit = () => {
+    if (imageCount === 0 || giftName.length === 0) {
+      setIsSubmitted(true);
+      return;
+    }
+  };
+
+  return (
+    <div className="flex flex-col p-4 gap-[50px]">
+      <div className="flex flex-col gap-1">
+        <div
+          className="w-full overflow-x-auto h-[110px] flex items-center"
+          style={{ scrollbarWidth: "none" }}
+        >
+          <div className="min-w-max">
+            <UploadImageList onImagesChange={setImageCount} />
+          </div>
+        </div>
+        {isSubmitted && imageCount === 0 && (
+          <ErrorMessage message="필수 입력 정보입니다." />
+        )}
+        <CharacterCountInput
+          maxLength={GIFT_NAME_MAX_LENGTH}
+          placeholder="선물명을 적어주세요"
+          onChange={setGiftName}
+        />
+        {isSubmitted && giftName.length === 0 && (
+          <ErrorMessage message="필수 입력 정보입니다." />
+        )}
+      </div>
+      <InputReason />
+      <InputLink />
+      <Button size="lg" onClick={handleSubmit}>
+        채우기 완료
+      </Button>
+    </div>
+  );
+};
+
+export default GiftForm;

src/components/gift-upload/ImageCard.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import Image from "next/image";
+import EraseIcon from "../../../public/icons/btn_erase.svg";
+
+interface ImageCardProps {
+  src: string;
+  isPrimary?: boolean;
+  onDelete: () => void;
+}
+
+const ImageCard = ({ src, isPrimary, onDelete }: ImageCardProps) => {
+  return (
+    <div className="relative">
+      <button
+        className="absolute top-[-8px] right-[-8px] z-10"
+        onClick={onDelete}
+      >
+        <Image src={EraseIcon} alt="delete" width={24} height={24} />
+      </button>
+      <div className="relative rounded-[10px] h-[88px] w-[88px] bg-gray-50 border-[1.4px] border-gray-100 overflow-hidden">
+        <Image
+          src={src}
+          alt="Uploaded"
+          width={88}
+          height={88}
+          className="w-full h-full object-cover"
+          priority
+        />
+        {isPrimary && (
+          <div className="absolute bottom-0 w-[88px] bg-[#0F0F10] opacity-70 text-gray-300 text-xs pt-0.5 text-center rounded-bl-[10px] rounded-br-[10px] h-5">
+            <p className="text-[10px]">대표 사진</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ImageCard;

src/components/gift-upload/InputLink.tsx

@@ -0,0 +1,17 @@
+import { Input } from "../ui/input";
+
+const InputLink = () => {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-[5px] ">
+        <p className="text-[15px]">선물 링크를 메모해보세요.</p>
+        <p className="text-gray-400 text-xs">
+          선물 링크는 상대방에게 공개되지 않습니다.
+        </p>
+      </div>
+      <Input placeholder="링크 추가" />
+    </div>
+  );
+};
+
+export default InputLink;