From 3e0f73b650d59e9118d7e0f1a6d7ef19261676ce Mon Sep 17 00:00:00 2001 From: yoonc01 <143938662+yoonc01@users.noreply.github.com> Date: Sun, 29 Dec 2024 19:11:00 +0900 Subject: [PATCH 01/12] Create README.md --- README.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 00000000..ba54988f --- /dev/null +++ b/README.md @@ -0,0 +1,5 @@ +# sprint 1 미션 +[Sprint 1 미션 PR](https://github.com/codeit-bootcamp-frontend/13-Sprint-Mission/pull/23) + +# sprint 2 미션 +[Sprint 2 미션 PR](https://github.com/codeit-bootcamp-frontend/13-Sprint-Mission/pull/38) From c6c5ddfc92048737b690e29334aa7a3b1c5d7079 Mon Sep 17 00:00:00 2001 From: yoonc01 <143938662+yoonc01@users.noreply.github.com> Date: Sun, 29 Dec 2024 19:19:24 +0900 Subject: [PATCH 02/12] Update README.md --- README.md | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/README.md b/README.md index ba54988f..df14cfd4 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,45 @@ # sprint 1 미션 +## 내용 +랜딩 페이지 구현 [Sprint 1 미션 PR](https://github.com/codeit-bootcamp-frontend/13-Sprint-Mission/pull/23) +## 요구사항 +### 기본 +- 랜딩 페이지의 url path는 루트('/')로 설정합니다. +- title은 “판다마켓”으로 설정해 주세요. +- 화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 해주세요. +- 화면의 너비가 1920px 보다 작아질 때, “판다마켓” 로고의 왼쪽 여백 200px“로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 해주세요. +- 클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 cursor: pointer를 설정해 주세요. +- "판다마켓" 클릭 시 루트 페이지(‘/’)로 이동시켜주세요. +- "구경하러 가기" 클릭 시 (“/items”)페이지로 이동시켜주세요.(빈 페이지) +- "Privacy Policy", "FAQ"는 클릭 시 각각 Privacy 페이지('/privacy'), FAQ 페이지('/faq')로 이동합니다.(모두 빈 페이지) +- 페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동합니다. + +### 심화 +- [ ] 사용자의 브라우저가 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정해 보세요.(설정값은 자유입니다) + +## 구현 내용 +https://github.com/user-attachments/assets/d220c08b-83d8-4d2e-a589-b85a3a8590fc + +화면 녹화 특성 상 cursor: pointer;는 안 보임! + # sprint 2 미션 +## 내용 +로그인 및 회원가입 페이지 구현 [Sprint 2 미션 PR](https://github.com/codeit-bootcamp-frontend/13-Sprint-Mission/pull/38) + +### 요구사항 +### 기본 +- "판다마켓" 로고 클릭 시 루트 페이지(“/”)로 이동합니다. +- 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일합니다. +- input 요소에 focus in 일 때, 테두리 색상은 #3692FF입니다. +- input 요소에 focus out 일 때, 테두리는 없습니다. +- SNS 아이콘들은 클릭시 각각 실제 서비스 홈페이지로 이동합니다. +- "회원가입”버튼 클릭 시 “/signup” 페이지로 이동합니다. +- 로그인”버튼 클릭 시 “/login” 페이지로 이동합니다. + +### 심화 +- 비밀번호 input 요소 위에 비밀번호를 확인할 수 있는 아이콘을 추가해 주세요. + +### 구현 내용 +https://github.com/user-attachments/assets/7027bb8a-4f37-4a0d-af8a-0e532979d1fb From 3ac4c83872d83538a3b9f8970e7d7d33d9cc4566 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9C=A4=ED=9A=A8=EC=A4=80?= Date: Wed, 1 Jan 2025 16:05:35 +0900 Subject: [PATCH 03/12] Fix: change png files to svg --- src/assets/icons/google_icon.png | Bin 2402 -> 0 bytes src/assets/icons/google_icon.svg | 9 +++++++++ src/assets/icons/kakaotalk_icon.png | Bin 2205 -> 0 bytes src/assets/icons/kakaotalk_icon.svg | 4 ++++ src/assets/icons/temp | 0 src/pages/login.html | 4 ++-- 6 files changed, 15 insertions(+), 2 deletions(-) delete mode 100644 src/assets/icons/google_icon.png create mode 100644 src/assets/icons/google_icon.svg delete mode 100644 src/assets/icons/kakaotalk_icon.png create mode 100644 src/assets/icons/kakaotalk_icon.svg delete mode 100644 src/assets/icons/temp diff --git a/src/assets/icons/google_icon.png b/src/assets/icons/google_icon.png deleted file mode 100644 index 63a812310e6c96bd5b0b7d53ed3b200ace08b97a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2402 zcmV-o37z(dP)ef zY1*_UsZt`51jj%ifD)j{Tp=!Tj8z9JgehP`>Y59+@#o$7Zg*bay2Nn4&%M1n`yzhQ zdGBWDX7~R4=FQA|V}J)d;C>jy8Ki64OJB!mq8~GtE|LN!pf+5L!3Q9q60qm}EZe1Sh%!+X;%3S8yc89l0pQ<*P)|K# zn4L3GTQsV_5|O$C#f7NT`w z!A1dCfxt3haJYepKhLf{zZXmpu@JXP9?jw+`A_83z5_!6WWWDhbZ^az(0@cEMBAeL zDIR3U7_jj$v}n>4Pw|-J4L86b91PM@T(DLZQq2$)K_{21NzXzA$VMvLiwmCO3|>P( zL*I)RF%R6Pxb zAbpl#LIjBc znl0DX&>o=Df9Z9NUe)@C_9x~JSDmhcHg?B?9^gdvRVi@RW-T z*=UHICc*fcoKv+QfeGx33YU-t?WVh(pns;Derr^_c*bmZxE~()gk@92B9Ql@KQFeq zI;WZyK_~mv$0s9d3=i=gAzB3y@(AL-sZ>4NA;vVw8iRl%Mdd-~%O5CfWu zCZy!rZnz-I__YXmnAo1S=BkxvxWNbv@D9B;#7YF6ScstGV-a`?vQ<#7(_1ULBy^t5 zf!_0@L(Vs_?+;&+U0r(;5)dDY@Sw7U4t-sMrD)8$xS3fNw1`j*ktOU%R1tK1gkTI; z4=hWWY3CW=zbvS$V1Rb6cr5rFBrskkk4M0&T9pn6Fu%ZF2^~kr3-`Y=r2ESi4v!80 zYh42*FkTj+rphxR$Rvv;Yb>>_NwUmqL3YG7eU8M2-Mh`kl)Zl(sS%AZEYj! zqY62XKfsp&@2AgUGK7ho%TMv^Q-(9qAPT_Y#8Q4O0;z zd@SmjylCVYnEV375$=)n_0DduvM=7y{9z=CU;#tmSx7{f@Ui@UAv{7E2gXTAAt?1Q zW?)&r5VV*{2ZP8=x(Nvgg*he+EW0;q$i`!l-MvaDBp@iX)PZIFLTD;TU=%6-+X|wA zzra_238~Nn29bpt$ufQLVc@gHpkD|XxZ%wiazz5_-PPyz`F z`pkX$g-BflpVOfW47JB*Kmx)*`0T5=H+=RDuW%g-xZ;cqQa{3SujW_nEEXv^(m9zQoT9Tr)zi#!AdD5hgjpUfloXm zU|sussBvfeoD)L4HSzV*cRsW5uBq@+ci#P7!7r2*+g$ig z*%F8oi+=4G4~+l9$anN^AuD*;-#OnX_5z@w1@385)B3u?k>0Q;k4!_Toc>PPYKSq# zzp`fwO|7J7V`yee59|1;Eh9Soo%5UNy5dNG?b*)RT|v5n{|f0l59arX4K^m&2K2h4_hTccS>pf{F8X^&) z?{-joDd_oNCkrae^o=6F1@q95EM9T6%EvDKaDUjr-dS&yf5n}wt>cWX!@Hw{(pdz_ ztxp0M;fGhr8V-;(ln1L5GO#jzU)cewRR&Q3RhkO_jY)7u1Mwkw*G~a0ea?%fy%v>q zkB}j04t;uzJp4i`&h^&{S4V@j<;TF?V?$q(iEiQUnPRILb0cUq2*Hd$mu73jlv;W_ zq+$BMPl4Q15WFIaP1W1ee*+;1E7X=>RX&AlqK1|k@t-}0K{TDS98|iAM{~aLOcrs3cGv^f$^1uL_Xmrc2P2si^cEGmf z;N^y#6_c-%34I$P*ux!5gklFZt&TESW9gNxJI5xsq%N%4GU|4?Z5WDNw;Z^1F{k_+ z*J*{im_8=M5CXXqJj2eBZ%nVLaxM{t?>ds@d-@&+6@En;EbT)M8wcJ|z4dn#S(}i)&YXsrmIxR8w~O`<6XI{&zby zN&`EjLiEwQKs)7Ac7sKGy?*)OYY-)3lDmAAEJRY}B@$|D=+Q0GcY;9V=;rSr^FND% zzpc7FM;q22j(jl~fS4z7^N%dGN-kw43bvYl(qv?88WmeY+*KFFPOpJrHpbX{io|Nq zt=#W~7&0i??80}KjYOw14rDD|( + + + + + + + + diff --git a/src/assets/icons/kakaotalk_icon.png b/src/assets/icons/kakaotalk_icon.png deleted file mode 100644 index 8c25d9f9cb771f9b0f7e3b73bb65818aec70440d..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2205 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 diff --git a/src/assets/icons/kakaotalk_icon.svg b/src/assets/icons/kakaotalk_icon.svg new file mode 100644 index 00000000..46853fcf --- /dev/null +++ b/src/assets/icons/kakaotalk_icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/temp b/src/assets/icons/temp deleted file mode 100644 index e69de29b..00000000 diff --git a/src/pages/login.html b/src/pages/login.html index 7dbaf68f..9d658c7e 100644 --- a/src/pages/login.html +++ b/src/pages/login.html @@ -32,10 +32,10 @@

간편 로그인하기

From a9f64c6ed3b37e7ac7e087582428b8193be49992 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9C=A4=ED=9A=A8=EC=A4=80?= Date: Wed, 1 Jan 2025 17:19:52 +0900 Subject: [PATCH 04/12] Fix: change p tags to h2 tags --- index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index f964a822..0ce30ebb 100644 --- a/index.html +++ b/index.html @@ -47,10 +47,10 @@

Hot item

-

+

인기 상품을
확인해 보세요 -

+

가장 HOT한 중고거래 물품을
판다 마켓에서 확인해 보세요 @@ -64,10 +64,10 @@

Search

-

+

구매를 원하는
상품을 검색하세요 -

+

구매하고 싶은 물품은 검색해서
쉽게 찾아보세요 @@ -87,10 +87,10 @@

Register

-

+

판매를 원하는
상품을 등록하세요 -

+

어떤 물건이든 판매하고 싶은 상품을
쉽게 등록하세요 From 9ce450b7c2f24da4a5fbd56809f476ee750dd2d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9C=A4=ED=9A=A8=EC=A4=80?= Date: Wed, 1 Jan 2025 17:22:34 +0900 Subject: [PATCH 05/12] Fix: global.js to formUtils.js --- src/scripts/{global.js => formUtils.js} | 0 src/scripts/pages/login.js | 2 +- src/scripts/pages/signup.js | 2 +- 3 files changed, 2 insertions(+), 2 deletions(-) rename src/scripts/{global.js => formUtils.js} (100%) diff --git a/src/scripts/global.js b/src/scripts/formUtils.js similarity index 100% rename from src/scripts/global.js rename to src/scripts/formUtils.js diff --git a/src/scripts/pages/login.js b/src/scripts/pages/login.js index c66515e7..c8d99cfc 100644 --- a/src/scripts/pages/login.js +++ b/src/scripts/pages/login.js @@ -1,4 +1,4 @@ -import { setVisibilityToggle, setButtonDisable } from "/src/scripts/global.js"; +import { setVisibilityToggle, setButtonDisable } from "/src/scripts/formUtils.js"; setVisibilityToggle(".input-wrapper"); diff --git a/src/scripts/pages/signup.js b/src/scripts/pages/signup.js index c66515e7..c8d99cfc 100644 --- a/src/scripts/pages/signup.js +++ b/src/scripts/pages/signup.js @@ -1,4 +1,4 @@ -import { setVisibilityToggle, setButtonDisable } from "/src/scripts/global.js"; +import { setVisibilityToggle, setButtonDisable } from "/src/scripts/formUtils.js"; setVisibilityToggle(".input-wrapper"); From 8993166b90d5cd58f916a3c3f5ce471b96980f64 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9C=A4=ED=9A=A8=EC=A4=80?= Date: Wed, 1 Jan 2025 17:31:40 +0900 Subject: [PATCH 06/12] Feat: Responsive(header margin) --- src/styles/index.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/styles/index.css b/src/styles/index.css index c679753d..375a83ea 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -196,4 +196,16 @@ footer { .social-network-icons li { width: 20px; height: 20px; +} + +@media (max-width: 1199px) { + .header-content { + margin: 0 24px; + } +} + +@media (max-width: 767px) { + .header-content { + margin: 0 16px; + } } \ No newline at end of file From 155327eaecd8b2990e6e58d384d2d1e2143cd280 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9C=A4=ED=9A=A8=EC=A4=80?= Date: Wed, 1 Jan 2025 17:51:00 +0900 Subject: [PATCH 07/12] Feat: Responsive(main) --- src/styles/index.css | 60 +++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 57 insertions(+), 3 deletions(-) diff --git a/src/styles/index.css b/src/styles/index.css index 375a83ea..3a0c419c 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -41,7 +41,6 @@ header { display: flex; flex-direction: column; gap: 32px; - width: 357px; height: 260px; } @@ -76,7 +75,6 @@ header { align-items: center; padding: 0 24px; gap: 64px; - height: 444px; border-radius: 12px; background-color: #FCFCFC; } @@ -197,15 +195,71 @@ footer { width: 20px; height: 20px; } - @media (max-width: 1199px) { .header-content { margin: 0 24px; } + + .main-title { + height: auto; + padding-top: 84px; + } + + .main-title-content { + display: flex; + flex-direction: column; + gap: 8px; + align-items: center; + } + + .main-title-content-left { + align-items: center; + gap: 24px; + } + + .main-title-h1 { + text-align: center; + width: auto; + } + + .main-title-h1 br { + display: none; + } + } @media (max-width: 767px) { .header-content { margin: 0 16px; } + + .main-title { + height: auto; + padding-top: 48px; + } + + .main-title-content { + display: flex; + gap: 8px; + align-items: center; + } + + .main-title-content-left { + gap: 18px; + } + + .main-title-h1 { + font-size: 32px; + line-height: 44px; + } + + .main-title-h1 br { + display: block; + } + + .visit-button { + padding: 12px 72px; + font-size: 18px; + line-height: 26px; + } } \ No newline at end of file From b9b90f733cace0ccc6f443d8833f1134ae490a05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9C=A4=ED=9A=A8=EC=A4=80?= Date: Wed, 1 Jan 2025 18:44:42 +0900 Subject: [PATCH 08/12] Feat: Responsive(main-block) --- src/styles/index.css | 100 ++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 98 insertions(+), 2 deletions(-) diff --git a/src/styles/index.css b/src/styles/index.css index 3a0c419c..ecf3b555 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -90,19 +90,19 @@ header { .main-content-right-text { display: flex; flex-direction: column; - width: 350px; gap: 12px; align-items: flex-start; text-align: left; + padding-right: 72px; } .main-content-left-text { display: flex; flex-direction: column; - width: 350px; gap: 12px; align-items: flex-end; text-align: right; + padding-left: 72px; } .main-content-text-header { @@ -195,6 +195,7 @@ footer { width: 20px; height: 20px; } + @media (max-width: 1199px) { .header-content { margin: 0 24px; @@ -226,6 +227,53 @@ footer { display: none; } + .main-block { + display: flex; + align-items: center; + justify-content: center; + height: auto; + padding: 24px 24px; + } + + .main-block:nth-of-type(2n) .main-content { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 24px; + height: auto; + padding: 0px 0px; + background-color: white; + } + + .main-block:nth-of-type(2n + 1) .main-content { + display: flex; + flex-direction: column-reverse; + align-items: flex-end; + gap: 24px; + height: auto; + padding: 0px 0px; + background-color: white; + } + + .main-content-picture { + width: auto; + height: auto; + } + + .main-content-picture img { + border-radius: 14px; + } + + .main-content-text-title { + font-size: 32px; + font-weight: 700; + line-height: 42px; + } + + .main-content-text-title br { + display: none; + } + } @media (max-width: 767px) { @@ -262,4 +310,52 @@ footer { font-size: 18px; line-height: 26px; } + + .main-block { + display: flex; + align-items: center; + justify-content: center; + padding: 20px 15px; + height: auto; + } + + .main-block:nth-of-type(2n) .main-content { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 24px; + height: auto; + padding: 0px 0px; + background-color: white; + } + + .main-block:nth-of-type(2n + 1) .main-content { + display: flex; + flex-direction: column-reverse; + align-items: flex-end; + gap: 24px; + height: auto; + padding: 0px 0px; + background-color: white; + } + + .main-content-picture { + width: auto; + height: auto; + } + + .main-content-picture img { + border-radius: 7px; + } + + .main-content-text-title { + font-size: 24px; + font-weight: 700; + line-height: 32px; + } + + .main-content-text-title br { + display: none; + } + } \ No newline at end of file From 2306459fdfca13d268bee5991188cd97ae2d46cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9C=A4=ED=9A=A8=EC=A4=80?= Date: Wed, 1 Jan 2025 19:08:36 +0900 Subject: [PATCH 09/12] Feat: Responsive(main-bottom) --- src/styles/index.css | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/src/styles/index.css b/src/styles/index.css index ecf3b555..0c14173b 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -274,6 +274,26 @@ footer { display: none; } + .main-bottom { + height: auto; + padding-top: 200px; + } + + .main-bottom-content { + display: flex; + flex-direction: column; + gap: 200px; + align-items: center; + } + + .main-bottom-content-left { + text-align: center; + } + + .main-bottom-content-right { + width: auto; + height: auto; + } } @media (max-width: 767px) { @@ -358,4 +378,14 @@ footer { display: none; } + .main-bottom-content { + gap: 100px; + } + + .main-bottom-content-left { + font-size: 32px; + font-weight: 700; + line-height: 44px; + } + } \ No newline at end of file From ca2b231e33722173d6c043f12063bcb37de00695 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9C=A4=ED=9A=A8=EC=A4=80?= Date: Wed, 1 Jan 2025 19:32:44 +0900 Subject: [PATCH 10/12] Feat: Responsive(Footer) --- src/styles/index.css | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/styles/index.css b/src/styles/index.css index 0c14173b..34efeb3f 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -164,7 +164,9 @@ footer { .footer-content { display: flex; align-items: center; + flex-wrap: wrap-reverse; width: 1120px; + gap: 60px; justify-content: space-between; } @@ -191,9 +193,8 @@ footer { gap: 12px; } -.social-network-icons li { +.social-network-icons img { width: 20px; - height: 20px; } @media (max-width: 1199px) { @@ -294,6 +295,10 @@ footer { width: auto; height: auto; } + + .footer-content { + width: 536px; + } } @media (max-width: 767px) { @@ -388,4 +393,7 @@ footer { line-height: 44px; } + .codeit-logo { + flex: 1 1 100%; + } } \ No newline at end of file From ae35449a1066ec58bf0e968cf3641b01f41fab69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9C=A4=ED=9A=A8=EC=A4=80?= Date: Wed, 1 Jan 2025 19:35:41 +0900 Subject: [PATCH 11/12] Feat: Responsive(login, signup) --- src/pages/signup.html | 4 ++-- src/styles/pages/login.css | 6 ++++++ src/styles/pages/signup.css | 9 ++++++++- 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/pages/signup.html b/src/pages/signup.html index 289c1d37..77933252 100644 --- a/src/pages/signup.html +++ b/src/pages/signup.html @@ -43,10 +43,10 @@

간편 로그인하기

diff --git a/src/styles/pages/login.css b/src/styles/pages/login.css index c84569d5..25b85820 100644 --- a/src/styles/pages/login.css +++ b/src/styles/pages/login.css @@ -133,4 +133,10 @@ main { line-height: 17px; text-decoration: underline; color: #3692FF; +} + +@media (max-width: 767px) { + body { + padding: 16px; + } } \ No newline at end of file diff --git a/src/styles/pages/signup.css b/src/styles/pages/signup.css index a0ddd46a..c8824938 100644 --- a/src/styles/pages/signup.css +++ b/src/styles/pages/signup.css @@ -2,7 +2,8 @@ body { display: flex; align-items: center; justify-content: center; - height: 100vh; + min-height: 100vh; + padding: 40px; } main { @@ -133,4 +134,10 @@ main { line-height: 17px; text-decoration: underline; color: #3692FF; +} + +@media (max-width: 767px) { + body { + padding: 40px 16px; + } } \ No newline at end of file From c2486e9540d96a42715824800e02167243922fcb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9C=A4=ED=9A=A8=EC=A4=80?= Date: Wed, 1 Jan 2025 21:08:48 +0900 Subject: [PATCH 12/12] Fix: erase if else and use table base access --- src/scripts/formUtils.js | 49 +++++++++++++++++++++++----------------- 1 file changed, 28 insertions(+), 21 deletions(-) diff --git a/src/scripts/formUtils.js b/src/scripts/formUtils.js index 4c2c195d..24f2ba24 100644 --- a/src/scripts/formUtils.js +++ b/src/scripts/formUtils.js @@ -1,28 +1,35 @@ +const visibilityConfig = { + password: { + type: "text", + src: "/src/assets/icons/visibility_off_btn.svg", + alt: "비밀번호 숨기기", + }, + text: { + type: "password", + src: "/src/assets/icons/visibility_on_btn.svg", + alt: "비밀번호 보기", + }, +}; + export function setVisibilityToggle(inputWrapperSelector) { - const inputWrapperList = document.querySelectorAll(inputWrapperSelector); + const inputWrappers = document.querySelectorAll(inputWrapperSelector); + + inputWrappers.forEach((wrapper) => { + wrapper.addEventListener("click", (event) => { + const clickedElement = event.target; - inputWrapperList.forEach((wrapper) => { - wrapper.addEventListener("click", event => { - const target = event.target; - if(target.classList.contains("input-icon")) { - const input = wrapper.querySelector("input"); - const icon = target; + if (clickedElement.classList.contains("input-icon")) { + const passwordInput = wrapper.querySelector("input"); + const toggleButton = clickedElement; - if (input.type === "password") - { - input.type = "text"; - icon.src = "/src/assets/icons/visibility_off_btn.svg"; - icon.alt = "비밀번호 숨기기"; - } - else - { - input.type = "password"; - icon.src = "/src/assets/icons/visibility_on_btn.svg"; - icon.alt = "비밀번호 보기"; - } + const nextState = passwordInput.type === "password" ? visibilityConfig["password"] : visibilityConfig["text"]; + + passwordInput.type = nextState.type; + toggleButton.src = nextState.src; + toggleButton.alt = nextState.alt; } - }) - }) + }); + }); } export function setButtonDisable(parent, buttonClass) {