[FEAT] 하루한컷 업로드

package.json

@@ -17,7 +17,7 @@
     ]
   },
   "dependencies": {
-    "@toss/use-funnel": "^1.4.2",
+    "@use-funnel/next": "^0.0.22",
     "axios": "^1.13.2",
     "next": "16.0.10",
     "react": "19.2.1",

src/app/day-log/page.tsx

@@ -7,7 +7,7 @@ import { SharedDiaryCard } from "@/components/dailyRecord/SharedDiaryCard";
 import DailyRecordData from "@/mock/dailyRecord.json";
 
 const DailyRecordPage = () => {
-  const MY_ID = 101;
+  const MY_ID = 111;
   const hasMyRecord = DailyRecordData.some(item => item.userId === MY_ID);
 
   return (

src/app/day-story/upload/page.tsx

@@ -0,0 +1,23 @@
+"use client";
+import { useState } from "react";
+
+import { BackHeader } from "@/components/common/BackHeader";
+import { DailyMissionCard } from "@/components/dailyPhoto/DailyMissionCard";
+import { DailyMissionProgress } from "@/components/dailyPhoto/DailyMissionProgress";
+
+import { MISSION_STATUS } from "@/constants/missionCard";
+
+const DayStoryUpload = () => {
+  const [status, setStatus] =
+    useState<keyof typeof MISSION_STATUS>("NOT_STARTED");
+  return (
+    <main className="w-full bg-black">
+      <BackHeader title="하루한컷" titleColor="white" />
+      <DailyMissionProgress status={status} />
+      <div className="mt-[120px] flex items-center justify-center">
+        <DailyMissionCard status={status} setStatus={setStatus} />
+      </div>
+    </main>
+  );
+};
+export default DayStoryUpload;

src/app/shared-diary/[id]/comment/page.tsx

@@ -0,0 +1,7 @@
+import { SharedDiaryComment } from "@/components/dailyRecord/SharedDiaryChat";
+
+const SharedDiaryChatPage = () => {
+  return <SharedDiaryComment variant="page" />;
+};
+
+export default SharedDiaryChatPage;

src/app/shared-diary/upload/page.tsx

@@ -0,0 +1 @@
+//공유일기 글쓰기 페이지

src/assets/SendButton.tsx

@@ -2,12 +2,16 @@ import SendIcon from "@/assets/messenger.svg";
 
 interface SendButtonProps {
   hasText: boolean;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
 }
-export const SendButton = ({ hasText = false }: SendButtonProps) => {
+export const SendButton = ({ hasText = false, onClick }: SendButtonProps) => {
   return (
-    <button className="absolute top-1 right-4 rotate-[-23deg] px-[2px] py-[3px]">
+    <button
+      className="absolute top-1 right-4 rotate-[-23deg] px-[2px] py-[3px]"
+      onClick={onClick}
+    >
       <SendIcon
-        className={`h-[18px] w-[20px] ${hasText ? "text-green-02 cursor-pointer" : "text-neutral-04"}`}
+        className={`text-neutral-04 h-[18px] w-[20px] ${hasText ? "cursor-pointer" : ""}`}
       />
     </button>
   );

src/components/common/BackHeader.tsx

@@ -9,9 +9,15 @@ interface HeaderProps {
   title: string;
   timeAgo?: string; // 하루한컷보기에서 사용
   menuIcon?: boolean; // 채팅페이지에서 사용
+  titleColor?: string; //하루한컷 업로드에서 사용
 }
 
-export const BackHeader = ({ title, timeAgo, menuIcon }: HeaderProps) => {
+export const BackHeader = ({
+  title,
+  timeAgo,
+  menuIcon,
+  titleColor = "black",
+}: HeaderProps) => {
   const router = useRouter();
 
   return (
@@ -21,9 +27,11 @@ export const BackHeader = ({ title, timeAgo, menuIcon }: HeaderProps) => {
         onClick={() => router.back()}
         className="absolute top-1/2 left-4 -translate-y-1/2 cursor-pointer"
       >
-        <BackIcon className="h-6 w-6" />
+        <BackIcon className={`text-${titleColor} h-6 w-6`} />
       </button>
-      <h1 className="text-h1 flex w-full items-center justify-center whitespace-nowrap text-black">
+      <h1
+        className={`text-h1 flex w-full items-center justify-center whitespace-nowrap text-${titleColor}`}
+      >
         {title}
       </h1>
       {timeAgo && (

src/components/common/MessageInput.tsx

@@ -2,19 +2,40 @@ import { useState } from "react";
 
 import { SendButton } from "@/assets/SendButton";
 
-export const MessageInput = () => {
+interface MessageInputProps {
+  onFocus?: React.FocusEventHandler<HTMLInputElement>;
+  onSend?: (message: string) => void;
+}
+
+export const MessageInput = ({ onFocus, onSend }: MessageInputProps) => {
   const [text, setText] = useState("");
+  const [isComposing, setIsComposing] = useState(false);
+
   const hasText = Boolean(text);
+  const sendMessage = () => {
+    if (!hasText) return;
+    onSend?.(text.trim());
+    setText("");
+  };
 
   return (
     <div className="relative flex-1">
       <input
-        className="border-neutral-07 bg-neutral-11 w-full rounded-2xl border border-solid px-4 py-1 focus:outline-none"
+        className="border-neutral-07 bg-neutral-11 focus:border-mint-01 w-full rounded-2xl border border-solid px-4 py-1 focus:outline-none"
         type="text"
         value={text}
         onChange={e => setText(e.target.value)}
+        onFocus={onFocus}
+        onCompositionStart={() => setIsComposing(true)}
+        onCompositionEnd={() => setIsComposing(false)}
+        onKeyDown={e => {
+          if (e.key === "Enter" && !isComposing) {
+            e.preventDefault();
+            sendMessage();
+          }
+        }}
       />
-      <SendButton hasText={hasText} />
+      <SendButton hasText={hasText} onClick={sendMessage} />
     </div>
   );
 };

src/components/dailyPhoto/DailyMissionCard.tsx

@@ -0,0 +1,112 @@
+"use client";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+
+import { useState } from "react";
+
+import { MISSION_SORT, MISSION_STATUS } from "@/constants/missionCard";
+import { WEEK_DAYS_KOR } from "@/constants/weekDays";
+
+import { useImageUpload } from "@/hooks/useImageUpload";
+
+import missionCardData from "@/mock/randomMission.json";
+
+import { getTodayIndex } from "@/utils/getCurrentDay";
+
+interface DailyMissionCardProps {
+  status: keyof typeof MISSION_STATUS;
+  setStatus: React.Dispatch<React.SetStateAction<keyof typeof MISSION_STATUS>>;
+}
+
+export const DailyMissionCard = ({
+  status,
+  setStatus,
+}: DailyMissionCardProps) => {
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+
+  const currentDayIndex = getTodayIndex();
+  const currentDay = WEEK_DAYS_KOR[currentDayIndex]; // 현재 요일
+
+  const subtitle =
+    typeof MISSION_STATUS[status].subtitle === "function"
+      ? `${MISSION_STATUS[status].subtitle(currentDay)}요일`
+      : MISSION_STATUS[status].subtitle;
+
+  const missionKind = missionCardData[0].kind;
+
+  const missionIcon = MISSION_SORT.find(
+    item => item.sort === missionKind,
+  )?.icon;
+
+  const onSelectImage = (file: File) => {
+    const url = URL.createObjectURL(file);
+    setPreviewUrl(url);
+    setStatus("IMAGE_UPLOADED");
+  };
+
+  const { inputRef, openFilePicker, onChangeFile } = useImageUpload({
+    onSelect: ({ file }) => {
+      onSelectImage(file);
+    },
+    maxSizeMB: 10,
+  });
+  const router = useRouter();
+  return (
+    <section className="flex h-[385px] w-[353px] flex-col items-center justify-center gap-5 rounded-2xl bg-white">
+      <div className="flex flex-col items-center justify-center">
+        <h3 className="text-green-01 text-h3">
+          {MISSION_STATUS[status].title}
+        </h3>
+        <p className="text-neutral-06 text-sub1-r -mt-[4px]">{subtitle}</p>
+      </div>
+      {status === "NOT_STARTED" && missionIcon && (
+        <div className="bg-neutral-11 flex h-28 w-28 items-center justify-center rounded-full">
+          <Image
+            src={missionIcon}
+            alt="미션카드종류 이미지"
+            width={88}
+            height={88}
+          />
+        </div>
+      )}
+      {status !== "NOT_STARTED" && previewUrl && (
+        <div
+          className={`h-27 w-27 overflow-hidden rounded-full ${status === "IMAGE_CONFIRMED" ? "border border-[4px] border-white shadow-[0_0_12px_-1px_#00C362]" : ""}`}
+        >
+          <Image
+            src={previewUrl}
+            alt="하루한컷이미지"
+            width={108}
+            height={108}
+            className="h-full w-full object-cover"
+          />
+        </div>
+      )}
+
+      <div className="flex flex-col items-center justify-center">
+        <div className="text-sub-number p-[10px]">
+          {status === "IMAGE_CONFIRMED"
+            ? "미션이 완료되었어요!"
+            : missionCardData[0].mission}
+        </div>
+        <button
+          className={`${status == "NOT_STARTED" ? "bg-gradient-orange" : "bg-mint-01"} text-button-sb h-[50px] w-[90px] cursor-pointer rounded-2xl text-white`}
+          onClick={() => {
+            if (status === "NOT_STARTED") openFilePicker();
+            if (status === "IMAGE_UPLOADED") setStatus("IMAGE_CONFIRMED");
+            if (status === "IMAGE_CONFIRMED") router.push("/day-log");
+          }}
+        >
+          {MISSION_STATUS[status].buttonText}
+        </button>
+      </div>
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/*"
+        className="hidden"
+        onChange={onChangeFile}
+      />
+    </section>
+  );
+};

src/components/dailyPhoto/DailyMissionProgress.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import CheckIcon from "@/assets/check.svg";
+import CrossIcon from "@/assets/close.svg";
+import QuestionIcon from "@/assets/questionMark.svg";
+
+import { MISSION_STATUS } from "@/constants/missionCard";
+import { WEEK_DAYS_KOR, WEEK_DAY_KEYS } from "@/constants/weekDays";
+
+import dailyRecordProgress from "@/mock/dailyRecordProgress.json";
+
+import { getWeekDayStatus } from "@/utils/getCurrentDay";
+
+type WeekDayKey = keyof typeof dailyRecordProgress;
+
+interface DailyMissionProgressProps {
+  status: keyof typeof MISSION_STATUS;
+}
+
+export const DailyMissionProgress = ({ status }: DailyMissionProgressProps) => {
+  return (
+    <ul className="scrollbar-hide mt-8 flex gap-[9px] overflow-x-auto px-4">
+      {WEEK_DAYS_KOR.map((item, index) => {
+        const dayStatus = getWeekDayStatus(index); // past | today | future
+        const dayKey = WEEK_DAY_KEYS[index] as WeekDayKey;
+
+        const isCompleted =
+          dayStatus === "today" && status === "IMAGE_CONFIRMED"
+            ? true
+            : dailyRecordProgress[dayKey];
+
+        const showCheck =
+          (dayStatus === "past" && isCompleted) ||
+          (dayStatus === "today" && isCompleted);
+
+        const showCross = dayStatus === "past" && !isCompleted;
+
+        const showQuestion =
+          dayStatus === "future" || (dayStatus === "today" && !isCompleted);
+
+        return (
+          <li key={item} className="h-[82px] w-[74px] shrink-0">
+            <div
+              className={`flex h-full flex-col items-center justify-center gap-[3px] rounded-2xl border border-solid px-[10px] py-[6px] ${showQuestion ? "bg-white" : "bg-spring-01"} ${dayStatus !== "future" ? "border-mint-01" : "border-neutral-08"} `}
+            >
+              {showCheck && (
+                <div className="bg-mint-01 flex h-8 w-8 items-center justify-center rounded-full">
+                  <CheckIcon className="text-spring-01 h-6 w-6" />
+                </div>
+              )}
+
+              {showCross && (
+                <div className="bg-neutral-03 flex h-8 w-8 items-center justify-center rounded-full">
+                  <CrossIcon className="text-neutral-08 h-[13px] w-[13px]" />
+                </div>
+              )}
+
+              {showQuestion && (
+                <div
+                  className={`flex h-8 w-8 items-center justify-center rounded-full ${dayStatus === "today" ? "bg-mint-01" : "bg-neutral-08"} `}
+                >
+                  <QuestionIcon
+                    className={`h-6 w-6 ${
+                      dayStatus === "today" ? "text-white" : "text-neutral-06"
+                    } `}
+                  />
+                </div>
+              )}
+
+              <span
+                className={`text-sub1-sb ${
+                  dayStatus !== "future" ? "text-neutral-01" : "text-neutral-06"
+                } `}
+              >
+                {item}
+              </span>
+            </div>
+          </li>
+        );
+      })}
+    </ul>
+  );
+};