From b739f5374e99466d681d8eda5fed53dfc7ff396a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=95=88=ED=9D=AC=EC=9B=90?= <hw7666@naver.com>
Date: Sun, 17 Mar 2024 15:42:00 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=92=84=20design:=20edit=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20pc=20=EB=B0=98=EC=9D=91=ED=98=95=20?=
 =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/(route)/event/[eventId]/edit/page.tsx     | 27 ++++++++++---------
 .../post/_components/_inputs/DetailInput.tsx  |  2 +-
 .../post/_components/_inputs/MainInput.tsx    |  2 +-
 .../post/_components/_inputs/StarInput.tsx    |  2 +-
 .../post/_components/_inputs/SubInput.tsx     |  4 +--
 app/_components/input/InputArea.tsx           |  4 +--
 6 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/app/(route)/event/[eventId]/edit/page.tsx b/app/(route)/event/[eventId]/edit/page.tsx
index d38e2251..f36feb80 100644
--- 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
index 95f6a638..9437814c 100644
--- 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
index b5fa9a18..636de551 100644
--- 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
index b7aee943..ca9cae90 100644
--- 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()} />
diff --git a/app/(route)/post/_components/_inputs/SubInput.tsx b/app/(route)/post/_components/_inputs/SubInput.tsx
index 05d61cf5..a695535e 100644
--- 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/input/InputArea.tsx b/app/_components/input/InputArea.tsx
index 911e2679..2c0d0acb 100644
--- 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,
         })}
       />

From fb66a91d485285ff688dccb8508de880cabf0945 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=95=88=ED=9D=AC=EC=9B=90?= <hw7666@naver.com>
Date: Mon, 18 Mar 2024 01:57:53 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=E2=9C=A8=20feat:=20=EC=95=84=ED=8B=B0?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EB=AA=A8=EB=8B=AC=20=EC=9E=90=EB=8F=99?=
 =?UTF-8?q?=ED=8F=AC=EC=BB=A4=EC=8A=A4=20=EB=B0=8F=20=ED=83=AD=20=ED=82=A4?=
 =?UTF-8?q?=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/(route)/post/_components/_inputs/StarInput.tsx   |  2 +-
 app/_components/ArtistCard.tsx                       |  4 ++--
 app/_components/bottom-sheet/BottomSheetMaterial.tsx |  2 +-
 .../bottom-sheet/content/EventTypeList.tsx           | 12 ++++++++----
 app/_components/input/SearchInput.tsx                |  5 ++++-
 5 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/app/(route)/post/_components/_inputs/StarInput.tsx b/app/(route)/post/_components/_inputs/StarInput.tsx
index ca9cae90..a5f3d51d 100644
--- a/app/(route)/post/_components/_inputs/StarInput.tsx
+++ b/app/(route)/post/_components/_inputs/StarInput.tsx
@@ -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/_components/ArtistCard.tsx b/app/_components/ArtistCard.tsx
index eb6f5ff1..cee04c52 100644
--- 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
index 3a495b42..bd8f8051 100644
--- 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
index bd753d35..ad8f4b85 100644
--- 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/SearchInput.tsx b/app/_components/input/SearchInput.tsx
index 16ccfaf5..a3786b60 100644
--- 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")}