Merge branch 'develop' of https://github.com/prgrms-web-devcourse-fin…

…al-project/WEB1_1_DDang_FE into 43-design-소셜-디자인
prgrms-web-devcourse-final-project · Nov 28, 2024 · 8cdd622 · 8cdd622
2 parents 79775e4 + c4500e1
commit 8cdd622
Show file tree

Hide file tree

Showing 29 changed files with 1,174 additions and 89 deletions.
diff --git a/src/assets/report.svg b/src/assets/report.svg
diff --git a/src/components/GenderSelectButton/index.tsx b/src/components/GenderSelectButton/index.tsx
@@ -11,8 +11,8 @@ interface GenderSelectButtonProps {
 
 export default function GenderSelectButton({ gender, isActive, onClick }: GenderSelectButtonProps) {
   return (
-    <S.GenderBtn isActive={isActive} onClick={onClick}>
-      <S.GenderIcon isActive={isActive} src={gender === 'male' ? Male : Female} alt='성별' />
+    <S.GenderBtn $isActive={isActive} onClick={onClick}>
+      <S.GenderIcon $isActive={isActive} src={gender === 'male' ? Male : Female} alt='성별' />
       <Typo17 $weight={isActive ? '700' : '400'}>{gender === 'male' ? '남' : '여'}</Typo17>
     </S.GenderBtn>
   )

diff --git a/src/components/GenderSelectButton/styles.ts b/src/components/GenderSelectButton/styles.ts
@@ -1,10 +1,10 @@
 import { styled } from 'styled-components'
-export const GenderBtn = styled.button<{ isActive: boolean }>`
-  border: solid 2px ${({ isActive, theme }) => (isActive ? theme.colors.brand.darken : theme.colors.grayscale.gc_1)};
+export const GenderBtn = styled.button<{ $isActive: boolean }>`
+  border: solid 2px ${({ $isActive, theme }) => ($isActive ? theme.colors.brand.darken : theme.colors.grayscale.gc_1)};
   border-radius: 8px;
   width: auto;
   height: 102px;
-  color: ${({ isActive, theme }) => (isActive ? theme.colors.brand.darken : theme.colors.grayscale.font_3)};
+  color: ${({ $isActive, theme }) => ($isActive ? theme.colors.brand.darken : theme.colors.grayscale.font_3)};
 
   display: flex;
   flex-direction: column;
@@ -13,9 +13,9 @@ export const GenderBtn = styled.button<{ isActive: boolean }>`
   gap: 0.2rem;
 `
 
-export const GenderIcon = styled.img<{ isActive: boolean }>`
+export const GenderIcon = styled.img<{ $isActive: boolean }>`
   filter: ${props =>
-    props.isActive
+    props.$isActive
       ? 'invert(12%) sepia(70%) saturate(924%) hue-rotate(351deg) brightness(96%) contrast(97%)'
       : 'invert(31%) sepia(4%) saturate(61%) hue-rotate(332deg) brightness(99%) contrast(97%)'};
 `
diff --git a/src/components/Select/index.tsx b/src/components/Select/index.tsx
@@ -0,0 +1,48 @@
+import { useState } from 'react'
+import * as S from './styles'
+
+interface Option {
+  value: string
+  label: string
+}
+
+interface SelectProps {
+  options: Option[]
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+}
+
+const Select = ({ options, value, onChange, placeholder }: SelectProps) => {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const selectedOption = options.find(option => option.value === value)
+
+  return (
+    <S.SelectContainer>
+      <S.SelectButton onClick={() => setIsOpen(!isOpen)}>
+        {selectedOption ? selectedOption.label : placeholder || '선택하세요'}
+        <S.Arrow isOpen={isOpen} />
+      </S.SelectButton>
+
+      {isOpen && (
+        <S.OptionList>
+          {options.map(option => (
+            <S.Option
+              key={option.value}
+              onClick={() => {
+                onChange(option.value)
+                setIsOpen(false)
+              }}
+              isSelected={value === option.value}
+            >
+              {option.label}
+            </S.Option>
+          ))}
+        </S.OptionList>
+      )}
+    </S.SelectContainer>
+  )
+}
+
+export default Select
diff --git a/src/components/Select/styles.ts b/src/components/Select/styles.ts
@@ -0,0 +1,65 @@
+import styled, { css } from 'styled-components'
+
+export const SelectContainer = styled.div`
+  position: relative;
+  width: 100%;
+  margin-bottom: 33px;
+`
+
+export const SelectButton = styled.button`
+  width: 100%;
+  padding: 12px 16px;
+  background: white;
+  border: 1px solid ${({ theme }) => theme.colors.grayscale.gc_3};
+  border-radius: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  font-size: 14px;
+  color: ${({ theme }) => theme.colors.grayscale.font_1};
+  height: 54px;
+`
+
+export const Arrow = styled.span<{ isOpen: boolean }>`
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 5px solid ${({ theme }) => theme.colors.grayscale.font_2};
+  transform: ${({ isOpen }) => (isOpen ? 'rotate(180deg)' : 'rotate(0deg)')};
+  transition: transform 0.2s ease;
+`
+
+export const OptionList = styled.ul`
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: 4px;
+  padding: 0;
+  background: white;
+  border: 1px solid ${({ theme }) => theme.colors.grayscale.gc_1};
+  border-radius: 8px;
+  list-style: none;
+  max-height: 200px;
+  overflow-y: auto;
+  z-index: 1000;
+`
+
+export const Option = styled.li<{ isSelected: boolean }>`
+  padding: 12px 16px;
+  cursor: pointer;
+  font-size: 14px;
+
+  ${({ isSelected, theme }) =>
+    isSelected &&
+    css`
+      background-color: ${theme.colors.brand.lighten_3};
+      color: ${theme.colors.brand.default};
+    `}
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.grayscale.gc_3};
+  }
+`
diff --git a/src/components/Toast/index.tsx b/src/components/Toast/index.tsx
@@ -1,4 +1,3 @@
-// components/Toast/index.tsx
 import * as S from './styles'
 import { useEffect } from 'react'
 import { useToastStore } from '~/stores/toastStore'
@@ -16,7 +15,7 @@ export default function Toast() {
   }, [isVisible])
 
   return (
-    <S.ToastWrapper isVisible={isVisible}>
+    <S.ToastWrapper $isVisible={isVisible}>
       <S.Toast>{content}</S.Toast>
     </S.ToastWrapper>
   )

diff --git a/src/components/Toast/styles.ts b/src/components/Toast/styles.ts
@@ -1,15 +1,15 @@
 import { styled } from 'styled-components'
 
-export const ToastWrapper = styled.div<{ isVisible: boolean }>`
+export const ToastWrapper = styled.div<{ $isVisible: boolean }>`
   position: absolute;
   top: -50px;
 
   width: 100%;
   display: flex;
   justify-content: center;
 
-  visibility: ${({ isVisible }) => (isVisible ? 'visiblie' : 'hidden')};
-  opacity: ${({ isVisible }) => (isVisible ? 1 : 0)};
+  visibility: ${({ $isVisible }) => ($isVisible ? 'visiblie' : 'hidden')};
+  opacity: ${({ $isVisible }) => ($isVisible ? 1 : 0)};
   transition:
     opacity 0.3s ease,
     visibility 0.3s ease;

diff --git a/src/data/breeds.json b/src/data/breeds.json
@@ -0,0 +1,119 @@
+{
+  "breeds": [
+    "래브라도 리트리버",
+    "골든 리트리버",
+    "저먼 셰퍼드",
+    "도베르만",
+    "그레이트 데인",
+    "버니즈 마운틴 독",
+    "뉴펀들랜드",
+    "로트와일러",
+    "세인트 버나드",
+    "아이리시 울프하운드",
+    "잉글리시 마스티프",
+    "그레이트 피레니즈",
+    "시베리안 허스키",
+    "알래스칸 맬러뮤트",
+    "보더 콜리",
+    "비글",
+    "불독",
+    "차우차우",
+    "달마시안",
+    "사모예드",
+    "시바견",
+    "웰시코기",
+    "진도견",
+    "아키타",
+    "바셋하운드",
+    "브리타니",
+    "콜리",
+    "잉글리시 세터",
+    "잉글리시 스프링거 스패니얼",
+    "벨기에 말리노이즈",
+    "포인터",
+    "에어데일 테리어",
+    "휘펫",
+    "불 테리어",
+    "스탠더드 푸들",
+    "아메리칸 에스키모",
+    "보더 테리어",
+    "웨스트하이랜드 화이트 테리어",
+    "프렌치 불독",
+    "포메라니안",
+    "치와와",
+    "요크셔테리어",
+    "미니어처 슈나우저",
+    "미니어처 푸들",
+    "토이 푸들",
+    "말티즈",
+    "시츄",
+    "닥스훈트",
+    "비숑 프리제",
+    "파피용",
+    "퍼그",
+    "페키니즈",
+    "잭 러셀 테리어",
+    "미니어처 핀셔",
+    "캐벌리어 킹 찰스 스패니얼",
+    "보스턴 테리어",
+    "이탈리안 그레이하운드",
+    "스코티시 테리어",
+    "실키 테리어",
+    "케언 테리어",
+    "노리치 테리어",
+    "아프간 하운드",
+    "살루키",
+    "바센지",
+    "차이니즈 샤페이",
+    "아메리칸 코카 스패니얼",
+    "잉글리시 코카 스패니얼",
+    "클럼버 스패니얼",
+    "필드 스패니얼",
+    "저먼 와이어헤어드 포인터",
+    "체서피크 베이 리트리버",
+    "컬리코티드 리트리버",
+    "플랫코티드 리트리버",
+    "아이리시 세터",
+    "고든 세터",
+    "올드 잉글리시 시프도그",
+    "셔틀랜드 시프도그",
+    "벨기안 시프도그",
+    "오스트레일리안 캐틀 독",
+    "핀란드 스피츠",
+    "케이스혼드",
+    "티베탄 마스티프",
+    "불마스티프",
+    "네아폴리탄 마스티프",
+    "블러드하운드",
+    "그레이하운드",
+    "노르웨이언 엘크하운드",
+    "아이리시 워터 스패니얼",
+    "웨일즈 스프링거 스패니얼",
+    "스탠더드 슈나우저",
+    "자이언트 슈나우저",
+    "스코티시 디어하운드",
+    "맨체스터 테리어",
+    "노퍽 테리어",
+    "래빗 닥스훈트",
+    "롱헤어드 닥스훈트",
+    "아메리칸 불리",
+    "버니두들",
+    "골든두들",
+    "래브라두들",
+    "포르투갈 워터 독",
+    "오스트레일리안 셰퍼드",
+    "벨기에 터뷰런",
+    "블랙 러시안 테리어",
+    "불 마스티프",
+    "체서피크 베이 리트리버",
+    "샤페이",
+    "클럼버 스패니얼",
+    "컬리 코티드 리트리버",
+    "댄디 딘몬트 테리어",
+    "잉글리시 폭스하운드",
+    "필드 스패니얼",
+    "핀란드 라프훈드",
+    "자이언트 슈나우저",
+    "아이비전 하운드"
+  ]
+}
diff --git a/src/modals/DatePickerModal/index.tsx b/src/modals/DatePickerModal/index.tsx
@@ -40,7 +40,7 @@ export default function DatePickerModal({ date, setDate }: DatePickerModalProps)
 
   return (
     <S.ModalOverlay onClick={close}>
-      <S.DatePickerModal isExiting={isExiting} onClick={handleModalClick}>
+      <S.DatePickerModal $isExiting={isExiting} onClick={handleModalClick}>
         <S.ConfirmBtn onClick={handleConfirmBtn}>확인</S.ConfirmBtn>
         <S.Divider />
         <DatePicker

diff --git a/src/modals/DatePickerModal/styles.ts b/src/modals/DatePickerModal/styles.ts
@@ -19,6 +19,8 @@ const slideDown = keyframes`
 `
 
 export const ModalOverlay = styled.div`
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: 200;
   position: fixed;
   top: 0;
   left: 0;
@@ -28,11 +30,11 @@ export const ModalOverlay = styled.div`
   align-items: flex-end;
 `
 
-export const DatePickerModal = styled.div<{ isExiting: boolean }>`
+export const DatePickerModal = styled.div<{ $isExiting: boolean }>`
   background-color: white;
   width: 100%;
 
-  animation: ${({ isExiting }) => (isExiting ? slideDown : slideUp)} 0.3s ease-out;
+  animation: ${({ $isExiting }) => ($isExiting ? slideDown : slideUp)} 0.3s ease-out;
 
   > div {
     padding: 1rem;

diff --git a/src/modals/RegisterDogModal/CheckDogProfileSection/index.tsx b/src/modals/RegisterDogModal/CheckDogProfileSection/index.tsx
@@ -4,14 +4,15 @@ import Header from '~components/Header/index'
 import { Typo24 } from '~components/Typo/index'
 import Profile from '~components/Profile'
 import Tag from '~components/Tag'
+import { useModalStore } from '~stores/modalStore'
 
 export default function CheckDogProfileSection() {
-  const handleClickPrev = () => {}
+  const { popModal } = useModalStore()
 
   return (
     <>
-      <Header type='sm' onClickPrev={handleClickPrev} prevBtn={true} />
       <S.CheckDogProfileSection>
+        <Header type='sm' onClickPrev={popModal} prevBtn={true} />
         <S.ProfileArea>
           <S.TypoWrapper>
             <Typo24 $weight='700'>

diff --git a/src/modals/RegisterDogModal/CheckDogProfileSection/styles.ts b/src/modals/RegisterDogModal/CheckDogProfileSection/styles.ts
@@ -1,9 +1,14 @@
 import { styled } from 'styled-components'
 
 export const CheckDogProfileSection = styled.div`
+  z-index: 200;
   padding: 180px 20px 24px 20px;
   background-color: ${({ theme }) => theme.colors.grayscale.gc_4};
-  height: 100dvh;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 
   display: flex;
   flex-direction: column;