diff --git a/.eslintrc.cjs b/.eslintrc.cjs index d599c249..a25a2b3b 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -1,17 +1,109 @@ module.exports = { root: true, - extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'], + extends: [ + 'eslint:recommended', + 'plugin:@typescript-eslint/recommended', + 'plugin:import/typescript', + 'plugin:import/recommended', + 'plugin:prettier/recommended', + ], parser: '@typescript-eslint/parser', - parserOptions: { project: ['./tsconfig.json'] }, - plugins: ['@typescript-eslint'], + parserOptions: { + project: ['./tsconfig.app.json', './tsconfig.node.json'], + }, + plugins: ['@typescript-eslint', 'eslint-plugin-import'], + settings: { + 'import/resolver': { + typescript: { + project: ['./tsconfig.app.json', './tsconfig.node.json'], + }, + }, + 'import/parsers': { '@typescript-eslint/parser': ['.ts', '.tsx'] }, + }, + env: { + node: true, + }, rules: { - '@typescript-eslint/strict-boolean-expressions': [ - 2, + 'prettier/prettier': ['error', { endOfLine: 'auto' }], + 'import/extensions': [ + 'error', + 'ignorePackages', { - allowString: false, - allowNumber: false, + ts: 'never', + tsx: 'never', + }, + ], + 'import/order': [ + 'error', + { + groups: ['builtin', 'external', 'internal', 'index', 'type', 'parent', 'sibling', 'object'], + alphabetize: { + order: 'asc', + caseInsensitive: true, + }, + 'newlines-between': 'always', + pathGroups: [ + { + pattern: 'react*', + group: 'builtin', + position: 'before', + }, + { + pattern: '@components/**/dto', + group: 'type', + }, + { + pattern: '@styles/**', + group: 'internal', + position: 'before', + }, + { + pattern: '@assets/**', + group: 'internal', + position: 'after', + }, + { + pattern: '@components/Icons/**', + group: 'internal', + position: 'after', + }, + { + pattern: '@components/**', + group: 'internal', + position: 'after', + }, + { + pattern: '../**/dto', + group: 'type', + position: 'after', + }, + { + pattern: './**/dto', + group: 'type', + position: 'after', + }, + { + pattern: '../**/index', + group: 'parent', + position: 'before', + }, + { + pattern: './**/index', + group: 'parent', + position: 'before', + }, + ], + pathGroupsExcludedImportTypes: ['react*'], }, ], }, - ignorePatterns: ['src/**/*.test.ts', 'src/frontend/generated/*'], + overrides: [ + { + files: ['*.ts', '*.tsx'], + rules: { + 'import/order': 'error', + }, + }, + ], + ignorePatterns: ['src/**/*.test.ts', 'src/frontend/generated/*', 'src/App.tsx'], }; diff --git a/.prettierrc b/.prettierrc index 6214cb00..5f866e68 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,9 +1,9 @@ { - "trailingComma": "all", - "tabWidth": 2, - "semi": true, - "singleQuote": true, - "printWidth": 120, - "arrowParens": "always", - "useTabs": true + "trailingComma": "all", + "tabWidth": 2, + "semi": true, + "singleQuote": true, + "printWidth": 120, + "arrowParens": "always", + "useTabs": true } diff --git a/package.json b/package.json index e74e3074..099fc075 100644 --- a/package.json +++ b/package.json @@ -37,8 +37,10 @@ "@typescript-eslint/eslint-plugin": "^8.18.1", "@typescript-eslint/parser": "^8.18.1", "@vitejs/plugin-react": "^4.3.1", - "eslint": "^9.17.0", + "eslint": "^8.0.0", "eslint-config-prettier": "^9.1.0", + "eslint-import-resolver-typescript": "^3.7.0", + "eslint-plugin-import": "^2.31.0", "eslint-plugin-prettier": "^5.1.3", "eslint-plugin-react-hooks": "^5.1.0", "eslint-plugin-react-refresh": "^0.4.7", diff --git a/src/App.tsx b/src/App.tsx index b9a3aee2..e2069bac 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,28 +1,31 @@ import React from 'react'; import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom'; -import Home from './pages/Home'; -import Login from './pages/Login'; -import SignUp from './pages/SignUp'; -import LoginComplete from './pages/Login/LoginComplete'; -import TermsAgreement from './pages/TermsAgreement'; - -import Profile from './pages/Profile'; -import ProfileEdit from './pages/ProfileEdit'; -import AccountSetting from './pages/AccountSetting'; -import AccountEdit from './pages/AccountEdit'; -import AccountCancel from './pages/AccountCancel'; -import Verification from './pages/verification'; - -import Post from './pages/Post'; -import PostUpload from './pages/PostUpload'; -import PostImageSelect from './pages/PostImageSelect'; -import PostInstaConnect from './pages/PostInstaConnect'; -import PostInstaFeedSelect from './pages/PostInstaFeedSelect'; - -import Chats from './pages/Chats'; -import ChatRoom from './pages/Chats/ChatRoom'; - -import NotFound from './pages/NotFound'; + +import Home from '@pages/Home'; +import Login from '@pages/Login'; +import LoginComplete from '@pages/Login/LoginComplete'; + +import SignUp from '@pages/SignUp'; +import TermsAgreement from '@pages/SignUp/TermsAgreement'; + +import Profile from '@pages/Profile'; +import ProfileEdit from '@pages/Profile/ProfileEdit'; + +import AccountSetting from '@pages/Account/AccountSetting'; +import AccountEdit from '@pages/Account/AccountEdit'; +import AccountCancel from '@pages/Account/AccountCancel'; +import Verification from '@pages/Account/Verification'; + +import Post from '@pages/Post'; +import PostUpload from '@pages/Post/PostUpload'; +import PostImageSelect from '@pages/Post/PostImageSelect'; +import PostInstaConnect from '@pages/Post/PostInstaConnect'; +import PostInstaFeedSelect from '@pages/Post/PostInstaFeedSelect'; + +import Chats from '@pages/Chats'; +import ChatRoom from '@pages/Chats/ChatRoom'; + +import NotFound from '@pages/NotFound'; const ProtectedRoute = ({ children }: { children: JSX.Element }) => { const isAuthenticated = Boolean(localStorage.getItem('new_jwt_token')); @@ -33,19 +36,21 @@ const ProtectedRoute = ({ children }: { children: JSX.Element }) => { const protectedRoutes = [ { path: '/', element: }, - // 사용자 프로필 및 계정 관리 + // profile { path: '/profile/:userId', element: }, { path: '/profile/edit', element: }, - { path: '/account-setting', element: }, - { path: '/account-edit', element: }, - { path: '/account-cancel', element: }, - { path: '/verification', element: }, + + // account + { path: '/account/setting', element: }, + { path: '/account/edit', element: }, + { path: '/account/cancel', element: }, + { path: '/account/verification', element: }, { path: '/post/:postId', element: }, - { path: '/upload', element: }, - { path: '/image-select', element: }, - { path: '/insta-connect', element: }, - { path: '/insta-feed-select', element: }, + { path: '/post/upload/photo/select', element: }, + { path: '/post/upload/instagram/connect', element: }, + { path: '/post/upload/instagram/select', element: }, + { path: '/post/upload/content', element: }, // 메시지/채팅 { path: '/chats', element: }, diff --git a/src/apis/util/handleError.ts b/src/apis/util/handleError.ts index d6dcf8f4..712a1b8d 100644 --- a/src/apis/util/handleError.ts +++ b/src/apis/util/handleError.ts @@ -1,4 +1,5 @@ import { AxiosError } from 'axios'; + import { ApiDomain, errorMessages } from './errorMessage'; export const handleError = (error: unknown, domain: ApiDomain = 'default') => { diff --git a/src/components/BottomButton/dto.ts b/src/components/BottomButton/dto.ts index af282ebb..7135a063 100644 --- a/src/components/BottomButton/dto.ts +++ b/src/components/BottomButton/dto.ts @@ -1,5 +1,5 @@ export interface BottomButtonProps { - content: String; + content: string; onClick: () => void; disabled?: boolean; } diff --git a/src/components/BottomButton/index.tsx b/src/components/BottomButton/index.tsx index 008f9755..393e50b8 100644 --- a/src/components/BottomButton/index.tsx +++ b/src/components/BottomButton/index.tsx @@ -1,17 +1,16 @@ -import React from 'react'; +import { StyledText } from '@components/Text/StyledText'; + +import type { BottomButtonProps } from './dto'; + import { ButtonWrapper, Button } from './styles'; -import { StyledText } from '../Text/StyledText'; -import { BottomButtonProps } from './dto'; const BottomButton: React.FC = ({ content, onClick, disabled = false }) => { return ( - <> - - - - + + + ); }; diff --git a/src/components/BottomButton/styles.tsx b/src/components/BottomButton/styles.tsx index 01419434..7c21acb6 100644 --- a/src/components/BottomButton/styles.tsx +++ b/src/components/BottomButton/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; export const ButtonWrapper = styled.div` display: flex; @@ -15,8 +15,9 @@ export const ButtonWrapper = styled.div` `; export const Button = styled.button<{ disabled: boolean }>` - background: ${({ disabled, theme }) => //theme에 없어서 그냥 뒀음 - disabled ? 'linear-gradient(93deg, #FFC1D6 1.22%, #F8D4D4 99.73%)' : theme.colors.brand.gradient}; + background: ${( + { disabled, theme }, //theme에 없어서 그냥 뒀음 + ) => (disabled ? 'linear-gradient(93deg, #FFC1D6 1.22%, #F8D4D4 99.73%)' : theme.colors.brand.gradient)}; border-radius: 0.625rem; font-size: 1rem; width: calc(100% - 2.5rem); diff --git a/src/components/BottomSheetMenu/dto.ts b/src/components/BottomSheet/BottomSheetMenu/dto.ts similarity index 100% rename from src/components/BottomSheetMenu/dto.ts rename to src/components/BottomSheet/BottomSheetMenu/dto.ts diff --git a/src/components/BottomSheetMenu/index.tsx b/src/components/BottomSheet/BottomSheetMenu/index.tsx similarity index 86% rename from src/components/BottomSheetMenu/index.tsx rename to src/components/BottomSheet/BottomSheetMenu/index.tsx index a8ba12d1..af0c5bd9 100644 --- a/src/components/BottomSheetMenu/index.tsx +++ b/src/components/BottomSheet/BottomSheetMenu/index.tsx @@ -1,10 +1,14 @@ +import { memo } from 'react'; + +import theme from '@styles/theme'; + import { StyledText } from '@components/Text/StyledText'; -import { BottomSheetMenuLayout, SheetItem, IconButton } from './styles'; + import type { BottomSheetMenuProps, SheetItemDto } from './dto'; -import React from 'react'; -import theme from '@styles/theme'; -const BottomSheetMenu: React.FC = React.memo(({ items }) => { +import { BottomSheetMenuLayout, SheetItem, IconButton } from './styles'; + +const BottomSheetMenu: React.FC = memo(({ items }) => { return ( {items.map((item: SheetItemDto, index) => ( diff --git a/src/components/BottomSheetMenu/styles.tsx b/src/components/BottomSheet/BottomSheetMenu/styles.tsx similarity index 91% rename from src/components/BottomSheetMenu/styles.tsx rename to src/components/BottomSheet/BottomSheetMenu/styles.tsx index 5e172c88..d944358b 100644 --- a/src/components/BottomSheetMenu/styles.tsx +++ b/src/components/BottomSheet/BottomSheetMenu/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; export const BottomSheetMenuLayout = styled.ul` margin-bottom: 0.62rem; diff --git a/src/components/CommentBottomSheet/Comment/dto.ts b/src/components/BottomSheet/CommentBottomSheet/Comment/dto.ts similarity index 100% rename from src/components/CommentBottomSheet/Comment/dto.ts rename to src/components/BottomSheet/CommentBottomSheet/Comment/dto.ts diff --git a/src/components/CommentBottomSheet/Comment/index.tsx b/src/components/BottomSheet/CommentBottomSheet/Comment/index.tsx similarity index 97% rename from src/components/CommentBottomSheet/Comment/index.tsx rename to src/components/BottomSheet/CommentBottomSheet/Comment/index.tsx index 1f7bc370..4034ccf1 100644 --- a/src/components/CommentBottomSheet/Comment/index.tsx +++ b/src/components/BottomSheet/CommentBottomSheet/Comment/index.tsx @@ -1,9 +1,13 @@ -import { StyledText } from '@components/Text/StyledText'; -import { CommentLayout, SendContainer, CommentTextarea, SendButton } from './styles'; +import { useEffect, useRef, useState } from 'react'; + import send from '@assets/default/send-comment.svg'; -import React, { useEffect, useRef, useState } from 'react'; + +import { StyledText } from '@components/Text/StyledText'; + import type { CommentProps } from './dto'; +import { CommentLayout, SendContainer, CommentTextarea, SendButton } from './styles'; + const Comment: React.FC = ({ content, sendComment, isModal = false }) => { const [comment, setComment] = useState(''); const textareaRef = useRef(null); diff --git a/src/components/CommentBottomSheet/Comment/styles.tsx b/src/components/BottomSheet/CommentBottomSheet/Comment/styles.tsx similarity index 95% rename from src/components/CommentBottomSheet/Comment/styles.tsx rename to src/components/BottomSheet/CommentBottomSheet/Comment/styles.tsx index 377f0206..beda7373 100644 --- a/src/components/CommentBottomSheet/Comment/styles.tsx +++ b/src/components/BottomSheet/CommentBottomSheet/Comment/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; export const CommentLayout = styled.div<{ $isModal: boolean }>` margin: 1.38rem auto 1.25rem auto; diff --git a/src/components/CommentBottomSheet/dto.ts b/src/components/BottomSheet/CommentBottomSheet/dto.ts similarity index 100% rename from src/components/CommentBottomSheet/dto.ts rename to src/components/BottomSheet/CommentBottomSheet/dto.ts diff --git a/src/components/CommentBottomSheet/index.tsx b/src/components/BottomSheet/CommentBottomSheet/index.tsx similarity index 94% rename from src/components/CommentBottomSheet/index.tsx rename to src/components/BottomSheet/CommentBottomSheet/index.tsx index c735f0a7..a4c3234d 100644 --- a/src/components/CommentBottomSheet/index.tsx +++ b/src/components/BottomSheet/CommentBottomSheet/index.tsx @@ -1,12 +1,17 @@ -import { StyledText } from '@components/Text/StyledText'; import theme from '@styles/theme'; -import BottomSheet from '@components/BottomSheet'; -import Comment from './Comment/index'; -import type { BottomSheetProps } from '@components/BottomSheet/dto'; -import type { CommentBottomSheetProps } from './dto'; import closeIcon from '@assets/default/modal-close-white.svg'; +import { StyledText } from '@components/Text/StyledText'; + +import type { BottomSheetProps } from '../dto'; + +import type { CommentBottomSheetProps } from './dto'; + +import BottomSheet from '../index'; + +import Comment from './Comment/index'; + import { CommentBottomSheetLayout, CommentModalBox, diff --git a/src/components/CommentBottomSheet/styles.tsx b/src/components/BottomSheet/CommentBottomSheet/styles.tsx similarity index 96% rename from src/components/CommentBottomSheet/styles.tsx rename to src/components/BottomSheet/CommentBottomSheet/styles.tsx index 0ae1a65e..f98a22d2 100644 --- a/src/components/CommentBottomSheet/styles.tsx +++ b/src/components/BottomSheet/CommentBottomSheet/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; export const CommentBottomSheetLayout = styled.div` ${({ theme }) => theme.visibleOnMobileTablet}; diff --git a/src/components/BottomSheet/OptionsBottomSheet/ReportBottomSheetMenu/index.tsx b/src/components/BottomSheet/OptionsBottomSheet/ReportBottomSheetMenu/index.tsx index 71e59462..c5b06122 100644 --- a/src/components/BottomSheet/OptionsBottomSheet/ReportBottomSheetMenu/index.tsx +++ b/src/components/BottomSheet/OptionsBottomSheet/ReportBottomSheetMenu/index.tsx @@ -1,11 +1,15 @@ -import React, { useState, useRef, useCallback, useEffect } from 'react'; +import { useState, useRef, useCallback, useEffect, memo } from 'react'; + import BottomButton from '@components/BottomButton'; -import BottomSheetMenu from '@components/BottomSheetMenu'; -import { SheetItemDto } from '@components/BottomSheetMenu/dto'; + import type { ReportBottomSheetMenuProps } from './dto'; + +import { SheetItemDto } from '../../BottomSheetMenu/dto'; +import BottomSheetMenu from '../../BottomSheetMenu/index'; + import { InputLayout, ReportBottomSheetMenuWrappar } from './styles'; -const ReportBottomSheetMenu: React.FC = React.memo( +const ReportBottomSheetMenu: React.FC = memo( ({ onCloseReportSheet, onOpenStatusModal, sendReport, isUserReport }) => { const [isVisibleTextarea, setIsTextareaVisible] = useState(false); const [inputValue, setInputValue] = useState(''); diff --git a/src/components/BottomSheet/OptionsBottomSheet/ReportBottomSheetMenu/styles.tsx b/src/components/BottomSheet/OptionsBottomSheet/ReportBottomSheetMenu/styles.tsx index 1d917001..75420aa3 100644 --- a/src/components/BottomSheet/OptionsBottomSheet/ReportBottomSheetMenu/styles.tsx +++ b/src/components/BottomSheet/OptionsBottomSheet/ReportBottomSheetMenu/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; export const ReportBottomSheetMenuWrappar = styled.div` display: flex; diff --git a/src/components/BottomSheet/OptionsBottomSheet/index.tsx b/src/components/BottomSheet/OptionsBottomSheet/index.tsx index b5b9f505..c66597d7 100644 --- a/src/components/BottomSheet/OptionsBottomSheet/index.tsx +++ b/src/components/BottomSheet/OptionsBottomSheet/index.tsx @@ -1,24 +1,35 @@ import { useState } from 'react'; -import BottomSheet from '../index'; -import BottomSheetMenu from '@components/BottomSheetMenu'; -import ReportBottomSheetMenu from './ReportBottomSheetMenu'; + +import theme from '@styles/theme'; + +import { sendPostReportApi } from '@apis/post-report'; +import { postUserBlockApi } from '@apis/user-block'; +import { postUserReportApi } from '@apis/user-report'; +import { handleError } from '@apis/util/handleError'; +import { getCurrentUserId } from '@utils/getCurrentUserId'; + +import blockIcon from '@assets/default/block.svg'; +import closeIcon from '@assets/default/modal-close-white.svg'; +import reportIcon from '@assets/default/report.svg'; + import Modal from '@components/Modal'; +import { StyledText } from '@components/Text/StyledText'; -import type { OptionsBottomSheetProps } from './dto'; +import type { SendPostReportRequest } from '@apis/post-report/dto'; +import type { PostUserBlockRequest } from '@apis/user-block/dto'; +import type { PostUserReportRequest } from '@apis/user-report/dto'; +import type { ModalProps } from '@components/Modal/dto'; + +import type { BottomSheetMenuProps } from '../BottomSheetMenu/dto'; import type { BottomSheetProps } from '../dto'; -import type { BottomSheetMenuProps } from '@components/BottomSheetMenu/dto'; + +import type { OptionsBottomSheetProps } from './dto'; import type { ReportBottomSheetMenuProps } from './ReportBottomSheetMenu/dto'; -import type { ModalProps } from '@components/Modal/dto'; -import type { SendPostReportRequest } from '@apis/post-report/dto'; -import type { PostUserReportRequest } from '@apis/user-report/dto'; -import type { PostUserBlockRequest } from '@apis/user-block/dto'; +import BottomSheetMenu from '../BottomSheetMenu/index'; +import BottomSheet from '../index'; -import { StyledText } from '@components/Text/StyledText'; -import { handleError } from '@apis/util/handleError'; -import blockIcon from '@assets/default/block.svg'; -import reportIcon from '@assets/default/report.svg'; -import closeIcon from '@assets/default/modal-close-white.svg'; +import ReportBottomSheetMenu from './ReportBottomSheetMenu/index'; import { ReportBottomSheetLayout, @@ -29,11 +40,6 @@ import { CloseButton, ReportModalBox, } from './styles'; -import theme from '@styles/theme'; -import { postUserBlockApi } from '@apis/user-block'; -import { postUserReportApi } from '@apis/user-report'; -import { sendPostReportApi } from '@apis/post-report'; -import { getCurrentUserId } from '@utils/getCurrentUserId'; const OptionsBottomSheet: React.FC = ({ domain, diff --git a/src/components/BottomSheet/OptionsBottomSheet/styles.tsx b/src/components/BottomSheet/OptionsBottomSheet/styles.tsx index 3d4cc083..a2a75c3d 100644 --- a/src/components/BottomSheet/OptionsBottomSheet/styles.tsx +++ b/src/components/BottomSheet/OptionsBottomSheet/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; export const ReportBottomSheetLayout = styled.div` ${({ theme }) => theme.visibleOnMobileTablet}; diff --git a/src/components/BottomSheet/index.tsx b/src/components/BottomSheet/index.tsx index 066bd221..00260425 100644 --- a/src/components/BottomSheet/index.tsx +++ b/src/components/BottomSheet/index.tsx @@ -1,5 +1,9 @@ -import React, { useCallback, useEffect, useRef, useState } from 'react'; +import { useCallback, useEffect, useRef, useState } from 'react'; + +import closeIcon from '@assets/default/x.svg'; + import type { BottomSheetProps } from './dto'; + import { BottomSheetWrapper, BottomSheetLayout, @@ -9,7 +13,6 @@ import { SideBarTopBar, ComponentBox, } from './styles'; -import closeIcon from '@assets/default/x.svg'; const BottomSheet: React.FC = ({ isOpenBottomSheet, diff --git a/src/components/BottomSheet/styles.tsx b/src/components/BottomSheet/styles.tsx index 082fce75..91e876df 100644 --- a/src/components/BottomSheet/styles.tsx +++ b/src/components/BottomSheet/styles.tsx @@ -1,5 +1,6 @@ -import React from 'react'; -import styled from 'styled-components'; +import { memo } from 'react'; + +import { styled } from 'styled-components'; export const BottomSheetWrapper = styled.div<{ $isBottomSheetOpen: boolean }>` position: fixed; @@ -39,7 +40,7 @@ export const BottomSheetLayout = styled.div.attrs<{ $currentTranslateY: number; transition: transform 0.3s; `; -export const Handler = React.memo(styled.hr` +export const Handler = memo(styled.hr` width: 2.88rem; margin: 0.6rem auto 0 auto; height: 0.125rem; diff --git a/src/components/ClothingInfoItem/dto.ts b/src/components/ClothingInfoItem/dto.ts index 374d876b..be69a5ed 100644 --- a/src/components/ClothingInfoItem/dto.ts +++ b/src/components/ClothingInfoItem/dto.ts @@ -1,6 +1,6 @@ -import { PostClothing } from '../../apis/post/dto'; +import type { PostClothing } from '@apis/post/dto'; -export interface ClothingInfo extends PostClothing {} +export type ClothingInfo = PostClothing; export interface ClothingInfoItemProps { clothingObj: ClothingInfo; diff --git a/src/components/ClothingInfoItem/index.tsx b/src/components/ClothingInfoItem/index.tsx index 6aa9162b..888b03f7 100644 --- a/src/components/ClothingInfoItem/index.tsx +++ b/src/components/ClothingInfoItem/index.tsx @@ -1,8 +1,10 @@ -import React from 'react'; -import { StyledText } from '../Text/StyledText'; -import X from '../../assets/default/x.svg'; -import Right from '../../assets/arrow/right.svg'; -import { ClothingInfoItemProps } from './dto'; +import Right from '@assets/arrow/right.svg'; +import X from '@assets/default/x.svg'; + +import { StyledText } from '@components/Text/StyledText'; + +import type { ClothingInfoItemProps } from './dto'; + import { ClothingInfoItemContainer, ClothingInfoLeft, ClothingImage, ClothingInfoRight, ClothingModel } from './styles'; const ClothingInfoItem: React.FC = ({ clothingObj, onDelete }) => { diff --git a/src/components/ClothingInfoItem/styles.tsx b/src/components/ClothingInfoItem/styles.tsx index fb204351..5eb00bfb 100644 --- a/src/components/ClothingInfoItem/styles.tsx +++ b/src/components/ClothingInfoItem/styles.tsx @@ -1,5 +1,6 @@ -import styled from 'styled-components'; -import { StyledText } from '../../components/Text/StyledText'; +import { styled } from 'styled-components'; + +import { StyledText } from '@components/Text/StyledText'; export const ClothingInfoItemContainer = styled.li` position: relative; diff --git a/src/components/ConfirmationModal/index.tsx b/src/components/ConfirmationModal/index.tsx index e9d7e17b..697982ec 100644 --- a/src/components/ConfirmationModal/index.tsx +++ b/src/components/ConfirmationModal/index.tsx @@ -1,7 +1,10 @@ -import { StyledText } from '../Text/StyledText'; -import theme from '../../styles/theme'; +import theme from '@styles/theme'; + +import { StyledText } from '@components/Text/StyledText'; + +import type { ConfirmationModalProps } from './dto'; + import { ConfirmationModalLayout, ConfirmationModalWrapper, ContentBox, ButtonContainer, Button } from './styles'; -import { ConfirmationModalProps } from './dto'; const ConfirmationModal: React.FC = ({ content, diff --git a/src/components/ConfirmationModal/styles.tsx b/src/components/ConfirmationModal/styles.tsx index 9ca45ca4..d1788694 100644 --- a/src/components/ConfirmationModal/styles.tsx +++ b/src/components/ConfirmationModal/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; export const ConfirmationModalWrapper = styled.div` position: fixed; diff --git a/src/components/Frame/Frame.tsx b/src/components/Frame/Frame.tsx index ce4a642f..f19a2c4e 100644 --- a/src/components/Frame/Frame.tsx +++ b/src/components/Frame/Frame.tsx @@ -1,4 +1,5 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; + import theme from '@styles/theme'; export const OODDFrame = styled.div` diff --git a/src/components/Loading/styles.tsx b/src/components/Loading/styles.tsx index 50982f8c..a403180d 100644 --- a/src/components/Loading/styles.tsx +++ b/src/components/Loading/styles.tsx @@ -1,4 +1,4 @@ -import styled, { keyframes } from 'styled-components'; +import { styled, keyframes } from 'styled-components'; const bounceGroup = keyframes` 0%, 50%, 100% { diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx index d62ae8e7..5be679a3 100644 --- a/src/components/Modal/index.tsx +++ b/src/components/Modal/index.tsx @@ -1,9 +1,12 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import { ModalWrapper, ModalContainer, CloseButton, ConfirmButton } from './styles'; +import { createPortal } from 'react-dom'; + +import closeIcon from '@assets/default/x.svg'; + import { StyledText } from '@components/Text/StyledText'; + import type { ModalProps } from './dto'; -import closeIcon from '@assets/default/x.svg'; + +import { ModalWrapper, ModalContainer, CloseButton, ConfirmButton } from './styles'; const Modal: React.FC = ({ isCloseButtonVisible, onClose, content, button }) => { const handleBackgroundClick = (e: React.MouseEvent) => { @@ -21,7 +24,7 @@ const Modal: React.FC = ({ isCloseButtonVisible, onClose, content, b } }; - return ReactDOM.createPortal( + return createPortal( {isCloseButtonVisible && ( diff --git a/src/components/Modal/styles.tsx b/src/components/Modal/styles.tsx index b08b1453..9306d773 100644 --- a/src/components/Modal/styles.tsx +++ b/src/components/Modal/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; export const ModalWrapper = styled.div` position: fixed; diff --git a/src/components/NavBar/index.tsx b/src/components/NavBar/index.tsx index 1c36cda7..a1e6395f 100644 --- a/src/components/NavBar/index.tsx +++ b/src/components/NavBar/index.tsx @@ -1,5 +1,23 @@ -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; + +import theme from '@styles/theme'; + +import { getCurrentUserId } from '@utils/getCurrentUserId'; + +import logout from '@assets/default/leave.svg'; +import logo from '@assets/default/oodd.svg'; + +import Alarm from '@components/Icons/Alarm'; +import Home from '@components/Icons/Home'; +import Message from '@components/Icons/Message'; +import MyPage from '@components/Icons/MyPage'; + +import Modal from '@components/Modal'; +import { StyledText } from '@components/Text/StyledText'; + +import type { ModalProps } from '@components/Modal/dto'; + import { NavBarContainer, NavBarWrapper, @@ -12,17 +30,6 @@ import { SideNavBarFooter, Icon, } from './styles'; -import Message from '@components/Icons/Message'; -import Home from '@components/Icons/Home'; -import MyPage from '@components/Icons/MyPage'; -import Alarm from '@components/Icons/Alarm'; -import logo from '@assets/default/oodd.svg'; -import logout from '@assets/default/leave.svg'; -import { StyledText } from '@components/Text/StyledText'; -import Modal from '@components/Modal'; -import type { ModalProps } from '@components/Modal/dto'; -import { getCurrentUserId } from '@utils/getCurrentUserId'; -import theme from '@styles/theme'; const NavBar: React.FC = () => { const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false); diff --git a/src/components/NavBar/styles.tsx b/src/components/NavBar/styles.tsx index ddfcff4a..394653bd 100644 --- a/src/components/NavBar/styles.tsx +++ b/src/components/NavBar/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; export const NavBarContainer = styled.nav` position: fixed; diff --git a/src/components/PostItem/dto.ts b/src/components/PostItem/dto.ts index 2db2ca24..edf1b89b 100644 --- a/src/components/PostItem/dto.ts +++ b/src/components/PostItem/dto.ts @@ -1,6 +1,6 @@ import { UserPostSummary } from '@apis/post/dto'; -export interface Post extends UserPostSummary {} +export type Post = UserPostSummary; export interface PostItemProps { post: Post; diff --git a/src/components/PostItem/index.tsx b/src/components/PostItem/index.tsx index e404c4e1..4af33db2 100644 --- a/src/components/PostItem/index.tsx +++ b/src/components/PostItem/index.tsx @@ -1,13 +1,16 @@ -import React from 'react'; import { useNavigate } from 'react-router-dom'; import theme from '@styles/theme'; + import PinIcon from '@assets/default/pin.svg'; + import Like from '@components/Icons/Like'; import Message from '@components/Icons/Message'; + import { StyledText } from '@components/Text/StyledText'; import type { PostItemProps } from './dto'; + import { PostItemLayout, PostImageContainer, PostImage, LikesOverlay, Pin } from './style'; const PostItem: React.FC = ({ post }) => { diff --git a/src/components/PostItem/style.tsx b/src/components/PostItem/style.tsx index 7260fdf0..2df8df22 100644 --- a/src/components/PostItem/style.tsx +++ b/src/components/PostItem/style.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; export const PostItemLayout = styled.article` flex: 1 1 calc(50% - 0.5rem); /* 기본적으로 두 개씩 배치되도록 설정 */ diff --git a/src/components/Text/StyledText.tsx b/src/components/Text/StyledText.tsx index b097228f..91d52ea3 100644 --- a/src/components/Text/StyledText.tsx +++ b/src/components/Text/StyledText.tsx @@ -1,6 +1,9 @@ -import styled from 'styled-components'; -import theme from '@styles/theme'; import { useMediaQuery } from 'react-responsive'; + +import { styled } from 'styled-components'; + +import theme from '@styles/theme'; + import type { StyledTextProps } from './dto'; export const StyledText = styled.div` diff --git a/src/components/Text/dto.ts b/src/components/Text/dto.ts index 9d8a8e95..59aaadad 100644 --- a/src/components/Text/dto.ts +++ b/src/components/Text/dto.ts @@ -13,7 +13,7 @@ export interface StyledTextProps { lineHeight?: number; }; color?: string; - children: any; + children: unknown; } export type FontStyleKey = keyof typeof theme.fontStyles; diff --git a/src/components/TopBar/index.tsx b/src/components/TopBar/index.tsx index d7b5ea3b..f02d32b1 100644 --- a/src/components/TopBar/index.tsx +++ b/src/components/TopBar/index.tsx @@ -1,9 +1,9 @@ -import React from 'react'; import { useNavigate } from 'react-router-dom'; import theme from '@styles/theme'; import type { TopBarProps } from './dto'; + import { TopBarLayout, StyledTextWrapper, LeftButton, RightButton } from './styles'; const TopBar: React.FC = ({ diff --git a/src/components/TopBar/styles.tsx b/src/components/TopBar/styles.tsx index e5a22da3..2ab92929 100644 --- a/src/components/TopBar/styles.tsx +++ b/src/components/TopBar/styles.tsx @@ -1,6 +1,9 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; + import theme from '@styles/theme'; + import { StyledText } from '@components/Text/StyledText'; + import type { TopBarLayoutProps } from './dto'; export const TopBarLayout = styled.header` display: flex; diff --git a/src/components/UserProfile/index.tsx b/src/components/UserProfile/index.tsx index 214eb105..7ec9ec54 100644 --- a/src/components/UserProfile/index.tsx +++ b/src/components/UserProfile/index.tsx @@ -1,12 +1,14 @@ -import React from 'react'; +import { memo } from 'react'; import theme from '@styles/theme'; + import { StyledText } from '@components/Text/StyledText'; import type { UserProfileProps } from './dto'; + import { UserProfileLayout, UserImg, UserDetailsContainer, StyledBio } from './style'; -const UserProfile: React.FC = React.memo(({ userImg, bio = '', nickname }) => { +const UserProfile: React.FC = memo(({ userImg, bio = '', nickname }) => { const truncatedBio = bio ? (bio.length > 50 ? bio.substring(0, 50) + '...' : bio) : ''; return ( diff --git a/src/components/UserProfile/style.tsx b/src/components/UserProfile/style.tsx index 275dbb28..4d2d07aa 100644 --- a/src/components/UserProfile/style.tsx +++ b/src/components/UserProfile/style.tsx @@ -1,4 +1,5 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; + import { StyledText } from '@components/Text/StyledText'; export const UserProfileLayout = styled.section` diff --git a/src/context/SocketProvider.tsx b/src/context/SocketProvider.tsx index eb6e9665..a77d7108 100644 --- a/src/context/SocketProvider.tsx +++ b/src/context/SocketProvider.tsx @@ -1,4 +1,5 @@ -import React, { createContext, useContext, useEffect, useState } from 'react'; +import { createContext, useContext, useEffect, useState } from 'react'; + import { io, Socket } from 'socket.io-client'; const SocketContext = createContext(null); diff --git a/src/main.tsx b/src/main.tsx index 9f9855dc..223211e3 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,13 +1,16 @@ -import ReactDOM from 'react-dom/client'; -import App from './App.tsx'; -import { ThemeProvider } from 'styled-components'; -import theme from './styles/theme'; -import GlobalStyle from './styles/GlobalStyles'; +import { createRoot } from 'react-dom/client'; import { RecoilRoot } from 'recoil'; -import './styles/fonts/font.css'; -import { SocketProvider } from './context/SocketProvider.tsx'; +import { ThemeProvider } from 'styled-components'; + +import GlobalStyle from '@styles/GlobalStyles'; +import theme from '@styles/theme'; + +import '@styles/fonts/font.css'; +import { SocketProvider } from '@context/SocketProvider'; + +import App from './App'; -ReactDOM.createRoot(document.getElementById('root')!).render( +createRoot(document.getElementById('root')!).render( diff --git a/src/pages/AccountCancel/index.tsx b/src/pages/Account/AccountCancel/index.tsx similarity index 96% rename from src/pages/AccountCancel/index.tsx rename to src/pages/Account/AccountCancel/index.tsx index 6fab95fb..1c30b279 100644 --- a/src/pages/AccountCancel/index.tsx +++ b/src/pages/Account/AccountCancel/index.tsx @@ -1,4 +1,18 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; + +import theme from '@styles/theme'; + +import { patchUserWithdrawApi } from '@apis/user'; + +import back from '@assets/arrow/left.svg'; + +import BottomButton from '@components/BottomButton/index'; +import { OODDFrame } from '@components/Frame/Frame'; +import Modal from '@components/Modal/index'; +import { StyledText } from '@components/Text/StyledText'; +import TopBar from '@components/TopBar/index'; + import { CancelContainer, SubTitle, @@ -11,17 +25,6 @@ import { StyledCheckboxText, StyledDiv, } from './styles'; // 상대 경로 index 명시 -import { StyledText } from '@components/Text/StyledText'; -import theme from '@styles/theme'; -import { OODDFrame } from '@components/Frame/Frame'; -import { useNavigate } from 'react-router-dom'; - -import TopBar from '@components/TopBar/index'; -import back from '@assets/arrow/left.svg'; - -import BottomButton from '@components/BottomButton/index'; -import { patchUserWithdrawApi } from '@apis/user'; -import Modal from '@components/Modal/index'; const AccountCancel: React.FC = () => { const [isChecked, setIsChecked] = useState(false); @@ -98,9 +101,9 @@ const AccountCancel: React.FC = () => { 지금까지 OODD를 이용해주셔서 감사합니다! diff --git a/src/pages/AccountCancel/styles.tsx b/src/pages/Account/AccountCancel/styles.tsx similarity index 73% rename from src/pages/AccountCancel/styles.tsx rename to src/pages/Account/AccountCancel/styles.tsx index 6022aa3a..3f1e21e2 100644 --- a/src/pages/AccountCancel/styles.tsx +++ b/src/pages/Account/AccountCancel/styles.tsx @@ -1,30 +1,31 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; + import { StyledText } from '@components/Text/StyledText'; export const CancelContainer = styled.div` margin: 0 auto; width: 100%; - flex-grow: 1; + flex-grow: 1; display: flex; flex-direction: column; `; export const SubTitle = styled.h3` - font-size: 1rem; + font-size: 1rem; font-weight: bold; margin-bottom: 0.625rem; text-align: center; text-align: left; margin-top: 10px; - padding: 1.25rem; + padding: 1.25rem; `; export const Text = styled.p` - font-size: 0.875rem; - margin-bottom: 5px; + font-size: 0.875rem; + margin-bottom: 5px; text-align: left; margin-top: 10px; - padding: 0rem 1.25rem; + padding: 0rem 1.25rem; `; export const InfoBox = styled.div` @@ -32,18 +33,18 @@ export const InfoBox = styled.div` padding: 70px; margin-top: 10px; border-radius: 10px; - margin: 10px 20px 1.25rem 20px; + margin: 10px 20px 1.25rem 20px; `; export const InfoItem = styled.p` - font-size: 0.875rem; - margin-bottom: 0.625rem; + font-size: 0.875rem; + margin-bottom: 0.625rem; padding: 2px 10px; display: flex; justify-content: center; align-items: center; text-align: center; - height: 100%; + height: 100%; `; export const CheckboxWrapper = styled.div` @@ -53,14 +54,14 @@ export const CheckboxWrapper = styled.div` padding: 0rem 15px; input[type='checkbox'] { - margin-right: 0.625rem; + margin-right: 0.625rem; } `; export const CheckboxInput = styled.input` margin-right: 0.625rem; cursor: pointer; - appearance: none; + appearance: none; width: 1.25rem; height: 1.25rem; border: 0.125rem solid ${({ theme }) => theme.colors.gray[200]}; @@ -68,8 +69,8 @@ export const CheckboxInput = styled.input` position: relative; &:checked { background-color: ${({ theme }) => theme.colors.background.primaryLight}; - border-color: ${({ theme }) => theme.colors.brand.primary}; -} + border-color: ${({ theme }) => theme.colors.brand.primary}; + } &:checked::after { content: '✓'; @@ -78,7 +79,7 @@ export const CheckboxInput = styled.input` position: absolute; top: 50%; left: 50%; - transform: translate(-50%, -50%); + transform: translate(-50%, -50%); } `; @@ -93,9 +94,7 @@ export const StyledCheckboxText = styled(StyledText)` `; export const StyledDiv = styled.div<{ isChecked: boolean }>` - background-color: ${({ isChecked, theme }) => - isChecked ? theme.colors.primary : theme.colors.gray[300]}; - color: ${({ isChecked, theme }) => - isChecked ? theme.colors.contrast : theme.colors.caption}; + background-color: ${({ isChecked, theme }) => (isChecked ? theme.colors.primary : theme.colors.gray[300])}; + color: ${({ isChecked, theme }) => (isChecked ? theme.colors.contrast : theme.colors.caption)}; cursor: ${({ isChecked }) => (isChecked ? 'pointer' : 'not-allowed')}; -`; \ No newline at end of file +`; diff --git a/src/pages/AccountEdit/index.tsx b/src/pages/Account/AccountEdit/index.tsx similarity index 97% rename from src/pages/AccountEdit/index.tsx rename to src/pages/Account/AccountEdit/index.tsx index d41be4d8..fb0bb67a 100644 --- a/src/pages/AccountEdit/index.tsx +++ b/src/pages/Account/AccountEdit/index.tsx @@ -1,4 +1,16 @@ -import React from 'react'; +import { useNavigate } from 'react-router-dom'; + +import theme from '@styles/theme'; + +import back from '@assets/arrow/left.svg'; +import kakao from '@assets/default/snsIcon/kakao.svg'; +import naver from '@assets/default/snsIcon/naver.svg'; + +import BottomButton from '@components/BottomButton/index'; +import { OODDFrame } from '@components/Frame/Frame'; +import { StyledText } from '@components/Text/StyledText'; +import TopBar from '@components/TopBar/index'; + import { ProfileEditContainer, Section, @@ -12,25 +24,14 @@ import { MemberInfoRow, Label, Info, -} from './styles'; -import { OODDFrame } from '@components/Frame/Frame'; -import BottomButton from '@components/BottomButton/index'; - -import { useNavigate } from 'react-router-dom'; -import { StyledText } from '@components/Text/StyledText'; -import theme from '@styles/theme'; - -import naver from '@assets/default/snsIcon/naver.svg'; -import kakao from '@assets/default/snsIcon/kakao.svg'; -import TopBar from '@components/TopBar/index'; -import back from '@assets/arrow/left.svg'; +} from './styles'; const AccountEdit: React.FC = () => { const navigate = useNavigate(); // useNavigate 훅 사용 // 본인 인증 페이지로 이동하는 함수 const handleVerification = () => { - navigate('/Verification'); + navigate('/account/verification'); }; return ( diff --git a/src/pages/AccountEdit/styles.tsx b/src/pages/Account/AccountEdit/styles.tsx similarity index 68% rename from src/pages/AccountEdit/styles.tsx rename to src/pages/Account/AccountEdit/styles.tsx index f52e42a8..2ed8d886 100644 --- a/src/pages/AccountEdit/styles.tsx +++ b/src/pages/Account/AccountEdit/styles.tsx @@ -1,31 +1,31 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; export const ProfileEditContainer = styled.div` - max-width: 512px; + max-width: 512px; display: flex; flex-direction: column; position: relative; `; export const Section = styled.div` - margin-top: 1.875rem; - margin-bottom: 1.875rem; - width: 100%; + margin-top: 1.875rem; + margin-bottom: 1.875rem; + width: 100%; padding: 0px 30px; `; export const SectionTitle = styled.div` - font-size: 1.125rem; + font-size: 1.125rem; font-weight: bold; - margin-bottom: 0.625rem; - margin-top: 1.125rem; - text-align: left; + margin-bottom: 0.625rem; + margin-top: 1.125rem; + text-align: left; `; export const SNSInfo = styled.div` display: flex; flex-direction: column; - margin-bottom: 0.625rem; + margin-bottom: 0.625rem; margin-top: 3.125rem; `; @@ -36,26 +36,26 @@ export const SNSInfoRow = styled.div` `; export const SNSIcon = styled.img` - width: 2.5rem; - height: 2.5rem; - margin-right: 0.625rem; + width: 2.5rem; + height: 2.5rem; + margin-right: 0.625rem; margin-top: 1.875rem; flex-shrink: 0; object-fit: cover; `; export const Text = styled.div` - font-size: 0.875rem; + font-size: 0.875rem; color: ${({ theme }) => theme.colors.tertiary}; margin-top: 2.1875rem; - text-align: left; + text-align: left; `; export const SnsConnection = styled.div` - font-size: 1rem; + font-size: 1rem; font-weight: bold; color: ${({ theme }) => theme.colors.gray[700]}; - margin-bottom: 0.625rem; + margin-bottom: 0.625rem; text-align: left; `; @@ -69,8 +69,8 @@ export const MemberInfo = styled.div` export const MemberInfoRow = styled.div` display: flex; align-items: center; - justify-content: flex-start; - margin-bottom: 0.625rem; + justify-content: flex-start; + margin-bottom: 0.625rem; margin-top: 10px; `; @@ -79,13 +79,13 @@ export const Label = styled.div` color: ${({ theme }) => theme.colors.gray[700]}; display: flex; align-items: center; - width: 6.25rem; + width: 6.25rem; `; export const Info = styled.div` - font-size: 0.875rem; + font-size: 0.875rem; color: ${({ theme }) => theme.colors.caption}; - margin-left: 0.625rem; - flex-grow: 1; - text-align: left; + margin-left: 0.625rem; + flex-grow: 1; + text-align: left; `; diff --git a/src/pages/AccountSetting/index.tsx b/src/pages/Account/AccountSetting/index.tsx similarity index 93% rename from src/pages/AccountSetting/index.tsx rename to src/pages/Account/AccountSetting/index.tsx index c16e8fbf..5abb4b9f 100644 --- a/src/pages/AccountSetting/index.tsx +++ b/src/pages/Account/AccountSetting/index.tsx @@ -1,19 +1,24 @@ -import React, { useState, useEffect } from 'react'; +import { useState, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; -import { ProfileEditContainer, ProfilePic, ProfilePicWrapper, Label, Row, List, ListItem } from './styles'; -import { OODDFrame } from '@components/Frame/Frame'; -import ConfirmationModal from '@components/ConfirmationModal/index'; -import { StyledText } from '@components/Text/StyledText'; import theme from '@styles/theme'; -import TopBar from '@components/TopBar/index'; + +import { getUserInfoApi } from '@apis/user'; + import back from '@assets/arrow/left.svg'; import imageBasic from '@assets/default/defaultProfile.svg'; -import Profile_s from '@assets/default/my-page.svg'; import leave from '@assets/default/leave.svg'; -import { getUserInfoApi } from '@apis/user'; -import type { UserInfoData } from '@apis/user/dto'; // type 명시 +import Profile_s from '@assets/default/my-page.svg'; + +import ConfirmationModal from '@components/ConfirmationModal/index'; +import { OODDFrame } from '@components/Frame/Frame'; import Loading from '@components/Loading/index'; +import { StyledText } from '@components/Text/StyledText'; +import TopBar from '@components/TopBar/index'; + +import type { UserInfoData } from '@apis/user/dto'; // type 명시 + +import { ProfileEditContainer, ProfilePic, ProfilePicWrapper, Label, Row, List, ListItem } from './styles'; const AccountSetting: React.FC = () => { const navigate = useNavigate(); @@ -63,7 +68,7 @@ const AccountSetting: React.FC = () => { const handleDeleteAccountClick = () => { // 회원 탈퇴 로직 추가 - navigate('/account-cancel'); + navigate('/account/cancel'); }; if (isLoading) { @@ -98,7 +103,7 @@ const AccountSetting: React.FC = () => { 로그아웃 아이콘 - + Logout diff --git a/src/pages/AccountSetting/styles.tsx b/src/pages/Account/AccountSetting/styles.tsx similarity index 82% rename from src/pages/AccountSetting/styles.tsx rename to src/pages/Account/AccountSetting/styles.tsx index 964a5d1f..5b1ce005 100644 --- a/src/pages/AccountSetting/styles.tsx +++ b/src/pages/Account/AccountSetting/styles.tsx @@ -1,9 +1,9 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; export const ProfileEditContainer = styled.div` margin: 0 auto; width: 100%; - flex-grow: 1; + flex-grow: 1; display: flex; flex-direction: column; align-items: center; @@ -18,13 +18,13 @@ export const ProfilePicWrapper = styled.div` `; export const ProfilePic = styled.div` - width: 7.25rem; - height: 7.25rem; + width: 7.25rem; + height: 7.25rem; flex-shrink: 0; border-radius: 50%; overflow: hidden; - margin-top: 2.125rem; - margin-bottom: 1.375rem; + margin-top: 2.125rem; + margin-bottom: 1.375rem; img { width: 100%; @@ -42,7 +42,7 @@ export const Row = styled.div` justify-content: center; align-items: center; width: 100%; - margin-bottom: 10px; + margin-bottom: 10px; ${Label} { width: auto; @@ -50,7 +50,6 @@ export const Row = styled.div` } `; - export const FileInput = styled.input` display: none; `; @@ -58,26 +57,26 @@ export const FileInput = styled.input` export const List = styled.ul` width: 100%; padding: 0; - margin: 0; + margin: 0; list-style: none; border-top: 0px solid ${({ theme }) => theme.colors.background.divider}; position: absolute; - bottom: 20px; + bottom: 20px; `; export const ListItem = styled.li` display: flex; align-items: center; - padding: 15px 1.25rem; + padding: 15px 1.25rem; border-bottom: 0px solid ${({ theme }) => theme.colors.background.divider}; cursor: pointer; & img:first-child { - margin-right: 1rem; + margin-right: 1rem; } & img:last-child { - margin-left: auto; + margin-left: auto; } &:hover { diff --git a/src/pages/verification/dto.tsx b/src/pages/Account/Verification/dto.tsx similarity index 100% rename from src/pages/verification/dto.tsx rename to src/pages/Account/Verification/dto.tsx diff --git a/src/pages/verification/index.tsx b/src/pages/Account/Verification/index.tsx similarity index 92% rename from src/pages/verification/index.tsx rename to src/pages/Account/Verification/index.tsx index e7ead21e..6bf7c02f 100644 --- a/src/pages/verification/index.tsx +++ b/src/pages/Account/Verification/index.tsx @@ -1,4 +1,14 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; + +import theme from '@styles/theme'; + +import back from '@assets/arrow/left.svg'; + +import { OODDFrame } from '@components/Frame/Frame'; +import { StyledText } from '@components/Text/StyledText'; +import TopBar from '@components/TopBar'; + import { Container, Title, @@ -13,13 +23,6 @@ import { InputWrapper, } from './styles'; -import { OODDFrame } from '../../components/Frame/Frame'; -import { StyledText } from '../../components/Text/StyledText'; -import TopBar from '../../components/TopBar'; -import back from '../../assets/arrow/left.svg'; -import { useNavigate } from 'react-router-dom'; -import theme from '@styles/theme'; - const Verification: React.FC = () => { const navigate = useNavigate(); // useNavigate 훅 사용 @@ -109,9 +112,7 @@ const Verification: React.FC = () => { - <StyledText - $textTheme={{ style: 'body1-medium' }} - color={theme.colors.tertiary} > + <StyledText $textTheme={{ style: 'body1-medium' }} color={theme.colors.tertiary}> 휴대전화번호로 본인인증하기 </StyledText> diff --git a/src/pages/verification/styles.tsx b/src/pages/Account/Verification/styles.tsx similarity index 87% rename from src/pages/verification/styles.tsx rename to src/pages/Account/Verification/styles.tsx index 9d5d9e7e..78d6b9a4 100644 --- a/src/pages/verification/styles.tsx +++ b/src/pages/Account/Verification/styles.tsx @@ -1,9 +1,9 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; export const VerificationWrapper = styled.div` margin: 0 auto; width: 100%; - flex-grow: 1; + flex-grow: 1; padding: 1.25rem; display: flex; flex-direction: column; @@ -11,7 +11,7 @@ export const VerificationWrapper = styled.div` `; export const Container = styled.div` - margin-top: 5px; + margin-top: 5px; padding: 1rem; `; @@ -46,15 +46,13 @@ export const Button = styled.button` margin-top: 300px; font-size: 0.875rem; color: ${({ theme }) => theme.colors.contrast}; - background-color: ${({ theme, disabled }) => - disabled ? theme.colors.gray[300] : theme.colors.black}; + background-color: ${({ theme, disabled }) => (disabled ? theme.colors.gray[300] : theme.colors.black)}; border: none; border-radius: 0.3125rem; cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')}; &:hover { - background-color: ${({ theme, disabled }) => - disabled ? theme.colors.gray[300] : theme.colors.gray[700]}; + background-color: ${({ theme, disabled }) => (disabled ? theme.colors.gray[300] : theme.colors.gray[700])}; } `; diff --git a/src/pages/Chats/ChatRoom/ChatBox/index.tsx b/src/pages/Chats/ChatRoom/ChatBox/index.tsx index 0f7ddae1..95b85d7d 100644 --- a/src/pages/Chats/ChatRoom/ChatBox/index.tsx +++ b/src/pages/Chats/ChatRoom/ChatBox/index.tsx @@ -1,11 +1,14 @@ -import { ChatBoxContainer, Textarea, SendButton } from './styles'; import { useEffect, useRef, useState } from 'react'; -import { useRecoilValue } from 'recoil'; import { useParams } from 'react-router-dom'; -import { OtherUserAtom } from '@recoil/util/OtherUser'; + +import { useRecoilValue } from 'recoil'; + import { useSocket } from '@context/SocketProvider'; +import { OtherUserAtom } from '@recoil/util/OtherUser'; import { getCurrentUserId } from '@utils/getCurrentUserId'; +import { ChatBoxContainer, Textarea, SendButton } from './styles'; + const ChatBox: React.FC = () => { const [newMessage, setNewMessage] = useState(''); const textareaRef = useRef(null); diff --git a/src/pages/Chats/ChatRoom/ChatBox/styles.tsx b/src/pages/Chats/ChatRoom/ChatBox/styles.tsx index 43875546..82fd9c43 100644 --- a/src/pages/Chats/ChatRoom/ChatBox/styles.tsx +++ b/src/pages/Chats/ChatRoom/ChatBox/styles.tsx @@ -1,4 +1,5 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; + import SendIcon from '@assets/default/send-message.svg'; export const ChatBoxContainer = styled.div` diff --git a/src/pages/Chats/ChatRoom/DateBar/index.tsx b/src/pages/Chats/ChatRoom/DateBar/index.tsx index 39be4780..dcf79102 100644 --- a/src/pages/Chats/ChatRoom/DateBar/index.tsx +++ b/src/pages/Chats/ChatRoom/DateBar/index.tsx @@ -1,12 +1,14 @@ -import React from 'react'; +import { memo } from 'react'; + import theme from '@styles/theme'; + import { DatebarLayout, Date, Divider } from './styles'; interface DateBarProps { formattedDate: string; // yyyy년 MM월 dd일 EEEE } -const DateBar: React.FC = React.memo(({ formattedDate }) => { +const DateBar: React.FC = memo(({ formattedDate }) => { return ( diff --git a/src/pages/Chats/ChatRoom/DateBar/styles.tsx b/src/pages/Chats/ChatRoom/DateBar/styles.tsx index d221c825..ed4a258d 100644 --- a/src/pages/Chats/ChatRoom/DateBar/styles.tsx +++ b/src/pages/Chats/ChatRoom/DateBar/styles.tsx @@ -1,4 +1,5 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; + import { StyledText } from '@components/Text/StyledText'; export const DatebarLayout = styled.div` diff --git a/src/pages/Chats/ChatRoom/RcvdMessage/index.tsx b/src/pages/Chats/ChatRoom/RcvdMessage/index.tsx index 34efb361..8fcdfad2 100644 --- a/src/pages/Chats/ChatRoom/RcvdMessage/index.tsx +++ b/src/pages/Chats/ChatRoom/RcvdMessage/index.tsx @@ -1,9 +1,12 @@ -import React from 'react'; +import { memo } from 'react'; + import theme from '@styles/theme'; + import type { RcvdMessageProps } from '../dto'; + import { FirstMessageLayout, UserImage, UsernameText, MessageBox, Message, TimeWrapper, MessageLayout } from './styles'; -const RcvdMessage: React.FC void }> = React.memo( +const RcvdMessage: React.FC void }> = memo( ({ fromUserNickname, profilePictureUrl, diff --git a/src/pages/Chats/ChatRoom/RcvdMessage/styles.tsx b/src/pages/Chats/ChatRoom/RcvdMessage/styles.tsx index 44b7046e..e6b4d31a 100644 --- a/src/pages/Chats/ChatRoom/RcvdMessage/styles.tsx +++ b/src/pages/Chats/ChatRoom/RcvdMessage/styles.tsx @@ -1,4 +1,5 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; + import { StyledText } from '@components/Text/StyledText'; export const FirstMessageLayout = styled.div<{ $isSenderChanged: boolean }>` diff --git a/src/pages/Chats/ChatRoom/SentMessage/index.tsx b/src/pages/Chats/ChatRoom/SentMessage/index.tsx index 35fb0a36..6ad94e05 100644 --- a/src/pages/Chats/ChatRoom/SentMessage/index.tsx +++ b/src/pages/Chats/ChatRoom/SentMessage/index.tsx @@ -1,19 +1,20 @@ -import React from 'react'; +import { memo } from 'react'; + import theme from '@styles/theme'; + import type { SentMessageProps } from '../dto'; + import { Message, TimeWrapper, MessageLayout } from './styles'; -const SentMessage: React.FC = React.memo( - ({ content, isSenderChanged, isTimeVisible, formattedTime }) => { - return ( - - {isTimeVisible && {formattedTime}} - - {content} - - - ); - }, -); +const SentMessage: React.FC = memo(({ content, isSenderChanged, isTimeVisible, formattedTime }) => { + return ( + + {isTimeVisible && {formattedTime}} + + {content} + + + ); +}); export default SentMessage; diff --git a/src/pages/Chats/ChatRoom/SentMessage/styles.tsx b/src/pages/Chats/ChatRoom/SentMessage/styles.tsx index 2be29f1b..6c3a58c4 100644 --- a/src/pages/Chats/ChatRoom/SentMessage/styles.tsx +++ b/src/pages/Chats/ChatRoom/SentMessage/styles.tsx @@ -1,4 +1,5 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; + import { StyledText } from '@components/Text/StyledText'; export const MessageLayout = styled.div<{ $isSenderChanged: boolean }>` diff --git a/src/pages/Chats/ChatRoom/createExtendedMessages.ts b/src/pages/Chats/ChatRoom/createExtendedMessages.ts index a6f640bb..bf9747e5 100644 --- a/src/pages/Chats/ChatRoom/createExtendedMessages.ts +++ b/src/pages/Chats/ChatRoom/createExtendedMessages.ts @@ -1,9 +1,11 @@ -import type { ExtendedMessageDto, RcvdMessageProps, SentMessageProps } from './dto'; -import defaultProfile from '@assets/default/defaultProfile.svg'; import dayjs from 'dayjs'; import 'dayjs/locale/ko'; -import { OtherUserDto } from '@apis/chatting/dto'; -import { chatRoomMessagesData } from '@apis/chatting/dto'; + +import defaultProfile from '@assets/default/defaultProfile.svg'; + +import type { OtherUserDto, chatRoomMessagesData } from '@apis/chatting/dto'; + +import type { ExtendedMessageDto, RcvdMessageProps, SentMessageProps } from './dto'; export const createExtendedMessages = ( allMessages: chatRoomMessagesData[], @@ -26,23 +28,24 @@ export const createExtendedMessages = ( // 채팅의 첫 메시지가 아니고, 날짜가 바뀐 경우 // 날짜 표시줄 출력 - let isDateBarVisible = prevMessage !== null && isNewDay(message.createdAt, prevMessage.createdAt); + const isDateBarVisible = prevMessage !== null && isNewDay(message.createdAt, prevMessage.createdAt); // 채팅의 첫 메시지이거나 전송자 또는 날짜가 바뀐 경우 // 프로필 사진 출력 - let isProfileImageVisible = + const isProfileImageVisible = prevMessage === null || prevMessage.fromUser.id !== message.fromUser.id || isDateBarVisible; // 가장 마지막 메시지이거나, 전송자 또는 시간이 바뀌기 직전인 경우 // 메시지 전송 시각 출력 - let isTimeVisible = + const isTimeVisible = nextMessage === null || message.fromUser.id !== nextMessage.fromUser.id || formattedTime !== dayjs(nextMessage.createdAt).format('HH:mm'); // 채팅의 첫 메시지가 아니고, 전송자가 바뀐 경우 // margin-top 추가 - let isSenderChanged = prevMessage !== null && !isDateBarVisible && prevMessage.fromUser.id !== message.fromUser.id; + const isSenderChanged = + prevMessage !== null && !isDateBarVisible && prevMessage.fromUser.id !== message.fromUser.id; if (message.fromUser.id === userId) { // 보낸 메시지일 경우 sentMessage 속성 추가 diff --git a/src/pages/Chats/ChatRoom/dto.ts b/src/pages/Chats/ChatRoom/dto.ts index 7b555fc0..dd409693 100644 --- a/src/pages/Chats/ChatRoom/dto.ts +++ b/src/pages/Chats/ChatRoom/dto.ts @@ -1,4 +1,4 @@ -import { chatRoomMessagesData } from '@apis/chatting/dto'; +import type { chatRoomMessagesData } from '@apis/chatting/dto'; export interface ExtendedMessageDto extends chatRoomMessagesData { isDateBarVisible: boolean; diff --git a/src/pages/Chats/ChatRoom/index.tsx b/src/pages/Chats/ChatRoom/index.tsx index ea877756..21899ab3 100644 --- a/src/pages/Chats/ChatRoom/index.tsx +++ b/src/pages/Chats/ChatRoom/index.tsx @@ -1,36 +1,44 @@ import { useState, useEffect, useRef, useCallback } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; + +import dayjs from 'dayjs'; import { useRecoilState, useRecoilValue } from 'recoil'; -import { MessagesContainer } from './styles'; -import { OODDFrame } from '@components/Frame/Frame'; -import TopBar from '@components/TopBar'; -import RcvdMessage from './RcvdMessage/index'; -import SentMessage from './SentMessage/index'; -import DateBar from './DateBar/index'; -import ChatBox from './ChatBox/index'; -import BottomSheet from '@components/BottomSheet'; -import BottomSheetMenu from '@components/BottomSheetMenu'; -import Modal from '@components/Modal'; -import Loading from '@components/Loading'; -import type { ExtendedMessageDto } from './dto'; -import type { BottomSheetProps } from '@components/BottomSheet/dto'; -import type { BottomSheetMenuProps } from '@components/BottomSheetMenu/dto'; -import type { ModalProps } from '@components/Modal/dto'; -import { createExtendedMessages } from './createExtendedMessages'; + +import 'dayjs/locale/ko'; +import { postUserBlockApi } from '@apis/user-block'; +import { handleError } from '@apis/util/handleError'; +import { useSocket } from '@context/SocketProvider'; import { AllMesagesAtom } from '@recoil/Chats/AllMessages'; import { OtherUserAtom } from '@recoil/util/OtherUser'; -import { useSocket } from '@context/SocketProvider'; +import { getCurrentUserId } from '@utils/getCurrentUserId'; + import Back from '@assets/arrow/left.svg'; -import KebabMenu from '@assets/default/more.svg'; -import Exit from '@assets/default/leave.svg'; import Block from '@assets/default/block.svg'; -import dayjs from 'dayjs'; -import 'dayjs/locale/ko'; +import Exit from '@assets/default/leave.svg'; +import KebabMenu from '@assets/default/more.svg'; + +import BottomSheet from '@components/BottomSheet'; +import BottomSheetMenu from '@components/BottomSheet/BottomSheetMenu'; +import { OODDFrame } from '@components/Frame/Frame'; +import Loading from '@components/Loading'; +import Modal from '@components/Modal'; +import TopBar from '@components/TopBar'; + import type { chatRoomMessagesData } from '@apis/chatting/dto'; -import { postUserBlockApi } from '@apis/user-block'; import type { PostUserBlockRequest } from '@apis/user-block/dto'; -import { handleError } from '@apis/util/handleError'; -import { getCurrentUserId } from '@utils/getCurrentUserId'; +import type { BottomSheetMenuProps } from '@components/BottomSheet/BottomSheetMenu/dto'; +import type { BottomSheetProps } from '@components/BottomSheet/dto'; +import type { ModalProps } from '@components/Modal/dto'; + +import type { ExtendedMessageDto } from './dto'; + +import ChatBox from './ChatBox/index'; +import DateBar from './DateBar/index'; +import RcvdMessage from './RcvdMessage/index'; +import SentMessage from './SentMessage/index'; + +import { createExtendedMessages } from './createExtendedMessages'; +import { MessagesContainer } from './styles'; const ChatRoom: React.FC = () => { const [extendedMessages, setExtendedMessages] = useState([]); diff --git a/src/pages/Chats/ChatRoom/styles.tsx b/src/pages/Chats/ChatRoom/styles.tsx index 2ae5d965..b8eec77c 100644 --- a/src/pages/Chats/ChatRoom/styles.tsx +++ b/src/pages/Chats/ChatRoom/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; export const MessagesContainer = styled.div<{ $isLoading: boolean }>` visibility: ${({ $isLoading }) => ($isLoading ? 'hidden' : 'visible')}; diff --git a/src/pages/Chats/ChatRoomItem/index.tsx b/src/pages/Chats/ChatRoomItem/index.tsx index a63a0da7..75cc6afd 100644 --- a/src/pages/Chats/ChatRoomItem/index.tsx +++ b/src/pages/Chats/ChatRoomItem/index.tsx @@ -1,15 +1,23 @@ -import { StyledText } from '@components/Text/StyledText'; -import { UserImage, ChatRoomItemLayout, LeftBox, RightBox, LatestMessage } from './styles'; +import { useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; -import { useRecoilState } from 'recoil'; -import { OtherUserAtom } from '@recoil/util/OtherUser'; + import dayjs from 'dayjs'; import relativeTime from 'dayjs/plugin/relativeTime'; -import 'dayjs/locale/ko'; -import { useEffect, useState } from 'react'; -import type { ChatRoomData } from '@apis/chatting/dto'; -import defaultProfile from '@assets/default/defaultProfile.svg'; +import { useRecoilState } from 'recoil'; + import theme from '@styles/theme'; + +import { OtherUserAtom } from '@recoil/util/OtherUser'; + +import defaultProfile from '@assets/default/defaultProfile.svg'; + +import { StyledText } from '@components/Text/StyledText'; + +import type { ChatRoomData } from '@apis/chatting/dto'; + +import { UserImage, ChatRoomItemLayout, LeftBox, RightBox, LatestMessage } from './styles'; + +import 'dayjs/locale/ko'; dayjs.extend(relativeTime); const ChatRoomItem: React.FC = ({ id, otherUser, latestMessage }) => { diff --git a/src/pages/Chats/ChatRoomItem/styles.tsx b/src/pages/Chats/ChatRoomItem/styles.tsx index 93558730..393e17bd 100644 --- a/src/pages/Chats/ChatRoomItem/styles.tsx +++ b/src/pages/Chats/ChatRoomItem/styles.tsx @@ -1,4 +1,5 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; + import { StyledText } from '@components/Text/StyledText'; export const ChatRoomItemLayout = styled.li` diff --git a/src/pages/Chats/Matching/Cards/Card/dto.ts b/src/pages/Chats/Matching/Cards/Card/dto.ts index 5098a13f..3fda591d 100644 --- a/src/pages/Chats/Matching/Cards/Card/dto.ts +++ b/src/pages/Chats/Matching/Cards/Card/dto.ts @@ -1,4 +1,4 @@ -import { MatchingDto } from '@apis/matching/dto'; +import type { MatchingDto } from '@apis/matching/dto'; export interface CardProps { removeRejectedMatching: () => void; diff --git a/src/pages/Chats/Matching/Cards/Card/index.tsx b/src/pages/Chats/Matching/Cards/Card/index.tsx index 4497ea81..c0ec4802 100644 --- a/src/pages/Chats/Matching/Cards/Card/index.tsx +++ b/src/pages/Chats/Matching/Cards/Card/index.tsx @@ -1,10 +1,29 @@ -import React, { useState } from 'react'; -import { StyledText } from '@components/Text/StyledText'; -import { Swiper, SwiperSlide } from 'swiper/react'; +import { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; + +import { useRecoilState } from 'recoil'; import { Pagination } from 'swiper/modules'; +import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; import 'swiper/css/pagination'; + import theme from '@styles/theme'; + +import { modifyMatchingStatusApi } from '@apis/matching'; +import { handleError } from '@apis/util/handleError'; +import { OtherUserAtom } from '@recoil/util/OtherUser'; + +import acceptButton from '@assets/default/accept.svg'; +import defaultProfile from '@assets/default/defaultProfile.svg'; +import rejectButton from '@assets/default/reject.svg'; + +import Modal from '@components/Modal'; +import { StyledText } from '@components/Text/StyledText'; + +import type { ModalProps } from '@components/Modal/dto'; + +import type { CardProps } from './dto'; + import { ArrowButton, Btn, @@ -17,17 +36,6 @@ import { Reaction, SeeMore, } from './styles'; -import rejectButton from '@assets/default/reject.svg'; -import acceptButton from '@assets/default/accept.svg'; -import defaultProfile from '@assets/default/defaultProfile.svg'; -import { useNavigate } from 'react-router-dom'; -import { modifyMatchingStatusApi } from '@apis/matching'; -import { handleError } from '@apis/util/handleError'; -import type { ModalProps } from '@components/Modal/dto'; -import Modal from '@components/Modal'; -import { useRecoilState } from 'recoil'; -import { OtherUserAtom } from '@recoil/util/OtherUser'; -import type { CardProps } from './dto'; const Card: React.FC = ({ removeRejectedMatching, matching }) => { const [isStatusModalOpen, setIsStatusModalOpen] = useState(false); diff --git a/src/pages/Chats/Matching/Cards/Card/styles.tsx b/src/pages/Chats/Matching/Cards/Card/styles.tsx index 93de704e..3d345859 100644 --- a/src/pages/Chats/Matching/Cards/Card/styles.tsx +++ b/src/pages/Chats/Matching/Cards/Card/styles.tsx @@ -1,4 +1,5 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; + import ArrowIcon from '@assets/arrow/min-right.svg'; export const CardLayout = styled.div` diff --git a/src/pages/Chats/Matching/Cards/index.tsx b/src/pages/Chats/Matching/Cards/index.tsx index a0279740..a5648bec 100644 --- a/src/pages/Chats/Matching/Cards/index.tsx +++ b/src/pages/Chats/Matching/Cards/index.tsx @@ -1,14 +1,20 @@ -import React, { useEffect, useRef, useState } from 'react'; -import { Swiper, SwiperRef, SwiperSlide } from 'swiper/react'; +import { useEffect, useRef, useState } from 'react'; + import { Pagination } from 'swiper/modules'; +import { Swiper, SwiperRef, SwiperSlide } from 'swiper/react'; + import 'swiper/css'; import 'swiper/css/pagination'; -import { CardsContainer } from './styles'; -import Card from './Card/index'; import { getMatchingListApi } from '@apis/matching'; + import type { MatchingDto } from '@apis/matching/dto'; + import type { CardsProps } from './dto'; +import Card from './Card/index'; + +import { CardsContainer } from './styles'; + const Cards: React.FC = ({ decreaseMatchingCount }) => { const [matchings, setMatchings] = useState([]); const swiperRef = useRef(null); diff --git a/src/pages/Chats/Matching/Cards/styles.tsx b/src/pages/Chats/Matching/Cards/styles.tsx index ff912438..7b4fe6c7 100644 --- a/src/pages/Chats/Matching/Cards/styles.tsx +++ b/src/pages/Chats/Matching/Cards/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; export const CardsContainer = styled.div` display: flex; diff --git a/src/pages/Chats/Matching/index.tsx b/src/pages/Chats/Matching/index.tsx index 64480993..b3822165 100644 --- a/src/pages/Chats/Matching/index.tsx +++ b/src/pages/Chats/Matching/index.tsx @@ -1,10 +1,15 @@ -import React from 'react'; -import Cards from './Cards/index'; +import { memo } from 'react'; + import theme from '@styles/theme'; -import { ReqeustInfo } from './styles'; + import { StyledText } from '@components/Text/StyledText'; + import type { MatchingProps } from './dto'; +import Cards from './Cards/index'; + +import { ReqeustInfo } from './styles'; + const Matching: React.FC = ({ matchingCount, decreaseMatchingCount }) => { return ( <> @@ -19,4 +24,4 @@ const Matching: React.FC = ({ matchingCount, decreaseMatchingCoun ); }; -export default React.memo(Matching); +export default memo(Matching); diff --git a/src/pages/Chats/Matching/styles.tsx b/src/pages/Chats/Matching/styles.tsx index d3b19b2f..57375bbf 100644 --- a/src/pages/Chats/Matching/styles.tsx +++ b/src/pages/Chats/Matching/styles.tsx @@ -1,4 +1,5 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; + import { StyledText } from '@components/Text/StyledText'; export const ReqeustInfo = styled(StyledText)` diff --git a/src/pages/Chats/RecentChat/index.tsx b/src/pages/Chats/RecentChat/index.tsx index 9256c3fb..b0de9f2b 100644 --- a/src/pages/Chats/RecentChat/index.tsx +++ b/src/pages/Chats/RecentChat/index.tsx @@ -1,13 +1,20 @@ -import { ChatRoomList, NoChatRoomWrapper, RecentChatInfo } from './styles'; -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; + import SwiperCore from 'swiper'; + +import theme from '@styles/theme'; + +import { useSocket } from '@context/SocketProvider'; +import { getCurrentUserId } from '@utils/getCurrentUserId'; + import Loading from '@components/Loading'; -import ChatRoomItem from '../ChatRoomItem/index'; import { StyledText } from '@components/Text/StyledText'; -import { useSocket } from '@context/SocketProvider'; + import type { ChatRoomData } from '@apis/chatting/dto'; -import { getCurrentUserId } from '@utils/getCurrentUserId'; -import theme from '@styles/theme'; + +import ChatRoomItem from '../ChatRoomItem/index'; + +import { ChatRoomList, NoChatRoomWrapper, RecentChatInfo } from './styles'; interface RecentChatProps { matchingCount: number; diff --git a/src/pages/Chats/RecentChat/styles.tsx b/src/pages/Chats/RecentChat/styles.tsx index 933d1733..7de1cfe6 100644 --- a/src/pages/Chats/RecentChat/styles.tsx +++ b/src/pages/Chats/RecentChat/styles.tsx @@ -1,4 +1,5 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; + import { StyledText } from '@components/Text/StyledText'; export const RecentChatInfo = styled(StyledText)` diff --git a/src/pages/Chats/TabBar/index.tsx b/src/pages/Chats/TabBar/index.tsx index 4091cd4e..a48c9607 100644 --- a/src/pages/Chats/TabBar/index.tsx +++ b/src/pages/Chats/TabBar/index.tsx @@ -1,14 +1,20 @@ -import React, { useCallback, useEffect, useRef, useState } from 'react'; +import { memo, useCallback, useEffect, useRef, useState } from 'react'; + +import SwiperCore from 'swiper'; +import { Swiper, SwiperSlide } from 'swiper/react'; + +import theme from '@styles/theme'; + +import { getMatchingListApi } from '@apis/matching'; + import { StyledText } from '@components/Text/StyledText'; -import { TabBarLayout, TabBarContainer, TabBarWrapper, TabBarList, Tabs } from './styles'; + import Matching from '../Matching/index'; import RecentChat from '../RecentChat/index'; -import { Swiper, SwiperSlide } from 'swiper/react'; -import SwiperCore from 'swiper'; +import { TabBarLayout, TabBarContainer, TabBarWrapper, TabBarList, Tabs } from './styles'; + import 'swiper/css'; -import { getMatchingListApi } from '@apis/matching'; -import theme from '@styles/theme'; const TabBar: React.FC = () => { const [matchingCount, setMatchingCount] = useState(0); @@ -127,4 +133,4 @@ const TabBar: React.FC = () => { ); }; -export default React.memo(TabBar); +export default memo(TabBar); diff --git a/src/pages/Chats/TabBar/styles.tsx b/src/pages/Chats/TabBar/styles.tsx index 9a9709b4..05b2cae6 100644 --- a/src/pages/Chats/TabBar/styles.tsx +++ b/src/pages/Chats/TabBar/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; export const TabBarLayout = styled.div` display: flex; diff --git a/src/pages/Chats/index.tsx b/src/pages/Chats/index.tsx index 97c43cfc..bf4ff29f 100644 --- a/src/pages/Chats/index.tsx +++ b/src/pages/Chats/index.tsx @@ -1,9 +1,12 @@ -import { OODDFrame } from '@components/Frame/Frame'; -import { Header } from './styles'; import theme from '@styles/theme'; + +import { OODDFrame } from '@components/Frame/Frame'; import NavBar from '@components/NavBar'; + import TabBar from './TabBar/index'; +import { Header } from './styles'; + const Chats: React.FC = () => { return ( diff --git a/src/pages/Chats/styles.tsx b/src/pages/Chats/styles.tsx index 8bc88e14..82c76c78 100644 --- a/src/pages/Chats/styles.tsx +++ b/src/pages/Chats/styles.tsx @@ -1,4 +1,5 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; + import { StyledText } from '@components/Text/StyledText'; export const Header = styled(StyledText)` diff --git a/src/pages/Home/HomeTopBar/index.tsx b/src/pages/Home/HomeTopBar/index.tsx index 59bae2c5..dc046e27 100644 --- a/src/pages/Home/HomeTopBar/index.tsx +++ b/src/pages/Home/HomeTopBar/index.tsx @@ -1,8 +1,9 @@ -import React from 'react'; -import { Button, ButtonContainer, HomeLogo, HomeTopBarContainer } from './styles'; import logo from '@assets/default/oodd.svg'; + import Alarm from '@components/Icons/Alarm'; +import { Button, ButtonContainer, HomeLogo, HomeTopBarContainer } from './styles'; + // Home 페이지의 상단 바입니다. 로고와 알림이 있습니다. // TODO: 버튼 클릭 이벤트 처리 필요 const HomeTopBar: React.FC = () => { diff --git a/src/pages/Home/HomeTopBar/styles.tsx b/src/pages/Home/HomeTopBar/styles.tsx index 1524495e..1b219068 100644 --- a/src/pages/Home/HomeTopBar/styles.tsx +++ b/src/pages/Home/HomeTopBar/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; export const HomeTopBarContainer = styled.header` width: 100%; diff --git a/src/pages/Home/OOTD/Feed/index.tsx b/src/pages/Home/OOTD/Feed/index.tsx index ed21e79e..66dc117f 100644 --- a/src/pages/Home/OOTD/Feed/index.tsx +++ b/src/pages/Home/OOTD/Feed/index.tsx @@ -1,10 +1,40 @@ -import React, { useState } from 'react'; -import { Swiper, SwiperSlide } from 'swiper/react'; +import { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; + +import dayjs from 'dayjs'; import { Pagination } from 'swiper/modules'; +import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; import 'swiper/css/pagination'; -import { StyledText } from '@components/Text/StyledText'; + import theme from '@styles/theme'; + +import { createMatchingApi } from '@apis/matching'; +import { togglePostLikeStatusApi } from '@apis/post-like'; +import { postUserBlockApi } from '@apis/user-block'; +import { handleError } from '@apis/util/handleError'; +import { getCurrentUserId } from '@utils/getCurrentUserId'; + +import defaultProfile from '@assets/default/defaultProfile.svg'; +import more from '@assets/default/more.svg'; +import xBtn from '@assets/default/reject.svg'; + +import Heart from '@components/Icons/Heart'; +import Message from '@components/Icons/Message'; + +import CommentBottomSheet from '@components/BottomSheet/CommentBottomSheet'; +import OptionsBottomSheet from '@components/BottomSheet/OptionsBottomSheet'; +import Modal from '@components/Modal'; +import { StyledText } from '@components/Text/StyledText'; + +import type { CreateMatchingRequest } from '@apis/matching/dto'; +import type { PostUserBlockRequest } from '@apis/user-block/dto'; +import type { CommentBottomSheetProps } from '@components/BottomSheet/CommentBottomSheet/dto'; +import { OptionsBottomSheetProps } from '@components/BottomSheet/OptionsBottomSheet/dto'; +import type { ModalProps } from '@components/Modal/dto'; + +import type { FeedProps } from './dto'; + import { MatchingBtn, FeedImgBox, @@ -19,27 +49,6 @@ import { ReactionWrapper, FeedImgBackground, } from './styles'; -import more from '@assets/default/more.svg'; -import xBtn from '@assets/default/reject.svg'; -import { useNavigate } from 'react-router-dom'; -import defaultProfile from '@assets/default/defaultProfile.svg'; -import dayjs from 'dayjs'; -import Heart from '@components/Icons/Heart'; -import Message from '@components/Icons/Message'; -import { OptionsBottomSheetProps } from '@components/BottomSheet/OptionsBottomSheet/dto'; -import OptionsBottomSheet from '@components/BottomSheet/OptionsBottomSheet'; -import CommentBottomSheet from '@components/CommentBottomSheet'; -import Modal from '@components/Modal'; -import type { CreateMatchingRequest } from '@apis/matching/dto'; -import { createMatchingApi } from '@apis/matching'; -import { handleError } from '@apis/util/handleError'; -import type { CommentBottomSheetProps } from '@components/CommentBottomSheet/dto'; -import type { ModalProps } from '@components/Modal/dto'; -import { togglePostLikeStatusApi } from '@apis/post-like'; -import { postUserBlockApi } from '@apis/user-block'; -import type { PostUserBlockRequest } from '@apis/user-block/dto'; -import type { FeedProps } from './dto'; -import { getCurrentUserId } from '@utils/getCurrentUserId'; const Feed: React.FC = ({ feed }) => { const [isLikeClicked, setIsLikeClicked] = useState(feed.isPostLike); diff --git a/src/pages/Home/OOTD/Feed/styles.tsx b/src/pages/Home/OOTD/Feed/styles.tsx index f556ab15..92d10c01 100644 --- a/src/pages/Home/OOTD/Feed/styles.tsx +++ b/src/pages/Home/OOTD/Feed/styles.tsx @@ -1,4 +1,5 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; + import { StyledText } from '@components/Text/StyledText'; export const FeedWrapper = styled.article` diff --git a/src/pages/Home/OOTD/index.tsx b/src/pages/Home/OOTD/index.tsx index d24b3037..46fc288a 100644 --- a/src/pages/Home/OOTD/index.tsx +++ b/src/pages/Home/OOTD/index.tsx @@ -1,13 +1,19 @@ -import React, { useState, useEffect, useRef } from 'react'; +import { useState, useEffect, useRef } from 'react'; + import debounce from 'lodash/debounce'; -import { OOTDContainer, FeedContainer } from './styles'; -import Feed from './Feed/index'; + import { getPostListApi } from '@apis/post'; -import type { PostSummary } from '@apis/post/dto'; import { handleError } from '@apis/util/handleError'; -import type { ModalProps } from '@components/Modal/dto'; + import Modal from '@components/Modal'; +import type { PostSummary } from '@apis/post/dto'; +import type { ModalProps } from '@components/Modal/dto'; + +import Feed from './Feed/index'; + +import { OOTDContainer, FeedContainer } from './styles'; + const OOTD: React.FC = () => { const [feeds, setFeeds] = useState([]); diff --git a/src/pages/Home/OOTD/styles.tsx b/src/pages/Home/OOTD/styles.tsx index 6c2b59fd..61840601 100644 --- a/src/pages/Home/OOTD/styles.tsx +++ b/src/pages/Home/OOTD/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; export const OOTDContainer = styled.div` display: flex; diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index 9f14d6fa..b735dafa 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -1,7 +1,9 @@ import { OODDFrame } from '@components/Frame/Frame'; import NavBar from '@components/NavBar'; + import HomeTopBar from './HomeTopBar/index'; import OOTD from './OOTD/index'; + import { HomeContainer } from './styles'; const Home: React.FC = () => { diff --git a/src/pages/Home/styles.tsx b/src/pages/Home/styles.tsx index 585d8362..fe2af26a 100644 --- a/src/pages/Home/styles.tsx +++ b/src/pages/Home/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; export const HomeContainer = styled.div` flex-grow: 1; diff --git a/src/pages/Login/LoginComplete/index.tsx b/src/pages/Login/LoginComplete/index.tsx index 29654561..4eb06f79 100644 --- a/src/pages/Login/LoginComplete/index.tsx +++ b/src/pages/Login/LoginComplete/index.tsx @@ -1,9 +1,9 @@ -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; import { getUserInfoByJwtApi } from '@apis/auth'; -import { handleError } from '@apis/util/handleError'; import { postTermsAgreementApi } from '@apis/user'; +import { handleError } from '@apis/util/handleError'; import Loading from '@components/Loading'; import Modal from '@components/Modal'; diff --git a/src/pages/Login/SocialLoginButton/index.tsx b/src/pages/Login/SocialLoginButton/index.tsx index 55bfecd5..ae5c0481 100644 --- a/src/pages/Login/SocialLoginButton/index.tsx +++ b/src/pages/Login/SocialLoginButton/index.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import theme from '@styles/theme'; import type { SocialLoginProps } from './dto'; diff --git a/src/pages/Login/SocialLoginButton/style.tsx b/src/pages/Login/SocialLoginButton/style.tsx index d9448f2a..3120dc95 100644 --- a/src/pages/Login/SocialLoginButton/style.tsx +++ b/src/pages/Login/SocialLoginButton/style.tsx @@ -1,4 +1,5 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; + import { StyledText } from '@components/Text/StyledText'; export const SocialLoginContainer = styled.button<{ $bgColor: string }>` diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx index 377ec972..dac1405a 100644 --- a/src/pages/Login/index.tsx +++ b/src/pages/Login/index.tsx @@ -1,11 +1,10 @@ -import React from 'react'; - -import { OODDFrame } from '@components/Frame/Frame'; import theme from '@styles/theme'; import kakaoLogo from '@assets/default/snsIcon/kakao.svg'; import naverLogo from '@assets/default/snsIcon/naver.svg'; +import { OODDFrame } from '@components/Frame/Frame'; + import SocialLoginButton from './SocialLoginButton/index'; import { LoginContainer, StyledWelcomeWrapper } from './styles'; diff --git a/src/pages/Login/styles.tsx b/src/pages/Login/styles.tsx index 5acd57a9..f9a18246 100644 --- a/src/pages/Login/styles.tsx +++ b/src/pages/Login/styles.tsx @@ -1,4 +1,5 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; + import { StyledText } from '@components/Text/StyledText'; export const LoginContainer = styled.main` diff --git a/src/pages/NotFound/index.tsx b/src/pages/NotFound/index.tsx index 4c879a1f..7afc7f13 100644 --- a/src/pages/NotFound/index.tsx +++ b/src/pages/NotFound/index.tsx @@ -1,8 +1,11 @@ import { useNavigate } from 'react-router-dom'; -import { OODDFrame } from '../../components/Frame/Frame'; + +import theme from '@styles/theme'; + +import { OODDFrame } from '@components/Frame/Frame'; +import { StyledText } from '@components/Text/StyledText'; + import { NotFoundContainer, TextContainer, ButtonContainer, StyledButton } from './styles'; -import { StyledText } from '../../components/Text/StyledText'; -import theme from '../../styles/theme'; const NotFound = () => { const navigate = useNavigate(); diff --git a/src/pages/NotFound/styles.tsx b/src/pages/NotFound/styles.tsx index ec172fb8..e6624b5a 100644 --- a/src/pages/NotFound/styles.tsx +++ b/src/pages/NotFound/styles.tsx @@ -1,5 +1,6 @@ -import styled from 'styled-components'; -import { StyledText } from '../../components/Text/StyledText'; +import { styled } from 'styled-components'; + +import { StyledText } from '@components/Text/StyledText'; export const NotFoundContainer = styled.div` display: flex; diff --git a/src/pages/Post/PostBase/ImageSwiper/index.tsx b/src/pages/Post/PostBase/ImageSwiper/index.tsx index e965161d..d813bb13 100644 --- a/src/pages/Post/PostBase/ImageSwiper/index.tsx +++ b/src/pages/Post/PostBase/ImageSwiper/index.tsx @@ -1,15 +1,15 @@ -import React, { useRef } from 'react'; +import { useRef } from 'react'; -import { Swiper, SwiperRef, SwiperSlide } from 'swiper/react'; import { Navigation, Pagination } from 'swiper/modules'; +import { Swiper, SwiperRef, SwiperSlide } from 'swiper/react'; import 'swiper/css'; import 'swiper/css/navigation'; import 'swiper/css/pagination'; -import { SwiperContainer, ImageWrapper, StyledNavigation } from './styles'; - import { ImageSwiperProps } from '../dto'; +import { SwiperContainer, ImageWrapper, StyledNavigation } from './styles'; + const ImageSwiper: React.FC = ({ images }) => { const swiperRef = useRef(null); diff --git a/src/pages/Post/PostBase/ImageSwiper/styles.tsx b/src/pages/Post/PostBase/ImageSwiper/styles.tsx index a558a831..914383f0 100644 --- a/src/pages/Post/PostBase/ImageSwiper/styles.tsx +++ b/src/pages/Post/PostBase/ImageSwiper/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; export const SwiperContainer = styled.div` display: flex; diff --git a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/dto.ts b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/dto.ts index 48059786..5a1eba0b 100644 --- a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/dto.ts +++ b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/dto.ts @@ -1,4 +1,4 @@ -import { Comment } from '../../../../../apis/post-comment/dto'; +import { Comment } from '@apis/post-comment/dto'; export interface CommentItemProps { comment: Comment; diff --git a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/index.tsx b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/index.tsx index 307180df..5deb501a 100644 --- a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/index.tsx +++ b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/index.tsx @@ -1,9 +1,16 @@ -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import dayjs from 'dayjs'; import 'dayjs/locale/ko'; import theme from '@styles/theme'; + +import More from '@assets/default/more.svg'; + +import { StyledText } from '@components/Text/StyledText'; + +import type { CommentItemProps } from './dto'; + import { StyledBigUserProfile, CommentItem as StyledCommentItem, @@ -12,12 +19,6 @@ import { MenuBtn, } from './styles'; -import { StyledText } from '@components/Text/StyledText'; - -import type { CommentItemProps } from './dto'; - -import More from '@assets/default/more.svg'; - const CommentItem: React.FC = ({ comment, handleUserClick, handleMenuOpen }) => { const [timeAgo, setTimeAgo] = useState(); diff --git a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/styles.tsx b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/styles.tsx index 46347022..dbd3a127 100644 --- a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/styles.tsx +++ b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/styles.tsx @@ -1,4 +1,5 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; + import { BigUserProfile } from '../styles'; export const CommentItem = styled.div` diff --git a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/MenuButtonList/index.tsx b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/MenuButtonList/index.tsx index ae7ae51a..709411cb 100644 --- a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/MenuButtonList/index.tsx +++ b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/MenuButtonList/index.tsx @@ -1,8 +1,10 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; +import { createPortal } from 'react-dom'; + +import { StyledText } from '@components/Text/StyledText'; + import type { MenuButtonListProps } from './dto'; + import { MenuListWrapper, MenuListContainer, MenuButtonItem } from './styles'; -import { StyledText } from '@components/Text/StyledText'; const MenuButtonList: React.FC = ({ items, onClose, position }) => { const handleWrapperClick = () => { @@ -13,7 +15,7 @@ const MenuButtonList: React.FC = ({ items, onClose, positio event.stopPropagation(); // Container 클릭 시 이벤트 중단 }; - return ReactDOM.createPortal( + return createPortal( {items.map((item, index) => ( diff --git a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/MenuButtonList/styles.tsx b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/MenuButtonList/styles.tsx index a7b1b23e..579a1de7 100644 --- a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/MenuButtonList/styles.tsx +++ b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/MenuButtonList/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; export const MenuListWrapper = styled.div` position: fixed; diff --git a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/index.tsx b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/index.tsx index edc16761..00e3f978 100644 --- a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/index.tsx +++ b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/index.tsx @@ -1,38 +1,41 @@ -import React, { useEffect, useState, useRef, useCallback } from 'react'; +import { useEffect, useState, useRef, useCallback } from 'react'; import { useParams, useNavigate } from 'react-router-dom'; import { useRecoilState } from 'recoil'; + +import theme from '@styles/theme'; + +import { createCommentApi, deleteCommentApi, getCommentListApi } from '@apis/post-comment'; +import { getPostLikeListApi } from '@apis/post-like'; +import { postUserBlockApi } from '@apis/user-block'; +import { PostUserBlockRequest } from '@apis/user-block/dto'; +import { handleError } from '@apis/util/handleError'; import { IsCommentDeleteConfirmationModalOpenAtom, IsCommentReportModalOpenAtom, selectedCommentAtom, } from '@recoil/Post/PostCommentAtom'; +import { getCurrentUserId } from '@utils/getCurrentUserId'; -import { TabContainer, Tab, ContentContainer, Content, BigUserProfile, LikeItem, InputLayout } from './styles'; +import Block from '@assets/default/block.svg'; +import Delete from '@assets/default/delete.svg'; +import Report from '@assets/default/report.svg'; +import X from '@assets/default/x.svg'; -import { StyledText } from '@components/Text/StyledText'; -import theme from '@styles/theme'; import Loading from '@components/Loading'; import Modal from '@components/Modal'; -import CommentItem from './CommentItem/index'; -import MenuButtonList from './MenuButtonList/index'; +import { StyledText } from '@components/Text/StyledText'; -import type { LikeCommentBottomSheetProps } from '../dto'; -import type { ModalProps } from '@components/Modal/dto'; -import type { GetPostLikeListResponse } from '@apis/post-like/dto'; import type { Comment, GetCommentListResponse } from '@apis/post-comment/dto'; +import type { GetPostLikeListResponse } from '@apis/post-like/dto'; +import type { ModalProps } from '@components/Modal/dto'; -import Delete from '@assets/default/delete.svg'; -import Block from '@assets/default/block.svg'; -import Report from '@assets/default/report.svg'; -import X from '@assets/default/x.svg'; +import type { LikeCommentBottomSheetProps } from '../dto'; -import { getPostLikeListApi } from '@apis/post-like'; -import { postUserBlockApi } from '@apis/user-block'; -import { PostUserBlockRequest } from '@apis/user-block/dto'; -import { createCommentApi, deleteCommentApi, getCommentListApi } from '@apis/post-comment'; -import { handleError } from '@apis/util/handleError'; -import { getCurrentUserId } from '@utils/getCurrentUserId'; +import CommentItem from './CommentItem/index'; +import MenuButtonList from './MenuButtonList/index'; + +import { TabContainer, Tab, ContentContainer, Content, BigUserProfile, LikeItem, InputLayout } from './styles'; const LikeCommentBottomSheetContent: React.FC = ({ tab, likeCount, commentCount }) => { const [activeTab, setActiveTab] = useState<'likes' | 'comments'>(tab); diff --git a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/styles.tsx b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/styles.tsx index eb701c24..4a481925 100644 --- a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/styles.tsx +++ b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/styles.tsx @@ -1,6 +1,9 @@ -import styled from 'styled-components'; -import { StyledText } from '../../../../components/Text/StyledText'; -import theme from '../../../../styles/theme'; +import { styled } from 'styled-components'; + +import theme from '@styles/theme'; + +import { StyledText } from '@components/Text/StyledText'; + import { UserProfile } from '../styles'; export const TabContainer = styled.div` diff --git a/src/pages/Post/PostBase/index.tsx b/src/pages/Post/PostBase/index.tsx index 5d2908aa..074145ed 100644 --- a/src/pages/Post/PostBase/index.tsx +++ b/src/pages/Post/PostBase/index.tsx @@ -1,20 +1,35 @@ -import React, { useEffect, useState, useRef } from 'react'; +import { useEffect, useState, useRef } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; -import { useRecoilState } from 'recoil'; import dayjs from 'dayjs'; +import { useRecoilState } from 'recoil'; import 'dayjs/locale/ko'; import theme from '@styles/theme'; +import { getPostDetailApi } from '@apis/post'; +import { togglePostLikeStatusApi } from '@apis/post-like'; import { postIdAtom, userAtom, isPostRepresentativeAtom } from '@recoil/Post/PostAtom'; +import { getCurrentUserId } from '@utils/getCurrentUserId'; +import Left from '@assets/arrow/left.svg'; +import LikeFill from '@assets/default/like-fill.svg'; +import Like from '@assets/default/like.svg'; +import Message from '@assets/default/message.svg'; +import More from '@assets/default/more.svg'; + +import BottomSheet from '@components/BottomSheet'; +import ClothingInfoItem from '@components/ClothingInfoItem'; import { OODDFrame } from '@components/Frame/Frame'; +import NavBar from '@components/NavBar'; import { StyledText } from '@components/Text/StyledText'; import TopBar from '@components/TopBar'; -import NavBar from '@components/NavBar'; -import BottomSheet from '@components/BottomSheet'; -import ClothingInfoItem from '@components/ClothingInfoItem'; + +import type { GetPostDetailResponse } from '@apis/post/dto'; +import type { BottomSheetProps } from '@components/BottomSheet/dto'; + +import type { PostBaseProps } from './dto'; + import ImageSwiper from './ImageSwiper/index'; import LikeCommentBottomSheetContent from './LikeCommentBottomSheetContent/index'; @@ -36,20 +51,6 @@ import { ClothingInfoList, } from './styles'; -import Left from '@assets/arrow/left.svg'; -import Like from '@assets/default/like.svg'; -import LikeFill from '@assets/default/like-fill.svg'; -import Message from '@assets/default/message.svg'; -import More from '@assets/default/more.svg'; - -import type { BottomSheetProps } from '@components/BottomSheet/dto'; -import type { PostBaseProps } from './dto'; -import type { GetPostDetailResponse } from '@apis/post/dto'; - -import { getPostDetailApi } from '@apis/post'; -import { togglePostLikeStatusApi } from '@apis/post-like'; -import { getCurrentUserId } from '@utils/getCurrentUserId'; - const PostBase: React.FC = ({ onClickMenu }) => { const [, setPostId] = useRecoilState(postIdAtom); const [post, setPost] = useState(); diff --git a/src/pages/Post/PostBase/styles.tsx b/src/pages/Post/PostBase/styles.tsx index 044a9077..856e812d 100644 --- a/src/pages/Post/PostBase/styles.tsx +++ b/src/pages/Post/PostBase/styles.tsx @@ -1,5 +1,6 @@ -import styled, { keyframes } from 'styled-components'; -import { StyledText } from '../../../components/Text/StyledText'; +import { styled, keyframes } from 'styled-components'; + +import { StyledText } from '@components/Text/StyledText'; // 그라데이션 애니메이션 정의 const shimmer = keyframes` diff --git a/src/pages/PostImageSelect/ImageSwiper/index.tsx b/src/pages/Post/PostImageSelect/ImageSwiper/index.tsx similarity index 90% rename from src/pages/PostImageSelect/ImageSwiper/index.tsx rename to src/pages/Post/PostImageSelect/ImageSwiper/index.tsx index c70cce07..27025f65 100644 --- a/src/pages/PostImageSelect/ImageSwiper/index.tsx +++ b/src/pages/Post/PostImageSelect/ImageSwiper/index.tsx @@ -1,16 +1,17 @@ -import React, { useRef, useState } from 'react'; -import { Swiper, SwiperSlide } from 'swiper/react'; +import { useRef, useState } from 'react'; + import { Navigation, Pagination } from 'swiper/modules'; +import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; import 'swiper/css/navigation'; import 'swiper/css/pagination'; -import { SwiperContainer, ImageWrapper, RemoveButton, StyledNavigation, AddButton, HiddenFileInput } from './styles'; +import Plus from '@assets/default/plus.svg'; +import Reject from '@assets/default/reject.svg'; -import Reject from '../../../assets/default/reject.svg'; -import Plus from '../../../assets/default/plus.svg'; +import type { ImageSwiperProps } from '../dto'; -import { ImageSwiperProps } from '../dto'; +import { SwiperContainer, ImageWrapper, RemoveButton, StyledNavigation, AddButton, HiddenFileInput } from './styles'; const ImageSwiper: React.FC = ({ images, onProcessFile, onRemoveImage }) => { const fileInputRef = useRef(null); diff --git a/src/pages/PostImageSelect/ImageSwiper/styles.tsx b/src/pages/Post/PostImageSelect/ImageSwiper/styles.tsx similarity index 97% rename from src/pages/PostImageSelect/ImageSwiper/styles.tsx rename to src/pages/Post/PostImageSelect/ImageSwiper/styles.tsx index f7e511e5..444ba68c 100644 --- a/src/pages/PostImageSelect/ImageSwiper/styles.tsx +++ b/src/pages/Post/PostImageSelect/ImageSwiper/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; export const SwiperContainer = styled.div` display: flex; diff --git a/src/pages/PostImageSelect/dto.ts b/src/pages/Post/PostImageSelect/dto.ts similarity index 61% rename from src/pages/PostImageSelect/dto.ts rename to src/pages/Post/PostImageSelect/dto.ts index 15dd65bf..c9272190 100644 --- a/src/pages/PostImageSelect/dto.ts +++ b/src/pages/Post/PostImageSelect/dto.ts @@ -1,5 +1,4 @@ -export interface ImageSelectModalProps {} -import { PostImage } from '../../apis/post/dto'; +import { PostImage } from '@apis/post/dto'; export interface ImageSwiperProps { images: PostImage[]; diff --git a/src/pages/PostImageSelect/index.tsx b/src/pages/Post/PostImageSelect/index.tsx similarity index 88% rename from src/pages/PostImageSelect/index.tsx rename to src/pages/Post/PostImageSelect/index.tsx index 5e5486c8..6554d2e5 100644 --- a/src/pages/PostImageSelect/index.tsx +++ b/src/pages/Post/PostImageSelect/index.tsx @@ -1,32 +1,31 @@ -import React, { useState, useRef } from 'react'; +import { useState, useRef } from 'react'; import { useNavigate, useLocation } from 'react-router-dom'; +import heic2any from 'heic2any'; import { useRecoilState } from 'recoil'; + import { postImagesAtom, postContentAtom, postClothingInfosAtom, postStyletagAtom, postIsRepresentativeAtom, -} from '../../recoil/PostUpload/PostUploadAtom'; - -import { UploadContainer, ImageDragDropContainer, Content } from './styles'; +} from '@recoil/PostUpload/PostUploadAtom'; +import { getCurrentUserId } from '@utils/getCurrentUserId'; -import { OODDFrame } from '../../components/Frame/Frame'; -import { StyledText } from '../../components/Text/StyledText'; -import TopBar from '../../components/TopBar'; -import BottomButton from '../../components/BottomButton'; -import ImageSwiper from './ImageSwiper'; +import Left from '@assets/arrow/left.svg'; +import PhotoBig from '@assets/default/photo-big.svg'; +import X from '@assets/default/x.svg'; -import X from '../../assets/default/x.svg'; -import Left from '../../assets/arrow/left.svg'; -import PhotoBig from '../../assets/default/photo-big.svg'; +import BottomButton from '@components/BottomButton'; +import { OODDFrame } from '@components/Frame/Frame'; +import { StyledText } from '@components/Text/StyledText'; +import TopBar from '@components/TopBar'; -import { ImageSelectModalProps } from './dto'; -import heic2any from 'heic2any'; -import { getCurrentUserId } from '@utils/getCurrentUserId'; +import ImageSwiper from './ImageSwiper'; +import { UploadContainer, ImageDragDropContainer, Content } from './styles'; -const PostImageSelect: React.FC = () => { +const PostImageSelect: React.FC = () => { const [images, setImages] = useRecoilState(postImagesAtom); const [, setContent] = useRecoilState(postContentAtom); const [, setClothingInfos] = useRecoilState(postClothingInfosAtom); @@ -52,7 +51,7 @@ const PostImageSelect: React.FC = () => { const handleNext = () => { const state = location.state as { mode?: string; postId?: number }; - navigate('/upload', { state: { mode: state?.mode, postId: state?.postId } }); + navigate('/post/upload/content', { state: { mode: state?.mode, postId: state?.postId } }); }; // 파일 선택기에서 사진 업로드 diff --git a/src/pages/PostImageSelect/styles.tsx b/src/pages/Post/PostImageSelect/styles.tsx similarity index 95% rename from src/pages/PostImageSelect/styles.tsx rename to src/pages/Post/PostImageSelect/styles.tsx index 2fbe61c2..98cab6b6 100644 --- a/src/pages/PostImageSelect/styles.tsx +++ b/src/pages/Post/PostImageSelect/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; export const UploadContainer = styled.div` flex-grow: 1; diff --git a/src/pages/PostInstaConnect/dto.ts b/src/pages/Post/PostInstaConnect/dto.ts similarity index 58% rename from src/pages/PostInstaConnect/dto.ts rename to src/pages/Post/PostInstaConnect/dto.ts index 2a10b46e..1db54e31 100644 --- a/src/pages/PostInstaConnect/dto.ts +++ b/src/pages/Post/PostInstaConnect/dto.ts @@ -1,5 +1,3 @@ -export interface InstaConnectModalProps {} - export interface Post { imgs: string[]; caption: string; diff --git a/src/pages/PostInstaConnect/index.tsx b/src/pages/Post/PostInstaConnect/index.tsx similarity index 79% rename from src/pages/PostInstaConnect/index.tsx rename to src/pages/Post/PostInstaConnect/index.tsx index 27c09fc4..f7eb9450 100644 --- a/src/pages/PostInstaConnect/index.tsx +++ b/src/pages/Post/PostInstaConnect/index.tsx @@ -1,20 +1,20 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; -import theme from '../../styles/theme'; -import { Content, StyledInput } from './styles'; +import theme from '@styles/theme'; + +import X from '@assets/default/x.svg'; -import { OODDFrame } from '../../components/Frame/Frame'; -import { StyledText } from '../../components/Text/StyledText'; -import TopBar from '../../components/TopBar'; -import BottomButton from '../../components/BottomButton'; -import Modal from '../../components/Modal'; -import { ModalProps } from '../../components/Modal/dto'; +import BottomButton from '@components/BottomButton'; +import { OODDFrame } from '@components/Frame/Frame'; +import Modal from '@components/Modal'; +import { StyledText } from '@components/Text/StyledText'; +import TopBar from '@components/TopBar'; -import X from '../../assets/default/x.svg'; +import { ModalProps } from '@components/Modal/dto'; -import { InstaConnectModalProps } from './dto'; +import { Content, StyledInput } from './styles'; -const PostInstaConnect: React.FC = () => { +const PostInstaConnect: React.FC = () => { const [instagramID, setInstagramID] = useState(''); const [isConnectFailModalOpen, setIsConnectFailModalOpen] = useState(false); const [isLoading, setIsLoading] = useState(false); diff --git a/src/pages/PostInstaConnect/styles.tsx b/src/pages/Post/PostInstaConnect/styles.tsx similarity index 96% rename from src/pages/PostInstaConnect/styles.tsx rename to src/pages/Post/PostInstaConnect/styles.tsx index 5d2cc0d4..f4c9c7dc 100644 --- a/src/pages/PostInstaConnect/styles.tsx +++ b/src/pages/Post/PostInstaConnect/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; export const UploadContainer = styled.div` flex-grow: 1; diff --git a/src/pages/Post/PostInstaFeedSelect/dto.ts b/src/pages/Post/PostInstaFeedSelect/dto.ts new file mode 100644 index 00000000..aeec4b58 --- /dev/null +++ b/src/pages/Post/PostInstaFeedSelect/dto.ts @@ -0,0 +1,3 @@ +export interface Post { + imgs: string[]; +} diff --git a/src/pages/PostInstaFeedSelect/index.tsx b/src/pages/Post/PostInstaFeedSelect/index.tsx similarity index 83% rename from src/pages/PostInstaFeedSelect/index.tsx rename to src/pages/Post/PostInstaFeedSelect/index.tsx index 45b08bf2..96d3d976 100644 --- a/src/pages/PostInstaFeedSelect/index.tsx +++ b/src/pages/Post/PostInstaFeedSelect/index.tsx @@ -1,22 +1,25 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; + import axios from 'axios'; import { useRecoilState } from 'recoil'; -import { postImagesAtom } from '../../recoil/PostUpload/PostUploadAtom'; -import { Content, PostContainer, ImageWrapper } from './styles'; +import { postImagesAtom } from '@recoil/PostUpload/PostUploadAtom'; +import { getCurrentUserId } from '@utils/getCurrentUserId'; -import { OODDFrame } from '../../components/Frame/Frame'; -import TopBar from '../../components/TopBar'; -import Modal from '../../components/Modal'; -import { ModalProps } from '../../components/Modal/dto'; +import X from '@assets/default/x.svg'; -import X from '../../assets/default/x.svg'; +import { OODDFrame } from '@components/Frame/Frame'; +import Modal from '@components/Modal'; +import TopBar from '@components/TopBar'; -import { InstaFeedSelectModalProps, Post } from './dto'; -import { getCurrentUserId } from '@utils/getCurrentUserId'; +import type { ModalProps } from '@components/Modal/dto'; + +import type { Post } from './dto'; + +import { Content, PostContainer, ImageWrapper } from './styles'; -const PostInstaFeedSelect: React.FC = () => { +const PostInstaFeedSelect: React.FC = () => { const [isSuccessModalOpen, setIsSuccessModalOpen] = useState(true); const [, setIsLoading] = useState(false); const [isFailModalOpen, setIsFailModalOpen] = useState(false); @@ -67,7 +70,7 @@ const PostInstaFeedSelect: React.FC = () => { const handlePostSelect = (post: Post) => { const newImages = post.imgs.map((url, index) => ({ url, orderNum: index })); setImages(newImages); // 선택한 이미지 Recoil 상태로 설정 - navigate('/upload'); // 다음 페이지로 이동 + navigate('/post/upload/content'); // 다음 페이지로 이동 }; // 페이지 종료 함수 diff --git a/src/pages/PostInstaFeedSelect/styles.tsx b/src/pages/Post/PostInstaFeedSelect/styles.tsx similarity index 96% rename from src/pages/PostInstaFeedSelect/styles.tsx rename to src/pages/Post/PostInstaFeedSelect/styles.tsx index 295bd824..226ca78b 100644 --- a/src/pages/PostInstaFeedSelect/styles.tsx +++ b/src/pages/Post/PostInstaFeedSelect/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; export const UploadContainer = styled.div` flex-grow: 1; diff --git a/src/pages/PostUpload/ImageSwiper/index.tsx b/src/pages/Post/PostUpload/ImageSwiper/index.tsx similarity index 93% rename from src/pages/PostUpload/ImageSwiper/index.tsx rename to src/pages/Post/PostUpload/ImageSwiper/index.tsx index 81fe5322..50677c5d 100644 --- a/src/pages/PostUpload/ImageSwiper/index.tsx +++ b/src/pages/Post/PostUpload/ImageSwiper/index.tsx @@ -1,15 +1,16 @@ -import React, { useRef } from 'react'; -import { Swiper, SwiperRef, SwiperSlide } from 'swiper/react'; +import { useRef } from 'react'; + import { Navigation, Pagination } from 'swiper/modules'; +import { Swiper, SwiperRef, SwiperSlide } from 'swiper/react'; import 'swiper/css'; import 'swiper/css/navigation'; import 'swiper/css/pagination'; -import { SwiperContainer, ImageWrapper, StyledNavigation, StyledPagination } from './styles'; +import PhotoWhite from '@assets/default/photo-white.svg'; -import PhotoWhite from '../../../assets/default/photo-white.svg'; +import type { ImageSwiperProps } from '../dto'; -import { ImageSwiperProps } from '../dto'; +import { SwiperContainer, ImageWrapper, StyledNavigation, StyledPagination } from './styles'; const ImageSwiper: React.FC = ({ images }) => { const swiperRef = useRef(null); diff --git a/src/pages/PostUpload/ImageSwiper/styles.tsx b/src/pages/Post/PostUpload/ImageSwiper/styles.tsx similarity index 97% rename from src/pages/PostUpload/ImageSwiper/styles.tsx rename to src/pages/Post/PostUpload/ImageSwiper/styles.tsx index be380107..0f216167 100644 --- a/src/pages/PostUpload/ImageSwiper/styles.tsx +++ b/src/pages/Post/PostUpload/ImageSwiper/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; export const SwiperContainer = styled.div` display: flex; diff --git a/src/pages/PostUpload/SearchBottomSheetContent/index.tsx b/src/pages/Post/PostUpload/SearchBottomSheetContent/index.tsx similarity index 96% rename from src/pages/PostUpload/SearchBottomSheetContent/index.tsx rename to src/pages/Post/PostUpload/SearchBottomSheetContent/index.tsx index e1e3b3d6..66cb32da 100644 --- a/src/pages/PostUpload/SearchBottomSheetContent/index.tsx +++ b/src/pages/Post/PostUpload/SearchBottomSheetContent/index.tsx @@ -1,12 +1,14 @@ -import React, { useState, useEffect, useRef } from 'react'; +import { useState, useEffect, useRef } from 'react'; + import axios from 'axios'; -import { Content, Input, SearchResultList, SearchResultItem, Loader } from './styles'; -import theme from '../../../styles/theme'; +import theme from '@styles/theme'; -import { StyledText } from '../../../components/Text/StyledText'; +import { StyledText } from '@components/Text/StyledText'; -import { SearchBottomSheetProps } from '../dto'; +import type { SearchBottomSheetProps } from '../dto'; + +import { Content, Input, SearchResultList, SearchResultItem, Loader } from './styles'; const SearchBottomSheetContent: React.FC = ({ onClose, onSelectClothingInfo }) => { const [searchQuery, setSearchQuery] = useState(''); diff --git a/src/pages/PostUpload/SearchBottomSheetContent/styles.tsx b/src/pages/Post/PostUpload/SearchBottomSheetContent/styles.tsx similarity index 98% rename from src/pages/PostUpload/SearchBottomSheetContent/styles.tsx rename to src/pages/Post/PostUpload/SearchBottomSheetContent/styles.tsx index b14f9946..fdee8c66 100644 --- a/src/pages/PostUpload/SearchBottomSheetContent/styles.tsx +++ b/src/pages/Post/PostUpload/SearchBottomSheetContent/styles.tsx @@ -1,5 +1,5 @@ // src/pages/ProfilePage/BottomSheet/styles.tsx -import styled from 'styled-components'; +import { styled } from 'styled-components'; export const Content = styled.div` height: calc(100vh - 44px); diff --git a/src/pages/PostUpload/ToggleSwitch/index.tsx b/src/pages/Post/PostUpload/ToggleSwitch/index.tsx similarity index 78% rename from src/pages/PostUpload/ToggleSwitch/index.tsx rename to src/pages/Post/PostUpload/ToggleSwitch/index.tsx index aaf748bb..6b1d99c1 100644 --- a/src/pages/PostUpload/ToggleSwitch/index.tsx +++ b/src/pages/Post/PostUpload/ToggleSwitch/index.tsx @@ -1,6 +1,6 @@ -import React from 'react'; +import type { ToggleSwitchProps } from '../dto'; + import { HiddenCheckbox } from './styles'; -import { ToggleSwitchProps } from '../dto'; const ToggleSwitch: React.FC = ({ checked, onChange, disabled }) => { return ; diff --git a/src/pages/PostUpload/ToggleSwitch/styles.tsx b/src/pages/Post/PostUpload/ToggleSwitch/styles.tsx similarity index 94% rename from src/pages/PostUpload/ToggleSwitch/styles.tsx rename to src/pages/Post/PostUpload/ToggleSwitch/styles.tsx index 294066bd..1672e375 100644 --- a/src/pages/PostUpload/ToggleSwitch/styles.tsx +++ b/src/pages/Post/PostUpload/ToggleSwitch/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; export const HiddenCheckbox = styled.input.attrs({ type: 'checkbox' })` appearance: none; diff --git a/src/pages/PostUpload/dto.ts b/src/pages/Post/PostUpload/dto.ts similarity index 76% rename from src/pages/PostUpload/dto.ts rename to src/pages/Post/PostUpload/dto.ts index 743ad97f..6e8025bc 100644 --- a/src/pages/PostUpload/dto.ts +++ b/src/pages/Post/PostUpload/dto.ts @@ -1,5 +1,5 @@ -import { ClothingInfo } from '../../components/ClothingInfoItem/dto'; -import { PostImage } from '../../apis/post/dto'; +import type { PostImage } from '@apis/post/dto'; +import type { ClothingInfo } from '@components/ClothingInfoItem/dto'; export interface PostUploadModalProps { postId?: number | null; diff --git a/src/pages/PostUpload/index.tsx b/src/pages/Post/PostUpload/index.tsx similarity index 89% rename from src/pages/PostUpload/index.tsx rename to src/pages/Post/PostUpload/index.tsx index 136f494f..988b0289 100644 --- a/src/pages/PostUpload/index.tsx +++ b/src/pages/Post/PostUpload/index.tsx @@ -1,8 +1,14 @@ //PostUploadModal/index.tsx -import React, { useState, useEffect } from 'react'; +import { useState, useEffect } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; +import { ref, uploadBytes, getDownloadURL } from 'firebase/storage'; import { useRecoilState } from 'recoil'; + +import { getPostDetailApi, createPostApi, modifyPostApi } from '@apis/post'; +import { PostBase } from '@apis/post/dto'; +import { handleError } from '@apis/util/handleError'; +import { storage } from '@config/firebaseConfig'; import { postImagesAtom, postContentAtom, @@ -10,7 +16,32 @@ import { postStyletagAtom, postIsRepresentativeAtom, modeAtom, -} from '../../recoil/PostUpload/PostUploadAtom'; +} from '@recoil/PostUpload/PostUploadAtom'; +import { getCurrentUserId } from '@utils/getCurrentUserId'; + +import Left from '@assets/arrow/left.svg'; +import Right from '@assets/arrow/right.svg'; +import Up from '@assets/arrow/up.svg'; +import ClothingTag from '@assets/default/clothes-tag.svg'; +import Pin from '@assets/default/pin.svg'; +import StyleTag from '@assets/default/style-tag.svg'; + +import BottomButton from '@components/BottomButton'; +import BottomSheet from '@components/BottomSheet'; +import ClothingInfoItem from '@components/ClothingInfoItem'; +import { OODDFrame } from '@components/Frame/Frame'; +import Modal from '@components/Modal'; +import { StyledText } from '@components/Text/StyledText'; +import TopBar from '@components/TopBar'; + +import type { BottomSheetProps } from '@components/BottomSheet/dto'; +import type { ClothingInfo } from '@components/ClothingInfoItem/dto'; +import type { ModalProps } from '@components/Modal/dto'; + +import type { PostUploadModalProps } from './dto'; + +import ImageSwiper from './ImageSwiper/index'; +import SearchBottomSheetContent from './SearchBottomSheetContent/index'; import { UploadContainer, @@ -22,36 +53,7 @@ import { StyletagItem, PinnedPostToggleContainer, } from './styles'; - -import { OODDFrame } from '../../components/Frame/Frame'; -import { StyledText } from '../../components/Text/StyledText'; -import TopBar from '../../components/TopBar'; -import BottomSheet from '../../components/BottomSheet'; -import { BottomSheetProps } from '../../components/BottomSheet/dto'; -import BottomButton from '../../components/BottomButton'; -import ClothingInfoItem from '../../components/ClothingInfoItem'; -import ImageSwiper from './ImageSwiper'; -import SearchBottomSheetContent from './SearchBottomSheetContent'; import ToggleSwitch from './ToggleSwitch'; -import Modal from '../../components/Modal'; - -import Left from '../../assets/arrow/left.svg'; -import Right from '../../assets/arrow/right.svg'; -import Up from '../../assets/arrow/up.svg'; -import ClothingTag from '../../assets/default/clothes-tag.svg'; -import StyleTag from '../../assets/default/style-tag.svg'; -import Pin from '../../assets/default/pin.svg'; - -import { ClothingInfo } from '../../components/ClothingInfoItem/dto'; -import { ModalProps } from '../../components/Modal/dto'; -import { PostUploadModalProps } from './dto'; -import { PostBase } from '../../apis/post/dto'; - -import { ref, uploadBytes, getDownloadURL } from 'firebase/storage'; -import { storage } from '../../config/firebaseConfig'; -import { getPostDetailApi, createPostApi, modifyPostApi } from '../../apis/post'; -import { handleError } from '../../apis/util/handleError'; -import { getCurrentUserId } from '@utils/getCurrentUserId'; const PostUpload: React.FC = () => { const [selectedImages, setSelectedImages] = useRecoilState(postImagesAtom); @@ -102,7 +104,7 @@ const PostUpload: React.FC = () => { if (mode === 'edit') { setMode('edit2'); } - navigate('/image-select', { state: { mode: mode, postId: state.postId } }); + navigate('/post/upload/photo/select', { state: { mode: mode, postId: state.postId } }); }; const getPost = async (postId: number) => { diff --git a/src/pages/PostUpload/styles.tsx b/src/pages/Post/PostUpload/styles.tsx similarity index 98% rename from src/pages/PostUpload/styles.tsx rename to src/pages/Post/PostUpload/styles.tsx index 74292ba7..bd8ef4fe 100644 --- a/src/pages/PostUpload/styles.tsx +++ b/src/pages/Post/PostUpload/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; export const UploadContainer = styled.div` flex-grow: 1; diff --git a/src/pages/Post/index.tsx b/src/pages/Post/index.tsx index e96ada8b..b3b8b0d7 100644 --- a/src/pages/Post/index.tsx +++ b/src/pages/Post/index.tsx @@ -1,27 +1,27 @@ -import React, { useState, useEffect } from 'react'; +import { useState, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import { useRecoilValue, useRecoilState } from 'recoil'; -import { postIdAtom, userAtom } from '@recoil/Post/PostAtom.ts'; -import { isPostRepresentativeAtom } from '@recoil/Post/PostAtom'; -import OptionsBottomSheet from '@components/BottomSheet/OptionsBottomSheet'; +import { modifyPostRepresentativeStatusApi, deletePostApi } from '@apis/post'; +import { isPostRepresentativeAtom, postIdAtom, userAtom } from '@recoil/Post/PostAtom'; +import { getCurrentUserId } from '@utils/getCurrentUserId'; + +import Delete from '@assets/default/delete.svg'; +import Edit from '@assets/default/edit.svg'; +import Pin from '@assets/default/pin.svg'; + import BottomSheet from '@components/BottomSheet'; -import BottomSheetMenu from '@components/BottomSheetMenu'; +import BottomSheetMenu from '@components/BottomSheet/BottomSheetMenu'; +import OptionsBottomSheet from '@components/BottomSheet/OptionsBottomSheet'; import Modal from '@components/Modal'; -import PostBase from './PostBase/index'; -import type { OptionsBottomSheetProps } from '@components/BottomSheet/OptionsBottomSheet/dto.ts'; +import type { BottomSheetMenuProps } from '@components/BottomSheet/BottomSheetMenu/dto'; import type { BottomSheetProps } from '@components/BottomSheet/dto'; -import type { BottomSheetMenuProps } from '@components/BottomSheetMenu/dto'; +import type { OptionsBottomSheetProps } from '@components/BottomSheet/OptionsBottomSheet/dto'; import type { ModalProps } from '@components/Modal/dto'; -import Edit from '@assets/default/edit.svg'; -import Pin from '@assets/default/pin.svg'; -import Delete from '@assets/default/delete.svg'; - -import { modifyPostRepresentativeStatusApi, deletePostApi } from '@apis/post'; -import { getCurrentUserId } from '@utils/getCurrentUserId'; +import PostBase from './PostBase/index'; const Post: React.FC = () => { const user = useRecoilValue(userAtom); @@ -41,8 +41,10 @@ const Post: React.FC = () => { const navigate = useNavigate(); const handleMenuOpen = () => { - { - isMyPost ? setIsMyPostMenuBottomSheetOpen(true) : setIsOptionsBottomSheetOpen(true); + if (isMyPost) { + setIsMyPostMenuBottomSheetOpen(true); + } else { + setIsOptionsBottomSheetOpen(true); } }; @@ -110,7 +112,7 @@ const Post: React.FC = () => { text: 'OOTD 수정하기', action: () => { setIsMyPostMenuBottomSheetOpen(false); - navigate('/upload', { state: { mode: 'edit', postId: postId } }); + navigate('/post/upload/content', { state: { mode: 'edit', postId: postId } }); }, icon: Edit, }, diff --git a/src/pages/Post/styles.tsx b/src/pages/Post/styles.tsx index e7119c4a..437fc956 100644 --- a/src/pages/Post/styles.tsx +++ b/src/pages/Post/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; export const InputLayout = styled.div` display: flex; diff --git a/src/pages/PostInstaFeedSelect/dto.ts b/src/pages/PostInstaFeedSelect/dto.ts deleted file mode 100644 index 82dee836..00000000 --- a/src/pages/PostInstaFeedSelect/dto.ts +++ /dev/null @@ -1,5 +0,0 @@ -export interface InstaFeedSelectModalProps {} - -export interface Post { - imgs: string[]; -} diff --git a/src/pages/Profile/ButtonSecondary/index.tsx b/src/pages/Profile/ButtonSecondary/index.tsx index 93a3a04c..72539c8a 100644 --- a/src/pages/Profile/ButtonSecondary/index.tsx +++ b/src/pages/Profile/ButtonSecondary/index.tsx @@ -1,9 +1,11 @@ -import React from 'react'; import { useNavigate } from 'react-router-dom'; -import { Button } from './styles'; -import { StyledText } from '@components/Text/StyledText'; + import theme from '@styles/theme'; +import { StyledText } from '@components/Text/StyledText'; + +import { Button } from './styles'; + const ButtonSecondary: React.FC = () => { const navigate = useNavigate(); diff --git a/src/pages/Profile/ButtonSecondary/styles.tsx b/src/pages/Profile/ButtonSecondary/styles.tsx index 31aed05e..af4a1820 100644 --- a/src/pages/Profile/ButtonSecondary/styles.tsx +++ b/src/pages/Profile/ButtonSecondary/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; export const Button = styled.button` width: 100%; diff --git a/src/pages/Profile/NavbarProfile/index.tsx b/src/pages/Profile/NavbarProfile/index.tsx index 874e3780..811eca61 100644 --- a/src/pages/Profile/NavbarProfile/index.tsx +++ b/src/pages/Profile/NavbarProfile/index.tsx @@ -1,18 +1,21 @@ -import React from 'react'; -import { Nav, IconContainer } from './styles'; import { Link } from 'react-router-dom'; + +import theme from '@styles/theme'; + import settingIcon from '@assets/default/setting.svg'; + import { StyledText } from '@components/Text/StyledText'; -import theme from '@styles/theme'; + +import { Nav, IconContainer } from './styles'; const NavbarProfile: React.FC = () => { return (