Skip to content

Commit 6520ad0

Browse files
mimizaemimizae
committed
Feat: 취향 선택 UI 1차 퍼블리싱
1 parent 4160439 commit 6520ad0

3 files changed

Lines changed: 167 additions & 2 deletions

File tree

‎src/pages/SignUp/PickMyStyle/index.tsx‎

Lines changed: 87 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,91 @@
1+
import { useNavigate } from 'react-router-dom';
2+
3+
import theme from '@styles/theme';
4+
5+
import Back from '@assets/arrow/left.svg';
6+
7+
import BottomButton from '@components/BottomButton';
8+
import { OODDFrame } from '@components/Frame/Frame';
9+
import TopBar from '@components/TopBar';
10+
11+
import {
12+
PickMyStyleLayout,
13+
StyledSubTitle,
14+
StyledTitle,
15+
CategoryList,
16+
CategoryItem,
17+
ImageContainer,
18+
PlaceholderImage,
19+
StyledCategory,
20+
} from './style';
21+
22+
const categories = [
23+
'classic',
24+
'street',
25+
'hip',
26+
'casual',
27+
'sporty',
28+
'feminine',
29+
'minimal',
30+
'formal',
31+
'outdoor',
32+
'luxury',
33+
];
34+
35+
// const categoryImages: Record<string, string[]> = {
36+
// classic: ['/images/classic1.jpg', '/images/classic2.jpg'],
37+
// street: ['/images/street1.jpg', '/images/street2.jpg'],
38+
// hip: ['/images/hip1.jpg', '/images/hip2.jpg'],
39+
// casual: ['/images/casual1.jpg', '/images/casual2.jpg'],
40+
// sporty: ['/images/sporty1.jpg', '/images/sporty2.jpg'],
41+
// feminine: ['/images/feminine1.jpg', '/images/feminine2.jpg'],
42+
// minimal: ['/images/minimal1.jpg', '/images/minimal2.jpg'],
43+
// formal: ['/images/formal1.jpg', '/images/formal2.jpg'],
44+
// outdoor: ['/images/outdoor1.jpg', '/images/outdoor2.jpg'],
45+
// luxury: ['/images/luxury1.jpg', '/images/luxury2.jpg'],
46+
// };
47+
148
const PickMyStyle: React.FC = () => {
2-
return <>ㅋㅋㅋ</>;
49+
const navigate = useNavigate();
50+
const navigateToLogin = () => {
51+
navigate('/login');
52+
};
53+
54+
return (
55+
<OODDFrame>
56+
<TopBar LeftButtonSrc={Back} onClickLeftButton={navigateToLogin} />
57+
<PickMyStyleLayout>
58+
<CategoryList>
59+
<StyledTitle
60+
$textTheme={{
61+
style: { mobile: 'title3-bold', tablet: 'title2-bold', desktop: 'title1-bold' },
62+
}}
63+
>
64+
카테고리별 취향을 골라보세요!💗
65+
</StyledTitle>
66+
<StyledSubTitle
67+
$textTheme={{
68+
style: { mobile: 'caption1-medium', tablet: 'body2-medium', desktop: 'body1-medium' },
69+
}}
70+
>
71+
OODD가 당신의 취향의 스타일을 가진 분들을 소개해 드릴게요!
72+
</StyledSubTitle>
73+
{categories.map((category) => (
74+
<CategoryItem key={category}>
75+
<StyledCategory $textTheme={{ style: 'body1-bold' }} color={theme.colors.brand.primary}>
76+
# {category}
77+
</StyledCategory>
78+
<ImageContainer>
79+
<PlaceholderImage>이미지 1</PlaceholderImage>
80+
<PlaceholderImage>이미지 2</PlaceholderImage>
81+
</ImageContainer>
82+
</CategoryItem>
83+
))}
84+
</CategoryList>
85+
<BottomButton content="OODD 시작하기" onClick={navigateToLogin} disabled={true} />
86+
</PickMyStyleLayout>
87+
</OODDFrame>
88+
);
389
};
490

591
export default PickMyStyle;

‎src/pages/SignUp/PickMyStyle/style.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import { styled } from 'styled-components';
2+
3+
import { StyledText } from '@components/Text/StyledText';
4+
5+
export const OODDFrame = styled.div`
6+
width: 100%;
7+
height: 100vh; // 화면 전체 높이 차지
8+
overflow: hidden; // 전체 화면 스크롤 방지
9+
display: flex;
10+
flex-direction: column;
11+
`;
12+
13+
export const PickMyStyleLayout = styled.div`
14+
display: flex;
15+
flex-direction: column;
16+
padding: 0 1.875rem;
17+
flex: 1; // 남은 공간을 다 차지하도록 설정
18+
width: 100%;
19+
height: 100%;
20+
overflow: hidden; // 상위 요소의 스크롤 방지
21+
`;
22+
23+
export const StyledTitle = styled(StyledText)`
24+
margin: 0.625rem 0;
25+
`;
26+
27+
export const StyledSubTitle = styled(StyledText)`
28+
margin-bottom: 1.25rem;
29+
`;
30+
31+
export const CategoryList = styled.div`
32+
width: 100%;
33+
max-width: 31.25rem;
34+
margin: auto;
35+
flex-grow: 1; // 남은 공간을 전부 차지하게 설정
36+
overflow-y: auto; // 내부에서만 스크롤 가능하도록 설정
37+
padding-bottom: 6.25rem; // 스크롤 여유 공간 추가
38+
39+
// 스크롤바 숨기기
40+
&::-webkit-scrollbar {
41+
display: none; // 크롬, 사파리
42+
}
43+
scrollbar-width: none; // 파이어폭스
44+
`;
45+
46+
export const StyledCategory = styled(StyledText)`
47+
display: flex;
48+
width: content-fit;
49+
padding: 0.1875rem;
50+
border-radius: 0.3125rem;
51+
border: 0.0625rem solid ${({ theme }) => theme.colors.brand.primary};
52+
background-color: ${({ theme }) => theme.colors.brand.primaryLighter};
53+
`;
54+
export const CategoryItem = styled.div`
55+
display: flex;
56+
flex-direction: column;
57+
border-radius: 0.9375rem;
58+
margin-bottom: 0.625rem;
59+
`;
60+
61+
export const ImageContainer = styled.div`
62+
display: flex;
63+
justify-content: center;
64+
gap: 0.625rem;
65+
margin-top: 0.625rem;
66+
cursor: pointer;
67+
`;
68+
69+
export const PlaceholderImage = styled.div`
70+
width: 12.5rem;
71+
height: 13.75rem;
72+
background: lightgray;
73+
display: flex;
74+
justify-content: center;
75+
align-items: center;
76+
color: white;
77+
font-weight: bold;
78+
border-radius: 0.3125rem;
79+
`;

‎src/pages/SignUp/TermsAgreement/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ const TermsAgreement: React.FC = () => {
123123
))}
124124
</CheckboxList>
125125
<BottomButton
126-
content="OODD 시작하기"
126+
content="다음"
127127
onClick={handleCompletedClick}
128128
disabled={!agreements.terms || !agreements.privacy}
129129
/>

0 commit comments

Comments
 (0)