diff --git a/src/apis/auth/index.ts b/src/apis/auth/index.ts index dec241ca..3b46ef5e 100644 --- a/src/apis/auth/index.ts +++ b/src/apis/auth/index.ts @@ -1,4 +1,5 @@ import { newRequest } from '@apis/core'; + import type { getUserInfoByJwtResponse } from './dto'; // jwt로 사용자 정보 조회 api /auth/me 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/core/index.ts b/src/apis/core/index.ts index a62602ba..f8705c9e 100644 --- a/src/apis/core/index.ts +++ b/src/apis/core/index.ts @@ -5,6 +5,7 @@ import axios, { AxiosResponse, InternalAxiosRequestConfig, } from 'axios'; + import { NEW_JWT_KEY } from '../../config/constant'; // 기존 서버 응답 타입 diff --git a/src/apis/matching/index.ts b/src/apis/matching/index.ts index 39194b3b..cb0c62ca 100644 --- a/src/apis/matching/index.ts +++ b/src/apis/matching/index.ts @@ -1,4 +1,5 @@ import { newRequest } from '@apis/core'; + import type { CreateMatchingRequest, CreateMatchingResponse, 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 f130e959..b6471270 100644 --- a/src/apis/post-comment/index.ts +++ b/src/apis/post-comment/index.ts @@ -1,6 +1,8 @@ -import { newRequest } from '../core'; -import { CreateCommentRequest, CreateCommentResponse, GetCommentListResponse } from './dto'; -import { EmptySuccessResponse } from '../core/dto'; +import { newRequest } from '@apis/core'; + +import type { EmptySuccessResponse } from '@apis/core/dto'; + +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 de332922..aab0eec2 100644 --- a/src/apis/post-like/index.ts +++ b/src/apis/post-like/index.ts @@ -1,5 +1,6 @@ -import { newRequest } from '../core'; -import { TogglePostLikeStatusResponse, GetPostLikeListResponse } from './dto'; +import { newRequest } from '@apis/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 10c915db..0d5491cc 100644 --- a/src/apis/post-report/dto.ts +++ b/src/apis/post-report/dto.ts @@ -1,27 +1,26 @@ -import { BaseSuccessResponse } from '../core/dto'; +import type { BaseSuccessResponse } from '@apis/core/dto'; interface BaseReport { - id: number; // 신고 ID - userId: number; // 신고 생성 사용자 ID - postId: number; // 신고된 게시글 ID - content: string; // 신고된 게시글 내용 - repostReason: string; // 신고 사유 + id: number; // 신고 ID + userId: number; // 신고 생성 사용자 ID + postId: number; // 신고된 게시글 ID + content: string; // 신고된 게시글 내용 + repostReason: string; // 신고 사유 } // 게시글 신고 요청 DTO export interface SendPostReportRequest { - requesterId: number; // 신고하는 사용자 ID - postId: number; // 신고 대상 게시글 ID - reason: string; // 신고 사유 + requesterId: number; // 신고하는 사용자 ID + postId: number; // 신고 대상 게시글 ID + reason: string; // 신고 사유 } // 게시물 신고 응답 데이터 export interface SendPostReportData extends BaseReport { - requesterId: number; // 신고하는 사용자 ID - postId: number; // 신고 대상 게시글 ID - reason: string; // 신고 사유 + requesterId: number; // 신고하는 사용자 ID + postId: number; // 신고 대상 게시글 ID + reason: string; // 신고 사유 } // 게시물 신고 응답 타입 export type SendPostReportResponse = BaseSuccessResponse; - diff --git a/src/apis/post-report/index.ts b/src/apis/post-report/index.ts index 29aee5fd..27bb70a1 100644 --- a/src/apis/post-report/index.ts +++ b/src/apis/post-report/index.ts @@ -1,6 +1,7 @@ -import { newRequest } from "../core"; -import { SendPostReportRequest, SendPostReportResponse } from "./dto"; +import { newRequest } from '@apis/core'; + +import type { SendPostReportRequest, SendPostReportResponse } from './dto'; // 게시글 신고 API export const sendPostReportApi = (data: SendPostReportRequest) => - newRequest.post('/post-report', data); + newRequest.post('/post-report', data); 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 ad5c2f0f..18614464 100644 --- a/src/apis/post/index.ts +++ b/src/apis/post/index.ts @@ -1,5 +1,8 @@ -import { newRequest } from '../core'; -import { +import { newRequest } from '@apis/core'; + +import type { EmptySuccessResponse } from '@apis/core/dto'; + +import type { CreatePostRequest, CreatePostResponse, GetPostListResponse, @@ -8,7 +11,6 @@ import { ModifyPostRequest, ModifyPostResponse, } from './dto'; -import { EmptySuccessResponse } from '../core/dto'; // 게시글 생성 export const createPostApi = (data: CreatePostRequest) => newRequest.post('/post', data); diff --git a/src/apis/user-block/index.ts b/src/apis/user-block/index.ts index 2faee8a2..00443438 100644 --- a/src/apis/user-block/index.ts +++ b/src/apis/user-block/index.ts @@ -1,5 +1,7 @@ import { newRequest } from '@apis/core'; + import type { EmptySuccessResponse } from '@apis/core/dto'; + import type { PostUserBlockRequest } from './dto'; // 유저 차단 api diff --git a/src/apis/user-report/index.ts b/src/apis/user-report/index.ts index 207f70a1..434691dc 100644 --- a/src/apis/user-report/index.ts +++ b/src/apis/user-report/index.ts @@ -1,5 +1,7 @@ import { newRequest } from '@apis/core'; + import type { EmptySuccessResponse } from '@apis/core/dto'; + import type { PostUserReportRequest } from './dto'; // 유저 신고 api diff --git a/src/apis/user/index.ts b/src/apis/user/index.ts index 40c61b9e..06633eb5 100644 --- a/src/apis/user/index.ts +++ b/src/apis/user/index.ts @@ -1,5 +1,7 @@ import { newRequest } from '@apis/core'; + import type { EmptySuccessResponse } from '@apis/core/dto'; + import type { GetUserInfoResponse, PatchUserInfoRequest, diff --git a/src/assets/default/send-message.svg b/src/assets/default/send-message.svg index 65db90d7..ca176b2b 100644 --- a/src/assets/default/send-message.svg +++ b/src/assets/default/send-message.svg @@ -1,4 +1,4 @@ + stroke="#FFBBDA" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" fill="#FFBBDA"/> 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/Icons/Alarm.tsx b/src/components/Icons/Alarm.tsx index 52e98d62..ea302bd7 100644 --- a/src/components/Icons/Alarm.tsx +++ b/src/components/Icons/Alarm.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import type { IconsProps } from './dto'; const Alarm: React.FC = ({ isFilled = false, width = '14', height = '18' }) => { diff --git a/src/components/Icons/Heart.tsx b/src/components/Icons/Heart.tsx index 4fe45fa0..d85645f5 100644 --- a/src/components/Icons/Heart.tsx +++ b/src/components/Icons/Heart.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import type { IconsProps } from './dto'; const Heart: React.FC = ({ isFilled = false, width = '56', height = '56' }) => { diff --git a/src/components/Icons/Home.tsx b/src/components/Icons/Home.tsx index 05091369..a9419daa 100644 --- a/src/components/Icons/Home.tsx +++ b/src/components/Icons/Home.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import type { IconsProps } from './dto'; const Home: React.FC = ({ color = '', isFilled = false, width = '14', height = '14' }) => { diff --git a/src/components/Icons/Like.tsx b/src/components/Icons/Like.tsx index 435b3b14..a75d8e75 100644 --- a/src/components/Icons/Like.tsx +++ b/src/components/Icons/Like.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import type { IconsProps } from './dto'; const Like: React.FC = ({ isFilled = false, color = '', width = '16', height = '14' }) => { diff --git a/src/components/Icons/Message.tsx b/src/components/Icons/Message.tsx index 9b724558..e5a3e61e 100644 --- a/src/components/Icons/Message.tsx +++ b/src/components/Icons/Message.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import type { IconsProps } from './dto'; const Message: React.FC = ({ color = '', isFilled = false, width = '14', height = '12' }) => { diff --git a/src/components/Icons/MyPage.tsx b/src/components/Icons/MyPage.tsx index 51088e34..cfbeef59 100644 --- a/src/components/Icons/MyPage.tsx +++ b/src/components/Icons/MyPage.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import type { IconsProps } from './dto'; const MyPage: React.FC = ({ color = '', isFilled = false, width = '16', height = '16' }) => { diff --git a/src/components/Icons/Photo.tsx b/src/components/Icons/Photo.tsx index af92fa55..1a5d2e4a 100644 --- a/src/components/Icons/Photo.tsx +++ b/src/components/Icons/Photo.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import type { IconsProps } from './dto'; const Photo: React.FC = ({ width = '18', height = '18', color = '#8E8E8E' }) => { 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 1c30b279..17e4dd2c 100644 --- a/src/pages/Account/AccountCancel/index.tsx +++ b/src/pages/Account/AccountCancel/index.tsx @@ -4,6 +4,7 @@ import { useNavigate } from 'react-router-dom'; import theme from '@styles/theme'; import { patchUserWithdrawApi } from '@apis/user'; +import { getCurrentUserId } from '@utils/getCurrentUserId'; import back from '@assets/arrow/left.svg'; @@ -23,8 +24,7 @@ import { CheckboxInput, Label, StyledCheckboxText, - StyledDiv, -} from './styles'; // 상대 경로 index 명시 +} from './styles'; const AccountCancel: React.FC = () => { const [isChecked, setIsChecked] = useState(false); @@ -49,23 +49,20 @@ const AccountCancel: React.FC = () => { return; } - const storedUserId = Number(localStorage.getItem('my_id')); + const currentUserId = getCurrentUserId(); const token = localStorage.getItem('new_jwt_token'); - if (!storedUserId || !token) { + if (!currentUserId || !token) { setModalContent('사용자 정보를 찾을 수 없습니다.'); setIsModalVisible(true); return; } - // API 요청 - const response = await patchUserWithdrawApi(storedUserId); + const response = await patchUserWithdrawApi(currentUserId); if (response.isSuccess) { setModalContent('계정이 성공적으로 삭제되었습니다.'); setIsModalVisible(true); - - // 계정 삭제 시 localStorage에서 사용자 정보 제거 localStorage.clear(); setTimeout(() => { @@ -86,14 +83,13 @@ const AccountCancel: React.FC = () => { navigate(-1)} /> - - + OOTD 탈퇴 전 확인하세요! - + {`탈퇴하시면 이용 중인 서비스가 폐쇄되며,\n모든 데이터는 복구할 수 없습니다.`} @@ -102,7 +98,7 @@ const AccountCancel: React.FC = () => { 지금까지 OODD를 이용해주셔서 감사합니다! @@ -118,12 +114,10 @@ const AccountCancel: React.FC = () => { - - - + {isModalVisible && ( 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 fb0bb67a..2be0eded 100644 --- a/src/pages/Account/AccountEdit/index.tsx +++ b/src/pages/Account/AccountEdit/index.tsx @@ -41,18 +41,18 @@ const AccountEdit: React.FC = () => {
- + 로그인 정보 - + SNS 연결 - + 연결된 SNS계정으로 로그인되었습니다. @@ -64,14 +64,14 @@ const AccountEdit: React.FC = () => {
- + 회원 정보 @@ -79,7 +79,7 @@ const AccountEdit: React.FC = () => { diff --git a/src/pages/Account/AccountEdit/styles.tsx b/src/pages/Account/AccountEdit/styles.tsx index 2ed8d886..65eb681d 100644 --- a/src/pages/Account/AccountEdit/styles.tsx +++ b/src/pages/Account/AccountEdit/styles.tsx @@ -46,7 +46,7 @@ export const SNSIcon = styled.img` export const Text = styled.div` font-size: 0.875rem; - color: ${({ theme }) => theme.colors.tertiary}; + color: ${({ theme }) => theme.colors.text.tertiary}; margin-top: 2.1875rem; text-align: left; `; @@ -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 5abb4b9f..75f1bcbc 100644 --- a/src/pages/Account/AccountSetting/index.tsx +++ b/src/pages/Account/AccountSetting/index.tsx @@ -4,6 +4,7 @@ import { useNavigate } from 'react-router-dom'; import theme from '@styles/theme'; import { getUserInfoApi } from '@apis/user'; +import { getCurrentUserId } from '@utils/getCurrentUserId'; import back from '@assets/arrow/left.svg'; import imageBasic from '@assets/default/defaultProfile.svg'; @@ -16,7 +17,7 @@ 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 type { UserInfoData } from '@apis/user/dto'; import { ProfileEditContainer, ProfilePic, ProfilePicWrapper, Label, Row, List, ListItem } from './styles'; @@ -26,18 +27,16 @@ const AccountSetting: React.FC = () => { const [userProfile, setUserProfile] = useState(null); const [isLoading, setIsLoading] = useState(true); - // 사용자 정보 가져오기 useEffect(() => { const getUserInfo = async () => { try { - const storedUserId = Number(localStorage.getItem('my_id')); - if (!storedUserId) { + const currentUserId = getCurrentUserId(); + if (!currentUserId) { console.error('User is not logged in'); return; } - const userId = Number(storedUserId); - const response = await getUserInfoApi(userId); + const response = await getUserInfoApi(currentUserId); setUserProfile(response.data); } catch (error) { console.error('Error fetching user info:', error); @@ -50,11 +49,9 @@ const AccountSetting: React.FC = () => { }, []); const handleConfirmLogout = () => { - // localStorage 비우기 localStorage.clear(); console.log('Logout confirmed'); setIsLogoutModalOpen(false); - navigate('/login'); }; @@ -67,7 +64,6 @@ const AccountSetting: React.FC = () => { }; const handleDeleteAccountClick = () => { - // 회원 탈퇴 로직 추가 navigate('/account/cancel'); }; @@ -79,21 +75,20 @@ const AccountSetting: React.FC = () => { navigate(-1)} /> - 프로필 사진 @@ -103,17 +98,18 @@ const AccountSetting: React.FC = () => { 로그아웃 아이콘 - + Logout 회원 탈퇴 아이콘 - + 회원탈퇴 + {isLogoutModalOpen && ( { - <StyledText $textTheme={{ style: 'body1-medium' }} color={theme.colors.tertiary}> + <StyledText $textTheme={{ style: 'body1-medium' }} color={theme.colors.text.tertiary}> 휴대전화번호로 본인인증하기 </StyledText> 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/ChatRoom/ChatBox/index.tsx b/src/pages/Chats/ChatRoom/ChatBox/index.tsx index 95b85d7d..8931cc03 100644 --- a/src/pages/Chats/ChatRoom/ChatBox/index.tsx +++ b/src/pages/Chats/ChatRoom/ChatBox/index.tsx @@ -7,6 +7,8 @@ import { useSocket } from '@context/SocketProvider'; import { OtherUserAtom } from '@recoil/util/OtherUser'; import { getCurrentUserId } from '@utils/getCurrentUserId'; +import SendIcon from '@assets/default/send-message.svg'; + import { ChatBoxContainer, Textarea, SendButton } from './styles'; const ChatBox: React.FC = () => { @@ -75,7 +77,9 @@ const ChatBox: React.FC = () => { onKeyDown={handleEnterKeyDown} onSubmit={handleNewMessageSubmit} /> - + + + ); }; diff --git a/src/pages/Chats/ChatRoom/ChatBox/styles.tsx b/src/pages/Chats/ChatRoom/ChatBox/styles.tsx index 82fd9c43..d0c1f961 100644 --- a/src/pages/Chats/ChatRoom/ChatBox/styles.tsx +++ b/src/pages/Chats/ChatRoom/ChatBox/styles.tsx @@ -1,7 +1,5 @@ import { styled } from 'styled-components'; -import SendIcon from '@assets/default/send-message.svg'; - export const ChatBoxContainer = styled.div` ${({ theme }) => theme.breakPoints}; position: fixed; @@ -14,7 +12,7 @@ export const ChatBoxContainer = styled.div` padding: 0.5rem 1.12rem; background-color: ${({ theme }) => theme.colors.background.primary}; gap: 0.5rem; - border-top: 1px solid ${({ theme }) => theme.colors.gray[300]}; + /* border-top: 1px solid ${({ theme }) => theme.colors.gray[300]}; */ align-items: center; `; @@ -39,12 +37,9 @@ export const Textarea = styled.textarea<{ $isOtherUserValid: boolean }>` `; export const SendButton = styled.button<{ $isOtherUserValid: boolean }>` - padding: 1.12rem; + width: 2rem; + height: 2rem; border-radius: 50%; - background-color: ${({ theme }) => theme.colors.brand.primaryLight}; - background-image: url(${SendIcon}); - background-repeat: no-repeat; - background-position: center; - background-size: 1.2rem 1.2rem; + /* background-color: ${({ theme }) => theme.colors.brand.primaryLight}; */ cursor: ${({ $isOtherUserValid }) => ($isOtherUserValid ? 'pointer' : '')}; `; diff --git a/src/pages/Chats/ChatRoom/RcvdMessage/styles.tsx b/src/pages/Chats/ChatRoom/RcvdMessage/styles.tsx index e6b4d31a..1c659f2b 100644 --- a/src/pages/Chats/ChatRoom/RcvdMessage/styles.tsx +++ b/src/pages/Chats/ChatRoom/RcvdMessage/styles.tsx @@ -10,7 +10,7 @@ export const FirstMessageLayout = styled.div<{ $isSenderChanged: boolean }>` export const MessageLayout = styled.div` display: flex; - margin: 0 auto 0.5rem 2.938rem; + margin: 0 auto 0.5rem 2rem; `; export const UserImage = styled.img` 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/index.tsx b/src/pages/NotFound/index.tsx index 7afc7f13..43ae17b1 100644 --- a/src/pages/NotFound/index.tsx +++ b/src/pages/NotFound/index.tsx @@ -14,7 +14,7 @@ const NotFound = () => { - + 404 ERROR 죄송합니다. 페이지를 찾을 수 없습니다. @@ -26,7 +26,7 @@ const NotFound = () => {
- + 메인으로 theme.colors.pink3}; + border: 1px solid ${({ theme }) => theme.colors.brand.primary}; border-radius: 8px; cursor: pointer; text-decoration: none; &.prev { - background-color: ${({ theme }) => theme.colors.pink3}; - color: ${({ theme }) => theme.colors.white}; + background-color: ${({ theme }) => theme.colors.brand.primary}; + color: ${({ theme }) => theme.colors.text.contrast}; } `; diff --git a/src/pages/Post/PostBase/ImageSwiper/index.tsx b/src/pages/Post/PostBase/ImageSwiper/index.tsx index d813bb13..8142afa8 100644 --- a/src/pages/Post/PostBase/ImageSwiper/index.tsx +++ b/src/pages/Post/PostBase/ImageSwiper/index.tsx @@ -6,7 +6,7 @@ import 'swiper/css'; import 'swiper/css/navigation'; import 'swiper/css/pagination'; -import { ImageSwiperProps } from '../dto'; +import type { ImageSwiperProps } from '../dto'; import { SwiperContainer, ImageWrapper, StyledNavigation } from './styles'; diff --git a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/index.tsx b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/index.tsx index 5deb501a..5f4e425e 100644 --- a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/index.tsx +++ b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/index.tsx @@ -38,7 +38,7 @@ const CommentItem: React.FC = ({ comment, handleUserClick, han {comment.content} - + {timeAgo} handleMenuOpen(comment, event)}> diff --git a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/MenuButtonList/styles.tsx b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/MenuButtonList/styles.tsx index 579a1de7..cfaaeccd 100644 --- a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/MenuButtonList/styles.tsx +++ b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/MenuButtonList/styles.tsx @@ -33,7 +33,7 @@ export const MenuButtonItem = styled.button<{ $color?: string }>` width: 120px; padding: 0 10px; cursor: pointer; - color: ${(props) => props.$color || props.theme.colors.white}; + color: ${(props) => props.$color || props.theme.colors.text.primary}; border-bottom: 1px solid ${({ theme }) => theme.colors.white}; img { diff --git a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/index.tsx b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/index.tsx index 00e3f978..ed0a2cda 100644 --- a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/index.tsx +++ b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/index.tsx @@ -69,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) => { @@ -80,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 @@ -190,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; @@ -201,7 +191,7 @@ const LikeCommentBottomSheetContent: React.FC = ({ try { const blockRequest: PostUserBlockRequest = { - requesterId: Number(storedUserId), + requesterId: currentUserId, targetId: selectedComment.user.id, action: 'block', }; @@ -338,7 +328,7 @@ const LikeCommentBottomSheetContent: React.FC = ({ setActiveTab('likes')}> 좋아요 {postLikeCount || 0} @@ -346,7 +336,7 @@ const LikeCommentBottomSheetContent: React.FC = ({ setActiveTab('comments')}> 코멘트 {postCommentCount || 0} @@ -356,7 +346,7 @@ const LikeCommentBottomSheetContent: React.FC = ({ {activeTab === 'likes' && (postLikeCount === 0 ? ( - + 아직 좋아요가 없습니다 ) : ( @@ -375,7 +365,7 @@ const LikeCommentBottomSheetContent: React.FC = ({ {activeTab === 'comments' && ( <> {postCommentCount === 0 ? ( - + 아직 댓글이 없습니다 ) : ( diff --git a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/styles.tsx b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/styles.tsx index 4a481925..21da8d11 100644 --- a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/styles.tsx +++ b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/styles.tsx @@ -80,7 +80,7 @@ export const InputLayout = styled.div` align-items: center; gap: 10px; background-color: white; - border-top: 1px solid ${({ theme }) => theme.colors.border.devider}; + border-top: 1px solid ${({ theme }) => theme.colors.border.divider}; textarea { flex: 1; @@ -89,7 +89,7 @@ export const InputLayout = styled.div` height: 50px; max-height: 70px; border-radius: 8px; - border: 0.0625rem solid #ededed; + border: 0.0625rem solid ${({ theme }) => theme.colors.border.divider}; outline: none; padding: 0.8125rem 0.9375rem; font-family: 'Pretendard Variable'; @@ -97,8 +97,8 @@ export const InputLayout = styled.div` font-style: normal; font-weight: 300; line-height: 150%; - color: #1d1d1d; - background-color: #f8f8f8; + color: ${({ theme }) => theme.colors.text.secondary}; + background-color: ${({ theme }) => theme.colors.background.secondary}; resize: none; overflow-y: auto; @@ -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 074145ed..990daa75 100644 --- a/src/pages/Post/PostBase/index.tsx +++ b/src/pages/Post/PostBase/index.tsx @@ -10,14 +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 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 Like from '@components/Icons/Like'; + import BottomSheet from '@components/BottomSheet'; import ClothingInfoItem from '@components/ClothingInfoItem'; import { OODDFrame } from '@components/Frame/Frame'; @@ -63,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(); @@ -73,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); }; @@ -164,10 +155,18 @@ const PostBase: React.FC = ({ onClickMenu }) => { {post?.user && profileImg} - + {user.nickname} - + {timeAgo} @@ -177,16 +176,18 @@ const PostBase: React.FC = ({ onClickMenu }) => { {!post ? : image.url)} />} - - {post?.postClothings?.map((clothingObj, index) => ( - - ))} - + {post?.postClothings && ( + + {post.postClothings.map((clothingObj, index) => ( + + ))} + + )} - {post?.isPostLike ? like : like} + {post?.isPostLike ? : } handleLikeCommentOpen('likes')}>{post?.postLikesCount ?? 0} @@ -208,7 +209,7 @@ const PostBase: React.FC = ({ onClickMenu }) => { onClick={toggleTextDisplay} $showFullText={showFullText} $textTheme={{ style: 'body4-light' }} - color={theme.colors.black} + color={theme.colors.text.primary} > {post.content} diff --git a/src/pages/Post/PostBase/styles.tsx b/src/pages/Post/PostBase/styles.tsx index 856e812d..8ec77731 100644 --- a/src/pages/Post/PostBase/styles.tsx +++ b/src/pages/Post/PostBase/styles.tsx @@ -16,9 +16,9 @@ const shimmer = keyframes` const LoadingSkeleton = styled.div` background: linear-gradient( 90deg, - ${({ theme }) => theme.colors.gray1} 25%, - ${({ theme }) => theme.colors.gray2} 50%, - ${({ theme }) => theme.colors.gray1} 75% + ${({ theme }) => theme.colors.gray[200]} 25%, + ${({ theme }) => theme.colors.gray[300]} 50%, + ${({ theme }) => theme.colors.gray[200]} 75% ); background-size: 200% 100%; animation: ${shimmer} 2s infinite; @@ -79,7 +79,7 @@ export const UserProfile = styled(LoadingSkeleton)` height: 32px; border-radius: 50%; overflow: hidden; - border: solid 0.5px ${({ theme }) => theme.colors.gray1}; + border: solid 0.5px ${({ theme }) => theme.colors.border.divider}; img { width: 100%; @@ -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; @@ -120,7 +122,7 @@ export const Content = styled(StyledText)<{ $showFullText: boolean }>` export const ShowMoreButton = styled(StyledText)` cursor: pointer; - color: ${({ theme }) => theme.colors.gray3}; + color: ${({ theme }) => theme.colors.text.tertiary}; `; export const ImageSkeleton = styled(LoadingSkeleton)` @@ -133,6 +135,7 @@ export const IconRow = styled.div` height: 20px; align-items: center; padding: 0 20px; + gap: 16px; `; export const IconWrapper = styled.div` @@ -140,22 +143,20 @@ export const IconWrapper = styled.div` align-items: center; gap: 8px; cursor: pointer; + height: 22px; span { font-size: 15px; - color: #000; - margin-right: 16px; + color: ${({ theme }) => theme.colors.text.primary}; } `; export const Icon = styled.div` - width: 20px; - height: 20px; - - img { - width: 20px; - height: 20px; - } + width: 18px; + height: 18px; + display: flex; + align-items: center; + justify-content: center; `; export const ClothingInfoList = styled.div` @@ -185,7 +186,7 @@ export const InputLayout = styled.div` width: calc(100% - 3rem); height: 5.75rem; border-radius: 0.125rem; - border: 0.0625rem solid ${({ theme }) => theme.colors.gray3}; + border: 0.0625rem solid ${({ theme }) => theme.colors.border.divider}; margin-bottom: 5.875rem; z-index: 2; margin-top: -3.75rem; @@ -196,7 +197,7 @@ export const InputLayout = styled.div` font-style: normal; font-weight: 300; line-height: 150%; - color: ${({ theme }) => theme.colors.black}; + color: ${({ theme }) => theme.colors.text.primary}; resize: none; } `; diff --git a/src/pages/Post/PostImageSelect/ImageSwiper/index.tsx b/src/pages/Post/PostImageSelect/ImageSwiper/index.tsx index 27025f65..ba9a655d 100644 --- a/src/pages/Post/PostImageSelect/ImageSwiper/index.tsx +++ b/src/pages/Post/PostImageSelect/ImageSwiper/index.tsx @@ -17,7 +17,7 @@ const ImageSwiper: React.FC = ({ images, onProcessFile, onRemo const fileInputRef = useRef(null); const [currentSlide, setCurrentSlide] = useState(0); - const handleSelectImage = () => { + const handleImageSelect = () => { if (fileInputRef.current) { fileInputRef.current.click(); } @@ -51,7 +51,7 @@ const ImageSwiper: React.FC = ({ images, onProcessFile, onRemo ))} - + { @@ -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 = () => { @@ -55,7 +57,7 @@ const PostImageSelect: React.FC = () => { }; // 파일 선택기에서 사진 업로드 - const handleSelectImage = () => { + const handleImageSelect = () => { if (fileInputRef.current) { fileInputRef.current.click(); } @@ -74,14 +76,14 @@ const PostImageSelect: React.FC = () => { setActive(false); if (event.dataTransfer.files) { - handleProcessFile(event.dataTransfer.files); + processFile(event.dataTransfer.files); } }; const handleFileInputChange = (event: React.ChangeEvent) => { event.preventDefault(); if (event.target.files) { - handleProcessFile(event.target.files); + processFile(event.target.files); // 파일 선택 후 input 값 초기화 if (fileInputRef.current) { fileInputRef.current.value = ''; // input 값을 초기화하여 동일한 파일을 다시 추가할 수 있도록 함 @@ -89,7 +91,7 @@ const PostImageSelect: React.FC = () => { } }; - const handleProcessFile = async (files: FileList) => { + const processFile = async (files: FileList) => { const filesArray = Array.from(files); for (const file of filesArray) { try { @@ -111,7 +113,7 @@ const PostImageSelect: React.FC = () => { reader.readAsDataURL(fileBlob); reader.onload = () => { if (reader.result) { - handleAddImage(reader.result.toString()); + handleImageAdd(reader.result.toString()); } }; } catch (error) { @@ -121,14 +123,14 @@ const PostImageSelect: React.FC = () => { } }; - const handleAddImage = (newImage: string) => { + const handleImageAdd = (newImage: string) => { setImages((prevImages) => { const maxOrderNum = prevImages.reduce((max, img) => (img.orderNum > max ? img.orderNum : max), -1); return [...prevImages, { url: newImage, orderNum: maxOrderNum + 1 }]; }); }; - const handleRemoveImage = (image: string) => { + const handleImageRemove = (image: string) => { // 이미지가 1개일 때는 삭제 할 수 없음 if (images.length > 1) { const newImages = images.filter((img) => img.url !== image); @@ -153,20 +155,18 @@ const PostImageSelect: React.FC = () => { onDragLeave={handleDragLeave} onDrop={handleDrop} > - - 사진을 여기에 끌어다 놓으세요 - - + 사진을 여기에 끌어다 놓으세요 + ) : ( - + )} diff --git a/src/pages/Post/PostImageSelect/styles.tsx b/src/pages/Post/PostImageSelect/styles.tsx index 98cab6b6..e131c00b 100644 --- a/src/pages/Post/PostImageSelect/styles.tsx +++ b/src/pages/Post/PostImageSelect/styles.tsx @@ -49,7 +49,6 @@ export const Content = styled.div` top: 2.75rem; left: 0; width: 100%; - //max-width: 512px; height: calc(100% - 10rem); flex: 1; `; diff --git a/src/pages/Post/PostInstaConnect/index.tsx b/src/pages/Post/PostInstaConnect/index.tsx index f7eb9450..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/PostInstaConnect/styles.tsx b/src/pages/Post/PostInstaConnect/styles.tsx index f4c9c7dc..5a85b457 100644 --- a/src/pages/Post/PostInstaConnect/styles.tsx +++ b/src/pages/Post/PostInstaConnect/styles.tsx @@ -38,31 +38,31 @@ export const StyledInput = styled.input` } ::placeholder { - color: ${({ theme }) => theme.colors.gray3}; + color: ${({ theme }) => theme.colors.text.tertiary}; ${({ theme }) => theme.fontStyles['title1-regular']} } /* Firefox */ &:-moz-placeholder { - color: ${({ theme }) => theme.colors.gray3}; + color: ${({ theme }) => theme.colors.text.tertiary}; ${({ theme }) => theme.fontStyles['title1-regular']} } /* Internet Explorer 10-11 */ &:-ms-input-placeholder { - color: ${({ theme }) => theme.colors.gray3}; + color: ${({ theme }) => theme.colors.text.tertiary}; ${({ theme }) => theme.fontStyles['title1-regular']} } /* Edge */ &::-ms-input-placeholder { - color: ${({ theme }) => theme.colors.gray3}; + color: ${({ theme }) => theme.colors.text.tertiary}; ${({ theme }) => theme.fontStyles['title1-regular']} } /* Safari */ &::placeholder { - color: ${({ theme }) => theme.colors.gray3}; + color: ${({ theme }) => theme.colors.text.tertiary}; ${({ theme }) => theme.fontStyles['title1-regular']} } `; 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 50677c5d..7d95520f 100644 --- a/src/pages/Post/PostUpload/ImageSwiper/index.tsx +++ b/src/pages/Post/PostUpload/ImageSwiper/index.tsx @@ -1,12 +1,13 @@ import { useRef } from 'react'; +import { renderToString } from 'react-dom/server'; 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 PhotoWhite from '@assets/default/photo-white.svg'; +import Photo from '@components/Icons/Photo'; import type { ImageSwiperProps } from '../dto'; @@ -31,9 +32,10 @@ const ImageSwiper: React.FC = ({ images }) => { el: '.swiper-pagination', type: 'custom', renderCustom: (_, current, total) => { + const photoIcon = renderToString(); return `
- Pagination Icon + ${photoIcon} ${current}/${total}
`; }, diff --git a/src/pages/Post/PostUpload/ImageSwiper/styles.tsx b/src/pages/Post/PostUpload/ImageSwiper/styles.tsx index 0f216167..1bda07f0 100644 --- a/src/pages/Post/PostUpload/ImageSwiper/styles.tsx +++ b/src/pages/Post/PostUpload/ImageSwiper/styles.tsx @@ -82,8 +82,8 @@ export const StyledPagination = styled.div` align-items: center; width: 65px; height: 34px; - color: white; - background: ${({ theme }) => theme.colors.gradient}; + color: ${({ theme }) => theme.colors.text.contrast}; + background: ${({ theme }) => theme.colors.brand.gradient}; border-radius: 17px; .swiper-pagination-custom { @@ -92,11 +92,8 @@ export const StyledPagination = styled.div` justify-content: center; } - .swiper-pagination-custom img { - margin-right: 0.3125rem; - } - span { + margin-left: 0.3125rem; font-family: 'Pretendard Variable'; font-weight: 300; font-size: 0.8125rem; diff --git a/src/pages/Post/PostUpload/SearchBottomSheetContent/index.tsx b/src/pages/Post/PostUpload/SearchBottomSheetContent/index.tsx index 66cb32da..a78fb68b 100644 --- a/src/pages/Post/PostUpload/SearchBottomSheetContent/index.tsx +++ b/src/pages/Post/PostUpload/SearchBottomSheetContent/index.tsx @@ -19,11 +19,41 @@ const SearchBottomSheetContent: React.FC = ({ onClose, o const observerRef = useRef(null); const loadMoreRef = useRef(null); + const handleCloseSheet = () => { + onClose(); + }; + const handleInputChange = (query: string) => { setSearchQuery(query); }; - const fetchSearchResult = async (searchQuery: string, start: number) => { + const handleClothingInfoAdd = (item: any) => { + onSelectClothingInfo({ + imageUrl: item.image, + brandName: item.brand, + modelName: removeBrandFromTitle(item.title, item.brand), //검색 결과에서 태그 제거하고 텍스트만 표시 + modelNumber: '1', + url: item.link, + }); + onClose(); + }; + + const removeBrandFromTitle = (title: string, brand: string) => { + // 브랜드 이름에서 특수 문자를 이스케이프 처리하여 정규 표현식에서 사용할 수 있도록 변환 + const escapedBrand = brand.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); + // 브랜드 이름을 감싸고 있는 [ ]를 제거 + const bracketRegex = new RegExp(`[\\[\\]()<>]*${escapedBrand}[\\[\\]()<>]*`, 'gi'); //gi: 대소문자 구분 없이(g) 모든 위치에서(i) + // 변환된 브랜드 이름을 제거 + const brandRegex = new RegExp(escapedBrand, 'gi'); + // 제목에서 브랜드 이름과 태그를 제거하고 양쪽 끝의 공백을 제거 + return title + .replace(/<[^>]+>/g, '') + .replace(bracketRegex, '') + .replace(brandRegex, '') + .trim(); + }; + + const getSearchResult = async (searchQuery: string, start: number) => { try { //네이버 쇼핑 api 프록시 서버 사용 const response = await axios.get( @@ -56,7 +86,7 @@ const SearchBottomSheetContent: React.FC = ({ onClose, o setReachedEnd(false); if (searchQuery) { - fetchSearchResult(searchQuery, 1).then((data) => { + getSearchResult(searchQuery, 1).then((data) => { if (data) { setSearchResult(data.items); } else { @@ -77,7 +107,7 @@ const SearchBottomSheetContent: React.FC = ({ onClose, o if (!reachedEnd && searchQuery) { setIsLoading(true); - const data = await fetchSearchResult(searchQuery, start); + const data = await getSearchResult(searchQuery, start); if (data) { setSearchResult((prevResult) => [...prevResult, ...data.items]); @@ -118,36 +148,6 @@ const SearchBottomSheetContent: React.FC = ({ onClose, o }; }, [reachedEnd, searchQuery, isLoading, searchResult]); - const handleAddClothingInfo = (item: any) => { - onSelectClothingInfo({ - imageUrl: item.image, - brandName: item.brand, - modelName: removeBrandFromTitle(item.title, item.brand), //검색 결과에서 태그 제거하고 텍스트만 표시 - modelNumber: '1', - url: item.link, - }); - onClose(); - }; - - const removeBrandFromTitle = (title: string, brand: string) => { - // 브랜드 이름에서 특수 문자를 이스케이프 처리하여 정규 표현식에서 사용할 수 있도록 변환 - const escapedBrand = brand.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); - // 브랜드 이름을 감싸고 있는 [ ]를 제거 - const bracketRegex = new RegExp(`[\\[\\]()<>]*${escapedBrand}[\\[\\]()<>]*`, 'gi'); //gi: 대소문자 구분 없이(g) 모든 위치에서(i) - // 변환된 브랜드 이름을 제거 - const brandRegex = new RegExp(escapedBrand, 'gi'); - // 제목에서 브랜드 이름과 태그를 제거하고 양쪽 끝의 공백을 제거 - return title - .replace(/<[^>]+>/g, '') - .replace(bracketRegex, '') - .replace(brandRegex, '') - .trim(); - }; - - const handleCloseSheet = () => { - onClose(); - }; - return (
@@ -157,23 +157,23 @@ const SearchBottomSheetContent: React.FC = ({ onClose, o value={searchQuery} onChange={(e) => handleInputChange(e.target.value)} /> - + 취소
{searchQuery && searchResult.length > 0 ? ( {searchResult.map((searchResultItem, index) => ( - handleAddClothingInfo(searchResultItem)}> + 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/SearchBottomSheetContent/styles.tsx b/src/pages/Post/PostUpload/SearchBottomSheetContent/styles.tsx index fdee8c66..5dfa0dee 100644 --- a/src/pages/Post/PostUpload/SearchBottomSheetContent/styles.tsx +++ b/src/pages/Post/PostUpload/SearchBottomSheetContent/styles.tsx @@ -11,11 +11,11 @@ export const Content = styled.div` width: 100%; padding: 0.825rem 0; - border-bottom: solid 0.0625rem ${({ theme }) => theme.colors.gray1}; + border-bottom: solid 0.0625rem ${({ theme }) => theme.colors.border.divider}; div { padding-left: 1.25rem; - color: ${({ theme }) => theme.colors.black}; + color: ${({ theme }) => theme.colors.text.primary}; cursor: pointer; } } @@ -28,7 +28,7 @@ export const Input = styled.input` text-align: left; font-size: 1rem; background-color: #f8f8f8; - border: 0.0625rem solid ${({ theme }) => theme.colors.gray2}; + border: 0.0625rem solid ${({ theme }) => theme.colors.border.divider}; border-radius: 0.3125rem; &:focus { @@ -36,7 +36,7 @@ export const Input = styled.input` } ::placeholder { - color: ${({ theme }) => theme.colors.gray3}; + color: ${({ theme }) => theme.colors.text.tertiary}; font-family: 'Pretendard Variable'; font-weight: 300; font-size: 1rem; @@ -44,7 +44,7 @@ export const Input = styled.input` /* Firefox */ &:-moz-placeholder { - color: ${({ theme }) => theme.colors.gray3}; + color: ${({ theme }) => theme.colors.text.tertiary}; font-family: 'Pretendard Variable'; font-weight: 300; font-size: 1rem; @@ -52,7 +52,7 @@ export const Input = styled.input` /* Internet Explorer 10-11 */ &:-ms-input-placeholder { - color: ${({ theme }) => theme.colors.gray3}; + color: ${({ theme }) => theme.colors.text.tertiary}; font-family: 'Pretendard Variable'; font-weight: 300; font-size: 1rem; @@ -60,7 +60,7 @@ export const Input = styled.input` /* Edge */ &::-ms-input-placeholder { - color: ${({ theme }) => theme.colors.gray3}; + color: ${({ theme }) => theme.colors.text.tertiary}; font-family: 'Pretendard Variable'; font-weight: 300; font-size: 1rem; @@ -68,7 +68,7 @@ export const Input = styled.input` /* Safari */ &::placeholder { - color: ${({ theme }) => theme.colors.gray3}; + color: ${({ theme }) => theme.colors.text.tertiary}; font-family: 'Pretendard Variable'; font-weight: 300; font-size: 1rem; @@ -90,7 +90,7 @@ export const SearchResultList = styled.div` } .total { - color: ${({ theme }) => theme.colors.gray3}; + color: ${({ theme }) => theme.colors.text.tertiary}; } .ref { @@ -104,7 +104,7 @@ export const SearchResultItem = styled.div` flex-direction: row; width: 100%; height: 5.625rem; - border-bottom: solid 0.0625rem ${({ theme }) => theme.colors.gray1}; + border-bottom: solid 0.0625rem ${({ theme }) => theme.colors.border.divider}; padding: 0.9375rem 0; cursor: pointer; @@ -131,7 +131,7 @@ export const SearchResultItem = styled.div` .detail { 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/pages/Post/PostUpload/ToggleSwitch/styles.tsx b/src/pages/Post/PostUpload/ToggleSwitch/styles.tsx index 1672e375..98084266 100644 --- a/src/pages/Post/PostUpload/ToggleSwitch/styles.tsx +++ b/src/pages/Post/PostUpload/ToggleSwitch/styles.tsx @@ -3,7 +3,7 @@ import { styled } from 'styled-components'; export const HiddenCheckbox = styled.input.attrs({ type: 'checkbox' })` appearance: none; position: relative; - border: 1.5px solid ${({ theme }) => theme.colors.pink3}; + border: 1.5px solid ${({ theme }) => theme.colors.brand.primary}; border-radius: 28px; width: 52px; height: 28px; @@ -18,18 +18,18 @@ export const HiddenCheckbox = styled.input.attrs({ type: 'checkbox' })` width: 25px; height: 25px; border-radius: 50%; - background-color: ${({ theme }) => theme.colors.white}; - border: 1.5px solid ${({ theme }) => theme.colors.pink3}; + background-color: ${({ theme }) => theme.colors.background.primary}; + border: 1.5px solid ${({ theme }) => theme.colors.border.active}; transition: left 250ms linear; } &:checked { - background: ${({ theme }) => theme.colors.gradient}; - border: 1.5px solid ${({ theme }) => theme.colors.gradient}; + background: ${({ theme }) => theme.colors.brand.gradient}; + border: 1.5px solid ${({ theme }) => theme.colors.brand.gradient}; } &: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 988b0289..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', @@ -84,21 +84,6 @@ const PostUpload: React.FC = () => { 'luxury', ]; - // 게시물 업로드인지 수정인지 모드 확인 - useEffect(() => { - const handleMode = async () => { - const state = location.state as { mode?: string; postId?: number }; - if (state?.mode) { - setMode(state.mode); // 모드 상태를 설정 - } - if (state.mode === 'edit' && state?.postId && selectedImages.length === 0) { - await getPost(state.postId); - } - }; - - handleMode(); - }, []); - const handlePrev = () => { const state = location.state as { mode?: string; postId?: number }; if (mode === 'edit') { @@ -107,37 +92,19 @@ const PostUpload: React.FC = () => { navigate('/post/upload/photo/select', { state: { mode: mode, postId: state.postId } }); }; - const getPost = async (postId: number) => { - setIsLoading(true); - - try { - const response = await getPostDetailApi(postId); - - const { postImages, content, postStyletags, postClothings, isRepresentative } = response.data; - - setSelectedImages(postImages); - setContent(content); - setClothingInfos(postClothings ?? []); - setSelectedStyletag(postStyletags); - setIsRepresentative(isRepresentative); - } catch (error) { - const errorMessage = handleError(error, 'post'); - setModalContent(errorMessage); - setIsStatusModalOpen(true); - } finally { - setIsLoading(false); - } - }; - - const handleToggleSearchSheet = () => { + const handleSearchSheetToggle = () => { setIsSearchBottomSheetOpen((open) => !open); }; - const handleToggleStyleTagList = () => { + const handleStyleTagListToggle = () => { setIsStyletagListOpen((open) => !open); }; - const handleAddClothingInfo = (newClothingInfo: ClothingInfo) => { + const handleIsRepresentativeToggle = () => { + setIsRepresentative((isRepresentative) => !isRepresentative); + }; + + const handleClothingInfoAdd = (newClothingInfo: ClothingInfo) => { setClothingInfos((clothingInfos) => { // 중복 확인 (새로운 의류 정보가 이미 존재하지 않을 경우 추가) const isDuplicate = clothingInfos.some( @@ -151,25 +118,12 @@ const PostUpload: React.FC = () => { }); }; - const handleDeleteClothingInfo = (deleteClothingInfo: ClothingInfo) => { + const handleClothingInfoDelete = (deleteClothingInfo: ClothingInfo) => { const deletedClothingInfo = clothingInfos.filter((clothing) => clothing !== deleteClothingInfo); setClothingInfos(deletedClothingInfo); }; - const bottomSheetProps: BottomSheetProps = { - isOpenBottomSheet: isSearchBottomSheetOpen, - isHandlerVisible: false, - Component: SearchBottomSheetContent, - onCloseBottomSheet: () => { - setIsSearchBottomSheetOpen(false); - }, - componentProps: { - onClose: () => setIsSearchBottomSheetOpen(false), - onSelectClothingInfo: handleAddClothingInfo, - }, - }; - - const handleSelectStyletag = (tag: string) => { + const handleStyletagSelect = (tag: string) => { setSelectedStyletag((prev) => { // 선택된 태그가 이미 존재하면 제거 if (prev.includes(tag)) { @@ -181,10 +135,6 @@ const PostUpload: React.FC = () => { setIsStyletagListOpen(false); }; - const handleToggleIsRepresentative = () => { - setIsRepresentative(!isRepresentative); - }; - const cropImage = (imageUrl: string): Promise => { return new Promise((resolve) => { const img = new Image(); @@ -290,7 +240,29 @@ const PostUpload: React.FC = () => { setSelectedStyletag([]); setMode(''); - navigate(`/profile/${userId}`); + navigate(`/profile/${currentUserId}`); + } catch (error) { + const errorMessage = handleError(error, 'post'); + setModalContent(errorMessage); + setIsStatusModalOpen(true); + } finally { + setIsLoading(false); + } + }; + + const getPost = async (postId: number) => { + setIsLoading(true); + + try { + const response = await getPostDetailApi(postId); + + const { postImages, content, postStyletags, postClothings, isRepresentative } = response.data; + + setSelectedImages(postImages); + setContent(content); + setClothingInfos(postClothings ?? []); + setSelectedStyletag(postStyletags); + setIsRepresentative(isRepresentative); } catch (error) { const errorMessage = handleError(error, 'post'); setModalContent(errorMessage); @@ -300,6 +272,34 @@ const PostUpload: React.FC = () => { } }; + // 게시물 업로드인지 수정인지 모드 확인 + useEffect(() => { + const handleMode = async () => { + const state = location.state as { mode?: string; postId?: number }; + if (state?.mode) { + setMode(state.mode); // 모드 상태를 설정 + } + if (state.mode === 'edit' && state?.postId && selectedImages.length === 0) { + await getPost(state.postId); + } + }; + + handleMode(); + }, []); + + const bottomSheetProps: BottomSheetProps = { + isOpenBottomSheet: isSearchBottomSheetOpen, + isHandlerVisible: false, + Component: SearchBottomSheetContent, + onCloseBottomSheet: () => { + setIsSearchBottomSheetOpen(false); + }, + componentProps: { + onClose: () => setIsSearchBottomSheetOpen(false), + onSelectClothingInfo: handleClothingInfoAdd, + }, + }; + // api 처리 상태 모달 (성공/실패) const statusModalProps: ModalProps = { content: modalContent, @@ -320,7 +320,7 @@ const PostUpload: React.FC = () => { placeholder="문구를 작성하세요..." /> -
+
옷 정보 태그 @@ -335,29 +335,29 @@ const PostUpload: React.FC = () => { {clothingInfos.length > 0 && ( {clothingInfos.map((clothingObj, index) => ( - + ))} )} -
+
- + 스타일 태그 {isStyletagListOpen ? ( ) : selectedStyletag.length === 0 ? ( <> - + 미지정 ) : ( - + #{selectedStyletag[0]} @@ -368,10 +368,10 @@ const PostUpload: React.FC = () => { {styletags.map((tag) => ( handleSelectStyletag(tag)} + onClick={() => handleStyletagSelect(tag)} selected={selectedStyletag[0] === tag} > - + #{tag} @@ -381,9 +381,9 @@ const PostUpload: React.FC = () => { - 대표 OOTD 지정 + 대표 OOTD 지정
- +
diff --git a/src/pages/Post/PostUpload/styles.tsx b/src/pages/Post/PostUpload/styles.tsx index bd8ef4fe..9eb65c7a 100644 --- a/src/pages/Post/PostUpload/styles.tsx +++ b/src/pages/Post/PostUpload/styles.tsx @@ -46,7 +46,7 @@ export const StyledInput = styled.textarea` } ::placeholder { - color: ${({ theme }) => theme.colors.gray3}; + color: ${({ theme }) => theme.colors.text.tertiary}; font-family: 'Pretendard Variable'; font-weight: 300; font-size: 1rem; @@ -54,7 +54,7 @@ export const StyledInput = styled.textarea` /* Firefox */ &:-moz-placeholder { - color: ${({ theme }) => theme.colors.gray3}; + color: ${({ theme }) => theme.colors.text.tertiary}; font-family: 'Pretendard Variable'; font-weight: 300; font-size: 1rem; @@ -62,7 +62,7 @@ export const StyledInput = styled.textarea` /* Internet Explorer 10-11 */ &:-ms-input-placeholder { - color: ${({ theme }) => theme.colors.gray3}; + color: ${({ theme }) => theme.colors.text.tertiary}; font-family: 'Pretendard Variable'; font-weight: 300; font-size: 1rem; @@ -70,7 +70,7 @@ export const StyledInput = styled.textarea` /* Edge */ &::-ms-input-placeholder { - color: ${({ theme }) => theme.colors.gray3}; + color: ${({ theme }) => theme.colors.text.tertiary}; font-family: 'Pretendard Variable'; font-weight: 300; font-size: 1rem; @@ -78,7 +78,7 @@ export const StyledInput = styled.textarea` /* Safari */ &::placeholder { - color: ${({ theme }) => theme.colors.gray3}; + color: ${({ theme }) => theme.colors.text.tertiary}; font-family: 'Pretendard Variable'; font-weight: 300; font-size: 1rem; @@ -89,11 +89,11 @@ export const TagContainer = styled.div` display: flex; flex-direction: column; justify-content: center; - border-bottom: 0.0625rem solid ${({ theme }) => theme.colors.gray1}; + border-bottom: 0.0625rem solid ${({ theme }) => theme.colors.border.divider}; .label { padding: 0 0.9375rem; - color: ${({ theme }) => theme.colors.black}; + color: ${({ theme }) => theme.colors.text.primary}; } > div { @@ -113,18 +113,18 @@ export const TagContainer = styled.div` } .count { - color: ${({ theme }) => theme.colors.gray3}; + color: ${({ theme }) => theme.colors.text.tertiary}; } &.clothingTag { - border-top: 0.0625rem solid ${({ theme }) => theme.colors.gray1}; + border-top: 0.0625rem solid ${({ theme }) => theme.colors.border.divider}; right: 0.9375rem; } .not_selected { position: absolute; right: 2.8125rem; - color: ${({ theme }) => theme.colors.gray3}; + color: ${({ theme }) => theme.colors.text.tertiary}; } `; @@ -162,13 +162,13 @@ export const StyletagItem = styled.span<{ selected: boolean }>` padding: 0 0.65rem; height: 2rem; //min-width: 4.375rem; - background: ${({ selected, theme }) => (selected ? theme.colors.gradient : 'none')}; - border: 1px solid ${({ theme }) => theme.colors.pink2}; + background: ${({ selected, theme }) => (selected ? theme.colors.brand.gradient : 'none')}; + border: 1px solid ${({ theme }) => theme.colors.border.inactive}; border-radius: 8px; cursor: pointer; .tag { - color: ${({ selected, theme }) => (selected ? theme.colors.white : theme.colors.pink3)}; + color: ${({ selected, theme }) => (selected ? theme.colors.text.contrast : theme.colors.brand.primary)}; } `; @@ -180,7 +180,7 @@ export const PinnedPostToggleContainer = styled.label` :nth-child(2) { padding: 1.25rem 0.9375rem; - color: ${({ theme }) => theme.colors.black}; + color: ${({ theme }) => theme.colors.text.primary}; } div:last-child { diff --git a/src/pages/Post/index.tsx b/src/pages/Post/index.tsx index b3b8b0d7..ad69bbfd 100644 --- a/src/pages/Post/index.tsx +++ b/src/pages/Post/index.tsx @@ -37,8 +37,8 @@ const Post: React.FC = () => { const [modalContent, setModalContent] = useState(''); const [postPinStatus, setPostPinStatus] = useState<'지정' | '해제'>('지정'); - const userId = getCurrentUserId(); const navigate = useNavigate(); + 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/Post/styles.tsx b/src/pages/Post/styles.tsx index 437fc956..5e347dfe 100644 --- a/src/pages/Post/styles.tsx +++ b/src/pages/Post/styles.tsx @@ -11,7 +11,7 @@ export const InputLayout = styled.div` width: calc(100% - 3rem); height: 5.75rem; border-radius: 0.125rem; - border: 0.0625rem solid ${({ theme }) => theme.colors.gray3}; + border: 0.0625rem solid ${({ theme }) => theme.colors.gray[600]}; margin-bottom: 5.875rem; z-index: 2; margin-top: -3.75rem; @@ -22,7 +22,7 @@ export const InputLayout = styled.div` font-style: normal; font-weight: 300; line-height: 150%; - color: ${({ theme }) => theme.colors.black}; + color: ${({ theme }) => theme.colors.text.primary}; resize: none; } `; 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 (