Skip to content

Commit 2083817

Browse files
gustn99gustn99
authored
Merge pull request #116 from oodd-team/feat/OD-150
[OD-150] profile, profileEdit, accountEdit, accountCancel, accountSetting, verification 기존 폰트 및 색상 삭제 후 수정
2 parents 5a9b6f0 + 7268069 commit 2083817

File tree

18 files changed

+268
-278
lines changed

18 files changed

+268
-278
lines changed

‎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/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+
`;

‎src/pages/AccountEdit/index.tsx‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,18 @@ import {
1212
MemberInfoRow,
1313
Label,
1414
Info,
15-
} from './styles';
16-
import { OODDFrame } from '../../components/Frame/Frame';
17-
18-
import BottomButton from '../../components/BottomButton'; // BottomButton 컴포넌트 임포트
15+
} from './styles';
16+
import { OODDFrame } from '@components/Frame/Frame';
17+
import BottomButton from '@components/BottomButton/index';
1918

2019
import { useNavigate } from 'react-router-dom';
21-
import { StyledText } from '../../components/Text/StyledText';
22-
import theme from '../../styles/theme';
20+
import { StyledText } from '@components/Text/StyledText';
21+
import theme from '@styles/theme';
2322

24-
import naver from '../../assets/default/snsIcon/naver.svg';
25-
import kakao from '../../assets/default/snsIcon/kakao.svg';
26-
import TopBar from '../../components/TopBar';
27-
import back from '../../assets/arrow/left.svg';
23+
import naver from '@assets/default/snsIcon/naver.svg';
24+
import kakao from '@assets/default/snsIcon/kakao.svg';
25+
import TopBar from '@components/TopBar/index';
26+
import back from '@assets/arrow/left.svg';
2827

2928
const AccountEdit: React.FC = () => {
3029
const navigate = useNavigate(); // useNavigate 훅 사용
@@ -41,18 +40,18 @@ const AccountEdit: React.FC = () => {
4140

4241
<Section>
4342
<SectionTitle>
44-
<StyledText $textTheme={{ style: 'body1-medium', lineHeight: 0 }} color={theme.colors.black}>
43+
<StyledText $textTheme={{ style: 'body1-medium' }} color={theme.colors.primary}>
4544
로그인 정보
4645
</StyledText>
4746
</SectionTitle>
4847
<SNSInfo>
4948
<SnsConnection>
50-
<StyledText $textTheme={{ style: 'body2-regular', lineHeight: 0 }} color={theme.colors.gray3}>
49+
<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.tertiary}>
5150
SNS 연결
5251
</StyledText>
5352
</SnsConnection>
5453
<Text>
55-
<StyledText $textTheme={{ style: 'body2-regular', lineHeight: 0 }} color={theme.colors.gray3}>
54+
<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.tertiary}>
5655
연결된 SNS계정으로 로그인되었습니다.
5756
</StyledText>
5857
</Text>
@@ -64,22 +63,22 @@ const AccountEdit: React.FC = () => {
6463
</Section>
6564
<Section>
6665
<SectionTitle>
67-
<StyledText $textTheme={{ style: 'body1-medium', lineHeight: 0 }} color={theme.colors.black}>
66+
<StyledText $textTheme={{ style: 'body1-medium' }} color={theme.colors.primary}>
6867
회원 정보
6968
</StyledText>
7069
</SectionTitle>
7170
<MemberInfo>
7271
<MemberInfoRow>
7372
<Label>
74-
<StyledText $textTheme={{ style: 'body2-regular', lineHeight: 0 }} color={theme.colors.gray3}>
73+
<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.tertiary}>
7574
이름
7675
</StyledText>
7776
</Label>
7877
<Info>-</Info>
7978
</MemberInfoRow>
8079
<MemberInfoRow>
8180
<Label>
82-
<StyledText $textTheme={{ style: 'body2-regular', lineHeight: 0 }} color={theme.colors.gray3}>
81+
<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.tertiary}>
8382
연락처
8483
</StyledText>
8584
</Label>

0 commit comments

Comments
 (0)