diff --git a/src/apis/chatting/dto.ts b/src/apis/chatting/dto.ts index ee2dc1e8..2d317a07 100644 --- a/src/apis/chatting/dto.ts +++ b/src/apis/chatting/dto.ts @@ -27,7 +27,7 @@ export interface chatRoomMessagesData { fromUser: FromUserDto; toUser: ToUserDto; createdAt: string; - toUserReadAt: any; + toUserReadAt: Date; } export interface FromUserDto { diff --git a/src/apis/post-comment/dto.ts b/src/apis/post-comment/dto.ts index ce25c48d..d0a9fe02 100644 --- a/src/apis/post-comment/dto.ts +++ b/src/apis/post-comment/dto.ts @@ -17,7 +17,7 @@ interface Content { content: string; } -interface CreateCommentData extends Content {} +type CreateCommentData = Content; export interface Comment { id: number; diff --git a/src/apis/post-comment/index.ts b/src/apis/post-comment/index.ts index 43031182..b6471270 100644 --- a/src/apis/post-comment/index.ts +++ b/src/apis/post-comment/index.ts @@ -1,8 +1,8 @@ -import { EmptySuccessResponse } from '../core/dto'; +import { newRequest } from '@apis/core'; -import { CreateCommentRequest, CreateCommentResponse, GetCommentListResponse } from './dto'; +import type { EmptySuccessResponse } from '@apis/core/dto'; -import { newRequest } from '../core'; +import type { CreateCommentRequest, CreateCommentResponse, GetCommentListResponse } from './dto'; // 게시글 댓글 생성 API export const createCommentApi = (postId: number, data: CreateCommentRequest) => diff --git a/src/apis/post-like/dto.ts b/src/apis/post-like/dto.ts index 299bf209..c1f8f05e 100644 --- a/src/apis/post-like/dto.ts +++ b/src/apis/post-like/dto.ts @@ -1,5 +1,5 @@ -import { BaseSuccessResponse } from '../core/dto'; -import { PaginationMeta } from '../util/dto'; +import type { BaseSuccessResponse } from '@apis/core/dto'; +import type { PaginationMeta } from '@apis/util/dto'; // 좋아요 누르기/취소 export type TogglePostLikeStatusResponse = BaseSuccessResponse; diff --git a/src/apis/post-like/index.ts b/src/apis/post-like/index.ts index a5f3c4cd..aab0eec2 100644 --- a/src/apis/post-like/index.ts +++ b/src/apis/post-like/index.ts @@ -1,6 +1,6 @@ -import { TogglePostLikeStatusResponse, GetPostLikeListResponse } from './dto'; +import { newRequest } from '@apis/core'; -import { newRequest } from '../core'; +import type { TogglePostLikeStatusResponse, GetPostLikeListResponse } from './dto'; // 게시글 좋아요 누르기/취소 export const togglePostLikeStatusApi = (postId: number) => diff --git a/src/apis/post-report/dto.ts b/src/apis/post-report/dto.ts index fc7c9ddf..0d5491cc 100644 --- a/src/apis/post-report/dto.ts +++ b/src/apis/post-report/dto.ts @@ -1,4 +1,4 @@ -import { BaseSuccessResponse } from '../core/dto'; +import type { BaseSuccessResponse } from '@apis/core/dto'; interface BaseReport { id: number; // 신고 ID diff --git a/src/apis/post-report/index.ts b/src/apis/post-report/index.ts index 83c361c9..27bb70a1 100644 --- a/src/apis/post-report/index.ts +++ b/src/apis/post-report/index.ts @@ -1,6 +1,6 @@ -import { SendPostReportRequest, SendPostReportResponse } from './dto'; +import { newRequest } from '@apis/core'; -import { newRequest } from '../core'; +import type { SendPostReportRequest, SendPostReportResponse } from './dto'; // 게시글 신고 API export const sendPostReportApi = (data: SendPostReportRequest) => diff --git a/src/apis/post/dto.ts b/src/apis/post/dto.ts index d3d86a9f..f1b98627 100644 --- a/src/apis/post/dto.ts +++ b/src/apis/post/dto.ts @@ -1,5 +1,5 @@ -import { BaseSuccessResponse } from '../core/dto'; -import { PaginationMeta } from '../util/dto'; +import type { BaseSuccessResponse } from '@apis/core/dto'; +import type { PaginationMeta } from '@apis/util/dto'; // 게시글 생성 //request @@ -28,7 +28,7 @@ export interface PostBase { postClothings?: PostClothing[] | null; isRepresentative: boolean; } -export interface CreatePostData extends PostBase {} +export type CreatePostData = PostBase; export interface PostSummary { id: number; content: string; diff --git a/src/apis/post/index.ts b/src/apis/post/index.ts index a6a6b0d9..18614464 100644 --- a/src/apis/post/index.ts +++ b/src/apis/post/index.ts @@ -1,6 +1,8 @@ -import { EmptySuccessResponse } from '../core/dto'; +import { newRequest } from '@apis/core'; -import { +import type { EmptySuccessResponse } from '@apis/core/dto'; + +import type { CreatePostRequest, CreatePostResponse, GetPostListResponse, @@ -10,8 +12,6 @@ import { ModifyPostResponse, } from './dto'; -import { newRequest } from '../core'; - // 게시글 생성 export const createPostApi = (data: CreatePostRequest) => newRequest.post('/post', data); diff --git a/src/components/BottomButton/index.tsx b/src/components/BottomButton/index.tsx index 393e50b8..5a52156a 100644 --- a/src/components/BottomButton/index.tsx +++ b/src/components/BottomButton/index.tsx @@ -8,7 +8,7 @@ const BottomButton: React.FC = ({ content, onClick, disabled return ( ); diff --git a/src/components/ClothingInfoItem/index.tsx b/src/components/ClothingInfoItem/index.tsx index 888b03f7..1ab6de3f 100644 --- a/src/components/ClothingInfoItem/index.tsx +++ b/src/components/ClothingInfoItem/index.tsx @@ -21,10 +21,10 @@ const ClothingInfoItem: React.FC = ({ clothingObj, onDele ClothingImg
- + {clothingObj.brandName} - + {clothingObj.modelName}
diff --git a/src/components/ClothingInfoItem/styles.tsx b/src/components/ClothingInfoItem/styles.tsx index 5eb00bfb..8a556f89 100644 --- a/src/components/ClothingInfoItem/styles.tsx +++ b/src/components/ClothingInfoItem/styles.tsx @@ -39,7 +39,7 @@ export const ClothingInfoLeft = styled.div` .model { margin-right: auto; - color: ${({ theme }) => theme.colors.black}; + color: ${({ theme }) => theme.colors.text.primary}; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; diff --git a/src/components/ConfirmationModal/index.tsx b/src/components/ConfirmationModal/index.tsx index 697982ec..44d13f56 100644 --- a/src/components/ConfirmationModal/index.tsx +++ b/src/components/ConfirmationModal/index.tsx @@ -24,7 +24,7 @@ const ConfirmationModal: React.FC = ({ > - + {content} @@ -36,14 +36,14 @@ const ConfirmationModal: React.FC = ({ onCloseModal(); }} > - + 취소 )} diff --git a/src/components/Text/dto.ts b/src/components/Text/dto.ts index 59aaadad..07e5cee8 100644 --- a/src/components/Text/dto.ts +++ b/src/components/Text/dto.ts @@ -10,7 +10,6 @@ interface FontStylesByPlatform { export interface StyledTextProps { $textTheme: { style: FontStyleKey | FontStylesByPlatform; - lineHeight?: number; }; color?: string; children: unknown; diff --git a/src/components/TopBar/styles.tsx b/src/components/TopBar/styles.tsx index 2ab92929..0c2aefb7 100644 --- a/src/components/TopBar/styles.tsx +++ b/src/components/TopBar/styles.tsx @@ -4,8 +4,7 @@ import theme from '@styles/theme'; import { StyledText } from '@components/Text/StyledText'; -import type { TopBarLayoutProps } from './dto'; -export const TopBarLayout = styled.header` +export const TopBarLayout = styled.header<{ $withBorder: boolean }>` display: flex; position: sticky; top: 0; /* 부모 요소의 상단에 붙도록 설정 */ diff --git a/src/pages/Account/AccountCancel/index.tsx b/src/pages/Account/AccountCancel/index.tsx index 9f9c7456..17e4dd2c 100644 --- a/src/pages/Account/AccountCancel/index.tsx +++ b/src/pages/Account/AccountCancel/index.tsx @@ -2,10 +2,12 @@ import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import theme from '@styles/theme'; -import { getCurrentUserId } from '@utils/getCurrentUserId'; + import { patchUserWithdrawApi } from '@apis/user'; +import { getCurrentUserId } from '@utils/getCurrentUserId'; 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'; @@ -13,119 +15,116 @@ import { StyledText } from '@components/Text/StyledText'; import TopBar from '@components/TopBar/index'; import { - CancelContainer, - SubTitle, - Text, - InfoBox, - InfoItem, - CheckboxWrapper, - CheckboxInput, - Label, - StyledCheckboxText, - StyledDiv, + CancelContainer, + SubTitle, + Text, + InfoBox, + InfoItem, + CheckboxWrapper, + CheckboxInput, + Label, + StyledCheckboxText, } from './styles'; const AccountCancel: React.FC = () => { - const [isChecked, setIsChecked] = useState(false); - const [modalContent, setModalContent] = useState(null); - const [isModalVisible, setIsModalVisible] = useState(false); - const navigate = useNavigate(); - - const handleCheckboxChange = () => { - setIsChecked(!isChecked); - }; - - const handleModalClose = () => { - setIsModalVisible(false); - setModalContent(null); - }; - - const handleDeleteAccount = async () => { - try { - if (!isChecked) { - setModalContent('탈퇴 안내사항에 동의해야 합니다.'); - setIsModalVisible(true); - return; - } - - const currentUserId = getCurrentUserId(); - const token = localStorage.getItem('new_jwt_token'); - - if (!currentUserId || !token) { - setModalContent('사용자 정보를 찾을 수 없습니다.'); - setIsModalVisible(true); - return; - } - - const response = await patchUserWithdrawApi(currentUserId); - - if (response.isSuccess) { - setModalContent('계정이 성공적으로 삭제되었습니다.'); - setIsModalVisible(true); - localStorage.clear(); - - setTimeout(() => { - navigate('/login'); - }, 2000); - } else { - setModalContent(response.code || '알 수 없는 오류가 발생했습니다.'); - setIsModalVisible(true); - } - } catch (error) { - console.error('계정 삭제하는데 오류남:', error); - setModalContent('계정을 삭제하는 동안 오류가 발생했습니다. 다시 시도해 주세요.'); - setIsModalVisible(true); - } - }; - - return ( - - - navigate(-1)} /> - - - OOTD 탈퇴 전 확인하세요! - - - - - {`탈퇴하시면 이용 중인 서비스가 폐쇄되며,\n모든 데이터는 복구할 수 없습니다.`} - - - - - - 지금까지 OODD를 이용해주셔서 감사합니다! - - - - - - - - - - - {isModalVisible && ( - - )} - - ); + const [isChecked, setIsChecked] = useState(false); + const [modalContent, setModalContent] = useState(null); + const [isModalVisible, setIsModalVisible] = useState(false); + const navigate = useNavigate(); + + const handleCheckboxChange = () => { + setIsChecked(!isChecked); + }; + + const handleModalClose = () => { + setIsModalVisible(false); + setModalContent(null); + }; + + const handleDeleteAccount = async () => { + try { + if (!isChecked) { + setModalContent('탈퇴 안내사항에 동의해야 합니다.'); + setIsModalVisible(true); + return; + } + + const currentUserId = getCurrentUserId(); + const token = localStorage.getItem('new_jwt_token'); + + if (!currentUserId || !token) { + setModalContent('사용자 정보를 찾을 수 없습니다.'); + setIsModalVisible(true); + return; + } + + const response = await patchUserWithdrawApi(currentUserId); + + if (response.isSuccess) { + setModalContent('계정이 성공적으로 삭제되었습니다.'); + setIsModalVisible(true); + localStorage.clear(); + + setTimeout(() => { + navigate('/login'); + }, 2000); + } else { + setModalContent(response.code || '알 수 없는 오류가 발생했습니다.'); + setIsModalVisible(true); + } + } catch (error) { + console.error('계정 삭제하는데 오류남:', error); + setModalContent('계정을 삭제하는 동안 오류가 발생했습니다. 다시 시도해 주세요.'); + setIsModalVisible(true); + } + }; + + return ( + + + navigate(-1)} /> + + + OOTD 탈퇴 전 확인하세요! + + + + + {`탈퇴하시면 이용 중인 서비스가 폐쇄되며,\n모든 데이터는 복구할 수 없습니다.`} + + + + + + 지금까지 OODD를 이용해주셔서 감사합니다! + + + + + + + + + {isModalVisible && ( + + )} + + ); }; -export default AccountCancel; \ No newline at end of file +export default AccountCancel; diff --git a/src/pages/Account/AccountCancel/styles.tsx b/src/pages/Account/AccountCancel/styles.tsx index 3f1e21e2..e528432a 100644 --- a/src/pages/Account/AccountCancel/styles.tsx +++ b/src/pages/Account/AccountCancel/styles.tsx @@ -64,17 +64,17 @@ export const CheckboxInput = styled.input` appearance: none; width: 1.25rem; height: 1.25rem; - border: 0.125rem solid ${({ theme }) => theme.colors.gray[200]}; + border: 0.125rem solid ${({ theme }) => theme.colors.border.divider}; border-radius: 0.25rem; position: relative; &:checked { - background-color: ${({ theme }) => theme.colors.background.primaryLight}; + background-color: ${({ theme }) => theme.colors.brand.primaryLight}; border-color: ${({ theme }) => theme.colors.brand.primary}; } &:checked::after { content: '✓'; - color: ${({ theme }) => theme.colors.contrast}; + color: ${({ theme }) => theme.colors.text.contrast}; font-size: 0.875rem; position: absolute; top: 50%; @@ -92,9 +92,3 @@ export const Label = styled.label` export const StyledCheckboxText = styled(StyledText)` color: ${({ theme }) => theme.colors.text.caption}; `; - -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)}; - cursor: ${({ isChecked }) => (isChecked ? 'pointer' : 'not-allowed')}; -`; diff --git a/src/pages/Account/AccountEdit/index.tsx b/src/pages/Account/AccountEdit/index.tsx index c6ee9c74..2be0eded 100644 --- a/src/pages/Account/AccountEdit/index.tsx +++ b/src/pages/Account/AccountEdit/index.tsx @@ -41,7 +41,7 @@ const AccountEdit: React.FC = () => {
- + 로그인 정보 @@ -64,7 +64,7 @@ const AccountEdit: React.FC = () => {
- + 회원 정보 diff --git a/src/pages/Account/AccountEdit/styles.tsx b/src/pages/Account/AccountEdit/styles.tsx index 4fb7366f..65eb681d 100644 --- a/src/pages/Account/AccountEdit/styles.tsx +++ b/src/pages/Account/AccountEdit/styles.tsx @@ -84,7 +84,7 @@ export const Label = styled.div` export const Info = styled.div` font-size: 0.875rem; - color: ${({ theme }) => theme.colors.caption}; + color: ${({ theme }) => theme.colors.text.caption}; margin-left: 0.625rem; flex-grow: 1; text-align: left; diff --git a/src/pages/Account/AccountSetting/index.tsx b/src/pages/Account/AccountSetting/index.tsx index c1bfd315..75f1bcbc 100644 --- a/src/pages/Account/AccountSetting/index.tsx +++ b/src/pages/Account/AccountSetting/index.tsx @@ -2,8 +2,9 @@ import { useState, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import theme from '@styles/theme'; -import { getCurrentUserId } from '@utils/getCurrentUserId'; + import { getUserInfoApi } from '@apis/user'; +import { getCurrentUserId } from '@utils/getCurrentUserId'; import back from '@assets/arrow/left.svg'; import imageBasic from '@assets/default/defaultProfile.svg'; @@ -18,116 +19,108 @@ import TopBar from '@components/TopBar/index'; import type { UserInfoData } from '@apis/user/dto'; -import { - ProfileEditContainer, - ProfilePic, - ProfilePicWrapper, - Label, - Row, - List, - ListItem -} from './styles'; +import { ProfileEditContainer, ProfilePic, ProfilePicWrapper, Label, Row, List, ListItem } from './styles'; const AccountSetting: React.FC = () => { - const navigate = useNavigate(); - const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false); - const [userProfile, setUserProfile] = useState(null); - const [isLoading, setIsLoading] = useState(true); - - useEffect(() => { - const getUserInfo = async () => { - try { - const currentUserId = getCurrentUserId(); - if (!currentUserId) { - console.error('User is not logged in'); - return; - } - - const response = await getUserInfoApi(currentUserId); - setUserProfile(response.data); - } catch (error) { - console.error('Error fetching user info:', error); - } finally { - setIsLoading(false); - } - }; - - getUserInfo(); - }, []); - - const handleConfirmLogout = () => { - localStorage.clear(); - console.log('Logout confirmed'); - setIsLogoutModalOpen(false); - navigate('/login'); - }; - - const handleLogoutClick = () => { - setIsLogoutModalOpen(true); - }; - - const handleCloseModal = () => { - setIsLogoutModalOpen(false); - }; - - const handleDeleteAccountClick = () => { - navigate('/account/cancel'); - }; - - if (isLoading) { - return ; - } - - return ( - - - navigate(-1)} /> - - - 프로필 사진 - - - - - - - - - - - - 로그아웃 아이콘 - - Logout - - - - 회원 탈퇴 아이콘 - - 회원탈퇴 - - - - - {isLogoutModalOpen && ( - - )} - - - ); + const navigate = useNavigate(); + const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false); + const [userProfile, setUserProfile] = useState(null); + const [isLoading, setIsLoading] = useState(true); + + useEffect(() => { + const getUserInfo = async () => { + try { + const currentUserId = getCurrentUserId(); + if (!currentUserId) { + console.error('User is not logged in'); + return; + } + + const response = await getUserInfoApi(currentUserId); + setUserProfile(response.data); + } catch (error) { + console.error('Error fetching user info:', error); + } finally { + setIsLoading(false); + } + }; + + getUserInfo(); + }, []); + + const handleConfirmLogout = () => { + localStorage.clear(); + console.log('Logout confirmed'); + setIsLogoutModalOpen(false); + navigate('/login'); + }; + + const handleLogoutClick = () => { + setIsLogoutModalOpen(true); + }; + + const handleCloseModal = () => { + setIsLogoutModalOpen(false); + }; + + const handleDeleteAccountClick = () => { + navigate('/account/cancel'); + }; + + if (isLoading) { + return ; + } + + return ( + + + navigate(-1)} /> + + + 프로필 사진 + + + + + + + + + + + + 로그아웃 아이콘 + + Logout + + + + 회원 탈퇴 아이콘 + + 회원탈퇴 + + + + + {isLogoutModalOpen && ( + + )} + + + ); }; -export default AccountSetting; \ No newline at end of file +export default AccountSetting; diff --git a/src/pages/Account/Verification/styles.tsx b/src/pages/Account/Verification/styles.tsx index 78d6b9a4..23a57005 100644 --- a/src/pages/Account/Verification/styles.tsx +++ b/src/pages/Account/Verification/styles.tsx @@ -45,7 +45,7 @@ export const Button = styled.button` padding: 1.25rem; margin-top: 300px; font-size: 0.875rem; - color: ${({ theme }) => theme.colors.contrast}; + color: ${({ theme }) => theme.colors.text.contrast}; background-color: ${({ theme, disabled }) => (disabled ? theme.colors.gray[300] : theme.colors.black)}; border: none; border-radius: 0.3125rem; @@ -76,7 +76,7 @@ export const Timer = styled.div` top: 50%; transform: translateY(-50%); font-size: 1rem; - color: ${({ theme }) => theme.colors.red || theme.colors.brand.primary}; + color: ${({ theme }) => theme.colors.brand.primary}; `; export const ResendButton = styled.button` @@ -86,7 +86,7 @@ export const ResendButton = styled.button` transform: translateY(-50%); padding: 0.625rem; font-size: 0.875rem; - color: ${({ theme }) => theme.colors.black}; + color: ${({ theme }) => theme.colors.text.primary}; background: none; border: none; cursor: pointer; diff --git a/src/pages/Chats/ChatRoomItem/index.tsx b/src/pages/Chats/ChatRoomItem/index.tsx index 75cc6afd..6e04a3d5 100644 --- a/src/pages/Chats/ChatRoomItem/index.tsx +++ b/src/pages/Chats/ChatRoomItem/index.tsx @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; -import dayjs from 'dayjs'; +import dayjs, { extend } from 'dayjs'; import relativeTime from 'dayjs/plugin/relativeTime'; import { useRecoilState } from 'recoil'; @@ -17,13 +17,11 @@ 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 }) => { const [timeAgo, setTimeAgo] = useState(null); const [, setOtherUser] = useRecoilState(OtherUserAtom); const nav = useNavigate(); + extend(relativeTime); const handleChatRoomClick = () => { setOtherUser(otherUser); diff --git a/src/pages/Home/OOTD/Feed/index.tsx b/src/pages/Home/OOTD/Feed/index.tsx index 66dc117f..842e6580 100644 --- a/src/pages/Home/OOTD/Feed/index.tsx +++ b/src/pages/Home/OOTD/Feed/index.tsx @@ -1,7 +1,8 @@ import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; -import dayjs from 'dayjs'; +import dayjs, { extend } from 'dayjs'; +import relativeTime from 'dayjs/plugin/relativeTime'; import { Pagination } from 'swiper/modules'; import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; @@ -58,6 +59,7 @@ const Feed: React.FC = ({ feed }) => { const [isStatusModalOpen, setIsStatusModalOpen] = useState(false); const [modalContent, setModalContent] = useState(''); + extend(relativeTime); const nav = useNavigate(); const currentUserId = getCurrentUserId(); const timeAgo = dayjs(feed.createdAt).locale('ko').fromNow(); diff --git a/src/pages/Home/OOTD/index.tsx b/src/pages/Home/OOTD/index.tsx index 46fc288a..edf31e5b 100644 --- a/src/pages/Home/OOTD/index.tsx +++ b/src/pages/Home/OOTD/index.tsx @@ -3,12 +3,8 @@ import { useState, useEffect, useRef } from 'react'; import debounce from 'lodash/debounce'; import { getPostListApi } from '@apis/post'; -import { handleError } from '@apis/util/handleError'; - -import Modal from '@components/Modal'; import type { PostSummary } from '@apis/post/dto'; -import type { ModalProps } from '@components/Modal/dto'; import Feed from './Feed/index'; @@ -17,9 +13,6 @@ import { OOTDContainer, FeedContainer } from './styles'; const OOTD: React.FC = () => { const [feeds, setFeeds] = useState([]); - const [modalContent, setModalContent] = useState('알 수 없는 오류입니다.\n관리자에게 문의해 주세요.'); - const [isStatusModalOpen, setIsStatusModalOpen] = useState(false); - const isFetchingRef = useRef(false); const isReachedEndRef = useRef(false); const feedPageRef = useRef(1); @@ -51,10 +44,6 @@ const OOTD: React.FC = () => { feedPageRef.current += 1; } } - } catch (error) { - const errorMessage = handleError(error); - setModalContent(errorMessage); - setIsStatusModalOpen(true); } finally { isFetchingRef.current = false; console.log(feeds); @@ -109,13 +98,6 @@ const OOTD: React.FC = () => { }; }, []); - const statusModalProps: ModalProps = { - content: modalContent, - onClose: () => { - setIsStatusModalOpen(false); - }, - }; - return ( @@ -127,7 +109,6 @@ const OOTD: React.FC = () => { {/* Intersection Observer가 감지할 마지막 요소 */}
- {isStatusModalOpen && } ); }; diff --git a/src/pages/NotFound/styles.tsx b/src/pages/NotFound/styles.tsx index 915337f2..cb7a5f66 100644 --- a/src/pages/NotFound/styles.tsx +++ b/src/pages/NotFound/styles.tsx @@ -45,6 +45,6 @@ export const StyledButton = styled(StyledText)` &.prev { background-color: ${({ theme }) => theme.colors.brand.primary}; - color: ${({ theme }) => theme.colors.white}; + color: ${({ theme }) => theme.colors.text.contrast}; } `; diff --git a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/index.tsx b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/index.tsx index 300a1e60..ed0a2cda 100644 --- a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/index.tsx +++ b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/index.tsx @@ -25,8 +25,6 @@ import X from '@assets/default/x.svg'; import Loading from '@components/Loading'; import Modal from '@components/Modal'; import { StyledText } from '@components/Text/StyledText'; -import CommentItem from './CommentItem/index'; -import MenuButtonList from './MenuButtonList/index'; import type { Comment, GetCommentListResponse } from '@apis/post-comment/dto'; import type { GetPostLikeListResponse } from '@apis/post-like/dto'; @@ -34,6 +32,9 @@ import type { ModalProps } from '@components/Modal/dto'; import type { LikeCommentBottomSheetProps } from '../dto'; +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 }) => { @@ -68,6 +69,7 @@ const LikeCommentBottomSheetContent: React.FC = ({ const { postId } = useParams<{ postId: string }>(); const nav = useNavigate(); + const currentUserId = getCurrentUserId(); // 댓글 메뉴 클릭한 경우 const handleMenuOpen = (comment: Comment, event: React.MouseEvent) => { @@ -79,16 +81,7 @@ const LikeCommentBottomSheetContent: React.FC = ({ // 유저 클릭한 경우 const handleUserClick = (userId: number) => { - // 로컬 스토리지에서 사용자 ID 가져오기 - const myUserId = getCurrentUserId(); // 로컬 스토리지에 저장된 사용자 ID를 가져옴 - - if (String(myUserId) === String(userId)) { - // 나인 경우 - nav(`/profile/${userId}`); - } else { - // 다른 유저인 경우 - nav(`/users/${userId}`); - } + nav(`/profile/${userId}`); }; // 댓글 작성 Input @@ -189,10 +182,8 @@ const LikeCommentBottomSheetContent: React.FC = ({ // 유저 차단 api const postUserBlock = async () => { - const storedUserId = getCurrentUserId(); - // 사용자 ID 또는 선택된 댓글이 없으면 함수 종료 - if (!storedUserId || !selectedComment) { + if (!currentUserId || !selectedComment) { setModalContent('유저 정보를 찾을 수 없습니다.'); setIsStatusModalOpen(true); return; @@ -200,7 +191,7 @@ const LikeCommentBottomSheetContent: React.FC = ({ try { const blockRequest: PostUserBlockRequest = { - requesterId: Number(storedUserId), + requesterId: currentUserId, targetId: selectedComment.user.id, action: 'block', }; diff --git a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/styles.tsx b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/styles.tsx index c61584f1..21da8d11 100644 --- a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/styles.tsx +++ b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/styles.tsx @@ -114,7 +114,7 @@ export const InputLayout = styled.div` width: 50px; height: 50px; border-radius: 8px; - color: ${({ theme }) => theme.colors.white}; + color: ${({ theme }) => theme.colors.text.contrast}; border: none; font-size: 0.875rem; } diff --git a/src/pages/Post/PostBase/index.tsx b/src/pages/Post/PostBase/index.tsx index b0c904bc..990daa75 100644 --- a/src/pages/Post/PostBase/index.tsx +++ b/src/pages/Post/PostBase/index.tsx @@ -10,13 +10,13 @@ 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 Like from '@components/Icons/Like'; import Message from '@assets/default/message.svg'; import More from '@assets/default/more.svg'; +import Like from '@components/Icons/Like'; + import BottomSheet from '@components/BottomSheet'; import ClothingInfoItem from '@components/ClothingInfoItem'; import { OODDFrame } from '@components/Frame/Frame'; @@ -62,7 +62,7 @@ const PostBase: React.FC = ({ onClickMenu }) => { const [activeTab, setActiveTab] = useState<'likes' | 'comments'>('likes'); // activeTab state const { postId } = useParams<{ postId: string }>(); - const userId = getCurrentUserId(); + const contentRef = useRef(null); const nav = useNavigate(); @@ -72,17 +72,9 @@ const PostBase: React.FC = ({ onClickMenu }) => { }; const handleUserClick = () => { - if (post?.isPostWriter) { - // 내 게시물인 경우 - nav(`/profile/${userId}`); - } else { - // 다른 유저의 게시물인 경우 - nav(`/users/${post?.user.id}`); - } + nav(`/profile/${post?.user.id}`); }; - const contentRef = useRef(null); - const toggleTextDisplay = () => { setShowFullText((prev) => !prev); }; diff --git a/src/pages/Post/PostBase/styles.tsx b/src/pages/Post/PostBase/styles.tsx index a0f40f83..8ec77731 100644 --- a/src/pages/Post/PostBase/styles.tsx +++ b/src/pages/Post/PostBase/styles.tsx @@ -88,7 +88,9 @@ export const UserProfile = styled(LoadingSkeleton)` } `; -export const UserName = styled(StyledText)``; +export const UserName = styled(StyledText)` + cursor: pointer; +`; export const MenuBtn = styled.button` width: 18px; diff --git a/src/pages/Post/PostImageSelect/index.tsx b/src/pages/Post/PostImageSelect/index.tsx index 25d54552..c2f3ec09 100644 --- a/src/pages/Post/PostImageSelect/index.tsx +++ b/src/pages/Post/PostImageSelect/index.tsx @@ -15,6 +15,7 @@ import { getCurrentUserId } from '@utils/getCurrentUserId'; import Left from '@assets/arrow/left.svg'; import X from '@assets/default/x.svg'; + import Photo from '@components/Icons/Photo'; import BottomButton from '@components/BottomButton'; @@ -23,6 +24,7 @@ import { StyledText } from '@components/Text/StyledText'; import TopBar from '@components/TopBar'; import ImageSwiper from './ImageSwiper/index'; + import { UploadContainer, ImageDragDropContainer, Content } from './styles'; const PostImageSelect: React.FC = () => { @@ -35,10 +37,10 @@ const PostImageSelect: React.FC = () => { const fileInputRef = useRef(null); const location = useLocation(); const navigate = useNavigate(); - const userId = getCurrentUserId(); + const currentUserId = getCurrentUserId(); const handleClose = () => { - navigate(`/profile/${userId}`); + navigate(`/profile/${currentUserId}`); }; const handlePrev = () => { @@ -153,9 +155,7 @@ const PostImageSelect: React.FC = () => { onDragLeave={handleDragLeave} onDrop={handleDrop} > - - 사진을 여기에 끌어다 놓으세요 - + 사진을 여기에 끌어다 놓으세요 diff --git a/src/pages/Post/PostInstaConnect/index.tsx b/src/pages/Post/PostInstaConnect/index.tsx index 7a535d68..a26aa469 100644 --- a/src/pages/Post/PostInstaConnect/index.tsx +++ b/src/pages/Post/PostInstaConnect/index.tsx @@ -57,26 +57,18 @@ const PostInstaConnect: React.FC = () => { {isLoading ? ( - - {instagramID} 계정에 연동하고 있어요 - + {instagramID} 계정에 연동하고 있어요 ) : ( <> - 인스타 계정 연동을 위해 - - 인스타그램 ID를 작성해주세요 - + 인스타 계정 연동을 위해 + 인스타그램 ID를 작성해주세요 setInstagramID(e.target.value)} placeholder="인스타그램 ID" /> - + {!instagramID ? '탭해서 ID를 작성하세요' : ' .'} diff --git a/src/pages/Post/PostInstaFeedSelect/index.tsx b/src/pages/Post/PostInstaFeedSelect/index.tsx index 96d3d976..6d358c37 100644 --- a/src/pages/Post/PostInstaFeedSelect/index.tsx +++ b/src/pages/Post/PostInstaFeedSelect/index.tsx @@ -26,7 +26,7 @@ const PostInstaFeedSelect: React.FC = () => { const [posts, setPosts] = useState([]); // Post 타입으로 지정 const [, setImages] = useRecoilState(postImagesAtom); const navigate = useNavigate(); - const userId = getCurrentUserId(); + const currentUserId = getCurrentUserId(); // 인스타그램 데이터 가져오는 함수 const fetchInstagramData = async (accessToken: string) => { @@ -75,7 +75,7 @@ const PostInstaFeedSelect: React.FC = () => { // 페이지 종료 함수 const handleClose = () => { - navigate(`/profile/${userId}`); + navigate(`/profile/${currentUserId}`); }; return ( diff --git a/src/pages/Post/PostUpload/ImageSwiper/index.tsx b/src/pages/Post/PostUpload/ImageSwiper/index.tsx index a643f0c2..7d95520f 100644 --- a/src/pages/Post/PostUpload/ImageSwiper/index.tsx +++ b/src/pages/Post/PostUpload/ImageSwiper/index.tsx @@ -1,6 +1,6 @@ import { useRef } from 'react'; -import ReactDOMServer from 'react-dom/server'; +import { renderToString } from 'react-dom/server'; import { Navigation, Pagination } from 'swiper/modules'; import { Swiper, SwiperRef, SwiperSlide } from 'swiper/react'; import 'swiper/css'; @@ -32,7 +32,7 @@ const ImageSwiper: React.FC = ({ images }) => { el: '.swiper-pagination', type: 'custom', renderCustom: (_, current, total) => { - const photoIcon = ReactDOMServer.renderToString(); + const photoIcon = renderToString(); return `
${photoIcon} diff --git a/src/pages/Post/PostUpload/SearchBottomSheetContent/index.tsx b/src/pages/Post/PostUpload/SearchBottomSheetContent/index.tsx index 5f246c27..a78fb68b 100644 --- a/src/pages/Post/PostUpload/SearchBottomSheetContent/index.tsx +++ b/src/pages/Post/PostUpload/SearchBottomSheetContent/index.tsx @@ -157,7 +157,7 @@ const SearchBottomSheetContent: React.FC = ({ onClose, o value={searchQuery} onChange={(e) => handleInputChange(e.target.value)} /> - + 취소
@@ -167,12 +167,12 @@ const SearchBottomSheetContent: React.FC = ({ onClose, o handleClothingInfoAdd(searchResultItem)}> {searchResultItem.title.replace(/<[^]+>/g, '')} />
- + {searchResultItem.brand} {removeBrandFromTitle(searchResultItem.title, searchResultItem.brand)} @@ -183,7 +183,7 @@ const SearchBottomSheetContent: React.FC = ({ onClose, o
{isLoading && ( - + 로딩 중 diff --git a/src/pages/Post/PostUpload/ToggleSwitch/styles.tsx b/src/pages/Post/PostUpload/ToggleSwitch/styles.tsx index b8d69b7c..98084266 100644 --- a/src/pages/Post/PostUpload/ToggleSwitch/styles.tsx +++ b/src/pages/Post/PostUpload/ToggleSwitch/styles.tsx @@ -18,7 +18,7 @@ export const HiddenCheckbox = styled.input.attrs({ type: 'checkbox' })` width: 25px; height: 25px; border-radius: 50%; - background-color: ${({ theme }) => theme.colors.white}; + background-color: ${({ theme }) => theme.colors.background.primary}; border: 1.5px solid ${({ theme }) => theme.colors.border.active}; transition: left 250ms linear; } @@ -29,7 +29,7 @@ export const HiddenCheckbox = styled.input.attrs({ type: 'checkbox' })` } &:checked::before { - background-color: white; + background-color: ${({ theme }) => theme.colors.background.primary}; left: 25px; } `; diff --git a/src/pages/Post/PostUpload/index.tsx b/src/pages/Post/PostUpload/index.tsx index 32c75f3d..54e49cfb 100644 --- a/src/pages/Post/PostUpload/index.tsx +++ b/src/pages/Post/PostUpload/index.tsx @@ -69,7 +69,7 @@ const PostUpload: React.FC = () => { const [modalContent, setModalContent] = useState('알 수 없는 오류입니다.\n관리자에게 문의해 주세요.'); const location = useLocation(); const navigate = useNavigate(); - const userId = getCurrentUserId(); + const currentUserId = getCurrentUserId(); const styletags = [ 'classic', @@ -240,7 +240,7 @@ const PostUpload: React.FC = () => { setSelectedStyletag([]); setMode(''); - navigate(`/profile/${userId}`); + navigate(`/profile/${currentUserId}`); } catch (error) { const errorMessage = handleError(error, 'post'); setModalContent(errorMessage); @@ -343,21 +343,21 @@ const PostUpload: React.FC = () => {
- + 스타일 태그 {isStyletagListOpen ? ( ) : selectedStyletag.length === 0 ? ( <> - + 미지정 ) : ( - + #{selectedStyletag[0]} @@ -371,7 +371,7 @@ const PostUpload: React.FC = () => { onClick={() => handleStyletagSelect(tag)} selected={selectedStyletag[0] === tag} > - + #{tag} @@ -381,7 +381,7 @@ const PostUpload: React.FC = () => { - 대표 OOTD 지정 + 대표 OOTD 지정
diff --git a/src/pages/Post/PostUpload/styles.tsx b/src/pages/Post/PostUpload/styles.tsx index 17a34396..9eb65c7a 100644 --- a/src/pages/Post/PostUpload/styles.tsx +++ b/src/pages/Post/PostUpload/styles.tsx @@ -168,7 +168,7 @@ export const StyletagItem = styled.span<{ selected: boolean }>` cursor: pointer; .tag { - color: ${({ selected, theme }) => (selected ? theme.colors.white : theme.colors.brand.primary)}; + color: ${({ selected, theme }) => (selected ? theme.colors.text.contrast : theme.colors.brand.primary)}; } `; diff --git a/src/pages/Post/index.tsx b/src/pages/Post/index.tsx index baddc707..ad69bbfd 100644 --- a/src/pages/Post/index.tsx +++ b/src/pages/Post/index.tsx @@ -38,7 +38,7 @@ const Post: React.FC = () => { const [postPinStatus, setPostPinStatus] = useState<'지정' | '해제'>('지정'); const navigate = useNavigate(); - const userId = getCurrentUserId(); + const currentUserId = getCurrentUserId(); const handleMenuOpen = () => { if (isMyPost) { @@ -73,7 +73,7 @@ const Post: React.FC = () => { setModalContent('OOTD 삭제에 성공했어요'); setTimeout(() => { - navigate(`/profile/${userId}`); + navigate(`/profile/${currentUserId}`); }, 1000); } else { setModalContent(`OOTD 삭제에 실패했어요\n잠시 뒤 다시 시도해 보세요`); @@ -89,7 +89,7 @@ const Post: React.FC = () => { useEffect(() => { // 현재 게시글이 내 게시글인지 확인 if (user?.id && postId) { - setIsMyPost(Number(userId) === user.id); + setIsMyPost(currentUserId === user.id); } }, [user, postId]); diff --git a/src/pages/Profile/NavbarProfile/index.tsx b/src/pages/Profile/NavbarProfile/index.tsx index 811eca61..d4878322 100644 --- a/src/pages/Profile/NavbarProfile/index.tsx +++ b/src/pages/Profile/NavbarProfile/index.tsx @@ -11,7 +11,7 @@ import { Nav, IconContainer } from './styles'; const NavbarProfile: React.FC = () => { return (