Skip to content

Commit 8cdd622

Browse files
shlee9999shlee9999
committed
Merge branch 'develop' of https://github.com/prgrms-web-devcourse-final-project/WEB1_1_DDang_FE into 43-design-소셜-디자인
2 parents 79775e4 + c4500e1 commit 8cdd622

File tree

29 files changed

+1174
-89
lines changed

29 files changed

+1174
-89
lines changed

‎src/assets/report.svg

Lines changed: 5 additions & 0 deletions
Loading

‎src/components/GenderSelectButton/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ interface GenderSelectButtonProps {
1111

1212
export default function GenderSelectButton({ gender, isActive, onClick }: GenderSelectButtonProps) {
1313
return (
14-
<S.GenderBtn isActive={isActive} onClick={onClick}>
15-
<S.GenderIcon isActive={isActive} src={gender === 'male' ? Male : Female} alt='성별' />
14+
<S.GenderBtn $isActive={isActive} onClick={onClick}>
15+
<S.GenderIcon $isActive={isActive} src={gender === 'male' ? Male : Female} alt='성별' />
1616
<Typo17 $weight={isActive ? '700' : '400'}>{gender === 'male' ? '남' : '여'}</Typo17>
1717
</S.GenderBtn>
1818
)

‎src/components/GenderSelectButton/styles.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { styled } from 'styled-components'
2-
export const GenderBtn = styled.button<{ isActive: boolean }>`
3-
border: solid 2px ${({ isActive, theme }) => (isActive ? theme.colors.brand.darken : theme.colors.grayscale.gc_1)};
2+
export const GenderBtn = styled.button<{ $isActive: boolean }>`
3+
border: solid 2px ${({ $isActive, theme }) => ($isActive ? theme.colors.brand.darken : theme.colors.grayscale.gc_1)};
44
border-radius: 8px;
55
width: auto;
66
height: 102px;
7-
color: ${({ isActive, theme }) => (isActive ? theme.colors.brand.darken : theme.colors.grayscale.font_3)};
7+
color: ${({ $isActive, theme }) => ($isActive ? theme.colors.brand.darken : theme.colors.grayscale.font_3)};
88
99
display: flex;
1010
flex-direction: column;
@@ -13,9 +13,9 @@ export const GenderBtn = styled.button<{ isActive: boolean }>`
1313
gap: 0.2rem;
1414
`
1515

16-
export const GenderIcon = styled.img<{ isActive: boolean }>`
16+
export const GenderIcon = styled.img<{ $isActive: boolean }>`
1717
filter: ${props =>
18-
props.isActive
18+
props.$isActive
1919
? 'invert(12%) sepia(70%) saturate(924%) hue-rotate(351deg) brightness(96%) contrast(97%)'
2020
: 'invert(31%) sepia(4%) saturate(61%) hue-rotate(332deg) brightness(99%) contrast(97%)'};
2121
`

‎src/components/Select/index.tsx

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { useState } from 'react'
2+
import * as S from './styles'
3+
4+
interface Option {
5+
value: string
6+
label: string
7+
}
8+
9+
interface SelectProps {
10+
options: Option[]
11+
value: string
12+
onChange: (value: string) => void
13+
placeholder?: string
14+
}
15+
16+
const Select = ({ options, value, onChange, placeholder }: SelectProps) => {
17+
const [isOpen, setIsOpen] = useState(false)
18+
19+
const selectedOption = options.find(option => option.value === value)
20+
21+
return (
22+
<S.SelectContainer>
23+
<S.SelectButton onClick={() => setIsOpen(!isOpen)}>
24+
{selectedOption ? selectedOption.label : placeholder || '선택하세요'}
25+
<S.Arrow isOpen={isOpen} />
26+
</S.SelectButton>
27+
28+
{isOpen && (
29+
<S.OptionList>
30+
{options.map(option => (
31+
<S.Option
32+
key={option.value}
33+
onClick={() => {
34+
onChange(option.value)
35+
setIsOpen(false)
36+
}}
37+
isSelected={value === option.value}
38+
>
39+
{option.label}
40+
</S.Option>
41+
))}
42+
</S.OptionList>
43+
)}
44+
</S.SelectContainer>
45+
)
46+
}
47+
48+
export default Select

‎src/components/Select/styles.ts

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import styled, { css } from 'styled-components'
2+
3+
export const SelectContainer = styled.div`
4+
position: relative;
5+
width: 100%;
6+
margin-bottom: 33px;
7+
`
8+
9+
export const SelectButton = styled.button`
10+
width: 100%;
11+
padding: 12px 16px;
12+
background: white;
13+
border: 1px solid ${({ theme }) => theme.colors.grayscale.gc_3};
14+
border-radius: 8px;
15+
display: flex;
16+
justify-content: space-between;
17+
align-items: center;
18+
cursor: pointer;
19+
font-size: 14px;
20+
color: ${({ theme }) => theme.colors.grayscale.font_1};
21+
height: 54px;
22+
`
23+
24+
export const Arrow = styled.span<{ isOpen: boolean }>`
25+
width: 0;
26+
height: 0;
27+
border-left: 5px solid transparent;
28+
border-right: 5px solid transparent;
29+
border-top: 5px solid ${({ theme }) => theme.colors.grayscale.font_2};
30+
transform: ${({ isOpen }) => (isOpen ? 'rotate(180deg)' : 'rotate(0deg)')};
31+
transition: transform 0.2s ease;
32+
`
33+
34+
export const OptionList = styled.ul`
35+
position: absolute;
36+
top: 100%;
37+
left: 0;
38+
right: 0;
39+
margin-top: 4px;
40+
padding: 0;
41+
background: white;
42+
border: 1px solid ${({ theme }) => theme.colors.grayscale.gc_1};
43+
border-radius: 8px;
44+
list-style: none;
45+
max-height: 200px;
46+
overflow-y: auto;
47+
z-index: 1000;
48+
`
49+
50+
export const Option = styled.li<{ isSelected: boolean }>`
51+
padding: 12px 16px;
52+
cursor: pointer;
53+
font-size: 14px;
54+
55+
${({ isSelected, theme }) =>
56+
isSelected &&
57+
css`
58+
background-color: ${theme.colors.brand.lighten_3};
59+
color: ${theme.colors.brand.default};
60+
`}
61+
62+
&:hover {
63+
background-color: ${({ theme }) => theme.colors.grayscale.gc_3};
64+
}
65+
`

‎src/components/Toast/index.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
// components/Toast/index.tsx
21
import * as S from './styles'
32
import { useEffect } from 'react'
43
import { useToastStore } from '~/stores/toastStore'
@@ -16,7 +15,7 @@ export default function Toast() {
1615
}, [isVisible])
1716

1817
return (
19-
<S.ToastWrapper isVisible={isVisible}>
18+
<S.ToastWrapper $isVisible={isVisible}>
2019
<S.Toast>{content}</S.Toast>
2120
</S.ToastWrapper>
2221
)

‎src/components/Toast/styles.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import { styled } from 'styled-components'
22

3-
export const ToastWrapper = styled.div<{ isVisible: boolean }>`
3+
export const ToastWrapper = styled.div<{ $isVisible: boolean }>`
44
position: absolute;
55
top: -50px;
66
77
width: 100%;
88
display: flex;
99
justify-content: center;
1010
11-
visibility: ${({ isVisible }) => (isVisible ? 'visiblie' : 'hidden')};
12-
opacity: ${({ isVisible }) => (isVisible ? 1 : 0)};
11+
visibility: ${({ $isVisible }) => ($isVisible ? 'visiblie' : 'hidden')};
12+
opacity: ${({ $isVisible }) => ($isVisible ? 1 : 0)};
1313
transition:
1414
opacity 0.3s ease,
1515
visibility 0.3s ease;

‎src/data/breeds.json

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
{
2+
"breeds": [
3+
"래브라도 리트리버",
4+
"골든 리트리버",
5+
"저먼 셰퍼드",
6+
"도베르만",
7+
"그레이트 데인",
8+
"버니즈 마운틴 독",
9+
"뉴펀들랜드",
10+
"로트와일러",
11+
"세인트 버나드",
12+
"아이리시 울프하운드",
13+
"잉글리시 마스티프",
14+
"그레이트 피레니즈",
15+
"시베리안 허스키",
16+
"알래스칸 맬러뮤트",
17+
"보더 콜리",
18+
"비글",
19+
"불독",
20+
"차우차우",
21+
"달마시안",
22+
"사모예드",
23+
"시바견",
24+
"웰시코기",
25+
"진도견",
26+
"아키타",
27+
"바셋하운드",
28+
"브리타니",
29+
"콜리",
30+
"잉글리시 세터",
31+
"잉글리시 스프링거 스패니얼",
32+
"벨기에 말리노이즈",
33+
"포인터",
34+
"에어데일 테리어",
35+
"휘펫",
36+
"불 테리어",
37+
"스탠더드 푸들",
38+
"아메리칸 에스키모",
39+
"보더 테리어",
40+
"웨스트하이랜드 화이트 테리어",
41+
"프렌치 불독",
42+
"포메라니안",
43+
"치와와",
44+
"요크셔테리어",
45+
"미니어처 슈나우저",
46+
"미니어처 푸들",
47+
"토이 푸들",
48+
"말티즈",
49+
"시츄",
50+
"닥스훈트",
51+
"비숑 프리제",
52+
"파피용",
53+
"퍼그",
54+
"페키니즈",
55+
"잭 러셀 테리어",
56+
"미니어처 핀셔",
57+
"캐벌리어 킹 찰스 스패니얼",
58+
"보스턴 테리어",
59+
"이탈리안 그레이하운드",
60+
"스코티시 테리어",
61+
"실키 테리어",
62+
"케언 테리어",
63+
"노리치 테리어",
64+
"아프간 하운드",
65+
"살루키",
66+
"바센지",
67+
"차이니즈 샤페이",
68+
"아메리칸 코카 스패니얼",
69+
"잉글리시 코카 스패니얼",
70+
"클럼버 스패니얼",
71+
"필드 스패니얼",
72+
"저먼 와이어헤어드 포인터",
73+
"체서피크 베이 리트리버",
74+
"컬리코티드 리트리버",
75+
"플랫코티드 리트리버",
76+
"아이리시 세터",
77+
"고든 세터",
78+
"올드 잉글리시 시프도그",
79+
"셔틀랜드 시프도그",
80+
"벨기안 시프도그",
81+
"오스트레일리안 캐틀 독",
82+
"핀란드 스피츠",
83+
"케이스혼드",
84+
"티베탄 마스티프",
85+
"불마스티프",
86+
"네아폴리탄 마스티프",
87+
"블러드하운드",
88+
"그레이하운드",
89+
"노르웨이언 엘크하운드",
90+
"아이리시 워터 스패니얼",
91+
"웨일즈 스프링거 스패니얼",
92+
"스탠더드 슈나우저",
93+
"자이언트 슈나우저",
94+
"스코티시 디어하운드",
95+
"맨체스터 테리어",
96+
"노퍽 테리어",
97+
"래빗 닥스훈트",
98+
"롱헤어드 닥스훈트",
99+
"아메리칸 불리",
100+
"버니두들",
101+
"골든두들",
102+
"래브라두들",
103+
"포르투갈 워터 독",
104+
"오스트레일리안 셰퍼드",
105+
"벨기에 터뷰런",
106+
"블랙 러시안 테리어",
107+
"불 마스티프",
108+
"체서피크 베이 리트리버",
109+
"샤페이",
110+
"클럼버 스패니얼",
111+
"컬리 코티드 리트리버",
112+
"댄디 딘몬트 테리어",
113+
"잉글리시 폭스하운드",
114+
"필드 스패니얼",
115+
"핀란드 라프훈드",
116+
"자이언트 슈나우저",
117+
"아이비전 하운드"
118+
]
119+
}

‎src/modals/DatePickerModal/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export default function DatePickerModal({ date, setDate }: DatePickerModalProps)
4040

4141
return (
4242
<S.ModalOverlay onClick={close}>
43-
<S.DatePickerModal isExiting={isExiting} onClick={handleModalClick}>
43+
<S.DatePickerModal $isExiting={isExiting} onClick={handleModalClick}>
4444
<S.ConfirmBtn onClick={handleConfirmBtn}>확인</S.ConfirmBtn>
4545
<S.Divider />
4646
<DatePicker

‎src/modals/DatePickerModal/styles.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ const slideDown = keyframes`
1919
`
2020

2121
export const ModalOverlay = styled.div`
22+
background-color: rgba(0, 0, 0, 0.4);
23+
z-index: 200;
2224
position: fixed;
2325
top: 0;
2426
left: 0;
@@ -28,11 +30,11 @@ export const ModalOverlay = styled.div`
2830
align-items: flex-end;
2931
`
3032

31-
export const DatePickerModal = styled.div<{ isExiting: boolean }>`
33+
export const DatePickerModal = styled.div<{ $isExiting: boolean }>`
3234
background-color: white;
3335
width: 100%;
3436
35-
animation: ${({ isExiting }) => (isExiting ? slideDown : slideUp)} 0.3s ease-out;
37+
animation: ${({ $isExiting }) => ($isExiting ? slideDown : slideUp)} 0.3s ease-out;
3638
3739
> div {
3840
padding: 1rem;

‎src/modals/RegisterDogModal/CheckDogProfileSection/index.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,15 @@ import Header from '~components/Header/index'
44
import { Typo24 } from '~components/Typo/index'
55
import Profile from '~components/Profile'
66
import Tag from '~components/Tag'
7+
import { useModalStore } from '~stores/modalStore'
78

89
export default function CheckDogProfileSection() {
9-
const handleClickPrev = () => {}
10+
const { popModal } = useModalStore()
1011

1112
return (
1213
<>
13-
<Header type='sm' onClickPrev={handleClickPrev} prevBtn={true} />
1414
<S.CheckDogProfileSection>
15+
<Header type='sm' onClickPrev={popModal} prevBtn={true} />
1516
<S.ProfileArea>
1617
<S.TypoWrapper>
1718
<Typo24 $weight='700'>

‎src/modals/RegisterDogModal/CheckDogProfileSection/styles.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
import { styled } from 'styled-components'
22

33
export const CheckDogProfileSection = styled.div`
4+
z-index: 200;
45
padding: 180px 20px 24px 20px;
56
background-color: ${({ theme }) => theme.colors.grayscale.gc_4};
6-
height: 100dvh;
7+
position: absolute;
8+
top: 0;
9+
left: 0;
10+
right: 0;
11+
bottom: 0;
712
813
display: flex;
914
flex-direction: column;

0 commit comments

Comments
 (0)