Skip to content

Commit 5a1db3e

Browse files
xxinzzixxinzzi
committed
Merge branch 'dev' of https://github.com/oodd-team/oodd-web-react into feat/OD-168
2 parents ffe9afb + b04aa20 commit 5a1db3e

28 files changed

Lines changed: 295 additions & 311 deletions

File tree

‎src/components/BottomButton/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const BottomButton: React.FC<BottomButtonProps> = ({ content, onClick, disabled
88
<>
99
<ButtonWrapper>
1010
<Button onClick={onClick} disabled={disabled}>
11-
<StyledText $textTheme={{ style: 'button1-medium', lineHeight: 2 }}>{content}</StyledText>
11+
<StyledText $textTheme={{ style: 'body1-regular', lineHeight: 2 }}>{content}</StyledText>
1212
</Button>
1313
</ButtonWrapper>
1414
</>

‎src/components/BottomButton/styles.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,14 @@ export const ButtonWrapper = styled.div`
88
transform: translateX(-50%);
99
width: 100%;
1010
height: 6.25rem;
11-
background-color: ${({ theme }) => theme.colors.white};
11+
background-color: ${({ theme }) => theme.colors.background.primary};
1212
justify-content: flex-end;
1313
z-index: 1;
1414
border: none;
1515
`;
1616

1717
export const Button = styled.button<{ disabled: boolean }>`
18-
background: ${({ disabled, theme }) =>
18+
background: ${({ disabled, theme }) => //theme에 없어서 그냥 뒀음
1919
disabled ? 'linear-gradient(93deg, #FFC1D6 1.22%, #F8D4D4 99.73%)' : theme.colors.brand.gradient};
2020
border-radius: 0.625rem;
2121
font-size: 1rem;

‎src/components/PostItem/index.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@ import theme from '@styles/theme';
55
import PinIcon from '@assets/default/pin.svg';
66
import Like from '@components/Icons/Like';
77
import Message from '@components/Icons/Message';
8+
import { StyledText } from '@components/Text/StyledText';
89

910
import type { PostItemProps } from './dto';
10-
import { PostItemLayout, PostImageContainer, PostImage, LikesCountStyledText, LikesOverlay, Pin } from './style';
11+
import { PostItemLayout, PostImageContainer, PostImage, LikesOverlay, Pin } from './style';
1112

1213
const PostItem: React.FC<PostItemProps> = ({ post }) => {
1314
const navigate = useNavigate();
@@ -25,13 +26,13 @@ const PostItem: React.FC<PostItemProps> = ({ post }) => {
2526
{post.isRepresentative && <Pin src={PinIcon} />}
2627
<LikesOverlay>
2728
<Like />
28-
<LikesCountStyledText $textTheme={{ style: 'caption1-regular' }} color={theme.colors.gray3}>
29+
<StyledText $textTheme={{ style: 'caption1-regular' }} color={theme.colors.text.tertiary}>
2930
{post.postLikesCount}
30-
</LikesCountStyledText>
31-
<Message />
32-
<LikesCountStyledText $textTheme={{ style: 'caption1-regular' }} color={theme.colors.gray3}>
31+
</StyledText>
32+
<Message color="#8E8E8E" />
33+
<StyledText $textTheme={{ style: 'caption1-regular' }} color={theme.colors.text.tertiary}>
3334
{post.postCommentsCount}
34-
</LikesCountStyledText>
35+
</StyledText>
3536
</LikesOverlay>
3637
</PostImageContainer>
3738
</PostItemLayout>

‎src/components/PostItem/style.tsx‎

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

43
export const PostItemLayout = styled.article`
54
flex: 1 1 calc(50% - 0.5rem); /* 기본적으로 두 개씩 배치되도록 설정 */
@@ -43,20 +42,14 @@ export const PostImage = styled.img`
4342

4443
export const LikesOverlay = styled.div`
4544
position: absolute;
46-
bottom: 0; /* 하단에 배치 */
45+
bottom: 0.625rem; /* 하단에 배치 */
46+
right: 0.625rem;
4747
width: 100%;
4848
display: flex;
49-
align-items: center;
5049
justify-content: flex-end;
50+
align-items: center;
5151
box-sizing: border-box;
52-
`;
53-
54-
export const Icon = styled.img`
55-
margin-bottom: 0.5rem;
56-
`;
57-
58-
export const LikesCountStyledText = styled(StyledText)`
59-
margin: 0 8px 0.5rem 4px;
52+
gap: 5px;
6053
`;
6154

6255
export const Pin = styled.img`

‎src/components/TopBar/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const TopBar: React.FC<TopBarProps> = ({
3030
>
3131
<img src={LeftButtonSrc || ''} alt="뒤로가기" />
3232
</LeftButton>
33-
<StyledTextWrapper $textTheme={{ style: 'body1-bold' }} color={theme.colors.black}>
33+
<StyledTextWrapper $textTheme={{ style: 'heading1-bold' }} color={theme.colors.text.primary}>
3434
{text}
3535
</StyledTextWrapper>
3636
<RightButton

‎src/components/TopBar/styles.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
import styled from 'styled-components';
2+
import theme from '@styles/theme';
23
import { StyledText } from '@components/Text/StyledText';
34
import type { TopBarLayoutProps } from './dto';
4-
55
export const TopBarLayout = styled.header<TopBarLayoutProps>`
66
display: flex;
77
position: sticky;
88
top: 0; /* 부모 요소의 상단에 붙도록 설정 */
99
z-index: 99;
10-
background-color: white;
10+
background-color: ${theme.colors.background.primary};
1111
width: 100%; /* 부모 너비에 맞춤 */
1212
align-items: center;
1313
padding: 0.5rem 1.25rem;
1414
${({ $withBorder, theme }) =>
1515
$withBorder &&
1616
`
17-
border-bottom: solid 0.0625rem ${theme.colors.gray2};
17+
border-bottom: solid 0.0625rem ${theme.colors.border.divider};
1818
`}
1919
`;
2020

‎src/components/UserProfile/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const UserProfile: React.FC<UserProfileProps> = React.memo(({ userImg, bio = '',
1313
<UserImg src={userImg} alt={`${nickname}'s profile`} />
1414
<UserDetailsContainer>
1515
<StyledText $textTheme={{ style: 'headline2-bold' }}>{nickname}</StyledText>
16-
<StyledBio $textTheme={{ style: 'body2-regular' }} color={theme.colors.gray3}>
16+
<StyledBio $textTheme={{ style: 'body2-regular' }} color={theme.colors.text.tertiary}>
1717
{truncatedBio}
1818
</StyledBio>
1919
</UserDetailsContainer>

‎src/pages/AccountCancel/index.tsx‎

Lines changed: 31 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,27 @@
11
import React, { useState } from 'react';
2-
import { CancelContainer, SubTitle, Text, InfoBox, InfoItem, CheckboxWrapper, CheckboxInput } from './styles';
3-
import { StyledText } from '../../components/Text/StyledText';
4-
import theme from '../../styles/theme';
5-
import { OODDFrame } from '../../components/Frame/Frame';
2+
import {
3+
CancelContainer,
4+
SubTitle,
5+
Text,
6+
InfoBox,
7+
InfoItem,
8+
CheckboxWrapper,
9+
CheckboxInput,
10+
Label,
11+
StyledCheckboxText,
12+
StyledDiv,
13+
} from './styles'; // 상대 경로 index 명시
14+
import { StyledText } from '@components/Text/StyledText';
15+
import theme from '@styles/theme';
16+
import { OODDFrame } from '@components/Frame/Frame';
617
import { useNavigate } from 'react-router-dom';
718

8-
import TopBar from '../../components/TopBar';
9-
import back from '../../assets/arrow/left.svg';
19+
import TopBar from '@components/TopBar/index';
20+
import back from '@assets/arrow/left.svg';
1021

11-
import BottomButton from '../../components/BottomButton';
12-
import { patchUserWithdrawApi } from '../../apis/user';
13-
import Modal from '../../components/Modal';
22+
import BottomButton from '@components/BottomButton/index';
23+
import { patchUserWithdrawApi } from '@apis/user';
24+
import Modal from '@components/Modal/index';
1425

1526
const AccountCancel: React.FC = () => {
1627
const [isChecked, setIsChecked] = useState(false);
@@ -74,45 +85,39 @@ const AccountCancel: React.FC = () => {
7485
<TopBar text="회원 탈퇴" LeftButtonSrc={back} onClickLeftButton={() => navigate(-1)} />
7586

7687
<SubTitle>
77-
<StyledText as="div" $textTheme={{ style: 'headline2-medium', lineHeight: 2 }} color={theme.colors.black}>
88+
<StyledText as="div" $textTheme={{ style: 'headline2-medium' }} color={theme.colors.primary}>
7889
OOTD 탈퇴 전 확인하세요!
7990
</StyledText>
8091
</SubTitle>
8192
<Text as="div">
82-
<StyledText as="div" $textTheme={{ style: 'caption1-regular', lineHeight: 1 }} color={theme.colors.black}>
93+
<StyledText as="div" $textTheme={{ style: 'caption1-regular' }} color={theme.colors.primary}>
8394
{`탈퇴하시면 이용 중인 서비스가 폐쇄되며,\n모든 데이터는 복구할 수 없습니다.`}
8495
</StyledText>
8596
</Text>
8697
<InfoBox>
8798
<InfoItem as="div">
8899
<StyledText
89100
as="div"
90-
$textTheme={{ style: 'body1-medium', lineHeight: 2 }}
91-
color={theme.colors.black}
92-
style={{ whiteSpace: 'nowrap' }} // 줄 바꿈 방지
101+
$textTheme={{ style: 'body1-medium'}}
102+
color={theme.colors.primary}
103+
style={{ whiteSpace: 'nowrap' }}
93104
>
94105
지금까지 OODD를 이용해주셔서 감사합니다!
95106
</StyledText>
96107
</InfoItem>
97108
</InfoBox>
98109
<CheckboxWrapper as="div">
99-
<label style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
110+
<Label>
100111
<CheckboxInput type="checkbox" checked={isChecked} onChange={handleCheckboxChange} />
101-
<StyledText as="span" $textTheme={{ style: 'body4-light', lineHeight: 1 }} color={theme.colors.gray3}>
112+
<StyledCheckboxText as="span" $textTheme={{ style: 'body2-regular' }}>
102113
안내사항을 모두 확인하였으며, 이에 동의합니다.
103-
</StyledText>
104-
</label>
114+
</StyledCheckboxText>
115+
</Label>
105116
</CheckboxWrapper>
106117
</CancelContainer>
107-
<div
108-
style={{
109-
backgroundColor: isChecked ? '#000000' : '#d3d3d3',
110-
color: isChecked ? '#ffffff' : '#808080',
111-
cursor: isChecked ? 'pointer' : 'not-allowed',
112-
}}
113-
>
118+
<StyledDiv isChecked={isChecked}>
114119
<BottomButton content="탈퇴하기" onClick={handleDeleteAccount} disabled={!isChecked} />
115-
</div>
120+
</StyledDiv>
116121
{isModalVisible && (
117122
<Modal
118123
content={modalContent || ''} // null일 경우 빈 문자열로 처리

‎src/pages/AccountCancel/styles.tsx‎

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,49 @@
11
import styled from 'styled-components';
2-
3-
interface ButtonProps {
4-
isChecked: boolean;
5-
}
2+
import { StyledText } from '@components/Text/StyledText';
63

74
export const CancelContainer = styled.div`
85
margin: 0 auto;
96
width: 100%;
10-
flex-grow: 1; /* flexbox에서 공간을 채우도록 설정 */
7+
flex-grow: 1;
118
display: flex;
129
flex-direction: column;
1310
`;
1411

1512
export const SubTitle = styled.h3`
16-
font-size: 1rem; /* 16px */
13+
font-size: 1rem;
1714
font-weight: bold;
18-
margin-bottom: 0.625rem; /* 10px */
15+
margin-bottom: 0.625rem;
1916
text-align: center;
2017
text-align: left;
2118
margin-top: 10px;
22-
padding: 1.25rem; /* 20px */
19+
padding: 1.25rem;
2320
`;
2421

2522
export const Text = styled.p`
26-
font-size: 0.875rem; /* 14px */
27-
margin-bottom: 5px; /* 20px */
23+
font-size: 0.875rem;
24+
margin-bottom: 5px;
2825
text-align: left;
2926
margin-top: 10px;
30-
padding: 0rem 1.25rem; /* 20px */
27+
padding: 0rem 1.25rem;
3128
`;
3229

3330
export const InfoBox = styled.div`
34-
background: #f5f5f5;
35-
padding: 70px; /* 20px */
31+
background: ${({ theme }) => theme.colors.background.secondary};
32+
padding: 70px;
3633
margin-top: 10px;
3734
border-radius: 10px;
38-
margin: 10px 20px 1.25rem 20px; /* 10px 위 여백, 20px 좌우 여백, 20px 아래 여백 */
35+
margin: 10px 20px 1.25rem 20px;
3936
`;
4037

4138
export const InfoItem = styled.p`
42-
font-size: 0.875rem; /* 14px */
43-
margin-bottom: 0.625rem; /* 10px */
39+
font-size: 0.875rem;
40+
margin-bottom: 0.625rem;
4441
padding: 2px 10px;
4542
display: flex;
4643
justify-content: center;
4744
align-items: center;
4845
text-align: center;
49-
height: 100%; /* 부모 컨테이너의 높이에 맞추기 */
46+
height: 100%;
5047
`;
5148

5249
export const CheckboxWrapper = styled.div`
@@ -56,46 +53,49 @@ export const CheckboxWrapper = styled.div`
5653
padding: 0rem 15px;
5754
5855
input[type='checkbox'] {
59-
margin-right: 0.625rem; /* 10px */
56+
margin-right: 0.625rem;
6057
}
6158
`;
6259

6360
export const CheckboxInput = styled.input`
6461
margin-right: 0.625rem;
6562
cursor: pointer;
66-
appearance: none; /* 기본 스타일 제거 */
63+
appearance: none;
6764
width: 1.25rem;
6865
height: 1.25rem;
69-
border: 0.125rem solid #e0e0e0;
66+
border: 0.125rem solid ${({ theme }) => theme.colors.gray[200]};
7067
border-radius: 0.25rem;
7168
position: relative;
7269
&:checked {
73-
background-color: #ffbbda;
74-
border-color: #ff2389;
75-
}
70+
background-color: ${({ theme }) => theme.colors.background.primaryLight};
71+
border-color: ${({ theme }) => theme.colors.brand.primary};
72+
}
73+
7674
&:checked::after {
7775
content: '✓';
78-
color: white;
76+
color: ${({ theme }) => theme.colors.contrast};
7977
font-size: 0.875rem;
8078
position: absolute;
8179
top: 50%;
8280
left: 50%;
83-
transform: translate(-50%, -50%); /* 정확히 중앙으로 배치 */
81+
transform: translate(-50%, -50%);
8482
}
8583
`;
8684

87-
export const StyledButton = styled.button<ButtonProps>`
88-
margin-top: 18.75rem; /* 300px */
89-
background: ${(props) => (props.isChecked ? 'black' : '#ccc')};
90-
border-radius: 0.5rem; /* 8px */
91-
border: none;
92-
padding: 1.5625rem; /* 25px */
93-
text-align: center;
94-
font-size: 1rem; /* 16px */
95-
color: white;
96-
cursor: ${(props) => (props.isChecked ? 'pointer' : 'not-allowed')};
85+
export const Label = styled.label`
86+
display: flex;
87+
align-items: center;
88+
cursor: pointer;
89+
`;
9790

98-
&:disabled {
99-
background: #00000080;
100-
}
91+
export const StyledCheckboxText = styled(StyledText)`
92+
color: ${({ theme }) => theme.colors.text.caption};
10193
`;
94+
95+
export const StyledDiv = styled.div<{ isChecked: boolean }>`
96+
background-color: ${({ isChecked, theme }) =>
97+
isChecked ? theme.colors.primary : theme.colors.gray[300]};
98+
color: ${({ isChecked, theme }) =>
99+
isChecked ? theme.colors.contrast : theme.colors.caption};
100+
cursor: ${({ isChecked }) => (isChecked ? 'pointer' : 'not-allowed')};
101+
`;

0 commit comments

Comments
 (0)