@@ -164,7 +164,7 @@ const SearchBottomSheetContent: React.FC
= ({ onClose, o
{searchQuery && searchResult.length > 0 ? (
{searchResult.map((searchResultItem, index) => (
- handleAddClothingInfo(searchResultItem)}>
+ handleClothingInfoAdd(searchResultItem)}>
]+>/g, '')} />
@@ -173,7 +173,7 @@ const SearchBottomSheetContent: React.FC = ({ onClose, o
{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..b8d69b7c 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;
@@ -19,13 +19,13 @@ export const HiddenCheckbox = styled.input.attrs({ type: 'checkbox' })`
height: 25px;
border-radius: 50%;
background-color: ${({ theme }) => theme.colors.white};
- border: 1.5px solid ${({ theme }) => theme.colors.pink3};
+ 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 {
diff --git a/src/pages/Post/PostUpload/index.tsx b/src/pages/Post/PostUpload/index.tsx
index 988b0289..32c75f3d 100644
--- a/src/pages/Post/PostUpload/index.tsx
+++ b/src/pages/Post/PostUpload/index.tsx
@@ -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();
@@ -300,6 +250,56 @@ const PostUpload: React.FC = () => {
}
};
+ 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);
+ }
+ };
+
+ // 게시물 업로드인지 수정인지 모드 확인
+ 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,13 +335,13 @@ const PostUpload: React.FC = () => {
{clothingInfos.length > 0 && (
{clothingInfos.map((clothingObj, index) => (
-
+
))}
)}
-
+
스타일 태그
@@ -368,7 +368,7 @@ const PostUpload: React.FC = () => {
{styletags.map((tag) => (
handleSelectStyletag(tag)}
+ onClick={() => handleStyletagSelect(tag)}
selected={selectedStyletag[0] === tag}
>
@@ -383,7 +383,7 @@ const PostUpload: React.FC = () => {
대표 OOTD 지정
-
+
diff --git a/src/pages/Post/PostUpload/styles.tsx b/src/pages/Post/PostUpload/styles.tsx
index bd8ef4fe..17a34396 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.white : 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..baddc707 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 userId = getCurrentUserId();
const handleMenuOpen = () => {
if (isMyPost) {
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;
}
`;