Skip to content

[OD-169] PostImageSelect, PostUpload 리팩토링 #125

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gustn99 merged 5 commits into from
Jan 5, 2025
Merged

[OD-169] PostImageSelect, PostUpload 리팩토링 #125

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c15e7f1
Refactor: PostImageSelect 리팩토링
xxinzzi Dec 31, 2024
2d324bf
Refactor: PostUpload 리팩토링
xxinzzi Dec 31, 2024
9ff753d
Refator: 컬러시스템 적용
xxinzzi Jan 2, 2025
19d5a4a
Refactor: Icon 컴포넌트 적용
xxinzzi Jan 2, 2025
5c09412
Remove: 잘못 생성된 파일 삭제
xxinzzi Jan 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/pages/NotFound/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const NotFound = () => {
<OODDFrame>
<NotFoundContainer>
<TextContainer>
<StyledText $textTheme={{ style: 'display1-bold' }} color={theme.colors.pink3}>
<StyledText $textTheme={{ style: 'display1-bold' }} color={theme.colors.brand.primary}>
404 ERROR
</StyledText>
<StyledText $textTheme={{ style: 'headline2-medium' }}>죄송합니다. 페이지를 찾을 수 없습니다.</StyledText>
Expand All @@ -26,7 +26,7 @@ const NotFound = () => {
</div>
</TextContainer>
<ButtonContainer>
<StyledButton as="a" href="/" $textTheme={{ style: 'body2-regular' }} color={theme.colors.pink3}>
<StyledButton as="a" href="/" $textTheme={{ style: 'body2-regular' }} color={theme.colors.brand.primary}>
메인으로
</StyledButton>
<StyledButton
Expand Down
4 changes: 2 additions & 2 deletions src/pages/NotFound/styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,13 +38,13 @@ export const StyledButton = styled(StyledText)`
display: inline-block;
text-align: center;
padding: 6px 16px;
border: 1px solid ${({ theme }) => 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};
}
`;
2 changes: 1 addition & 1 deletion src/pages/Post/PostBase/ImageSwiper/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
2 changes: 1 addition & 1 deletion src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const CommentItem: React.FC<CommentItemProps> = ({ comment, handleUserClick, han
<StyledText $textTheme={{ style: 'body2-regular' }}>{comment.content}</StyledText>
</CommentContent>
<RightContainer>
<StyledText className="timeAgo" $textTheme={{ style: 'caption2-regular' }} color={theme.colors.gray3}>
<StyledText className="timeAgo" $textTheme={{ style: 'caption2-regular' }} color={theme.colors.text.tertiary}>
{timeAgo}
</StyledText>
<MenuBtn onClick={(event) => handleMenuOpen(comment, event)}>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/Post/PostBase/LikeCommentBottomSheetContent/MenuButtonList/styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
13 changes: 6 additions & 7 deletions src/pages/Post/PostBase/LikeCommentBottomSheetContent/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,16 +25,15 @@ 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';
import type { ModalProps } from '@components/Modal/dto';

import type { LikeCommentBottomSheetProps } from '../dto';

import CommentItem from './CommentItem/index';
import MenuButtonList from './MenuButtonList/index';

Comment on lines +28 to -37
Copy link
Collaborator

@gustn99 gustn99 Jan 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저희가 정한 import문 규칙 상 상대경로가 아래로 가는 것이 맞습니다! 린트 적용해서 수정 부탁드립니당

import { TabContainer, Tab, ContentContainer, Content, BigUserProfile, LikeItem, InputLayout } from './styles';

const LikeCommentBottomSheetContent: React.FC<LikeCommentBottomSheetProps> = ({ tab, likeCount, commentCount }) => {
Expand Down Expand Up @@ -338,15 +337,15 @@ const LikeCommentBottomSheetContent: React.FC<LikeCommentBottomSheetProps> = ({
<Tab $active={activeTab === 'likes'} onClick={() => setActiveTab('likes')}>
<StyledText
$textTheme={{ style: 'body2-bold' }}
color={activeTab === 'likes' ? theme.colors.pink : theme.colors.gray3}
color={activeTab === 'likes' ? theme.colors.brand.primary : theme.colors.text.tertiary}
>
좋아요 {postLikeCount || 0}
</StyledText>
</Tab>
<Tab $active={activeTab === 'comments'} onClick={() => setActiveTab('comments')}>
<StyledText
$textTheme={{ style: 'body2-bold' }}
color={activeTab === 'comments' ? theme.colors.pink : theme.colors.gray3}
color={activeTab === 'comments' ? theme.colors.brand.primary : theme.colors.text.tertiary}
>
코멘트 {postCommentCount || 0}
</StyledText>
Expand All @@ -356,7 +355,7 @@ const LikeCommentBottomSheetContent: React.FC<LikeCommentBottomSheetProps> = ({
<ContentContainer $isCommentTab={activeTab === 'comments'}>
{activeTab === 'likes' &&
(postLikeCount === 0 ? (
<Content $textTheme={{ style: 'body2-medium' }} color={theme.colors.gray3}>
<Content $textTheme={{ style: 'body2-medium' }} color={theme.colors.text.tertiary}>
아직 좋아요가 없습니다
</Content>
) : (
Expand All @@ -375,7 +374,7 @@ const LikeCommentBottomSheetContent: React.FC<LikeCommentBottomSheetProps> = ({
{activeTab === 'comments' && (
<>
{postCommentCount === 0 ? (
<Content $textTheme={{ style: 'body2-medium' }} color={theme.colors.gray3}>
<Content $textTheme={{ style: 'body2-medium' }} color={theme.colors.text.tertiary}>
아직 댓글이 없습니다
</Content>
) : (
Expand Down
8 changes: 4 additions & 4 deletions src/pages/Post/PostBase/LikeCommentBottomSheetContent/styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -89,16 +89,16 @@ 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';
font-size: 1rem;
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;

Expand Down
31 changes: 20 additions & 11 deletions src/pages/Post/PostBase/index.tsx
View file
Open in desktop
Copy link
Collaborator

@gustn99 gustn99 Jan 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

함수 정의 사이에 ref 변수가 있습니다 순서 조정 부탁드려용

Original file line number Diff line number Diff line change
Expand Up @@ -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';
Copy link
Collaborator

@gustn99 gustn99 Jan 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 부분 외에도 린트를 적용해 수정해야 하는 부분들이 보입니다! 전체적인 점검 부탁드립니닷

import Message from '@assets/default/message.svg';
import More from '@assets/default/more.svg';

Expand Down Expand Up @@ -164,10 +163,18 @@ const PostBase: React.FC<PostBaseProps> = ({ onClickMenu }) => {
<UserProfile onClick={handleUserClick}>
{post?.user && <img src={post.user.profilePictureUrl} alt="profileImg" />}
</UserProfile>
<UserName onClick={handleUserClick} $textTheme={{ style: 'body2-medium' }} color={theme.colors.black}>
<UserName
onClick={handleUserClick}
$textTheme={{ style: 'body2-medium' }}
color={theme.colors.text.primary}
>
{user.nickname}
</UserName>
<StyledText className="timeAgo" $textTheme={{ style: 'caption2-regular' }} color={theme.colors.gray3}>
<StyledText
className="timeAgo"
$textTheme={{ style: 'caption2-regular' }}
color={theme.colors.text.tertiary}
>
{timeAgo}
</StyledText>
<MenuBtn onClick={onClickMenu}>
Expand All @@ -177,16 +184,18 @@ const PostBase: React.FC<PostBaseProps> = ({ onClickMenu }) => {

{!post ? <ImageSkeleton /> : <ImageSwiper images={post.postImages.map((image) => image.url)} />}

<ClothingInfoList className="post-mode">
{post?.postClothings?.map((clothingObj, index) => (
<ClothingInfoItem key={index} clothingObj={clothingObj} />
))}
</ClothingInfoList>
{post?.postClothings && (
<ClothingInfoList className="post-mode">
{post.postClothings.map((clothingObj, index) => (
<ClothingInfoItem key={index} clothingObj={clothingObj} />
))}
</ClothingInfoList>
)}

<IconRow>
<IconWrapper>
<Icon onClick={togglePostLikeStatus}>
{post?.isPostLike ? <img src={LikeFill} alt="like" /> : <img src={Like} alt="like" />}
{post?.isPostLike ? <Like isFilled={true} color={theme.colors.brand.primary} /> : <Like />}
</Icon>
<span onClick={() => handleLikeCommentOpen('likes')}>{post?.postLikesCount ?? 0}</span>
</IconWrapper>
Expand All @@ -208,7 +217,7 @@ const PostBase: React.FC<PostBaseProps> = ({ onClickMenu }) => {
onClick={toggleTextDisplay}
$showFullText={showFullText}
$textTheme={{ style: 'body4-light' }}
color={theme.colors.black}
color={theme.colors.text.primary}
>
{post.content}
</Content>
Expand Down
31 changes: 15 additions & 16 deletions src/pages/Post/PostBase/styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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%;
Expand Down Expand Up @@ -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)`
Expand All @@ -133,29 +133,28 @@ export const IconRow = styled.div`
height: 20px;
align-items: center;
padding: 0 20px;
gap: 16px;
`;

export const IconWrapper = styled.div`
display: flex;
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`
Expand Down Expand Up @@ -185,7 +184,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;
Expand All @@ -196,7 +195,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;
}
`;
4 changes: 2 additions & 2 deletions src/pages/Post/PostImageSelect/ImageSwiper/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const ImageSwiper: React.FC<ImageSwiperProps> = ({ images, onProcessFile, onRemo
const fileInputRef = useRef<HTMLInputElement>(null);
const [currentSlide, setCurrentSlide] = useState(0);

const handleSelectImage = () => {
const handleImageSelect = () => {
if (fileInputRef.current) {
fileInputRef.current.click();
}
Expand Down Expand Up @@ -51,7 +51,7 @@ const ImageSwiper: React.FC<ImageSwiperProps> = ({ images, onProcessFile, onRemo
</SwiperSlide>
))}
<SwiperSlide className="add-btn-box">
<AddButton onClick={handleSelectImage}>
<AddButton onClick={handleImageSelect}>
<img src={Plus} />
</AddButton>
<HiddenFileInput
Expand Down
Loading
Loading