refactor: 호스트&티켓 페이지 리팩토링

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;

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;

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;

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">

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,
     };
 

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 {

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';
@@ -57,14 +56,21 @@ 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">
-        <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()}

src/pages/menu/ui/myHost/HostEditPage.tsx

@@ -1,28 +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 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 [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!, channelDescription);
-
   const handeHostInfoClick = () => {
     setSelectedHost(true);
     setSelectedInfo(false);
@@ -34,16 +28,9 @@ const HostEditPage = () => {
 
   const handleInviteMembers = () => {
     if (!hostInfo?.result.id) return;
-
     inviteMembers(emails, () => setEmails([]));
   };
 
-  useEffect(() => {
-    if (hostInfo?.result.channelDescription && channelDescription === '') {
-      setChannelDescription(hostInfo.result.channelDescription);
-    }
-  }, [hostInfo, channelDescription]);
-
   return (
     <HostDetailLayout>
       <div className="relative overflow-y-auto">
@@ -69,67 +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>{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={user.memberName.slice(1)}
-                    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">
-            <DefaultTextField
-              label="대표 이메일"
-              detail="채널 혹은, 채널에서 주최하는 이벤트에 대해 문의 할 수 있는 메일로 작성해주세요."
-              value={hostInfo?.result.email || ''}
-              className="h-12"
-              labelClassName="sm:text-base md:text-lg"
-            />
-            <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 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를 눌러주세요.{' '}
-                </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>

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]);
 

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>;

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>