refactor(KL-159/리팩토링): dateparser, build optimizing etc..

.github/workflows/main.yml

@@ -3,7 +3,7 @@ name: Deploy to AWS S3
 on:
   push:
     branches:
-      - develop
+      - main
 
 jobs:
   build:

index.html

@@ -8,11 +8,11 @@
     />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="끼룩끼룩 - 기념품의 모든 것"
     />
     <link
       rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block"
     />
     <title>React App</title>
   </head>

jsconfig.json

@@ -2,7 +2,6 @@
   "compilerOptions": {
     "baseUrl": "./src",
     "paths": {
-      "@/*": ["*"],
       "@components/*": ["components/*"],
       "@constants/*": ["constants/*"],
       "@hooks/*": ["hooks/*"],

src/App.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-
 import '@styles/font.css'
 import Layout from '@pages/Layout'
 

src/components/Button/IconTextButton.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { Button } from 'antd'
 import PropTypes from 'prop-types'
+import { Button } from 'antd'
 import { IconContext } from 'react-icons'
 
 function IconTextButton({

src/components/Button/PreviewLikeButton.jsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import { FaHeart, FaRegHeart } from 'react-icons/fa6'
 import useProductLike from '@hooks/useProductLike'
-import useLoginModal from '@/hooks/useLoginModal'
+import useLoginModal from '@hooks/useLoginModal'
 import IconTextButton from './IconTextButton'
 
 function PreviewLikeButton({

src/components/Carousel/Carousel.js

@@ -1,5 +1,5 @@
-import Flickity from 'react-flickity-component'
 import styled from 'styled-components'
+import Flickity from 'react-flickity-component'
 
 const StyledFlickity = styled(Flickity)`
   width: 100%;

src/components/Comment/Comment.jsx

@@ -2,7 +2,6 @@ import React from 'react'
 import styled from 'styled-components'
 import PropTypes from 'prop-types'
 import { useParams } from 'react-router-dom'
-
 import theme from '@styles/theme'
 import useKyQuery from '@hooks/useKyQuery'
 import CommentInput from './CommentInput'
@@ -33,6 +32,7 @@ export default function Comment({ userData }) {
     </CommentSection>
   )
 }
+
 Comment.propTypes = {
   userData: PropTypes.shape({
     id: PropTypes.number,

src/components/Comment/CommentEdit.jsx

@@ -1,11 +1,10 @@
 import React, { useState } from 'react'
+import styled from 'styled-components'
 import PropTypes from 'prop-types'
 import { Input, Button, ConfigProvider } from 'antd'
-import styled from 'styled-components'
-
-import { method } from '@hooks/kyInstance'
-import useKyMutation from '@hooks/useKyMutation'
 import theme from '@styles/theme'
+import { method } from '@utils/kyInstance'
+import useKyMutation from '@hooks/useKyMutation'
 
 const inputTheme = {
   components: {
@@ -76,6 +75,7 @@ export default function CommentEdit({
     </CommentEditBox>
   )
 }
+
 CommentEdit.propTypes = {
   commentId: PropTypes.number.isRequired,
   commentContent: PropTypes.string.isRequired,

src/components/Comment/CommentInput.jsx

@@ -1,12 +1,11 @@
 import React, { useState } from 'react'
+import styled from 'styled-components'
 import PropTypes from 'prop-types'
 import { Input, Button, ConfigProvider } from 'antd'
-import styled from 'styled-components'
-
-import { method } from '@hooks/kyInstance'
+import theme from '@styles/theme'
+import { method } from '@utils/kyInstance'
 import useLoginModal from '@hooks/useLoginModal'
 import useKyMutation from '@hooks/useKyMutation'
-import theme from '@styles/theme'
 import ProfileImage from '../UserProfile/ProfileImage'
 
 const inputTheme = {
@@ -73,6 +72,7 @@ export default function CommentInput({ userData }) {
     </CommentInputBox>
   )
 }
+
 CommentInput.propTypes = {
   userData: PropTypes.shape({
     image: PropTypes.shape({ url: PropTypes.string }),

src/components/Comment/CommentList.jsx

@@ -1,7 +1,6 @@
-import { React } from 'react'
+import React from 'react'
 import styled from 'styled-components'
 import PropTypes from 'prop-types'
-
 import CommentListContent from './CommentListContent'
 
 export default function CommentList({ comments, userId }) {
@@ -17,6 +16,7 @@ export default function CommentList({ comments, userId }) {
     </CommentListWrapper>
   )
 }
+
 CommentList.propTypes = {
   comments: PropTypes.arrayOf(
     PropTypes.shape({

src/components/Comment/CommentListContent.jsx

@@ -2,11 +2,11 @@ import React, { useState } from 'react'
 import styled from 'styled-components'
 import PropTypes from 'prop-types'
 import { useNavigate } from 'react-router-dom'
-
+import theme from '@styles/theme'
+import dateParser from '@utils/dateParser'
 import CommentEdit from './CommentEdit'
 import ProfileImage from '../UserProfile/ProfileImage'
 import CommentOptions from './CommentOptions'
-import theme from '@styles/theme'
 
 export default function CommentListContent({ comment, canEdit }) {
   const navigate = useNavigate()
@@ -38,7 +38,9 @@ export default function CommentListContent({ comment, canEdit }) {
             >
               {comment.member.name}
             </span>
-            <span className="comment--info__date">{comment.createdAt}</span>
+            <span className="comment--info__date">
+              {dateParser(comment.createdAt)}
+            </span>
             {canEdit && (
               <CommentOptions
                 commentId={comment.id}
@@ -52,6 +54,7 @@ export default function CommentListContent({ comment, canEdit }) {
     </CommentListContentWrapper>
   )
 }
+
 CommentListContent.propTypes = {
   comment: PropTypes.shape({
     id: PropTypes.number,

src/components/Comment/CommentOptions.jsx

@@ -1,11 +1,10 @@
 import React from 'react'
-import { Modal, notification } from 'antd'
 import PropTypes from 'prop-types'
-
-import { method } from '@hooks/kyInstance'
+import { Modal, notification } from 'antd'
+import theme from '@styles/theme'
+import { method } from '@utils/kyInstance'
 import useKyMutation from '@hooks/useKyMutation'
 import OptionDropdown from '../OptionDropdown/OptionDropdown'
-import theme from '@styles/theme'
 
 function CommentOptions({ commentId, setEditMode }) {
   const productURL = window.location.pathname.slice(1)
@@ -50,6 +49,7 @@ function CommentOptions({ commentId, setEditMode }) {
     />
   )
 }
+
 CommentOptions.propTypes = {
   commentId: PropTypes.number.isRequired,
   setEditMode: PropTypes.func.isRequired,

src/components/Navbar/NavBar.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
-import { createPortal } from 'react-dom'
 import styled from 'styled-components'
-
+import { createPortal } from 'react-dom'
 import theme from '@styles/theme'
 import NavList from './NavList'
 import LoginButton from './components/LoginButton'

src/components/Navbar/NavList.jsx

@@ -1,16 +1,15 @@
 import React from 'react'
-import { styled } from 'styled-components'
-
+import styled from 'styled-components'
+import router from '@/router'
+import theme from '@styles/theme'
 import { navIndex, modalIndex } from '@constants/navIndex'
 import { useCurrentPageStore, useModalStore } from '@stores/navbarStores'
-import theme from '@styles/theme'
-import router from '@/router'
-import useLoginStatus from '@/stores/useLoginStatus'
+import useLoginStore from '@stores/useLoginStore'
 import Notification from './components/Notification'
 import Icons from '../Icons/Icons'
 
 export default function NavList() {
-  const isLogin = useLoginStatus((state) => state.isLogin)
+  const isLogin = useLoginStore((state) => state.isLogin)
   const currentPage = useCurrentPageStore((state) => state.currentPage)
   const { modalState, setModalState } = useModalStore()
 

src/components/Navbar/components/HomeButton.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
-import theme from '@styles/theme'
 import router from '@/router'
+import theme from '@styles/theme'
 import PlainButton from '../../Button/PlainButton'
 
 export default function HomeButton() {

src/components/Navbar/components/LoginButton.jsx

@@ -1,20 +1,25 @@
 import React from 'react'
-
+import { useShallow } from 'zustand/react/shallow'
+import router from '@/router'
 import { modalIndex } from '@constants/navIndex'
 import { useModalStore } from '@stores/navbarStores'
-import useUserData from '@hooks/useUserData'
-import router from '@/router'
+import useLoginStore from '@stores/useLoginStore'
 import PlainButton from '../../Button/PlainButton'
 import ProfileImage from '../../UserProfile/ProfileImage'
 
 export default function LoginButton() {
-  const { data } = useUserData()
+  const { isLogin, loginData } = useLoginStore(
+    useShallow((state) => ({
+      isLogin: state.isLogin,
+      loginData: state.loginData,
+    }))
+  )
   const setModalState = useModalStore((store) => store.setModalState)
 
   return (
     <PlainButton
       onClick={() => {
-        if (!data) {
+        if (!isLogin) {
           setModalState(modalIndex.LOGIN)
           return
         }
@@ -23,7 +28,7 @@ export default function LoginButton() {
       }}
     >
       <ProfileImage
-        src={!data ? null : data.data.image?.url}
+        src={!isLogin ? null : loginData.image?.url}
         $size="2.1875rem"
       />
     </PlainButton>

src/components/Navbar/components/LoginModal.jsx

@@ -1,11 +1,10 @@
 import React from 'react'
 import styled from 'styled-components'
 import { Modal, Button, ConfigProvider } from 'antd'
-
-import { KakaoLogo, NaverLogo } from '@images/logos'
+import theme from '@styles/theme'
 import { modalIndex } from '@constants/navIndex'
+import { KakaoLogo, NaverLogo } from '@images/logos'
 import { useModalStore } from '@stores/navbarStores'
-import theme from '@styles/theme'
 
 const ModalTheme = {
   components: {

src/components/Navbar/components/Notification.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
 import { Dropdown, Badge } from 'antd'
-
 import { modalIndex } from '@constants/navIndex'
 import { useModalStore } from '@stores/navbarStores'
 import useNotificationFetch from '@hooks/useNotificationFetch'

src/components/Navbar/components/SearchModal.jsx

@@ -1,11 +1,10 @@
 import React from 'react'
 import styled from 'styled-components'
 import { Modal, ConfigProvider } from 'antd'
-
+import theme from '@styles/theme'
 import { modalIndex } from '@constants/navIndex'
 import { useModalStore } from '@stores/navbarStores'
 import useDebouncedSearch from '@hooks/useDebouncedSearch'
-import theme from '@styles/theme'
 import Icons from '../../Icons/Icons'
 
 const ModalTheme = {

src/components/Notification/NotificationContent.jsx

@@ -1,11 +1,10 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import styled from 'styled-components'
-
+import PropTypes from 'prop-types'
 import router from '@/router'
-import { method } from '@hooks/kyInstance'
-import useKyMutation from '@hooks/useKyMutation'
 import theme from '@styles/theme'
+import { method } from '@utils/kyInstance'
+import useKyMutation from '@hooks/useKyMutation'
 
 function NotificationContent({ content }) {
   const { mutateAsync } = useKyMutation(
@@ -63,6 +62,7 @@ function NotificationContent({ content }) {
     </ContentWrapper>
   )
 }
+
 NotificationContent.propTypes = {
   content: PropTypes.shape({
     id: PropTypes.number,

src/components/Notification/NotificationHeader.jsx

@@ -2,7 +2,6 @@ import React from 'react'
 import styled from 'styled-components'
 import PropTypes from 'prop-types'
 import theme from '@styles/theme'
-
 import useReadNotificationAll from '@hooks/useReadNotificationAll'
 import useDeleteNotificationAll from '@hooks/useDeleteNotificationAll'
 
@@ -38,6 +37,7 @@ function NotificationHeader({ isEmpty }) {
     </>
   )
 }
+
 NotificationHeader.propTypes = {
   isEmpty: PropTypes.bool.isRequired,
 }

src/components/OptionDropdown/OptionDropdown.jsx

@@ -1,10 +1,9 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import styled from 'styled-components'
+import PropTypes from 'prop-types'
 import { Dropdown } from 'antd'
-
-import Icons from '../Icons/Icons'
 import theme from '@styles/theme'
+import Icons from '../Icons/Icons'
 
 function OptionDropdown({ editOnclick, deleteOnclick }) {
   const items = [
@@ -49,6 +48,7 @@ function OptionDropdown({ editOnclick, deleteOnclick }) {
     </CustomDropdown>
   )
 }
+
 OptionDropdown.propTypes = {
   editOnclick: PropTypes.func.isRequired,
   deleteOnclick: PropTypes.func.isRequired,

src/components/PreviewContent/PreviewContent.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { StarFilled } from '@ant-design/icons'
-import { FaHeart } from 'react-icons/fa6'
 import { Link } from 'react-router-dom'
+import { FaHeart } from 'react-icons/fa6'
+import { StarFilled } from '@ant-design/icons'
 import PreviewLikeButton from '../Button/PreviewLikeButton'
 import { BlueTag } from '../Tags/Tags.style'
 import {