수정

Author: EunbinJung

README.md

@@ -1,12 +1,12 @@
 # SSOUL 프로젝트 인수인계 문서
 
-## �� 프로젝트 개요
+## 프로젝트 개요
 
 **프로젝트명**: SSOUL (칵테일을 좋아하는 사람들을 위한 서비스)  
 **기술 스택**: Next.js 15, React 19, TypeScript, Tailwind CSS  
 **저장소**: https://github.com/prgrms-web-devcourse-final-project/WEB5_6_HaeDokCoding_FE
 
-## �� 시작하기
+## 시작하기
 
 ### 개발 환경 설정
 ```bash
@@ -60,7 +60,7 @@ src/
     └── utills/                  # 유틸리티 함수
 ```
 
-## �� 주요 기능
+## 주요 기능
 
 ### 1. 인증 시스템
 - **소셜 로그인**: Google, Kakao, Naver 지원
@@ -72,19 +72,19 @@ src/
 
 ### 2. 페이지별 기능
 
-#### �� 메인 페이지 (`/`)
+#### 메인 페이지 (`/`)
 - 현재 기본 구조만 구현됨
 - 추후 확장 예정
 
-#### �� 칵테일 레시피 (`/recipe`)
+#### 칵테일 레시피 (`/recipe`)
 - **주요 컴포넌트**: 
   - `CocktailList`: 칵테일 목록 표시
   - `Accordion`: 필터링 옵션
   - `SelectBox`: 정렬 옵션
 - **기능**: 검색, 필터링, 정렬
 - **상세 페이지**: `/recipe/[id]` - 개별 칵테일 상세 정보
 
-#### �� 커뮤니티 (`/community`)
+#### 커뮤니티 (`/community`)
 - **주요 컴포넌트**:
   - `PostCard`: 게시물 카드
   - `CommunityTab`: 카테고리 탭
@@ -93,28 +93,28 @@ src/
 - **글쓰기**: `/community/write`
 - **상세 페이지**: `/community/[id]`
 
-#### �� 취향 추천 (`/recommend`)
+#### 취향 추천 (`/recommend`)
 - **챗봇 기반 추천**: `ChatSection` 컴포넌트
 - **주요 컴포넌트**:
   - `BotMessage`, `UserMessage`: 메시지 컴포넌트
   - `BotOptions`: 선택 옵션
   - `MessageInput`: 입력창
   - `TypingIndicator`: 타이핑 효과
 
-#### �� 마이페이지 (`/mypage`)
+#### 마이페이지 (`/mypage`)
 - **기본 리다이렉트**: `/mypage` → `/mypage/mybar`
 - **주요 섹션**:
   - `/mypage/mybar`: 나만의 바
   - `/mypage/my-active`: 활동 내역 (게시물, 댓글, 좋아요)
   - `/mypage/my-alarm`: 알림 설정
   - `/mypage/my-setting`: 계정 설정
 
-#### �� 로그인 (`/login`)
+#### 로그인 (`/login`)
 - **소셜 로그인**: `SocialLogin` 컴포넌트
 - **성공 페이지**: `/login/success`
 - **신규 사용자**: `/login/user/first-user`
 
-## �� 기술적 세부사항
+## 기술적 세부사항
 
 ### 상태 관리
 - **Zustand**: 클라이언트 상태 관리
@@ -136,34 +136,34 @@ src/
 - **Husky**: Git hooks
 - **Lint-staged**: 커밋 전 검사
 
-## �� 주요 설정 파일
+## 주요 설정 파일
 
 - `next.config.ts`: Next.js 설정
 - `tailwind.config.js`: Tailwind CSS 설정
 - `eslint.config.mjs`: ESLint 설정
 - `tsconfig.json`: TypeScript 설정
 
-## �� 반응형 디자인
+## 반응형 디자인
 
 프로젝트는 모바일 우선(Mobile-first) 접근 방식을 사용합니다:
 - **모바일**: 기본 스타일
 - **태블릿**: `md:` prefix
 - **데스크톱**: `lg:`, `xl:` prefix
 
-## �� 주의사항
+## 주의사항
 
 1. **환경 변수**: 개발/운영 환경에 맞는 API URL 설정 필요
 2. **인증 토큰**: localStorage에 저장되므로 보안 고려 필요
 3. **API 통신**: `credentials: 'include'` 설정으로 쿠키 기반 인증
 4. **Git Hooks**: Husky 설정으로 커밋 전 자동 검사
 
-## �� 추가 문의
+## 추가 문의
 
 - **저장소 이슈**: https://github.com/prgrms-web-devcourse-final-project/WEB5_6_HaeDokCoding_FE/issues
 - **주요 브랜치**: `main` (메인), `dev` (개발)
 
 ---
 
 **작성일**: 2025-10-14  
-**작성자**: 이성헌  
+**작성자**: 정은빈 | 김아현 | 문태민
 **버전**: 1.0

src/domains/main/cocktailDrop/CocktailDrop.tsx

@@ -55,7 +55,7 @@ function CocktailDrop({ isDesktop = false }: CocktailDropProps) {
         ? `-${viewportHeight * 0.3}px`
         : isTablet
           ? `-${viewportHeight * -0.8}px`
-          : '0px';
+          : '210px';
 
       gsap.fromTo(
         logoRef.current,
@@ -88,16 +88,16 @@ function CocktailDrop({ isDesktop = false }: CocktailDropProps) {
       {/* 대각선 줄 1 */}
       <div
         ref={line1Ref}
-        className="absolute md:top-[100px] top-[75px] left-[-50%] w-[200%] md:h-[80px] h-[50px] bg-secondary/80 rotate-[8deg] z-10"
+        className="absolute lg:top-[150px] md:top-[100px] top-[75px] left-[-50%] w-[200%] md:h-[80px] h-[50px] bg-secondary/80 rotate-[8deg] z-10"
       />
       {/* 대각선 줄 2 */}
       <div
         ref={line2Ref}
-        className="absolute md:top-[200px] top-[150px] left-[-50%] w-[200%] md:h-[80px] h-[50px] bg-secondary rotate-[8deg] z-10"
+        className="absolute lg:top-[250px] md:top-[200px] top-[150px] left-[-50%] w-[200%] md:h-[80px] h-[50px] bg-secondary rotate-[8deg] z-10"
       />
 
       {/* 로고 */}
-      <div ref={logoRef} className="absolute z-4 md:w-115 w-65 md:h-90 h-40">
+      <div ref={logoRef} className="absolute z-4 lg:w-125 md:w-115 w-65 lg:h-110 md:h-90 h-40">
         <Image
           src="/logo.svg"
           alt="로고 이미지"