From c15e7f1c34d44e5f88082d1e1c43932acfa5048b Mon Sep 17 00:00:00 2001 From: xxinzzi <156905845+xxinzzi@users.noreply.github.com> Date: Tue, 31 Dec 2024 17:45:46 +0900 Subject: [PATCH 1/5] =?UTF-8?q?Refactor:=20PostImageSelect=20=EB=A6=AC?= =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../PostImageSelect/ImageSwiper/index.tsx | 4 ++-- src/pages/Post/PostImageSelect/index.tsx | 20 +++++++++---------- 2 files changed, 12 insertions(+), 12 deletions(-) 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 ))} - + { @@ -55,7 +55,7 @@ const PostImageSelect: React.FC = () => { }; // 파일 선택기에서 사진 업로드 - const handleSelectImage = () => { + const handleImageSelect = () => { if (fileInputRef.current) { fileInputRef.current.click(); } @@ -74,14 +74,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 +89,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 +111,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 +121,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); @@ -160,13 +160,13 @@ const PostImageSelect: React.FC = () => { ) : ( - + )} From 2d324bf8d3ca76a016f8142e1fe15fc1706717bb Mon Sep 17 00:00:00 2001 From: xxinzzi <156905845+xxinzzi@users.noreply.github.com> Date: Tue, 31 Dec 2024 17:46:10 +0900 Subject: [PATCH 2/5] =?UTF-8?q?Refactor:=20PostUpload=20=EB=A6=AC=ED=8C=A9?= =?UTF-8?q?=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SearchBottomSheetContent/index.tsx | 68 +++++----- src/pages/Post/PostUpload/index.tsx | 128 +++++++++--------- 2 files changed, 98 insertions(+), 98 deletions(-) diff --git a/src/pages/Post/PostUpload/SearchBottomSheetContent/index.tsx b/src/pages/Post/PostUpload/SearchBottomSheetContent/index.tsx index 66cb32da..daf37bc5 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 (
@@ -164,7 +164,7 @@ const SearchBottomSheetContent: React.FC = ({ onClose, o {searchQuery && searchResult.length > 0 ? ( {searchResult.map((searchResultItem, index) => ( - handleAddClothingInfo(searchResultItem)}> + handleClothingInfoAdd(searchResultItem)}> {searchResultItem.title.replace(/<[^]+>/g, '')} />
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 지정
- +
From 9ff753d1cfeff9bd4925fb3c4ef92e041552e870 Mon Sep 17 00:00:00 2001 From: xxinzzi <156905845+xxinzzi@users.noreply.github.com> Date: Thu, 2 Jan 2025 15:03:57 +0900 Subject: [PATCH 3/5] =?UTF-8?q?Refator:=20=EC=BB=AC=EB=9F=AC=EC=8B=9C?= =?UTF-8?q?=EC=8A=A4=ED=85=9C=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/NotFound/index.tsx | 4 +- src/pages/NotFound/styles.tsx | 4 +- src/pages/Post/PostBase/ImageSwiper/index.tsx | 2 +- .../CommentItem/index.tsx | 2 +- .../MenuButtonList/styles.tsx | 2 +- .../LikeCommentBottomSheetContent/index.tsx | 13 +- .../LikeCommentBottomSheetContent/styles.tsx | 8 +- src/pages/Post/PostBase/index.tsx | 14 +- src/pages/Post/PostBase/styles.tsx | 16 +- src/pages/Post/PostImageSelect/styles.tsx | 1 - src/pages/Post/PostInstaConnect/index.tsx | 2 +- src/pages/Post/PostInstaConnect/styles.tsx | 10 +- .../Post/PostUpload/ImageSwiper/styles.tsx | 2 +- .../SearchBottomSheetContent/index.tsx | 4 +- .../SearchBottomSheetContent/styles.tsx | 22 +-- .../Post/PostUpload/ToggleSwitch/styles.tsx | 8 +- src/pages/Post/PostUpload/styles.tsx | 28 ++-- src/pages/Post/index.tsx | 2 +- src/pages/Post/styles.tsx | 4 +- src/pages/TermsAgreement/index.tsx | 138 ++++++++++++++++++ 20 files changed, 215 insertions(+), 71 deletions(-) create mode 100644 src/pages/TermsAgreement/index.tsx 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}; + background-color: ${({ theme }) => theme.colors.brand.primary}; color: ${({ theme }) => theme.colors.white}; } `; 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..300a1e60 100644 --- a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/index.tsx +++ b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/index.tsx @@ -25,6 +25,8 @@ 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'; @@ -32,9 +34,6 @@ 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 }) => { @@ -338,7 +337,7 @@ const LikeCommentBottomSheetContent: React.FC = ({ setActiveTab('likes')}> 좋아요 {postLikeCount || 0} @@ -346,7 +345,7 @@ const LikeCommentBottomSheetContent: React.FC = ({ setActiveTab('comments')}> 코멘트 {postCommentCount || 0} @@ -356,7 +355,7 @@ const LikeCommentBottomSheetContent: React.FC = ({ {activeTab === 'likes' && (postLikeCount === 0 ? ( - + 아직 좋아요가 없습니다 ) : ( @@ -375,7 +374,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..c61584f1 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; diff --git a/src/pages/Post/PostBase/index.tsx b/src/pages/Post/PostBase/index.tsx index 074145ed..08c15d67 100644 --- a/src/pages/Post/PostBase/index.tsx +++ b/src/pages/Post/PostBase/index.tsx @@ -164,10 +164,18 @@ const PostBase: React.FC = ({ onClickMenu }) => { {post?.user && profileImg} - + {user.nickname} - + {timeAgo} @@ -208,7 +216,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..e77127fc 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%; @@ -120,7 +120,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)` @@ -143,7 +143,7 @@ export const IconWrapper = styled.div` span { font-size: 15px; - color: #000; + color: ${({ theme }) => theme.colors.text.primary}; margin-right: 16px; } `; @@ -185,7 +185,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 +196,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/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..7a535d68 100644 --- a/src/pages/Post/PostInstaConnect/index.tsx +++ b/src/pages/Post/PostInstaConnect/index.tsx @@ -75,7 +75,7 @@ const PostInstaConnect: React.FC = () => { {!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/PostUpload/ImageSwiper/styles.tsx b/src/pages/Post/PostUpload/ImageSwiper/styles.tsx index 0f216167..e50a90fd 100644 --- a/src/pages/Post/PostUpload/ImageSwiper/styles.tsx +++ b/src/pages/Post/PostUpload/ImageSwiper/styles.tsx @@ -83,7 +83,7 @@ export const StyledPagination = styled.div` width: 65px; height: 34px; color: white; - background: ${({ theme }) => theme.colors.gradient}; + background: ${({ theme }) => theme.colors.brand.gradient}; border-radius: 17px; .swiper-pagination-custom { diff --git a/src/pages/Post/PostUpload/SearchBottomSheetContent/index.tsx b/src/pages/Post/PostUpload/SearchBottomSheetContent/index.tsx index daf37bc5..5f246c27 100644 --- a/src/pages/Post/PostUpload/SearchBottomSheetContent/index.tsx +++ b/src/pages/Post/PostUpload/SearchBottomSheetContent/index.tsx @@ -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/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; } `; diff --git a/src/pages/TermsAgreement/index.tsx b/src/pages/TermsAgreement/index.tsx new file mode 100644 index 00000000..648296c2 --- /dev/null +++ b/src/pages/TermsAgreement/index.tsx @@ -0,0 +1,138 @@ +import React, { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; + +import { postTermsAgreementApi } from '@apis/user'; +import { handleError } from '@apis/util/handleError'; + +import Back from '@assets/arrow/left.svg'; +import OODDlogo from '@assets/default/oodd.svg'; + +import { OODDFrame } from '@components/Frame/Frame'; +import { StyledText } from '@components/Text/StyledText'; +import BottomButton from '@components/BottomButton'; +import TopBar from '@components/TopBar'; +import Modal from '@components/Modal'; + +import { getCurrentUserId } from '@utils/getCurrentUserId'; + +import { LogoWrapper, LogoImg } from '@pages/SignUp/style'; + +import { TermsAgreementLayout, StyledTitle, CheckboxList, CheckboxItem, CheckboxInput, Divider } from './styles'; + +const TermsAgreement: React.FC = () => { + const [isModalOpen, setIsModalOpen] = useState(false); + const [modalMessage, setModalMessage] = useState(''); + + const navigate = useNavigate(); + const currentUserId = getCurrentUserId(); + + const [agreements, setAgreements] = useState({ + all: false, + terms: false, + privacy: false, + marketing: false, + }); + + const checkboxData: { key: keyof typeof agreements; label: string }[] = [ + { key: 'terms', label: '이용약관 동의 (필수)' }, + { key: 'privacy', label: '개인정보 수집 및 이용 동의 (필수)' }, + { key: 'marketing', label: '광고성 정보 수신 동의 (선택)' }, + ]; + + const handleAgreementChange = (key: keyof typeof agreements) => { + setAgreements((prev) => { + const updated = { ...prev, [key]: !prev[key] }; + // 필수 약관이 모두 동의되면 전체 동의 체크 + updated.all = updated.terms && updated.privacy && updated.marketing; + return updated; + }); + }; + + const handleAllAgreementChange = () => { + const newAllState = !agreements.all; + setAgreements({ + all: newAllState, + terms: newAllState, + privacy: newAllState, + marketing: newAllState, + }); + }; + + // 완료 버튼을 눌렀을 때 실행되는 함수 + const handleCompletedClick = async () => { + if (!currentUserId) { + setModalMessage('회원 정보가 없습니다.\n로그인 해 주세요!'); + setIsModalOpen(true); + return; + } + + try { + const response = await postTermsAgreementApi(currentUserId); + console.log(response); + navigate('/'); // 성공 시 홈으로 이동 + } catch (error) { + console.error('약관 동의 API 호출 실패:', error); + const errorMessage = handleError(error); + setModalMessage(errorMessage); + setIsModalOpen(true); + } + }; + + const navigateToLogin = () => { + navigate('/login'); + }; + + return ( + + + + + + + + OODD에 오신 것을 환영해요 🥳 + + + + + + + ㅆ{/*전체 동의와 개별 동의 구분*/} + + {checkboxData.map(({ key, label }) => ( + + handleAgreementChange(key)} + id={key} + /> + + + ))} + + + {isModalOpen && } + + + ); +}; + +export default TermsAgreement; From 19d5a4abd89ef75547e4bd2d10ecedd25b3d3b36 Mon Sep 17 00:00:00 2001 From: xxinzzi <156905845+xxinzzi@users.noreply.github.com> Date: Thu, 2 Jan 2025 15:43:14 +0900 Subject: [PATCH 4/5] =?UTF-8?q?Refactor:=20Icon=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Post/PostBase/index.tsx | 17 +++++++++-------- src/pages/Post/PostBase/styles.tsx | 15 +++++++-------- src/pages/Post/PostImageSelect/index.tsx | 4 ++-- src/pages/Post/PostUpload/ImageSwiper/index.tsx | 6 ++++-- .../Post/PostUpload/ImageSwiper/styles.tsx | 7 ++----- 5 files changed, 24 insertions(+), 25 deletions(-) diff --git a/src/pages/Post/PostBase/index.tsx b/src/pages/Post/PostBase/index.tsx index 08c15d67..b0c904bc 100644 --- a/src/pages/Post/PostBase/index.tsx +++ b/src/pages/Post/PostBase/index.tsx @@ -13,8 +13,7 @@ import { postIdAtom, userAtom, isPostRepresentativeAtom } from '@recoil/Post/Pos 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 Like from '@components/Icons/Like'; import Message from '@assets/default/message.svg'; import More from '@assets/default/more.svg'; @@ -185,16 +184,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} diff --git a/src/pages/Post/PostBase/styles.tsx b/src/pages/Post/PostBase/styles.tsx index e77127fc..a0f40f83 100644 --- a/src/pages/Post/PostBase/styles.tsx +++ b/src/pages/Post/PostBase/styles.tsx @@ -133,6 +133,7 @@ export const IconRow = styled.div` height: 20px; align-items: center; padding: 0 20px; + gap: 16px; `; export const IconWrapper = styled.div` @@ -140,22 +141,20 @@ export const IconWrapper = styled.div` align-items: center; gap: 8px; cursor: pointer; + height: 22px; span { font-size: 15px; color: ${({ theme }) => theme.colors.text.primary}; - margin-right: 16px; } `; 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` diff --git a/src/pages/Post/PostImageSelect/index.tsx b/src/pages/Post/PostImageSelect/index.tsx index b398505c..25d54552 100644 --- a/src/pages/Post/PostImageSelect/index.tsx +++ b/src/pages/Post/PostImageSelect/index.tsx @@ -14,8 +14,8 @@ import { import { getCurrentUserId } from '@utils/getCurrentUserId'; import Left from '@assets/arrow/left.svg'; -import PhotoBig from '@assets/default/photo-big.svg'; import X from '@assets/default/x.svg'; +import Photo from '@components/Icons/Photo'; import BottomButton from '@components/BottomButton'; import { OODDFrame } from '@components/Frame/Frame'; @@ -156,7 +156,7 @@ const PostImageSelect: React.FC = () => { 사진을 여기에 끌어다 놓으세요 - + ) : ( diff --git a/src/pages/Post/PostUpload/ImageSwiper/index.tsx b/src/pages/Post/PostUpload/ImageSwiper/index.tsx index 50677c5d..a643f0c2 100644 --- a/src/pages/Post/PostUpload/ImageSwiper/index.tsx +++ b/src/pages/Post/PostUpload/ImageSwiper/index.tsx @@ -1,4 +1,5 @@ import { useRef } from 'react'; +import ReactDOMServer from 'react-dom/server'; import { Navigation, Pagination } from 'swiper/modules'; import { Swiper, SwiperRef, SwiperSlide } from 'swiper/react'; @@ -6,7 +7,7 @@ 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 = ReactDOMServer.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 e50a90fd..1bda07f0 100644 --- a/src/pages/Post/PostUpload/ImageSwiper/styles.tsx +++ b/src/pages/Post/PostUpload/ImageSwiper/styles.tsx @@ -82,7 +82,7 @@ export const StyledPagination = styled.div` align-items: center; width: 65px; height: 34px; - color: white; + color: ${({ theme }) => theme.colors.text.contrast}; background: ${({ theme }) => theme.colors.brand.gradient}; border-radius: 17px; @@ -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; From 5c09412f52150559de4271046e490d07facf2c68 Mon Sep 17 00:00:00 2001 From: xxinzzi <156905845+xxinzzi@users.noreply.github.com> Date: Thu, 2 Jan 2025 16:11:51 +0900 Subject: [PATCH 5/5] =?UTF-8?q?Remove:=20=EC=9E=98=EB=AA=BB=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=EB=90=9C=20=ED=8C=8C=EC=9D=BC=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/TermsAgreement/index.tsx | 138 ----------------------------- 1 file changed, 138 deletions(-) delete mode 100644 src/pages/TermsAgreement/index.tsx diff --git a/src/pages/TermsAgreement/index.tsx b/src/pages/TermsAgreement/index.tsx deleted file mode 100644 index 648296c2..00000000 --- a/src/pages/TermsAgreement/index.tsx +++ /dev/null @@ -1,138 +0,0 @@ -import React, { useState } from 'react'; -import { useNavigate } from 'react-router-dom'; - -import { postTermsAgreementApi } from '@apis/user'; -import { handleError } from '@apis/util/handleError'; - -import Back from '@assets/arrow/left.svg'; -import OODDlogo from '@assets/default/oodd.svg'; - -import { OODDFrame } from '@components/Frame/Frame'; -import { StyledText } from '@components/Text/StyledText'; -import BottomButton from '@components/BottomButton'; -import TopBar from '@components/TopBar'; -import Modal from '@components/Modal'; - -import { getCurrentUserId } from '@utils/getCurrentUserId'; - -import { LogoWrapper, LogoImg } from '@pages/SignUp/style'; - -import { TermsAgreementLayout, StyledTitle, CheckboxList, CheckboxItem, CheckboxInput, Divider } from './styles'; - -const TermsAgreement: React.FC = () => { - const [isModalOpen, setIsModalOpen] = useState(false); - const [modalMessage, setModalMessage] = useState(''); - - const navigate = useNavigate(); - const currentUserId = getCurrentUserId(); - - const [agreements, setAgreements] = useState({ - all: false, - terms: false, - privacy: false, - marketing: false, - }); - - const checkboxData: { key: keyof typeof agreements; label: string }[] = [ - { key: 'terms', label: '이용약관 동의 (필수)' }, - { key: 'privacy', label: '개인정보 수집 및 이용 동의 (필수)' }, - { key: 'marketing', label: '광고성 정보 수신 동의 (선택)' }, - ]; - - const handleAgreementChange = (key: keyof typeof agreements) => { - setAgreements((prev) => { - const updated = { ...prev, [key]: !prev[key] }; - // 필수 약관이 모두 동의되면 전체 동의 체크 - updated.all = updated.terms && updated.privacy && updated.marketing; - return updated; - }); - }; - - const handleAllAgreementChange = () => { - const newAllState = !agreements.all; - setAgreements({ - all: newAllState, - terms: newAllState, - privacy: newAllState, - marketing: newAllState, - }); - }; - - // 완료 버튼을 눌렀을 때 실행되는 함수 - const handleCompletedClick = async () => { - if (!currentUserId) { - setModalMessage('회원 정보가 없습니다.\n로그인 해 주세요!'); - setIsModalOpen(true); - return; - } - - try { - const response = await postTermsAgreementApi(currentUserId); - console.log(response); - navigate('/'); // 성공 시 홈으로 이동 - } catch (error) { - console.error('약관 동의 API 호출 실패:', error); - const errorMessage = handleError(error); - setModalMessage(errorMessage); - setIsModalOpen(true); - } - }; - - const navigateToLogin = () => { - navigate('/login'); - }; - - return ( - - - - - - - - OODD에 오신 것을 환영해요 🥳 - - - - - - - ㅆ{/*전체 동의와 개별 동의 구분*/} - - {checkboxData.map(({ key, label }) => ( - - handleAgreementChange(key)} - id={key} - /> - - - ))} - - - {isModalOpen && } - - - ); -}; - -export default TermsAgreement;