Merge pull request #109 from oodd-team/feat/OD-158

[OD-158] 컬러시스템 구축 & Post, MyPost 합치기

Author: gustn99

src/App.tsx

@@ -14,7 +14,6 @@ import AccountCancel from './pages/AccountCancel';
 import Verification from './pages/verification';
 
 import Post from './pages/Post';
-import MyPost from './pages/MyPost';
 import PostUpload from './pages/PostUpload';
 import PostImageSelect from './pages/PostImageSelect';
 import PostInstaConnect from './pages/PostInstaConnect';
@@ -43,7 +42,6 @@ const protectedRoutes = [
 	{ path: '/verification', element: <Verification /> },
 
 	{ path: '/post/:postId', element: <Post /> },
-	{ path: '/my-post/:postId', element: <MyPost /> },
 	{ path: '/upload', element: <PostUpload /> },
 	{ path: '/image-select', element: <PostImageSelect /> },
 	{ path: '/insta-connect', element: <PostInstaConnect /> },

src/assets/default/delete.svg

@@ -16,7 +16,7 @@ export const ButtonWrapper = styled.div`
 
 export const Button = styled.button<{ disabled: boolean }>`
 	background: ${({ disabled, theme }) =>
-		disabled ? 'linear-gradient(93deg, #FFC1D6 1.22%, #F8D4D4 99.73%)' : theme.colors.gradient};
+		disabled ? 'linear-gradient(93deg, #FFC1D6 1.22%, #F8D4D4 99.73%)' : theme.colors.brand.gradient};
 	border-radius: 0.625rem;
 	font-size: 1rem;
 	width: calc(100% - 2.5rem);

src/assets/default/edit.svg

@@ -6,7 +6,7 @@ export const ClothingInfoItemContainer = styled.li`
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	border: 0.0625rem solid ${({ theme }) => theme.colors.pink2};
+	border: 0.0625rem solid ${({ theme }) => theme.colors.brand.primaryLight};
 	border-radius: 0.5rem;
 	padding: 10px;
 	min-width: 20.9375rem;
@@ -25,7 +25,6 @@ export const ClothingInfoLeft = styled.div`
 
 	.infoDetail {
 		overflow: hidden;
-		white-space: nowrap;
 		text-overflow: ellipsis;
 		width: 75%;
 		display: flex;
@@ -40,7 +39,13 @@ export const ClothingInfoLeft = styled.div`
 	.model {
 		margin-right: auto;
 		color: ${({ theme }) => theme.colors.black};
-		//overflow-x: hidden;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 2; /* 최대 2줄로 제한 */
+		-webkit-box-orient: vertical;
+		word-break: keep-all; /* 단어 단위로 줄바꿈 */
+		overflow-wrap: break-word; /* 단어가 너무 길 경우 다음 줄로 넘김 */
 	}
 `;
 

src/assets/default/pin.svg

@@ -20,11 +20,11 @@ export const ModalContainer = styled.div<{ $isCloseButtonVisible: boolean }>`
 	align-items: center;
 	justify-content: center;
 	text-align: center;
-	gap: 1rem;
+	gap: 1.5rem;
 	width: 21.25rem;
 	max-width: calc(100% - 2.5rem);
 	max-height: 30%;
-	padding: 1.25rem;
+	padding: 2rem 1.5rem 1.5rem 1.5rem;
 	${({ $isCloseButtonVisible }) => ($isCloseButtonVisible ? 'padding-top: 2.5rem' : '')};
 	background-color: ${({ theme }) => theme.colors.white};
 	border-radius: 0.625rem;

src/components/BottomButton/styles.tsx

@@ -63,7 +63,7 @@ export const Pin = styled.img`
 	display: flex;
 	position: absolute;
 	top: 0.75rem;
-	left: 1.25rem;
+	left: 0.75rem;
 	justify-content: center;
 	align-items: center;
 `;

src/components/ClothingInfoItem/styles.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { CancelContainer, SubTitle, Text, InfoBox, InfoItem, CheckboxWrapper } from './styles';
+import { CancelContainer, SubTitle, Text, InfoBox, InfoItem, CheckboxWrapper, CheckboxInput } from './styles';
 import { StyledText } from '../../components/Text/StyledText';
 import theme from '../../styles/theme';
 import { OODDFrame } from '../../components/Frame/Frame';
@@ -74,18 +74,13 @@ const AccountCancel: React.FC = () => {
 				<TopBar text="회원 탈퇴" LeftButtonSrc={back} onClickLeftButton={() => navigate(-1)} />
 
 				<SubTitle>
-					<StyledText as="div" $textTheme={{ style: 'body1-medium', lineHeight: 2 }} color={theme.colors.black}>
+					<StyledText as="div" $textTheme={{ style: 'headline2-medium', lineHeight: 2 }} color={theme.colors.black}>
 						OOTD 탈퇴 전 확인하세요!
 					</StyledText>
 				</SubTitle>
 				<Text as="div">
-					<StyledText as="div" $textTheme={{ style: 'body2-light', lineHeight: 1 }} color={theme.colors.black}>
-						탈퇴하시면 이용 중인 서비스가 폐쇄되며,
-					</StyledText>
-				</Text>
-				<Text as="div">
-					<StyledText as="div" $textTheme={{ style: 'body2-light', lineHeight: 1 }} color={theme.colors.black}>
-						모든 데이터는 복구할 수 없습니다.
+					<StyledText as="div" $textTheme={{ style: 'caption1-regular', lineHeight: 1 }} color={theme.colors.black}>
+						{`탈퇴하시면 이용 중인 서비스가 폐쇄되며,\n모든 데이터는 복구할 수 없습니다.`}
 					</StyledText>
 				</Text>
 				<InfoBox>
@@ -102,12 +97,7 @@ const AccountCancel: React.FC = () => {
 				</InfoBox>
 				<CheckboxWrapper as="div">
 					<label style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
-						<input
-							type="checkbox"
-							checked={isChecked}
-							onChange={handleCheckboxChange}
-							style={{ marginRight: '8px' }} // 텍스트와 체크박스 간격 조절
-						/>
+						<CheckboxInput type="checkbox" checked={isChecked} onChange={handleCheckboxChange} />
 						<StyledText as="span" $textTheme={{ style: 'body4-light', lineHeight: 1 }} color={theme.colors.gray3}>
 							안내사항을 모두 확인하였으며, 이에 동의합니다.
 						</StyledText>

src/components/Modal/styles.tsx

@@ -8,7 +8,6 @@ export const CancelContainer = styled.div`
 	margin: 0 auto;
 	width: 100%;
 	flex-grow: 1; /* flexbox에서 공간을 채우도록 설정 */
-	padding: 1.25rem; /* 20px */
 	display: flex;
 	flex-direction: column;
 `;
@@ -35,14 +34,14 @@ export const InfoBox = styled.div`
 	background: #f5f5f5;
 	padding: 70px; /* 20px */
 	margin-top: 10px;
-	border-radius: 10px; 
+	border-radius: 10px;
 	margin: 10px 20px 1.25rem 20px; /* 10px 위 여백, 20px 좌우 여백, 20px 아래 여백 */
 `;
 
 export const InfoItem = styled.p`
 	font-size: 0.875rem; /* 14px */
 	margin-bottom: 0.625rem; /* 10px */
-	padding: 2px 10px; 
+	padding: 2px 10px;
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -53,13 +52,35 @@ export const InfoItem = styled.p`
 export const CheckboxWrapper = styled.div`
 	display: flex;
 	align-items: center;
-	margin-bottom: 1.25rem; 
-	padding: 0rem 15px; 
+	margin-bottom: 1.25rem;
+	padding: 0rem 15px;
 
 	input[type='checkbox'] {
 		margin-right: 0.625rem; /* 10px */
-		border-radius: 50%;
+	}
+`;
 
+export const CheckboxInput = styled.input`
+	margin-right: 0.625rem;
+	cursor: pointer;
+	appearance: none; /* 기본 스타일 제거 */
+	width: 1.25rem;
+	height: 1.25rem;
+	border: 0.125rem solid #e0e0e0;
+	border-radius: 0.25rem;
+	position: relative;
+	&:checked {
+		background-color: #ffbbda;
+		border-color: #ff2389;
+	}
+	&:checked::after {
+		content: '✓';
+		color: white;
+		font-size: 0.875rem;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%); /* 정확히 중앙으로 배치 */
 	}
 `;