set design token & publish layout

[55555-Jyeon]

개요

• 🎁 styles: apply design token(font & colors)
• 🎁 style: publishing layout and header
• 🎁 style: change favicon and logo

PR Checklist

PR이 다음 요구 사항을 충족하는지 확인하세요.

• [x] PR 제목 및 커밋 메시지 컨벤션 확인
• [x] 직접 만든 함수가 있다면 이에 대한 설명 추가 (ex. JS DOCS)
• [x] 변경 사항에 대한 테스트 완료 (버그 수정/기능에 대한 테스트)
• [x] Label 확인
• [x] Assignees 설정 확인
• [x] Reviewers 설정 확인

PR details

🎁 styles: apply design token(font & colors)

디자인 시 사용했던 폰트(Noto Sans KR) 및 색상 적용했습니다. 색상 이름은 아래 확인 후 사용해주세요 🙂

🎁 style: seperate flex styles

flex와 관련된 정렬 스타일은 자주 쓰일 것 같아서 따로 분리해두었습니다. 📂 global.css 파일 안에 가운데 정렬 관련해서만 우선 추가해두었어요.

자주 쓰일 정렬과 관련된 스타일은 아래와 같이 분리해서 사용하면 좋을 것 같아요 :)

/* aligns */
.flex-center {
    @apply flex justify-center items-center;
}
.flex-items {
  @apply flex items-center;
}
.flex-justify {
  @apply flex justify-center;
}

git issue에도 추가해두었는데 glass-morphsim은 같은 스타일이 적용되는 부분이 많으므로 tailwind.config.ts에 분리해서 사용하면 좋을 것 같아요.

header에 적용될 glass-effect는 사실 더러 쓰이는 부분은 아니지만 tailwind로 작성시 너무 길어져서 샘플 삼아 분리했습니다. modal에 적용되는 스타일은 전부 동일하므로 별도의 클라스(class)로 분리해서 사용하면 좋을 것 같아요.

plugins: [
        plugin(function ({ addUtilities }: PluginAPI) {
            const newUtilities = {
                ".header-glass-effect": {
                    background: "rgba(255, 255, 255, 0.1)",
                    borderRadius: "16px",
                    boxShadow: "0 4px 30px rgba(0, 0, 0, 0.1)",
                    backdropFilter: "blur(9px)",
                    WebkitBackdropFilter: "blur(9px)",
                    border: "1px solid rgba(255, 255, 255, 0.3)",
                },
            }
            addUtilities(newUtilities)
        }),
    ],

🎁 style: publishing layout and header

🎁 style: complete publishing footer

레이아웃 퍼블리싱 완료했습니다. footer는 디자인은 되어 있지 않지만 임의로 기본적인 내용만 넣어두었어요!

🎁 style: change favicon and logo

logo의 화질이 좀 떨어지는 것 같아 사이즈가 큰 걸로 변경했고 favicon 및 metaData 내용 수정했습니다. favicon은 아래 사진에서 확인 가능합니다.

👩🏻‍💻 나누고 싶은 의견 있어요

이전 프로젝트에서 관리하던 폴더들(전역으로 관리해야 하는 폴더들)을 이번에는 app 내부에 넣기로 했잖습니까. 폴더 앞에 언더스코어()가 붙은 폴더들이 좀 많은 것 같은데 혹시 최상위로 언더스코어()폴더를 생성 후 그 안에 전역으로 관리 돼야 하는 폴더들을 넣어 관리하는 건 어떤가요..?

current folder structure

suggestion

app/_/components
app/_/hooks
...

아니면 아래처럼 그룹으로 나눠 관리할 수도 있을 것 같아요.

• 📂 (global) : 전역으로 관리될 폴더 그룹
• 📁 (pages) : url 주소로 보여질 page들 폴더 그룹

폴더 구조 혹시 변경되게 되면 메인페이지 퍼블리싱 관련해서 브랜치 생성해 진행하겠습니다! 😬

When modifying code...

# Request Level
  - [ ] : "🔥 이걸 PR이라고 올렸어요? 당장 수정해주시죠!?"
  - [ ] : "🥹 이건 좀..."
  - [ ] : "🤷 PR하기 전에 생각했나요?"

# Description

[55555-Jyeon]

폴더 나누는거 좋은 아이디어 같습니다..!

어떻게 나눌까요..?! 😮

1. 언더스코어(_)로 전역 관리해야 하는 폴더들만 별도로 관리
2. 괄호로 전역 관리해야 하는 폴더들 및 페이지들 각각 그룹으로 관리

[ijimlnosk]

1. 언더스코어(_)로 전역 관리해야 하는 폴더들만 별도로 관리
2. 괄호로 전역 관리해야 하는 폴더들 및 페이지들 각각 그룹으로 관리

음...1번이 어떨까요?

[55555-Jyeon]

음...1번이 어떨까요?

🔖 rename: change folder structure

넵! 언더스코어(_)로 변경해서 커밋했습니다!

import 경로는 아래와 같이 보여지게 됩니다!

[ijimlnosk]

넵! 언더스코어(_)로 변경해서 커밋했습니다!

아주좋습니다!