Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Refactor] home 페이지 폴더구조 변경 #231

Merged
merged 13 commits into from
Dec 22, 2024
Merged

[Refactor] home 페이지 폴더구조 변경 #231

merged 13 commits into from
Dec 22, 2024

Conversation

suwonthugger
Copy link
Member

@suwonthugger suwonthugger commented Dec 21, 2024 •
edited
Loading

🔥 Related Issues

  • close #issue_number

✅ 작업 리스트

  • 홈페이지 폴더구조 수정

🔧 작업 내용

  • 회의 때 말씀드린대로 components 폴더를 없애고, 각 컴포넌트의 폴더를 만들어 구조를 변경했습니다.!
  • 그리고 공통된 하나의 작업 주제에 대해서 계속 이슈를 만드는게 번거로운것 같아서, 이슈 하나에 여러 내용을 넣었습니다!
  • 회의 때 말씀드렸던 배럴파일을 사용했습니다. 배럴파일은 같은 UI 분류 컴포넌트 폴더 최상위에서 1번만 사용합니다.

기존 import

image

배럴파일 적용 import

image

  • 배럴파일 도입 근거

    • 컴포넌트 import문으로 어떤 컴포넌트를 불러왔는지 확인아 어렵다.
    • 컴포넌트가 늘어날수록 폴더구조를 확인하기 어렵다.

  • 배럴 파일 구조의 단점
    모든 구조에서 배럴파일을 사용하면 모듈을 여러번 불러오게되어서, 런타임이 아닌 개발하는 환경에서 성능에 좋지 않다고 합니다.
    근데 이런 경우는 대규모의 프로젝트의 경우 & 모든 상황에서 배럴파일을 사용하는 경우 ( 컴포넌트 하위> 배럴파일 > 컴포넌트 하위 > 배럴파일...)이기 때문에 , 규모가 크지 않은 저희 프로젝트에서는 성능상 문제가 없다고 판단했습니다.
    즉 성능적 이슈 <<<< 개발자 경험 이라고 생각해서 적용했습니다.

배럴 파일에 대한 여러분들 의견이 궁금해요 @KIMGEONHWI @Ivoryeee @seueooo

https://github.com/yeonjuan/dev-blog/blob/master/JavaScript/speeding-up-the-javascript-ecosystem-the-barrel-file-debacle.md

🧐 새로 알게된 점

🤔 궁금한 점

📸 스크린샷 / GIF / Link

기존

image

변경 후

image image

@suwonthugger suwonthugger added the ♻️ Refactor 코드 리팩토링 label Dec 21, 2024
@suwonthugger suwonthugger self-assigned this Dec 21, 2024
@suwonthugger suwonthugger mentioned this pull request Dec 21, 2024
Closed
6 tasks
@pull-request-size pull-request-size bot added size/L and removed size/M labels Dec 21, 2024
This was referenced Dec 21, 2024
Merged
Merged
@suwonthugger suwonthugger merged commit 7cf610b into develop Dec 22, 2024
1 check passed
@suwonthugger suwonthugger deleted the feat/#230/home-folder-structure branch December 22, 2024 15:13
Ivoryeee pushed a commit that referenced this pull request Dec 27, 2024
@suwonthugger @Ivoryeee
[Refactor] home 페이지 폴더구조 변경 (#231)
b67ca00 
* feat: home 페이지 폴더구조 변경 (#230)

* feat: 공통적으로 쓰이는 BoxTodo, ButtonTogoToggle -> shared로 이동 (#230)

* feat: shared로 이동한 컴포넌트 경로 변경 (#230)

* refactor: ModalContents 폴더 구조 변경 (#230)

* feat: import 문 구분을 위해 폴더 구조 배럴파일 구조로 변경 (#230)

* feat: commit 누락된 부분 저장 (#230)

* feat: 홈페이지 import 문 수정 (#230)

* refactor: atoms 컴포넌트 용도에 맞게 폴더 이동 및 네이밍 컨벤션에 맞게 변경 (#230)

* refactor: 바뀐 컴포넌트 경로에 맞게 import문 수정 (#230)

* refactor: 홈에서만 쓰이는 hook 폴더 이동 및 훅을 사용하는 컴포넌트의 import문 변경 (#230)

* refactor: ButtonSVG 사용 불필요하여 삭제 (#230)

* refactor: 상아 피드백 반영해서 UI 분류 페이지 제거 모든 컴포넌트 depth 1로 고정 (#230)

* refactor: hook import 경로 수정 (#230)
Ivoryeee added a commit that referenced this pull request Dec 29, 2024
@Ivoryeee @KIMGEONHWI
@seueooo @suwonthugger
[Style] 모립세트 페이지 퍼블리싱 (#226)
a88a4a7 
* [style] 사이드바 모립세트 뷰 추가 (#220)

* [style] 모립세트 경로 추가 (#220)

* [style] tab 스타일 변경사항 반영 (#220)

* [style] 모립세트 페이지 퍼블리싱 (#220)

* [ Style ] 모립세트 컴포넌트 구현 (#225)

* refactor: SideBoxTemporary 컴포넌트 삭제

* feat: MoribSetCOntainer 컴포넌트 구현

* style: 허용할 사이트 영역 홀,짝수번째 배경화면 다르게 수정

* feat: 취소 버튼 온클릭 핸들러 추가

* refactor: MoribSetContainer가 열린 상태에서 다른 요소 클릭 가능하게 수정

* feat: 배열 별도의 상수 파일로 분리 및 기능 구현

* refactor: 아이콘 url도 ALLOW_SITE_LIST에서 관리

* codereview: 대원 코드리뷰 반영

* refactor: 모립세트 워딩 허용서비스 세트로 수정

* codereview: 대원, 상아 코드리뷰 반영

* feat: 툴팁 생성

* refactor: 타이머페이지 툴팁 삭제

* refacotr: 툴팁 isAllowedServiceVisible이 true일 때만 화면에 등장하도록 수정

* codereview: BoxAllowedService에서 PopoverAllowedService로 네이밍 변경

* [ Style ] 설정 뷰 내의 경고 모달 뷰 구현 (#227)

* feat: alert모달 내 버튼 공통 컴포넌트 생성 (#222)

* feat: ModalContentsAlert 생성 (#222)

* feat: input창 에러일 때 추가

* fix: 필요없는 코드 삭제 (#222)

* refactor: 약간의 로직분리 .. (#222)

* code review: user email prop 추가, 모달 컴포넌트 하나의 객체로 export 하도록 수정

* style: 스타일 누락된 것 추가

* refactor: userEmail props 추가 누락된 부분 수정

* [ Style ] 온보딩 뷰 구현 (#228)

* refactor: home/ not found 페이지에 쓰이는 사이드바 컴포넌트 리팩토링 (#224)

- 세팅모달, 기존 SidebarHome에서 쓰이는 컴포넌트 구조 배럴파일 방식으로 변경
- HomePage, NotFoundePage 두 곳에서 쓰이므로 shared로 위치 이동
- Sidebar에서 쓰이는 svg는 Sidebar 폴더 아래로 이동

* refactor: 홈페이지 구조 absolute를 사용해서 변경 (#224)

* feat: 온보딩 페이지 라우팅 (#224)

* refactor: 설정 모달 위치 변경 (#224)

* refactor: 사이드바 위치 변경 (#224)

* refactor: 레이아웃 생성 및 적용 (#224)

* refactor: 폰트 적용 방식 자동완성 될 수 있도록 변경 (#224)

* feat: 사용하는 아이콘 다운로드 및 export 설정 (#224)

* feat: StartStep, FieldStep 구현 (#224)

* feat: ServiceStep 구현 및 export (#224)

* chore: 상수 분리 및 컴포넌트 디자인 일부 수정 (#224)

* feat: useFunnel 훅 생성 및 온보딩 페이지에 적용 (#224)

* feat: Step 컴포넌트 컨벤션에 맞게 네이밍 변경 (#224)

* feat: 온보딩 페이지 퍼블리싱 (#224)

* feat: input 상태 ServiceStep 컴포넌트에 연결 (#224)

* style: StepField 컴포넌트 화면 너비에 따라 패딩값 일부 수정 (#224)

* feat: ServiceStep 버튼에 disabled 속성 추가 및 엔터 눌렀을 때 입력되게 끔 로직 추가 (#224)

* feat: svg 아이콘 폴더 shared로 변경, assets 아래 페이지별 폴더를 만들어 관리 (#224)

* feat: 바뀐 svg들의 위치에 맞게 import 경로 변경 및 BoxAllowedService 버튼에 홈으로 이동하는 로직 추가 (#224)

* style: 반응형 고려하여 홈 페이지 컴포넌트 일부 스타일 수정 (#224)

- 미완성입니다요

* refactor: truncate 활용해서 스타일 재적용 (#224)

* refactor: StepField.tsx p태그에서 h2태그로 변경 (#224)

* chore: 브라우저 리스트 업데이트하면서 일부 패키지 버전업 (#224)

* refactor: StepService.tsx 인풋 상태 input -> inputURL로 수정 (#224)

* [Refactor] home 페이지 폴더구조 변경 (#231)

* feat: home 페이지 폴더구조 변경 (#230)

* feat: 공통적으로 쓰이는 BoxTodo, ButtonTogoToggle -> shared로 이동 (#230)

* feat: shared로 이동한 컴포넌트 경로 변경 (#230)

* refactor: ModalContents 폴더 구조 변경 (#230)

* feat: import 문 구분을 위해 폴더 구조 배럴파일 구조로 변경 (#230)

* feat: commit 누락된 부분 저장 (#230)

* feat: 홈페이지 import 문 수정 (#230)

* refactor: atoms 컴포넌트 용도에 맞게 폴더 이동 및 네이밍 컨벤션에 맞게 변경 (#230)

* refactor: 바뀐 컴포넌트 경로에 맞게 import문 수정 (#230)

* refactor: 홈에서만 쓰이는 hook 폴더 이동 및 훅을 사용하는 컴포넌트의 import문 변경 (#230)

* refactor: ButtonSVG 사용 불필요하여 삭제 (#230)

* refactor: 상아 피드백 반영해서 UI 분류 페이지 제거 모든 컴포넌트 depth 1로 고정 (#230)

* refactor: hook import 경로 수정 (#230)

* refactor: 로그인 페이지 구조 변경 및 불필요한 templates 레거시 코드 삭제 (#230) (#232)

* [Refactor] 타이머 페이지 폴더 구조 변경 (#233)

* refactor: timer 컴포넌트/훅 컨벤션에 맞게 정리 및 불필요 컴포넌트/훅 삭제 (#230)

* refactor: 불필요한 templates 컴포넌트 삭제 (#230)

* Merge branch 'develop' of github.com:morib-in/Morib-Client into refactor/#230/timer-folder-structure

* [Refactor] 온보딩 페이지 폴더구조 변경 (#234)

* refactor: 온보딩 페이지 컴포넌트 폴더 삭제 및 컴포넌트명으로 폴더 생성하여 적용 (#230)

* refactor: 상아 피드백 반영해서 컴포넌트 depth 1로 고정 (#230)

* [style] 컬러팔레트 네이밍 추가 및 색상 공통 컴포넌트 생성 (#220)

* [refactor] 색상 네이밍에 맞춰 컬러 팔레트 수정 (#220)

* [feat] url 중복 유효성 검사 로직 추가 (#220)

* [refactor] 드롭다운 클릭 시 이벤트 전파 방지 (#220)

* [style] 카테고리 내 허용서비스 컴포넌트 분리 (#220)

* [code review] 코드리뷰 반영 (#220)

* [style] moribSet -> allowedService 네이밍 변경 (#220)

* [chore] 리베이스 충돌 해결 (#220)

* [style] sideBar 삭제 후 Layout 적용 (#220)

* [code review] 코드리뷰 반영 (#220)

* [style] 사이드바 홈, 허용서비스뷰 추가 (#220)

* [style] 드롭다운 이벤트 전파 방지 적용 (#220)

---------

Co-authored-by: 김건휘 <[email protected]>
Co-authored-by: Hanseo Kim <[email protected]>
Co-authored-by: suwonthugger <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@KIMGEONHWI KIMGEONHWI Awaiting requested review from KIMGEONHWI

@Ivoryeee Ivoryeee Awaiting requested review from Ivoryeee

@seueooo seueooo Awaiting requested review from seueooo

Assignees

@suwonthugger suwonthugger

Labels
♻️ Refactor 코드 리팩토링 size/L
Projects
Morib-Client
Status: Done
Milestone
폴더 구조 리팩토링
Development

Successfully merging this pull request may close these issues.
1 participant
@suwonthugger