[Feat/header] Header/Menu/DropDown #29

taehong0-0 · 2021-11-01T17:12:15Z

Do-List

메뉴 버튼 추가 (Atom)
메뉴 드롭다운 추가(Molecules)
드롭다운 전체 틀 제작(Molecules) - 메뉴,유저, 지역, 나이, 카테고리

해야할 일

메인 페이지에서 로고, 유저 아이콘 받아와서 해당하는 드롭다운 추가 및 UI 틀 제작
드롭다운 모달 다른 곳 클릭 시 해당하는 모달 닫기

고민한 점

Molecules안에 Molecules가 들어가는 경우가 생기는 것 같은데 이러한 경우는 atomic디자인의 규칙을 위배하는 것인지 궁금합니다.
모달이외의 영역을 클릭 시 모달이 닫혀야 하는데 이 경우에 전체 모달에 대한 것을 모두 불러와서 모두 닫게 하는 것이 맞는 방법인지 궁금합니다.(querySelectorAll ? )

- 타입스크립트용 express 웹 서버 생성 - 5000번 포트 생성 - app.ts 생성

- eslint, prettier 적용

1. prettier 수정 2. package.json 수정 (모듈 수정) 3. MainPage atomic 구조 생성 4. userIcon Atom 생성

1. 메인 페이지 헤더 center molecules 생성 2. 메인 페이지 헤더 organism center 추가 3. 메인 페이지 헤더 로고 atom 생성

메인 헤더 로고를 이미지로 수정 , css 수정

css 수정

…web10-CowDogTing into Feat/Header

오류 때문에 일단은 다시 추가

ImageDiv.tsx 에 이미지 div 생성 -> props 로 big,long,small 나뉨 -> background image에 전달 받은 props로 설정해줌

드랍다운에 type을 넣을 경우 해당하는 드랍다운 제공- close #8

메인 페이지 이미지 레이아웃 호버시 opacity 적용되도록 구현

메인 페이지 바디 - 오른쪽 이미지들 레이아웃 top 속성 수정

이미지 호버 이벤트 바디 왼쪽 구현 1:1 소개팅 , 2:2 미팅 ~ 팀 설정 버튼 추가 호버시 약간의 부자연 스러움 존재

메인 페이지 바디 오른쪽 부분 이미지 호버 구현 완료

jin-Pro · 2021-11-01T17:31:46Z

우선, SPA에서 DOM에 직접 접근하는것은 하면 안된다고 알고있음 ( querySelectorAll 와 같은거 )

jin-Pro · 2021-11-01T17:33:34Z

Molecules에서 Molecules를 호출하게되는 부분 우리끼리 상의해서 넘어가도될것같음 왜냐하면 구조 단계가 10개가 아니고 제한적이다보니 어쩔수 없다고 생각함. 흔히 모달이나 토글리스트 같은 거 같은데 그런건 Atomic 디자인에 두지말고 따로 빼둘까 싶기도함
돔에 접근하는 것보다 모달창이 켜져있는 값에 대해 상태값을 관리해주는 방식으로 하는게 맞는것 같음 useState 등

Noelsky-code · 2021-11-02T01:18:48Z

나는 굳이 Atomic 디자인에 연연하지 않았으면 좋겠음. 결국엔 우리가 정하기 나름이고 우리 스스로 컴포넌트 구조가 보이면 상관없다고 생각함.
일단 querySellectAll은 안쓰는 게 좋은 거같음. 리액트에서 UseRef를 제외한 Dom 조작은 리액트의 상태 조작을 더 복잡하게 하고 테스트 , 디버그를 더 어렵게 해서 지양하는 걸로 앎.
상태 값으로 모달을 조작해 주는게 좋아보임

1. prettier 수정 2. package.json 수정 (모듈 수정) 3. MainPage atomic 구조 생성 4. userIcon Atom 생성

1. 메인 페이지 헤더 center molecules 생성 2. 메인 페이지 헤더 organism center 추가 3. 메인 페이지 헤더 로고 atom 생성

메인 헤더 로고를 이미지로 수정 , css 수정

css 수정

오류 때문에 일단은 다시 추가

ImageDiv.tsx 에 이미지 div 생성 -> props 로 big,long,small 나뉨 -> background image에 전달 받은 props로 설정해줌

메인 페이지 이미지 레이아웃 호버시 opacity 적용되도록 구현

메인 페이지 바디 - 오른쪽 이미지들 레이아웃 top 속성 수정

이미지 호버 이벤트 바디 왼쪽 구현 1:1 소개팅 , 2:2 미팅 ~ 팀 설정 버튼 추가 호버시 약간의 부자연 스러움 존재

메인 페이지 바디 오른쪽 부분 이미지 호버 구현 완료

…eb10-CowDogTing into Feat/MainPage

[Noelsky-code] 메인 페이지 헤더 , 바디 UI, 호버 구현

드랍다운에 type을 넣을 경우 해당하는 드랍다운 제공- close #8

…10-CowDogTing into Feat/Header

ddaynew365 and others added 25 commits November 1, 2021 17:33

Feat: server express 생성

8cdf0fe

- 타입스크립트용 express 웹 서버 생성 - 5000번 포트 생성 - app.ts 생성

Feat: eslint, prettier 적용

6ae60ee

- eslint, prettier 적용

Fix : Button Type Modal

3f989fb

Feat: Header 메뉴버튼 생성

02e408b

Feat: Header 버튼, 드랍다운 생성

9b1ed3b

Feat : 메인 페이지 헤더 유저 아이콘 UI 생성 #2

ba1a04e

1. prettier 수정 2. package.json 수정 (모듈 수정) 3. MainPage atomic 구조 생성 4. userIcon Atom 생성

Feat : 메인 페이지 헤더 로고 레이아웃 #5

f94f2a4

1. 메인 페이지 헤더 center molecules 생성 2. 메인 페이지 헤더 organism center 추가 3. 메인 페이지 헤더 로고 atom 생성

Fix : 메인 헤더 로고 수정 #5

3503966

메인 헤더 로고를 이미지로 수정 , css 수정

Fix : 메인 헤더 유저 아이콘 수정 #2

587020b

css 수정

Feat : MainPageBody Template 추가 #6

2316dc1

Fix : Button Type State & Color

1b67c6b

Merge branch 'Feat/LoginPage' of https://github.com/boostcampwm-2021/…

41f4dcd

…web10-CowDogTing into Feat/Header

fix : jsx 주석 다시 추가

522a485

오류 때문에 일단은 다시 추가

feat : MainPageBody left,right 프레임 추가 #6

32105c1

fix : 메인 페이지 헤더 로고 레이아웃 css 수정 #5

d7f2466

feat : 메인 페이지 바디 이미지 레이아웃 생성 #6

1d79cb7

ImageDiv.tsx 에 이미지 div 생성 -> props 로 big,long,small 나뉨 -> background image에 전달 받은 props로 설정해줌

Fix: Header 드랍다운 수정

8adc158

드랍다운에 type을 넣을 경우 해당하는 드랍다운 제공- close #8

feat : 메인 페이지 이미지 css before 적용 #6

f0ec2b4

메인 페이지 이미지 레이아웃 호버시 opacity 적용되도록 구현

feat : 메인 페이지 이미지 레이아웃 수정 #6

87fdf68

메인 페이지 바디 - 오른쪽 이미지들 레이아웃 top 속성 수정

feat : 메인 페이지 이미지 호버 - 왼쪽 구현 #11

dd2359e

이미지 호버 이벤트 바디 왼쪽 구현 1:1 소개팅 , 2:2 미팅 ~ 팀 설정 버튼 추가 호버시 약간의 부자연 스러움 존재

update : 메인 페이지 헤더 유저 아이콘 css 수정 #5

7b9fc34

Feat: Header 컴포넌트 생성

4541c39

Feat: Header 드롭다운 토글 이벤트 추가

676f5a6

Feat : 메인 페이지 이미지 호버 이벤트 구현 #11

15cccd9

메인 페이지 바디 오른쪽 부분 이미지 호버 구현 완료

Fix: Header 드랍다운 이벤트 수정

eded36e

[#10]Remove: typeorm 제거

a72fd88

merge conflict

771210a

ddaynew365 and others added 29 commits November 2, 2021 12:10

Error: merge conflict

ca20621

Feat : 메인 페이지 헤더 유저 아이콘 UI 생성 #2

6b93c42

1. prettier 수정 2. package.json 수정 (모듈 수정) 3. MainPage atomic 구조 생성 4. userIcon Atom 생성

Feat : 메인 페이지 헤더 로고 레이아웃 #5

3d54eeb

1. 메인 페이지 헤더 center molecules 생성 2. 메인 페이지 헤더 organism center 추가 3. 메인 페이지 헤더 로고 atom 생성

Fix : 메인 헤더 로고 수정 #5

9409d7a

메인 헤더 로고를 이미지로 수정 , css 수정

Fix : 메인 헤더 유저 아이콘 수정 #2

736df4a

css 수정

Feat : MainPageBody Template 추가 #6

6096ff3

fix : jsx 주석 다시 추가

4458371

오류 때문에 일단은 다시 추가

feat : MainPageBody left,right 프레임 추가 #6

798fc33

fix : 메인 페이지 헤더 로고 레이아웃 css 수정 #5

74d975b

feat : 메인 페이지 바디 이미지 레이아웃 생성 #6

93206f9

ImageDiv.tsx 에 이미지 div 생성 -> props 로 big,long,small 나뉨 -> background image에 전달 받은 props로 설정해줌

feat : 메인 페이지 이미지 css before 적용 #6

ff6e9be

메인 페이지 이미지 레이아웃 호버시 opacity 적용되도록 구현

feat : 메인 페이지 이미지 레이아웃 수정 #6

741fb3c

메인 페이지 바디 - 오른쪽 이미지들 레이아웃 top 속성 수정

feat : 메인 페이지 이미지 호버 - 왼쪽 구현 #11

666f786

이미지 호버 이벤트 바디 왼쪽 구현 1:1 소개팅 , 2:2 미팅 ~ 팀 설정 버튼 추가 호버시 약간의 부자연 스러움 존재

update : 메인 페이지 헤더 유저 아이콘 css 수정 #5

96456e4

Feat : 메인 페이지 이미지 호버 이벤트 구현 #11

b58c5cb

메인 페이지 바디 오른쪽 부분 이미지 호버 구현 완료

Merge branch 'Feat/MainPage' of https://github.com/boostcampwm-2021/w…

90caf8f

…eb10-CowDogTing into Feat/MainPage

Merge pull request #30 from boostcampwm-2021/Feat/MainPage

8de0a8c

[Noelsky-code] 메인 페이지 헤더 , 바디 UI, 호버 구현

Fix: arrow function 수정

919d8f2

Feat: Header 메뉴버튼 생성

3f027e6

Feat: Header 버튼, 드랍다운 생성

821068c

Fix : Button Type Modal

93811a7

Fix : Button Type State & Color

fd95c2c

Fix: Header 드랍다운 수정

86c9c91

드랍다운에 type을 넣을 경우 해당하는 드랍다운 제공- close #8

Feat: Header 컴포넌트 생성

f58af9e

Feat: Header 드롭다운 토글 이벤트 추가

4f93724

Fix: Header 드랍다운 이벤트 수정

2dde199

Fix: css적용 안됨 수정

e5ed610

Fix: arrow function 수정

fb7c24e

Merge branch 'Feat/Header' of https://github.com/boostcampwm-2021/web…

f9fa9c0

…10-CowDogTing into Feat/Header

taehong0-0 merged commit 3c2f9a6 into dev Nov 2, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feat/header] Header/Menu/DropDown #29

[Feat/header] Header/Menu/DropDown #29

taehong0-0 commented Nov 1, 2021

jin-Pro commented Nov 1, 2021

jin-Pro commented Nov 1, 2021

Noelsky-code commented Nov 2, 2021 •

edited

Loading

[Feat/header] Header/Menu/DropDown #29

[Feat/header] Header/Menu/DropDown #29

Conversation

taehong0-0 commented Nov 1, 2021

Do-List

해야할 일

고민한 점

jin-Pro commented Nov 1, 2021

jin-Pro commented Nov 1, 2021

Noelsky-code commented Nov 2, 2021 • edited Loading

Noelsky-code commented Nov 2, 2021 •

edited

Loading