[#31] 최상위 컨테이너 설정 #33

Bumang-Cyber · 2024-01-03T14:30:43Z

Issue Number

close #31

⛳️ Task

화이팅하기
최상위 container(브라우저 전체 너비)와 최상위 wrapper(360~768px) 설정
추후 header와 footer의 자리를 남김

✍️ Note & 📸 Screenshot

1. 최상위 container(브라우저 전체 너비)와 최상위 wrapper(360~768px) 설정

outlet을 감싸는 container와 wrapper를 설정했습니다.
네이밍 컨벤션대로 S.xxx로 하려했으나 .을 사용할 수 없었습니다. 그래서 'S + 파스칼케이스'로 대체했습니다.

import { Outlet } from "react-router-dom";
import styled from "styled-components";

function App() {
  return (
    <SContainer>
      {/* <SHeader/> */}
      <SWrapper>
        <Outlet />
      </SWrapper>
      {/* <SFooter/> */}
    </SContainer>
  );
}

2. header와 footer의 자리를 남김

UX디자이너분과 상의해봐야하겠지만 타서비스를 볼 때 헤더와 푸터가 실제 page contents 영역과 다르게 설정되어있는 경우가 많은거 같습니다.
야놀자의 경우, header와 footer가 브라우저 전체 폭까지 늘어나있지만 실제 content는 최대 768px의 제한을 받고 있습니다. (https://www.yanolja.com/)

당근의 경우 header가 브라우저 전체 폭까지 늘어나있고 실제 content도 전체 폭을 다 사용하고 있습니다. (https://www.daangn.com/fleamarket/)

App.tsx에 SHeader와 SFooter를 주석처리해놓았는데 실제 header를 넣으면 이렇게 보입니다. (진한 회색이 header영역)

2024-01-03.11.29.08.mov

내일 헤더 부분에 대해서 UX디자이너 분과 이야기 해보고 독립시킬지 아니면 360~768px에 헤더/푸터도 다 넣을지 의논해보고 결정하겠습니다!

1/4 11시

불필요한 app.css를 삭제하였고,
스타일 파일을 component/layout/index.ts에 정리하였습니다.

This reverts commit 4653f36. :wq "" "revert"

im-na0

수고하셨습니다!! 아까 회의한대로 스타일 코드는 따로 분리해두는게 좋을 것 같습니다!
근데 App 같은 경우는 스타일 파일을 별도로 빼는 것 보단, Layout으로 컴포넌트를 따로 빼서 거기서 Container와 Wrapper의 스타일을 지정해주는건 어떨까욤...?

wowba · 2024-01-04T01:57:20Z

미디어 쿼리보다 max, min-width로 해결하신게 더 좋은 것 같네요!
회의 때 나온것처럼 스타일 파일만 따로 분리하면 될 듯 합니다!

dbstjrals · 2024-01-04T01:55:34Z

src/App.tsx

+    <SContainer>
+      {/* <SHeader/> */}
+      <SWrapper>
+        <Outlet />


헤더나 푸터가 필요없는 페이지에서는 어떤 방식으로 처리하면 좋을까요?

당장 생각나는 건 헤더와 푸터에서 useLocation으로 주소를 불러와서 필요없는 주소에서는 보이지 않게 하는 방법이 있을 것 같은데, 다른 아이디어도 있는 지 궁금합니다

엇 저도 예전 프로젝트에서 header부분 석민님께서 말씀하신 것처럼 처리했던거 같습니다! 저도 다른 대안은 생각나는건 없네용!

dbstjrals · 2024-01-04T01:58:45Z

src/App.tsx

+  justify-content: center;
+  align-items: center;
+
+  background-color: ${(props) => props.theme.color.greyScale6};


관련있는 속성끼리 개행 추가하셔서 보기가 더 편한 것 같아요!!

background-color: ${(props) => props.theme.color.greyScale6};

theme 쓸 때, 아래처럼 축약해서 사용도 가능하더라구요. 편하시면 이렇게 사용해도 좋을것 같아요

background-color: ${(theme) => theme.color.greyScale6};

궁금한게 있는데 background-color: ${(theme) => theme.color.greyScale6}; 이렇게 theme을 직접 임포트해서 사용하는 것 과
${({theme}) => theme.color.greyScale6}; 이렇게 ThemeProvider 안에 있는 theme을 사용하는 것과 어떤 차이가 있을까요? 저는 후자로 해왔어서 문득 궁금하네여..

넵 한번 이렇게 사용해보도록 하겠습니다!

theme을 직접 import 한다는 게 사용하려는 파일에서

import { theme } from "../../styles/theme.ts"

이런 식으로 import해서 사용한다고 말하시는게 맞나요?

넵! 말씀해주신 방식대로면 theme 파일이 직접 임포트 되는걸로 알고 있습니다..!

앗 제가 잘못알았네용 😅
background-color: ${theme.color.greyScale6}; 이렇게 사용하는게 직접 임포트되는거구
석민님이 말씀하신 방법은 provider 내의 theme을 사용하는게 맞네용!

이게 직접 임포트해서 사용하는 경우도 봤어서 어떤 차이가 있는지 문득궁금했습니다 ㅋㅋ gpt한테 물어보니 직접 임포트해서 사용하는 경우는 ThemeProvider가 제공하는 컨텍스트에 의존하고 독립적으로 사용할 수 있지만, 테마의 동적 변경이 어렵고, 전역 테마 시스템의 이점을 활용하기 어렵습니다. 라고 하네요..😯

themeProvider에 설정한 값을 가져오는거랑 파일에 직접 접근하는 것의 차이가 있을 것 같네요!

Bumang-Cyber · 2024-01-04T02:05:29Z

수고하셨습니다!! 아까 회의한대로 스타일 코드는 따로 분리해두는게 좋을 것 같습니다! 근데 App 같은 경우는 스타일 파일을 별도로 빼는 것 보단, Layout으로 컴포넌트를 따로 빼서 거기서 Container와 Wrapper의 스타일을 지정해주는건 어떨까욤...?

App.styled.ts가 아니라 Layout.ts 파일을 따로 만들자는 얘기실까요?!

im-na0 · 2024-01-04T02:07:49Z

수고하셨습니다!! 아까 회의한대로 스타일 코드는 따로 분리해두는게 좋을 것 같습니다! 근데 App 같은 경우는 스타일 파일을 별도로 빼는 것 보단, Layout으로 컴포넌트를 따로 빼서 거기서 Container와 Wrapper의 스타일을 지정해주는건 어떨까욤...?

App.styled.ts가 아니라 Layout.ts 파일을 따로 만들자는 얘기실까요?!

넵넵!.. 헤더와 푸더 같은 경우도 Layout 폴더에서 관리하게 될 것 같아서
components/Layout/index.tsx 여기서 Container와 Wrapper를 사용하는게 어떨까 싶습니다

Bumang-Cyber · 2024-01-04T02:10:59Z

수고하셨습니다!! 아까 회의한대로 스타일 코드는 따로 분리해두는게 좋을 것 같습니다! 근데 App 같은 경우는 스타일 파일을 별도로 빼는 것 보단, Layout으로 컴포넌트를 따로 빼서 거기서 Container와 Wrapper의 스타일을 지정해주는건 어떨까욤...?

App.styled.ts가 아니라 Layout.ts 파일을 따로 만들자는 얘기실까요?!

넵넵!.. 헤더와 푸더 같은 경우도 Layout 폴더에서 관리하게 될 것 같아서 components/Layout/index.tsx 여기서 Container와 Wrapper를 사용하는게 어떨까 싶습니다

넵 좋은거 같습니다! component폴더에 layout폴더를 만들어서 반영하겠습니당!

wowba

layout으로 분리하니 더 깔끔하네요...
최상위 스타일 컴포넌트 잡아주셔서 감사합니다!

im-na0

👍

Bumang-Cyber added 5 commits January 3, 2024 22:19

fix: stash conflict 해소

61cac30

feat: 최상위 컨테이너 구조 설정

4653f36

Revert "feat: 최상위 컨테이너 구조 설정"

dbb2425

This reverts commit 4653f36. :wq "" "revert"

Merge branch 'main' into feature/#31-main

18f2afa

feat: 최상위 컨테이너 구조 설정

c17eb0a

Bumang-Cyber added the DESIGN DESIGN label Jan 3, 2024

Bumang-Cyber self-assigned this Jan 3, 2024

wowba requested review from dbstjrals, wowba, chaeminseok and im-na0 January 4, 2024 01:01

im-na0 reviewed Jan 4, 2024

View reviewed changes

dbstjrals approved these changes Jan 4, 2024 •

edited

Loading

View reviewed changes

fix: styled 파일 분리

e671bbe

fix: layout파일 분리

c516857

wowba approved these changes Jan 4, 2024

View reviewed changes

im-na0 approved these changes Jan 4, 2024

View reviewed changes

Bumang-Cyber merged commit 5713198 into main Jan 4, 2024
1 of 2 checks passed

Bumang-Cyber deleted the feature/#31-main branch January 4, 2024 02:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[#31] 최상위 컨테이너 설정 #33

[#31] 최상위 컨테이너 설정 #33

Bumang-Cyber commented Jan 3, 2024 •

edited

Loading

im-na0 left a comment •

edited

Loading

wowba commented Jan 4, 2024

dbstjrals Jan 4, 2024

Bumang-Cyber Jan 4, 2024

dbstjrals Jan 4, 2024

im-na0 Jan 4, 2024

Bumang-Cyber Jan 4, 2024

dbstjrals Jan 4, 2024

im-na0 Jan 4, 2024

im-na0 Jan 4, 2024 •

edited

Loading

wowba Jan 4, 2024

Bumang-Cyber commented Jan 4, 2024

im-na0 commented Jan 4, 2024

Bumang-Cyber commented Jan 4, 2024

wowba left a comment

im-na0 left a comment

[#31] 최상위 컨테이너 설정 #33

[#31] 최상위 컨테이너 설정 #33

Conversation

Bumang-Cyber commented Jan 3, 2024 • edited Loading

Issue Number

⛳️ Task

✍️ Note & 📸 Screenshot

1. 최상위 container(브라우저 전체 너비)와 최상위 wrapper(360~768px) 설정

2. header와 footer의 자리를 남김

1/4 11시

im-na0 left a comment • edited Loading

Choose a reason for hiding this comment

wowba commented Jan 4, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

im-na0 Jan 4, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Bumang-Cyber commented Jan 4, 2024

im-na0 commented Jan 4, 2024

Bumang-Cyber commented Jan 4, 2024

wowba left a comment

Choose a reason for hiding this comment

im-na0 left a comment

Choose a reason for hiding this comment

Bumang-Cyber commented Jan 3, 2024 •

edited

Loading

im-na0 left a comment •

edited

Loading

im-na0 Jan 4, 2024 •

edited

Loading