update components

src/Router.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   createBrowserRouter,
   redirect,

src/api/user.ts

@@ -3,9 +3,9 @@ import { TokenProviderType } from '@src/types/user';
 import { InitUserType } from '@src/pages/Auth/components/Init/index.d';
 import { NewProfileType } from '@src/pages/Mypage/index.d';
 import { AuthType } from '@src/types/data';
-import img0 from '../asset/images/profiles/initProfile0.png';
-import img1 from '../asset/images/profiles/initProfile1.png';
-import img2 from '../asset/images/profiles/initProfile2.png';
+import img0 from '@src/asset/images/profiles/initProfile0.png';
+import img1 from '@src/asset/images/profiles/initProfile1.png';
+import img2 from '@src/asset/images/profiles/initProfile2.png';
 import jigumeAxios from './axios';
 
 const initProfiles = [img0, img1, img2];
@@ -56,7 +56,7 @@ export const handleRefreshToken = async (auth: AuthType) => {
  */
 export const codeProvide = async (
   code: string | null,
-  domain: string
+  domain?: string
 ): Promise<TokenProviderType> => {
   /** @type {string} */
   if (!code) throw Error('인가코드가 옳바르지 않습니다.');

src/components/InputWithNum.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { InputWithNumType } from '.';
 
 export default function InputWithNum({

src/components/LoadingButton.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default function LoadingButton() {
   return (
     <button

src/components/NextButton.tsx

@@ -1,6 +1,4 @@
-import React from 'react';
 import { useNavigate } from 'react-router-dom';
-import { on } from 'events';
 import { NextButtnType } from '.';
 
 export default function NextButton({

src/components/OpenGraphViewer.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { OpenGraphViewerType } from '.';
 
 export default function OpenGraphViewer({

src/pages/Goods/components/PlaceInfo/components/IntroStaticMap.tsx → src/components/StaticMapOnMarker.tsx

@@ -1,14 +1,13 @@
-import React from 'react';
 import { StaticMap } from 'react-kakao-maps-sdk';
 import { PositionType } from '@src/types/map';
-import markerPin from '../../../../../asset/icon/markerPin.svg';
+import markerPin from '@src/asset/icon/markerPin.svg';
 
-export default function IntroStaticMap({
+export default function StaticMapOnMarker({
   img,
   position,
 }: {
-  img: string;
-  position: PositionType;
+  img?: string;
+  position?: PositionType;
 }) {
   return (
     <div className="relative aspect-[1.9197] w-full rounded-xl bg-gray-300">
@@ -37,3 +36,8 @@ export default function IntroStaticMap({
     </div>
   );
 }
+
+StaticMapOnMarker.defaultProps = {
+  img: undefined,
+  position: undefined,
+};

src/components/StyledCountInput.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import CurrencyInput from 'react-currency-input-field';
 import { StyledCurrencyInputType } from '.';
 

src/components/StyledCurrencyInput.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import CurrencyInput from 'react-currency-input-field';
 import { StyledCurrencyInputType } from '.';
 

src/components/StyledInputText.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { StyledInputTextType } from './index.d';
 
 export default function StyledInputText({

src/components/StyledTextarea.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { StyledTextareaType } from '.';
 
 export default function StyledTextarea({

src/pages/Announcement/components/Comments.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
+import SendIcon from '@src/asset/icon/SendIcon.svg';
 import CommentsContent from './CommentsContent';
-import SendIcon from '../../../asset/icon/SendIcon.svg';
 // import SendIcon from '../../../../../asset/icon/SendIcon.svg';
 
 export default function Comments() {

src/pages/Announcement/components/CommentsContent.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
+import addCommentIcon from '@src/asset/icon/addCommentIcon.svg';
 import User from './User';
 import CommentsText from './CommentsText';
-import addCommentIcon from '../../../asset/icon/addCommentIcon.svg';
 
 export default function CommentsContent() {
   return (

src/pages/Announcement/components/CommentsInput.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import SendIcon from '../../../asset/icon/SendIcon.svg';
+import SendIcon from '@src/asset/icon/SendIcon.svg';
 // import SendIcon from '../../../../../asset/icon/SendIcon.svg';
 
 export default function CommentsInput() {

src/pages/Announcement/components/CommentsText.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default function CommentsText() {
   return (
     <div className="m-4 flex flex-row pl-12 pr-5 text-[14px]">

src/pages/Announcement/components/ProductAbout.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import ItemComponent from '../../Map/components/BottomSheetComponent/components/ItemComponent';
+import ItemComponent from '@src/pages/Map/components/BottomSheetComponent/components/ItemComponent';
 
 export default function ProductAbout() {
   return (

src/pages/Announcement/components/User.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
 import Avatar from 'boring-avatars';
 import {
   primaryBlue,
   primaryJade,
   primaryPurple,
   primaryYello,
-} from '../../../common';
+} from '@src/common';
 
 const nickname = [
   'jeju',

src/pages/Announcement/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import ProductAbout from './components/ProductAbout';
 import CommentsContent from './components/CommentsContent';
 import CommentsInput from './components/CommentsInput';

src/pages/Auth/components/Init/components/circularProgress.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default function CircularProgress() {
   return (
     <svg

src/pages/Auth/components/Init/components/initAccessRights.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
-import Camera from '../../../../../asset/icon/initAccess/camera.svg';
-import SaveArea from '../../../../../asset/icon/initAccess/saveArea.svg';
-import Position from '../../../../../asset/icon/initAccess/position.svg';
+import Camera from '@src/asset/icon/initAccess/camera.svg';
+import SaveArea from '@src/asset/icon/initAccess/saveArea.svg';
+import Position from '@src/asset/icon/initAccess/position.svg';
 
 export default function InitAccessRights() {
   return (

src/pages/Auth/components/Init/components/initAddress.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigate, useOutletContext } from 'react-router-dom';
 import DaumPostcodeEmbed, { Address } from 'react-daum-postcode';
-import NextButton from '../../../../../components/NextButton';
-import CloseIcon from '../../../../../asset/icon/CloseIcon.svg';
+import NextButton from '@src/components/NextButton';
+import CloseIcon from '@src/asset/icon/CloseIcon.svg';
 import { InitContextType } from '../index.d';
 
 export default function InitAddress() {

src/pages/Auth/components/Init/components/initProfileImage.tsx

@@ -3,9 +3,9 @@ import { useMutation } from 'react-query';
 import { useNavigate, useOutletContext } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
 import { AuthType } from '@src/types/data';
-import { setNewUser } from '../../../../../api/user';
-import { authState } from '../../../../../data';
-import CameraIcon from '../../../../../asset/icon/mdi_camera.svg';
+import { authState } from '@src/data';
+import CameraIcon from '@src/asset/icon/mdi_camera.svg';
+import { setNewUser } from '@src/api/user';
 import { InitContextType } from '../index.d';
 
 export default function InitProfileImage() {

src/pages/Auth/components/Init/components/initUser.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { useOutletContext } from 'react-router-dom';
 import { useMutation } from 'react-query';
-import NextButton from '../../../../../components/NextButton';
+import NextButton from '@src/components/NextButton';
+import { checkNickname } from '@src/api/user';
+import { handleTextFieldColor, validNickname } from '@src/utils';
 import CircularProgress from './circularProgress';
-import { checkNickname } from '../../../../../api/user';
-import { handleTextFieldColor, validNickname } from '../../../../../utils';
 import { InitContextType } from '../index.d';
 
 export default function InitUser() {

src/pages/Auth/components/Init/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Outlet, useNavigate } from 'react-router-dom';
-import ChevronLeft from '../../../../asset/icon/chevronLeft.svg';
+import ChevronLeft from '@src/asset/icon/chevronLeft.svg';
 import { InitUserType } from './index.d';
 
 export default function Init() {

src/pages/Auth/components/Refresh/index.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
 import { useRecoilState } from 'recoil';
 import { useQuery } from 'react-query';
 import { Outlet } from 'react-router-dom';
 import { AuthType, UserType } from '@src/types/data';
-import { authState, initAuth, initUser, userState } from '../../../../data';
-import { handleRefreshToken } from '../../../../api/user';
+import { authState, initAuth, initUser, userState } from '@src/data';
+import { handleRefreshToken } from '@src/api/user';
 
 export default function Refresh() {
   const [auth, setAuth] = useRecoilState<AuthType>(authState);

src/pages/Auth/components/login.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
 import { useRecoilState } from 'recoil';
 import { AuthType } from '@src/types/data';
-import logo from '../../../asset/images/login/login_logo.png';
-import kakaoImg from '../../../asset/images/login/kakao_login.png';
-import naverImg from '../../../asset/images/login/naver_login.png';
-import { authState } from '../../../data';
+import logo from '@src/asset/images/login/login_logo.png';
+import kakaoImg from '@src/asset/images/login/kakao_login.png';
+import naverImg from '@src/asset/images/login/naver_login.png';
+import { authState } from '@src/data';
 
 export default function Login() {
   const KAKAO_KEY = import.meta.env.VITE_KAKAO_REST_KEY;

src/pages/Auth/index.tsx

@@ -1,12 +1,11 @@
-import React from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useQuery } from 'react-query';
 import { useRecoilState } from 'recoil';
 import { add } from 'date-fns';
 import { AuthType } from '@src/types/data';
+import { authState } from '@src/data';
+import { codeProvide } from '@src/api/user';
 import Loading from '../Map/components/Loading';
-import { authState } from '../../data';
-import { codeProvide } from '../../api/user';
 
 export default function Auth() {
   const navigate = useNavigate();

src/pages/Goods/components/CarouselBox/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Pagination } from 'swiper/modules';
 

src/pages/Goods/components/IntroCategory.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import category from '../../Map/components/BottomSheetComponent/data';
 
 export default function IntroCategory({ idx }: { idx: number }) {

src/pages/Goods/components/PlaceInfo/index.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { useQuery } from 'react-query';
 import { GoodsPageDTO } from '@src/types/goods';
 import { PositionType } from '@src/types/map';
-import IntroStaticMap from './components/IntroStaticMap';
+import IntroStaticMap from '@src/components/StaticMapOnMarker';
 
 export default function PlaceInfo({
   data,
@@ -12,9 +12,10 @@ export default function PlaceInfo({
   const { kakao } = window;
   const [address, setAddress] = useState('-');
 
-  const getAddress = (position: PositionType) => {
+  const getAddress = (position?: PositionType) => {
     if (kakao === undefined) return;
     if (!kakao.maps.services.Geocoder) return;
+    if (!position) return;
 
     const geoCoder = new kakao.maps.services.Geocoder();
     geoCoder.coord2Address(position.lng, position.lat, (result, status) => {
@@ -26,18 +27,20 @@ export default function PlaceInfo({
   useQuery(
     'revGeoCoder',
     () =>
-      getAddress({
-        lat: data && data.address.mapY,
-        lng: data && data.address.mapX,
-      }),
+      getAddress(
+        data && {
+          lat: data.address.mapY,
+          lng: data.address.mapX,
+        }
+      ),
     { retryDelay: 500, retry: 3 }
   );
 
   return (
     <div className="flex flex-col gap-4 rounded-xl bg-gray-50 p-4">
       <div className="relative aspect-[1.9197] w-full rounded-xl bg-gray-300">
         <IntroStaticMap
-          img={data && data.goodsImagesList[0].goodsImgUrl}
+          img={data?.goodsImagesList[0].goodsImgUrl}
           position={
             data && {
               lat: data.address.mapY,

src/pages/Goods/components/ProductContent.tsx

@@ -1,5 +1,4 @@
 import { GoodsPageDTO } from '@src/types/goods';
-import React from 'react';
 
 export default function ProductContent({
   data,

src/pages/Goods/components/ProductInfo.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useQuery } from 'react-query';
 import { GoodsPageDTO } from '@src/types/goods';
 import getOpenGraph from '../../../api/og';

src/pages/Goods/components/Submitted.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { motion } from 'framer-motion';
 import { useLocation, useNavigate } from 'react-router-dom';
 import submintted from '../../../asset/images/introduce/submitted.png';

src/pages/Map/components/BottomSheetComponent/components/CategoryTag.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { FilterType } from '../index.d';
 
 export default function CategoryTag({

src/pages/Map/components/BottomSheetComponent/components/Fab.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import NavigationIcon from '../../../../../asset/icon/NavigationIcon.svg';
 import EditIcon from '../../../../../asset/icon/EditIcon.svg';

src/pages/Map/components/BottomSheetComponent/components/ItemComponent.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Avatar from 'boring-avatars';
 import { useNavigate } from 'react-router-dom';
 import { GoodsPageDTO } from '@src/types/goods';

src/pages/Map/components/BottomSheetComponent/components/ItemList.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { GoodsPageDTO } from '@src/types/goods';
 import { PreViewerMarker } from '@src/pages/Map/index.d';
 import ItemComponent from './ItemComponent';

src/pages/Map/components/BottomSheetComponent/components/SheetHeader.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import LocationIcon from '../../../../../asset/icon/LocationIcon.svg';
 import UserOutlineIcon from '../../../../../asset/icon/UserOutlineIcon.svg';

src/pages/Map/components/CurrentPoint.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default function CurrentPoint() {
   return (
     <div className="flex size-[32px] items-center justify-center rounded-full bg-primaryBlue">

src/pages/Map/components/Loading.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default function Loading({
   onClick,
 }: {

src/pages/Mypage/components/MyPageHeader.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import ChevronLeft from '../../../asset/icon/chevronLeft.svg';
 import Notification from '../../../asset/icon/Notification.svg';

src/pages/Mypage/components/ProgressJoin.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useQuery } from 'react-query';
 import OpenGraphViewer from '../../../components/OpenGraphViewer';
 import getOpenGraph from '../../../api/og';

src/pages/Mypage/components/ProgressLead.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default function ProgressLead() {
   return (
     <div className="py-2">

src/pages/NotMatch.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import logo from '../asset/images/login/login_logo.png';
 

src/pages/Register/components/Cost/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useOutletContext } from 'react-router-dom';
 import { RegisterContextType } from '@src/types/register';
 import StyledCurrencyInput from '../../../../components/StyledCurrencyInput';

src/pages/Register/components/Deadline/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useOutletContext } from 'react-router-dom';
 import { RegisterContextType } from '@src/types/register';
 import CalendarDate from './components/calendarDate';