Merge remote-tracking branch 'upstream/dev' into feature/list_detail_…

…component

# Conflicts:
#	src/app/[userNickname]/[listId]/_components/BottomSheet/BottomSheet.tsx
#	yarn.lock

.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

@@ -2,6 +2,8 @@
 
 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;
@@ -11,17 +13,24 @@ interface BottomSheetOptionsProps {
 
 interface BottomSheetProps {
   onClose: MouseEventHandler<HTMLDivElement>;
-  isActive: Boolean;
+  isActive?: boolean; //Boolean -> boolean 수정 , 옵셔널 하게 수정
   optionList: BottomSheetOptionsProps[];
 }
 
 function BottomSheet({ onClose, isActive, optionList }: BottomSheetProps) {
+  const { ref } = useOnClickOutside(() => {
+    onClose;
+  });
+
   return (
     <div className={styles.backGround} onClick={onClose}>
-      <div className={`${styles.Wrapper} ${isActive ? `${styles.sheetActive}` : ''}`}>
+      <div ref={ref} className={`${styles.wrapper} ${isActive ? `${styles.sheetActive}` : ''}`}>
         {optionList.map((option) => (
-          <div key={option.key} className={styles.sheetItem} onClick={option.onClick}>
-            {option.title}
+          <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>

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',
+});