Fix/youl bug fix : 로고, 파비콘 교체, 헤더 스타일 변경

[yulrang]

🔖 Issue Ticket

Ticket

✍️ Description

• 로고 교체
• 파비콘 교체 : 사이즈 업
• 헤더 스타일 변경 : 모바일에서 헤더 높이, 폰트 사이즈, sticky 적용
• 크루, 약속 샘플 이미지 압축된 버전으로 교체
• 이미지 경로 수정 : style 폴더 안에 있던 asset -> public 안으로 이동

✅ Checklist

PR

• Branch Convention 확인

  feat/ 피쳐, fix/ 버그 수정, refactor/ 개선

• Base Branch 확인
• 적절한 Label 지정
• Assignee 및 Reviewer 지정

Test

• 로컬 작동 확인

Summary by CodeRabbit

Summary by CodeRabbit

• 새로운 기능

  • 헤더 컴포넌트에 스티키 스타일 추가로 화면 상단에 고정 표시.
  • 로고 이미지 교체 및 레이아웃 개선으로 시각적 향상.
  • 웹 애플리케이션에 파비콘 추가.

• 버그 수정

  • 사용자 인증 상태에 따른 링크 스타일 일관성 개선.

• 문서화

  • FloatingButton 컴포넌트 관련 파일 삭제.

• 스타일

  • Tailwind CSS 구성 조정으로 레이아웃 유연성 향상.

[github-actions]

🚀storybook: https://67206cc6ff9d7a05a3528ff8-syxpxeeorr.chromatic.com/

[github-actions]

🚀storybook: https://67206cc6ff9d7a05a3528ff8-zzqfrfcqhh.chromatic.com/

[coderabbitai]

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (3)

src/components/common/header/presenter.tsx (2)

33-35: 로고 이미지의 접근성 개선이 필요합니다.

두 개의 로고 이미지가 동일한 alt 텍스트를 사용하고 있습니다. 각각의 역할을 명확히 구분하는 것이 좋겠습니다.

-            <Image src={IcoLogo} alt="crew logo" aria-hidden width={32} height={32} className="" />
-            <Image src={Logo} alt="crew logo" width={83} height={24} className="hidden md:block" />
+            <Image src={IcoLogo} alt="크루 아이콘 로고" aria-hidden width={32} height={32} className="" />
+            <Image src={Logo} alt="크루 텍스트 로고" width={83} height={24} className="hidden md:block" />

---

37-40: 중복되는 텍스트 스타일을 개선할 수 있습니다.

네비게이션 링크들에서 반복되는 텍스트 스타일을 공통 클래스로 추출하면 코드를 더 깔끔하게 만들 수 있습니다.

-          <nav className="flex items-center space-x-3 text-base font-semibold md:space-x-6 md:text-lg lg:space-x-6">
+          <nav className="flex items-center space-x-3 md:space-x-6 lg:space-x-6">
             <Link
               href="/"
-              className={`${pathname === '/' ? 'text-white' : 'text-blue-300'} text-sm font-semibold md:text-lg`}
+              className={`nav-link ${pathname === '/' ? 'text-white' : 'text-blue-300'}`}
             >

style.css나 해당 컴포넌트 파일에 다음을 추가하세요:

.nav-link {
  @apply text-sm font-semibold md:text-lg;
}

tailwind.config.ts (1)

45-45: 시맨틱한 height 변수 추가가 잘 되었습니다.

header 높이를 위한 시맨틱 변수를 추가한 것은 좋은 접근입니다. 이는 헤더 스타일의 일관성을 유지하고 유지보수성을 향상시킬 것입니다.

다른 레이아웃 관련 값들도 이와 같이 시맨틱한 이름을 사용하는 것을 고려해보세요. 예를 들어:

• footer
• sidebar
• navigation
  등의 명명 규칙을 따르면 코드의 가독성이 더욱 향상될 것입니다.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 060ee0d and 71e97a9.

⛔ Files ignored due to path filters (4)

• public/assets/images/logo-icon.svg is excluded by !**/*.svg
• public/assets/images/logo.png is excluded by !**/*.png
• public/assets/images/logo.svg is excluded by !**/*.svg
• src/app/favicon.ico is excluded by !**/*.ico

📒 Files selected for processing (5)

• src/components/common/header/container.tsx (1 hunks)
• src/components/common/header/presenter.tsx (2 hunks)
• src/components/common/input/button/floating-btn.stories.tsx (0 hunks)
• src/components/common/input/button/floating-btn.tsx (0 hunks)
• tailwind.config.ts (1 hunks)

💤 Files with no reviewable changes (2)

• src/components/common/input/button/floating-btn.stories.tsx
• src/components/common/input/button/floating-btn.tsx

✅ Files skipped from review due to trivial changes (1)

• src/components/common/header/container.tsx

🔇 Additional comments (3)

src/components/common/header/presenter.tsx (2)

8-9: SVG 포맷 사용이 적절합니다!

로고 이미지를 PNG에서 SVG로 변경한 것은 해상도 독립적인 벡터 그래픽을 사용할 수 있어 좋은 선택입니다.

---

30-30: h-header 변수가 tailwind 설정에 정의되어 있는지 확인이 필요합니다.

sticky 포지셔닝과 z-index 추가는 적절하나, h-header 커스텀 변수가 올바르게 설정되어 있는지 확인이 필요합니다.

✅ Verification successful

h-header 변수가 tailwind.config.ts에 올바르게 정의되어 있습니다.

tailwind.config.ts 파일에서 height.header가 '50px'로 정의되어 있어 문제없이 사용 가능합니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# tailwind.config.js 또는 .ts 파일에서 h-header 설정 확인
rg "h-header|height" -A 5 -g "tailwind.config.*"

Length of output: 290

tailwind.config.ts (1)

38-38: width.12.5 값의 변경이 다른 컴포넌트에 영향을 미치지 않는지 확인이 필요합니다.

기존 50px에서 56px로의 변경이 새로운 로고 크기에 맞춰 조정된 것으로 보입니다. 이 값이 다른 곳에서 사용되고 있는지 확인이 필요합니다.

✅ Verification successful

width.12.5 값 변경은 안전합니다

코드베이스 전체를 검사한 결과, 'w-12.5' 클래스나 '56px' 관련 width 설정이 다른 컴포넌트에서 사용되지 않고 있습니다. 따라서 이 값의 변경은 다른 컴포넌트에 영향을 미치지 않을 것으로 확인됩니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check usage of w-12.5 class across the codebase

# Search for w-12.5 class usage
rg "w-12\.5" --type=tsx --type=jsx

Length of output: 64

---

Script:

#!/bin/bash
# Search for w-12.5 class usage with correct file types
rg "w-12\.5" -t ts -t js -t tsx -t jsx -t html

# Also check for any direct references to the value 12.5 in width-related contexts
rg "width.*12\.5|w-\[.*56px" -t ts -t js -t tsx -t jsx -t html

Length of output: 169

---

Script:

#!/bin/bash
# Search for w-12.5 class usage without specifying file types
rg "w-12\.5"

# Also check for any direct references to the value 12.5 in width-related contexts
rg "width.*12\.5|w-\[.*56px"

# List all files that might contain frontend code
fd "\.(tsx|jsx|ts|js|html|vue)$"

Length of output: 9845

[github-actions]

🚀storybook: https://67206cc6ff9d7a05a3528ff8-urkcwdprrh.chromatic.com/

[coderabbitai]

Actionable comments posted: 2

🧹 Outside diff range and nitpick comments (1)

src/components/common/header/presenter.tsx (1)

8-9: 로고 이미지 구현 방식 개선 제안

새로운 로고 이미지 구현이 잘 되어있으나, 접근성과 성능 측면에서 개선할 수 있는 부분이 있습니다.

다음과 같은 수정을 제안드립니다:

-<Image src={IcoLogo} alt="crew logo" aria-hidden width={32} height={32} className="" />
-<Image src={Logo} alt="crew logo" width={83} height={24} className="hidden md:block" />
+<Image 
+  src={IcoLogo} 
+  alt="크루 아이콘 로고" 
+  aria-hidden 
+  width={32} 
+  height={32} 
+  priority
+/>
+<Image 
+  src={Logo} 
+  alt="크루 텍스트 로고" 
+  width={83} 
+  height={24} 
+  className="hidden md:block"
+  priority 
+/>

1. 의미있는 한글 alt 텍스트 추가
2. 빈 className 제거
3. 로고는 중요한 요소이므로 priority 속성 추가하여 먼저 로드되도록 설정

Also applies to: 33-35

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 71e97a9 and c13bc69.

📒 Files selected for processing (2)

• src/components/common/header/container.tsx (1 hunks)
• src/components/common/header/presenter.tsx (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• src/components/common/header/container.tsx

🔇 Additional comments (1)

src/components/common/header/presenter.tsx (1)

30-32: 헤더 스타일 구현이 적절합니다

반응형 디자인과 함께 새로운 높이값(h-header)을 적용한 구현이 잘 되어있습니다.

[coderabbitai]

🛠️ Refactor suggestion

네비게이션 링크 스타일 일관성 개선 필요

네비게이션 링크들의 스타일 적용이 일관적이지 않습니다.

다음과 같은 수정을 제안드립니다:

-className={`${pathname === '/' ? 'text-white' : 'text-blue-300'} hidden text-sm font-semibold md:block md:text-lg`}
+className={`${
+  pathname === '/' ? 'text-white' : 'text-blue-300'
+} ml-4 hidden text-sm font-semibold md:block md:text-lg`}

1. 다른 링크들과 동일한 ml-4 마진 적용
2. 조건부 클래스와 고정 클래스를 가독성 있게 분리

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	<nav className="flex items-center space-x-3 text-base font-semibold md:space-x-6 md:text-lg lg:space-x-6">
	<Link
	href="/"
	className={`${pathname === '/' ? 'text-white' : 'text-blue-300'} ml-4 hidden md:block`}
	className={`${pathname === '/' ? 'text-white' : 'text-blue-300'} hidden text-sm font-semibold md:block md:text-lg`}
	<nav className="flex items-center space-x-3 text-base font-semibold md:space-x-6 md:text-lg lg:space-x-6">
	<Link
	href="/"
	className={`${
	pathname === '/' ? 'text-white' : 'text-blue-300'
	} ml-4 hidden text-sm font-semibold md:block md:text-lg`}

[coderabbitai]

💡 Codebase verification

파비콘 설정 추가 필요

로고 이미지 파일(logo.svg, logo-icon.svg)은 정상적으로 존재하나, 파비콘 관련 파일과 설정이 누락되어 있습니다. 다음 사항들의 추가가 필요합니다:

• public 디렉토리에 파비콘 파일 추가 필요
• HTML 파일에 파비콘 설정 추가 필요
• manifest.json 설정 추가 필요

🔗 Analysis chain

로고 및 파비콘 에셋 확인 필요

PR 목적에 명시된 로고와 파비콘 교체가 완전히 이루어졌는지 확인이 필요합니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 새로운 로고와 파비콘 파일이 올바른 위치에 존재하는지 확인
fd -t f "logo|favicon" public/assets/

Length of output: 104

---

Script:

#!/bin/bash
# favicon 관련 파일이 public 루트에 있는지 확인
fd -t f "favicon" public/

# HTML 파일에서 favicon 설정 확인
rg -i "favicon" "*.html"

# manifest.json 파일 검색 및 내용 확인
fd "manifest.json" . -x cat {}

Length of output: 130

[github-actions]

🚀storybook: https://67206cc6ff9d7a05a3528ff8-nejsmrbwvt.chromatic.com/

[github-actions]

🚀storybook: https://67206cc6ff9d7a05a3528ff8-okhbkuqtme.chromatic.com/

[github-actions]

🚀storybook: https://67206cc6ff9d7a05a3528ff8-jeihkhukpi.chromatic.com/

[github-actions]

🚀storybook: https://67206cc6ff9d7a05a3528ff8-sjubfwbjol.chromatic.com/

[github-actions]

🚀storybook: https://67206cc6ff9d7a05a3528ff8-siyqvalret.chromatic.com/

[ChoYenii]

수고 많으셨습니다!!

[HaeJungg]

👍👍👍👍