안녕하세요 강사님 강의 수강완료 후 복습 중 페이지 구성에 질문이 있어 글남깁니다.!

안녕하세요 강사님. 

복습 중에 질문이 있어 문의드립니다. 현재  복습을 목적으로

개인 페이지를 만들어보고 있는데.. 

회원가입 버튼을 위 사진과 같이 구성을 하였고,

회원가입의 url은 localhost:3000/accounts/signup

으로 지정한 상태입니다. 

제가 질의드리고 싶은것 Create Account 아이콘에

회원가입 url으로 링크를 걸어 버튼이 클릭되면 

회원 가입 Form을 호출하는 방식도 가능한지

문의드립니다.

추가로 태그를 포스트 하단에 아래와 같이 자동으로 

입력되게 하기 위해.. 아래 코드만들었고 작동을 잘 하지만..

좀더 간단한 방법도 있는지... 같이 문의드립니다.

- 작업 결과

장고 / Post, Tag 모델,

content에서 #으로 시작하는 문자열 추출후 Tag 생성/저장

# models.py
class Post(BaseModel):
	author = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, related_name='post_author')
	category = models.CharField(max_length=100, default='all')
	title = models.CharField(max_length=100)
	content = models.TextField()
	attached_file = models.FileField(blank=True, upload_to="shareinfo/post/cover/%Y/%m/%d")
	cover_img = models.ImageField(blank=True, upload_to="shareinfo/post/cover/%Y/%m/%d")
	post_tag_set = models.ManyToManyField('Tag', blank=True)
	like_user_set = models.ManyToManyField(settings.AUTH_USER_MODEL, blank=True, related_name='post_likes')
	ip = models.GenericIPAddressField(null=True, editable=False)

	class Meta:
		ordering = ['-id']

	def __str__(self):
		return self.title + ' | ' + str(self.author)

	def cover_img_url(self):
		if self.cover_img:
			return self.cover_img.url
		else:
			return self.title

	def get_absolute_url(self):
		return reverse('shareinfo:post_detail', args=[self.pk])

	def extract_tag_list(self):
		tag_name_list = re.findall(r"#([a-zA-Z\dㄱ-힣]+)", self.content)
		tag_list = []
		for tag_name in tag_name_list:
			tag, _  = Tag.objects.get_or_create(name=tag_name) # tag 반환값, 반환결과에 대한 불리언 값
			tag_list.append(tag)
		return tag_list

	def is_like_user(self, user):
		return self.like_user_set.filter(pk=user.pk).exists()

class Tag(models.Model):
	name = models.CharField(max_length=20, unique=True)

	def __str__(self):
		return self.name

#serializer

class PostSerializer(ModelSerializer):
	author = AuthorSerializer(read_only=True)
	is_like = serializers.SerializerMethodField("post_likes_field")
	post_tag_set = serializers.CharField(source='extract_tag_list')

	class Meta:
		model = Post
		fields = '__all__'

React / post_tag_set을 받아서 문자열을 

배열 형태로 변경 후 map함수를 활용하여 

태그 컴포넌트 생성

import * as React from 'react';
import Chip from '@mui/material/Chip';

export default function ChipsArray({post}) {
    const handleClick = () => {
        console.info('You clicked the Tag.');
    };

// 문자열로 받은 post_tag_set을 replace와 map을 활용하여 태그 추출 -> 새로운 배열 생성
    const tag_set = post.post_tag_set
    const string_to_array = tag_set.replace(/ /g, '').replace(/\[/, '').replace(/\]/, '').split(',')
    const tag_set_array = string_to_array.map(tag => tag.slice(5, -1))

// 생성 후 map을 이용한 태그 컴포넌트 생성
    return (
        tag_set_array.map((data) => {
            return (
                <Chip label={data} onClick={handleClick} key={data} sx={{fontSize: '15px', marginRight: 1, marginTop: 1}}/>
            );
        })
    );

}