[노철] - 계획 컴포넌트 구현

src/app/(header)/plans/[planId]/index.scss

@@ -1,5 +1,18 @@
 .plans-page {
   padding: 2.5rem;
+  display: flex;
+  flex-direction: column;
+
+  &__remind {
+    &:before {
+      content: '';
+      display: block;
+      height: 0.3px;
+      background-color: var(--origin-gray-100);
+      border: 1px solid var(--origin-gray-100);
+      margin: 5rem 0 5rem 0;
+    }
+  }
 
   &__button__container {
     display: flex;

src/app/(header)/plans/[planId]/page.tsx

@@ -1,6 +1,13 @@
 'use client';
 
-import { Button, Modal, ModalBasic, ReadOnlyRemind } from '@/components';
+import {
+  Button,
+  Modal,
+  ModalBasic,
+  ReadOnlyPlan,
+  ReadOnlyRemind,
+} from '@/components';
+import { PlanData } from '@/components/ReadOnlyPlan/ReadOnlyPlan';
 import { checkIsSeason } from '@/utils/checkIsSeason';
 import classNames from 'classnames';
 import Link from 'next/link';
@@ -28,10 +35,26 @@ export default function PlanIdPage({ params }: { params: { planId: string } }) {
   const deletePlanAPI = (planId: string) => {
     console.log(`${planId}에 해당하는 계획 삭제 API 호출 `);
   };
+  const planData: PlanData = {
+    id: 2342342, //계힉 Id
+    userId: 2342342, // 유저 Id
+    nickname: 'nononoere', // 유저 닉네임
+    title: '테스테 타이틀이양', //계획 타이틀
+    description: '테스트 설명이야', // 계획 설명
+    isPublic: true, // 공개여부
+    tags: ['태그1', '태그1', '태그1', '태그1', '태그1'], // tag 리스트,  태그는 타입 변경 예정
+    ajajas: 32343, // 아자자 개수
+    isAjajaOn: true, // 아자자 클릭 여부
+    isCanAjaja: false, // 응원 메세지 알람 여부
+    createdAt: '2023-06-15', // 계획 생성 일자
+  };
 
   return (
     <div className={classNames('plans-page')}>
-      {isMyPlan && <ReadOnlyRemind planId={planId} />}
+      <ReadOnlyPlan isMine={isMyPlan} planData={planData} />
+      <div className="plans-page__remind">
+        {isMyPlan && <ReadOnlyRemind planId={planId} />}
+      </div>
 
       {isMyPlan && !isSeason && (
         <div className={classNames('plans-page__button__container')}>

src/app/page.tsx

@@ -1,3 +1,3 @@
 export default function Home() {
-  return <h1>올해도 아좌좌 ㅋ_ㅋ</h1>;
+  return <>올해도 아좌좌</>;
 }

src/components/IconSwitchButton/index.scss

@@ -1,5 +1,3 @@
-@import '@/styles/variables';
-
 .icon__wrapper {
   width: 100%;
   position: absolute;

src/components/InputTag/InputTag.tsx

@@ -1,28 +1,34 @@
 'use client';
 
-import { FormEvent, useState } from 'react';
+import { FormEvent } from 'react';
 import { Tag } from '..';
 import './index.scss';
 
 interface InputTagProps {
   style?: React.CSSProperties;
-  onSubmit: (submitValue: string) => void;
+  inputValue: string;
+  onSubmit: () => void;
+  onChange: (changeValue: string) => void;
 }
-export default function InputTag({ style, onSubmit, ...props }: InputTagProps) {
-  const [inputValue, setInputValue] = useState<string>('');
-
+export default function InputTag({
+  style,
+  onChange,
+  inputValue,
+  onSubmit,
+  ...props
+}: InputTagProps) {
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(event.target.value);
+    onChange(event.target.value);
   };
   const handleInputSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    onSubmit(inputValue);
-    setInputValue('');
+    onSubmit();
   };
   return (
     <Tag color="orange-200" style={style} {...props}>
-      <form onSubmit={handleInputSubmit}>
+      <form className="inputTag" onSubmit={handleInputSubmit}>
         <input
+          className="inputTag__tag"
           type="text"
           placeholder="태그를 입력해주세요"
           value={inputValue}

src/components/InputTag/index.scss

@@ -1,8 +1,22 @@
-input {
-  border: none;
-  background-color: inherit;
-  width: 8rem;
-  &:focus {
-    outline: none;
+.inputTag {
+  position: relative;
+  &:focus-within {
+    &::after {
+      content: '엔터시 입력, 태그 클릭시 삭제 , 최대 5개 ';
+      position: absolute;
+      color: black;
+      left: 0;
+      bottom: -20px;
+      display: block;
+    }
+  }
+  &__tag {
+    border: none;
+    background-color: inherit;
+    width: 8rem;
+    &:focus {
+      outline: none;
+      overflow: visible;
+    }
   }
 }

src/components/ReadOnlyPlan/ReadOnlyPlan.tsx

@@ -0,0 +1,122 @@
+import { Color } from '@/types';
+import classNames from 'classnames';
+import { AjajaButton, IconSwitchButton, PlanInput, Tag } from '..';
+import './index.scss';
+
+interface ReadOnlyPlanProps {
+  isMine: boolean; // 나/ 타인 구분
+  planData: PlanData;
+}
+export type PlanData = {
+  id: number; //계힉 Id
+  userId: number; // 유저 Id
+  nickname: string; // 유저 닉네임
+  title: string; //계획 타이틀
+  description: string; // 계획 설명
+  isPublic: boolean; // 공개여부
+  tags: string[]; // tag 리스트,  태그는 타입 변경 예정
+  ajajas: number; // 아자자 개수
+  isAjajaOn: boolean; // 아자자 클릭 여부
+  isCanAjaja: boolean; // 응원 메세지 알람 여부
+  createdAt: string; // 계획 생성 일자
+};
+
+export default function ReadOnlyPlan({ isMine, planData }: ReadOnlyPlanProps) {
+  const {
+    id,
+    nickname,
+    title,
+    description,
+    isPublic,
+    ajajas,
+    isAjajaOn,
+    tags,
+    createdAt,
+    isCanAjaja,
+  } = planData;
+
+  const createdYear = new Date(createdAt).getFullYear();
+
+  const colors: Color[] = [
+    'primary',
+    'orange-300',
+    'green-300',
+    'blue-300',
+    'purple-300',
+  ];
+  const handleToggleIsPublic = () => {
+    console.log(`${id}를 통해서 공개여부 변경`);
+  };
+  const handleToggleIsCanAjaja = () => {
+    console.log(`${id}를 통해서 응원메세지 알림여부 변경`);
+  };
+  return (
+    <div className="plan__container">
+      <div className="plan__header">
+        <h1 className="plan__header--text font-size-3xl">
+          {isMine ? '계획' : `${nickname}님의 계획입니다.`}
+        </h1>
+        {isMine && (
+          <IconSwitchButton
+            isActive={isPublic}
+            offIconName="PLAN_CLOSE"
+            onIconName="PLAN_OPEN"
+            onClick={handleToggleIsPublic}
+          />
+        )}
+        <span
+          className={classNames(
+            'plan__header--after color-origin-gray-200',
+            !isMine && 'bottom-line',
+          )}>
+          {isMine
+            ? `계획 공개`
+            : `${createdYear ? createdYear : '0000'}년 작성`}
+        </span>
+      </div>
+
+      <div className="plan__content">
+        <PlanInput
+          kind="title"
+          placeholder=""
+          onChangeInput={() => {}}
+          textInput={title}
+          maxLength={100}
+        />
+
+        <PlanInput
+          kind="content"
+          placeholder=""
+          onChangeInput={() => {}}
+          textInput={description}
+          maxLength={400}
+        />
+        <div className="plan__content--tags">
+          {tags.map((tag, index) => (
+            <Tag color={colors[index % 5]} key={index}>
+              {tag}
+            </Tag>
+          ))}
+        </div>
+      </div>
+
+      <div className="plan__bottom">
+        <AjajaButton isFilled={isAjajaOn} ajajaCount={ajajas} />
+        {isMine && (
+          <>
+            <IconSwitchButton
+              onIconName="NOTIFICATION_ON"
+              offIconName="NOTIFICATION_OFF"
+              isActive={isCanAjaja}
+              onClick={handleToggleIsCanAjaja}
+            />
+            <div className="plan__bottom--after color-origin-gray-200">
+              <span>월요일 18:00 마다</span>
+              <span>응원 메시지 알림 활성화 </span>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/ReadOnlyPlan/index.scss

@@ -0,0 +1,34 @@
+.plan {
+  &__container {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    &--after.bottom-line {
+      align-self: flex-end;
+    }
+  }
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: 1.75rem;
+    &--tags {
+      margin-top: -1rem;
+    }
+  }
+
+  &__bottom {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    &--after {
+      display: flex;
+      flex-direction: column;
+      text-align: center;
+    }
+  }
+}

src/components/SwitchButton/index.scss

@@ -1,5 +1,3 @@
-@import '@styles/variables';
-
 .switch {
   position: relative;
   display: inline-block;

src/components/Tag/index.scss

@@ -5,7 +5,7 @@
   color: white;
   padding: 0 0.5rem;
   border-radius: var(--border-radius);
-  margin: auto 0.25rem;
+  margin: 0.25rem;
 
   &.pointer {
     cursor: pointer;

src/components/index.ts

@@ -13,4 +13,6 @@ export { default as RemindInput } from '@components/RemindInput/RemindInput';
 export { default as SwitchButton } from '@components/SwitchButton/SwitchButton';
 export { default as Tag } from '@components/Tag/Tag';
 export { default as WritableRemind } from '@components/Remind/WritableRemind/WritableRemind';
-export { default as WritableRemindItem } from '@components/RemindItem/WritableRemindItem/WritableRemindItem';
+export { default as WritableRemindItem } from '@components/RemindItem/WritableRemindItem/WritableRemindItem';
+
+export { default as ReadOnlyPlan } from '@components/ReadOnlyPlan/ReadOnlyPlan';