[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,17 @@
+import { BackHeader } from "@/components/common/BackHeader";
+import { DailyMissionCard } from "@/components/dailyPhoto/DailyMissionCard";
+import { DailyMissionProgress } from "@/components/dailyPhoto/DailyMissionProgress";
+
+//하루한컷 업로드 페이지
+const DayStoryUpload = () => {
+  return (
+    <main className="w-full bg-black">
+      <BackHeader title="하루한컷" titleColor="white" />
+      <DailyMissionProgress />
+      <div className="mt-[143px] flex items-center justify-center">
+        <DailyMissionCard />
+      </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,41 @@
+"use client";
+import { useState } from "react";
+
+import { WEEK_DAYS } from "@/constants/dayToKorean";
+import { MISSION_STATUS } from "@/constants/missionCard";
+
+import { getTodayIndex } from "@/utils/getCurrentDay";
+
+export const DailyMissionCard = () => {
+  const [status, setStatus] =
+    useState<keyof typeof MISSION_STATUS>("NOT_STARTED");
+  const currentDayIndex = getTodayIndex();
+  const currentDay = WEEK_DAYS[currentDayIndex]; // 현재 요일
+
+  const subtitle =
+    typeof MISSION_STATUS[status].subtitle === "function"
+      ? `${MISSION_STATUS[status].subtitle(currentDay)}요일`
+      : MISSION_STATUS[status].subtitle;
+
+  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>
+      <div className="bg-neutral-11 h-28 w-28 rounded-full">
+        {/* 아이콘 영역 */}
+      </div>
+      <div className="text-sub-number p-[10px]">
+        오늘의 하늘을 공유해주세요.
+      </div>
+      <button
+        className={`${status == "NOT_STARTED" ? "bg-gradient-orange" : "bg-green-01"} text-button-sb h-[50px] w-[90px] cursor-pointer rounded-2xl text-white`}
+      >
+        {MISSION_STATUS[status].buttonText}
+      </button>
+    </section>
+  );
+};

src/components/dailyPhoto/DailyMissionProgress.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import CheckIcon from "@/assets/check.svg";
+import QuestionIcon from "@/assets/questionMark.svg";
+
+import { WEEK_DAYS } from "@/constants/dayToKorean";
+
+import { getWeekDayStatus } from "@/utils/getCurrentDay";
+
+export const DailyMissionProgress = () => {
+  return (
+    <ul className="scrollbar-hide mt-8 flex gap-[9px] overflow-x-auto px-4">
+      {WEEK_DAYS.map((item, index) => {
+        const status = getWeekDayStatus(index); // past | today | future
+        const isTodayCompleted = false;
+
+        const showCheck =
+          status === "past" || (status === "today" && isTodayCompleted);
+
+        return (
+          <li key={item} className="h-[82px] w-[74px] shrink-0">
+            <div
+              className={`${showCheck ? "bg-spring-01" : "bg-white"} ${status != "future" ? "border-mint-01" : "border-neutral-08"} flex h-full flex-col items-center justify-center gap-[3px] rounded-2xl border border-solid px-[10px] py-[6px]`}
+            >
+              {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>
+              ) : (
+                <div
+                  className={`${status === "today" ? "bg-mint-01" : "bg-neutral-08"} flex h-8 w-8 items-center justify-center rounded-full`}
+                >
+                  <QuestionIcon
+                    className={`${status === "today" ? "text-white" : "text-neutral-06"} h-6 w-6`}
+                  />
+                </div>
+              )}
+              <span
+                className={`text-sub1-sb ${status === "today" ? "text-neutral-01" : "text-neutral-06"}`}
+              >
+                {item}
+              </span>
+            </div>
+          </li>
+        );
+      })}
+    </ul>
+  );
+};

src/components/dailyRecord/CommentList.tsx

@@ -0,0 +1,45 @@
+import Image from "next/image";
+
+import { DiaryComment } from "@/types/diaryComment.type";
+
+import { formatDate } from "@/utils/formatDate";
+
+interface CommentListProps {
+  comments: DiaryComment[];
+}
+
+export const CommentList = ({ comments }: CommentListProps) => {
+  if (comments.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center pt-[109px]">
+        <p className="text-sub1-sb text-neutral-01">아직 댓글이 없습니다</p>
+        <p className="text-sub2-r text-neutral-06">댓글을 남겨보세요!</p>
+      </div>
+    );
+  }
+
+  return (
+    <ul className="flex flex-col">
+      {comments.map(comment => (
+        <li key={comment.id} className="flex gap-[10px] px-4 py-[10px]">
+          <Image
+            src={comment.profileImg}
+            alt={comment.userName}
+            width={56}
+            height={56}
+            className="h-14 w-14 rounded-2xl object-cover"
+          />
+          <div className="flex flex-1 justify-between">
+            <div className="flex flex-col">
+              <p className="text-d3 text-black">{comment.userName}</p>
+              <p className="text-sub1-r text-neutral-05">{comment.comment}</p>
+            </div>
+            <p className="text-body3 text-neutral-05 flex flex-col self-start">
+              {formatDate(comment.createdAt)}
+            </p>
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+};

src/components/dailyRecord/Header.tsx

@@ -13,7 +13,7 @@ export const Header = () => {
 
   return (
     <header className="relative mt-[13px] flex items-center justify-center px-4 py-[10px]">
-      <h1>하루기록</h1>
+      <h1 className="text-h1 text-black">하루기록</h1>
       <div className="absolute right-4 flex gap-2">
         {isAlarmNew ? (
           <button

src/components/dailyRecord/MissionFeed.tsx

@@ -1,15 +1,17 @@
 "use client";
 import Image from "next/image";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 
 import PlusIcon from "@/assets/plus.svg";
 
 import DailyRecordData from "@/mock/dailyRecord.json";
 
 export const RecordMissionFeed = () => {
-  const MY_ID = 101;
+  const MY_ID = 111;
 
   const myRecord = DailyRecordData.find(item => item.userId === MY_ID);
+  const router = useRouter();
 
   // TODO: api연결시, zustand로 optimistic update로직 추가
   const otherRecords = DailyRecordData.filter(
@@ -37,7 +39,10 @@ export const RecordMissionFeed = () => {
               />
             </Link>
           ) : (
-            <div className="bg-neutral-11 flex h-[88px] w-[88px] items-center justify-center rounded-full">
+            <div
+              className="bg-neutral-11 flex h-[88px] w-[88px] items-center justify-center rounded-full"
+              onClick={() => router.push("/day-story/upload")}
+            >
               <PlusIcon className="text-neutral-05 h-12 w-12" />
             </div>
           )}

src/components/dailyRecord/MissionInfo.tsx

@@ -1,39 +1,43 @@
 "use client";
+import { useRouter } from "next/navigation";
+
 import CheckIcon from "@/assets/check.svg";
 
 interface RecordMissionInfoProps {
   hasMyRecord: boolean;
 }
 export const RecordMissionInfo = ({ hasMyRecord }: RecordMissionInfoProps) => {
+  const router = useRouter();
   return (
-    <section className="border-mint-01 bg-neutral-11 mx-4 mt-[13.5px] cursor-pointer rounded-2xl border">
-      <div className="flex h-[76px] items-center justify-between p-[10px]">
-        {hasMyRecord ? (
-          <>
-            <p className="text-sub1-sb text-neutral-07">
-              오늘의 챌린지 미션을 완료했어요.
-            </p>
-            <div className="flex flex-col items-center gap-[7px]">
-              <div className="bg-neutral-07 flex h-6 w-6 items-center justify-center rounded-full">
-                <CheckIcon className="h-4 w-4 text-white" />
-              </div>
-
-              <p className="text-sub2-r text-neutral-06 -mt-[4px] px-[6px]">
-                미션완료
-              </p>
+    <section className="border-mint-01 bg-neutral-11 mx-4 mt-[13.5px] rounded-2xl border">
+      {hasMyRecord ? (
+        <div className="flex h-[76px] items-center justify-between p-[10px]">
+          <p className="text-sub1-sb text-neutral-07">
+            오늘의 챌린지 미션을 완료했어요.
+          </p>
+          <div className="flex flex-col items-center gap-[7px]">
+            <div className="bg-neutral-07 flex h-6 w-6 items-center justify-center rounded-full">
+              <CheckIcon className="h-4 w-4 text-white" />
             </div>
-          </>
-        ) : (
-          <>
-            <p className="text-sub1-sb text-black">
-              오늘의 챌린지 미션이 도착했어요!
+
+            <p className="text-sub2-r text-neutral-06 -mt-[4px] px-[6px]">
+              미션완료
             </p>
-            <div className="flex h-full flex-col justify-end">
-              <p className="text-green-01 text-sub2-r px-[6px]">시작하기</p>
-            </div>
-          </>
-        )}
-      </div>
+          </div>
+        </div>
+      ) : (
+        <div
+          className="flex h-[76px] cursor-pointer items-center justify-between p-[10px]"
+          onClick={() => router.push("/day-story/upload")}
+        >
+          <p className="text-sub1-sb text-black">
+            오늘의 챌린지 미션이 도착했어요!
+          </p>
+          <div className="flex h-full flex-col justify-end">
+            <p className="text-green-01 text-sub2-r px-[6px]">시작하기</p>
+          </div>
+        </div>
+      )}
     </section>
   );
 };