Merge pull request #190 from naya-h2/feat/edit-v2

💄 design: edit 페이지 pc 반응형 디자인
P1Z7 · Mar 17, 2024 · a847a6e · a847a6e
2 parents 52e718b + c26a9e3
commit a847a6e
Show file tree

Hide file tree

Showing 10 changed files with 37 additions and 29 deletions.
diff --git a/app/(route)/event/[eventId]/edit/page.tsx b/app/(route)/event/[eventId]/edit/page.tsx
@@ -12,6 +12,7 @@ import PinkLayout from "@/components/layout/PinkLayout";
 import { useStore } from "@/store/index";
 import { META_TAG } from "@/constants/metaTag";
 import EditContent from "./_components/EditContent";
+import DottedLayout from "@/components/layout/DottedLayout";
 
 let INITIAL_DATA: PostType;
 
@@ -57,19 +58,19 @@ const Edit = () => {
   return (
     <>
       <MetaTag title={META_TAG.edit["title"]} description={META_TAG.edit["description"]} />
-      <PinkLayout size="narrow">
-        <div className="p-20 pb-120 text-16 pc:p-0">
-          {init ? (
-            <GenericFormProvider formOptions={{ mode: "onChange", defaultValues: INITIAL_DATA, shouldFocusError: true }}>
-              <EditContent />
-            </GenericFormProvider>
-          ) : (
-            <div className="flex h-[10vh] w-full items-center justify-center">
-              <LoadingDot />
-            </div>
-          )}
-        </div>
-      </PinkLayout>
+      <DottedLayout size="narrow">
+      <div className="p-20 pb-120 text-16 pc:p-0">
+        {init ? (
+          <GenericFormProvider formOptions={{ mode: "onChange", defaultValues: INITIAL_DATA, shouldFocusError: true }}>
+            <EditContent />
+          </GenericFormProvider>
+        ) : (
+          <div className="flex h-[10vh] w-full items-center justify-center">
+            <LoadingDot />
+          </div>
+        )}
+      </div>
+      </DottedLayout>
     </>
   );
 };

diff --git a/app/(route)/post/_components/_inputs/DetailInput.tsx b/app/(route)/post/_components/_inputs/DetailInput.tsx
@@ -33,7 +33,7 @@ const DetailInput = () => {
   return (
     <>
       <section className="flex flex-col gap-8">
-        <div className="relative flex items-center gap-4">
+        <div className="relative flex items-center gap-4 pc:text-20 pc:font-500">
           이미지
           {validateEdit(typeof defaultValues?.eventImages !== "undefined" && checkArrUpdate(defaultValues?.eventImages, imgList)) && (
             <InitButton onClick={() => setImgList(defaultValues?.eventImages as (string | File)[])} />

diff --git a/app/(route)/post/_components/_inputs/MainInput.tsx b/app/(route)/post/_components/_inputs/MainInput.tsx
@@ -48,7 +48,7 @@ const MainInput = () => {
         <InputText name="addressDetail" placeholder="상세 주소 입력" />
       </div>
       <div className="flex flex-col">
-        <div className="relative flex items-center gap-4">
+        <div className="relative flex items-center gap-4 pc:text-20 pc:font-500">
           기간
           {validateEdit(defaultValues?.startDate !== startDate || defaultValues?.endDate !== endDate) && (
             <InitButton

diff --git a/app/(route)/post/_components/_inputs/StarInput.tsx b/app/(route)/post/_components/_inputs/StarInput.tsx
@@ -51,7 +51,7 @@ const StarInput = () => {
     <>
       <div className="flex-item flex flex-col gap-20 pc:gap-32">
         <div className="relative flex flex-col">
-          <label className="flex items-center gap-4">
+          <label className="flex items-center gap-4 pc:text-20 pc:font-500">
             아티스트
             {validateEdit(typeof defaultValues?.artists !== "undefined" && (checkArrUpdate(defaultValues?.artists, artists) || defaultValues?.groupId !== groupId)) && (
               <InitButton onClick={() => handleArtistInit()} />
@@ -83,7 +83,7 @@ const StarInput = () => {
             placeholder="행사 유형을 선택하세요."
             tabIndex={0}
             onClick={() => (isPc ? openModal("event") : openBottomSheet("event"))}
-            onKeyDown={(event) => handleEnterDown(event, () => openBottomSheet("event"))}
+            onKeyDown={(event) => handleEnterDown(event, () => (isPc ? openModal("event") : openBottomSheet("event")))}
             isEdit={validateEdit(defaultValues?.eventType !== eventType)}
             onInit={() => setValue("eventType", defaultValues?.eventType || "카페")}
             noButton

diff --git a/app/(route)/post/_components/_inputs/SubInput.tsx b/app/(route)/post/_components/_inputs/SubInput.tsx
@@ -53,7 +53,7 @@ const SubInput = () => {
       <div className="flex flex-col gap-20 pc:gap-32">
         <div className="flex flex-col gap-12">
           <div className="relative flex flex-col gap-16 ">
-            <label className="flex items-center">
+            <label className="flex items-center pc:text-20 pc:font-500">
               주최자 SNS
               {validateEdit(defaultValues?.organizerSns !== organizerSns || defaultValues.snsType !== snsType) && (
                 <InitButton
@@ -99,7 +99,7 @@ const SubInput = () => {
           링크
         </InputText>
         <div className="flex flex-col gap-8">
-          <div className="relative flex items-center gap-4">
+          <div className="relative flex items-center gap-4 pc:text-20 pc:font-500">
             특전
             {validateEdit(typeof defaultValues?.tags !== "undefined" && checkArrUpdate(defaultValues?.tags, giftList)) && (
               <InitButton onClick={() => setGiftList(defaultValues?.tags as string[])} />

diff --git a/app/_components/ArtistCard.tsx b/app/_components/ArtistCard.tsx
@@ -12,7 +12,7 @@ interface Props {
 
 const ArtistCard = ({ children, onClick, profileImage, isChecked = false, isSmall = false, isPost = false }: Props) => {
   return (
-    <div className="flex-center h-fit w-fit flex-col gap-8 rounded-sm hover:cursor-pointer hover:brightness-50 pc:gap-4" onClick={onClick}>
+    <button type="button" className="flex-center h-fit w-fit flex-col gap-8 rounded-sm hover:cursor-pointer hover:brightness-50 pc:gap-4" onClick={onClick}>
       <div className={classNames(`relative h-88 w-88 ${isSmall ? "pc:h-80 pc:w-80" : "pc:h-120 pc:w-120"}`, { "pc:!h-80 pc:!w-80 ": isPost })}>
         <Image
           src={profileImage ? profileImage : "/image/no-profile.png"}
@@ -27,7 +27,7 @@ const ArtistCard = ({ children, onClick, profileImage, isChecked = false, isSmal
       >
         {children}
       </p>
-    </div>
+    </button>
   );
 };
 

diff --git a/app/_components/bottom-sheet/BottomSheetMaterial.tsx b/app/_components/bottom-sheet/BottomSheetMaterial.tsx
@@ -19,7 +19,7 @@ const BottomSheetFrame = forwardRef<HTMLDivElement, BottomSheetFrameProps>(({ ch
           onClick={(e: SyntheticEvent) => e.stopPropagation()}
           className="relative flex max-h-[55.6rem] w-full transform animate-slideUp flex-col overflow-hidden rounded-t-md bg-white-black pt-16 transition duration-150 ease-out pc:w-[50rem] pc:animate-none pc:rounded-md"
         >
-          <button onClick={closeBottomSheet} className="fixed right-20 top-16 z-nav">
+          <button tabIndex={0} onClick={closeBottomSheet} className="fixed right-20 top-16 z-nav">
             <CloseIcon stroke="#C1C5CC" width="24" height="24" />
           </button>
           <div className="overflow-y-auto">{children}</div>

diff --git a/app/_components/bottom-sheet/content/EventTypeList.tsx b/app/_components/bottom-sheet/content/EventTypeList.tsx
@@ -28,13 +28,17 @@ const EventTypeList = ({ handleClickFunc, contentRef }: Props) => {
 
   return (
     <ul className="pb-40 pt-16 pc:overflow-hidden pc:rounded-md pc:pb-0 pc:pt-0 pc:shadow-postBox" ref={contentRef}>
-      {EVENT_TYPE_LIST.map((event) => (
+      {EVENT_TYPE_LIST.map((eventType) => (
         <li
-          key={event}
-          onClick={() => handleEventClick(event)}
+          tabIndex={0}
+          key={eventType}
+          onClick={() => handleEventClick(eventType)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") handleEventClick(eventType);
+          }}
           className="cursor-pointer border-b border-gray-50 px-24 py-20 text-16 font-500 text-gray-900 hover:bg-main-pink-50 pc:px-20 pc:py-16"
         >
-          {`${EVENT_TYPE_EMOJI[event as EventType]} ${event}`}
+          {`${EVENT_TYPE_EMOJI[eventType as EventType]} ${eventType}`}
         </li>
       ))}
     </ul>

diff --git a/app/_components/input/InputArea.tsx b/app/_components/input/InputArea.tsx
@@ -22,7 +22,7 @@ const InputArea: Function = ({ children, placeholder, onKeyDown, isEdit, hasLimi
 
   return (
     <div className="flex flex-col">
-      <label htmlFor={field.name} className="relative pb-8 text-16 text-gray-900">
+      <label htmlFor={field.name} className="relative pb-8 text-16 text-gray-900 pc:text-20 pc:font-500">
         {children}
         {isEdit && <InitButton onClick={onInit} />}
       </label>
@@ -31,7 +31,7 @@ const InputArea: Function = ({ children, placeholder, onKeyDown, isEdit, hasLimi
         placeholder={placeholder ?? "입력해주세요."}
         {...field}
         onKeyDown={onKeyDown}
-        className={classNames("h-120 resize-none rounded-sm bg-gray-50 px-16 py-12 text-16 placeholder:text-gray-400 focus:outline focus:outline-1 focus:outline-blue", {
+        className={classNames("h-120 resize-none rounded-sm bg-gray-50 px-16 py-12 text-16 font-400 placeholder:text-gray-400 focus:outline focus:outline-1 focus:outline-blue", {
           "outline outline-1 outline-blue": isEdit,
         })}
       />

diff --git a/app/_components/input/SearchInput.tsx b/app/_components/input/SearchInput.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import { Dispatch, SetStateAction, useEffect } from "react";
 import { KeyboardEvent } from "react";
 import { useForm } from "react-hook-form";
@@ -54,9 +54,12 @@ const SearchInput = ({ keyword, setKeyword, initialKeyword, href, placeholder =
     setValue("search", keyword);
   }, [keyword]);
 
+  const curPath = usePathname();
+
   return (
     <div className="relative">
       <input
+        autoFocus={curPath === "/post" || curPath === "/edit"}
         className={`h-44 w-full rounded-full bg-gray-50 px-16 py-12 pr-68 text-16 text-black-white placeholder:text-gray-400 focus:outline-none ${size === "lg" ? "pc:h-52 pc:border pc:border-gray-100 pc:bg-white-black" : ""} pc:px-20 pc:pr-76`}
         placeholder={placeholder}
         {...register("search")}