Feat: 리스트 상세페이지 바깥쪽 레이아웃 퍼블리싱 (#14)

* feat: timediff 유틸함수 파일 생성

* feat: timeDiff 유틸 함수 구현

* feat: 댓글 레이아웃 구현 완료

* feat: 프로필 이미지 콜렉션 레이아웃 구현

* feat: 바텀시트 내용 수정

* feat: 바텀시드 정리

* feat: Header, BottomSheet 타입 정리

* design: css 적용 완료

* feat: collaboratorsPopOver 구현

* feat: 헤더 로직 구현

* design: css 수정

* design: css 수정 (collaborators, defaultProfile 등)

* design: css 수정(collaboratorsPopOver, comment, defaultProfile)

* feat: label 공용 컴포넌트화

* design: label margin right 수정

* design: 바텀시트 css 수정

* Refactor: 라벨 컴포넌트 타입 및 스타일 수정

* Chore: 폴더 구조 정리

* Style : timeDiff 함수 jsdoc 작성

* Feat: 삭제 모달 구현

* Refactor: Comments.css.ts 분리

* Chore: utils init.ts 삭제

* Chore: 충돌 해결

* Chore: 충돌 해결

* Refactor: replies.tsx 타입 분리 및 img alt 태그 추가

* Refactor: 타입 분리

* Refactor: 바텀시드 공통화

* Style: img 태그 alt 추가

* Refactor: 모달 컴포넌트 수정 내용 반영

* Style: 사용하지 않는 import문 정리

* Design: 댓글 input css 수정

* Feat: delete modal 공용 컴포넌트 수정 내용 반영

* Fix: next.config.js 파일 에러 수정

* Refactor: comment.tsx 필요없는 코드 삭제

* Refactor: img 태그 Image 로 교체, import문 공백 삭제

* Refactor: replies.tsx에도 delete modal 반영

* Refactor: deletemodal 컴포넌트 deletemodalbutton으로 이름 변경

* Design: 바텀시트 backgroud css 수정

* Refactor: deletemodalbutton import문도 컴포넌트와 동일하게 설정

* Style: import문 순서 수정 및 일부 공백 조정

* Refactor: map key 고유 아이디로 지정

* Fix: 콘솔 에러나는 부분 수정

* Chore: 폰트 파일들 삭제

* Style: 필요없는 주석 삭제

* Feat: .env .gitignore 처리

* Chore: tsconfig.json에 잘못 들어간 코드 삭제

* Chore: settings.json 위치 변경

* Refactor: 코드 리뷰 반영 수정

* Fix: 캐시 삭제 후 gitignore 재설정

* Refactor: modal portal 코드리뷰 반영 수정

* Refactor: 바텀시트 공용 훅 사용하도록 수정

* Design: 버튼 css 수정

* Fix: 버튼 안의 버튼 컴포넌트로 인해 발생하는 오류 수정

* Design: 라벨 아이템에 flexShrink 속성 추가

* Fix: svg icon 충돌 오류 해결

* Fix: 플러스 아이콘 및 collaborators 컴포넌트 오류 해결

.eslintrc.json

@@ -24,6 +24,12 @@
     "react/react-in-jsx-scope": "off", // react 17부턴 import 안해도돼서 기능 끔
     // 경고표시, 파일 확장자를 .ts나 .tsx 모두 허용함
     "react/jsx-filename-extension": ["warn", { "extensions": [".ts", ".tsx"] }],
-    "no-useless-catch": "off" // 불필요한 catch 못쓰게 하는 기능 끔
+    "no-useless-catch": "off", // 불필요한 catch 못쓰게 하는 기능 끔
+    "prettier/prettier": [
+      "error",
+      {
+        "endOfLine": "auto"
+      }
+    ]
   }
 }

.github/workflows/Dev-CD.yml

@@ -2,7 +2,7 @@ name: FrontEnd Dev CD
 
 on:
   push:
-    branches: [ "dev" ]
+    branches: ['dev']
   workflow_dispatch:
 
 jobs:
@@ -11,7 +11,7 @@ jobs:
     env:
       AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
       AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-      
+
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4

.gitignore

@@ -26,6 +26,8 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
+.env*
 .env*.local
 
 # vercel

.vscode/settings.json

@@ -1,2 +1 @@
-{
-}
+{}

settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.formatOnSave": true
+}

src/app/[userNickname]/[listId]/ListDetail.css.ts

@@ -0,0 +1,6 @@
+import { style } from '@vanilla-extract/css';
+
+export const wrapper = style({
+  position: 'relative',
+  height: '100vh',
+});

src/app/[userNickname]/[listId]/_components/BottomSheet/BottomSheet.css.ts

@@ -0,0 +1,74 @@
+import { keyframes, style } from '@vanilla-extract/css';
+
+export const backGround = style({
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+  background: 'rgba(0,0,0,0.3)',
+  zIndex: 999,
+});
+
+export const wrapper = style({
+  padding: '37px 0 43px',
+
+  position: 'fixed',
+  bottom: 0,
+  left: 0,
+  right: 0,
+
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+
+  backgroundColor: '#ffffff',
+  borderTopLeftRadius: '25px',
+  borderTopRightRadius: '25px',
+
+  transitionProperty: 'all',
+  transitionDuration: '0.2s',
+});
+
+const slideIn = keyframes({
+  from: { transform: 'translateY(100%)' },
+  to: { transform: 'translateY(0)' },
+});
+
+export const sheetActive = style({
+  animation: `${slideIn} 0.2s ease-in-out`,
+});
+
+export const sheetItemWrapper = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+
+  ':hover': {
+    backgroundColor: '#EFEFF0',
+  },
+});
+
+export const checkIcon = style({
+  display: 'none',
+  marginRight: '28px',
+
+  selectors: {
+    [`${sheetItemWrapper}:hover &`]: {
+      display: 'block',
+    },
+  },
+});
+
+export const sheetItem = style({
+  width: '100%',
+  fontSize: '1.4rem',
+  cursor: 'pointer',
+  padding: '2.5rem 2.8rem 2.5rem',
+
+  selectors: {
+    [`${sheetItemWrapper}:hover &`]: {
+      color: '#FF5454',
+    },
+  },
+});

src/app/[userNickname]/[listId]/_components/BottomSheet/BottomSheet.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import * as styles from './BottomSheet.css';
+import { MouseEventHandler } from 'react';
+import CheckIcon from '/public/icons/check_red.svg';
+import useOnClickOutside from '@/hooks/useOnClickOutside'; //바깥 영역 클릭시 바텀시트 닫히는 함수
+
+interface BottomSheetOptionsProps {
+  key: string;
+  title: string;
+  onClick: () => void;
+}
+
+interface BottomSheetProps {
+  onClose: MouseEventHandler<HTMLDivElement>;
+  isActive?: boolean; //Boolean -> boolean 수정 , 옵셔널 하게 수정
+  optionList: BottomSheetOptionsProps[];
+}
+
+function BottomSheet({ onClose, isActive, optionList }: BottomSheetProps) {
+  const { ref } = useOnClickOutside(() => {
+    onClose;
+  });
+
+  return (
+    <div className={styles.backGround} onClick={onClose}>
+      <div ref={ref} className={`${styles.wrapper} ${isActive ? `${styles.sheetActive}` : ''}`}>
+        {optionList.map((option) => (
+          <div key={option.key} className={styles.sheetItemWrapper}>
+            <div key={option.key} className={styles.sheetItem} onClick={option.onClick}>
+              {option.title}
+            </div>
+            <CheckIcon className={styles.checkIcon} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default BottomSheet;

src/app/[userNickname]/[listId]/_components/ListDetailOuter/Collaborators.css.ts

@@ -0,0 +1,61 @@
+import { style } from '@vanilla-extract/css';
+
+export const collaboratorWrapper = style({
+  position: 'relative',
+  display: 'flex',
+});
+
+export const wrapper = style({
+  display: 'flex',
+  flexDirection: 'row-reverse',
+  justifyContent: 'center',
+  alignItems: 'cemter',
+  transform: 'translateZ(0px)',
+});
+
+export const ProfileImg = style({
+  marginRight: '-10px',
+  width: '36px',
+  height: '36px',
+
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+
+  outline: '3px solid #ffffff',
+  borderRadius: '9999px',
+});
+
+export const profilePlus = style({
+  backgroundColor: '#AEB0B6',
+});
+
+export const profileText = style({
+  color: '#DEE7EE',
+  fontSize: '2rem',
+});
+
+export const collaboratorTitle = style({
+  marginRight: '11px',
+
+  fontSize: '1rem',
+  fontWeight: 600,
+});
+
+export const collaboratorsPopOverWrapper = style({
+  display: 'none',
+
+  selectors: {
+    [`${collaboratorWrapper}:hover &`]: {
+      display: 'block',
+    },
+  },
+});
+
+export const defaultProfile = style({
+  width: '36px',
+  height: '36px',
+
+  outline: '3px solid #ffffff',
+  borderRadius: '9999px',
+});

src/app/[userNickname]/[listId]/_components/ListDetailOuter/Collaborators.tsx

@@ -0,0 +1,55 @@
+import Image from 'next/image';
+import CollaboratorsPopOver from '@/app/[userNickname]/[listId]/_components/ListDetailOuter/CollaboratorsPopOver';
+import * as styles from './Collaborators.css';
+import DefaultProfile from '/public/icons/default_profile_temporary.svg';
+import PlusIcon from '/public/icons/collaborators_plus.svg';
+import { CollaboratorType } from '../../mockData/mockdataType';
+
+interface CollaboratorsProps {
+  collaborators: CollaboratorType[] | null;
+}
+
+function Collaborators({ collaborators }: CollaboratorsProps) {
+  const collaboratorsList = collaborators && collaborators?.length >= 3 ? collaborators?.slice(0, 3) : collaborators;
+
+  return (
+    <>
+      {collaborators && (
+        <div className={styles.collaboratorWrapper}>
+          <div className={styles.collaboratorsPopOverWrapper}>
+            <CollaboratorsPopOver collaborators={collaborators} />
+          </div>
+          <span className={styles.collaboratorTitle}>콜라보레이터</span>
+          <div className={styles.wrapper}>
+            <div className={`${styles.ProfileImg} ${styles.profilePlus}`}>
+              <span className={styles.profileText}>{`${collaborators && collaborators?.length - 3}`}</span>
+              <PlusIcon alt="더하기 모양 아이콘" />
+            </div>
+            {collaboratorsList?.map((item: CollaboratorType) => {
+              return (
+                <div key={item.id}>
+                  {item.profileImageUrl ? (
+                    <Image
+                      className={styles.ProfileImg}
+                      src={item.profileImageUrl}
+                      alt="사용자 프로필 이미지"
+                      width={35}
+                      height={35}
+                    ></Image>
+                  ) : (
+                    <DefaultProfile
+                      className={`${styles.ProfileImg} ${styles.defaultProfile}`}
+                      alt="사용자 프로필 이미지"
+                    />
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default Collaborators;

src/app/[userNickname]/[listId]/_components/ListDetailOuter/CollaboratorsPopOver.css.ts

@@ -0,0 +1,57 @@
+import { style } from '@vanilla-extract/css';
+
+export const wrapper = style({
+  padding: '12px',
+  height: '142px',
+  width: 'auto',
+
+  position: 'absolute',
+  top: '33px',
+  right: '-10px',
+
+  overflow: 'scroll',
+  borderRadius: '10px',
+  background: 'rgba(255, 255, 255, 0.8)',
+  boxShadow: '0px 4px 4px 0px rgba(0, 0, 0, 0.25)',
+  zIndex: 20,
+
+  '::-webkit-scrollbar': {
+    display: 'none',
+  },
+});
+
+export const listWrapper = style({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  gap: '8px',
+});
+
+export const itemWrapper = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+});
+
+export const profileImage = style({
+  width: '25px',
+  height: '25px',
+
+  borderRadius: '9999px',
+});
+
+export const nickname = style({
+  width: '85px',
+
+  fontSize: '1.2rem',
+  fontWeight: 600,
+  letterSpacing: '-0.36px',
+});
+
+export const defaultProfileImage = style({
+  width: '25px',
+  height: '25px',
+
+  borderRadius: '9999px',
+  backgroundColor: '#494949',
+});