From 492bc0f150c678b4c837761da4f55de00df9612d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Tue, 30 Jul 2024 15:56:07 +0900 Subject: [PATCH 1/6] =?UTF-8?q?refactor(assets):=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EC=BD=98=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/assets/images/index.ts | 5 +++-- frontend/src/assets/images/logo.png | Bin 469 -> 0 bytes frontend/src/assets/images/logo_24x24.png | Bin 0 -> 440 bytes frontend/src/assets/images/newTemplate.png | Bin 262 -> 0 bytes frontend/src/assets/images/newTemplate_14x14.png | Bin 0 -> 305 bytes frontend/src/assets/images/userMenu_38x38.png | Bin 0 -> 1260 bytes 6 files changed, 3 insertions(+), 2 deletions(-) delete mode 100644 frontend/src/assets/images/logo.png create mode 100644 frontend/src/assets/images/logo_24x24.png delete mode 100644 frontend/src/assets/images/newTemplate.png create mode 100644 frontend/src/assets/images/newTemplate_14x14.png create mode 100644 frontend/src/assets/images/userMenu_38x38.png diff --git a/frontend/src/assets/images/index.ts b/frontend/src/assets/images/index.ts index 586e7b82b..4de4b422a 100644 --- a/frontend/src/assets/images/index.ts +++ b/frontend/src/assets/images/index.ts @@ -1,5 +1,6 @@ -export { default as logoIcon } from './logo.png'; -export { default as newTemplateIcon } from './newTemplate.png'; +export { default as logoIcon } from './logo_24x24.png'; +export { default as newTemplateIcon } from './newTemplate_14x14.png'; export { default as pencilIcon } from './pencil.png'; export { default as searchIcon } from './search.png'; export { default as trashcanIcon } from './trashcan.png'; +export { default as userMenuIcon } from './userMenu_38x38.png'; diff --git a/frontend/src/assets/images/logo.png b/frontend/src/assets/images/logo.png deleted file mode 100644 index 60a611c84d6e6791a6a58c2b18f18e9b9756efae..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 469 zcmV;`0V@89P)y{8&<)5VDj+%mVS*w=;Sn~V8?XW+gbB!VCE}jXPU56#>?*(1 z)`{$|clVzU2$XuogIYtW7hL=HMhK8vVFtp=o`^?78JOS%U(E~Tqo53o8Tif1#5s{; z43vQ%0we(y@@_iWx!WIOm$p zImM0ian*L<2u<5L{~biN5%Rr1(8ryG!j#DO7HIYHt?lEEyy;tq|6m46fy(KH%!6J{ zeNf&pv#VG>#_4qENJ#q4qz~+4Ka`vS%@d1m#tvx%EiACt=|1fMcprbgx%=ei00000 LNkvXXu0mjfgE7h- diff --git a/frontend/src/assets/images/logo_24x24.png b/frontend/src/assets/images/logo_24x24.png new file mode 100644 index 0000000000000000000000000000000000000000..b7cedcb772ce63b7cdf8dd6b7d36f2be5d67f7d4 GIT binary patch literal 440 zcmV;p0Z0CcP)P000;W1^@s654Bdt00009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yPiMst8w*u^B_+ABEIKc?JAQ@-b64I7U~IDoI-yU1C>w z$w?HOA``A4WOO&&IqKB}mPyL6JC5l3S7m%uk`i&-<&tFFf!i&H+ttIFc1F+fjD4VK z{1v8}QOzQvn!p1!@7(<-cG=lf?26!IaZJZ$4BJ z18uy&0l~L2N!IA*E4kF??&ESW$|U(;N%W&iOqHZG5qTB0B&CU{U^U)IQkqCR-Xx`o i_|B0{lE$db=q3vssaPMu;Uj+l0000`i literal 0 HcmV?d00001 diff --git a/frontend/src/assets/images/newTemplate.png b/frontend/src/assets/images/newTemplate.png deleted file mode 100644 index b0a86ab471b3888b3f72b241b6fe189c595cbf6e..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 262 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9GG!XV7ZFl&wkP>``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eB{%lVd$B+uftCKeJHYfjgL7srqa#-kGhxtbhAT;EGOYjE80{F?YJ z(>jy$ELRr$E3PF|L+k}_v|FF-4`}+dv`NK?Ik>hYA>rQR*d5ckGc=s^*U3F!DE%VO zLz73$uH*aLoI=aZsgu6FXW`k=EPM5y$C}6Lg_C!7Jd-x~Id|#d16$@w&Joh6KA&n8 zr9LUIarY*VBR>SvJQNjVY7RPF*t&5pdz?p$=kaC1H?Q1UrzF?@X^-ivp9jxBjfms> zyZe9WQjur@NuGeN+)A(2T8n55?hl$hB}Zc5LE%m3ItUEvI2`0$gUvJKgaQmVzCHjGqa?HpFm7kk#Qs+FMENwtsMP$63#6Nd`J~CA5NI3=tZontL(jKYMZ1M$%$E+)qZ);&6`s3ABFk0O-cYFQDIhbvhuSTu}S|x z)EeNI)~FWIBVj_5NahsJ$2N+J`^J=FLeZ8Gg9(pUdCInc`NP~=bhFE~UnC~_@?c8S z&?6l{Ok7FXMZHAOZQ9V1*wB(z9YZ{R+U|9nj@fTl`>?&rW}mS^Mu(V9th;PNT{HPm-7 zqkWc;JHk~D)O{MO4&-0?^T=yzm`{?dn9+H|+ZC>OMh$X=EeZso&WHn%RF-`tN5G5^ z)maHSVuzlX@sy&cviSqKc!JV}TmkP}rZrm@osuJlG)fIIlSl35E$S&3NJvnu_sMF< zl1${DOSmZTbN4#0=|IeAgb$NVR5=GH?7@G*#xX?#IBjQ_Pw!@u!wtvn#-PLmIGU!+)q2(lFVUw-w@!BzlmNz!^|=1aO3lQT)8K?!_;37Z`!nN1ZWUiL6Pl zC58mwq74BJoK<-3$o?m~h(!=iDts8whNu#7ZAV2uWr?=6ywpPt$x-w_K}veEIeP~U za$YFf9OWyoin_M~+ulk2AIZOQCvnqVwez=l)E!R`U0nQopws}(`c0!TiMWW?eUYKH zmlD(Hksx!~UQ?WFP-Ki*&2Jh5VsV6EtcH(f(uo?+dW~`eG}k3TYsY!y)*U&ope;k< zBAl*clm1*N$xiqe=V>(#h^zDf1546>)h ze4?rRhG|?b7T;TWs3M+%d{@-;$X(OUZu^~EPp|+<{C>XRz-$>G&j-eI^${E86l@H)@lCQDyblJfj#HPu=_-?KwLRgXrux`%E zN1e7$4DAU`KyHx0IoPAUUe&!?nOGU9$(p{_FNitJa+1M9p@<)1qEZQG>cb{yYySak WPcV(+CYL+_0000 Date: Thu, 1 Aug 2024 10:29:06 +0900 Subject: [PATCH 2/6] =?UTF-8?q?refactor(Header):=20Header=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=94=94=EC=9E=90=EC=9D=B8=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Header/Header.style.ts | 59 ++++++++++ frontend/src/components/Header/Header.tsx | 111 +++++++++--------- frontend/src/components/Header/style.ts | 17 --- 3 files changed, 114 insertions(+), 73 deletions(-) create mode 100644 frontend/src/components/Header/Header.style.ts delete mode 100644 frontend/src/components/Header/style.ts diff --git a/frontend/src/components/Header/Header.style.ts b/frontend/src/components/Header/Header.style.ts new file mode 100644 index 000000000..db67c2b7c --- /dev/null +++ b/frontend/src/components/Header/Header.style.ts @@ -0,0 +1,59 @@ +import styled from '@emotion/styled'; + +import { theme } from '@/style/theme'; + +export const HeaderContainer = styled.nav` + position: fixed; + z-index: 1; + left: 0; + + display: flex; + justify-content: center; + + width: 100%; + + background: white; + border-bottom: 0.125rem solid ${theme.color.light.secondary_200}; +`; + +export const HeaderContentContainer = styled.div` + display: flex; + gap: 60px; + align-items: center; + + width: 1280px; + max-width: 1280px; + height: 64px; + padding: 30px; + + white-space: nowrap; +`; + +export const NewTemplateButton = styled.button` + cursor: pointer; + + display: flex; + gap: 0.5rem; + align-items: center; + justify-content: center; + + width: 120px; + height: 38px; + + background-color: white; + border: 0.125rem solid ${theme.color.light.primary_800}; + border-radius: 0.5rem; +`; + +export const UserMenuButton = styled.button` + cursor: pointer; + + width: 38px; + height: 38px; + + color: ${theme.color.light.primary_800}; + + object-fit: contain; + background-color: white; + border-radius: 50%; +`; diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx index 3570b4d37..e6e9d4947 100644 --- a/frontend/src/components/Header/Header.tsx +++ b/frontend/src/components/Header/Header.tsx @@ -1,62 +1,61 @@ -import { useState } from 'react'; import { Link } from 'react-router-dom'; -import { logoIcon, newTemplateIcon } from '@/assets/images'; -import { Button, Flex, Input, Text } from '@/components'; -import * as S from './style'; - -const Header = () => { - const [searchValue, setSearchValue] = useState(''); - - const handleInputChange = (event: React.ChangeEvent) => { - setSearchValue(event.target.value); - }; - - return ( - - - - logo - CodeZap - - - - - - - - - +import { logoIcon, newTemplateIcon, userMenuIcon } from '@/assets/images'; +import { Button, Flex, Heading, Text } from '@/components'; +import * as S from './Header.style'; + +const Header = () => ( + + + + + + + - - - - - + + + + - - ); -}; + + +); + +const Logo = () => ( + + + 로고 버튼 + 코드잽 + + +); + +const NavOption = ({ route, name }: { route: string; name: string }) => ( + + + +); + +const NewTemplateButton = () => ( + + + + + 새 템플릿 + + + +); + +const UserMenuButton = () => ( + + 사용자 메뉴 + +); export default Header; diff --git a/frontend/src/components/Header/style.ts b/frontend/src/components/Header/style.ts deleted file mode 100644 index 74a9d6f19..000000000 --- a/frontend/src/components/Header/style.ts +++ /dev/null @@ -1,17 +0,0 @@ -import styled from '@emotion/styled'; - -export const HeaderContainer = styled.nav` - position: fixed; - z-index: 1; - left: 0; - - display: flex; - gap: 10rem; - align-items: center; - - width: 100vw; - height: 6.4rem; - padding: 3rem; - - background: #393e46; -`; From e403550e2e5ff409d7f480a7ec98b7eb743d96e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Thu, 1 Aug 2024 11:52:59 +0900 Subject: [PATCH 3/6] =?UTF-8?q?refactor(assets):=20newTemplate=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EC=82=AC=EC=9D=B4=EC=A6=88=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/assets/images/index.ts | 2 +- frontend/src/assets/images/newTemplate_12x12.png | Bin 0 -> 253 bytes frontend/src/assets/images/newTemplate_14x14.png | Bin 305 -> 0 bytes 3 files changed, 1 insertion(+), 1 deletion(-) create mode 100644 frontend/src/assets/images/newTemplate_12x12.png delete mode 100644 frontend/src/assets/images/newTemplate_14x14.png diff --git a/frontend/src/assets/images/index.ts b/frontend/src/assets/images/index.ts index 4de4b422a..632d6d2fb 100644 --- a/frontend/src/assets/images/index.ts +++ b/frontend/src/assets/images/index.ts @@ -1,5 +1,5 @@ export { default as logoIcon } from './logo_24x24.png'; -export { default as newTemplateIcon } from './newTemplate_14x14.png'; +export { default as newTemplateIcon } from './newTemplate_12x12.png'; export { default as pencilIcon } from './pencil.png'; export { default as searchIcon } from './search.png'; export { default as trashcanIcon } from './trashcan.png'; diff --git a/frontend/src/assets/images/newTemplate_12x12.png b/frontend/src/assets/images/newTemplate_12x12.png new file mode 100644 index 0000000000000000000000000000000000000000..a4f597afea5738023b943d1b5353e8f2921fffa7 GIT binary patch literal 253 zcmeAS@N?(olHy`uVBq!ia0vp^JRr=$1|-8uW1a&k&H|6fVg?3oVGw3ym^DWND9BhG zjgL7srqa#-kGhxtbhAT;EGOYjE80{F?YJ z(>jy$ELRr$E3PF|L+k}_v|FF-4`}+dv`NK?Ik>hYA>rQR*d5ckGc=s^*U3F!DE%VO zLz73$uH*aLoI=aZsgu6FXW`k=EPM5y$C}6Lg_C!7Jd-x~Id|#d16$@w&Joh6KA&n8 zr9LUIarY*VBR>SvJQNjVY7RPF*t&5pdz?p$=kaC1H?Q1UrzF?@X^-ivp9jxBjfms> zyZe9WQjur@NuGeN+)A(2T8n Date: Thu, 1 Aug 2024 11:53:29 +0900 Subject: [PATCH 4/6] =?UTF-8?q?refactor(Header):=20NavOption=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=EC=9D=84=20=EA=B8=B0=EB=B3=B8=20html=20=ED=83=9C?= =?UTF-8?q?=EA=B7=B8=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Header/Header.style.ts | 5 +++++ frontend/src/components/Header/Header.tsx | 6 +++--- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/Header/Header.style.ts b/frontend/src/components/Header/Header.style.ts index db67c2b7c..f0d7efa42 100644 --- a/frontend/src/components/Header/Header.style.ts +++ b/frontend/src/components/Header/Header.style.ts @@ -29,6 +29,11 @@ export const HeaderContentContainer = styled.div` white-space: nowrap; `; +export const NavOptionButton = styled.button` + cursor: pointer; + background: none; +`; + export const NewTemplateButton = styled.button` cursor: pointer; diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx index e6e9d4947..efee76015 100644 --- a/frontend/src/components/Header/Header.tsx +++ b/frontend/src/components/Header/Header.tsx @@ -1,7 +1,7 @@ import { Link } from 'react-router-dom'; import { logoIcon, newTemplateIcon, userMenuIcon } from '@/assets/images'; -import { Button, Flex, Heading, Text } from '@/components'; +import { Flex, Heading, Text } from '@/components'; import * as S from './Header.style'; const Header = () => ( @@ -33,11 +33,11 @@ const Logo = () => ( const NavOption = ({ route, name }: { route: string; name: string }) => ( - + ); From 5884f72e43449c9e308758b516455a0011bf9f58 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Thu, 1 Aug 2024 12:04:34 +0900 Subject: [PATCH 5/6] =?UTF-8?q?refactor(Header):=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EB=8B=A8=EC=9C=84=20=EC=88=98=EC=A0=95=20(px=20>?= =?UTF-8?q?=20rem)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Header/Header.style.ts | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/frontend/src/components/Header/Header.style.ts b/frontend/src/components/Header/Header.style.ts index f0d7efa42..40bdacb5e 100644 --- a/frontend/src/components/Header/Header.style.ts +++ b/frontend/src/components/Header/Header.style.ts @@ -13,18 +13,18 @@ export const HeaderContainer = styled.nav` width: 100%; background: white; - border-bottom: 0.125rem solid ${theme.color.light.secondary_200}; + border-bottom: 2px solid ${theme.color.light.secondary_200}; `; export const HeaderContentContainer = styled.div` display: flex; - gap: 60px; + gap: 3.75rem; align-items: center; - width: 1280px; - max-width: 1280px; - height: 64px; - padding: 30px; + width: 80rem; + max-width: 80rem; + height: 4rem; + padding: 1.875rem; white-space: nowrap; `; @@ -42,19 +42,19 @@ export const NewTemplateButton = styled.button` align-items: center; justify-content: center; - width: 120px; - height: 38px; + width: 7.5rem; + height: 2.375rem; background-color: white; - border: 0.125rem solid ${theme.color.light.primary_800}; - border-radius: 0.5rem; + border: 2px solid ${theme.color.light.primary_800}; + border-radius: 8px; `; export const UserMenuButton = styled.button` cursor: pointer; - width: 38px; - height: 38px; + width: 2.375rem; + height: 2.375rem; color: ${theme.color.light.primary_800}; From 6cfce0b86c8e89ca07b7e028471fd67fd842bf0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Thu, 1 Aug 2024 12:17:39 +0900 Subject: [PATCH 6/6] =?UTF-8?q?refactor(Header):=20=ED=95=98=EB=93=9C?= =?UTF-8?q?=EC=BD=94=EB=94=A9=EB=90=9C=20color=EB=A5=BC=20theme=20?= =?UTF-8?q?=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Header/Header.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx index efee76015..96e45eb0e 100644 --- a/frontend/src/components/Header/Header.tsx +++ b/frontend/src/components/Header/Header.tsx @@ -2,6 +2,7 @@ import { Link } from 'react-router-dom'; import { logoIcon, newTemplateIcon, userMenuIcon } from '@/assets/images'; import { Flex, Heading, Text } from '@/components'; +import { theme } from '../../style/theme'; import * as S from './Header.style'; const Header = () => ( @@ -26,7 +27,7 @@ const Logo = () => ( 로고 버튼 - 코드잽 + 코드잽 ); @@ -34,7 +35,7 @@ const Logo = () => ( const NavOption = ({ route, name }: { route: string; name: string }) => ( - + {name} @@ -45,7 +46,7 @@ const NewTemplateButton = () => ( - + 새 템플릿