Y_FE_Toy1_Team6 - Youcandoit #7
Conversation
design: add Header layout
Change to commute button component in header
design: add Footer layout
μ½λ νμ€ μμ νμ΅λλ€.
design: SideBar html, css μμ
design: μ 체μ μΈ css μμ λ° λ°μν ꡬν
Chore: "Add react-icons"
λ‘κ·ΈμΈ κΈ°λ₯μ ꡬννλ€.
Feat: Employee νμ΄μ§ λ§ν¬μ
λ§ν¬λ€μ΄ μλν° κ΅¬νμ μν μ΄κΈ° μΈν (μ΄μ #7)
There was a problem hiding this comment.
κ³ μ λ§μΌμ
¨μ΅λλ€~
ꡬννλ €κ³ νμ
¨λ μ£Όμν κΈ°λ₯λ€μ λͺ¨λ μ ꡬνλ κ² κ°λ€μ!
λ€μ νλ‘μ νΈ μ μ
- react λ΄μμ μν μ²λ¦¬
- useCallback, useMemo λ± λ€μν hooks νμ©
- λ°λ³΅λλ λ‘μ§κ³Ό μ»΄ν¬λνΈ κ³΅ν΅ν
- νλ νΈ λ±μ νμ©ν μ€νμΌ κ΄λ ¨ μμ μ¬μ¬μ©
- cssλ₯Ό ν΅ν λ μ΄μμ ꡬμ±
λ₯Ό μ‘°κΈ λ μ΄ν΄λ³΄μλ©΄ μ’μ κ² κ°μ΅λλ€!
μ€λ³΅λλ 리뷰λ μλ΅νμΌλ, λ³ΈμΈμ μ½λμ λν λ¦¬λ·°κ° μλλλΌλ ν λ²μ© μ°Έκ³ ν΄μ£Όμλ©΄ κ°μ¬νκ² μ΅λλ€~
| <meta name="theme-color" content="#000000" /> | ||
| <meta | ||
| name="description" | ||
| content="Web site created using create-react-app" |
There was a problem hiding this comment.
μ΄λ° μ 보λ€λ κ°μ΄ λ°κΎΈμλ©΄ μ’μ§ μμκΉμ?
There was a problem hiding this comment.
PWAλ‘ λ§λλ κ±Έ μλνμ κ² κ°λ€μ!
μμ΄μ½κ³Ό μλΉμ€ μ컀λ₯Ό μΆκ°νμ
μ PWAλ₯Ό μμ±ν΄λ³΄μ
λ μ’μ κ² κ°μ΅λλ€.
| @font-face { | ||
| font-family: "NotoSansKR-Bold"; | ||
| src: url("./NotoSans/NotoSansKR-Bold.ttf"); | ||
| } |
There was a problem hiding this comment.
woff2 ν°νΈλ₯Ό μ¬μ©νκ³ , font-display:swapμ μΆκ°νλ λ± μΉν°νΈ μ΅μ νλ₯Ό μ§νν΄λ³΄λ©΄ μ’μ κ² κ°μ΅λλ€.
NotoSansλ Subset fontλ λ§λ€μ΄μ Έμμ κ±°μμ.
| import github from "../../assets/icons/footer_icon/footer_github_black_icon.png"; | ||
| import logo from "../../assets/icons/header_icon/logo.png"; | ||
| import "../../assets/fonts/Font.css"; |
There was a problem hiding this comment.
aliasλ₯Ό μ¬μ©ν΄λ³΄μλ©΄ μ‘°κΈ λ κΉλνκ² importλ₯Ό μ 리ν μ μμ κ² κ°λ€μ!
| <a | ||
| href="https://github.com/Fastcampus-Youcandoit/frontend" | ||
| target="_blank" | ||
| rel="noreferrer"> |
There was a problem hiding this comment.
noreferrerκΉμ§ μΆκ°νμ κ² μ’μ΅λλ€! noopenerκΉμ§ μΆκ°λλ©΄ μ’μ κ² κ°λ€μ.
| if (location.state.id) | ||
| await updateDoc(doc(db, "notice", location.state.id), data); |
There was a problem hiding this comment.
elseκ° μκ±°λ, ifλ¬Έμ΄ λ μ€μ΄ λμ΄κ°κΈ° μμνλ©΄ μ€κ΄νΈλ₯Ό μλ΅νμ§ μλ κ² μ μ§λ³΄μμ± λ±μ λ©΄μμ λ μ’μ κ² κ°μ΅λλ€!
| // 1.μ΄λ©μΌ μ ν¨μ±κ²μ¬ | ||
| // μλ¬Έκ³Ό μ΄λ©μΌ νμ | ||
| const checkEmailValidation = (value: string) => { | ||
| const EMAIL_REGEX = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/; |
There was a problem hiding this comment.
validation κ΄λ ¨ λ‘μ§μ΄λ regexλ λ°λ‘ κ΄λ¦¬νλ©΄ μ¬μ¬μ©μ±μ΄ λμμ§μ§ μμκΉμ?
| const [email, setEmail] = useState<string | undefined>(""); | ||
| const [password, setPassword] = useState<string | undefined>(""); |
There was a problem hiding this comment.
λ κ°μ΄ empty stringμ΄ μλλΌ undefinedκ° λ μ μλ 건κ°μ?
| let isValidName; | ||
| if (value.length === 0) { | ||
| isValidName = "required"; | ||
| } else { | ||
| isValidName = NAME_REGEX.test(value) ? true : "invalid"; | ||
| } |
There was a problem hiding this comment.
requiredλ invalidλ μ΄λ€ μν μ νλ 건κ°μ?
validation λ‘μ§μ λΉμ·ν ν¨ν΄μ΄ λ°λ³΅λλλ°, formμ μ ν¨μ±μ κ²μ¬νλ library(μ: react hook form)λ₯Ό μΆκ°νκ±°λ, custom hookμΌλ‘ λ¬Άμ΄λ³΄λ©΄ μ’μ κ² κ°λ€μ.
| font-size: 21px; | ||
| margin-left: 20px; | ||
| font-family: "NotoSansKR-Medium"; | ||
| `; | ||
|
|
||
| const Text = styled.div` | ||
| height: 3.5rem; | ||
| font-size: 18px; |
There was a problem hiding this comment.
font-sizeμ λλΆλΆ rem λ¨μκ° μ¬μ©λμλλ°, κ°κΈμ λ¨μλ₯Ό ν΅μΌνλ©΄ μ’μ κ² κ°μ΅λλ€.
π§π»βπ» μ§μλ€μ μν μν€ μ¬μ΄νΈ ( ν μ΄νλ‘μ νΈ1 6μ‘° μ‘μΊλμ )
π νλ‘μ νΈ Info
π νλ‘μ νΈ URL : youcandoit-wiki
ποΈ κ°λ° κΈ°κ° : 20203.09.08 ~ 2023.09.22
π¨ μ¬μ© κΈ°μ μ€ν
νμ μκ°
β νμ ꡬνμ¬ν
β μ ν ꡬνμ¬ν
β νμλ³ μ£Όλ΄λΉ ꡬνλΆ
βοΈ userflow
π§π»βπ» ꡬν μ¬ν
π ν
μΆν΄κ·Ό νμ΄λ¨Έ
ν_μΊλ¬μ κ³Ό κ³΅μ§ λ° κ°€λ¬λ¦¬
ν_μΊλ¦°λ
π λ‘κ·ΈμΈ λ° νμκ°μ
λ‘κ·ΈμΈ λ° νμκ°μ , λΉλ°λ²νΈ μ°ΎκΈ°μ λ‘κ·Έμμ
π 곡μ§
곡μ§μ¬ν μ½κΈ°μ μμ± λ° μμ
π μν€
μ¬μ΄λλ° νμκ³Ό λ¬Έμ μμ λ° μ μ₯
π κ°€λ¬λ¦¬
κ°€λ¬λ¦¬ μ¬μ§ μ½κΈ° λ° μ¬μ΄λλ° νν°λ§κ³Ό μ λ‘λ λ° μμ κ³Ό μμ
π λ°μν ꡬν
ν λ°μν ꡬν
곡μ§μ μν€ λ° κ°€λ¬λ¦¬ λ°μν ꡬν