Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FE-29 🔀 epic브랜치 최신화 #50

Merged
merged 12 commits into from
Jul 21, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@ module.exports = {
'react/jsx-props-no-spreading': 'off',
'no-use-before-define': 'off',
'@typescript-eslint/no-use-before-define': ['off'],
"react/require-default-props": 'off',
"react/self-closing-comp": 'off',
},
settings: {
react: {
Expand Down
16 changes: 13 additions & 3 deletions src/components/Card/CommentCard.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import React from 'react';
import Image from 'next/image';
import { CommentCardProps } from '@/types/CommentCardTypes';
import { sizeStyles, textSizeStyles, gapStyles, paddingStyles, contentWidthStyles } from '@/styles/CommentCardStyles';

export interface CommentCardProps {
status: 'edit' | 'complete';
}

function CommentCard({ status }: CommentCardProps) {
return (
<div
Expand All @@ -17,8 +20,14 @@ function CommentCard({ status }: CommentCardProps) {
<div className={`flex-col justify-start items-start ${gapStyles.sm} ${gapStyles.md} ${gapStyles.lg} inline-flex ${contentWidthStyles.sm} ${contentWidthStyles.md} ${contentWidthStyles.lg}`}>
<div className='justify-between items-center w-full inline-flex'>
<div className='justify-start items-start gap-2 flex'>
<div className={`text-zinc-600 font-normal font-pretendard leading-normal ${textSizeStyles.sm.name} ${textSizeStyles.md.name} ${textSizeStyles.lg.name}`}>지킬과 하이드</div>
<div className={`text-zinc-600 font-normal font-pretendard leading-normal ${textSizeStyles.sm.time} ${textSizeStyles.md.time} ${textSizeStyles.lg.time}`}>1시간 전</div>
<div className={`text-zinc-600 font-normal font-pretendard leading-normal ${textSizeStyles.sm.name} ${textSizeStyles.md.name} ${textSizeStyles.lg.name}`}>
{/* 테스트 텍스트입니다. */}
지킬과 하이드
</div>
<div className={`text-zinc-600 font-normal font-pretendard leading-normal ${textSizeStyles.sm.time} ${textSizeStyles.md.time} ${textSizeStyles.lg.time}`}>
{/* 테스트 텍스트입니다. */}
1시간 전
</div>
</div>
{status === 'edit' && (
<div className='justify-start items-start gap-4 flex'>
Expand All @@ -30,6 +39,7 @@ function CommentCard({ status }: CommentCardProps) {
<div
className={`w-full text-zinc-800 font-normal font-pretendard ${textSizeStyles.sm.content} ${textSizeStyles.md.content} ${textSizeStyles.lg.content} ${contentWidthStyles.sm} ${contentWidthStyles.md} ${contentWidthStyles.lg}`}
>
{/* 테스트 텍스트입니다. */}
오늘 하루 우울했었는데 덕분에 많은 힘 얻고 갑니다. 연금술사 책 다시 사서 오랜만에 읽어봐야겠어요!
</div>
</div>
Expand Down
21 changes: 12 additions & 9 deletions src/components/Card/EpigramCard.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react';

// figma 상으로는 sm ~ 3xl 사이즈로 구현되어 있는데, tailwind 환경을 반영해
// base ~ 2xl 으로 정의했습니다.
// xs ~ 2xl 으로 정의했습니다.
const sizeStyles = {
base: 'w-[286px] max-h-[132px]',
xs: 'w-[286px] max-h-[132px]',
sm: 'sm:w-[312px] sm:max-h-[152px]',
md: 'md:w-[384px] md:max-h-[180px]',
lg: 'lg:w-[540px] lg:max-h-[160px]',
Expand All @@ -12,7 +12,7 @@ const sizeStyles = {
};

const textSizeStyles = {
base: 'text-xs',
xs: 'text-xs',
sm: 'sm:text-sm',
md: 'md:text-base',
lg: 'lg:text-xl',
Expand All @@ -22,34 +22,37 @@ const textSizeStyles = {

function EpigramCard() {
return (
<div className={`relative flex-col justify-start items-end gap-2 inline-flex ${sizeStyles.base} ${sizeStyles.sm} ${sizeStyles.md} ${sizeStyles.lg} ${sizeStyles.xl} ${sizeStyles['2xl']}`}>
<div className={`relative flex-col justify-start items-end gap-2 inline-flex ${sizeStyles.xs} ${sizeStyles.sm} ${sizeStyles.md} ${sizeStyles.lg} ${sizeStyles.xl} ${sizeStyles['2xl']}`}>
<div className='w-full p-[22px] bg-white rounded-[14.67px] shadow border border-zinc-100 flex-col justify-start items-start flex relative overflow-hidden'>
{/* eslint-disable-next-line */}
<div className='absolute inset-0 bg-stripes w-full h-full'></div> {/* 줄무늬를 만들려면 비어있는 div가 필요합니다. */}
<div className='relative w-full z-10 flex flex-col justify-start items-start flex-1'>
<div className='self-stretch flex-col justify-start items-start gap-2 flex'>
<div
className={`self-stretch ${textSizeStyles.base} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-neutral-700 font-normal font-iropkeBatang leading-normal`}
className={`self-stretch ${textSizeStyles.xs} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-neutral-700 font-normal font-iropkeBatang leading-normal`}
>
{/* 테스트 텍스트입니다. */}
오랫동안 꿈을 그리는 사람은 마침내 그 꿈을 닮아 간다.
</div>
<div
className={`self-stretch ${textSizeStyles.base} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-right text-slate-400 font-normal font-iropkeBatang leading-normal`}
className={`self-stretch ${textSizeStyles.xs} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-right text-slate-400 font-normal font-iropkeBatang leading-normal`}
>
- 앙드레 말로 -
{/* 테스트 텍스트입니다. */}- 앙드레 말로 -
</div>
</div>
</div>
</div>
<div className='justify-start items-start gap-2 inline-flex'>
<div
className={`text-right ${textSizeStyles.base} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-slate-400 font-normal font-iropkeBatang leading-normal`}
className={`text-right ${textSizeStyles.xs} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-slate-400 font-normal font-iropkeBatang leading-normal`}
>
{/* 테스트 텍스트입니다. */}
#나아가야할때
</div>
<div
className={`text-right ${textSizeStyles.base} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-slate-400 font-normal font-iropkeBatang leading-normal`}
className={`text-right ${textSizeStyles.xs} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-slate-400 font-normal font-iropkeBatang leading-normal`}
>
{/* 테스트 텍스트입니다. */}
#꿈을이루고싶을때
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
/*
1개의 감정 아이콘 카드를 랜더링 합니다.
아이콘의 타입, 상태, 크기, 클릭 이벤트를 관리합니다.
아이콘 타입과 상태에 따라 아이콘의 모양과 스타일을 조정합니다.
*/

import React from 'react';
import cn from '@/lib/utils';
import Image from 'next/image';
Expand Down Expand Up @@ -104,11 +110,4 @@ function EmotionIconCard({ iconType = '감동', state = 'Default', size = 'sm',
);
}

EmotionIconCard.displayName = 'EmotionIconCard';

// 기본 props 설정
EmotionIconCard.defaultProps = {
onClick: () => {},
};

export default EmotionIconCard;
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
/*
여러 개의 EmotionIconCard를 관리합니다.
사용자 인터페이스에 필요한 상호 작용 로직을 포함합니다.
*/

import React, { useState } from 'react';
import InteractiveEmotionIconCard from '@/components/Emotion/card/InteractiveEmotionIconCard';
import EmotionIconCard from '@/components/Emotion/EmotionCard';
import useMediaQuery from '@/hooks/useMediaQuery';
import { EmotionType, EmotionState } from '@/types/EmotionTypes';

Expand Down Expand Up @@ -52,7 +57,7 @@ function EmotionSelector() {
return (
<div className={`justify-start items-start inline-flex ${containerClass}`}>
{(['감동', '기쁨', '고민', '슬픔', '분노'] as const).map((iconType) => (
<InteractiveEmotionIconCard key={iconType} iconType={iconType} size={cardSize} state={states[iconType]} onClick={() => handleCardClick(iconType)} />
<EmotionIconCard key={iconType} iconType={iconType} size={cardSize} state={states[iconType]} onClick={() => handleCardClick(iconType)} />
))}
</div>
);
Expand Down
12 changes: 0 additions & 12 deletions src/components/Emotion/card/InteractiveEmotionIconCard.tsx

This file was deleted.

32 changes: 22 additions & 10 deletions src/components/Header/Header.tsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,35 @@
import React from 'react';
import { useRouter } from 'next/router';
import Image from 'next/image';
import { HeaderProps } from '../../types/Header';
import { useToast } from '../ui/use-toast';
import LOGO_ICON from '../../../public/epigram-icon.png';
import ARROW_LEFT_ICON from '../../../public/icon/arrow-left-icon.svg';
import PROFILE_ICON from '../../../public/icon/profile-icon.svg';
import SEARCH_ICON from '../../../public/icon/search-icon.svg';
import SHARE_ICON from '../../../public/icon/share-icon.svg';

// TODO 네비게이션 바를 나타내는 컴포넌트 입니다.
// TODO 상위 컴포넌트에서 Props를 받아 원하는 스타일을 보여줍니다.
// TODO 사용 예시
// TODO <Header icon='back' routerPage='원하는 페이지 주소' isLogo={false} insteadOfLogo='센터 텍스트' isProfileIcon={false} isShareIcon={false} isButton textInButton='버튼 텍스트' disabled={false} onClick={동작할 함수} />
// TODO <Header icon='search' routerPage='/search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />;
// TODO icon: 'back'을 사용할 경우 routerPage의 값을 무조건 지정해줘야 합니다.
// TODO isLogo={false}일 경우 insteadOfLogo의 값을 무조건 지정해줘야 합니다.
// TODO isButton 일 경우 textInButton의 값을 무조건 지정해줘야 합니다.
// TODO SHARE_ICON 추가 시 토스트 기능도 사용하려면 해당 컴포넌트 아래 <Toaster /> 를 추가해주세요.
// NOTE 네비게이션 바를 나타내는 컴포넌트 입니다.
// NOTE 상위 컴포넌트에서 Props를 받아 원하는 스타일을 보여줍니다.
// NOTE 사용 예시
// NOTE <Header icon='back' routerPage='원하는 페이지 주소' isLogo={false} insteadOfLogo='센터 텍스트' isProfileIcon={false} isShareIcon={false} isButton textInButton='버튼 텍스트' disabled={false} onClick={동작할 함수} />
// NOTE <Header icon='search' routerPage='/search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />;
// NOTE icon: 'back'을 사용할 경우 routerPage의 값을 무조건 지정해줘야 합니다.
// NOTE isLogo={false}일 경우 insteadOfLogo의 값을 무조건 지정해줘야 합니다.
// NOTE isButton 일 경우 textInButton의 값을 무조건 지정해줘야 합니다.
// NOTE SHARE_ICON 추가 시 토스트 기능도 사용하려면 해당 컴포넌트 아래 <Toaster /> 를 추가해주세요.

export interface HeaderProps {
icon: 'back' | 'search' | '';
routerPage: string;
isLogo: boolean;
insteadOfLogo: string;
isProfileIcon: boolean;
isShareIcon: boolean;
isButton: boolean;
textInButton: string;
disabled: boolean;
onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
}

function Header({ isLogo, icon, insteadOfLogo, isButton, isProfileIcon, isShareIcon, textInButton, routerPage, disabled, onClick }: HeaderProps) {
const router = useRouter();
Expand Down
3 changes: 0 additions & 3 deletions src/types/CommentCardTypes.ts

This file was deleted.

12 changes: 0 additions & 12 deletions src/types/Header.ts

This file was deleted.

Loading