[FE] Main Page 1차 css 완성 #229
Conversation
|
onClick이 안되네요 ㅠ |
webapp/src/pages/Main/index.jsx
Outdated
| </S.FinishSection> | ||
| <S.BottomBox> | ||
| <S.InformationBox> | ||
| <span>커넥트 프로젝트</span> |
There was a problem hiding this comment.
이 부분도 위에 처럼 미리 배열 객체를 만들면 좋을 것 같아요!
| iconBehind: <S.ThirdCardIcon2 />, | ||
| }, | ||
| ]; | ||
|
|
There was a problem hiding this comment.
컴포넌트 내부가 아닌 constant폴더에서 관리해야 컴포넌트가 가벼워질 것 같아요. ㅎㅎ
There was a problem hiding this comment.
component가 있는 배열들을 constant 폴더에서 관리 하는 것에 실패했습니다 ㅠ
component가 있는 배열들 때문에 main page 자체의 폴더 내부에 constant 파일을 만드는 건 어떻게 생각하시나요??(아직 적용하진 않았습니다.)
webapp/src/pages/Main/index.jsx
Outdated
| <span>코넥트는 사람과 사람의 연결을 의미합니다.</span> | ||
| 맞잡은 손을 이용해 코넥트가 표현하고자 하는 연결의 의미를 나타내었습니다. |
There was a problem hiding this comment.
(질문) css속성을 주는 text만 span으로 감싸고, css속성이 필요 없는 text는 span으로 감싸지 않은 건가요?
There was a problem hiding this comment.
네 맞습니다. 사실 이게 맞는 방법인지 모르겠지만, 특정 문자에만 파란색 색상 효과를 줘야 해서 span태그로 묶고 span 태그로 묶인 곳에 부분적으로 효과를 주었습니다. 혹시 더 나은 방법이 있을까요 !?
webapp/src/pages/Main/style.js
Outdated
| export const FirstCardIcon1 = styled.img.attrs({ src: `${GhostIcon}` })` | ||
| position: absolute; | ||
| display: flex; | ||
| left: 10%; | ||
| width: 300px; | ||
| height: 300px; | ||
| `; | ||
| export const FirstCardIcon2 = styled.img.attrs({ src: `${CloudIcon}` })` | ||
| position: absolute; | ||
| display: flex; | ||
| top: 8%; | ||
| width: 300px; | ||
| height: 300px; | ||
| `; | ||
| export const SecondCardIcon1 = styled.img.attrs({ src: `${EarthIcon}` })` | ||
| position: absolute; | ||
| display: flex; | ||
| left: 10%; | ||
| width: 240px; | ||
| height: 300px; | ||
| `; | ||
| export const SecondCardIcon2 = styled.img.attrs({ src: `${HeartIcon}` })` | ||
| position: absolute; | ||
| display: flex; | ||
| left: 4%; | ||
| top: 10%; | ||
| width: 183px; | ||
| height: 188px; | ||
| `; | ||
| export const ThirdCardIcon1 = styled.img.attrs({ src: `${CellPhoneIcon}` })` | ||
| position: absolute; | ||
| display: flex; | ||
| left: 14%; | ||
| width: 170px; | ||
| height: 300px; | ||
| `; | ||
| export const ThirdCardIcon2 = styled.img.attrs({ src: `${MessageIcon}` })` |
There was a problem hiding this comment.
first, second, third 같은 순서를 나타내는 변수명 보다는 icon명(MessageIcon, CellPhoneIcon등등) 그대로 사용하는게 알아보기 쉽다고 생각해요!
| font-weight: ${FONT.WEIGHT.BOLD}; | ||
| font-size: ${FONT.SIZE.MEDIUM}; | ||
| line-height: ${FONT.HEIGHT.LARGE2}; | ||
| `, |
webapp/src/styles/theme.js
Outdated
| @@ -112,6 +126,43 @@ const fonts = { | |||
| font-size: ${FONT.SIZE.BASE}; | |||
| line-height: ${FONT.HEIGHT.MEDIUM}; | |||
| `, | |||
| default2: css` | |||
There was a problem hiding this comment.
매직넘버! default1, default2보다 알아보기 좋은 변수명이 뭐가 있을까요?🧐 같이 고민해 봐요!
There was a problem hiding this comment.
앗 theme 부분 변수명 수정을 안했군요. 다른 자료 저도 찾아보겠습니다 !!
There was a problem hiding this comment.
찾아봤는데 버튼 관련 theme밖에 못 찾아서 그냥 이름을 default_no_bold로 지었습니다 ㅠㅠ 더 좋은 네이밍이 무엇일지 더 고민해보겠습니다.
|
마지막 부분을 map으로 처리 하면 커넥트 프로젝트라는 문구만 따로 bold처리가 안 되는 트러블이 발생했습니다.(현재 span태그로 묶어서 따로 효과를 적용하고 있음.) 윗 내용과 겹치는 부분이어서 혹시 부분적으로 효과를 줘야할 때 좋은 방법을 알고 계신다면 조언 구합니다😥 |
hoeun0723
force-pushed
the
FE/#204-main_css
branch
from
e65571a to
60ebf2c
Compare
About
Main Page css 구현
Description
총 8개의 Section으로 나눴고, Section 당 해당하는 Icon이나 Text 값들을 배치 했습니다.
화면을 줄였을 때나 키웠을 때 깨지는 부분이나 아이콘이 변경되어야 하는 부분이 있기에 _추후 수정이 필요_할 거 같습니다.
주의사항
git 오류로 인해 새롭게 clone을 받아와, commit 기록이 날라갔습니다.
주석으로 총 8개의 Section을 나눠 놓고 commit 기록을 새롭게 남겼으니 참고 하시면 좋을 거 같습니다.
Result
전체적인 화면 모습
bandicam.2022-12-26.12-45-48-482.mp4
배경 이미지 비율 오류 모습
bandicam.2022-12-26.12-47-44-507.mp4
사진의 비율을 줄이면 사진 그대로의 모습이 아닌 잘라서 나타내어집니다 😥
Ref
#204