[OD-150] profile, profileEdit, accountEdit, accountCancel, accountSetting, verification 기존 폰트 및 색상 삭제 후 수정 #116

lalaurrel · 2024-12-28T15:40:38Z

주요 작업 내용

profile, profileEdit, accountEdit, accountCancel, accountSetting, verification 기존 폰트 및 색상 삭제 후 수정했습니다
해당 페이지들에서 절대경로로 수정했습니다
충돌해결했습니다!

기타 작업 내용

없음

코드 리뷰 포인트

없음

작업 화면

없음

…o feat/OD-150

gustn99

아래 요소들에 대해 전반적인 점검이 필요합니다!

import문 점검
a. 상대 경로에서 index 파일을 import할 때에는 '.../index'와 같이 /index 필요
b. 모든 경로에서 dto 파일을 import할 때에는 import type {...} from '.../dto'처럼 type 필요
컬러시스템 점검
a. 컬러시스템이 text/background/border에 대해 세분화되어 있어, 이를 활용하는 방향으로 적용해 주시면 좋을 것 같습니다
예전 폰트 스타일 삭제
a. 작업하신 영역에서 아직 예전 폰트 스타일이 일부 남아 있습니다! 코멘트 남겨두었으니 확인하셔서 수정 부탁드립니다
인라인 css 삭제
이 외에는 코멘트 참고해 주시면 되겠습니다!

이 브랜치가 머지된 후에는 새 브랜치에서 아래 작업이 추가로 필요합니다

변수 명명 규칙에 따라 변수명 점검
전체 코드 흐름 점검
ConfirmationModal -> Modal로 대체

아자아자 파이팅입니다다다다!!!

gustn99 · 2024-12-28T15:45:29Z

src/pages/AccountCancel/index.tsx

 					<label style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
 						<CheckboxInput type="checkbox" checked={isChecked} onChange={handleCheckboxChange} />
-						<StyledText as="span" $textTheme={{ style: 'body4-light', lineHeight: 1 }} color={theme.colors.gray3}>
+						<StyledText as="span" $textTheme={{ style: 'body4-light', lineHeight: 1 }} color={theme.colors.gray[600]}>


StyledText 등 폰트에 대해서는 되도록 theme.colors.text에 있는 값을 사용해 주시면 좋을 것 같아용 추가로 lineHeight 삭제해 주세요! 이 외에 다른 StyledText나 스타일드 컴포넌트 내 color 속성도 한번씩 점검 부탁드립니다!!

또한 여기에 사용된 body4-light는 예전 폰트 스타일입니다! 수정 부탁드려용

theme.colors.text로 다 수정했습니다

lineHeight 다 삭제했습니다

예전 폰트 다 수정했습니다

아 아직 수정중이야!

내가 보려고.. 쓰는중 ..

ㅋㅋㅋㅋ 조아요 파이팅.....

theme.colors.background에 없는 컬러들을 쓰고 있는 background는 일단 그냥 둘게요 .. ㅜ

넵!! background나 border에 없는 색들은 최대한 colors 내부에서 뽑아쓰고 그마저도 안 되면 일단은 색상코드나 rgb 쓰는 식으로 해주세용

gustn99 · 2024-12-28T15:51:36Z

src/pages/AccountCancel/index.tsx

 					</InfoItem>
 				</InfoBox>
 				<CheckboxWrapper as="div">
 					<label style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>


인라인 css는 더 이상 사용하지 않기로 결정했습니다! 대신에 class나 styled component 사용해 수정해 주세용

gustn99 · 2024-12-28T15:52:33Z

src/pages/AccountCancel/styles.tsx

 export const InfoBox = styled.div`
-	background: #f5f5f5;
-	padding: 70px; /* 20px */
+	background: ${({ theme }) => theme.colors.gray[100]};


background에 사용되는 색상은 theme.colors.background에 정리되어 있습니다! 이걸 사용해 주시면 유지보수 측면에서 더 좋을 것 같아요 여기 말고도 다른 background도 한번씩 점검해 주세용

gustn99 · 2024-12-28T15:56:23Z

src/pages/AccountCancel/styles.tsx

 	width: 1.25rem;
 	height: 1.25rem;
-	border: 0.125rem solid #e0e0e0;
+	border: 0.125rem solid ${({ theme }) => theme.colors.gray[200]};


theme.colors.border 속성을 사용해 주시면 좋을 것 같아요!

gustn99 · 2024-12-28T15:59:17Z

src/pages/AccountCancel/styles.tsx

 export const StyledButton = styled.button<ButtonProps>`
-	margin-top: 18.75rem; /* 300px */
-	background: ${(props) => (props.isChecked ? 'black' : '#ccc')};
-	border-radius: 0.5rem; /* 8px */
+	margin-top: 18.75rem; 
+	background: ${({ theme, isChecked }) =>
+	isChecked ? theme.colors.black : theme.colors.gray[300]};
+	border-radius: 0.5rem; 
 	border: none;
-	padding: 1.5625rem; /* 25px */
+	padding: 1.5625rem; 
 	text-align: center;
-	font-size: 1rem; /* 16px */
-	color: white;
+	font-size: 1rem; 
+	color: ${({ theme }) => theme.colors.white};
 	cursor: ${(props) => (props.isChecked ? 'pointer' : 'not-allowed')};

 	&:disabled {
-		background: #00000080;
+		background: ${({ theme }) => `${theme.colors.black}80`};
 	}
 `;


사용되지 않는 컴포넌트 같습니다! 확인 부탁드려요

gustn99 · 2024-12-28T16:08:08Z

src/pages/ProfileEdit/index.tsx

+import Loading from '@components/Loading';
+import camera from '@assets/default/camera.svg';
+import { getUserInfoApi, patchUserInfoApi } from '@apis/user'; 
+import { UserInfoData, PatchUserInfoRequest } from '@apis/user/dto'; 


dto를 import할 때는 import type {...} from '.../dto'와 같이 작성해 주셔야 린트가 적용될 수 있으니 수정 부탁드립니다!

gustn99 · 2024-12-28T16:15:18Z

src/pages/Profile/ButtonSecondary/index.tsx

+import { StyledText } from '@components/Text/StyledText';
+import theme from '@styles/theme';

 const ButtonSecondary: React.FC = () => {


요기 button1-regular는 예전 폰트 스타일입니다! 수정 부탁드립니닷 color도 수정이 필요할 것 같네용

gustn99 · 2024-12-28T16:17:23Z

src/pages/Profile/ButtonSecondary/styles.tsx

 	height: 3.1rem;
 	text-align: center;
-	color: #ff2389;
+	color: ${({ theme }) => theme.colors.brand.primary};


color 속성을 버튼에 부여하는 대신 StyledText에서 theme.colors.brand.primary로 설정하면 버튼에서는 color 속성을 삭제해도 될 것 같아 보이네요!

gustn99 · 2024-12-28T16:18:20Z

src/pages/Profile/index.tsx

+import { UserPostSummary } from '@apis/post/dto';
+import { UserInfoData } from '@apis/user/dto';


dto를 import할 때는 import type으로 작성해 주셔야 린트 설정으로 import문 정렬이 가능해지니 수정 부탁드립니다! 다른 부분도 한번씩 점검 부탁드려용

gustn99 · 2024-12-28T16:22:52Z

src/pages/Profile/index.tsx

 import NavbarProfile from './NavbarProfile';
-import NavBar from '../../components/NavBar';
 import ButtonSecondary from './ButtonSecondary';


상대경로로 index 파일을 import할 때에는 경로에 /index를 작성해 주셔야 린트가 올바르게 적용될 수 있습니다! 수정 부탁드려요

…o feat/OD-150

lalaurrel added 14 commits December 27, 2024 14:08

refactor: profile 페이지 절대경로로 수정

b5d9fd9

refactor: navbarProfile 절대경로 수정

56c58d4

refactor: buttonSecondary 절대경로 수정

75040f8

refactor: AccountCancel 절대경로 수정

971d32e

refactor: accountEdit 절대경로 수정

f60552b

refactor: accountSetting 절대경로로 수정

1086fe9

refactor: ProfileEdit 절대경로 수정

7dcb68b

Merge branch 'dev' of https://github.com/oodd-team/oodd-web-react int…

abe7296

…o feat/OD-150

Merge branch 'dev' of https://github.com/oodd-team/oodd-web-react int…

780c4df

…o feat/OD-150

fix: 충돌 해결

7b2eeee

refactor: profile 기존 색상 삭제

59bcbdd

refactor: 기존 폰트 제거

59f2bc1

refactor: 기존 색상 제거 및 수정

3eb1a3e

refactor: 기존 폰트 제거 및 수정

05d6c18

lalaurrel added fix Fix bugs that don't work refactor Improve code structure and readability labels Dec 28, 2024

lalaurrel requested a review from gustn99 December 28, 2024 15:40

lalaurrel self-assigned this Dec 28, 2024

gustn99 reviewed Dec 28, 2024

View reviewed changes

lalaurrel added 11 commits December 29, 2024 04:13

fix: 코리 반영

15c5e6c

fix: 코리 반영

6660cab

fix: 코리 반영

c5daecb

fix: 코리 반영

5662721

fix: 코리 반영

edc38d9

fix: 코리 반영

40e174e

fix: 코리 반영

dc72966

fix: 코리 반영

0f7fa88

fix: 코리 반영

b8520c1

fix: 코리 반영

23dbe08

fix: 코리 반영

fe2bd88

lalaurrel added 5 commits December 29, 2024 04:14

fix: 코리 반영

2c1f73d

fix: 코리 반영

3f12aeb

fix: 코리 반영

41a7941

fix: 코리 반영

0c97de1

fix: 코리 반영

102dbbc

lalaurrel requested a review from gustn99 December 28, 2024 19:55

lalaurrel added 2 commits December 29, 2024 04:57

Merge branch 'dev' of https://github.com/oodd-team/oodd-web-react int…

b19f780

…o feat/OD-150

fix: 컬러 수정

7268069

gustn99 merged commit 2083817 into dev Dec 29, 2024
1 check passed

gustn99 deleted the feat/OD-150 branch December 29, 2024 05:45

		import { UserPostSummary } from '@apis/post/dto';
		import { UserInfoData } from '@apis/user/dto';

[OD-150] profile, profileEdit, accountEdit, accountCancel, accountSetting, verification 기존 폰트 및 색상 삭제 후 수정 #116

[OD-150] profile, profileEdit, accountEdit, accountCancel, accountSetting, verification 기존 폰트 및 색상 삭제 후 수정 #116

Uh oh!

Conversation

lalaurrel commented Dec 28, 2024

주요 작업 내용

기타 작업 내용

코드 리뷰 포인트

작업 화면

Uh oh!

gustn99 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

gustn99 left a comment •

edited

Loading