Skip to content

Commit 4f468ec

Browse files
mimizaemimizae
committed
Merge branch 'dev' of https://github.com/oodd-team/oodd-web-react into feat/OD-154
2 parents d35e6f1 + 9bccb42 commit 4f468ec

34 files changed

Lines changed: 179 additions & 191 deletions

File tree

‎src/App.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,9 +57,10 @@ const protectedRoutes = [
5757
// 인증이 필요 없는 페이지 배열
5858
const publicRoutes = [
5959
{ path: '/login', element: <Login /> },
60-
{ path: '/signup', element: <SignUp /> },
6160
{ path: '/login/complete', element: <LoginComplete /> },
62-
{ path: '/terms-agreement', element: <TermsAgreement /> },
61+
62+
{ path: '/signup', element: <SignUp /> },
63+
{ path: '/signup/terms-agreement', element: <TermsAgreement /> },
6364
];
6465

6566
const App: React.FC = () => {

‎src/components/PostItem/dto.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { UserPostSummary } from '../../apis/post/dto';
1+
import { UserPostSummary } from '@apis/post/dto';
22

33
export interface Post extends UserPostSummary {}
44

‎src/components/PostItem/index.tsx‎

Lines changed: 16 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,40 @@
11
import React from 'react';
22
import { useNavigate } from 'react-router-dom';
3-
import theme from '../../styles/theme';
4-
import {
5-
PostItemContainer,
6-
PostImageContainer,
7-
PostImage,
8-
LikesCountStyledText,
9-
Icon,
10-
LikesOverlay,
11-
PinSvg,
12-
} from './style';
13-
import HeartSvg from '../../assets/default/like.svg';
14-
import MessageSvg from '../../assets/default/message.svg';
15-
import PinIcon from '../../assets/default/pin.svg';
16-
import { PostItemProps } from './dto';
3+
4+
import theme from '@styles/theme';
5+
import PinIcon from '@assets/default/pin.svg';
6+
import Like from '@components/Icons/Like';
7+
import Message from '@components/Icons/Message';
8+
9+
import type { PostItemProps } from './dto';
10+
import { PostItemLayout, PostImageContainer, PostImage, LikesCountStyledText, LikesOverlay, Pin } from './style';
1711

1812
const PostItem: React.FC<PostItemProps> = ({ post, isMyPost = true }) => {
1913
const navigate = useNavigate();
20-
const imageUrl = post.imageUrl;
14+
const postImageUrl = post.imageUrl;
2115

22-
const handleClick = () => {
16+
const handlePostItemClick = () => {
2317
const path = isMyPost ? `/my-post/${post.id}` : `/post/${post.id}`;
2418
navigate(path);
2519
};
2620

2721
return (
28-
<PostItemContainer onClick={handleClick}>
22+
<PostItemLayout onClick={handlePostItemClick}>
2923
<PostImageContainer>
30-
<PostImage src={imageUrl} alt={`post-${post.id}`} />
31-
{post.isRepresentative && <PinSvg src={PinIcon} />}
24+
<PostImage src={postImageUrl} alt={`post-${post.id}`} />
25+
{post.isRepresentative && <Pin src={PinIcon} />}
3226
<LikesOverlay>
33-
<Icon src={HeartSvg} alt="heart icon" />
27+
<Like />
3428
<LikesCountStyledText $textTheme={{ style: 'caption1-regular' }} color={theme.colors.gray3}>
3529
{post.postLikesCount}
3630
</LikesCountStyledText>
37-
<Icon src={MessageSvg} alt="message icon" />
31+
<Message />
3832
<LikesCountStyledText $textTheme={{ style: 'caption1-regular' }} color={theme.colors.gray3}>
3933
{post.postCommentsCount}
4034
</LikesCountStyledText>
4135
</LikesOverlay>
4236
</PostImageContainer>
43-
</PostItemContainer>
37+
</PostItemLayout>
4438
);
4539
};
4640

‎src/components/PostItem/style.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import styled from 'styled-components';
2-
import { StyledText } from '../Text/StyledText';
2+
import { StyledText } from '@components/Text/StyledText';
33

4-
export const PostItemContainer = styled.article`
4+
export const PostItemLayout = styled.article`
55
flex: 1 1 calc(50% - 0.5rem); /* 기본적으로 두 개씩 배치되도록 설정 */
66
width: 100%;
77
max-width: 67.5rem; /* 최대 너비 설정 */
@@ -59,7 +59,7 @@ export const LikesCountStyledText = styled(StyledText)`
5959
margin: 0 8px 0.5rem 4px;
6060
`;
6161

62-
export const PinSvg = styled.img`
62+
export const Pin = styled.img`
6363
display: flex;
6464
position: absolute;
6565
top: 0.75rem;

‎src/components/TopBar/dto.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
export interface TopBarProps {
2-
text?: string; // 텍스트, optional prop
3-
RightButtonSrc?: string; // KebabMenuButton src의 Optional prop
4-
LeftButtonSrc?: string; // BackButton src의 Optional prop
5-
onLeftClick?: () => void; // BackButton src의 Optional prop
6-
onRightClick?: () => void; // KebabMenuButton src의 Optional prop
2+
text?: string;
3+
RightButtonSrc?: string;
4+
LeftButtonSrc?: string;
5+
onClickLeftButton?: () => void;
6+
onClickRightButton?: () => void;
77
$withBorder?: boolean;
88
}
99

10-
export interface TopbarLayoutProps {
10+
export interface TopBarLayoutProps {
1111
$withBorder?: boolean;
1212
}

‎src/components/TopBar/index.tsx‎

Lines changed: 36 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,49 @@
1-
import theme from '../../styles/theme';
2-
import { TopbarLayout, StyledTextLayout, LeftButton, RightButton } from './styles';
1+
import React from 'react';
32
import { useNavigate } from 'react-router-dom';
4-
import { TopBarProps } from './dto';
3+
4+
import theme from '@styles/theme';
5+
6+
import type { TopBarProps } from './dto';
7+
import { TopBarLayout, StyledTextWrapper, LeftButton, RightButton } from './styles';
58

69
const TopBar: React.FC<TopBarProps> = ({
710
text = '',
811
RightButtonSrc,
912
LeftButtonSrc,
10-
onLeftClick,
11-
onRightClick,
13+
onClickLeftButton,
14+
onClickRightButton,
1215
$withBorder = false,
1316
}) => {
14-
const nav = useNavigate();
17+
const navigate = useNavigate();
1518

1619
return (
17-
<>
18-
<TopbarLayout $withBorder={$withBorder}>
19-
<LeftButton
20-
src={LeftButtonSrc}
21-
onClick={() => {
22-
if (onLeftClick) {
23-
onLeftClick();
24-
} else {
25-
nav(-1);
26-
}
27-
}}
28-
>
29-
<img src={LeftButtonSrc || ''} alt="뒤로가기" />
30-
</LeftButton>
31-
<StyledTextLayout $textTheme={{ style: 'body1-bold' }} color={theme.colors.black}>
32-
{text}
33-
</StyledTextLayout>
34-
<RightButton
35-
src={RightButtonSrc}
36-
onClick={() => {
37-
if (onRightClick) {
38-
onRightClick();
39-
}
40-
}}
41-
>
42-
<img src={RightButtonSrc} alt="메뉴" />
43-
</RightButton>
44-
</TopbarLayout>
45-
</>
20+
<TopBarLayout $withBorder={$withBorder}>
21+
<LeftButton
22+
src={LeftButtonSrc}
23+
onClick={() => {
24+
if (onClickLeftButton) {
25+
onClickLeftButton();
26+
} else {
27+
navigate(-1);
28+
}
29+
}}
30+
>
31+
<img src={LeftButtonSrc || ''} alt="뒤로가기" />
32+
</LeftButton>
33+
<StyledTextWrapper $textTheme={{ style: 'body1-bold' }} color={theme.colors.black}>
34+
{text}
35+
</StyledTextWrapper>
36+
<RightButton
37+
src={RightButtonSrc}
38+
onClick={() => {
39+
if (onClickRightButton) {
40+
onClickRightButton();
41+
}
42+
}}
43+
>
44+
<img src={RightButtonSrc} alt="메뉴" />
45+
</RightButton>
46+
</TopBarLayout>
4647
);
4748
};
4849

‎src/components/TopBar/styles.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import styled from 'styled-components';
2-
import { TopbarLayoutProps } from './dto';
3-
import { StyledText } from '../Text/StyledText';
2+
import { StyledText } from '@components/Text/StyledText';
3+
import type { TopBarLayoutProps } from './dto';
44

5-
export const TopbarLayout = styled.header<TopbarLayoutProps>`
5+
export const TopBarLayout = styled.header<TopBarLayoutProps>`
66
display: flex;
77
position: sticky;
88
top: 0; /* 부모 요소의 상단에 붙도록 설정 */
@@ -18,7 +18,7 @@ export const TopbarLayout = styled.header<TopbarLayoutProps>`
1818
`}
1919
`;
2020

21-
export const StyledTextLayout = styled(StyledText)`
21+
export const StyledTextWrapper = styled(StyledText)`
2222
flex-direction: column;
2323
align-items: center;
2424
`;

‎src/components/UserProfile/dto.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export interface UserProfileProps {
2+
userImg?: string; // string | undefined
3+
bio?: string;
4+
nickname: string;
5+
}

‎src/components/UserProfile/index.tsx‎

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,23 @@
11
import React from 'react';
2-
import { StyledText } from '../Text/StyledText';
3-
import theme from '../../styles/theme';
4-
import { UserProfileContainer, UserImg, UserDetails, BioStyledText } from './style';
52

6-
interface UserProfileProps {
7-
userImg?: string; // string | undefined
8-
bio?: string;
9-
nickname: string;
10-
}
3+
import theme from '@styles/theme';
4+
import { StyledText } from '@components/Text/StyledText';
5+
6+
import type { UserProfileProps } from './dto';
7+
import { UserProfileLayout, UserImg, UserDetailsContainer, StyledBio } from './style';
118

129
const UserProfile: React.FC<UserProfileProps> = React.memo(({ userImg, bio = '', nickname }) => {
1310
const truncatedBio = bio ? (bio.length > 50 ? bio.substring(0, 50) + '...' : bio) : '';
1411
return (
15-
<UserProfileContainer>
12+
<UserProfileLayout>
1613
<UserImg src={userImg} alt={`${nickname}'s profile`} />
17-
<UserDetails>
14+
<UserDetailsContainer>
1815
<StyledText $textTheme={{ style: 'headline2-bold' }}>{nickname}</StyledText>
19-
<BioStyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.gray3}>
16+
<StyledBio $textTheme={{ style: 'body2-regular' }} color={theme.colors.gray3}>
2017
{truncatedBio}
21-
</BioStyledText>
22-
</UserDetails>
23-
</UserProfileContainer>
18+
</StyledBio>
19+
</UserDetailsContainer>
20+
</UserProfileLayout>
2421
);
2522
});
2623

‎src/components/UserProfile/style.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import styled from 'styled-components';
2-
import { StyledText } from '../Text/StyledText';
2+
import { StyledText } from '@components/Text/StyledText';
33

4-
export const UserProfileContainer = styled.section`
4+
export const UserProfileLayout = styled.section`
55
display: flex;
66
flex-direction: row;
77
`;
@@ -12,7 +12,7 @@ export const UserImg = styled.img`
1212
border-radius: 50%;
1313
`;
1414

15-
export const UserDetails = styled.section`
15+
export const UserDetailsContainer = styled.section`
1616
display: flex;
1717
flex-direction: column;
1818
justify-content: center;
@@ -21,7 +21,7 @@ export const UserDetails = styled.section`
2121
margin-left: 1rem;
2222
`;
2323

24-
export const BioStyledText = styled(StyledText)`
24+
export const StyledBio = styled(StyledText)`
2525
display: -webkit-box;
2626
-webkit-line-clamp: 2;
2727
-webkit-box-orient: vertical;

0 commit comments

Comments
 (0)