style: prettier 스타일 변경 #27

frontend/src/components/Form/VisibilitySelector.tsx

@@ -5,19 +5,20 @@ type VisibilitySelectorProps = {
   onSelect: (selected: 'public' | 'private') => void;
 };
 
-const VisibilitySelector = ({selected,onSelect}:VisibilitySelectorProps) => {
-
-
+const VisibilitySelector = ({
+  selected,
+  onSelect,
+}: VisibilitySelectorProps) => {
   return (
-    <div className=" bg-white flex flex-col gap-2">
+    <div className="flex flex-col gap-2 bg-white">
       <h2 className="text-lg font-bold">공개 범위</h2>
-      <p className="text-gray-600 mb-4">공개 여부를 선택해주세요</p>
+      <p className="mb-4 text-gray-600">공개 여부를 선택해주세요</p>
 
       <Option
         label="공개"
         description="나의 지도를 다른 사람들과 공유할 수 있습니다."
         isSelected={selected === 'public'}
-        onClick={()=>onSelect('public')}
+        onClick={() => onSelect('public')}
       />
 
       <Option
@@ -30,4 +31,4 @@ const VisibilitySelector = ({selected,onSelect}:VisibilitySelectorProps) => {
   );
 };
 
-export default VisibilitySelector;
+export default VisibilitySelector;

frontend/src/components/common/Option.tsx

@@ -1,23 +1,21 @@
 type OptionProps = {
-    label: string;
-    description: string;
-    isSelected: boolean;
-    onClick: () => void;
-  };
-
-  const Option = ({ label, description, isSelected, onClick }: OptionProps) => (
-    <div
-      onClick={onClick}
-      className={`p-2 h-[50px] rounded-lg border-[1.5px] cursor-pointer flex items-center gap-2 ${
-        isSelected ? 'border-[#00A3FF]' : 'border-gray-300'
-      }`}
-    >
-      <div className={`font-bold text-center`}>
-        {label}
-      </div>
+  label: string;
+  description: string;
+  isSelected: boolean;
+  onClick: () => void;
+};
+
+const Option = ({ label, description, isSelected, onClick }: OptionProps) => (
+  <div
+    onClick={onClick}
+    className={`flex h-[50px] cursor-pointer items-center gap-2 rounded-lg border-[1.5px] p-2 ${
+      isSelected ? 'border-[#00A3FF]' : 'border-gray-300'
+    }`}
+  >
+    <div className={`text-center font-bold`}>{label}</div>
     <p>|</p>
-      <span className="text-gray-500 ml-2 text-sm">{description}</span>
-    </div>
-  );
+    <span className="ml-2 text-sm text-gray-500">{description}</span>
+  </div>
+);
 
-  export default Option;
+export default Option;

frontend/src/components/common/TextInputArea.tsx

@@ -5,32 +5,34 @@ type TextInputAreaProps = {
   onChange: (value: string) => void;
   placeholder?: string;
   maxLength?: number;
-  height?: number; 
+  height?: number;
   isTextArea?: boolean;
 };
 
-const TextInputArea = ({         
+const TextInputArea = ({
   value,
   onChange,
   placeholder,
   maxLength,
   height = 20,
   isTextArea = false,
 }: TextInputAreaProps) => {
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
     onChange(e.target.value);
   };
 
   return (
-    <div className="w-full flex justify-between">
+    <div className="flex w-full justify-between">
       {isTextArea ? (
         <textarea
           value={value}
           onChange={handleChange}
           placeholder={placeholder}
           maxLength={maxLength}
           style={{ height: `${height}px` }}
-          className="w-full gray p-2 rounded-lg border-none text-customText bg-customGray focus:outline-none focus:ring-2 focus:ring-blue-500"
+          className="gray text-customText bg-customGray w-full rounded-lg border-none p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
         />
       ) : (
         <input
@@ -39,7 +41,7 @@ const TextInputArea = ({
           onChange={handleChange}
           placeholder={placeholder}
           maxLength={maxLength}
-          className="w-full p-2 rounded-lg border-none text-customText bg-customGray focus:outline-none focus:ring-2 focus:ring-blue-500"
+          className="text-customText bg-customGray w-full rounded-lg border-none p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
         />
       )}
       {maxLength && (

frontend/src/pages/MapCreation/MapCreateCoursePage.tsx

@@ -1,8 +1,5 @@
-
 const MapCreateCoursePage = () => {
-  return (
-    <div>MapCreateCoursePage</div>
-  )
-}
+  return <div>MapCreateCoursePage</div>;
+};
 
-export default MapCreateCoursePage
+export default MapCreateCoursePage;

frontend/src/pages/MapCreation/MapPage.tsx

@@ -1,9 +1,7 @@
 import CreateBaseMapForm from '@/components/Form/CreateBaseMapForm';
 
 const MapPage = () => {
-  return (
-    <CreateBaseMapForm />
-  );
+  return <CreateBaseMapForm />;
 };
 
 export default MapPage;