Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
랜딩페이지에 필요한 이미지 에셋 추가
메인 페이지 html 파일 추가
기본 여백 등을 초기화하는 reset.css 파일 추가
- action-design.css - color-design.css - font=design.css - image-design.css - structure.css
- signin.html 페이지 추가
- signup 유도 문자 위치 수정 main -> header
- color-design.css - font-design.css - structure.css 다른 html에서도 사용할 수 있도록 일일반화 처리
structure.css -> index-structure.css index.html 파일 전용 구조 css 파일
- social 로그인 icon - eye icon
- semantic tag 구분
- action-design.css - color-design.css - font-design.css - image-design.css - signin-structure.css
- signup.html
- signup과 통용될 수 있도록 클래스 명 수정
…이나경-week2 수요일 23:59분이 지나서 merge 합니다. 과제 하신다고 고생 많으셨어요 😄
- index.html 클래스 재명명 - base.css, index.css 생성 - reset.css -> normalized css로 변경
- 모든 곳에 공통으로 사용될 utility 파일 작성 - mh_30px 와 같은 margin 요소 중점
- centered 추가
- signin.html - signin.css 파일 전면 수정
- property 순서 정렬 - 일부 오류 해결 (a href 주소 등)
- BEM 설계기법에 따른 class 명 재설정
- action-design.css - color-design.css - font-design.css - image-design.css - index-structure.css - signin-structure.css
- 이미지 경로 변경 및 css 파일 대폭 수정
- base.css 의 *에 margin:0 추가
- mobile 요구사항 적용 - 내부요소의 너비가 기기의 너비가 커지는 많큼 커지지만 400px을 넘지 않음 - 최소 좌우 여백 32px
meta ->L title -> link(css)
- font-style = normal; - line-height = normal;
- .header__logo
- Card.jsx - Card.css
- CardFactory.jsx
- api.js
- useEffect를 사용햔 folder 페이지 데이터 처리
- classNames 도입 : className 관리 라이브러리 - 하위 세부 컴포넌트 정의 : FolderInfo, SerchBar, TableLayout, CardFactory
실제 데이터를 받아 처리하게 끔 처리 - linkUtil 파일 생성 : 링크를 열기 위함 - timeUtil 파일 생성 : 시간을 변환하기 위함
- display flex 처리
- 실제 데이터를 받을 수 있도록 수정 - 최상위요소 Fragment 로 대체 - classNames로 class 관리
- TableLayout.jsx - TableLayout.css
- ForderInfo.jsx
- SearchBar.jsx
- word-break: break-word => all
- 객체 state에 초기값 배열 넣은 문제 해결 - fetch catch 메소드 추가
datalist 체크 관련 옵셔널 체이닝 추가
- 아직 값을 불러오지 못했을 경우 undefined 대신 "" 출력
데이터 검색 로직 제외 디자인 구현
#main-root 내 margin요소 관련 데이터 추가
react를 적용하지 않은 임시 구현 추후 개선 필요
반응형 크기 구현
- action-button 디자인 추가 - search-bar 반응형 디자인 추가
- hover 시 pointer 표현 및 box-shadow 적용
hover: 이미지 1.3배, 테두리 적용 noimage: 로고 노출
Comment on lines
+11
to
+14
| <article | ||
| className={`card ${classNames(classNameList)}`} | ||
| onClick={() => openLinkOnNewTab(url)} | ||
| > |
There was a problem hiding this comment.
클릭하여 이동을 해야하는 경우에는 보통의 경우 a 태그를 이용하여 href 속성으로 url을 지정해주는 것이 좋습니다. 웹표준을 따름으로써 웹접근성 또한 어느정도 충족시켜줄수 있씁니다~!
| } | ||
|
|
||
| function CardImage({ src, title }) { | ||
| return ( |
There was a problem hiding this comment.
이런식으로 코드 수정이 이루어진다면 중복 코드의 양을 줄일 수 있을 듯 합니다~!
function CardImage({ src, title }) {
const source = src ? src : "../../image/folder/logo.svg";
return <div className="card__image-container">
<img className="card__image" src={source} alt={title} />
</div>
}
Comment on lines
+19
to
+37
| fetch(ENDPOINTS.SAMPLE.FOLDER) | ||
| .then((response) => response.json()) | ||
| .then((result) => { | ||
| return result.folder; | ||
| }) | ||
| .then((folder) => { | ||
| setFolderData({ | ||
| id: folder.id, | ||
| name: folder.name, | ||
| owner: folder.owner, | ||
| }); | ||
| return folder.links; | ||
| }) | ||
| .then((links) => { | ||
| setLinkData(links); | ||
| }) | ||
| .catch((error) => { | ||
| console.error(`데이터 가져오는 중 오류 발생\n${error}`); | ||
| }); |
There was a problem hiding this comment.
aysnc / await 함수로도 한번 구현을 해보는 것을 추천드립니다!
Comment on lines
+1
to
+10
| const API_BASE_URL = "https://bootcamp-api.codeit.kr/api"; | ||
|
|
||
| const ENDPOINTS = { | ||
| SAMPLE: { | ||
| FOLDER: `${API_BASE_URL}/sample/folder`, | ||
| USER: `${API_BASE_URL}/sample/user`, | ||
| } | ||
| }; | ||
|
|
||
| export default ENDPOINTS; |
There was a problem hiding this comment.
깔끔하게 API 주소를 잘 정리한듯합니다
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
요구사항
기본
심화
주요 변경사항
스크린샷
03-44-02.mp4
드릴 말씀
지난 주에 아파서 지난주 내용을 수행을 못했습니다.
그래서 현재 코드가 조금 비어있을 수 있습니다. 양해부탁드립니다. 빠르게 할 수 있도록 하겠습니다.