border 수정

TripInfoWeb · Jun 28, 2024 · a86fbb4 · a86fbb4
1 parent 31431c4
commit a86fbb4
Show file tree

Hide file tree

Showing 15 changed files with 34 additions and 36 deletions.
diff --git a/src/components/common/InformationItem.tsx b/src/components/common/InformationItem.tsx
@@ -29,7 +29,7 @@ const InformationItem = ({ id, category, title, image }: MyProps) => {
   }
 
   return (
-    <div className="relative flex h-[19rem] w-[19rem] flex-col justify-between rounded-2xl outline outline-2 outline-gray3 duration-300 hover:outline-main">
+    <div className="relative flex h-[19rem] w-[19rem] flex-col justify-between rounded-2xl outline outline-1 outline-gray3 duration-300 hover:outline-main">
       <Image
         className="-z-10 rounded-[0.875rem]"
         src={image}
@@ -41,7 +41,7 @@ const InformationItem = ({ id, category, title, image }: MyProps) => {
       />
       <div className="rounded-0 flex flex-row items-center justify-between px-5 pt-5">
         <p
-          className={`w-fit rounded-full border-2 px-4 py-[0.375rem] text-xs font-semibold shadow ${style}`}
+          className={`w-fit rounded-full border-[0.0625rem] px-4 py-[0.375rem] text-xs font-semibold shadow ${style}`}
         >
           {category}
         </p>

diff --git a/src/components/common/MeetingItem.tsx b/src/components/common/MeetingItem.tsx
@@ -55,7 +55,7 @@ const MeetingItem = ({
       <div className="flex flex-col">
         <div className="flex flex-row items-center justify-between">
           <p
-            className={`w-fit rounded-full border-2 px-4 py-[0.375rem] text-xs font-semibold shadow ${style}`}
+            className={`w-fit rounded-full border-[0.0625rem] px-4 py-[0.375rem] text-xs font-semibold shadow ${style}`}
           >
             {category}
           </p>
@@ -117,6 +117,7 @@ const MeetingItem = ({
             </div>
             <div className="flex flex-row items-center gap-3">
               <Image
+                className="scale-150"
                 src="/people-icon.svg"
                 alt="people-icon"
                 width={10}

diff --git a/src/components/home/BestInformationList.tsx b/src/components/home/BestInformationList.tsx
@@ -53,7 +53,7 @@ const BestInformationList = () => {
               </p>
             </h2>
             <Link
-              className="hidden h-[2.3125rem] w-[5.8125rem] items-center justify-center rounded-full border-2 border-gray3 text-gray1 hover:border-main hover:bg-main hover:text-white max-[744px]:flex"
+              className="hidden h-[2.3125rem] w-[5.8125rem] items-center justify-center rounded-full border-[0.0625rem] border-gray3 text-gray1 hover:border-main hover:bg-main hover:text-white max-[744px]:flex"
               href="/informations/restaurant?subCategory=all"
             >
               전체보기
@@ -64,7 +64,7 @@ const BestInformationList = () => {
           </p>
         </div>
         <Link
-          className="flex h-[2.3125rem] w-[5.8125rem] items-center justify-center rounded-full border-2 border-gray3 text-gray1 hover:border-main hover:bg-main hover:text-white max-[744px]:hidden"
+          className="flex h-[2.3125rem] w-[5.8125rem] items-center justify-center rounded-full border-[0.0625rem] border-gray3 text-gray1 hover:border-main hover:bg-main hover:text-white max-[744px]:hidden"
           href="/informations/restaurant?subCategory=all"
         >
           전체보기

diff --git a/src/components/home/NewMeetingList.tsx b/src/components/home/NewMeetingList.tsx
@@ -123,7 +123,7 @@ const NewMeetingList = () => {
               </p>
             </h2>
             <Link
-              className="hidden h-[2.3125rem] w-[5.8125rem] items-center justify-center rounded-full border-2 border-gray3 text-gray1 hover:border-main hover:bg-main hover:text-white max-[744px]:flex"
+              className="hidden h-[2.3125rem] w-[5.8125rem] items-center justify-center rounded-full border-[0.0625rem] border-gray3 text-gray1 hover:border-main hover:bg-main hover:text-white max-[744px]:flex"
               href="/meetings"
             >
               전체보기
@@ -134,7 +134,7 @@ const NewMeetingList = () => {
           </p>
         </div>
         <Link
-          className="flex h-[2.3125rem] w-[5.8125rem] items-center justify-center rounded-full border-2 border-gray3 text-gray1 hover:border-main hover:bg-main hover:text-white max-[744px]:hidden"
+          className="flex h-[2.3125rem] w-[5.8125rem] items-center justify-center rounded-full border-[0.0625rem] border-gray3 text-gray1 hover:border-main hover:bg-main hover:text-white max-[744px]:hidden"
           href="/meetings"
         >
           전체보기

diff --git a/src/components/informations/InformationFilterModal.tsx b/src/components/informations/InformationFilterModal.tsx
@@ -18,11 +18,11 @@ const InformationFilterModal = ({ closeModal }: MyProps) => {
         </div>
         <div className="flex flex-col gap-4 px-5 pb-2">
           <h3 className="text-lg font-bold text-black">지역별</h3>
-          <div className="flex flex-wrap items-start gap-1 font-medium text-gray1">
+          <div className="flex flex-wrap items-start gap-2 font-medium text-gray1">
             {LOCATION.map((location, index) => (
               <button
                 key={index}
-                className="rounded-full border-2 border-[#E9EBED] px-3 py-[0.375rem] text-sm font-medium hover:scale-105 hover:text-main"
+                className="rounded-full border-[0.0625rem] border-[#E9EBED] px-3 py-[0.375rem] text-sm font-medium hover:scale-105 hover:text-main"
                 type="button"
               >
                 {location}

diff --git a/src/components/informations/InformationViewer.tsx b/src/components/informations/InformationViewer.tsx
@@ -219,7 +219,7 @@ const InformationViewer = ({
         />
       </div>
       <a
-        className="-mt-4 flex h-fit w-full flex-col justify-center gap-2 rounded-b-2xl border-x-2 border-b-2 px-6 pb-10 pt-12"
+        className="-mt-4 flex h-fit w-full flex-col justify-center gap-2 rounded-b-2xl border-x-[0.0625rem] border-b-[0.0625rem] px-6 pb-10 pt-12"
         href={`https://map.kakao.com/link/map/${info.placeId}`}
         target="_blank"
       >

diff --git a/src/components/informations/SubCategoryList.tsx b/src/components/informations/SubCategoryList.tsx
@@ -17,7 +17,7 @@ const SubCategoryList = ({ category, subCategory }: MyProps) => {
           key={index}
           className={
             `${subCategory === value.query ? "border-main bg-main text-white" : "text-gray1"} ` +
-            "rounded-full border-2 border-[#E9EBED] px-3 py-[0.375rem] text-sm font-medium hover:scale-105"
+            "rounded-full border-[0.0625rem] border-[#E9EBED] px-3 py-[0.375rem] text-sm font-medium hover:scale-105"
           }
           href={`/informations/${CATEGORY_TEXT[category]}?subCategory=${value.query}`}
         >

diff --git a/src/components/informations/write/CategoryModal.tsx b/src/components/informations/write/CategoryModal.tsx
@@ -38,7 +38,7 @@ const CategoryModal = ({
                     ? "border-main bg-main font-black text-white"
                     : "text-gray1"
                 } ` +
-                "rounded-full border-2 border-[#E9EBED] px-3 py-1 text-sm font-medium hover:scale-105"
+                "rounded-full border-[0.0625rem] border-[#E9EBED] px-3 py-1 text-sm font-medium hover:scale-105"
               }
               type="button"
               onClick={() => setCategory("맛집")}
@@ -52,7 +52,7 @@ const CategoryModal = ({
                     ? "border-main bg-main font-black text-white"
                     : "text-gray1"
                 } ` +
-                "rounded-full border-2 border-[#E9EBED] px-3 py-1 text-sm font-medium hover:scale-105"
+                "rounded-full border-[0.0625rem] border-[#E9EBED] px-3 py-1 text-sm font-medium hover:scale-105"
               }
               type="button"
               onClick={() => setCategory("숙박")}
@@ -66,7 +66,7 @@ const CategoryModal = ({
                     ? "border-main bg-main font-black text-white"
                     : "text-gray1"
                 } ` +
-                "rounded-full border-2 border-[#E9EBED] px-3 py-1 text-sm font-medium hover:scale-105"
+                "rounded-full border-[0.0625rem] border-[#E9EBED] px-3 py-1 text-sm font-medium hover:scale-105"
               }
               type="button"
               onClick={() => setCategory("액티비티")}
@@ -79,13 +79,13 @@ const CategoryModal = ({
           {subCategories.length !== 0 && (
             <h3 className="text-lg font-medium text-black">소분류 선택</h3>
           )}
-          <div className="flex flex-wrap items-center gap-1">
+          <div className="flex flex-wrap items-center gap-2">
             {subCategories.slice(1).map((value, index) => (
               <button
                 key={index}
                 className={
                   `${subCategory === value.buttonText ? "border-main bg-main text-white" : "text-gray1"} ` +
-                  "rounded-full border-2 border-[#E9EBED] px-3 py-1 text-sm font-medium hover:scale-105"
+                  "rounded-full border-[0.0625rem] border-[#E9EBED] px-3 py-1 text-sm font-medium hover:scale-105"
                 }
                 type="button"
                 onClick={() => setSubCategory(value.buttonText)}

diff --git a/src/components/informations/write/ImageUploadItem.tsx b/src/components/informations/write/ImageUploadItem.tsx
@@ -26,7 +26,7 @@ const ImageUploadItem = ({
   if (image !== "") {
     return (
       <div
-        className="relative flex h-[9.375rem] w-40 cursor-pointer flex-col items-center justify-between rounded-xl border-2 p-2 hover:border-main"
+        className="relative flex h-[9.375rem] w-40 cursor-pointer flex-col items-center justify-between rounded-xl border-[0.0625rem] p-2 hover:border-main"
         onDragStart={(e) => e.preventDefault()}
         onClick={() => setMainImageIndex(index)}
         onTouchEnd={() => setMainImageIndex(index)}
@@ -57,11 +57,11 @@ const ImageUploadItem = ({
 
   return (
     <label
-      className={`${index >= 12 ? "hidden" : ""} flex h-[9.375rem] w-40 cursor-pointer flex-col items-center justify-center rounded-xl border-2 hover:border-main`}
+      className={`${index >= 12 ? "hidden" : ""} flex h-[9.375rem] w-40 cursor-pointer flex-col items-center justify-center rounded-xl border-[0.0625rem] hover:border-main`}
       htmlFor="file"
       onClick={onUploadButtonClicked}
     >
-      <div className="flex h-12 w-12 items-center justify-center rounded-full border-2 border-main text-xl text-main">
+      <div className="flex h-12 w-12 items-center justify-center rounded-full border-[0.0625rem] border-main text-xl text-main">
         +
       </div>
       <p className="pb-[0.375rem] pt-3 text-xs font-medium text-gray1">

diff --git a/src/components/informations/write/InformationEditor.tsx b/src/components/informations/write/InformationEditor.tsx
@@ -38,10 +38,7 @@ const InformationEditor = ({
   setHashtag,
 }: MyProps) => {
   return (
-    <form
-      className="flex w-[60rem] flex-col max-[1024px]:w-[39.75rem] max-[744px]:w-[21.5625rem]"
-      action={onSubmit}
-    >
+    <form className="flex w-[60rem] flex-col max-[1024px]:w-[39.75rem] max-[744px]:w-[21.5625rem]">
       {locationModal && <PlaceModalContainer closeModal={closeLocationModal} />}
       {categoryModal && (
         <CategoryModalContainer closeModal={closeCategoryModal} />
@@ -57,7 +54,7 @@ const InformationEditor = ({
           제목<span className="text-2xl text-main">*</span>
         </h2>
         <input
-          className="h-full flex-grow rounded-3xl border-2 border-gray3 pl-5 text-sm font-medium outline-none hover:border-main focus:border-main"
+          className="h-full flex-grow rounded-3xl border-[0.0625rem] border-gray3 pl-5 text-sm font-medium outline-none hover:border-main focus:border-main"
           type="text"
           autoComplete="title"
           name="title"
@@ -73,7 +70,7 @@ const InformationEditor = ({
             장소<span className="text-2xl text-main">*</span>
           </h2>
           <input
-            className="h-full flex-grow rounded-3xl border-2 border-gray3 pl-5 text-sm font-medium outline-none hover:border-main focus:border-main"
+            className="h-full flex-grow rounded-3xl border-[0.0625rem] border-gray3 pl-5 text-sm font-medium outline-none hover:border-main focus:border-main"
             type="text"
             autoComplete="location"
             name="location"
@@ -117,7 +114,7 @@ const InformationEditor = ({
         ))}
       </div>
       <textarea
-        className="h-[17.5rem] resize-none rounded-3xl border-2 border-gray3 p-6 text-sm font-medium outline-none hover:border-main focus:border-main"
+        className="h-[17.5rem] resize-none rounded-3xl border-[0.0625rem] border-gray3 p-6 text-sm font-medium outline-none hover:border-main focus:border-main"
         placeholder="장소 방문은 어땠나요? 장소 정보 및 나의 경험을 작성해 다른 솔리들에게 도움을 주세요."
         autoComplete="content"
         name="content"
@@ -133,7 +130,7 @@ const InformationEditor = ({
         <h2 className="w-44 pt-3 text-lg font-bold text-black">해시태그</h2>
         <div className="flex w-full flex-col items-end gap-3 overflow-hidden">
           <div
-            className="flex h-[3.3125rem] w-full flex-row items-center gap-2 overflow-x-hidden rounded-3xl border-2 pl-5 hover:border-main"
+            className="flex h-[3.3125rem] w-full flex-row items-center gap-2 overflow-x-hidden rounded-3xl border-[0.0625rem] pl-5 hover:border-main"
             ref={hashtagsHook.listRef}
             onMouseDown={hashtagsHook.onDragStart}
             onMouseMove={hashtagsHook.onDragMove}
@@ -155,7 +152,7 @@ const InformationEditor = ({
               />
             ))}
             <input
-              className="w-[14rem] border-main py-2 text-sm font-medium outline-none hover:border-b-2"
+              className="w-[14rem] border-main py-2 text-sm font-medium outline-none hover:border-b-[0.0625rem]"
               type="text"
               autoComplete="hashtag"
               name="hashtag"
@@ -165,6 +162,7 @@ const InformationEditor = ({
               onKeyDown={(e) => {
                 if (e.key === "Enter") {
                   e.preventDefault();
+                  e.persist();
                   editorStore.addHashtag(hashtag);
                   setHashtag("");
                 }
@@ -192,7 +190,7 @@ const InformationEditor = ({
           {editorStore.tips.map((tip, index) => (
             <input
               key={index}
-              className="h-[3.3125rem] rounded-3xl border-2 border-gray3 pl-5 text-sm font-medium outline-none hover:border-main focus:border-main"
+              className="h-[3.3125rem] rounded-3xl border-[0.0625rem] border-gray3 pl-5 text-sm font-medium outline-none hover:border-main focus:border-main"
               type="text"
               autoComplete="tip"
               name="tip"

diff --git a/src/components/informations/write/PlaceModal.tsx b/src/components/informations/write/PlaceModal.tsx
@@ -1,4 +1,3 @@
-import KakaoMapAddressContainer from "@/containers/common/KakaoMapAddressContainer";
 import Image from "next/image";
 import { MdClose } from "react-icons/md";
 import { DebouncedState } from "use-debounce";
@@ -53,7 +52,7 @@ const PlaceModal = ({
         <div className="flex flex-col gap-8 px-5">
           <div className="flex flex-col gap-2">
             <h3 className="text-lg font-medium text-black">장소 선택</h3>
-            <div className="flex h-11 flex-row items-center border-2 text-sm">
+            <div className="flex h-11 flex-row items-center border-[0.0625rem] text-sm">
               <button
                 className={`h-11 flex-[50%] ${isCustom ? "text-gray1" : "bg-main text-white"}`}
                 type="button"
@@ -106,7 +105,7 @@ const PlaceModal = ({
             <h3 className="text-lg font-medium text-black">
               지도에서 주소 찾기
             </h3>
-            <KakaoMapAddressContainer />
+            {/* <KakaoMapAddressContainer /> */}
             <div className="mt-4 flex flex-row items-center justify-between gap-2">
               <input
                 className="h-[3.3125rem] w-96 rounded-[21px] border-[0.0625rem] bg-search-icon bg-[length:1rem] bg-[left_1rem_center] bg-no-repeat pl-10 pr-6 text-sm outline-none hover:border-main focus:border-main max-[480px]:w-full"

diff --git a/src/components/meetings/write/GatheringContent.tsx b/src/components/meetings/write/GatheringContent.tsx
@@ -109,4 +109,4 @@ const GatheringContent = () => {
     </>
   );
 };
-export default GatheringContent
+export default GatheringContent;
diff --git a/src/containers/common/KakaoMapLinkContainer.tsx b/src/containers/common/KakaoMapLinkContainer.tsx
@@ -69,7 +69,7 @@ const KakaoMapLinkContainer = ({ placeName, placeId }: MyProps) => {
   return (
     <a
       id="map"
-      className={`${loading ? "animate-pulse" : ""} h-48 w-full rounded-2xl border-2 bg-slate-200`}
+      className={`${loading ? "animate-pulse" : ""} h-48 w-full rounded-2xl border-[0.0625rem] bg-slate-200`}
       href={`https://map.kakao.com/link/map/${placeId}`}
       target="_blank"
     />

diff --git a/src/containers/informations/write/InformationEditorContainer.tsx b/src/containers/informations/write/InformationEditorContainer.tsx
@@ -3,7 +3,7 @@
 import InformationEditor from "@/components/informations/write/InformationEditor";
 import useDragScroll from "@/hooks/useDragScroll";
 import useEditorStore from "@/store/editorStore";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 const InformationEditorContainer = () => {
   const { resetPlaceInfo } = useEditorStore();

diff --git a/src/containers/informations/write/PlaceModalContainer.tsx b/src/containers/informations/write/PlaceModalContainer.tsx
@@ -11,7 +11,7 @@ type MyProps = {
 
 const PlaceModalContainer = ({ closeModal }: MyProps) => {
   const { address, placeName, changeField, resetPlaceInfo } = useEditorStore();
-  const [isCustom, setIsCustom] = useState<boolean>(true);
+  const [isCustom, setIsCustom] = useState<boolean>(false);
 
   // 검색으로 얻어진 장소 목록
   const [placeInfos, setPlaceInfos] = useState<
-Original file line number
+Diff line change
@@ Expand Up / @@ -109,4 +109,4 @@ const GatheringContent = () => { @@
         </>
       );
     };
-    export default GatheringContent
+    export default GatheringContent;