From 07226a87ad9d8a789e041cd10dc4c12951705067 Mon Sep 17 00:00:00 2001
From: Yejiin21 <101397075+Yejiin21@users.noreply.github.com>
Date: Sat, 5 Jul 2025 23:39:24 +0900
Subject: [PATCH 1/7] =?UTF-8?q?fix:=20=ED=98=B8=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EA=B8=B0=EB=B3=B8=20=ED=94=84=EB=A1=9C=ED=95=84=20=EC=9D=B4?=
 =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EC=97=90=EB=9F=AC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/event/ui/host/HostCreationPage.tsx | 7 +------
 src/shared/hooks/useImageUpload.ts           | 8 ++++----
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/pages/event/ui/host/HostCreationPage.tsx b/src/pages/event/ui/host/HostCreationPage.tsx
index 22285d0d..58115d2a 100644
--- a/src/pages/event/ui/host/HostCreationPage.tsx
+++ b/src/pages/event/ui/host/HostCreationPage.tsx
@@ -1,4 +1,3 @@
-import basicProfile from '../../../../../public/assets/event-manage/creation/BasicProfile.png';
 import addImage from '../../../../../public/assets/event-manage/creation/AddImage.svg';
 import DefaultTextField from '../../../../../design-system/ui/textFields/DefaultTextField';
 import MultilineTextField from '../../../../../design-system/ui/textFields/MultilineTextField';
@@ -60,11 +59,7 @@ const HostCreationPage = ({ onValidationChange }: HostCreationPageProps) => {
   return (
     <div className="flex flex-col gap-5 px-4">
       <div className="relative flex items-center justify-center mb-4">
-        <img
-          src={previewUrl || basicProfile}
-          alt="기본 프로필 이미지"
-          className="w-24 h-24 object-cover rounded-full"
-        />
+        <img src={previewUrl || ''} alt="기본 프로필 이미지" className="w-24 h-24 object-cover rounded-full" />
         <button
           type="button"
           onClick={() => fileInputRef.current?.click()}
diff --git a/src/shared/hooks/useImageUpload.ts b/src/shared/hooks/useImageUpload.ts
index 5345b386..d615d721 100644
--- a/src/shared/hooks/useImageUpload.ts
+++ b/src/shared/hooks/useImageUpload.ts
@@ -1,7 +1,7 @@
 import { useRef, useState, useCallback, useEffect } from 'react';
 import { uploadFile } from '../../features/event/hooks/usePresignedUrlHook';
 import { convertImageToWebP } from '../lib/convertImageToWebP';
-export const DEFAULT_BASIC_PROFILE = 'https://gotogetherbucket.s3.ap-northeast-2.amazonaws.com/default.png';
+import basicProfile from '../../../public/assets/event-manage/creation/BasicProfile.png';
 
 const useImageUpload = ({
   value,
@@ -19,9 +19,9 @@ const useImageUpload = ({
   useEffect(() => {
     if (value) {
       setPreviewUrl(value);
-    } else if (useDefaultImage && previewUrl !== DEFAULT_BASIC_PROFILE) {
-      setPreviewUrl(DEFAULT_BASIC_PROFILE);
-      onSuccess?.(DEFAULT_BASIC_PROFILE);
+    } else if (useDefaultImage && previewUrl !== basicProfile) {
+      setPreviewUrl(basicProfile);
+      onSuccess?.(basicProfile);
     }
   }, [value, onSuccess, useDefaultImage, previewUrl]);
 

From e67ba9630b0ce0369456487b630d088c57950a8d Mon Sep 17 00:00:00 2001
From: Yejiin21 <101397075+Yejiin21@users.noreply.github.com>
Date: Sat, 5 Jul 2025 23:46:57 +0900
Subject: [PATCH 2/7] =?UTF-8?q?fix:=20=ED=98=B8=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9D=B4?=
 =?UTF-8?q?=ED=83=88=20=EC=8B=9C=20=EC=9E=85=EB=A0=A5=EB=90=9C=20=EC=A0=95?=
 =?UTF-8?q?=EB=B3=B4=20=EC=B4=88=EA=B8=B0=ED=99=94=20=EB=A1=9C=EC=A7=81=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/event/ui/host/HostCreationPage.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/pages/event/ui/host/HostCreationPage.tsx b/src/pages/event/ui/host/HostCreationPage.tsx
index 58115d2a..cb308e49 100644
--- a/src/pages/event/ui/host/HostCreationPage.tsx
+++ b/src/pages/event/ui/host/HostCreationPage.tsx
@@ -56,6 +56,17 @@ const HostCreationPage = ({ onValidationChange }: HostCreationPageProps) => {
     }));
   }, [hostChannelName, hostEmail, channelDescription, setHostState]);
 
+  useEffect(() => {
+    return () => {
+      setHostState({
+        profileImageUrl: '',
+        hostChannelName: '',
+        hostEmail: '',
+        channelDescription: '',
+      });
+    };
+  }, [setHostState]);
+
   return (
     <div className="flex flex-col gap-5 px-4">
       <div className="relative flex items-center justify-center mb-4">

From 5fa98b99cdea1e0814ecd9f75bebbfff60e2d706 Mon Sep 17 00:00:00 2001
From: Yejiin21 <101397075+Yejiin21@users.noreply.github.com>
Date: Sun, 6 Jul 2025 00:27:15 +0900
Subject: [PATCH 3/7] =?UTF-8?q?feat:=20=ED=98=B8=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EB=8C=80=ED=91=9C=20=EC=9D=B4=EB=A9=94=EC=9D=BC=20=EC=A0=95?=
 =?UTF-8?q?=EB=B3=B4=20=EC=88=98=EC=A0=95=20=EB=A1=9C=EC=A7=81=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/host/hook/useHostInfoHook.ts |  3 +-
 src/pages/menu/ui/myHost/HostEditPage.tsx | 45 +++++++++++++++++------
 src/shared/lib/formValidation.ts          |  3 +-
 3 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/src/features/host/hook/useHostInfoHook.ts b/src/features/host/hook/useHostInfoHook.ts
index 98dab3ce..4e3d6e43 100644
--- a/src/features/host/hook/useHostInfoHook.ts
+++ b/src/features/host/hook/useHostInfoHook.ts
@@ -5,6 +5,7 @@ import { HostChannelInfoResponse } from '../../../entities/host/model/hostChanne
 export const useHostInfoSave = (
   hostChannelId: number,
   hostInfo: HostChannelInfoResponse,
+  email: string,
   channelDescription: string
 ) => {
   const queryClient = useQueryClient();
@@ -17,7 +18,7 @@ export const useHostInfoSave = (
       hostChannelId,
       profileImageUrl: hostInfo.result.profileImageUrl,
       hostChannelName: hostInfo.result.hostChannelName,
-      hostEmail: hostInfo.result.email,
+      hostEmail: email,
       channelDescription,
     };
 
diff --git a/src/pages/menu/ui/myHost/HostEditPage.tsx b/src/pages/menu/ui/myHost/HostEditPage.tsx
index c64694d0..9497d736 100644
--- a/src/pages/menu/ui/myHost/HostEditPage.tsx
+++ b/src/pages/menu/ui/myHost/HostEditPage.tsx
@@ -9,11 +9,13 @@ import MemberEmailInput from '../../../../features/menu/ui/MemberEmailInput';
 import useHostChannelInfo from '../../../../entities/host/hook/useHostChannelInfoHook';
 import { useHostInfoSave } from '../../../../features/host/hook/useHostInfoHook';
 import { useInviteMembers } from '../../../../features/host/hook/useInviteHostHook';
+import { hostInfoSchema } from '../../../../shared/lib/formValidation';
 
 const HostEditPage = () => {
   const { id } = useParams<{ id: string }>();
   const [selectedHost, setSelectedHost] = useState(true);
   const [selectedInfo, setSelectedInfo] = useState(false);
+  const [email, setEmail] = useState('');
   const [channelDescription, setChannelDescription] = useState('');
   const [emails, setEmails] = useState<string[]>([]);
 
@@ -21,7 +23,8 @@ const HostEditPage = () => {
   const { data: hostInfo } = useHostChannelInfo(hostChannelId);
   const { inviteMembers } = useInviteMembers(hostChannelId);
 
-  const { handleSave } = useHostInfoSave(hostChannelId, hostInfo!, channelDescription);
+  const { handleSave } = useHostInfoSave(hostChannelId, hostInfo!, email, channelDescription);
+  const emailValidation = hostInfoSchema.safeParse({ email });
 
   const handeHostInfoClick = () => {
     setSelectedHost(true);
@@ -38,6 +41,12 @@ const HostEditPage = () => {
     inviteMembers(emails, () => setEmails([]));
   };
 
+  useEffect(() => {
+    if (hostInfo?.result.email) {
+      setEmail(hostInfo.result.email);
+    }
+  }, [hostInfo]);
+
   useEffect(() => {
     if (hostInfo?.result.channelDescription && channelDescription === '') {
       setChannelDescription(hostInfo.result.channelDescription);
@@ -73,7 +82,7 @@ const HostEditPage = () => {
           <div className="flex flex-col px-8 md:px-12 gap-6">
             <div className="flex flex-col gap-4 py-4">
               <p className="text-xl text-black font-semibold">대표 이메일</p>
-              <p>{hostInfo?.result.email}</p>
+              <p>{email}</p>
             </div>
             <div className="flex flex-col gap-4 lg:gap-6">
               <p className="text-xl text-black font-semibold">멤버 목록</p>
@@ -96,13 +105,18 @@ const HostEditPage = () => {
 
         {selectedInfo && (
           <div className="flex flex-col gap-8 px-8 md:px-6">
-            <DefaultTextField
-              label="대표 이메일"
-              detail="채널 혹은, 채널에서 주최하는 이벤트에 대해 문의 할 수 있는 메일로 작성해주세요."
-              value={hostInfo?.result.email || ''}
-              className="h-12"
-              labelClassName="sm:text-base md:text-lg"
-            />
+            <div className="flex flex-col gap-2">
+              <DefaultTextField
+                label="대표 이메일"
+                detail="채널 혹은, 채널에서 주최하는 이벤트에 대해 문의 할 수 있는 메일로 작성해주세요."
+                value={email}
+                onChange={e => setEmail(e.target.value)}
+                className="h-12"
+                labelClassName="sm:text-base md:text-lg"
+                errorMessage={!emailValidation.success ? emailValidation.error.errors[0].message : ''}
+              />
+              <TertiaryButton type="button" label="수정하기" size="large" color="pink" onClick={handleSave} />
+            </div>
             <div className="flex flex-col gap-2">
               <MultilineTextField
                 label="채널에 대한 설명"
@@ -110,13 +124,22 @@ const HostEditPage = () => {
                 onChange={e => setChannelDescription(e.target.value)}
                 className="h-24 mb-8"
               />
-              <TertiaryButton type="button" label="저장하기" size="large" color="pink" onClick={handleSave} />
+              <TertiaryButton
+                type="button"
+                disabled={!emailValidation.success}
+                label="수정하기"
+                size="large"
+                color="pink"
+                onClick={handleSave}
+              />
             </div>
             <div className="flex flex-col gap-2">
               <div className="flex flex-col">
                 <h1 className="font-bold text-black text-lg">멤버 등록</h1>
                 <p className="text-placeholderText text-10 md:text-13">
-                  이메일로 회원을 검색해 추가 할 수 있습니다. 삭제 하려면 추가된 이메일 아이콘의 x를 눌러주세요.{' '}
+                  추가할 회원의 이메일을 입력한 뒤, 엔터를 눌러 검색해 주세요.
+                  <br />
+                  삭제 하려면 추가된 이메일 아이콘의 x를 눌러주세요.{' '}
                 </p>
               </div>
               <MemberEmailInput emails={emails} setEmails={setEmails} />
diff --git a/src/shared/lib/formValidation.ts b/src/shared/lib/formValidation.ts
index 100b88f5..869d1df6 100644
--- a/src/shared/lib/formValidation.ts
+++ b/src/shared/lib/formValidation.ts
@@ -9,7 +9,7 @@ export const formSchema = z.object({
     .regex(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/, '올바른 이메일 형식이어야 합니다.'),
   phone: z
     .string()
-    .regex(/^[0-9]{3}-[0-9]{3,4}-[0-9]{4}$/, '연락처는 휴대전화 번호 형식(예: 010-1234-5678)이어야 합니다.')
+    .regex(/^[0-9]{3}-[0-9]{3,4}-[0-9]{4}$/, '연락처는 휴대전화 번호 형식(예: 010-1234-5678)이어야 합니다.'),
 });
 export const organizerFormSchema = formSchema.pick({ email: true, phone: true });
 export const eventTitleSchema = z.object({
@@ -21,6 +21,7 @@ export const hostCreationSchema = z.object({
   channelDescription: z.string().min(5, '채널 설명은 최소 두 글자 이상이어야 합니다.'),
 });
 export const myPageSchema = formSchema.pick({ name: true, phone: true });
+export const hostInfoSchema = formSchema.pick({ email: true });
 
 export type FormData = z.infer<typeof formSchema>;
 export type OrganizerFormData = z.infer<typeof organizerFormSchema>;

From d93f64650a21f20b42d62b106e384bcd72a4e415 Mon Sep 17 00:00:00 2001
From: Yejiin21 <101397075+Yejiin21@users.noreply.github.com>
Date: Sun, 6 Jul 2025 00:29:16 +0900
Subject: [PATCH 4/7] =?UTF-8?q?fix:=20=ED=98=B8=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EB=A9=A4=EB=B2=84=20=ED=94=84=EB=A1=9C=ED=95=84=20=EC=9D=B4?=
 =?UTF-8?q?=EB=A6=84=20=EC=97=90=EB=9F=AC=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/menu/ui/myHost/HostEditPage.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/menu/ui/myHost/HostEditPage.tsx b/src/pages/menu/ui/myHost/HostEditPage.tsx
index 9497d736..a7197994 100644
--- a/src/pages/menu/ui/myHost/HostEditPage.tsx
+++ b/src/pages/menu/ui/myHost/HostEditPage.tsx
@@ -10,6 +10,7 @@ import useHostChannelInfo from '../../../../entities/host/hook/useHostChannelInf
 import { useHostInfoSave } from '../../../../features/host/hook/useHostInfoHook';
 import { useInviteMembers } from '../../../../features/host/hook/useInviteHostHook';
 import { hostInfoSchema } from '../../../../shared/lib/formValidation';
+import { formatProfilName } from '../../../../shared/lib/formatProfileName';
 
 const HostEditPage = () => {
   const { id } = useParams<{ id: string }>();
@@ -92,7 +93,7 @@ const HostEditPage = () => {
                     key={user.id}
                     id={user.id}
                     profile="userProfile"
-                    name={user.memberName.slice(1)}
+                    name={formatProfilName(user.memberName)}
                     className="w-12 h-12 md:w-13 md:h-13 lg:w-14 lg:h-14 text-sm md:text-16 lg:text-base"
                   >
                     {user.memberName}

From 24b3b462e65ebcfbd5b496ec4370218a93bdb83c Mon Sep 17 00:00:00 2001
From: Yejiin21 <101397075+Yejiin21@users.noreply.github.com>
Date: Sun, 6 Jul 2025 00:41:44 +0900
Subject: [PATCH 5/7] =?UTF-8?q?refact:=20=ED=98=B8=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=97=AD?=
 =?UTF-8?q?=ED=95=A0=EB=B3=84=EB=A1=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/host/ui/HostEditForm.tsx     |  61 ++++++++++++
 src/entities/host/ui/HostInfo.tsx         |  32 +++++++
 src/entities/host/ui/MemberInvite.tsx     |  30 ++++++
 src/pages/menu/ui/myHost/HostEditPage.tsx | 109 ++--------------------
 4 files changed, 132 insertions(+), 100 deletions(-)
 create mode 100644 src/entities/host/ui/HostEditForm.tsx
 create mode 100644 src/entities/host/ui/HostInfo.tsx
 create mode 100644 src/entities/host/ui/MemberInvite.tsx

diff --git a/src/entities/host/ui/HostEditForm.tsx b/src/entities/host/ui/HostEditForm.tsx
new file mode 100644
index 00000000..700bbef3
--- /dev/null
+++ b/src/entities/host/ui/HostEditForm.tsx
@@ -0,0 +1,61 @@
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import useHostChannelInfo from '../hook/useHostChannelInfoHook';
+import { useHostInfoSave } from '../../../features/host/hook/useHostInfoHook';
+import { hostInfoSchema } from '../../../shared/lib/formValidation';
+import DefaultTextField from '../../../../design-system/ui/textFields/DefaultTextField';
+import TertiaryButton from '../../../../design-system/ui/buttons/TertiaryButton';
+import MultilineTextField from '../../../../design-system/ui/textFields/MultilineTextField';
+
+const HostEditForm = () => {
+  const { id } = useParams<{ id: string }>();
+  const hostChannelId = Number(id);
+
+  const [email, setEmail] = useState('');
+  const [channelDescription, setChannelDescription] = useState('');
+
+  const { data: hostInfo } = useHostChannelInfo(hostChannelId);
+  const { handleSave } = useHostInfoSave(hostChannelId, hostInfo!, email, channelDescription);
+
+  const emailValidation = hostInfoSchema.safeParse({ email });
+
+  useEffect(() => {
+    if (hostInfo?.result.email) setEmail(hostInfo.result.email);
+    if (hostInfo?.result.channelDescription) setChannelDescription(hostInfo.result.channelDescription);
+  }, [hostInfo]);
+
+  return (
+    <div className="flex flex-col gap-4 md:gap-8 px-8 md:px-6 mb-4 md:mb-8">
+      <div className="flex flex-col gap-2">
+        <DefaultTextField
+          label="대표 이메일"
+          detail="채널 혹은, 채널에서 주최하는 이벤트에 대해 문의 할 수 있는 메일로 작성해주세요."
+          value={email}
+          onChange={e => setEmail(e.target.value)}
+          className="h-12"
+          labelClassName="sm:text-base md:text-lg"
+          errorMessage={!emailValidation.success ? emailValidation.error.errors[0].message : ''}
+        />
+        <TertiaryButton
+          type="button"
+          label="수정하기"
+          size="large"
+          color="pink"
+          onClick={handleSave}
+          disabled={!emailValidation.success}
+        />
+      </div>
+      <div className="flex flex-col gap-2">
+        <MultilineTextField
+          label="채널에 대한 설명"
+          value={channelDescription}
+          onChange={e => setChannelDescription(e.target.value)}
+          className="h-24 mb-8"
+        />
+        <TertiaryButton type="button" label="수정하기" size="large" color="pink" onClick={handleSave} />
+      </div>
+    </div>
+  );
+};
+
+export default HostEditForm;
diff --git a/src/entities/host/ui/HostInfo.tsx b/src/entities/host/ui/HostInfo.tsx
new file mode 100644
index 00000000..e49c290a
--- /dev/null
+++ b/src/entities/host/ui/HostInfo.tsx
@@ -0,0 +1,32 @@
+import ProfileCircle from '../../../../design-system/ui/Profile';
+import { formatProfilName } from '../../../shared/lib/formatProfileName';
+import { HostChannelInfoResponse } from '../model/hostChannelInfo';
+
+const HostInfo = ({ hostInfo }: { hostInfo?: HostChannelInfoResponse }) => {
+  return (
+    <div className="flex flex-col px-8 md:px-12 gap-6">
+      <div className="flex flex-col gap-4 py-4">
+        <p className="text-xl text-black font-semibold">대표 이메일</p>
+        <p>{hostInfo?.result.email}</p>
+      </div>
+      <div className="flex flex-col gap-4 lg:gap-6">
+        <p className="text-xl text-black font-semibold">멤버 목록</p>
+        <div className="flex flex-wrap gap-x-5 gap-y-4 lg:gap-x-10 lg:gap-y-6 text-sm md:text-16 lg:text-base">
+          {hostInfo?.result.hostChannelMembers.map(user => (
+            <ProfileCircle
+              key={user.id}
+              id={user.id}
+              profile="userProfile"
+              name={formatProfilName(user.memberName)}
+              className="w-12 h-12 md:w-13 md:h-13 lg:w-14 lg:h-14"
+            >
+              {user.memberName}
+            </ProfileCircle>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HostInfo;
diff --git a/src/entities/host/ui/MemberInvite.tsx b/src/entities/host/ui/MemberInvite.tsx
new file mode 100644
index 00000000..5f78c94a
--- /dev/null
+++ b/src/entities/host/ui/MemberInvite.tsx
@@ -0,0 +1,30 @@
+import { Dispatch, SetStateAction } from 'react';
+import TertiaryButton from '../../../../design-system/ui/buttons/TertiaryButton';
+import MemberEmailInput from '../../../features/menu/ui/MemberEmailInput';
+
+const MemberInvite = ({
+  emails,
+  setEmails,
+  handleInviteMembers,
+}: {
+  emails: string[];
+  setEmails: Dispatch<SetStateAction<string[]>>;
+  handleInviteMembers: () => void;
+}) => {
+  return (
+    <div className="flex flex-col gap-2 px-8 md:px-6 mb-4">
+      <div className="flex flex-col">
+        <h1 className="font-bold text-black text-lg">멤버 등록</h1>
+        <p className="text-placeholderText text-10 md:text-13">
+          추가할 회원의 이메일을 입력한 뒤, 엔터를 눌러 검색해 주세요.
+          <br />
+          삭제하려면 추가된 이메일 아이콘의 x를 눌러주세요.
+        </p>
+      </div>
+      <MemberEmailInput emails={emails} setEmails={setEmails} />
+      <TertiaryButton type="button" label="전송" size="large" color="pink" onClick={handleInviteMembers} />
+    </div>
+  );
+};
+
+export default MemberInvite;
diff --git a/src/pages/menu/ui/myHost/HostEditPage.tsx b/src/pages/menu/ui/myHost/HostEditPage.tsx
index a7197994..592fe028 100644
--- a/src/pages/menu/ui/myHost/HostEditPage.tsx
+++ b/src/pages/menu/ui/myHost/HostEditPage.tsx
@@ -1,32 +1,22 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import HostDetailLayout from '../../../../shared/ui/backgrounds/HostDetailLayout';
-import ProfileCircle from '../../../../../design-system/ui/Profile';
-import MultilineTextField from '../../../../../design-system/ui/textFields/MultilineTextField';
-import DefaultTextField from '../../../../../design-system/ui/textFields/DefaultTextField';
-import TertiaryButton from '../../../../../design-system/ui/buttons/TertiaryButton';
 import { useParams } from 'react-router-dom';
-import MemberEmailInput from '../../../../features/menu/ui/MemberEmailInput';
 import useHostChannelInfo from '../../../../entities/host/hook/useHostChannelInfoHook';
-import { useHostInfoSave } from '../../../../features/host/hook/useHostInfoHook';
 import { useInviteMembers } from '../../../../features/host/hook/useInviteHostHook';
-import { hostInfoSchema } from '../../../../shared/lib/formValidation';
-import { formatProfilName } from '../../../../shared/lib/formatProfileName';
+import HostInfo from '../../../../entities/host/ui/HostInfo';
+import HostEditForm from '../../../../entities/host/ui/HostEditForm';
+import MemberInvite from '../../../../entities/host/ui/MemberInvite';
 
 const HostEditPage = () => {
   const { id } = useParams<{ id: string }>();
   const [selectedHost, setSelectedHost] = useState(true);
   const [selectedInfo, setSelectedInfo] = useState(false);
-  const [email, setEmail] = useState('');
-  const [channelDescription, setChannelDescription] = useState('');
   const [emails, setEmails] = useState<string[]>([]);
 
   const hostChannelId = Number(id);
   const { data: hostInfo } = useHostChannelInfo(hostChannelId);
   const { inviteMembers } = useInviteMembers(hostChannelId);
 
-  const { handleSave } = useHostInfoSave(hostChannelId, hostInfo!, email, channelDescription);
-  const emailValidation = hostInfoSchema.safeParse({ email });
-
   const handeHostInfoClick = () => {
     setSelectedHost(true);
     setSelectedInfo(false);
@@ -38,22 +28,9 @@ const HostEditPage = () => {
 
   const handleInviteMembers = () => {
     if (!hostInfo?.result.id) return;
-
     inviteMembers(emails, () => setEmails([]));
   };
 
-  useEffect(() => {
-    if (hostInfo?.result.email) {
-      setEmail(hostInfo.result.email);
-    }
-  }, [hostInfo]);
-
-  useEffect(() => {
-    if (hostInfo?.result.channelDescription && channelDescription === '') {
-      setChannelDescription(hostInfo.result.channelDescription);
-    }
-  }, [hostInfo, channelDescription]);
-
   return (
     <HostDetailLayout>
       <div className="relative overflow-y-auto">
@@ -79,81 +56,13 @@ const HostEditPage = () => {
           </div>
         </div>
 
-        {selectedHost && (
-          <div className="flex flex-col px-8 md:px-12 gap-6">
-            <div className="flex flex-col gap-4 py-4">
-              <p className="text-xl text-black font-semibold">대표 이메일</p>
-              <p>{email}</p>
-            </div>
-            <div className="flex flex-col gap-4 lg:gap-6">
-              <p className="text-xl text-black font-semibold">멤버 목록</p>
-              <div className="flex flex-wrap gap-x-5 gap-y-4 lg:gap-x-10 lg:gap-y-6 text-sm md:text-16 lg:text-base">
-                {hostInfo?.result.hostChannelMembers.map(user => (
-                  <ProfileCircle
-                    key={user.id}
-                    id={user.id}
-                    profile="userProfile"
-                    name={formatProfilName(user.memberName)}
-                    className="w-12 h-12 md:w-13 md:h-13 lg:w-14 lg:h-14 text-sm md:text-16 lg:text-base"
-                  >
-                    {user.memberName}
-                  </ProfileCircle>
-                ))}
-              </div>
-            </div>
-          </div>
-        )}
+        {selectedHost && <HostInfo hostInfo={hostInfo} />}
 
         {selectedInfo && (
-          <div className="flex flex-col gap-8 px-8 md:px-6">
-            <div className="flex flex-col gap-2">
-              <DefaultTextField
-                label="대표 이메일"
-                detail="채널 혹은, 채널에서 주최하는 이벤트에 대해 문의 할 수 있는 메일로 작성해주세요."
-                value={email}
-                onChange={e => setEmail(e.target.value)}
-                className="h-12"
-                labelClassName="sm:text-base md:text-lg"
-                errorMessage={!emailValidation.success ? emailValidation.error.errors[0].message : ''}
-              />
-              <TertiaryButton type="button" label="수정하기" size="large" color="pink" onClick={handleSave} />
-            </div>
-            <div className="flex flex-col gap-2">
-              <MultilineTextField
-                label="채널에 대한 설명"
-                value={channelDescription}
-                onChange={e => setChannelDescription(e.target.value)}
-                className="h-24 mb-8"
-              />
-              <TertiaryButton
-                type="button"
-                disabled={!emailValidation.success}
-                label="수정하기"
-                size="large"
-                color="pink"
-                onClick={handleSave}
-              />
-            </div>
-            <div className="flex flex-col gap-2">
-              <div className="flex flex-col">
-                <h1 className="font-bold text-black text-lg">멤버 등록</h1>
-                <p className="text-placeholderText text-10 md:text-13">
-                  추가할 회원의 이메일을 입력한 뒤, 엔터를 눌러 검색해 주세요.
-                  <br />
-                  삭제 하려면 추가된 이메일 아이콘의 x를 눌러주세요.{' '}
-                </p>
-              </div>
-              <MemberEmailInput emails={emails} setEmails={setEmails} />
-              <TertiaryButton
-                type="button"
-                label="전송"
-                size="large"
-                color="pink"
-                onClick={handleInviteMembers}
-                className="mb-4"
-              />
-            </div>
-          </div>
+          <>
+            <HostEditForm />
+            <MemberInvite emails={emails} setEmails={setEmails} handleInviteMembers={handleInviteMembers} />
+          </>
         )}
       </div>
     </HostDetailLayout>

From e8fad7b51923ca24a1688fc9ff7c8a01ba11b659 Mon Sep 17 00:00:00 2001
From: Yejiin21 <101397075+Yejiin21@users.noreply.github.com>
Date: Sun, 6 Jul 2025 22:03:19 +0900
Subject: [PATCH 6/7] =?UTF-8?q?feat:=20=ED=8B=B0=EC=BC=93=20=EA=B5=AC?=
 =?UTF-8?q?=EB=A7=A4=20=EA=B0=80=EB=8A=A5=20=EA=B8=B0=EA=B0=84=20UI=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/assets/event-manage/details/Clock.svg   |  3 +++
 src/features/ticket/model/ticketInformation.ts |  2 ++
 src/widgets/event/ui/TicketInfo.tsx            | 14 +++++++++++++-
 3 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 public/assets/event-manage/details/Clock.svg

diff --git a/public/assets/event-manage/details/Clock.svg b/public/assets/event-manage/details/Clock.svg
new file mode 100644
index 00000000..fdb1b20d
--- /dev/null
+++ b/public/assets/event-manage/details/Clock.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 18C12.1217 18 14.1566 17.1571 15.6569 15.6569C17.1571 14.1566 18 12.1217 18 10C18 7.87827 17.1571 5.84344 15.6569 4.34315C14.1566 2.84285 12.1217 2 10 2C7.87827 2 5.84344 2.84285 4.34315 4.34315C2.84285 5.84344 2 7.87827 2 10C2 12.1217 2.84285 14.1566 4.34315 15.6569C5.84344 17.1571 7.87827 18 10 18ZM10 0C11.3132 0 12.6136 0.258658 13.8268 0.761205C15.0401 1.26375 16.1425 2.00035 17.0711 2.92893C17.9997 3.85752 18.7362 4.95991 19.2388 6.17317C19.7413 7.38642 20 8.68678 20 10C20 12.6522 18.9464 15.1957 17.0711 17.0711C15.1957 18.9464 12.6522 20 10 20C4.47 20 0 15.5 0 10C0 7.34784 1.05357 4.8043 2.92893 2.92893C4.8043 1.05357 7.34784 0 10 0ZM10.5 5V10.25L15 12.92L14.25 14.15L9 11V5H10.5Z" fill="black"/>
+</svg>
diff --git a/src/features/ticket/model/ticketInformation.ts b/src/features/ticket/model/ticketInformation.ts
index 6fa2153e..4dded4b0 100644
--- a/src/features/ticket/model/ticketInformation.ts
+++ b/src/features/ticket/model/ticketInformation.ts
@@ -17,6 +17,8 @@ export interface ReadTicketResponse {
   ticketDescription: string;
   ticketPrice: number;
   availableQuantity: number;
+  startDate: string;
+  endDate: string;
 }
 
 export interface TicketOptionChoice {
diff --git a/src/widgets/event/ui/TicketInfo.tsx b/src/widgets/event/ui/TicketInfo.tsx
index 7791207f..a12d86ae 100644
--- a/src/widgets/event/ui/TicketInfo.tsx
+++ b/src/widgets/event/ui/TicketInfo.tsx
@@ -6,6 +6,7 @@ import { useTickets } from '../../../features/ticket/hooks/useTicketHook';
 import { useOrderTicket } from '../../../features/ticket/hooks/useOrderHook';
 import { readTicketOptions } from '../../../features/ticket/api/ticketOption';
 import useAuthStore from '../../../app/provider/authStore';
+import clock from '../../../../public/assets/event-manage/details/Clock.svg';
 
 const TicketInfo = ({ eventId }: { eventId: number }) => {
   const limitNum = 4;
@@ -84,7 +85,9 @@ const TicketInfo = ({ eventId }: { eventId: number }) => {
       {data.result.map(ticket => (
         <div key={ticket.ticketId} className="bg-gray1 px-3 py-3 md:px-6 md:py-4 rounded-[10px] mb-3">
           <div className="flex justify-between items-center">
-            <div className="flex  flex-col gap-2"> {/*  w-[230px]  */}
+            <div className="flex  flex-col gap-2">
+              {' '}
+              {/*  w-[230px]  */}
               <div className="flex items-center gap-2 md:gap-4">
                 <span className="font-bold text-base md:text-md">{ticket.ticketName}</span> {/* w-[170px] */}
               </div>
@@ -123,6 +126,15 @@ const TicketInfo = ({ eventId }: { eventId: number }) => {
               />
             </div>
           </div>
+          <div className="w-full bg-[#E4EFFF] border px-4 py-3 rounded-[5px] mt-2">
+            <div className="flex items-center gap-2">
+              <img src={clock} alt="시계 아이콘" className="w-4 h-4 md:w-5 md:h-5" />
+              <span className="text-sm font-semibold">
+                구매 가능기간: {new Date(ticket.startDate).toLocaleDateString()} ~{' '}
+                {new Date(ticket.endDate).toLocaleDateString()}
+              </span>
+            </div>
+          </div>
         </div>
       ))}
     </div>

From b14b8734e8665e0180e8ea0ca18807fb7493d93f Mon Sep 17 00:00:00 2001
From: Yejiin21 <101397075+Yejiin21@users.noreply.github.com>
Date: Sun, 6 Jul 2025 22:05:26 +0900
Subject: [PATCH 7/7] =?UTF-8?q?fix:=20=EB=A7=88=EC=9D=B4=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=A2=8B=EC=95=84=EC=9A=94=20=EC=B5=9C=EC=8B=A0?=
 =?UTF-8?q?=EC=88=9C=EC=9C=BC=EB=A1=9C=20=EC=A0=95=EB=A0=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/user/ui/BookmarkList.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/entities/user/ui/BookmarkList.tsx b/src/entities/user/ui/BookmarkList.tsx
index 83fc2d91..bdadab6a 100644
--- a/src/entities/user/ui/BookmarkList.tsx
+++ b/src/entities/user/ui/BookmarkList.tsx
@@ -8,8 +8,8 @@ const BookmarkList = () => {
   const { data } = useBookmarks();
   const navigate = useNavigate();
 
-  const sortedData = data ? [...data].sort((a, b) => a.id - b.id) : [];
-  const visibleEvents = sortedData.slice(0, 2);
+  if (!data) return null;
+  const visibleEvents = data.slice(0, 2);
 
   return (
     <div className="w-full h-full max-h-84 bg-white border-[0.5px] rounded-[10px] px-5 md:px-7 py-4 md:py-5">